rugk / awesome-emoji-picker

Add-on/WebExtension that provides a modern emoji picker that you can use to find and copy/insert emoji into the active web page.
https://addons.mozilla.org/firefox/addon/awesome-emoji-picker/?src=external-github-top
Other
103 stars 10 forks source link

Add copy on Ctrl+C and context menus for each emoji #100

Open garretwilson opened 4 years ago

garretwilson commented 4 years ago

Edit (by @rugk): The scope of this issue has been redefined in https://github.com/rugk/awesome-emoji-picker/issues/100#issuecomment-650396429

This is a really good emoji picker! Congratulations and thank you!!

But it needs a few usability tweaks to make it really awesome.

Let's say that I hit Ctrl+Shift+. to bring up the picker and then type "joy". I am presented a set of options. It is at this point where the picker UI needs a little bit of usability improvement.

So thanks again for the great start on this emoji picker. I hope you can make it truly awesome; it's so close to being awesome already!

rugk commented 4 years ago

First of all, thanks for the gratitude. If you want to find more information on how to support us, have a look at https://github.com/rugk/awesome-emoji-picker/blob/master/CONTRIBUTING.md#support-us. 😃

That said, next time, please open a new issue for each idea/issue/bug you have, so they can be tracked separately. Also, please mind to search for existing issues before opening a new issue for a feature or bug.

Arrow Navigation

This is already tracked in #41. And there is happy news for you, actually, because there is a good chance this will be implemented in the next version.

Copy Using Ctrl+C

I'd also say this belongs to #41. However, I don't think this is very useful, because while Ctrl+C is well known for copying, it only applies when text is selected. You don't select an emoji with this add-on you pick it. :stuck_out_tongue_winking_eye: No, srsly, you see no blue selection bar and thus I guess people won't get this would work. So UX-wise, I don't think this is useful. What makes much more sense is just using Enter/Return or space for it. This is included in #41 and actually also works today somewhat: Cycle through your emojis by using tab to change the focus and then use Enter or space to select one.

Insert Not Copy on Enter:

