Too often I come across interfaces that provide a great visual experience. But not all of them provide a great experience when you attempt to get something done with them.
Creating a great user experience while maintaining high levels of usability is a really difficult task. Thats primarily because creativity has no bounds. And its not unusual for a designer to fall in love with their own design.
So, the challenge is stay creative but at the same time find some ground on the basis of which you can evaluate your work impartially.
Since interaction design involves doing a lot of iterations, it is essential that you have a checklist against which you can evaluate your designs at regular intervals. The following 10 principles are so basic to good interaction design that you will find them useful irrespective of the product you are working on or your team size.
- Fitt's Law
- Hicks Law
- Proximity effect
- The Pareto Principle
- Mental Modals
- Error Prevention, Detection & Recovery
According to Fitt's law, the ease with which a user can target an object is directly proportional to the size of the target and is inversely proportional to the distance from the object.
For e.g : : If you are designing an interface that requires a user to press buttons consecutively or follow a sequence of actions, try to minimize the distance the user has to move the mouse or his/her finger between the interactions. And four touch devices, make sure to handle fat fingers.
According to Hick's law, given all things equal, the difficulty of making a choice is directly proportional to the number of options to choose from.
The braing always attempts to perform a cost benefit analysis when it provided with several options. The motivation for doing so comes from our evolutionary instinct of saving energy. Although providing more options makes the brain feel that it has control over the situation, this impedes quick decision making. The brain has to evaluate each of the options, mainly due to fear of not picking the best/right one.
For e.g : If you are designing a restaurant menu, minimizing the number of menu items that the user can choose from at a given time will help them come to a decision faster. If using a long menu is absolutely necessary, consider adding pictures or icons that can aid in the decision making process.
Information that is presented in close proximity to each other is assumed to be related. Although this is a very simple principle, sometimes it does get overlooked.
For e.g : As of this writing, there is a trend of including more white space while presenting information. However, not all white space should be given equal treatment. If you want items to be perceived to be related, decrease the whitespace between those element and vice versa. Another effective and tried and tested way is to use simple borders to demarcate the beginning and end of logically similar sections.
The Pareto principle, more often known as the 80-20 rule states that 80 percent of the effects come from 20 percent of the causes. This can mean several things depending upon what you are trying to achieve.
For e.g :: For any interface, there are a few interactions that are used more frequently than others irrespective of old or new users. By improving the workflow of the not so significant but repeatedly performed interactions, your product can be perceived to have a much better user experience than if you just focussed on adding a small new interactions elsewhere. This is the exact situation where data driven design comes into play.
A mental modal describes how people perceive a system's internals to work when they interact with it. Sometimes people form mental modals of a product even before they itneract with it. This is the more than likely the result of past experiences of dealing with similar products. However, the most important point to remember here is that the actual system modal does not need to align with a user's mental modal and in fact, it most cases, can be significantly different.
For.e.g : When building applications, make sure that your users need to know as less as possible about how 'your' system works. You can do this by not forcing the user to use your application in certain manner due to the way it is designed. Instead focus on your user's expectations in terms of interactions and affordances. Here's a viral video of a baby who after initial exposure to the iPad perceives a real magazine to be a defective ipad.
Imagine how life would be if we had to learn how every appliance or device worked before we could even start using it. Our days would end up being grossly inefficient and most of us would not even dare to operate even a simple coffee machine.
The evoluationary story of human beings is devoid of computerized interfaces. Most of the artifacts that we come across in the real world offer a set of affordances that fire up the neurons in our brain that suggest how they can be used.
For e.g : A door knob has the affordance of being turned, whereas a handle has the affordance of being pulled. In the same way, buttons in the real world have the affordance of being pressed. And when you press a real button it also gives you tactile feedback of your finger being pushed in the opposite direction. Although at this time, it is not possible to offer tactile feedback on web interfaces, one can at the bare minimum offer visual affordances. Modern flat designs of our time (2015) blatantly violate this rule primarily claiming the effect of habituation of web users. However, considering the fact that almost 2/3 of the world still does not have access to the internet, and will have access sometime in the future, this is an important thing to consider. In this regard, material design by google has a number of great ideas.
People are very bad at remembering things. In fact our working memory cannot retain more than 4 units of information at a time. There is a well known fad about 7 +- 2, however more research was done on this matter and the actual number has turned out to be around 4. The concept of chunking also relates to grouping related information together.
For. e.g : If your application requires people to submit a long form, try to reduce the number of items a user has to fill in on a single screen. And even on that particular screen, visually group together the items that are closely related to each other.
Ever wondered why credit card numbers or phone numbers are divided into chunks of 3 or 4? Although we are not bad at remembering 5 to 7 random things, we the most efficient not having to remember more than 4 items.
At this point its best to think of the brain as a place for computation, not storage.
Error Prevention, Detection & Recovery
When people deal with your application, they may not always be aware of what they could do to cause the system to result in an erroneous state. This is more likely an issue with a mismatch in the users mental modal and the mental modal presented by the application's interface. However, not all errors can be eliminated and sometimes errors might even play an important role in notifying users of something critical. Nevertheless, errors should not be cryptic and not be presented in the form that the user does not know how to deal with it.
For e.g : When presenting errors, make sure that you provide the user with just enough information about what action of 'theirs' caused the error. If applicable, also suggest a remedy or hint or present information that could guide users to find ways to recover from the error.
Visual hierarchy is one the most important ways for people to understand the relationship between different elements on the interface. As you can tell by now, chunking and visual hierarchy are closely related concepts. However, unlike chunking, you are not limited to the amount of information you present in a hiearchial structure. Although I must reiterate that you that presenting too much information at a time will more than likely lead to difficulty in decision making as discussed in Hick's law earlier.
For e.g : Hiearchy in software applications can mainly be expressed as a function of three main items - placement, indentation and size. When designing, ask yourself, is there a clear hierarchy in the information you seek to present? If yes, what could be the best way to represent that hiearchy? Is the hierarchical representation meaningful from the perspective of completing the task?
This is another important factor to consider when designing applications that require people to spend a lot of time on it, or applications that have several layers in the information architecture. The lack of elments that avoid lostness becomes strikingly evident when people make mistakes or are in a hurry to finish their task. If people cannot know where they are in a sequence of interactions, backtracking and error recovery becomes harder. Not to mention the confidence with which a user can complete a task if they know that they can bactrack at any time they want.
For e.g : Use design elements like breadcrumbs when a user has to traverse hieararchical strucutres to navigate your application. If you dont have hiearchical strutures, consider using a different font or color or any other visual tool that helps the user identify where they are within your application.
That completes the list of top 10 items I would suggest you apply when you evaluate your interactions during design iterations. Although there are many more things that can be listed, the ones mentioned above will help you get a good headstart.
Myself (and many others) will be glad to hear stories of how a lack of applying any of such principles caused significant issues in the product and how they were recovered. Let me know in the comments!