Simple Rules to Design Simple Screens

rinita

“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:

Simple Rules to Design Simple Screens 1

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:

Simple Rules to Design Simple Screens 2

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.

Simple Rules to Design Simple Screens 3

Source: http://vanseodesign.com/web-design/progressive-discolosure/

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

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.

Simple Rules to Design Simple Screens 4

In this example, focus is going to the “Delete” button as it looks different than the other elements on the screen.

Repetition

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.

Simple Rules to Design Simple Screens 5

Source: http://www.techrepublic.com/pictures/material-design-10-apps-that-show-off-googles-new-ui-language/

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.

Alignment

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.

Simple Rules to Design Simple Screens 6

Source: http://www.smallbizdaily.com/8-web-design-mistakes-that-ruin-your-visual-content/

Proximity

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.

The above-mentioned rules are among the core principles to be followed while designing anything digital or physical. Just by practicing these rules, one can achieve enormous benefits in terms of user engagement. Designers may be following these rules unknowingly. But knowing its importance and practicing it consciously with greater commitment will help them design complex things in a simpler and better way.

Simple Rules to Design Simple Screens 7

Source: https://pgsramblings.wordpress.com/2012/03/02/windows-8-customer-previewnot-really-impressed/

This is an example of Proximity. Information is properly grouped. It is clearly understood that which content belongs to which group.

The above-mentioned rules are among the core principles to be followed while designing anything digital or physical. Just by practicing these rules, one can achieve enormous benefits in terms of user engagement. Designers may be following these rules unknowingly. But knowing its importance and practicing it consciously with greater commitment will help them design complex things in a simpler and better way.

———————————————————————————————————————————

References

[1] The Non-Designer’s Design Book by Robin Williams, 1994

[2] User Experience (UX): The Ultimate Guide to Usability – by David Travis

[3] https://en.wikipedia.org/wiki/Hick’s_law

[4] http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

[5] The Design of Everyday Things by Don Norman, USA, 1988

 

 

360 Videos

 

 

about the author

rinita