Again the same topic, although your idea is interesting. That said, I'll still think it's quite intuitive to differentiate between the keys here, because how should a user know, which key does what (and what exactly one does not?). Also what should clicking then do? (So I don't agree on the UX aspects here.)

The current behavior both copies and inserts the emoji. But I would seldom need to do both.

You can change this behaviour in the options.

If I insert it, why do I need it in my clipboard?

This is more or less a workaround that has been introduced, because some sites don't properly work when trying to insert the emoji directly. See this label for known site issues.

The problem here is that I may be working on a large development project or typing a long description, and I have something important in my clipboard. I may just want to insert an emoji. But why should I lose everything in my clipboard just to do that?

Thanks for the use case. Indeed, I acknowledge this is a problem. At least you can partially (or totally) disable that behaviour in the settings (e.g. because of that reason).

Thanks for the feedback anyway. Do you think #41 addresses all your concerns, so I can close this one in favor of the other one?

garretwilson commented 4 years ago

The problem here is that I may be working on a large development project or typing a long description, and I have something important in my clipboard. I may just want to insert an emoji. But why should I lose everything in my clipboard just to do that?

Thanks for the use case. Indeed, I acknowledge this is a problem. At least you can partially (or totally) disable that behaviour in the settings (e.g. because of that reason).

But I don't want to disable copying. It's just a separate use case altogether.

Have you used the WhatsApp desktop app? Or the Telegram desktop app? In either of these I can hit the : key and type the name of an emoji. (So in fact, Ctrl+Shift+: might be a better hotkey for your add-on, but that's a trivial thing.) Then in both of these applications, I can hit Enter to select the emoji to have it inserted.

Can you imagine if this erased my clipboard!??? 😮

In fact do you know how I just entered that emoji 😮 above, here on GitHub? I again hit : and typed open_mouth and then hit Enter. It inserted the emoji. Can you imagine if this erased my clipboard, too? 😱

So we see a pattern:

So there shouldn't be a need to do a "workaround" by going into the settings. Just don't insert anything into the clipboard when I hit Enter.

But that doesn't mean I still don't need to insert the emoji into the clipboard sometimes. Your add-on is so good that I may want to switch to Firefox just to use the emoji picker, and then switch back to insert it into some other app. But that shouldn't be done by the standard key. There needs to be some other keypress for copying the emoji. What better than Ctrl+C?

You don't select an emoji with this add-on you pick it.

That is an odd thing to say. If you don't select an emoji, how can you insert it? Of course you select it. You just use the focus indicator rather than the selection indicator.

No, srsly, you see no blue selection bar …

That just means you need to improve the UI of your selection. Because you do have a selection, otherwise we couldn't know which emoji we were inserting!

So you can either prevent us from using Ctrl+C because you can't make the selector blue, or you can allow us to use Ctrl+C and say that one day you'll improve the selector color. I fail to see why the former is the better choice …

rugk commented 4 years ago

Reg shortkey insertion: Yes, I know this, actually you can use it on GitHub too, as you've noticed. Anyway, it's a totally different UX IMHO, as you do not select something from a list, but enter it by a text "autocompletion". FYI this add-on may also enable that feature on all websites (see https://github.com/rugk/awesome-emoji-picker/issues/66) in the future.

That said, I totally see that these are different use cases that I just want to summary right now (from what I understood):

Going back to the : feature, I would not call this an "emoji picker". Actually this feature is well known by the name “emoji autocompletion”. The difference is, when you write it the way with : you actually want to "write" an emoji and to do that, you just write it's name and select the one you want. And emoji picker like this add-on is rather a thing you "click" on and a popup opens, where you can search for your emoji and insert it, e.g. like this in Mastodon (and in many messenger apps, Twitter etc.): grafik

Alone visually it looks more similar. However, in an emoji picker you can correct your result, search again and see all results etc. It's a slightly different UX experience.

That said, there is one thing I agree on: They both usually don't copy an emoji to the clipboard. Given that, we'd have to look on why we actually need to copy it. Given our two use cases above, we have:

Now, there are websites for the last thing too, but an add-on is obviously more convenient.

That just means you need to improve the UI of your selection. Because you do have a selection, otherwise we couldn't know which emoji we were inserting!

This is correct and already done as part of #41. But even if we'd give them a big blue background when we cycle through them, that does not change the fact that users don't expect that you can use a Ctrl+C short hot key to copy the emoji. When do users expect that? If we are in a file manager and have a file selected or if we have a text cursor and e.g. also even an emoji selected (in an input box or textarea etc.). I can't recall more situations. (Or if we have a button labelled "copy" of course.) The problem here is that we are neither in a file manager (and I don't want to make it look as if we are :see_no_evil:) and this is also no input box. See e.g. how emojipedia also shows their emoji to copy in an input box and with a clearly labelled button next to it.


All I want to say is: Users won't discover this feature on their own. And I see no way to make it more discoverable in the UI. (It makes total sense semantically, I know, but you likely won't find it unless someone tells you.)

That does not mean it could not be a good addition as a "power feature", because adding it breaks no user workflow, you cannot copy something else there at that point e.g.

In the next comment I'll describe some ideas on how that may look.


Off-topic, but also note that if you just want to copy an emoji to your clipboard you can also use the address bar.

rugk commented 4 years ago

As such, I'd be fine with this idea if:

As for the new feature:

Whether both are technically possible in a good way I'm not yet totally sure, especially given we may need the new contextmenu permission.

¹ only for the "workaround use case" this may be impractical, so maybe an additional setting could help here, but actually I'd say that is not worth it.

And… I'm of course happy to accept PR's for this feature.

tdulcet commented 4 years ago

I again hit : and typed open_mouth and then hit Enter. It inserted the emoji.

If #93 is merged and you type just :open_m, it will autocomplete to :open_mouth: and then as soon as you type another character, such as a space (␣) or enter (↵), it will autocorrect to 😮 on all websites. There is a demo of this feature in #66 that you can try out now.

garretwilson commented 4 years ago

we don't remove/change the existing behaviour that happens on click/on enter or so

When the current behavior is unexpected and destructive, sometimes it needs to be changed even if current users go through a little transition in order to prevent data loss and to gain even more users. Here are the considerations:

This behavior is not consistent with what I would expect after using emoji selectors the most popular applications including Slack, WhatsApp, Telegram, etc. (You can try to make distinctions between emoji "selectors" and "pickers, but I don't buy it. What's important is not how you view the application, but how users are using it. Why not take a survey of they users?)

The behavior is destructive: information is lost. Sure maybe your initial users expect that their clipboards will be erased. But do they like that? And what about new users coming in? Will they even bother finding the GitHub page and opening a ticket? Or will they just switch to a different emoji selector, oops, I mean "picker".

~Why don't you ask your users? I'll bet they agree with me and want consistent behavior with all the other built-in emoji selectors in their applications.~ Or just make it configurable and be done with it.

rugk commented 4 years ago

If users install the add-on it's clearly stated right in the first text they read (AMO summary e.g.) that this modifies the clipboard. So this should not surprise anyone, and you are personally the first that did not like this behaviour and wanted it be be changed as a default. So I would get much more complaints if this would be annoying to a majority of the users… Also the blue confirmation message clearly tells what is happening again… As said, I won't change these defaults, as users – like you likely did – can just modify the settings if they want it changed.

Or just make it configurable and be done with it.

It is.

That said: As stated before, I changed the scope of this issue and it is clear that I'd think adding Ctrl+C support is a nice feature to have (nice to have), so I do appreciate PRs. If you really want it, you could take a look at the contributing guide and add it.

rugk commented 4 years ago

Blocked by https://github.com/missive/emoji-mart/issues/444 (unless someone wants to create a custom implementation, as said, PRs are fine)

garretwilson commented 4 years ago

Hi, I hope you're doing well. I haven't had a chance to use your great extension again until recently, on a laptop upgraded to Ubuntu 18.04. I don't know what the final status is with the ability to select with arrows and/or <tab>, but it looks like it's still not working as one would expect:

  1. I hit Ctrl+Shift+. to bring up the picker.
  2. I type thu. A thunderstorm cloud, a thumbs-down, and a thumbs-up appear.
  3. I repeatedly hit <tab>. A square selector appears on the thunderstorm cloud. I keep hitting <tab> until the square selector is on the thumbs-up emoji.
  4. I hit <enter> and the thunderstorm cloud, and not the thumbs-up emoji selection, is entered into the field at the cursor.

I don't remember all the intricacies of our discussion regarding selection, so apologies if we already covered this. I just wanted to document the problem in case you thought you had fixed it since then.

garretwilson commented 1 year ago

I filed this three years ago. I'm stopping by to check the status:

rugk commented 1 year ago

As said, still all blocked by https://github.com/missive/emoji-mart/issues/444 and also kinda by https://github.com/rugk/awesome-emoji-picker/issues/116, which in itself also has higher priority, but was kinda stuck on implementation (see PR).