September 22, 2020
10 min read
A user interface (UI for short) is a term generally used to describe the graphical layout of a digital application. More broadly, it can be used to refer to the general interaction a user has with a digital product or service.
You’ve probably used various user interfaces yourself. All websites, apps, and other digital products have an interface that you need to interact with through clicks, for example. But even a touchscreen, a mouse, your keyboard, and your computer screen are forms or UI since they enable you to interact with a digital product or service.
Back in the day, the only way to use a computer was to give it commands through the command-line interface. If you didn’t know any programming languages, you had slim chances of operating that computer.
By the 80s, however, the first graphical user interfaces came to be and revolutionized the world. You no longer needed to have an extensive coding background but could click on icons, checkboxes, and menus instead to execute commands.
The time of the personal computers had begun, with the first Apple Macintosh computer hitting the consumer market in 1984. It came with a point and click mouse to further help the user to give the computer commands.
The bigger the personal computer market grew, the more the designers had to start paying attention to the user interface and its design process.
Since UIs refer to user interactions with machines, there are many different types of user interfaces:
UIs can take many forms and some are more common in everyday life than others.
Computer mice or keyboards are very common examples of UIs. The devices are connected to a computer and then used to communicate with it, either by clicking on icons or by typing.
The remote control is another everyday item that facilitates communication with a digital device. By using the remote control, you’re able to change channels or set reminders for your favorite shows. Some smart remote controls even support voice commands.
The appearance of your computer’s operating system is a prime example of a complex web of different types of UIs. The desktop is a mix of natural language, menu-driven, and graphic user interfaces.
A webinar sign-up web page, on the other hand, might rely on a form-based user interface to collect all the necessary information from the user.
And your smartphone or smart speaker’s virtual assistant uses a voice user interface to tell you whether there are delays on your morning commute.
A good user interface is important mainly because it helps you to clearly communicate and show potential buyers what your product or service is all about. Being able to relay the key features and benefits of your product without any ambiguity builds trust between potential customers.
A user will stop using your product or click away from your website if they run into issues with the UI. If a mouse doesn’t always click on the icon the user wants to click on, the user will replace it with a different one. Similarly, if a user can’t find their way through a website, they’ll simply click away and search for an alternative.
A thought-through user interface design helps to communicate the look and feel of your brand as part of the user experience overall. A good UI is also important for:
A strong and well-rounded user interface design is especially important for an online business or an eCommerce website.
Online, the competition is fierce, and a good UI will help you retain your customers. If you make it easy and smooth for a visitor to find products in your online store, there’s a good chance that they’ll keep returning for more.
A well-designed eCommerce UI will boost your SEO. If the website is easy to use, visitors will spend a long time browsing. This will build the average visiting time of your website, and in turn, translate to better search engine ranking.
The better your website looks, the easier it will be for you to create a brand and drive more traffic to your online store. First impressions matter, since closing a tab is much easier and faster than exiting a physical store and driving back home.
UI is often mentioned in the same context as user experience design, or UX design for short.
User experience design refers to the human or user-focused design process of a product or service. The term was first coined by Don Norman, a cognitive scientist, in the late 90s. The main principle of UX design is to start any and all design processes form the user’s experience and point of view rather than the product.
Good user experience in a cafe might start with an attractive shopfront, followed by pleasing interior design and welcoming staff. For an armchair, a good user experience might comprise an ergonomic design and a durable cover, but also the shopping process itself.
A user experience designer might start with questions like:
The user experience (UX) designer pays attention to the overall experience and feel of the product or service. The user interface (UI) designer, on the other hand, pays attention to how the product’s interface will look and function.
UI and UX go hand in hand and often UI designers work closely with UX designers.
While a UX designer plans the way the user interface works, the UI designer decides how the user interface looks.
Let’s say that a tech company is working to launch a new app. The UX team focuses on mapping out the overall user flow of the app: this means working out which buttons take you where, for example. The user experience team will pay close attention to ensuring that the app’s interface serves the user’s needs.
The UI team, on the other hand, focuses on how the different interface elements appear on the screen. If the UX team decides to change the number of icons on the screen, it’s the UI team’s responsibility to make sure that the new icons are spaced out enough so that the users don’t mistakenly click on the wrong icons.
A good UI design starts with the user.
To get started, you need to know your user and conduct target market research. You want to know who they are and more importantly, what challenges they face in relation to your product. Once you know their pain points, you can position your product or website to solve those problems.
Next, you want to get an idea of how your users will use your interface. Your user will be the one in control of the interface, so make sure you understand how they will interact with it. Ask yourself questions like:
Make sure to set expectations for your users. Using clear designs and copy helps your users to understand what happens once they click on a banner or tap an icon. You want to use red color for the stop-button and green for the go-button, for example, and universal symbols across your interface.
You want to also calculate for the human error and anticipate mistakes. Design the UI to both prevent mistakes and to provide easy fixes for when they do happen. This could mean displaying a pop-up when the user is about to leave the shopping cart page without proceeding to the checkout or introducing a trash folder for deleted items.
Since humans are interactive and social beings, you want to give feedback for all actions taken. Create an animation for the loading screen, or add a visual cue to the icon when it’s been selected. The feedback should be given as fast as possible, or you risk the user abandoning the task.
Pay attention to the placement and size of any design elements. Remember that the bigger an icon is, the easier it will be click. Use your design to encourage the actions you desire the user to take. It’s good practice to keep the icons and other click targets of the most commonly used items big, and position menus in the corners of the screen, for example.
Reduce the cognitive load for the user by not ignoring the existing standards. If you’re building a music app, you shouldn’t reinvent the wheel and introduce a brand new play button. The more the user has to learn or think about their actions, the less user-friendly your interface will be.
The smaller the learning curve, the easier your interface will be. But if you need to teach your users a trick or two, make the learning process easy. Don’t overwhelm the user with information: instead, give it to them in smaller chunks. Introduce the main features of your product on the main landing page, and create individual pages with more information on the individual features, for example.
Lastly, you should strive for an easy decision-making process. Keep your design simple and easy to follow. The more options you present to the user, the longer the decision-making process will become. Critically evaluate each new page and section of your interface design, and ask yourself whether it helps to simplify the user’s experience.
To understand how well your UI design is working, don’t forget to monitor and analyze your data. While it’s important to base your design on thorough research, it’s also just as important to read the real data from real users through forms, interviews, and surveys. Listen to the real users and actively ask for their feedback.