The definition of user interface and the importance of having a good interface is not covered in this post. This article summarizes the essential concepts needed to create great interfaces and how that results in great experiences for end users. There is a lot of talk about user-centric design, but what exactly are the essential parts of great interfaces? How do we go about different projects and client needs in the design process while creating consistent quality work that solves user problems, business needs, and is still fun to use?
The following is a list of attributes that each user interface needs to be great:
- Intuitive
- Consistent
- Informative
- Clear
- Hierarchical
- Responsive
- Attractive
- Follows Design Principles
1. Intuitive – creating a groundbreaking new way to use a product or application is often a bad idea and I'll explain why. The simple reason is people don't want to learn something new, most of the time they just want to use the interface and navigate through it easily using the available controls. The model of an intuitive interface is intuitive because it is a copy of already existing models that are familiar to users, something that just “feels“ right. Features and controls that are frequently used in similar or related products are a model of reality that is easy to relate to and in the end intuitive to use.
2. Consistent - part of the user experience is teaching usage patterns to give users a sense of comfort while using the application. Consistency in design tells a story, and each element of the design is a part of the same story, but consistent in placement, shape, or more often function. For example, call to actions should be consistent across the site. Once a user learns what this element of interface does, this must be standard everywhere.
3. Informative – users need to know without a doubt where they are currently, what their possible options are, restrictions and how to get additional information about design elements in a form of tooltips and informative messages. Various action elements on the interface need to communicate what is happening with the system at all times. If the user taps on the screen or uses their mouse on links, call to action elements there need to be an immediate response in one way or another informing the user about what is happening. For example, if a clicked buy button doesn't respond immediately with an informative message there might be a chance of double purchase on the next screen.
4. Clear – the interface should be designed so the user intuitively understands what to do in each phase or step. We can see each application as a group of steps needed to achieve a specific task and get a reward in one shape or another, whether this is getting the right information, buying a product, or simply navigating through the interface itself. For each interface, there is a fine balance between explaining too much or too little to the point where the usage is instinctual and unambiguous.
5. Hierarchical – elements of the interface should be set in a hierarchical manner, whether this is achieved using font size, size, and order of elements, contrast, space and position of elements. In western culture, there is a left to right system of reading so it's natural that content hierarchy flows from top left to bottom right in an F-shaped pattern. We are also taught from a young age about hierarchy and our brains are conditioned to think in this way.
6. Responsive – indicates how responsive the interface is to user interaction and shouldn't be confused with mobile responsiveness. Wherever possible, the interface should move swiftly in pace with the user. There is unavoidable frustration with interface and information decay when the interface doesn't follow the pace of the user interacting with the system. A slow running interface can be caused by lacking frontend implementation and backend issues such as bandwidth limitations or slow response time. In that case, informational messages with what's happening should be shown as modals or warnings.
7. Attractive – pleasant user interface is only part of a successful user experience but regardless still a crucial one. Pleasing aesthetics and proper usage of color scheme can make all the difference for the user and user experience but shouldn't serve as a mean to cover up functionality gaps and issues. According to research, pretty things are perceived as more usable than they actually are, meaning there is more motivation to use something if it's good looking. In the end, good looks cannot compensate for fundamental functional errors such as slow response time, unorganized and inconsistent content, lack of feedback information from the system etc.
8. Follows Design Principles – there are 6 basic principles of design which are: balance, proximity, alignment, repetition, contrast, and space. Balance provides stability and structure to design. Proximity creates a relationship between elements where the closer they are, the more we perceive them as related elements. Alignment creates order and organizes elements into visual unity and helps to create a hierarchy. Repetition creates rhythm and helps to create associations and consistency. Contrast is the foundation of emphasis, call to actions are almost always in contrast to the background or nearby elements. Contrast can be achieved using color, size, and direction, in general anything that distinguishes it from the rest of the screen. Space refers to distance or area between and around elements.
To summarize everything mentioned: clean, organized, intuitive and pretty interfaces with informational messages delivered in a timely manner are key for a good user interface. Great user interfaces are achieved through implementation of good practices and incremental improvements polishing the rough edges and consistent communication with the client and end users for feedback. For an interface to be great, and not just average, it needs to be functional above all, good looking and related to actual models from the real world so the user interaction flows intuitively between steps and tasks to achieve set goals.
