406215 - two-line autocomplete needs a better look and feel

Status: VERIFIED DUPLICATE of bug 393508

(Firefox :: Address Bar, defect)

Description

[ronin.achilles]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9b2pre) Gecko/2007113005 Minefield/3.0b2pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9b2pre) Gecko/2007113005 Minefield/3.0b2pre

Discussions around the look and feel of the new Autocomplete was underway at Bug #403159 but that bug got Fixed when Bug #399664 landed. Hence opening a new bug for this.

My original comments are at: https://bugzilla.mozilla.org/show_bug.cgi?id=403159#c21 followed by thoughts from Alex and Dao.

Briefly, the new Autocomplete bar has a lot of elements that are (for a lack of better word) "in your face" and shouting for attention (borders, highlighting). We need to blend it better with the OS and the overall look and feel of the browser.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

[ronin.achilles]

Attachment: clean and sober autocomplete

An idea of what it can possibly look like on Vista, with minimal userChrome mods; similar modifications can be worked out for XP/OSX/Linux.

Comment 3

[Dão Gottwald [:dao]]

Attachment: current styling with high-contrast theme

The address is barely visible. See also bug 399664 comment 68, 399664 comment 78 and 399664 comment 80.

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #3)
> bug 399664 comment 68, bug 399664 comment 78 and bug 399664 comment 80

Comment 5

[Rama Ramachandran]

(In reply to comment #4)
> (In reply to comment #3)
> > bug 399664 comment 68, bug 399664 comment 78 and bug 399664 comment 80
> 

I can change the font and the color by changing ".ac-comment" in my userChrome.css file but the font-size always remains large.  And ".ac-url-text" in userChrome.css has zero effect on the latest build of 3.0b2pre

.ac-comment {
   font-family: Helvetica;
   font-size: 10pt;
   color: #DDDDDD;
}

.ac-url-text {
  color: #FF0000;
}

Comment 6

[Alfred Kayser]

If you are touching autocomplete.css, there is a minor improvement possible:
Replace:
  .autocomplete-richlistbox > richlistitem[selected="true"]
With:
  .autocomplete-richlistitem[selected="true"]

Comment 7

[Mike Beltzner [:beltzner, not reading bugmail]]

FWIW, we tried the grey text in an earlier iteration, and people trying that patch found that it made it a lot harder to read the URLs. We didn't want to deprecate that information, and the added contrast provided by the colour makes it easier to discern between URLs and titles. I'll try running with these changes for a while, though, and see how they feel.

Comment 8

[:deanis74]

My $.02.

I actually really like the look in attachment 290219 [details].  The bubbles to highlight are a nice start, much better than the current underline which isn't very easy to see.  They maybe could be styled a little differently, with a sublter border and more of a gradient.

The title line is a smaller font than in the current builds, which I like because the titles in the current implementation are displayed with a large font that I find distracting.  The bold text for the title still facilitates scanning the text of titles.

I'm not really a fan of the alternating line color, but that's a minor point of that mock-up.

Comment 9

[(not reading, please use [e-mail] instead)]

alfred wrote:

If you are touching autocomplete.css, there is a minor improvement possible:
Replace:
  .autocomplete-richlistbox > richlistitem[selected="true"]
With:
  .autocomplete-richlistitem[selected="true"]

thanks alfred, I'll be doing that as a ride along on another patch.

Comment 10

[(not reading, please use [e-mail] instead)]

> thanks alfred, I'll be doing that as a ride along on another patch.

see bug #402118

Comment 11

[Dão Gottwald [:dao]]

Daniel Glazman has written quite a good summary about what's wrong with the current styling:

http://www.glazman.org/weblog/dotclear/index.php?post/2007/12/20/Firefox-3b2-address-bar

Comment 12

[Alex Faaborg [:faaborg] (Firefox UX)]

Following up here since comments are disabled on the post:

>   1. it's weird to have a 404 error as the second entry in a list of a few >dozens. Error pages should probably listed at the bottom of the list.

Yes, that is strange, but it is also the case that you visit that site a lot (home page for the beta releases) which is why it has such a high frecency score.

>   2. I have two bookmarks in the results and I think the second one should >show up at the top of the list because the probability it's the one I want is >high.

Why? Based on the data used to generate the results you are more likely to go to addons.mozilla.org or planet.mozilla.org if you type mozilla.

>   3. I am personnally used to deal with URLs more than with page titles. I am >therefore annoyed by the current presentation where the title is more visible >than the URL and is presented above it with the favicon.

I've heard a lot of people say that they have quickly adapted, and that the new location bar has changed the way they navigate to pages with a browser.  If you interact with this interface in exactly the same way as the previous one, you may be a little frustrated, but try using it for awhile and you will likely find yourself taking advantage of the way it can streamline revisiting pages.  For instance, it is very unlikely that you currently use the location bar when you don't remember a page's URL.

>   4. I cannot sort the results alphabetically or per URL or per protocol >(preference to https over http for instance)

With support for multiple search terms you will be able to implicitly control the sort by entering text, like "https", and the letter in the firsts few letters you are looking for.  This is considerably more efficient than a direct manipulation interface with column headers and a lot of visual scanning.  For specific tasks that do require this level of control, the advanced search interface in the Library window should be more in line with what you are looking for.

>   5. I cannot know how many results I have

How does this help users achieve their goal of visiting a particular page?  (again advanced search interface in the Library window should be more in line with what you are looking for.

>   6. I can't remove an entry individually (very useful for privacy, could be >a "Clear Private Data" on a single URL)

Yes, we need to fix this.

>   7. the green color given to the URL can be an accessibility issue.

Here is why we are using color (although not necessarily green):
https://bugzilla.mozilla.org/attachment.cgi?id=289065

Here is why the use of a single color, aside from potential readability issues, is not an an accessibility issue:

If we use green, URLs will appear darkish yellow to users with protanopia and
deuteranopia, and blue to user's with tritanopia.  The perceived color will not
impact the user's ability to visually select and scan URLs.

The visual effect will impact user's with rod monochromancy, who constitute
0.00001% of our user base.  However the overall effect is that they will have
to read the titles and URLs in alternating sequence, instead of visually
selecting one or the other to scan.

>   8. the underlining of the keyword gives too much visual focus on the >keyword. All entries ARE related to the keyword and your URL choice will >almost certainly be based on extra data, not the keyword itself.

I think this is important both in providing clear feedback for the user's actions, and helping users quickly understand that they can search against both the title and URL.

Comment 13

[u88484]

(In reply to comment #12)
> >   6. I can't remove an entry individually (very useful for privacy, could be >a "Clear Private Data" on a single URL)
> 
> Yes, we need to fix this.
> 

Ctrl+Del works for me to delete individual entries

Comment 14

[AndrewM]

(In reply to comment #13)
> (In reply to comment #12)
> > >   6. I can't remove an entry individually (very useful for privacy, could be >a "Clear Private Data" on a single URL)
> > 
> > Yes, we need to fix this.
> > 
> 
> Ctrl+Del works for me to delete individual entries

You don't even need Ctrl, you can just hit Del.

Comment 15

[Alex Faaborg [:faaborg] (Firefox UX)]

I'm setting this as a dupe of the tracking bug for the mockup so we can have all of the UI discussion in a centralized location as opposed to several different bugs.