1103315 - [UX] hard to differentiate multiple engines with the same icon with only a tooltip

Status: RESOLVED FIXED

(Firefox :: Search, defect)

Description

[Alice0775 White]

Attachment: screenshot

Because most of the search engine icon is the same, 
I cannot be identified what is search engine because engine icon without description.


Although the tool tip is displayed only in the mouse-over, there is no feedback If you choose the search engine on the keyboard.

Comment 1

[Lawrence Mandel [:lmandel] (use needinfo)]

This doesn't look like a release blocker to me. Let's fix this in a later release.

Comment 2

[:Gavin Sharp [email: [e-mail]]]

Aleksej pointed out that I misread comment 0.

Having multiple engines with the same icon is an edge case (definitely having as many as in that screenshot is an edge case), so I think the tooltip is "good enough" for the vast majority of users. Bug 1102909 might further mitigate this by letting you specify the order. I think this is WONTFIX.

Comment 3

[[:Aleksej]]

As Alice0775 said, there is no feedback if you choose the search engine on the keyboard.

I can agree it's an edge case (I get it with Wikipedias an Wiktionaries, but I rarely use the field for them), as long as bookmark keywords are supported.

Comment 4

[[:Aleksej]]

A site providing different OpenSearch plugins with the same icon: bug 1101792.

Comment 6

[Elbart]

Above the grid with the oneoff-things, there's the string "Search xyz with:".

Why not show the name of the selected engine next to that string?

Comment 7

[Dan Wolff]

If the search box is somewhat narrow, the name of the search engine would need it's own line. Otherwise we'd just end up with "Wikip...", and miss the crucial end: "(en)" or "(fr)".

Comment 8

[Albert Scheiner [:alberts]]

