Confusing Cross Browser UI Design

Most have heard by now that Internet Explorer is adopting the Firefox RSS icon to standardize and help users who hate having to remember what equivalent icons are. Of course this is great for users. Though I wish they were a bit more consistent with their practices. UI design cross browsers is important simply for security purposes (as I will demonstrate). IE has apparently made some great strides in combating Phishing. What I disagree with, is how they implemented the UI. I think it’s confusing, and could easily be fixed, should they decide to do so.

Their scheme essentially works by coloring the URL bar based on how suspicious the website is. Known scammers get red, suspected get yellow, and a potential good site would be green. This is obviously modeled after a traffic light.

What I dislike is how that can be confusing to the end user. Right now, the colored URL bar technique is used by Firefox and Opera to distinguish a secure website (since it’s more obvious than the little lock). Take a look at the little demo I have here:

Good Site Opera 9

Opera 7

Good Site Firefox 1.5

Firefox 1.5

Bad Site Internet Explorer 7

Internet Explorer 7

Screenshot from IE Blog.

For an end user, who doesn’t follow browser changes, and perhaps first encounters IE 7 at work, or in a public terminal. Seeing the yellow bar is familiar. We know that as being safe. I think many wouldn’t even notice the “Suspicious Website” text on the right side. The shield even looks a bit like the Lock icon in Firefox. Very confusing.

My suggestion is to use another color, in particular, one that I call “orange”. I release the color “orange” under a Public Domain License. Anyone may use it, however they may wish, no need to credit me ;-) (though I’d appreciate it).

Bad Site Internet Explorer 7 + My Solution

Internet Explorer 7

This would distinguish the site as a possible fraudulent website, but still avoid using Yellow, which many users now view as “secure” aka “safe”. This solution solves the problem of conflicting UI design between browsers.

8 thoughts on “Confusing Cross Browser UI Design

  1. Some firefox themes change the colour coding and some don’t have the lock in the location bar. These should be standardised.

  2. I am a long time Mozilla supporter, but I have to admit that Microsoft’s color coding makes sense, more sense than Firefox’s when I come to think of it.

    Why not cooperate with them and Opera to stabilize a uniform color coding across browsers, and, depending on the output of these discussions, possibly change Firefox’s in upcoming releases?

    Of course, using yellow with other semantics would terribly confuse users when they upgrade, so it should no longer be used, should the color coding change in Firefox.

  3. When I first looked at the IE7 URL bar colouring scheme I thought to myself, drat, that’s a good point about yellow meaning “caution” instead of “secure”. The more I think about it though, the less I’m sure that their design will work as intended.

    Your post actually shows a potential weakness in the IE7 colouring design. It turns out that “green” doesn’t have anything to do with phishing in IE7. What it means, in fact, is that the site is SSL secured. I have doubts that people will understand why some sites go “green” and others don’t, and further worry about the reaction to a person completing their banking transaction, logging out, and then seeing their browser “go white.” What will this hypothetical person think that means? Have they just been subtly told to “not go”?

    My primary concern is that the poor web user is already confused enough about what an SSL connection means, and I’m afraid of adding confusion by mixing in the concept of phishing.

  4. if yellow is ‘safe’, why not use green for ‘Suspicious Website’ :-)
    No use in using color coding if the wrong colors are picked in the first place.

    Why not use blue for https sites instead of yellow. Most banks commonly use blue as one of their main colors, because it reflects their stability and ‘thrustworthy’.

  5. @beltzner: according to the MS website “validation certificates” are required for a green URL bar. This is beyond that of a normal cert (not yet decided what). So presumably that’s a high trust situation. Hence a non-phishing site.

    So it does make sense. What I don’t get is the color yellow, since that’s established as “secure”.

  6. Normal people don’t care what colour the URL bar is. They don’t know what SSL is. The odds of them stopping and consulting the manual when their URL bar goes red are very long. The correct solution to this is to come up with a better way of handling secure sites than by introducing some UI widgets which will ultimately be completely ingored. My personal fave is not allowing sites which are suspected as being insecure at all, and waiting for those sites which break to get fixed.

    – Chris

  7. Something like 8% of men are colorblind (and less than 1% of the women). Rather than having a solid color bar to convey something important, like the trustworthiness of a web site, why not combine the color with something more geometric? For instance, having the URL bar white on the left and red on the right; the less trusted, the bigger the red portion. Or maybe make it striped, and the “duty cycle” of redness gets greater as trust goes down.

    Is there a firefox extension that meddles with colors to simulate what things look like to a colorblind user (or more than one kind of colorblindness)?

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>