UI, UX, IA, IxD, UCD, HCI . . .
There seems to be a lot of confusion around User Experience Design, what it does, why it is important and how it is different from User Interface Design. This last point is often combined with calls for rules or SOPs to guide developers in creating good user experiences. While there are certainly guidelines and design patterns for creating digital interfaces, these are by no means prescriptive. User Experience Design is about crafting the potential for a great interaction between a user and his/her tool. This interaction, however, is highly dependent on the situation; the environment, type of user, interaction modes, visual language, and especially the user themselves. The consequence of this web of interconnected dependencies is that there are no hard and fast rules. There are, however, some concepts which all User Experience and Interaction Designers strive to achieve through the use of the visual elements and principles of design.
A tool provides a good user experience if it is Understandable, Actionable, Engaging, and Efficient.
Indicate to (tell) the user what is going on: what is the most important piece of information on the page (screen, paper, etc), what information they need to consume, what actions they need to take and how to go about accomplishing those actions. Information hierarchy is of primary importance in any interaction, especially one between a person and a machine. Very few machines are able to sense a user’s confusion, so the information that user requires must be laid out clearly, with no possibility for confusion. Relationships between elements should be obvious; there should be no misunderstanding which elements are equivalent, which are actions and what those actions are related to, which elements are grouped together under a higher level element, and so on. The tool should guide the user through itself.
When evaluating your own design ask these questions: Does the user know where to start on the page? Is the path from start to finish clearly defined?
The next attribute to strive for is actionable. Everyone knows the old design adage ‘Form Follows Function.’ Make it clear to the user what actions are available and what path they need to take through the visual form. Do this by making things look like their function. Do buttons look like you can press them? Are the affordances of the visual objects appropriate or are they misleading? It is important to ensure that information doesn’t conflict with the visual or physical form of an object. The classic example from Don Norman is door handles. There are far too many doors with signs saying push, when the handle is clearly communicating pull.
This image (from home improvement site www.betterimprovement.com) illustrates the ways in which function is communicated through the form in the physical world. We can achieve some of that language-less communication through the visual forms we use, 3d looking buttons, underlined links, the cursor changing to a little grabbing hand when you click on something that can be dragged, etc.
When you have titles and info boxes that look like buttons, people will keep pressing them, expecting something to happen. Just like that door that you always push even though the sign says pull.
Users are people too! I think many people creating the tools of our digital world forget this important fact. When creating tools for users, we need to remember to acknowledge and address all of their needs, including their emotional ones. In addition to all of the benefits good design brings, when something is aesthetically pleasing, people like it more than if it wasn’t. So people will like cool looking tools better than equivalent ugly ones. It is also important though, to know your user or prospective user. Different types of users will be engaged by different moods, so different interaction and visual strategies are required to create those moods or atmospheres. Check out MINI’s USA website and compare that with Jaguar’s website. Those two websites are definitely not for the same type of user, illustrating the necessity of knowing your users.
An engaging interface is not just aesthetics, though. It should also enable users to focus on the content, without the interface itself requiring too much attention. A user’s goal is always content related, not interface related. To keep users engaged, we need to show them that not only does this tool work, but it works in an interesting way, has nice (but not distracting) interaction modes and makes them happy. Happy workers are productive workers.
Efficiency requires the three previous attributes I’ve described. An efficient tool functions well, provides interesting interactions and visuals that support the task and engage the user, but doesn’t distract from the goals the user is trying to accomplish. It lays information out clearly, with appropriate hierarchy, eyepaths, information presentation and attention direction. However, again we are faced with differing needs for different users. Consumers exploring a product line and considering making a purchase have very different goals from, for example, an employee working at a customer support call center. Only after we identify these goals can we understand how best to support the user in efficiently accomplishing those goals. A consumer may want to browse, get more information about a product, see the product from different angles, or find similar products and will be more interested in an experience that has a high emotional impact. Their goal is firstly exploration and then purchase. A customer support representative, however is most definitely not looking to explore. They will need to access relevant information to both their consumer and the product or service. They already know what they need and want to find that information quickly. So efficiency is dependent on the user goals and will look and act differently because of that.
Do you have great examples of particularly understandable, actionable, engaging or efficient tools? Have you found one that is great in all four areas? How do you make sure the tools you create have these attributes?