December 27, 2016
“User Centered Design” is one of the most commonly used phrases in the context of design life-cycle. There are several steps we need to undergo to design something which is user centered; be it a user interface or any other usable, tangible product. The steps involve – analyzing the opportunity, building the context of use and then finally, creating the user experience.
And to create a good user experience we need to know a few simple but important rules to design screens for immersive user interactions. Let’s discuss some of these rules.
Rule 1: Understand the mental model of the user and make interfaces to match it
“A mental model is based on belief, not facts” – says Don Norman, a world-renowned usability expert. So, what does that mean? A mental model is the representation that people have in their minds about an object that they are interacting with. The term “Mental Model” was first coined by the great psychologist Kenneth Craik. A mental model is mostly created in a user’s’ mind even before they use that particular product. They gain these perceptions from the previous experiences of using similar things or from the real world. So, it may be incomplete or even wrong. Let’s see an example:
When we see this door – we try to PUSH. This is a belief – our mental model which comes from the conventional door we see everywhere. But, in this case it is not correct. “A door that requires instructions is a failed design.” – Don Norman said in his book The Design of Everyday Thing.
Designers should understand user’s mental model, by using different research techniques such as contextual enquiry, observatory study etc.
Rule 2: Follow idioms and design patterns and adopt consistency
We can identify products by their container designs. Similarly, we can identify behavior of a particular element in applications by its design patterns. This can be called idioms as well. Idioms match with our mental model and help people identify things more easily and quickly. For example:
When we see a text box with the “magnifying glass” icon, we can easily identify that it used for ‘search’.
So, we should use conventional design patterns consistently for efficient usability.
Rule 3: Use Progressive Disclosure to exhibit information gradually and on demand
Progressive Disclosure is an interaction design technique which is very useful for retaining the user’s attention by reducing the cognitive workload. Users always want more; at the same time they want it to be easy to use. Surely, both cannot be possible at the same time and most of the designers fail to provide such things. And here Progressive Disclosure helps. So, what does it do?
The concept is to provide information to users which are mandatory and most important, and show the extra options when they need it i.e. on demand. Progressive Disclosure comes from one of the laws of psychology – “Hick’s Law”, named after a British psychologist William Edmund Hick. It states that when we give more options to users to choose from, they take more time to decide.
The above image is an example of Progressive Disclosure. Primary information is given initially and if users are interested to see further, they can click on more options. All the options at the first place would have been too complex and unnecessary. Hence, this kind of action buttons enhance the experience enormously. They see information only when they need it.
But, of course, designers need to know what kind of information should be provided at the beginning and what can be provided later. This can be acquired by using different research techniques such as field visits or analysis of users performing tasks.
Rule 4: Use Aesthetic Usability Effect to enhance usability by making things captivating
People perceive that more aesthetic the designs, the more easy it is to use – even if they are not. This defines the Aesthetic Usability Effect. Studies say, aesthetic designs earn more acceptance than the less accepted designs as aesthetic designs look appealing to users and thus they have a high probability of being used.
The design principles to attain the Aesthetic Usability Effect optimally, is an acronym – CRAP (Contrast, Repetition, Alignment and Proximity) – termed by Robin Williams in his book The Non-Designers Design Book. Let’s see what these four concepts are:
Contrast in the design concept is the most powerful concept and it is used to create focus to certain parts of the design. To create contrast, designers need to make the object look distinct from the other elements on the screen.
In this example, focus is going to the “Delete” button as it looks different than the other elements on the screen.
Repetition means maintaining consistency. It means using the similar elements throughout the design. By using similar design patterns, styles and fonts in all the screens the user is made to feel in the same place. Also it helps user to familiarize the way the information is being provided to them. Using design template helps to makes the repetition principle work.
This is an example of the Repetition Principle. Here they have used Android Material Design Concept. By looking at the screens it is understood that these are from the same family.
As the name suggests, alignment means to align the information properly so that all the elements look like they are interconnected visually, and this helps to maintain the user’s focus. Alignment has a huge contribution to make things aesthetic and less complex. It takes nothing more than a poorly aligned form to make a website or an app look ugly.
Proximity is the principle which says that information which is related to each other should be grouped together and placed closely so that they can be viewed as a group. Elements which are placed far away from each other cannot be closely related. This principle is a part of the “Law of Simplicity”, also known as Gestalts’ Law. There are two main reasons for which this principle is required. One, it helps users search options easily when they need to. Second, grouping options together help users acquire a conceptual model about the way the web site is organized. It is easy for users to obtain a conceptual model about the way the information is organized in the application.
This is an example of Proximity. Information is properly grouped. It is clearly understood that which content belongs to which group.
 The Non-Designer’s Design Book by Robin Williams, 1994
 User Experience (UX): The Ultimate Guide to Usability – by David Travis
 The Design of Everyday Things by Don Norman, USA, 1988