841511 - Change - Use Headline Style for titles on the Options flyout

Status: VERIFIED FIXED

(Tracking Graveyard :: Metro Operations, defect, P1)

Description

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

For titles, like "Always show tabs", "Clear Private Data", etc, let's capitalize the titles. 

We should also apply headline style to labels on action buttons and context menu items, such as "Pair a Device", "Open Link in New Tab". 


Just FYI, according to most style guides that use title case, the basic rules are as follows:

- Capitalize the first and last word in a title, regardless of part of speech
- Capitalize all nouns (baby, country, picture), pronouns (you, she, it), verbs (walk, think, dream), adjectives (sweet, large, perfect), adverbs (immediately, quietly), and subordinating conjunctions (as, because, although)
- Lowercase “to” as part of an infinitive
- Lowercase all articles (a, the), prepositions (to, at, in, with), and coordinating conjunctions (and, but, or)

Comment 1

[Matt Brubeck (:mbrubeck)]

(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #0)
> We should also apply headline style to labels on action buttons and context
> menu items, such as "Pair a Device", "Open Link in New Tab". 

Microsoft's guidelines for context menus in Windows Store ("Metro") apps specifically say "Use sentence capitalization for each command name":
http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx

Comment 2

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Correction on Comment 1:

"We should also apply headline style to labels on action buttons and context menu items, such as "Pair a Device", "Open Link in New Tab"."

Context menu in Windows 8 apps should use sentence case, not Headline style.

Comment 3

[Jim Mathies [:jimm]]

Attachment: options flyout

Comment 4

[Jim Mathies [:jimm]]

Attachment: about flyout

Not sure about that link string, it looks weird to me in all caps.

Comment 5

[Jim Mathies [:jimm]]

Attachment: permissions

This is just for reference, win8 generates this panel.

Comment 6

[Jim Mathies [:jimm]]

Attachment: patch v.1

Comment 7

[Jim Mathies [:jimm]]

Attachment: patch v.1

Comment 8

[Jim Mathies [:jimm]]

(In reply to Jim Mathies [:jimm] from comment #7)
> Created attachment 718139 [details] [diff] [review]
> patch v.1

Yuan, if you would like to edit any of the dialog sync strings, please let me know. We might as well add those too.

Comment 9

[Jim Mathies [:jimm]]

Attachment: patch v.2

Comment 10

[Jim Mathies [:jimm]]

Attachment: options flyout

updated tabs section. also filed bug 845120 on the flyout not scrolling via touch.

Comment 11

[Jim Mathies [:jimm]]

Attachment: solitare

Comment 12

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Comment on attachment 718165 [details]
options flyout

Metro apps don't have a consistent approach on this. 
So this decision: "Title case for bold titles, sentence case for description" is based upon guides for good typography and readability. 

My suggestions for changes: 
1. Use sentence case for description, such as "When nightly starts, show start page/tabs from last time"

2. Remove "Privacy & Security"

3. Apply bold title case for "Remember Passwords", "Clear Private Data", "Use Master Password"(we will eventually remove this, I believe)

4. Add a bold title "Tracking" on top of "Tell sites not to track me"

Thanks Jim!

Comment 13

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: [Mockup] Options_v6

Comment 14

[Jim Mathies [:jimm]]

Attachment: options v.3

A few issues remaining - 

- there are stylistic nits, button background, height of drop downs, button theming, that aren't addressed here (in a strings bug).

- there should be a bug on adding clear site permissions. I didn't insert that here.

- not sure what to do with sync options or "Use Master Password"

Comment 15

[Jim Mathies [:jimm]]

According to mbrubeck, character encoding auto-detect does not need an option. So I've removed that.

Comment 16

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Comment on attachment 718445 [details]
options v.3

Looks good to me. Thanks Jim!

Comment 17

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

(In reply to Jim Mathies [:jimm] from comment #14)
> Created attachment 718445 [details]
> options v.3
> 
> A few issues remaining - 
> 
> - there are stylistic nits, button background, height of drop downs, button
> theming, that aren't addressed here (in a strings bug).
> 
> - there should be a bug on adding clear site permissions. I didn't insert
> that here.
> 
> - not sure what to do with sync options or "Use Master Password"

I will file the styling things in separate bugs, and provide specs as detailed as I can. And also a bug for implementing "Clear Site Permissions". 

Sync will be promoted to the top level. And the flow will be inside a flyout. No info bar. I will also file one and attach with the flow mockup.

Comment 18

[Jim Mathies [:jimm]]

Attachment: flyout changes v.1

Comment 19

[Frank Yan (:fryn)]

Comment on attachment 718617 [details] [diff] [review]
flyout changes v.1

Review of attachment 718617 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good to me.

::: browser/metro/theme/browser.css
@@ +768,5 @@
>  }
>  
> +/* don't add a margin to the very top settings entry in Options */
> +#prefs-startup {
> +  margin-top: 0px;

If this would be true for whichever setting goes on top, you could use the following as the selector instead:
#prefs-flyoutpanel > settings:first-child

If this is going to be true for all flyout panels that have settings, you could use the following as the selector instead:
flyoutpanel > settings:first-child

I'll leave it up to you, whether you want to change the selector.

@@ +782,5 @@
>    -moz-box-align: center;
>  }
>  
> +#prefs-homepage-options, #prefs-homepage-popup {
> +  min-width: 200px;

I wonder if there's a more elegant solution here, but looking for one shouldn't block this. :)

Comment 20

[Marco Mucci [:MarcoM]]

Note from Jim:  Development complete - landing on inbound.

Comment 21

[Jim Mathies [:jimm]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/9718c678cdde

Comment 22

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/9718c678cdde

Comment 23

[juan becerra [:juanb]]

Tested on 2013-02-28 with a nightly build from http://hg.mozilla.org/mozilla-central/rev/c65d59d33aa8
- All titles seemed consistent throughout Options, Sync, About, Help, and Permissions
- Titles also seemed consistent in dialogs that appeared when flipping a switch like the "use master password" or "connect" to Sync.

Comment 24

[Kamil Jozwiak [:kjozwiak]]

Went through the following "Change" and found a "Defect" when going through iteration #7 testing. Attached the "Defect" to the following ticket. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-05-25-06-25-25-mozilla-central/

- Added a "Defect" that was found in the "About" flyout as the "styling" is inconsistent with the other flyouts.

Comment 25

[Kamil Jozwiak [:kjozwiak]]

Went through the following "Change" for iteration #8 testing without any issues. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-06-16-03-11-39-mozilla-central/

- Went through the "Options" flyout and everything looked consistent
- went through the Syc" flyout and everything looked consistent
- Went through the "About" flyout and everything looked consistent
- Went through the "Permissions" flyout and everything looked consistent
- Ensured that titles have are bold & using proper capitalization
- Ensured that there was no incorrect spelling throughout the flyout menu's
- Ensured that all the flyout menu's appeared correctly under "Filled View"

Comment 26

[Kamil Jozwiak [:kjozwiak]]

Went through the following "Change" for iteration #9 testing without any issues. Used the following build:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-07-02-11-03-00-mozilla-central/

- Went through information in comment 0 and ensured everything matched
- Went through the test cases added in comment 23 and ensured everything appeared correctly
- Went through the test cases added in comment 25 and ensured everything appeared correctly