Have you ever wondered why some applications always look and feel similar? Why for example does Apple have a unified experience across devices? Why are Google products starting to adopt the material experience?
This post explains some of the underlying themes influencing design choices. Developers can use these concepts to craft better user interfaces and experiences.
1. Consistency
A well designed user experience is consistent through out its constituent parts. Imagine how easy it would be to use an app with varying colour shades, item sizes and page styles? Wouldn’t that be confusing and difficult to understand?
A couple of examples of design consistency include:
- All computer applications usually have the set of three buttons on the title bar (close, minimize and maximize).
- Right-click nearly always opens up a context menu
- The menu bar for applications starts with drop downs titled File, Edit and so on
Such consistency lowers the learning barrier as they are implicit assumptions in the minds of users. When was the last time you tried to figure out the ‘close’ button? You don’t need to think, you subconsciously understand and use them.
UI frameworks like semantic-ui, bootstrap or Fabric provide a good foundation for quickly ramping up web applications. A colour palette helps ensure visual colour consistency. Do be careful of contrast though; having too much contrast is not visually appealing while having too little makes it difficult to see components.
And this leads us to the next point : ‘learnability’.
2. Learnability
One of the enduring messages I picked up from Steve Krug’s great book: ‘Don’t make me think’ is to avoid making users think. Why? When people have to ‘think’ deeply to use your application, that interrupts their concentration and flow; such interrupts might be fatal as some users might just leave your site.
A low learning curve helps users quickly become familiar and deeply understand how to use your product. Think of any software you are proficient in, now think about the first time you used that product, was it difficult? Did you grow to learn?
A couple of tips here:
- Component Behaviour – One common issue I run into with components is variable behaviour for the same action in different scenarios. For example, a set of actions might trigger a dialog to pop up while in other scenarios the dialog is not triggered. It’s much better to have the dialog pop up consistently otherwise you’ll have your users build many mental models of expected interaction responses.
- Grouping – Related collections can be grouped and arranged in hierarchies that can be drilled into. I prefer using cards for such collections and allowing users drill up/down. Another thing to note is to ensure that the drill ladders are consistent; no point having users drill to a level they can’t drill out of.
3. Clickability
My principle of ‘clickability’
The number of clicks required to carry out a critical operation is inversely proportional to the usability scores for the web application.
The larger the number of clicks needed to achieve a major action, the more annoying the app gets over time. Minimize clicks as much as possible!
But why is this important? Let’s take a hypothetical example of two applications – app 1 and app 2 – which require 2 and 4 clicks to register a new user.
Assuming you need to add 5 new users, then app 1 requires 20 clicks while app 2 requires 40 clicks, a difference of 20 clicks! It’s safe to assume then that users who have to use the application for hours on end will prefer app1 to app2.
The heuristic I use is to minimize the number of clicks in core user paths and then allow short cuts for cases that are not possible.
Yes, ‘clickability’ does matter.
4. Navigability
Building upon the principle of clickability, this implies designing your flow so that the major content sections are well interlinked. It also includes thinking of the various links between independent modules so that navigation is seamless.
For example, you have a navigation hierarchy that is 3 layers deep and want users to do some higher-level action while at the bottom of the navigation tree. You can add links to the leaf nodes and even subsequent tree levels to ensure users can quick jump out rather than exposing a top-level option only. Why? See the principle of clickability above.
A good exercise is to build out the interaction tree which exposes the links between sections of your app. If you have a single leaf node somewhere, then something is really wrong. Once done, find ways to link leaf nodes if such interactions are vital and enhance the user experience.
5. Accessible + Responsive + nit-proof
One of my favorite tests is to see how a web application works on smaller devices.That quickly exposes a lot of responsive issues.
Another one is to add way too many text characters to see if text overflow is properly handled. The fix for that is very simple: just add the two CSS rules
.noOverflow {
text-overflow: ellipsis;
overflow: hidden;
}
Another important concept is adding titles to elements and following accessibility guidelines.
All these are important and show that some thought was put into the process.
Conclusion
Do a quick test of your application on some random user.The way users interact with your application and navigate around might surprise you!
While running such tests, ask if users feel they have an intuitive understanding of how the app works. If yes, bravo! Pat your self on the back. Otherwise, your assumptions might be way off and you need to return to the drawing board.
The best experiences always look deceptively simple but making the complex simple is a very difficult challenge. What are your experiences creating great user experiences?
