862321 - The Search Fields need some MAJOR polish

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Music, defect)

Description

[Patryk Adamczyk [:patryk] UX]

Attachment: The search field is incorrect

See the attached.
1. the visual design is not inline with the dark apps, should be made darker, we need a common control treatment for dark apps
2. there are some layout issues

Comment 1

[Patryk Adamczyk [:patryk] UX]

Attachment: how is this in the builds?

Comment 2

[Rob MacDonald [:robmac]]

FYI - Przemek and I are working on some updated search fields for music as well as for contacts and email.

Comment 3

[Przemek Abratowski [:przemek] UX]

visuals,
https://www.dropbox.com/s/498u8j473lm9h49/Search_Examples.png

PSD file,
https://www.dropbox.com/s/0nysm4b5h1uuycw/Search_Concepts.psd

Comment 4

[Rob MacDonald [:robmac]]

Nominating for UX most wanted - As per Przemek's visuals, this should be applied across all search fields, including Music, Email, Contacts.

Comment 5

[Sergi]

Can you attach the PSD for the dark version?

Thanks!

Comment 6

[Sergi]

It's everything in the same PSD. Sorry, ignore my last post.

Comment 7

[Sergi]

I've been reviewing the font sizes in order to adapt your proposal to the common controls file, and i have some questions. I've seen the text inside the input field is 7.42pt (the PSD file has 165ppi). I assume it should be 8pt? (that's the size we're using for body copy). The button label is also 7.42pt, but right now we're using 7pt (the alternate body copy size). Can we confirm these font sizes?

Thanks!

Comment 8

[Przemek Abratowski [:przemek] UX]

Yes, 8pt makes sense to me.

Comment 9

[Jim Porter (:squib)]

(In reply to Patryk Adamczyk [:patryk] UX from comment #1)
> Created attachment 737958 [details]
> how is this in the builds?

I think this is a regression, since it looked less broken before (but not much less ugly). When I checked that code in, the little X on the right was in the correct spot. Not sure what happened there...

Comment 10

[Rob MacDonald [:robmac]]

Summary and additional background for this bug...

THE PROBLEM (see attachment 737958 [details])
- Search within Music currently has two "x"s one to clear the text and the other to close the dialog - this is likely to create usability issues.
- Search within Music, Contacts and Email unnecessarily behave inconsistently 
- Search within Music visually does not work with the dark background and appears to be copy and pasted from a lighter background app.

THE SOLUTION (https://www.dropbox.com/s/498u8j473lm9h49/Search_Examples.png)
- Aligns search behavior across all apps
- Eliminates potential usability issue with two "x"s in the same dialog
- Visually is aligned with the black theme of the music app

Comment 11

[Dylan Oliver [:doliver]]

triage: blocking to bring a this new 1.1 feature up to visual spec

Comment 12

[steve]

Attachment: Search examples, with correct filters and toolbar icon alignment

As Rob correctly points out the solution (https://www.dropbox.com/s/498u8j473lm9h49/Search_Examples.png) shows how the new search input box will look. Just so there is no confusion, this screen does not show the correct filters or toolbar icon alignment. 

This attachment shows this corrected.

cheers

Comment 13

[Evan Tseng [:evanxd]]

Hi all,

If the UI design of search field in Music, Email, and Contacts App was decided, 
I thought that we should open three new bugs for doing programming, right?

Comment 14

[Jim Porter (:squib)]

(In reply to Evan Tseng [:evanxd] from comment #13)
> Hi all,
> 
> If the UI design of search field in Music, Email, and Contacts App was
> decided, 
> I thought that we should open three new bugs for doing programming, right?

It depends on how complex the changes are. For music and contacts, we might only need changes to the Building Blocks. Email is probably going to be more work, however (although it too would benefit from the Building Blocks changes).

Comment 16

[Josh Carpenter [:jcarpenter]]

(In reply to steve from comment #12)
> Created attachment 742260 [details]
> Search examples, with correct filters and toolbar icon alignment
> 
> As Rob correctly points out the solution
> (https://www.dropbox.com/s/498u8j473lm9h49/Search_Examples.png) shows how
> the new search input box will look. Just so there is no confusion, this
> screen does not show the correct filters or toolbar icon alignment. 
> 
> This attachment shows this corrected.
> 
> cheers

Nice. This looks _way_ better.

Comment 17

[Sergi]

I've seen an error in the contacts screen "Search examples, with correct filters and toolbar icon alignment". The divider lines should have 15px padding, and the text 30px. Can we arrange that?

Thanks!

Comment 18

[Stephany Wilkes]

Sergi, do you need more assets/help from visual design, or is the "add padding" for dev? Let me know so we can help finish this off. :)

Comment 19

[Sergi]

(In reply to Stephany Wilkes from comment #18)
> Sergi, do you need more assets/help from visual design, or is the "add
> padding" for dev? Let me know so we can help finish this off. :)

No assets needed here, its just a styling adaptation of the dividers so they have 15px padding each size. Thanks!

Comment 20

[Stephany Wilkes]

Reassigning to Przemek since he worked on this previously with Rob. Przemek, looks like there are still a few last small things that need VxD help. Thanks!

Comment 21

[Przemek Abratowski [:przemek] UX]

Yes Sergi is correct please make sure that the dividers use 15 pixels of padding on both sides.

Comment 22

[Mark Shiao]

Search box styles and behaviors have been applied except to the email tabs (will be requesting graphics).  Please refer to comment 15 for links to each respective bug and status updates.  

Thanks,
Mark

Comment 24

[Patryk Adamczyk [:patryk] UX]

Checking versus v.2.0. Its fixed now.