A quick look at usability and accessibility principles in user interface design, and how the Snapchat product experience matches up.
What is Usability?
Usability is the ease of use of an interface, or how easily people can learn and use your product.
Is the product behavior predictable, expected, and usable?
There are 5 broad categories for usability heuristics: Learnability, Efficiency, Memorability, Errors, and Satisfaction.
Learnability is how easy your product is to learn. Let’s look at the major components of Learnability:
- Visibility & Feedback — the system should make clear what it is doing
- Mapping — the relationship between moving a control and its results in the real world. When I drag the volume slider left and right while music is playing, the sound gets quieter or louder, respectively
- Affordances — the properties of an object or interface that show how it can be used
- Constraints — limits to the perceived operation of a device
- Consistency — makes a product feel cohesive. Inconsistencies can make the product feel broken, disjointed or confusing.Consistency is important in labeling and actions.
- Help — It’s better if the system can be used without it. As much as possible, [design] should operate without instructions or labels. Any necessary instruction or training should be needed only once; with each explanation the [user] should be able to say, “Of course,” or “Yes, I see.” A simple explanation will suffice if there is reason to the design, if everything has its place and its function, and if the outcomes of the actions are visible — Donald Norman, The Design of Everyday Things
Memory is both knowledge in the head and knowledge in the world.A good design will reduce the user’s memory load by making objects, actions, and options available. The user should not have to remember information from one part of a flow or dialogue to the next. Another key consideration in memorability: when users return to the design after a period of not using it, how easily can they reestablish proficiency?
Satisfaction is hard to quantify because it takes many factors into account. Many companies attempt to measure satisfaction from usability testing or ask their users to complete a Satisfaction Survey.
People have a tough time assessing how satisfied they are with a product, so surveys usually ask less abstract questions that help get to satisfaction. One very common question for these surveys is, “How likely are you to recommend [product name] to friends or family?”
According to Jakob Nielsen, there are 10 usability heuristics for user interface design, what are they?
10 Usability Heuristics for User Interface Design
1. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
5. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
6. Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
7. Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
What is Accessibility?
The practice of ensuring that we create websites that can be used by anyone regardless of their capabilities. It is how easy the interaction is for someone with a disability.
Managing flow — A user must be able to use the keyboard to complete all interactions. Designers, must ensure that keyboard access is properly designed.
Re-creating visual interactions — visual information must be presented in a non-visual way for someone that cannot see or cannot see the entire screen at once.
Ensuring proximity — if two things are closely related, they need to be close to each other in the interface.
Setting expectations — the problems that all users face, are more difficult for people with disabilities. For instance, if an error screen pops up, it’s a lot harder for someone with a disability to navigate past it. Designers, are expected to always strive for clarity to prevent these errors from frustrating the users.
Writing the perfect content — we need to ensure that we have the correct information for everyone. We deliver the right content by asking people what they need, observing how they work, and then shaping the content to what works for them. This works especially for people with disabilities.
Designing for memory issues — it’s becoming more trendy to create minimalist interfaces where form-field labels are non existent but this has a significant impact on the people using the forms. It can be difficult for users with cognitive disabilities to remember particular information, which is why when we design we need to take into account these types of users by creating interfaces that allow those users to sustain functionality.
Dark Patterns are tricks used in websites and apps that make you buy or sign up for things that you didn’t mean to. The purpose of this site is to spread awareness and to shame companies that use them. When you use the web, you don’t read every word on every page — you skim read and make assumptions. If a company wants to trick you into doing something, they can take advantage of this by making a page look like it is saying one thing when it is in fact saying another.
An example of this would be Amazon. Have you ever tried to delete your Amazon account? If so, you would have noticed that it was extremely difficult to figure out how to do so, or you had to go through a series of steps to complete the task. Amazon designed it this way to prevent people from deleting their accounts easily. This is what we call a dark pattern trick.
The Snapchat Experience
Now that we know a little more about usability, accessibility, and the ethics of user interface design, we will go over how Snapchat uses these principles.
Snapchat and Learnability
Snapchat ranks high in learnability when it comes down to the photo editing features. Snapchat makes photo editing simple by using mapping. Mapping shows visible results as the control is changing. Photo editing involves values, such as filters, hues, texts, and so on. If a user had no background in photography, then understanding how those values apply to photo editing can be overwhelming. However, Snapchat uses mapping to allow users to see how changing the values affect the photo as they change it.
Snapchat and Efficiency
Snapchat uses a fixed navigation bar to increase the efficiency of their app. No matter where the user navigates in the app, the user can always perform the basic functions of uploading a picture, going back to their profile, and performing a search.
Snapchat and Memorability
Snapchat search feature has good memorability. When the user begins to type what they are searching for, Snapchat auto-populates a list of possible results. Snapchat uses an algorithm based on the user’s previous searches and views to auto-populate the list, as well as popular searches. This feature allows the user to work off recognition instead of recall.
Snapchat provides a lot of different features to improve the usability and accessibility of their app. The product’s large success is due to their intuitive design and continuous implementation of making the user’s experience better. As the platform continues to grow, I can imagine the functionality, usability, and accessibility of the product experience will make great strides in ensuring the ultimate user experience.