One of the key success factors for any application or system is the way it was designed, and how easy for common users to understand how to use and interact with it and execute simple operations or tasks without prior training or manuals.
In this article, I will discuss seven key design principles introduced in Don Norman’s Design of Everyday Things. These design principles will help us design better for humans and to evaluate or critique any application design easily. The seven design principles are:
- Conceptual Models
- Gulf of Execution
- Gulf of Evaluation
- Visibility
- Feedback
- Mappings
- Constraints
Conceptual Model
Don Norman in his book, he explained the conceptual model as the following:
A conceptual model is an explanation, usually highly simplified,
Dan Norman
of how something works. It doesn’t have to be complete or even
accurate as long as it is useful
The importance of the conceptual models, as designers we design the application in a particular way which is called the “Design Model”. When the application is introduced to the users, they visualize the application mentally based on their interpretation and perception of how to use and interact with it, which is called the “User Model”.
As long as the design and user model are identical, the users will easily understand and interact with it.
Example
If we look at the Mac Mail app, it is designed with some structure that makes it well organized to differentiate between the different types of mailbox folders, what is inbox, what is flagged, what is sent, …etc.
If common users of the internet use this application, they will be able to visualize their mental model based on their experience and it will be easy for them to use it directly. So, the design model and the user model are identical here.
In a complex application, most of the time the user models are offered through user training or manuals to illustrate how the system works. What if, there is no illustration is covered or the application is offered to the mass public. Then, the most adjacent match between the design model and the user model will be required.
A bad example of the misalignment of the user model and the design model is illustrated in the image below, it is not direct a related example to the software engineering, but it will help to illustrate the bad conceptual model. Look at the image, Do you know which control open which flame?
Gulf of Execution & Gulf of Evaluation
The gulf of execution mainly describes how the user figure out how to perform a task or job with the application while the gulf of evaluation is how the user figure out what happened after he/she executed this task.
The two gulfs here are related to each other, and the designers should consider them closely and help users to bridge the two gulfs.
Example
We can take google search as an example. It is very clear how to execute a simple search task by writing the search term or keyword. So, this makes the gulf of execution very easy.
When you finish typing the keyword and hit the search button, the results will appear directly. So, you can easily notice the feedback of your action and what happened after you executed the search task. This makes the gulf of evaluation according to the user’s expectations.
What if, the results did not appear directly, or different result for different keyword appeared, this will make bad user experience and as well as bad gulf of evaluation.
In conclusion, we should bridge the Gulf of Execution through the use of visible elements, constraints, mappings, and a conceptual model. Moreover, we should bridge the Gulf of Evaluation through the use of feedback and the conceptual model.
Visibility
Visibility of the important functions is critical for the application as it provides strong clues to how to perform these functions. More visibility means, efficient gulf of execution, an easy way for users to create their mental design model for the application, and conveys the information about what important and what is not.
Don Norman in his book wrote about the visibility of signifiers as he said
Signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done.
Don Norman
We can relate the signifiers to be sound, visual icons, visual images, walkthrough, signs to click on action or button, and mouse movement.
Example
Let us take Microsoft PowerPoint as an example, you will find it as a great example of visibility. You will notice different ribbon menus to guide you what actions related to each menu, what actions can be done for each menu.
It is easy to know where to click to add the title and subtitle of the page. Moreover, because mainly you will need to add more than one slide, you will see add new slide is bigger, similar to Paste function.
There are a lot of other examples of good and bad visibility designs. For example, the image below, we cannot know easily, should we push or pull to open the door while it is the main job of the door!
Feedback
Feedback is very related to the gulf of evaluation, and how we communicate the results of an action. We may find a lot of forms online which you click on submit button and no results appear, no indication if you successfully submit the form. Some validations messages are not usable at all and do not inform us what is wrong and how we enter the information correctly to bypass the validation.
I think this is a frustrated experience. So, the feedback is very important and it can be in many shapes, for example, sounds, popup messages, confirmation messages, visual changes.
Poor design of feedback can be the result of decisions aimed at reducing costs, even if they make life more difficult for people.
Feedback is essential, but it has to be done correctly. Appropriately
Don Norman
Example
We can reuse the google search as an example of feedback, as when you click on search, the results of the search is the feedback. Moreover, Youtube player, when you click on play icon, the video started to play which is a good example of the feedback.
Another example of good feedback, the range date picker like the image below, as you can see the range selected highlighted that ensure the immediate feedback to users to eliminate or reduce any mistakes.
A bad example of the date picker is the image below, we cannot know what is today’s date, and the previous month is mixed with the current month and next month which make it harder to focus on this month days only.
Mapping
The mapping is the relationship between the controls and the objects to be controlled. It is hard to explain without an example, let us see the image below of a burner, in the left side we do not know which control controls the flame, but the right side, it is directly mapped to each flame location.
Example
If we correlate that with software application example, let us take the same PowerPoint example, you will see the ribbon menu is mapped to the actions related to this menu, if they are all mixed up, it will be very hard to reach the task you would like to do.
Another good example of mapping is Google maps. It maps correctly between the target and destination locations with a nice route as feedback. Also, each travel mode will be mapped to the route related to the selected mode.
Constraints
Don Norman defined the constraints as the following
Constraints are powerful clues, limiting the set of possible actions. The thoughtful use of constraints in design lets people readily determine the proper course of action, even in a novel situation.
Don Norman
The main usage of constraints to eliminate or reduce errors and mistakes can be done during the usage of the application. There is a lot of examples for constraints in the physical world, for example, the puzzle game, the lego game, the electrical plug, the USB plug, and others.
Example
Let us take an example for constraints in the software applications, for example, in the below form, the designer here put some constraints for the name to be first and last name, the country should be selected from a list, and the email field to have email format like shown in the example. The form may have other bad design principles are not covered, for example, in the gulf of execution what is mandatory and what is not, constraints for phone number area code, for example, should we add + sign or we should type 00?
Conclusion
The knowledge of these key design principles is essential to have a good applications design and proper usability that can result in good user experience and smooth journey while using the applications. I hope you will like the article and I recommend to read Don Norman’s book.
Moreover, if you would like to take a course to know more about user-centric design, there is a great course on Coursera as well about the introduction for UI design by the University of Minnesota.
Also published on Medium.
