Firefox UX
Categories: Firefox General Interaction Design

Site identity UI updates

50 responses

Starting with Firefox 14 beta we are refreshing the site identity UI for desktop.

Goals for this design are:

  • Reduce redundancy in main UI by only having one favicon that lives in the tab
  • Increase security by removing the ability for websites to spoof the favicon
  • (Re) Introduce a consistent encryption indicator
  • Streamline the URL bar and its contents for Australis
  • Have a consistent location for accessing the identity panel
  • Retain the drag target for bookmarks

Note: These changes apply to all platforms

The globe indicates a regular site and serves as a consistent drag target and access point for the identity panel.

For sites with SSL encryption we re-added the lock icon and show “https”.

Sites that have an EV (Extended Validation) Certificate have a green lock icon and include the name of the site owner.

Additional next steps for improving security UI include:

  • A streamlined and more easily readable identity panel
  • Exposing more information about your relationship with the site e.g. how many times have you been there
  • Notifying you if you are submitting sensitive data over unencrypted connections
  • Notifying you if you are submitting data to a site for the first time

 

50 comments on “Site identity UI updates”

  1. Pseudonymous Coward wrote on

    How about some UX for telling me, “Hey, you’ve been on this HTTPS site before, but I’ll be damned if the certificate hasn’t changed?”

    1. Jennifer Morrow wrote on

      Actually, we’re working on some solutions to the HTTPS/certification problems now. Thanks!

    2. kdjfcgnskghkdfgsd wrote on

      until they are able to implement something like that there is an extension called certificate patrol that has a similar functionality

  2. Henry Story wrote on

    Would it be possible to add information showing the user what Identity he was using on that site, in such a way that he could point and click to change identity on the web site? This could merge TLS client certificate and simple cookie identification.

    See the bug report https://bugzilla.mozilla.org/show_bug.cgi?id=396441
    And also the presentation for the w3c Identity in the Browser workshop

    http://bblfish.net/blog/2011/05/25/

    I think there are strong arguments that there are legal requirements for the user to see what identity he is using when going to a web site.

  3. Ping from Firefox 14 Beta promises improved security » on

    […] to give users more control over their browsing experience. The new beta channel release sees the site identity indicator updated to better convey the security of and verify the identify of a web site in the “Awesome […]

  4. S€Th wrote on

    al usarlo con los temas de firefox no muestra el “mundo” q debería aparecer por defecto, sino una “hoja”, ni en los sitios cifrados. Habra que esperar a que los desarrolladores de los temas los actualicen.

  5. Roy wrote on

    Start supporting TLS 1.1 and TLS 1.2, and telling exactly what protocol is being used at that moment in the info box would be nice to (like: Protocol: TLS 1.2 / Key Exchange: 521 ecdhe / Public key: 383 ecdsa /Symmetric encryption: AES 128 / Hash used: sha256)… this would help more technical people like me to understand if my web sites is being delivered securely, and if other web sites I go to, are really safe or not (at connection level).

  6. Ping from Firefox 14 Beta 8: el navegador de Mozilla cuenta con nueva versión no final on

    […] – La barra de direcciones ahora completa automáticamente las URL escritas – Se mejora el gestor de identidades de sitios, para prevenir el spoofing de conexiones SSL con favicons – Se implementa la API de bloqueo de […]

  7. Abena wrote on

    This site is not showing the favicon?? It is a trusted site. I built it!! What can be done to display the favicon

    Thanks in advance.

    1. Eric wrote on

      They mean a trusted secure site that uses https, this is not abous malicious websites etc.
      And which Icon do you want to show the lock?

    2. Roger wrote on

      What happened to the favicon by the URL in Firefox 14.0?
      All that is there now is a basically useless, B/W globe on any site.
      The favicons still show up in the Bookmarks fine. I have made and installed several favicons and like to see my handywork when on those sites.
      At least give us the option to restore favicons to their rightful place.
      The information that space is supposed to supply, used to work just fine at the bottom of the page. Are you sure this isn’t just change for change sake? As far as I am concerned, this change is a step backward. A loss of information.
      Spoofed favicons? How often does that happen? The site info is in the URL anyway. I think you are reaching here.

  8. Ping from » Firefox 14 Beta promises to jack up web browser security | The midPhase Blog on

    […] suffered a security breach that compromised over 6 million passwords, the new robust version of Firefox browser 14 Beta is a welcome […]

  9. Jaroslav Matura wrote on

    I really hat…don’t like disappearance of the favicon. People like images, so why remove them?

    1. BACON wrote on

      The favicon is still displayed on the tab itself.

      1. r-bin wrote on

        But if I don’t use the tabs?

      2. Paul wrote on

        Agree with JM – the favicon is hard to spot (not sure if I’ll “get used to it” or not – but since it is in a different part of the window, and varies, depending on which tab I’m in, I suspect it will not be so obvious – especially in a busy session with many tabs, some of which — including the current one — may well be scrolled off to one side).

        Re Bacon – even if not scrolled to the side, the favicon will not show while any of the page remains unloaded – you just get the spinning “still loading” icon instead.

        Not sure how big a deal this is, but branding types and webmasters won’t like it.

        Still, it’s good to try new things sometimes – even if it turns out the old way was better, or further improvements are needed…

  10. crater0083 wrote on

    I hate the gray icon, this is better:
    http://userstyles.org/styles/59403/firefox-operalike-text-field

    1. CrlyWrly wrote on

      @crater0083 – I agree! – but a lot of bother having to use Stylish add on just to get this simple effect.

      I thought FF was supposed to be good for accessibility then they come out with all this tiny, grey on grey stuff in the UI.

      It’s obviously not a good idea to just provide colour indicators but if you have to use a computer a lot and your eyes are not as young as they once were it really doesn’t help to have things more difficult to notice than they have to be.

      I suppose if this version doesn’t crash or freeze quite so much I’ll forgive them – otherwise I will be hopping back to SeaMonkey and Thunderbird again to see what they are like these days.

    2. Mace wrote on

      I agree. i would recommend not upgrading until you get what you want

  11. guanxi wrote on

    If the favicon is the image of a lock, won’t that confuse users and be a tool for social engineering? I doubt many users would know or remember that a lock in the URL field is secure, but a lock on the tab is not. (I suspect many users pay no attention to either!)

    I thought that was the reason the security UI eliminated the lock icon years ago in favor of the blue/green panels.

    1. Larrikin wrote on

      Seems like changing the color of the awesome bar would have been a much better solution than removing the favicon from a familiar place.

  12. Peter wrote on

    Are you serious with these GREY https urls? Why not green when a site accessed via https ???

    1. Simon wrote on

      I agree, the gray https isn’t a good idea: you have to look closely to see the difference with the non secured connection.. If the difference with EV has to be pointed out, then use blue for security without EV, but not gray.

  13. Chuck Anderson wrote on

    Will there be a configuration parameter or chrome hack that will allow me to get favicons back? I’m guessing not – but holding out hope.

    I’ve never even seen a “spoofed” icon, and FF already has icons that let me know if a site is secure or not.

    I do not and never will use tabs on top, so the favicon on the tab, which may be on the opposite side of the browser window from the location bar icon, is not redundant. With several tabs in the tab bar, which one belongs to the site I am on?

    I think Mozilla should create a separate “browser-for-dummies” version for people that feel they need this kind of hand holding – or like constant change – and let the rest of us have a consistent web browsing tool to use.

  14. Ache wrote on

    Why you guys always do all your design for the light themes only? On any dark Win7 aero theme your globe and lock displayed as gray on gray when the address bar is out of focus. In other words – almost invisible.

  15. Johan wrote on

    I hope this can be disabled? I found it always very convenient to be able to see in the glimpse of an eye whether a site is secure or not. If the difference is now such a microscopic icon, it gets as annoying as it is in IE to discover that the connection is encrypted or that it is not. Some hidden pref maybe?

    This stuff looks like it will only look good on the Mac and maybe some Linux distros, so what am I going to do as a Windows user?

  16. koralock wrote on

    Why did you remove the blue / green box with domain name showed in https connection? That was very nice and simple to use and understand (and click for detail) and unique.

    This looks disgusting, inconspicuous and it looks similar to google chrome ! I dont like it and i dont understand why you imitate it, when you have a better design.

    I hope it will be back without any plugin … (setting in preferences / about:config is acceptable).

  17. Mathew wrote on

    Hi,

    why would u change the old way with the blue info bar in the url telling the user that there is an ssl connection?
    http://support.mozilla.org/en-US/kb/how-do-i-tell-if-my-connection-is-secure

    For a normal user, it is much more obvious, if there is a color change to the blue ssl icon if they visit an ssl site.
    With the new globe to padlock system, nobody will ever notice that there is an ssl connection.
    So why mozilla, this change? It want come to my mind..

    Is there a way to in FF14 to go back to the good old blue ssl info?

    1. Chris wrote on

      I second this.

      Blue bars showing domain and green bars showing company were a nice and established way to easily transport information on ssl status.

      Now w/ favicons nearly gone and just a lock icon or a lock icon and a nearly not to decipher company name on ev ssl certificates, it is one step back.

      And it is a step backwards that is surely not a ui improvement but a deterioration.

      Please bring back the color ssl bars for ssl certificates in blue and ev ssl certificates in green.

  18. MITM wrote on

    How can man-in-the-middle, e.g., proxy, connections be detected? Various proxy devices (Cisco Ironport, for example) return a valid certificate to the browser, but decrypt the SSL traffic for inspection; they then re-encrypt to the target site.

  19. BAPR wrote on

    Better control of sites that use self-signed certificates would be greatly appreciated. I perform a lot of testing on VM’s from multiple vendors and all of them come with self signed certificates out of the box for their web GUI’s. The ability to add an exception is very hit or miss. Due to this I use Chrome because it allows me to acknowledge the issue but then will connect me to the site without issue. It seems that Firefox is attempting to “dumb down” the capability. Perhaps some type of setting in about:config that allows the user to toggle this protection on/off. Most engineers I know have similar problems with self signed certs from OEMs

  20. Mark wrote on

    I agree with some of the posts above: the gray globe and lock are dull, and the standalone lock is a regression from the blue panel for SSL sites. Heck, even Navigator 2.0 had a shiny gold aura around the lock icon for SSL sites!

  21. DLX wrote on

    It was much easier to perceive wether the page was secured or not in FF13. Furthermore the new light blue skin for the header bar is a bad choice. Grayscale would be much more neutral and leave the coloring to the web designers…

  22. ws wrote on

    It sucks. Plain and simple. Favicons have a point, they are not useless. Bring them back please.

  23. David Bund wrote on

    This is exceedingly poor from a useability standpoint. Favicons are missing (except on tabs), and tiny, gray icons replace them, now the sole visual feedback regarding security. You’ve got to be kidding! Fortunately, the Padlock extension still works — at least you didn’t ‘update’ that.

    I’m not a big fan of Chrome but I find myself using it more and more. Why not, if in the main FF is merely going to copy it?

  24. Rob Scott wrote on

    Firefox 14.0.1 is not displaying iframes – is this related to this?

    Iframes of https pages – work
    Iframes of http pages – don’t work.

    We use similar embed code in our websites to that Google uses for YouTube. YouTube embeds – work; our embeds – don’t work.

    Do we have to change all embed code (and tell all users to change theirs) to https in order for them to work in Firefox 14.0.1?

  25. taglife wrote on

    Your pictures are Wrong~!!!
    https://www.mozilla.org/en-US/firefox/fx/
    This website does not supply ownership information.
    So it will not have 4 kinds Site Identity~!!!

  26. exciting wrote on

    Cant wait for these changes!

    – A streamlined and more easily readable identity panel
    – Exposing more information about your relationship with the site e.g. how many times have you been there
    – Notifying you if you are submitting sensitive data over unencrypted connections
    – Notifying you if you are submitting data to a site for the first time

  27. AmmokK wrote on

    I want Favicons back!
    And why the symbols changed as well? I liked the old symbols. The new stuff is all so grey & white aka boring!
    Let me decide what i want and don´t just change everything :/

  28. Alan wrote on

    I want my favicons back, and I want the identity info for secure sites.

    Its fine to change things up, but don’t lock the rest of us out of having it the way we liked it too.

  29. Barry Buchbinder wrote on

    For what it’s worth, now that 14 is out, I miss having the favicon in the location bar in addition to having it on the tab. I’d be happy with an option (or addon?) that gives the user the ability to add it back.

  30. Peter wrote on

    Will the grey https url change back to green after the 2012 olympics?

  31. Peter wrote on

    Pls Google (ff employer) change back the annoying grey https URLs to green. This is very misleading. It is easier to manipulate the traffic with ssl strip, MITM etc. Olympic is over, terror threat is over, pls change it back to GREEN! pls pls pls! People won’t change to chrome just because you put these little tricky annoying changes into Firefox browser, but this is very annoying. It’s absolutely no sense! Thank You

  32. 依云 wrote on

    Hate this ugly useless icon VERY MUCH! I’m trying my best to get my pretty-looking favicons back!

  33. Karen wrote on

    I agree. After some 15-20 years of using browsers I am tired of having to familiarise myself with changes every few months. Give us a break. Will everyone on the internet just stop changing things for the sake of it?

  34. Ping from Google goes private in new Firefox « Nop-arti3319 on

    […] also affects your security. This tweak makes it easier to see the “verified secure”lock icon to the left of your location bar.If you’re using OS X 10.7 Lion, you’ll now get native […]

  35. Ping from Mozilla Releases Firefox 14.0.1 « Tech Helper on

    […] have a green icon and display the name of the site owner. Mozilla has posted examples in a separate blog post. This version also fixes some known security vulnerabilities in previous version of Firefox. […]

  36. Rene wrote on

    Please, dear developers, change the color of secured sites (with high encryption standards) back to the color green! The grey lock is only barely visible under many darker configurations (Ubuntu, …) and it is very hard to detect changes in the security status, e.g., when browsing a site or switching tabs. I like to surf the web securely, not always watch out on a small icon whether something has changed. In my opinion, this is a clear setback in both functionality and security of Firefox and, to be honest, I don’t know who initiated this change, but he or she was clearly… let’s say… mislead, to be nice. So, *please*, change the default behavior back! (Or at least give us an option to toggle the behavior.)

    Thank you very much!
    Best regards
    René

  37. Funka! wrote on

    I would love (and certainly miss) the glaring indicator when you are on an HTTPS page that is “partially encrypted” to bring your attention to the matter instead of quietly ignoring this fact. When something like this is broken (broken because the expectation is that a page served over HTTPS should actually be 100% secure) it would be really nice to be made aware of it, instead of quietly not saying anything about it. (And no, in my opinion, the “lack” of something is not saying anything and is hardly brought to anyone’s attention.)
    In fact, there used to be an add-on called Padlock which would bring back this old behavior, but alas, doesn’t work anymore in FF 18 or so onward.

  38. Josh wrote on

    FYI – the behavior of the site identity tooltip is very obnoxious:

    The panel pops up and interferes with dragging bookmarks into the sidebar in the browser – which I do on a daily basis, and often.

    Depending on the site it can make this function completely unusable – which means a much longer process of simply getting my sites bookmarked.

    Turning off the entire thing using about:config is not a solution.

    Please address this behavior! Thank you