Selection-js Improve the UI of the popover

May 01 '18 13:05 prateekkalra

I believe a good idea to improve the UI is to set title attribute on each "button" that accurately describes that buttons action. While the Facebook and Twitter buttons are a little self-explanatory I found myself unsure of what the other three would do.

If not a title attribute how about a smaller popover in the same style as the original popover?

May 05 '18 04:05 bbenefield89

@bbenefield89 Thanks for your suggestion, I'll certainly take that into consideration.

May 05 '18 07:05 prateekkalra

@prateekkalra Of course and if you have any ideas I wouldn't mind helping out.

May 05 '18 15:05 bbenefield89

@bbenefield89 About your suggestion , I can't really come up with a way to tell users what each option stands for , because a 'pop over' over another 'pop over' won't look good . So if you got an idea, that could help me.

May 05 '18 17:05 prateekkalra

@prateekkalra Yea I didn't really like the "create another popover" idea either but if you were to add a title attribute with a short description, in my opinion, is easy to add and will give the user some direction as to what the button will do.

Examples

COPY: This icon is really similar to my phones "update security" notification. Adding a short description "Copy Text" or "Copy text to clipboard" could solve this.
SPEECH: This icon may seem more familiar to a user in terms of "I need to speak into a microphone" instead of "This will actually speak to me". This could also be solved by replacing the icon with something that resembles noise like this icon

May 05 '18 18:05 bbenefield89

@prateekkalra I wasn't sure if this issue was still open. I implemented the title attribute as suggested by bbenefield89. Please see the pull request. I also didn't update the minified file since I wasn't sure which program you used to minify it.

May 17 '18 17:05 Thomdeleon

@Thomdeleon This title attribute makes no difference to the user's look and feel(UI). I was thinking of something which will help the user identify what each icon on the popover stands for, and I don't want to go for just a simple text as suggested by @bbenefield89.

May 17 '18 19:05 prateekkalra

Perhaps making the popover larger, with small text under each button indicating the use of each?

May 23 '18 22:05 zackhitch

Can't we use tooltip for each icon? Something like this: tooltip demo @prateekkalra Do you want complete sentences describing what each icon does?

Jun 08 '18 11:06 Shai1436

@Shai1436 Using tooltip won't be a good option as the tooltip would be shown every time whenever the user hovers over the option and the popover's UI won't be minimalistic anymore. Showing the tooltip just for the first time user selects some text, can be considered though.

Jun 08 '18 12:06 prateekkalra

We could also replace some icons with simple text, just like selection option in android phones.

Jun 08 '18 18:06 Shai1436

Hello @prateekkalra, I would like to contribute. How about adding 'help button' to the main popover? This button can open additional text field (like in 1st pic), or it can replace initial popover with the larger one that contains descriptions (2d pic). selectjs_5-2 selectjs_6-2

Jun 21 '18 03:06 hattifnatt4r

@prateekkalra is anyone working on this ?

Jul 18 '18 10:07 ankitverma2211

Hello @prateekkalra, I would like to contribute. I have done some simple work. Though not much changes but I think this looks clean and clear than the current one. Please have a look.