This series consists of two parts — Part One: An Introduction to UX and Part Two: Designing Complex Applications
Have you ever found yourself in a situation where you are frustrated with a product due to its bad User Interface (UI)?
UI design can make or break your product. For example, in the e-commerce industry, cluttered shopping feeds may reduce a product’s searchability and cause friction to the user’s shopping experience.
The consequence? Users might stop using it and switch to a competitor’s product.
Source: uxdesignmemes
This is why User Experience (UX) research should be conducted before designing the UI — this ensures that the resulting UI satisfies user requirements and provides a good experience. You may then ask, what is UX all about?
This article seeks to share, in three sections, an introduction to UX, the design process and the key considerations when designing cybersecurity products.
What is UX?
As a UX designer at GovTech’s Cyber Security Group, I am responsible for the UX of our in-house cybersecurity products. I have always found it difficult to explain what I do to my friends and family. At gatherings, I often fall back to the explanation of ‘I design how websites work’. However, that is an incomplete definition and understates what a UX designer does. Often, a follow-up comment would be ‘Oh, so you’re a Graphic Designer’. However, UX designers do far more than sketching out the UI and deciding where an element should be placed. Don’t get me wrong, these UI aspects are important, but we should not overlook the main role of a UX designer — designing a good user experience.
In many ways, UX designers are interpreters. We decipher technical requirements and make them understandable for the user. We exercise situational awareness by deciding whether to focus on simplicity or involve sophisticated designs. We play a crucial role in ensuring a balance in our design between technical demands and user needs.
UX design focuses on establishing a deep connection with a user — what they need, what they value, their abilities and limitations. UX also has to account for business goals and objectives, and translate all the users’ requirements into a UI and test it with users.
What is a good way to conduct a design process?
UX designers often use the double diamond approach to guide the design process. It is an iterative process consisting of four phases that alternate between divergent and convergent thinking. The “Understand” and “Develop” phases are phases of divergent thinking and require designers to get creative and keep an open mind about the problem and the potential solutions. The “Define” and “Finalise” phases are phases of convergent thinking, where designers focus on scoping the solutions to tackle the original (design) problem.
Source: Double diamond diagram, testing time
Phases of the double diamond process:
1. Understand phase
- Identify the real problem through communication and discussion with users or customers to understand their workflow and observe how they use your product
- Research methods: User interviews, Stakeholder interviews, Online survey, Contextual inquiries, Market Research
2. Define phase
- Use insights gathered from the Understand phase to prioritise and identify pain points and common patterns to focus on
- Research methods: Affinity mapping, Empathy mapping, Persona building
3. Develop phase
- Generate as many ideas as possible, prototype solutions or concepts and iteratively seek input from a range of people
- Research methods: Ideation, Prototyping
4. Finalise phase
- Test different solutions on a small scale, reject those that do not work and improve the ones that do
- Research methods: Moderated User testing, Usability testing
It is important to note that the double diamond is not a linear process. As we better understand the user’s needs, or as requirements change, we frequently revisit a previous phase. Developing simple mock-ups may also be part of the “Understand” phase, as it could help users better articulate their workflows and requirements.
Following this process often leads to better design because they are not based on assumptions, but carefully collected and evaluated feedback from those who will eventually use the product.
Key UX considerations when designing cybersecurity products
Several factors make UX for cybersecurity products challenging. For instance: cybersecurity products involve large amounts of complex and technical data. Complex interactions such as filtering, searching, and sorting capabilities have to be well-designed with user intent to allow them to sift through all that data. Users may also view cybersecurity products as a hindrance that prevents them from working efficiently.
I would like to share three crucial points to consider when designing products in the realm of cybersecurity.
Make security products usable
Studies have shown that poor usability hinders the effectiveness of security products; if a security product is too difficult to use, it would be less adopted by users. Security products should not hinder or frustrate users — they should instead empower users to accomplish their tasks securely and efficiently.
Source: Alana Brajdic
It is important to understand your user and their mental model. Matching the system and real-world is one of the usability inspection rules used to identify any design issues associated with the UI. The product’s design should be specific to the user and display information in a natural and logical manner so that the application can be used intuitively.
We also need to pay attention to a product’s workflows — particularly how users interact with the product and how difficult it is to accomplish a task. This allows us to achieve a balance in both usability and security.
For example, a security feature becoming more and more common these days is two-factor authentication (2FA). If you have 2FA enabled for your Google account (and I highly recommend you to do so), you need a second factor in addition to your username and password when logging in to Gmail. This second factor is usually an ever-changing 6 digit PIN, which can be retrieved from a hardware token, SMS or an authenticator app, as shown below.
Source: vox
Although this improves security, there are some issues from a UX perspective. Some users may have multiple accounts and face difficulty finding the correct PIN to use. Others may feel stressed having to enter the code before time runs out — not to mention the waiting time for SMS. All these factors may cause users to feel frustrated and, as a result, disable 2FA for their accounts.
Now, there is an updated form of 2FA, known as on-device prompts. You begin with your usual login process — entering your password to sign in to your Google account. Instead of requiring you to manually enter a six-digit pin from an authenticator or SMS, Google sends a “Trying to sign in?” prompt to the mobile device you have logged in from.
Source: theverge
With this new approach, the experience of logging in becomes much easier compared to the conventional way while also providing a comparable level of security. It makes the login process faster by offering a more usable and seamless experience and saves users the hassle of finding and keying in the code.
Design for multiple user groups
Cybersecurity products are used by a wide range of users — from cybersecurity specialists to computer novices. The product must be intuitive and understandable to all these users.
Designers need to consider the varying levels of knowledge within each user group. The design needs to be flexible and usable to accommodate user’s needs in the most suitable way.
One interesting example is the security prompt that Firefox displays when encountering an invalid SSL certificate. The designers realised that most users would not have much technical knowledge, so they avoided technical jargon and used simple and concise sentences in the security prompt. They also included visual cue (bright blue button) to highlight the recommended action to take.
From the design, it is evident that the designers at Firefox have considered the computer novices and advanced users. They did this by displaying content that is more broadly accessible and immediately important on the first screen, and providing detailed information accessible through the “Advanced” button in simple English. This allows curious users to find out more while supporting advanced users by providing the error code and link to view the problematic certificate.
There may not be a one-size-fits-all design; the product and workflow may be modularised, with a different view and process designed for different group of users.
Focus on meaningful and actionable data
Lastly, cybersecurity is a complex domain that typically involves a vast array of data. Workflows and UI should be designed to surface relevant information to support a user in making decisions and taking actions — focusing on what is important, efficiently performing tasks and reducing the chances of making mistakes. This is especially true for complex interfaces, which may inherently contain a lot of competing information and controls, including non-critical elements that make visual-search tasks more difficult.
In such cases, UX designers may consider using progressive disclosure. This concept discloses information progressively, only reveals the essentials, and helps users manage the complexity of feature-rich websites or applications. This technique is simple, yet powerful.
The example below is a static application security testing (SAST) platform used by developers. When developers review the results of such a tool, they typically want to understand the findings first i.e., what is the finding about, is it a true or false positive, and what actions can they take. If the result is indeed a true positive, developers would then be keen to look into resolving this finding.
The UI below supports such a workflow by first surfacing all the relevant information a developer needs to decide if the finding is a real issue, and progressively disclosing remediation information on another page. This avoids cluttering the UI and providing too much information upfront, allowing developers to focus on the relevant information to complete their task with lesser distractions and decrease the chances for errors.
With this information, developers can quickly understand the findings and decide on the next course of action, i.e., remediation.
Conclusion
UX is an enabler that humanises technology. By anticipating user needs and behaviour, we can create a strong UX that reinforces strong security with an ease-of-use. This helps to prevent bypass culture, positioning it as an essential first line of defence in our ever-changing cyber landscape. Watch this space for our next article to learn how we design complex applications for our users.
Author: Tan Yining
Originally published on
CSG @ GovTech
For more deep-dive cybersecurity tools and techniques, please visit
CSG @ GovTech