Arabnet Arabnet

The saying goes “UI is like a joke; if you have to explain it, it’s not good”. Several HCI researchers and practitioners bestowed their perception of UI Design Guidelines upon UI designers - their rules are still being applied to this very day.  

In 1993 Jakob Nielsen and Rolf Molich developed their 10 user interface guidelines – they crafted these rules around 3 main pillars: usability, utility, and desirability of the design. In 2005, Ben Shneiderman’s 8 golden rules came to the surface – they reflected, in their majority, Nielsen and Molich’s UI design logic.

Despite the massive volume of research that was done in the field of UI design, its core still orbits around a single element – the quality of User Experience (UX). UI designers’ mantra is to remain faithful to the Human-Thought Cycle – designing a user-focused experience is the raison-d’ être of any UI design.

In this article we will combine the most important rules that are being employed today in UI design, and explain the psychology upon which UI design operates.  

Nielsen and Molich’s viewpoint on UI guidelines
The heuristics of the two researchers were applied by large companies, such as Apple, Google, and Adobe. As mentioned earlier, the main focus of these guidelines is to ensure the usability, utility, and desirability of the design.

Here’s a bit of insightful literature on these three pillars, before we move on to the actual rules:  

Usability is reflected in the familiarity and effectiveness of the design – Is your product well designed? Does it allow the user to achieve the task he was aiming at? Will the user recall the product’s look and feel?

Moving to utility – as Ann Handley, content marketing specialist and speaker, explains: a product is supposed to save users from a certain hell they suffer from, and deliver unto them a heaven that casts the hell away – that’s exactly what utility is about.  Without utility, the user experience will blow up in your face!   

Think of it this way, desirability is the one factor that distinguishes your product from its akin, who are both usable and utile – it’s your product’s cachet. Users are already blasé with a market that overflows with products same as yours, which is why your product needs to stand out!

via GIPHY

Now that we’ve broken it down for you, here are the 10 rules that Nielsen and Molich developed in the 90’s and still remain valid:

• Visibility of System Status – Users need to assimilate what their actions on your platform are leading to; they should always be informed of system operations.
• Match between system and real world – Think about how your designs are mirroring real-life elements. For example: substitute the cursor symbol, with a hand symbol for task-driven actions.
• User control and freedom – Give your users wiggle-room on the interface – think of the miraculous undo button, for instance.
• Consistency and standards – Make certain that your graphic elements and terminologies are maintained across the interface. A certain label in your menu bar, has to verbalize the same concept everywhere on the website.
• Error prevention – Your design has to be manufactured in a manner that impedes human error; however, given their level of expertise, users may perform wrong actions - your job is to prevent them from sealing the deal!
• Recognition, rather than recall - The keywords here are cognitive load, and short term memory (STM). Your strategy should veer towards reducing the elements on your interface (cognitive load), and limiting them to those who are task-related. Human attention is easily distracted, and the human memory can’t register more than 5 elements at once (STM).
• Flexibility and efficiency of use – Give your customers the ability to customize your interface the way that suits them.
• Aesthetic and minimalist design – Look at Google’s design. What do you notice? Simplicity.  The simpler the design, the less the clutter, the more relevant information is.
• Help users recognize, diagnose, and recover from errors – Use plain English when users perform a wrong action – avoid the jargon in your messages.
• Help and documentation -  Ideally, users shouldn’t need pointers to know their way around your platform; however,  do offer your undivided guidance to your users, if you think that the task at hand might be a bit complex – it all depends on the type of your solution, of course. 

Shneiderman overlooking UI Design
Shneiderman himself pinpointed the key elements that fall under high-quality interfaces; he made certain that his heuristics were able to deliver a pleasant and effective user experience. Here they are, outlined – the 8 golden rules:

• Coherence – Keep your interface predictable; humans perceive what they expect.
• Shortcuts – Reduce memory, automize and accelerate certain actions – this is seen in cookies that save personal information, per instance.
• Dialogue – Inform the user about the application’s status – validation messages are a good example in that sense.
• Control – Allow your users to modify their actions on your platform.
• Proximity – Prioritize your information according to the importance of their functionality – manage & position your elements intelligently.
• Familiarity - Users should be able to determine the purpose of your elements without acquiring guidance.
• Simplicity – Complex interfaces that are saturated with elements will repulse the user – keep things neat and nifty!
• Attractiveness – Be charming and appealing – attune cold and warm colors. 

Credits go to "Interaction Design Foundation". 

The psychology of UI principles
The psychology of human perception and cognition affected how UI principles were molded and applied. Here’s how psychology tuned the way UI design is being practiced:

• Our color vision is limited - avoid subtle colors.
• Our attention span is limited and our memory is imperfect – single action per page.  
• We can easily recognize things; however, it is very hard to recall them – select is easier then specify, for example.
• We think about our tasks, not our tools – task-driven information; humans don’t want to think, they want to achieve their goals without further exploration.
• We perceive structured information easier and follow visual hierarchy to reach our objective – primary actions should be heightened.
• We favor inductive reasoning over calculation – specify the prerequisite data to move to the next action. 

The Check-List of Every UI Designer

So, as a UI designer, here are your commandments to successful UX:

via GIPHY

• Maintain affordable designs – the user should visualize and understand the purpose of your elements.
• Don’t be afraid of skeuomorphic designs – speak the real world’s language; keep your elements life-like.
• Avoid distraction and develop task-oriented elements – reject the feature-creep, and don’t stuff your interface with irrelevant information.
• Think of new and experienced users.
• Keep the user-story in mind – satisfy the user’s mental cycle.
• Communicate with your users and give them feedback on their actions.
• Be clear and consistent.
• Relinquish control to the user – don’t design interfaces that are square; ensure flexibility.   
• Prioritize and reduce elements – differentiate between primary and secondary actions.
• Create a design that’s invisible – great design doesn’t have to be in one’s face; it can go by unnoticed, but still does the job. 

The Design-Empaths
In conclusion, practice has proven that applying design rules in real UI is not like shelling peas – it’s neither simple, nor mindless and there’s no singular recipe to go about it. Accomplishing great UI not only requires perception, it also demands a high level of emotional intelligence – specifically empathy.

When faced with a new project, ask yourself the following question: “What have I disliked in previous user interfaces? Does the interface I’m designing match with what I believe in?”

via GIPHY

Testing is Key
As a final note, even if you’ve fulfilled all the conditions of great UI design, do remember that users can be quite volatile and mercurial. Hence, optimizing your UI design requires a stellar testing team whose job is to assess your design’s performance and push it forward.

Good luck!