395555 - Larry UI: consistency improvements required

Status: VERIFIED DUPLICATE of bug 395248

(Firefox :: General, defect)

Description

[Michael Clackler]

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

Looking at the final updated grid of visuals for the Larry UI in bug 383183 comment 37, there are a few UI inconsistencies.

From reading up on the subject, Larry is primarily for providing an "identity" feedback to the user.  There are icons and wording used to describe the different states to the user.  As I see it, if we are discussing "identity", it is either known or it is not.  The inconsistencies I see are the following:

1. The "Unknown Site" and "Identified Site" each start off with "Identity Unknown" or "Identity Verified", but the "Domain Verified" site starts off with "Location Verified" and the only mention of identity is in the middle of the UI.  The "Domain Verified" state is a little confusing it appears the identity state is not important since the state is not promoted.  If the main reason is to promote identity, all site states should start with either "Location Verified" or "Location Unknown".

2.  Along with #1, the different Larry icon states are confusing.  Since we really have only two identity states, we really should have only two icons.  Currently, the "Domain verified" icon looks different than the "unknown" icon even through both mention that the site does not provide identifying information.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.



I'll attach some photoshop mocups of some possible solutions

Comment 1

[Michael Clackler]

Attachment: revised Larry UI moc-ups

A few things done here:

1) All site state UIs start with the identity state to provide consistency in the UI and unify the idea that it is for identity

2) There are only two Larry icons promoting the two states - unknown and verified.  The ? is kept above the passport to promote "unknown" and the check promotes "verified".  The check is moved from the passport agent to the passport since we are checking the credentials not the agent.

3) The green URL bar color for the identity verified state is carried down into the pop-up.  The previous green "check" and "identity verified" text were not very noticeable, they contrast less than the text against the white background.  Changing the background to green and the check and text to black provides an instant visual cue of the state.  It also keeps the Larry icons one color which helps.

4)  The padlock icon was changed for the one in the options dialog.  The ratio of the smaller icon to the size of the pop-up did not seem correct and the icon was getting lost.


I am still a little confused about why the "Location Verified" information is displayed for the "Domain Verified" site but not for the "Identified Site".  It makes it appear that the location of the "identity verified" site is not known.  From an identity standpoint, you can know who someone is and not know where they are (Identified Site state) the same way you can know where you are and not know who you are talking to (Domain Verified state).

Comment 2

[Michael Clackler]

