UI/UX Awareness — Design Guideline Understanding and Implementation
Hi everyone! In this blog post, I want to explain to you all about my understanding of design guidelines in UI/UX and how my team and I implemented it in our Software Engineering project.
What are Design Guidelines?
Design guidelines are sets of recommendations towards best practices in design. The purpose of design guidelines is to give clear instructions to designers and developers on how to adopt design principles such as visibility, findability, learnability, and others. Design guidelines give useful ‘guidance’ on how designers and developers can achieve and fulfill a design principle in the application. Therefore, design guidelines are intended to help designers understand how to implement a principle without restricting their creativity in design.
Design guidelines are not as generalizable as design principles. This is because design guidelines come from various sources. An example of this is that some people have their foundations of design guidelines from basic common sense, some people have design guidelines based on their understanding of human cognition, and others have their understanding of design guidelines based on results of a particular empirical study or collection of studies. As a result, we can find some design guidelines that conflict with one another, particularly when applied under different contexts of design.
User Interface Design Guidelines: 10 Rules of Thumb
In designing the user interface, there are some heuristics that we are recommended to follow. These heuristics have been reflected in many of the products designed by some of the world’s most successful companies such as Google, Apple, and Adobe. This heuristics is called the Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. Jakob Nielsen is a renowned web usability consultant and partner in the Nielsen Norman Group while Rolf Molich is a usability expert. The 10 rules of thumb is actually an ‘enhancement’ or ‘improvement’ from Schneiderman’s eight golden rules 4 years after Schneiderman’s initial publication.
Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines
- Visibility of system status. Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time.
- Match between system and the real world. Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are. Presenting information in a logical order and piggybacking on user’s expectations derived from their real-world experiences will reduce cognitive strain and make systems easier to use.
- User control and freedom. Offer users a digital space where backward steps are possible, including undoing and redoing previous actions.
- Consistency and standards. Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen.
- Error prevention. Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being called upon to detect and remedy problems, which may on occasion be beyond their level of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving error prevention.
- Recognition rather than recall. Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. For example, we often find the format of multiple-choice questions easier than short answer questions on a test because it only requires us to recognize the answer rather than recall it from our memory.
- Flexibility and efficiency of use. With increased use comes the demand for fewer interactions that allow faster navigation. This can be achieved by using abbreviations, function keys, hidden commands, and macro facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions can be achieved through more convenient means.
- Aesthetic and minimalist design. Keep clutter to a minimum. All unnecessary information competes for the user’s limited attentional resources, which could inhibit the user’s memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the current tasks, whilst providing clearly visible and unambiguous means of navigating to other content.
- Help users recognize, diagnose and recover from errors. Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation.
- Help and documentation. Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.
How My Team and I Implement Design Guidelines in Our Moodah POS Software Engineering Project
In Moodah POS Software Engineering Project, we have implemented several Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines in the application. Some of the guidelines that we have achieved in the implementation of the features are, 1. Match between system and the real world. 2. User control and freedom. 3. Consistency and standards. 4. Aesthetics and minimalist design.
Here are some of the pictures of the application that contains the implementation of the guidelines:
Thank you for reading :)
