1041736 - [UX] Visual design for Awesome Bar layout cleanup

Status: RESOLVED FIXED

(Firefox :: Address Bar, defect)

Description

[Sevaan Franks [:sevaan]]

A visual design pass needs to be performed on the recent Visual Improvements to the Awesome Bar design spike (Bug 1034542).

To consider:

- Additional styling tweaks
- Various platform stylings

Mockups: http://people.mozilla.org/~sfranks/AwesomeBar/Visual%20Improvements%20to%20Awesome%20Bar.pdf

Comment 1

[Marco Mucci [:MarcoM]]

Hi Michael, can you provide a point value for this bug.

Comment 2

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Since this would fit in here quite neatly, could you also include the visual styling for search suggestions (https://bugzilla.mozilla.org/attachment.cgi?id=8459805) into your spec?

Let me know if you think that this would be better served by a separate bug.

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Marco Mucci [:MarcoM] from comment #1)
> Hi Michael, can you provide a point value for this bug.

8

Comment 4

[u428464]

Bug 583683 should be taken into consideration here.

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: AwesomeBar-Assets.zip

Awesome Bar Results: 
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-results.png

Awesome Bar Google Search and Suggestions: 
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-google-search.png

Awesome Bar Spec:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-Spec.png

Comment 6

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Those look great!

Two little concerns:
- The highlight of the currently selected suggestion is very subtle. How about emphasizing that a bit more? (http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-google-search.png)
- Maybe that's just me, but the text »Google search for:« seems to sit a few pixels too high up.

Comment 7

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: AwesomeBar-Assets.zip

Thanks for the feedback, Philipp. I increased the contrast of the type and moved the information down a pixel or two.


Results:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-results.png

Search and Suggestions:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-google-search.png

Spec:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-Spec.png

Comment 8

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: AwesomeBar-Assets.zip

Updated the search term highlight.

Results:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-results.png

Search and Suggestions:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-google-search.png

Spec:
http://people.mozilla.org/~mmaslaney/Search/AwesomeBar-Spec.png