(In reply to :Gavin Sharp [email: [e-mail]] from comment #2)
> 
> Having multiple engines with the same icon is an edge case

Gavin, are you sure about that? Than I might be one of the only non-native English speakers who has e.g. two wikipedia versions installed in the list, the English one and the German one. Currently I differentiate them (quicker than with the tooltip) via the icon size as one is - lucky me - a little bigger.

Before ddg had the nice region switcher I also had one ddg/de and one ddg/int(en-us) installed.

Comment 9

[:Gavin Sharp [email: [e-mail]]]

(In reply to Albert Scheiner [:alberts] from comment #8)
> > Having multiple engines with the same icon is an edge case
> 
> Gavin, are you sure about that?

Yes. Just having additional OpenSearch engines installed at all is an edge case, given the relative discoverability of that functionality (though that discoverability has been improved in Firefox 34).

Comment 10

[Tim Nguyen :ntim]

Engines with the same placeholder icon are also hard to distinguish.

Comment 11

[Lukas Blakk [:lsblakk] use ?needinfo]

Based on comment 2, this is not a release tracking issue.

Comment 12

[heraldo]

I strongly disagree with Gavin, this is clearly a regression from a user perspective.
How much of a corner case is it to have multilingual users who have a few language versions of Wikipedia + Wiktionary search in the search bar? Just by having two same favicons in the new search engine grid is "not good enough" anymore IMO.

Comment 13

[heraldo]

Attachment: wikipedia search in a few languages

Comment 14

[:Gavin Sharp [email: [e-mail]]]

I don't think you're disagreeing with me - I didn't claim this wasn't a user regression from a user perspective, I just pointed out that the vast majority of our users won't be affected by this.

Do you have a suggestion for how we might address this problem within the constraints of the new UI? I couldn't think of an easy one off-hand.

Comment 15

[heraldo]

My skepticism to this new UI comes from the lack of options (no way to set search engine UI back to the old list view). Improvements withing the new grid UI seem hard for this case, since many users will probably prefer icon + text rather than eg. user selected icons (too much work). 

Imagine if bookmarks (icon + text) would be exchanged for favicon only, how much easier would navigating your bookmarks become?

Comment 16

[Ash Grigas]

Prototype here:
http://invis.io/CQ26LL3TA

Comment 17

[Ash Grigas]

Attachment: Hover/arrow icon focus provides readout of provider name

See invision prototype as well

Comment 18

[Tim Nguyen :ntim]

(In reply to agrigas from comment #17)
> Created attachment 8561483 [details]
> Hover/arrow icon focus provides readout of provider name
> 
> See invision prototype as well

What if there are 2 similar engines with names that don't fit into the header ?

Take Wikipedia (en-US) and Wikipedia (DE), they will both be shown as Wikiped... if they don't fit in the popup (if we use ellipsis overflowing). So Wikipedia (en-US) won't really be distinguishable from Wikipedia (DE). This is a very common use-case of having 2 engines with the same icon.

Comment 19

[Ash Grigas]

(In reply to Tim Nguyen [:ntim] from comment #18)
> (In reply to agrigas from comment #17)
> > Created attachment 8561483 [details]
> > Hover/arrow icon focus provides readout of provider name
> > 
> > See invision prototype as well
> 
> What if there are 2 similar engines with names that don't fit into the
> header ?
> 
> Take Wikipedia (en-US) and Wikipedia (DE), they will both be shown as
> Wikiped... if they don't fit in the popup (if we use ellipsis overflowing).
> So Wikipedia (en-US) won't really be distinguishable from Wikipedia (DE).
> This is a very common use-case of having 2 engines with the same icon.

It would look like this:
https://www.dropbox.com/s/1cr1ksbm7pgcqh6/Screenshot%202015-02-09%2013.36.43.png?dl=0

We always truncate search term to make sure provider name fits. The search term is always shown above so truncating seems ok to me.

Comment 20

[Stephen Horlander [:shorlander]]

Comment on attachment 8561483 [details]
Hover/arrow icon focus provides readout of provider name

Looks good. In bug 1106054 we set a min-width. We could look into making it wider.

Comment 21

[Florian Quèze [:florian]]

(In reply to agrigas from comment #19)
> (In reply to Tim Nguyen [:ntim] from comment #18)

> > What if there are 2 similar engines with names that don't fit into the
> > header ?
> > 
> > Take Wikipedia (en-US) and Wikipedia (DE), they will both be shown as
> > Wikiped... if they don't fit in the popup (if we use ellipsis overflowing).
> > So Wikipedia (en-US) won't really be distinguishable from Wikipedia (DE).
> > This is a very common use-case of having 2 engines with the same icon.
> 
> It would look like this:
> https://www.dropbox.com/s/1cr1ksbm7pgcqh6/Screenshot%202015-02-09%2013.36.43.
> png?dl=0

This is a mockup based on the appearance on Mac, where indeed it would likely be OK.

On Linux (or at least on Ubuntu) the default font size used in the search panel is significantly larger, so it's likely that the end of the provider name won't be visible.

That said, implementing what's proposed here would be easy technically, so we could just try it and see what happens.

Comment 22

[Ash Grigas]

OK - lets try it. Post a screencap and we'll adjust the design if needed...

Comment 23

[Florian Quèze [:florian]]

I took screenshots with a reasonably large window on Ubuntu with default settings:
Here is the current UI: http://i.imgur.com/SWElarW.png
Here is what's proposed here: http://i.imgur.com/YKG8UrY.png

Note: "Wikipedia(de)" isn't a really long provider name. See the screenshots attached to bug 1113747 for a use case with significantly longer names.

Comment 24

[Ash Grigas]

Is there anyway on Ubuntu we can adjust the type size for the provider text? That does seem way larger then Window and Mac type...

Comment 25

[Ash Grigas]

Updated design based on text size issue. Only show Search provider name on hover/select with arrow key of provider icon.

Default (not selected) show current UI: 'Search xxx... on:'
Hover/arrow select show new UI: 'Search Wikipedia(en)'

Comment 26

[Stephen Horlander [:shorlander]]

(In reply to agrigas from comment #24)
> Is there anyway on Ubuntu we can adjust the type size for the provider text?
> That does seem way larger then Window and Mac type...

We can make it smaller but it is relative to the system font size, which is quite large.