Is a better emoji picker possible?

There are so many emoji's to choose from, we could put them all in there but it won't be pretty. Does anyone have any idea how to improve this? I couldn't think of anything other than one very long dropdown list.

Anyway, I made this cool graph with bars of the usage of official emojis (the real reason for this post)

maybe some of the lesser used ones can go? I am not sure.

Wooow, I'm super impressed with the chart, Zeeslag!

I believe there are a few things we can do. Top of mind:

(1) Rely on a JavaScript-based emoji picker

(2) Use a <select> tag

(3) ?

Although it would look great, (1) isn't an option I'd like to consider. I'd like to keep using only CSS/HTML. It's definitely an added constraint but I feel it adds a ton of benefits!

So we're left with (2), which is definitely an option. There's a trade-off though (which might be subjective) in terms of experience. Thankfully the list of emoji isn't yet big enough to prompt serious usability issues.

Let's use this thread to think about ideas for when we reach a consequent size of emojis!

I had a little think about this and came up with some potential thoughts on a solution for having emoji organised even with a lot more available and still not using any JS (and not needing to scroll through a massive select!)

https://marzka.cafe/dump/emoji-picker.html

Would be interested to hear people's thoughts on a solution like that :)

edit:

one thing I will say is that the one limitation I feel there is with the approach I gave is that it can't auto-close other tabs when you open one of the tabs which may feel clunky to some - but that's just a part of the no JS constraint and also really isn't that big an issue especially depending on taste/what people are used to, but I thought I'd mention it anyway for clarity's sake

Last edited on 2022-07-15 13:52:30

mmmmh that might just work marzka.

i'm a big fan of marzka's mockup! i'd personally be 100% willing to tolerate no auto-close tabs if it meant an easier and wider selection of emojis in the longrun

Marzka! This is honestly incredible. I love how you worked with the no-js constrain and managed to find an elegant solution that can scale, and even provided a mockup and code snippet. Makes it incredible convenient to test it out! I'll probably be doing some tests today to see what it could look like on status.cafe. THANKS!

Alright! I've pushed a v1 -- in order not to be too disruptive at once, I've only added the different sections and a whole lot of new emojis. :) Moving forward, we might also add some CSS to get rid of the radios and get some more space. Thanks again Marzka!

looks good m15o!!! i think it would be nice in a future iteration to have the "feelings" tab further separated into the actual emojis vs the symbols/objects like the heart or lightbulb, etc. main issue is finding a tidy way to arrange that would probably require more additions to the emote list to make it even worthwhile (namely for said "objects"), and there's lots as is. wouldn't want to clutter the list!

sifting through emotes by total use and replacing a couple that haven't been utilized at all might help? idk lol, am mostly just riffing here. what we've got so far is really great :]

Last edited on 2022-07-19 07:05:24

The new sections for emojis look very good. From here I think any changes depend on personal preference but I have a couple of suggestions that could maybe work in the future. Maybe at the top we could have a frequently used tab, have the emojis sorted by usage in the categories, and a custom field where you could insert your own emoji if you have an emoji picker thing on your device.

I think all these suggestions are connected in some way. Like said before, some emojis that are less used in categories could be dropped to declutter it. And then they could reappear if more people would pick it in the custom field.

Really enjoying the progress and suggestions so far! Keep it up all!

Sort of a necrobump here and probably something you guys already know, but each emoji has a unique text descriptor. We could offer an optional text field below the current emoji selector, that looks for an emoji with that specific name. If it doesn't find it or the text field is empty, the selected emoji is used instead.

For users, there are a lot of websites that list emojis with their name so it shouldn't be much of a problem.

The official emoji list is hosted at https://unicode.org/Public/emoji/latest/emoji-test.txt; I found this parser but the emoji.json file had some useless information and it was one version behind, so I modified it and created a version for Emoji 14.0.

Last edited on 2022-09-21 14:18:59