Only one thing can be the most important.
Every element within an interface clamors for the user’s attention, but which element is the most important varies depending on which stakeholder you ask. Business Development might say it’s the banner ad running at the bottom that belongs to the partner they just signed on. Marketing says it’s the call-to-action button used to convert visitors. Engineering says the new drop-down menu they just added is the most important. The Executive Team thinks all the features are great. At the end of the day, there is only one stakeholder whose opinion matters: the user’s.
Proper UI design should focus on giving the user only the minimal and necessary information needed to complete their current task. Even if some of the features are useful (and thus necessary), care must be taken to insure that the less used features take a backseat to those features used more often because if everything is marked as important, than nothing is important.
More often than not, the most important feature to the user is the content. In a blog or news source, it’s the content that the company produces, such as ESPN providing a recap of last night’s basketball game. In a content-creation application, it’s the content that the user produces, such as Evernote providing a platform for users to collect all their thoughts. In a social application, it’s the content that peers produce, such as Twitter connecting you to your friend’s tweets about what happened in their day. There are many other ways to slice up content, but the bottom line is that the user came to your app or site with a certain purpose, and it wasn’t to view the chrome or a collection links.
Creating a clear hierarchy of components can be done through adjusting size, shape, color, proximity, similarity, and other elements. Usually, these groupings can be applied by going through the Gestalt Principles:
- Figure/Ground – Elements are perceived as either figure (element of focus) or ground (background on which the figure sits). The most dominant object is basically the figure.
- Area – Make something more dominant by increasing the size. For text, make the font size larger.
- Similarity – Make something more dominant by having it be dissimilar from everything else. When everything is colored in black, but one line of text is in red, it really jumps out.
- Unity – Make something more dominant by unlinking the visual connectedness it has from other elements. When everything is on one line, have the dominant element one step above the line.
- Continuation and Closure – Make something more dominant by being at the end of a logical progression of elements, even if they are not directly connected. The user will complete the connection for you.
- Proximity – Make something more dominant by having it spaced farther apart from everything else.
Overall, there is a tendency to perceive things holistically and to find mean in the way the parts relate to the whole. Therefore, we understand meaning from a design not just from the individual elements, but also between the relationship between the elements. So if the balance between the elements is broken, then the user isn’t just annoyed by isolated parts of the app, but have disapproval of the app as a whole. At its worst, this cognitive dissonance causes the user to abandon the app completely, writing it off in their mind. As a result, designing a harmonious balance is crucial to an app’s success, and that starts with remembering only one thing can be the most important.
