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

Editor’s Note: The following article is the second part in a three-part series applying Donald Norman’s design principles to interactive and web design. Read part 1 here.

In Donald Norman’s classic book The Design of Everyday Things, he describes six fundamental design principles. In this article series, we are considering these principles as they apply to the world of web design. Last month, we covered visibility and feedback, and this week we’ll look at constraints and mapping. Tune in next month when we finish this series off with consistency and affordances.

Constraints

Constraints inside of a system or on a website serve to restrict user behavior at a point in the interaction. By restricting the users’ behavior, designers can help users understand the status of a system. A classic example can be seen the way menu options on a typical desktop application are grayed out when they are unavailable. As I write this article using MS Word, the “cut” and “copy” options at the top of the screen are grayed out because I do not have any text selected. In the same way, a form on the web might disable the “submit” button until all of the fields are filled in.

The Challenge

Restricting what users can do at any given time is an often-overlooked way to improve user experience. The challenge here is simple: When designing interactions—especially micro interactions—we should carefully consider how constraining or restricting users’ choices can improve the usability of the interface.

Some examples of constraints

Normal Design Principles - Skinny Tieshttp://skinnyties.com/

A common formula for e-commerce software demonstrates this idea in the checkout process. On this site, you can see there are six overall steps for the user to complete the order. The system show the users which steps to take and when. By restricting the flow of the interface, users are forced to complete the task in the proper sequence. It is a constraint so natural that I can hardly imagine it any other way.

Normal Design Principles - JQueryThis jQuery tutorial demonstrates how to disabled the submit button on a form until all of the fields are filled in. The typical approach is to allow users to submit the form regardless of completion and then provide feedback on details of what is missing. Disabling the button is a seldom used approach that I believe we should reconsider. Combine this approach with real time validation showing users what is correct or missing and I suspect users will respond positively. But as with so many things, your best bet is to try it out and do some basic usability testing on real users.

Norman-Design-Principles-03http://goldfront.com/

A recent trend in web design is the use of navigation systems where the menu takes over the entire screen. This is particularly unique due to the way it is being used on desktop sites. In many of these this becomes a constraint of using the web site. Once the navigation is activated, the rest of the interface is restricted from use. Does this improve usability? Is it easier for the user to navigate the site? Or is this just a trendy approach with no real purpose. Again, the only way to know is to do some testing on users.

Mapping

The second of these design principles I’ll dissect is called Mapping. This refers to the design of controls such that they reflect the way they behave, or the results achieved by using them. In some cases a control is designed such that it also correlates to the effects of that control in the real world. We of course call this skeuomorphic design. It would seem to me that Steve Jobs wisely latched onto this principle as a way to improve the usability of iOS.

Some examples of mapping

Norman Design PrinciplesThis simple code snippet demonstrates the idea perfectly. Here we can see an input field for selecting a number. This could be the quantity field on an ecommerce system for example. The plus and minus signs are perfectly mapped to their function. The mapping is really strong in that the plus sign is to the right, or up, and the negative is to the left, or down. Often we see these two options stacked, but that tends to make them really small. This approach is really clean and its function does not require instructions or hints of any type.

Norman Design Principleshttp://visage.co/

One way to know if your mapping is correct is to assess your design and consider what you expect a control to do. In this example I ask you, what do you think the “show me visage” button in the bottom left corner does? Does it take you to a page showing the applications features? Does it load you into the application so you can try it out? Does it let you fill out a contact form for a demo of the application? It is hard to think beyond the intent you put into something, but even in this case where the results seem obvious it isn’t always true.

Of course, the key detail here is the little triangle. We have come to expect that this means play. In this situation one would assume this means to play a video. That said, it would be interesting to run this against users and see how they interpret this. And if tasked with watching a demonstration of the application if they would select this option. In fact, the button loads a video that proceeds to give you a tour of this slick application.

Good mappings seem obvious, but design doesn’t happen automatically. It is only through continuous refinement that we can arrive at results this clean, functional and clear. I challenge you to carefully assess your designs and see if you are accurately mapping the controls to the functions they perform.

Stay tuned for Patrick McNeil’s 3rd installment of his series on Donald Norman’s design principles in web design!


 

T7153If you’re a web designer who is familiar with the experience of being in a creative rut, then the Complete Web Designer Idea Collection is for you! With all four volumes of Patrick McNeil’s The Web Designer’s Idea Book, you’ll have plenty of web design inspiration to get you through several rounds of creative block. This collection is now available for 70% off the total price! Learn more here.

COMMENT