Taking Donald Norman’s Principles to Web Design, Part 3

Learn about the design principles you need to get started in interactive and web design in Patrick McNeil’s online course, Principles of Web Design.


In the book The Design of Everyday Things, Donald Norman defines six design principles. In this article series, we apply those basic concepts to the world of interactive design. In part one, we explored visibility and feedback. In the last article we reviewed constraints and mapping, and today we will look at consistency and affordances. Let’s go ahead and dive right in to see how these two simple ideas work.

Consistency

Consistency refers to representing similar operations in a system in a similar way. In many ways, the web is easy to make consistent. We style text like headings and paragraphs using CSS, which can be universally applied. In this way, formatting and colors are easily made consistent. And this is, of course, a good thing. But there is more to consistency beyond this surface consideration.

Consistency comes in two primary forms, the first of which is internal consistency. Is your interface predictable? Are the controls always styled the same way? Do they work the same way, and are they placed in the same location? Think about the menu system in an application like MS Word. The menu never changes. Elements that are not available are grayed out, not removed. In this way, the items on the menu never move. This consistency makes the interface easier to use.

The second form of consistency is external consistency — when elements are styled, structured and positioned consistently with other applications. In the web design world, we used to have problems with über “creative” designers looking to create unique and unusual interfaces. Instead of focusing on usability, they were focused on their creative expression. While this isn’t as much of a problem as it used to be, it is good to ensure that your website is easy to use. For example, if you were making light switches you would not design them so that pushing the switch down is on and pushing the switch up is off, just for the sake of being different. While you may want your design to stand out, this change sacrifices usability for uniqueness. Being different is good when it truly makes an interface better, faster, easier and more desirable.

A few examples:

Design principles — consistencyhttps://www.cinra.co.jp/


Design principles — consistencyhttps://kordia.co.nz/


Design principles — consistencyhttp://visage.co/


04http://bestdayever.myfilip.com/


Design principles — consistencyhttp://www.madebyblock.com/

The examples above demonstrate strong external consistency. Each has its own take on it, but overall there is a consistent layout at work. As a user, you know to look for the logo at the top left and the menu across the top. And when you find a navicon or menu button, you understand what you will happen when you click on it. A designer could get “creative” and anchor this same widget to the bottom of the screen. And though it would technically work, it would be at first somewhat disorienting.

There are, of course, a huge number of layout patterns for headers, each with different perks. As users we understand what to expect at the top of the screen, and some layouts are easier to use then others. Nothing short of full usability testing will help us figure out what works best on any given site.

Affordance

Next up, let’s consider affordances. Affordances are discussed frequently, so I don’t want to get too in depth. But in light of the other five design principles here, it is good to see how this principle can be a key element in the overall design strategy. So what is an affordance?

Affordances are attributes of an element that indicate to the user how they should interact with it. A classic example is a button on a website that is styled to look three dimensional—whether with a drop shadow or a gradient. This effect implies that the user is meant to push the button (which is, of course, what you are supposed to do). In this case, the affordance hints at the image’s functionality.

Some examples

Design principles — affordanceshttp://jimramsden.com/

Navicons have come under attack recently because they hide menu options, which reduces the visibility of important elements. I disagree with this perspective on the mobile web. In the example above, the simple navicon produces the navigation menu. The only problem is that the navicon itself doesn’t in any way imply that it is clickable, or that it will produce a navigation menu. Beyond a use’rs experience with these controls, there is no indicator that it even does anything. Perhaps it is just decoration? Now, don’t get me wrong. I think this site is actually quite lovely, but this tiny detail does illustrate the potential usability problem. The key in this case is the target audience. Those looking at this person’s portfolio are most likely familiar with the navigation control and will have no problem with it.

Design principles — affordanceshttp://amazon.com

In this tiny design fragment from Amazon, we see a small part of their very complex navigation system. Notice that two of the options have tiny arrows pointing down. We understand that these two have dropdown menus, while the others to the right are just links. This small nuance is an affordance that indicates what the control does and makes the interface easier to use. Affordances are all about the tiniest of details, and mixed with the other design principles they become extremely powerful.

Conclusion

So just to recap, the six design principles we covered are visibility, feedback, constraints, mapping, consistency and affordances. These six principles are timeless, and incorporating them into your design work is a recipe for success. Keeping these things in mind as you design isn’t too hard. I find the best way is with a simple checklist in question format.

To finish off this article series I leave you with my series of questions you can ask yourself in order to keep these ideas at the forefront of your work:

  • Have I made the most important features highly visible?
  • Are less important features less visible?
  • Do I give the user clear feedback of their actions?
  • Is it easy to understand the status of the system through clear feedback?
  • Am I appropriately restricting a users behavior in order to simplify their experience?
  • Is there anything I could restrict to reduce errors? Or to increase conversions?
  • Do the interfaces in my design appropriately map to users expectations based on the real world?
  • Am I consistent in how I present the features inside my design?
  • Is my structure consistent within my industry?
  • Have I used affordances to make the interface easy to understand?
  • Do subtle details of the design hint at the functionality through affordances?

Principles of Web Design: An online course with Patrick McNeil

The perfect starting place for print designers looking to move to the web.

Patrick McNeil, the author of the Web Designer’s Idea Book series and the content director of HOW Interactive Design, has been building websites for years and knows both the design side and the development side. In this workshop, the first in a series, you’ll learn web design fundamentals through videos, readings and links. This design course is for absolute beginners and will teach you the basics of the web and give you a technological understanding of how things work online. Register here.

COMMENT