{"id":4091,"date":"2019-03-12T09:00:22","date_gmt":"2019-03-12T13:00:22","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4091"},"modified":"2019-03-12T17:44:36","modified_gmt":"2019-03-12T21:44:36","slug":"designing-better-security-warnings","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2019\/03\/designing-better-security-warnings\/","title":{"rendered":"Designing Better Security Warnings"},"content":{"rendered":"

Security messages are very hard to get right, but it\u2019s very important that you do. The world of internet security is increasingly complex and scary for the layperson. While in-house security experts play a key role in identifying the threats, it\u2019s up to UX designers and writers to communicate those threats in ways that enlighten and empower users to make more informed decisions.<\/p>\n

We\u2019re still learning what works and what doesn\u2019t in the world of security messages, but there are some key insights from recent studies from the field at large. We had a chance to implement some of those recommendations, as well as learnings from our own in-house research, in a recent project to overhaul Firefox\u2019s most common security certificate warning messages.<\/p>\n

 <\/p>\n

Background<\/h2>\n

 <\/p>\n

Websites prove their identity via security certificates (i.e., www.example.com is in fact www.example.com, and here’s the documentation to show it). When you try to visit any website, your browser will review the certificate’s authenticity. If everything checks out, you can safely proceed to the site.<\/p>\n

If something doesn’<\/i>t check out, you’ll see a security warning. 3% of Firefox users encounter a security certificate message on a daily basis. Nearly all users who see a security message see one of five different message types. So, it\u2019s important that these messages are clear, accurate, and effective in educating and empowering users to make the informed (ideally, safer) choice.<\/p>\n

These error messages previously included some vague, technical jargon nestled within a dated design. Given their prevalence, and Firefox\u2019s commitment to user agency and safety, the UX and security team partnered up to make improvements. Using findings from external and in-house research, UX Designer Bram Pitoyo<\/a> and I collaborated on new copy and design.<\/p>\n

<\/h4>\n

Old vs. New Designs<\/h4>\n

 <\/p>\n

\"Gray

Example of an old Firefox security certificate message<\/p><\/div>\n

\u00a0<\/strong><\/p>\n

\"Gray

Example of a new Firefox security message<\/p><\/div>\n

 <\/p>\n

Goals<\/h2>\n

 <\/p>\n

Business goals:<\/h3>\n
    \n
  1. User safety: Prevent users from visiting potentially unsafe sites.<\/li>\n
  2. User retention: Keep Firefox users who encounter these errors from switching to another browser.<\/li>\n<\/ol>\n

    User experience goals:<\/h3>\n
      \n
    1. Comprehension: The user understands the situation and can make an informed decision.<\/li>\n
    2. Adherence: The user makes the informed, pro-safety choice. In the case of security warnings, this means the user does not proceed to a potentially unsafe site, especially if the user does not fully understand the situation and implications at hand.(1)<\/li>\n<\/ol>\n

       <\/p>\n

      Results<\/h2>\n

       <\/p>\n

      We met our goals, as illustrated by three different studies:<\/p>\n

      1. A qualitative usability study<\/strong> (remote, unmoderated on usertesting.com) of a first draft of redesigned and re-written error pages. The study evaluated the comprehensibility, utility, and tone of the new pages. Our internal user researcher, Francis Djabri<\/a>, tested those messages with eight participants and we made adjustments based on the results.<\/p>\n

      2. A quantitative survey<\/strong> comparing Firefox\u2019s new error pages, Firefox\u2019s current error pages, and Chrome\u2019s current comparative pages. This was a paid panel study that asked users about the source of message, how they felt about the message, and what actions they would take as a result of the message. Here\u2019s a snapshot of the results:<\/p>\n

      When presented with the redesigned error message, we saw a \u00a022 – 50% decrease<\/strong> in users stating they would attempt to ignore the warning message.<\/p>\n

      When presented with the redesigned error message, we saw a 29 – 60% decrease<\/strong> in users stating they would attempt to access the website via another browser.\u00a0 (Only 4.7 – 8.5 %<\/strong> of users who saw the new Firefox message said they would try another browser, in contrast to 10 – 11.3%<\/strong> of users who saw a Chrome message).<\/p>\n

      (Source: Firefox Strategy & Insights, Tyler Downer, November 2018 Survey Highlights)<\/i><\/p><\/blockquote>\n

       <\/p>\n

      3. A live study<\/strong> comparing the new and old security messages with Firefox users confirmed that the new messages did not significantly impact usage or retention in a negative way. This gave us the green light to go-live with the redesigned pages for all users.<\/p>\n

       <\/p>\n

      How we did it:<\/h2>\n

       <\/p>\n

      \"Eight

      The process of creating new security messages<\/p><\/div>\n

      In this blog post, I identify the eight design and content tips\u2014based on outside research and our own\u2014 for creating more successful security warning messages.<\/p>\n

       <\/p>\n

      Content & Design Tips<\/h2>\n

       <\/p>\n

      1. Avoid technical jargon, and choose your words carefully<\/h3>\n

       <\/p>\n

      Unless your particular users are more technical, it\u2019s generally good practice to avoid technical terms\u2014they aren\u2019t helpful or accessible for the general population. Words like \u201csecurity credentials,\u201d \u201cencrypted,\u201d and even \u201ccertificate\u201d are too abstract and thus ineffective in achieving user understanding.(2)<\/p>\n

      It\u2019s hard to avoid some of these terms entirely, but when you do <\/i>use them, explain what they mean. In our new messages, we don\u2019t use the technical term, \u201csecurity certificates,\u201d but we do use the term \u201ccertificates.\u201d On first usage, however, we explain what \u201ccertificate\u201d means in plain language:<\/p>\n

      \"\"<\/p>\n

      Some seemingly common terms can also be problematic. Our own user study showed that the term, \u201cconnection,\u201d confused people. They thought, mistakenly, that the cause of the issue was a bad internet connection, rather than a bad certificate.(3) So, we avoid the term in our final heading copy:<\/p>\n

      \"The<\/h3>\n

       <\/p>\n

      2. Keep copy concise and scannable…because people are \u201ccognitive misers\u201d<\/h3>\n

       <\/p>\n

      When confronted with decisions online, we all tend to be \u201ccognitive misers.\u201d To minimize mental effort, we make \u201cquick decisions based on learned rules and heuristics.\u201d This efficiency-driven decision making isn\u2019t foolproof, but it gets the job done. It means, however, that we cut corners when consuming content and considering outcomes.(4)<\/p>\n

      Knowing this, we kept our messages short and scannable.<\/p>\n