One of the most influential books I’ve read on product design was The Design of Everyday Things by Don Norman. The principles are so universal that they apply to almost everything from a toaster to today’s advanced technological products. Here is a walkthrough of Don’s principles to influence our collective design thinking.
Visibility
A good design guides the user in knowing what the most essential features are by making them more visible. The key is to prioritize content and functionalities. The goal should be to reduce over-complexity, but not fall for over-simplifying either.
Users need to know what all the options are, and know straight away how to access them. We subconsciously weigh in the decision (cost) to click on something based on the perceived value (benefit). The most effective way of getting people to take action is to make the target action as simple as possible while ensuring maximum benefit. In order to deliver high perceived value in the form of good user experience. It is crucial to narrow down to functionalities that answer the user’s needs that guide them to the specific functions. In doing so you also want to make sure you aren’t letting the user get overwhelmed with too many choices. Letting a user get stuck in the decision-making process of “what next?” impacts the cost-benefit. Visibility and accessibility of important features directly relate to Hick’s law (increasing the choices increases the decision time algorithmically). Fitting too much functionality into a site or an application directly impacts and hurts the user experience.
While designing, it is important to keep in mind the Gestalt Principles of Visual Perception as often times, our visual perception is manipulated by spacing, proximity, color, similarity, symmetry, etc. We tend to fill in the gaps and follow the lines of continuity.
Here is a good example of visibility on functionality. This is a screenshot of Orbit, the SAAS based frontend of Zenko. The menu on the left categorizes the functionality into the following 6 categories and under each category, it exposes the core features in each category in a clear hierarchy. Also, by placing it in a prominent position and giving it a contrasting color, it stands out in the design. It is clean and simple.
- Monitor
- Dashboard
- Statistics
- Location Status
- Configure
- Location constraints
- Explore
- Browser
- Search
- Workflows
- Application
- Bucket Lifecycle
- Account
- Settings
- Help
- Forums
Feedback and Constraints
As the battery of a mobile device drains, the little battery symbol on the top of the screen gives us feedback continuously on remaining battery life. When we plug in the mobile phone, a small lightning symbol gives clear feedback that the power source was detected and the phone is now charging. It is the communication on action taken and transparency whether the action was successful or a failure. People strive for predictability and control, and in most cases, clear actionable information impacts better decision making.
Observe various system designs around you and note how they provide feedback on their current status. An elevator chimes before closing the door and chimes when it reaches the destination floor. A car today alerts the driver if they don’t have their seatbelt on. A simple LED turns on when most electronic gadgets are powered on. All these pieces of information allow you to accurately assess the current state of the systems you interact with. This brings up a great point from the book. “Too much feedback can be even more annoying than too little. Feedback must be thoughtfully planned in an unobtrusive fashion.” The key is balance and that’s where real art lives.
What’s equally important is preventing the user from doing the wrong thing– the concept of constraints. Constraints are powerful clues limiting the set of possible actions. Norman gives a great example in his book of a toaster. There is only one place to insert the toast making it hard for the user to insert the toast incorrectly. The thoughtful use of constraints in designs let people readily determine the proper course of action.
Another example from Orbit shows as the button is pressed, it changes color to provide feedback to the user. This is a clue that tells the user something is happening.
Affordance
Affordance, simply put, is the perceived understanding of what could be done with the product or feature. Affordances refer to the potential actions that are possible. For example, the presence of a knob gives the user a signal that this surface can be turned, pushed or pulled in some way. This is just like how our brain knows that slots are made for things to be inserted into. The idea is that once someone perceives a feature they know what steps to do to operate. An example of high affordance is a shoe — it’s easy to figure out intuitively how to use it.
Another example includes the mapping above ATM interaction. There are physical constraints in place to prevent the user from doing the wrong thing. The card insert slot is lit giving “feedback” that this slot is where you insert the card. The last screen has a clear white test box with a red button saying ”enter,” again setting a perceived affordance that this white box will take the pin. The box will fill up 25% with every digit. With 3 digits entered, the box only has space for 1 more letter letting the user know only one digit remains.
Below, Orbit shows the possible actions that can be taken on the screen by disabling or graying out what cannot be modified. It also shows what is “optional” and what can be entered to configure replication of this source bucket to another cloud destination.
Mapping
Mapping is the relationship between control and effect. In a car, if I locate the dial that controls the temperature, it is easy to discover how to operate. If I turn it clockwise, the temperature gets warmer. If I turn it counter-clockwise, the car gets colder.
A slider bar on the mobile phone shows the direct mapping between sliding the dot left and right and the screen brightness.
Consistency
Creating a new impressive product gets users to come to you, but having consistency makes users want to stay. A few months ago Atlassian changed the Jira design and caused an internet storm. People that were loyal customers were unable to easily transition to the new layout. This new design did not give users an incentive to continue using their product. Instead of knowing how to operate everything, people were stuck searching for every button and relearning steps to execute old habits. One big consequence of broad design changes come when your users’ licenses expiration occurs around the same time as the changes. Time and time again, you will lose more customers if they feel they are better off using a product that they know, where they don’t have to learn something new.
People invariably object and complain whenever a new approach is introduced into an existing product because it directly influences the usability principles like:
- Learnability – the user has to learn the new settings.
- Memorability – if the new setting is intuitive such that the user finds it easy to memorize, this would be a positive outcome. If not, it is not welcome. Old habits die hard. If you’ve trained your users to your functionality, consistency plays an extremely significant role in making things look familiar, no learning curve, bring more efficiency, and directly enhancing satisfaction.
- Efficiency – the user sees the direct perceived value and once the user has learned the new interface, they can see themselves using it as it is higher performance in the user’s eyes.
- Errors and recovery – user made fewer errors with this new design and had a better feedback loop or intuitiveness of new design prevented the user from doing the wrong thing in the first place
- Satisfaction – measures the user’s level of being pleased or delighted with the product. This, for example, will drive the net promoter score.
When conventions are violated, new learning is required. More often than not, the merits of the new system are irrelevant.
Turning a knob in the clockwise direction increases the effect while anti-clockwise decreases the effect. Blue taps mean cold and red means hot. There are certain expectations that are hard-tuned and aligned with natural conventions while others are learned behaviors. Certainly, earned behavior also creates stickiness. When you uproot a user’s stickiness, you are taking the risk of losing the customer to better user experience offering from the competition.
Hopefully, this article was useful. Tell me what you think on the forum!
