Website identification in Firefox 3

Johnathan Nightingale recently presented his work on making website identity more transparent (and less confusing) for Firefox users. I downloaded his prototype extension to see for myself exactly where he was headed and I ended up becoming much more interested in his project.

The "Identity Feedback" extension

screen-shot showing the website identity info in the toolbar adjacent to the URL barI love that Jonathan's extension displays the identity of the SSL certificate owner in the user-interface (it appears to the left of the urlbar in v0.6.1 of the extension but that isn't pertinent here) and that it allows for easy viewing of additional details. However, I think there are some significant issues with the current implementation (which may have changed since then but I will proceed as if the implementation I discuss were the final design).

  1. Placing the website identity in the toolbar as a UI element creates a situation where the identity label will resize depending on the current site which causes the entire toolbar to shift around when the user changes tabs or visits another site.
  2. Displaying a "greyed out" icon (currently also displaying the text "Unknown identity") for unencrypted URIs, which are the most common, is likely to confuse less sophisticated users into thinking every website is suspicious and is wasteful of toolbar space.
  3. Placing the website identity outside of the urlbar blurs the association with the address, and therefore the site, being visited. An icon or label should be placed as close as possible to what it is associated with.

After realizing the above I came to the conclusion that site identity is best placed inside the urlbar. This would eliminate toolbar shifting and make its relation to the address unmistakable. It would also result in less space for the URI but for most users it is likely that the only part of the address which is generally relevant is the domain. With this in mind I started modifying the extension to try out some variations on icon and identity name placement.

  1. white urlbar with green identity label and Larry icon on the right

    In this concept I created a less detailed "Larry" icon hoping that it would be easier to identify at a low scale. I also removed the "secure" background color from the entire urlbar and applied it only to the site identity label and icon. I was not impressed with my efforts on the icon though and found that the graphic more closely resembles the statue of liberty than a customs agent.

  2. white urlbar with green identity label and lock icon on the right

    In this concept I decided to revert to the lock icon. I found this more intuitive, easy to identify, and familiar than the Larry icon and stuck with it for the rest of my tests.

  3. white urlbar with green identity label and lock icon preceding the label

    In this concept I obviously experimented with icon placement. I noted that IE7 places the lock icon before the identity label but because Firefox also places a feed icon in that position it detracts from the visibility of the lock icon.

  4. green urlbar with label and lock icon on the right lacking a border

    In this concept I tried coloring the entire urlbar green, as IE7 does.

  5. yellow urlbar with label and lock icon on the right lacking a border

    In this concept I reverted the urlbar background color to the current yellow.

  6. concept 2 and showing the identity details popup

    This is concept 2 with the identity details popup shown.

  7. concept 5 and showing the identity details popup

    This is concept 5 with the identity details popup shown.

I have been using the extension for a few days now using concept 2 and I am pretty satisfied with that implementation. I believe that coloring only the label and leaving the rest of the urlbar white called more attention to the identity and secure icon than does coloring the entire urlbar. I also find the green background more pleasing to look at than the current yellow. It also would result in consistency with the colors used in IE7 even though that isn't a critical factor.

Website identity in Firefox 3.0

Jonathan's idea of logoizing website identity with "Larry" the customs agent isn't a bad one. However, based on my experiments above I would argue that there are more disadvantages than advantages to changing to the proposed graphic from the lock icon.

If the "Larry" icon replaced the lock icon then it would be implied that "Larry" represents a secure connection as well as representing site identity. I'm sure more discussion and thought about this will result in a clearer definition of how these concepts should be presented to the user. As encryption is currently understood though, I think that replacing the lock icon with something which represents something only loosely related (for a layman) could prove to be a step backwards for usability. Furthermore, the icon isn't really recognizable at a scale suitable for a toolbar element.

However, I don't see any reason why the "Larry" graphic might not be used in the identity details popup but omitted from the popup button. It's a fine idea when applied to the applicable information.

Trackback URL for this post:


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <p> <a> <em> <strong> <abbr> <code> <ul> <ol> <li> <dl> <dt> <dd> <q> <blockquote> <cite>
  • Lines and paragraphs break automatically.

More information about formatting options

Subscribe to feed