(In reply to comment #0)
> The "Domain Verified" state is a little confusing it appears the identity
> state is not important since the state is not promoted.  If the main reason is
> to promote identity, all site states should start with either "Location
> Verified" or "Location Unknown".

Sorry, I confused myself.  Should have been:

The "Domain Verified" state is a little confusing as it appears the identity state is not important since it is not promoted.  If the main reason is to promote identity, all site states should start with either "Identity Verified" or "Identity Unknown".

Comment 3

[Michael Clackler]

Attachment: revised Larry UI mocup ver 2

Put together another set of mocups using the feedback from several bugs.

Done here:

1.  Larry UI box is used as the primary indicator for Identity and encryption state.  The Larry box is the only box that changes color (white/gold/green), the URL box remains constantly white (helps the "two text box" situation bug 395248).  Keeps the URL box a constant white background in all states providing consistency and eliminating any contrast issues with URL bar places star and/or livemark icons on colored backgrounds.

2.  Reduced text size in the Larry UI box with slight bold to further visually remove the idea of typing in the box like the URL area.

3.  Added lock back to Larry UI on URL bar. I know this is something that was consciously removed but there needs to be a differentiator other than color in the URL bar UI and the Lock icon is so ingrained in users it would be difficult to remove.  With the text size reduction in #2, the lock can be added without taking up any more space in the bar.

3.  Changed background color of Info Popup to maintain consistency with the color state of the URL bar indicator.

4.  Reworded "Identity" to "Owner" and "Location" to "Web Address" as has been suggested in bug 395295.

5.  All UI states contain both Owner and Web Address validation states in the same physical location to maintain consistency across all states.

6.  Larry icons changed:
    - Unknown state: Larry waiting with hands at side, ? mark indicating no information.  Arm not outstretched or holding passport since there is nothing from website.
    - Domain Verified:  Larry holding passport, but ? mark over passport indicates something is missing (Owner Identity information not present)
    - Identified Site:  Larry holding passport, check mark above passport indicating verified state. Check mark moved from agent to passport.


The visual confusion of the UI box being a text box is greatly reduced with the color only in the Larry URL bar indicator, the text size change, and the lock icon.

I thought about swapping the location of the lock icon and the favicon in the UI box to keep the favicon next to the URL address as in the "unknown site" state.  The favicon so far away from the URL looks a little strange.

Comment 4

[Michael Clackler]

Attachment: Larry UI w/ Favicon right justified

Continuing thoughts from comment 3, mocup of Larry URL bar UI with site Favicon right justified in UI box.

This really seems to further remove confusion of where to type a URL.  The Favicon is a visual "anchor" where the URL is normally directly to the right.  With the Larry "identify" information between the Favicon and URL, this continuity is broken.  Placing the Favicon on the right of the Larry UI directly next to the URL combined with the difference in text style and color  UI and the URL box have greatly reduced the "two text box" confusion.  This also maintains consistency between all three Larry UI states with respect to the location of the URL in relation to the Favicon.

If the Lock icon is used, placing it on the left side of the UI seems to reinforce the fact that the UI block is used for more detailed "secrity" information.

Comment 5

[Tony Mechelynck [:tonymec]]

(In reply to comment #4)
> Created an attachment (id=280549) [details]
> Larry UI w/ Favicon right justified
[...]

Two questions:
- I suppose the closed padlock (if used) would alternate with an open padlock, not with  nothing?
- Why place the favicon in "Larry space" rather than in "URL space"? The favicon has nothing to do with certificates, it is set by a <link> tag in the page being viewed, or failing that, by a sitewide favicon.ico, or failing that, by a (themable) browser default. In view of bug 395248 comment #10, the favicon is at least as much "content" as the URL.

Comment 6

[Ian Pottinger]

Taking comment 5 a step further, Larry could live in a button attached to (maybe detachable from) the URL bar that displays three states:

1) regular coloured button with an open padlock
2) yellow coloured button with a closed padlock and web address
3) green coloured button with a closed padlock and identity 

Comment 7

[Ian Pottinger]

On second thought, promoting the padlock to primary UL only to continues the confusion between identity and security, which is the exactly opposite of what Larry is hoped to achieve. 

Comment 8

[Tony Mechelynck [:tonymec]]

(In reply to comment #6)
> Taking comment 5 a step further, Larry could live in a button attached to
> (maybe detachable from) the URL bar that displays three states:
> 
> 1) regular coloured button with an open padlock
> 2) yellow coloured button with a closed padlock and web address
> 3) green coloured button with a closed padlock and identity 
> 

(In reply to comment #7)
> On second thought, promoting the padlock to primary UL only to continues the
> confusion between identity and security, which is the exactly opposite of what
> Larry is hoped to achieve. 
> 

Maybe three different icons then; but what?
1) (no verifiable info) open padlock? question mark? (NOT a red X because most HTTP sites [without S] are legitimate but not verifiable)
2) (web address verified) envelope? → arrow? closed padlock with question mark over it?
3) (address and owner verified) sketch of an ID photo? green √ tick? closed padlock?

Comment 9

[Ian Pottinger]

I think this has already been examined in bug 383183 and elsewhere. No one could agree upon a suitable visual metaphor, which led to the adoption of the favicon as the access point to Larry.  Considering all that has been discussed before, I think the padlock should remain absent from primary UI.

Comment 10

[Johnathan Nightingale [:johnath]]

Hey Michael, 

This is interesting work, I'm sorry I didn't catch the bug the first time through.  It feels like it branches from bug 395248 though, which is also around discussion of UI changes.  Any chance I can get you to move your latest mockups over there (where the larger CC list is) to centralize the discussion, and then I'll mark this one a dup of that?

Comment 11

[Michael Clackler]

Mock ups moved to bug 395248 to centralize UI discussion.  Please take any further comments to that bug.

Comment 12

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified dup