Editor’s Note: This article by Patrick McNeil is the first of a three part series on important design principles taken from Donald Norman’s book and applied to modern, interactive design.
In Donald Norman’s classic book The Design of Everyday Things, he describes six principles of design. Though the book was written in 1988, and by internet standards is an ancient artifact, these core ideas vividly apply to modern web design as we practice it today. In fact, the more complex things get, the more important it is to cling to core principles that push towards friendlier interfaces.
The Design of Everyday Things is an approachable guide to the basic attributes of everyday objects that make for good design. These attributes focus on properties that make the user experience as effortless, easy and as enjoyable as possible. This results in intuitive objects that will be enjoyable to use and produce a positive experience.
For many, this book is the perfect introduction to the world of User-Centered Design and, subsequently, User Experience Design. It’s not hard to understand how these simple ideas naturally lead us to the world of UX design on the web. And, as you will soon see, these 27 year-old ideas are in fact hot topics, greatly impacting modern web design.
Norman outlines six key principles: visibility, feedback, constraints, mapping, consistency and affordances. Designers have long used basic principles of design to create attractive work that clearly communicates. In contrast, this set of principles challenges the designer to also craft systems that are easy to use. As you design each day, these simple ideas can help push your work towards that goal. When combined with the basic principles of design, the results can be simply outstanding.
Let’s dive into each of these principles and consider exactly how they apply to modern web design.
Design Principle: Visibility
Visibility is concerned with making relevant parts of the design visible – making the tasks at hand easy to see and find. The idea of visibility is rather basic; designers should adjust the visibility of function to match its importance to the design. So, elements that are mission critical to the website or application should be designed to be more visible. Less important elements can be designed for less visibility.
Designers will naturally understand this as the basic hierarchy of a design. Visibility isn’t a new idea, and it even predates the book. The key is to prioritize our content and functionalities. If we design by committee and attempt to make everything important, we will in effect emphasize nothing. From this defined priority we can craft a design that will reinforce these same priorities. The type of actions we want to drive users to might change as we design applications, websites, e-commerce systems, mobile applications and anything else interactive. But the role of visibility in driving these actions will remain consistent.
It’s important to realize that a design can have a clear hierarchy and lack visibility. Visibility, in this case, specifically refers to the exposure of the core features in a design. The key is to keep these core features or goals in mind as you design – and ensure they’re highly visible.
The Challenge
The challenge here is to force yourself, your team, your stakeholders and anyone else involved to prioritize the content. If users were to do but one thing with your web site or application, what would that be? Make that the most visible and prominent element, and you will indeed get there.
Some Examples of Visibility
In Gmail we see a perfect example of this idea. Below you see a blurred image of my Gmail account. It’s blurred so we can easily observe the most prominent and important element of the design. I’m referring to the large red button at the top left used to compose a new email. Gmail offers many features, but at the heart of things it’s the ability to write and send emails. By making the button large, placing it in a prominent position and giving it a contrasting color, it stands out in the design. Users can quite effortlessly, and perhaps, instinctively, find the function. The designers at Gmail have recognized the importance of this single function – and the importance of making it easy to find.
Some sites, like Budicon are radically simple in nature. Compared to Gmail, this design has very little going on. In this case, the most prominent, or visible element, is the super-sized “buy now” yellow button at the center of the design.
This design demonstrates how the most critical feature is the most visible one by removing elements that might interfere. It’s clean and simple. In fact, the links taking you away from this page are hidden in a popup menu. Though this method gets poor results in terms of usability, in this case it’s rather strategic. Notice that once a user clicks on the menu, the key call-to-action is repeated in an equally visible way; very clever indeed.
Design Principle: Feedback
Feedback is when a system provides users with information about what has been completed or accomplished. Feedback can come in many forms, like a vibration on your phone, a color change of an interface element. It might be a beeping sound, alerting you that the dishwasher is finished. In the digital world, it’s quite often a bit of text telling you what’s happened, but there are many ways to let users know the status of a system.
Feedback is a critical way to help users avoid frustration and confusion. If I click a button for an action to happen, and there’s no indication that it happened, the user will understandably question whether it’s worked.
Examples of Feedback
A lovely example of feedback can be found on this yummy “Coming Soon” page from Kickdrop.me (which has since launched its full site). Here’s their email sign up form:
After I complete the form and click the button the email form slides out of view and a confirmation message slides in. The confirmation message is clear example of user feedback. The user receives a clear message that the action worked, and in this case, you get a direction to the next critical step.
But the feedback was more than just the text. In this case, the animation of the form to the right indicates something has happened. Then the message slides in. This draws the user’s attention and again reinforces that clicking on the button has produced a result. Here’s the confirmation message:
If I use the form again and enter an address that’s already on the list, I get a different type of feedback. Here, the form slides down and an “error” message appears on top of the form. Again the movement in the design is an element of the user feedback and indicates draws the user’s attention to the message.
It would be helpful for the messages to stand out more from the rest of the content. Though the design is clean and effective, the messaging tends to blend in in this case. Here is the error message (with my email address blocked):
Why Design Principles Matter
Feedback and visibility are just two key ingredients in the quest for creating pleasing user interfaces. Mix these with four more design principles we’ll cover in this series and you’ll have a strong foundation for your design work.
Stay tuned as we cover more critical concepts.
Want more interactive design advice? Check out HOW’s Principles of Web Design course to extend your design skills to the web and across platforms.
The post Taking Donald Norman’s Design Principles to Web Design appeared first on HOW Design.