Anatomy of a user interface
What is a user interface and what makes or breaks them?
Before we get to talking about User Interfaces, let’s talk about people. Persons — you and me. Are we perfect? Well, I would like to think that I am. But how do we know if I am a perfect person? Simplest way is to ask questions —
Do I look good?
Am I fat or skinny?
Am I good at talking to people?
And more such parameters. For me to worry about looking good and developing communication skills, I should first be able to function as a human being.
The moment I use the term Human Being, our magnifying glasses change. We start thinking about Nervous System, Respiratory System, Digestive System and all the other system on the inside which keeps us running. Unless I have somewhat functioning systems inside that support each other, the perfection on the outside can be misleading and in some most useless.
Now, on to User Interfaces
Let’s draw the same analogy here. How do we know if a user interface will work? Is looking beautiful good enough to determine that? Will adding colors, graphics and animation make your product work? What is on the inside of the UI which makes it function? What are the different systems which need to be functional and supportive of each other to make the UI work?
A User Interface is made up of 4 systems:
Let’s look at each of them briefly.
The process or activity of accurately ascertaining one’s position and planning and following a route
- Google Dictionary
The meaning of navigation in context of user interfaces is exactly the same as in the physical world. The User Interface should help the user to determine where they are in the application and where should they go for the information they are looking for or to complete their intended work.
In terms of design, this translates to Information Architecture and Task Flows.
The style or manner with which something is offered for consideration or display
The presentation of a UI is a combination of the layout, color, graphics and text style that is used. It speaks to the users at the visceral level. As per interaction-design.org, the visceral level of design refers to the first impression of a design, both in terms of how the user perceives the product and how it makes the user feel.
This has nothing to do with how usable, effective, or understandable the product is. It is all about attraction or repulsion.” — The Design of Everyday Things, Don Norman.
In terms of design, this translates to the Visual Design.
Content here means the actual text the users will read on the UI and try to make sense of. It comes down to writing styles (formal/informal, active/passive voice etc), word choices and the basic hygiene of spelling, grammar and punctuation. Another important factor to consider here is readability and the support for scanning. Yes, scanning — believe it or not, we scan the online content and read only after we find something of value in the scanning process.
In terms of design, this translates to Writing Style Guide and Content Strategy.
Interaction is a kind of action that occur as two or more objects have an effect upon one another. The idea of a two-way effect is essential in the concept of interaction, as opposed to a one-way causal effect.
This is the part where the user can talk, direct, request or exchange information with the UI and it is essential that the UI respond appropriately — ‘the two-way effect’. For determining an effective interaction technique, take into consideration the physical device, the level of user sophistication and already established conventions.
In terms of design, this translates to Selection of UI controls and Error Handling and Feedback.
Summary - Putting it together
Presentation System pulls the users in, Navigation and Content systems assists the user to find the ‘value or reason’ for which they are using the application or product and Interaction system along with Presentation system helps the user to get what they came for.