Keeping Users Safe during Sign In/Up Page | UX Study

Overview

It is common to hear about bot phishing (i.e. password theft) attacks via other fake or unsafe websites in the news and that is extremely worrying in our everyday lives.

  1. How might we help improve defenses against bot phishing during a sign-in/up page to keep our users safe?
  2. How might we help improve defenses against bot phishing during a sign-in/up page to keep our users with disabilities safe?

Psychology provides useful insights that can help improve anti-phishing defenses by understanding what makes users susceptible to phishing. Karloff et al. described how humans tend to develop automatic responses to situations repeating themselves with the action that is most appropriate like a pre-recorded tape in our head. Karloff et al. explained users will automatically submit their credentials to a login page on an interface they have seen before even if it is not protected.

Users will automatically submit their credentials to a login page on an interface they have seen before even if it is not protected.

Psychology Design for Safe Log In

Knowing that people tend to make routine decisions mindlessly, it is advised to designers to not fight this habit. Instead, a safe login should at least include one forcing function. For example, the interactive custom image defends against automatic submission of credentials because it makes the user choose the correct image. This provides prevention and detection of unsafe login pages.

Accessibility Considerations

The following may have incorrect or inaccurate information as WCAG updates*

When designing a sign-in/up page, we need to consider how we are keeping our users with disabilities safe throughout our design decisions. It is always recommended to consult with the engineering team or an ADA expert to explore other technical feasibilities.

The table below explores the advantages and disadvantages of existent tools. You will see the term CAPTCHA which stands for Completely Automated Turing Tests to Tell Computers and Humans Apart. CAPTCHA is a tool to ensure that user input is coming from a human and not a bot but the challenge is that it is not accessible to users of all types and may prevent some users from accessing their own information.

Design Phase

How might we help improve defenses against bot phishing during a sign-in/up page to keep our users safe and while implementing accessible design?

Before I jumped into ideation, I explored how are other apps handling safe sign-ins.

Evaluating Existing Designs

Adobe Draw Screenshot

Adobe Draw App focuses on creative engagement space.

Pros:
Visually appealing with creator’s video on top, and it provides seamless access opportunity by connecting with one of your existent accounts.

Cons:
Users will mindlessly give away their credentials and video is not accessible for visually impaired users as it is acting more of a decoration.

How safe is it? It can be safe but that highly depends on the strength of the user’s external account password. If it is weak then the higher the chances to be hacked.

HealthEquity App Screenshot

Health Equity App is a tool to help users manage their transactions and increase their Health Savings.

Pros:
It utilizes the traditional form which enables the screen reader to go through each header faster as well as having the user manually sign in or utilize a Biometric alternative.

It has a “Contact Us” page for immediate human support.

Cons:
Biometric Login is limited in used for certain audiences.

Adobe Draw and HealthEquity apps are designed for different audiences and their design choices are aligned to their broader goals. Since this is a study in safety, Adobe’s decision puts a strong emphasis on the user’s judgment of their own password management and two-factor authentication set-ups in accounts like Google or Facebook.

HealthEquity has sensitive information from users' health savings accounts. It makes sense why HealthEquity is going an extra mile at forcing tasks on the user rather than reinforcing mindless automation. Even if the user forgets their password, HealthEquity forces authentication before the user gets to the “send recovery password to my e-mail. ”

Both apps offer a lot of insight into the complexity of design for user safety. Combining what I learned from both services, I decided to sketch a few ideas.

Sketching Concepts
The following text is a summary of what was going through my mind as I got my hands playing more with the concepts of the safe sign-in/up page.

General page: This is acting as a landing page and ARIA will read the options: Sign In or Sign Up.
Sign in or Log in Page: At the beginning, I showed the form as in HealthEquity. The biometric login was replaced in my mid-fidelity prototype for a [Remember this device] checkbox. I was thinking that while some users may not be able to use the biometric tool we can still enable some sort of seamless experience for other users.
Sign Up Page: I followed the classic form design here as well. I replaced [I am not a robot] checkbox for a CAPTCHA Bot in my next iteration because while [I am not a robot] showed not being very user friendly for blind users. *
Forgot Password Security Page: I forced an extra layer of security from bots. In this wireframe, I did include CAPTCHA Bot which I kept in my next iteration.
Password Recovery Page: On this page, I kept a simple form.

Concept Prototype

I took my sketch concept with the specified above iterations and built it in Axure. Find my prototype here: https://55ftyx.axshare.com

Next Steps:

I would explore more on the experience of screen readers by putting myself through the experience along with some user interviews to learn more about the current options people with disabilities are navigating as well as what is keeping them prone to phishing attacks compared to the mainstream population.

Reflection

There is a lot to be learned in the field of cyber-security tools as well as accessible design. They definitely have to go hand in hand and constant user testing will be recommended moving forward. As designers, we need to evaluate the product and user goals and make design decisions based on that and many of these times these two will come in conflict with each other and we need to take ownership of that reasoning and continue to iterate experiences to make a good user experience for everyone.

Citation:

Karlof, C., Tygar, J.D., Wagner, D.: Conditioned-safe ceremonies and a user study of an application to web authentication. In: SOUPS 2009: Proceedings of the 5th Symposium on Usable Privacy and Security (2009)

--

--

--

Hi 🙋🏻‍♀️ I am a Mix-Methods Researcher at Deloitte. I’d like to share my thoughts and experiences in the field💙 Thank you so much for visiting ☺️🙏

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Buyers Guide of TwinMattress https://t.co/dsTF28gDmD

Prototyping like a Pro

Callouts, InVision embeds, improved toggle buttons, and more!

Approach to branding ⁠ — Overview

How to Write Brand Survey Questions Ready for Mobile

Making German Bureaucracy Accessible

Building Your Better Mousetrap With Better Home Improvement Advice

Iterating the P4 prototype with on-site feedback

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karen

Karen

Hi 🙋🏻‍♀️ I am a Mix-Methods Researcher at Deloitte. I’d like to share my thoughts and experiences in the field💙 Thank you so much for visiting ☺️🙏

More from Medium

Case Study: Optimizing Player Gameplay

Waste Management with Waste4Change — A UX Case Study

Waste4Change Website Redesign

Case study: Improving the dog boarding experience

Paçoca, a brown and white dog, rests on a bed.

Case Study: Volun App Design