What is UI (user interface)?

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. 

Types of user interfaces

Since UIs refer to user interactions with machines, there are many different types of user interfaces: 

• Graphic user interface (GUI). With a GUI, the user interacts with electronic devices through graphical icons. 
• Menu-driven user interface. The user interacts with the device or application through menus. 
• Natural language user interface (LUI or NLUI). This type of UI refers to an interface that allows users to communicate with devices using human language, rather than a computer or programming language. 
• Command-line interface (CLI). One of the oldest forms of UIs: the user uses text to manage and view files on a computer. 
• Touch user interface. With this type of interface, users use touch to interact with the device. 
• Voice user interface (VUI). Similar to the touch user interface, but instead of touch, the user uses voice commands and speech recognition to interact with the device.
• Form-based user interface. The user fills in lists and answers questions similar to paper forms to interact with the device.

Examples 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.  

Why is UI design important?

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: 

• Customer acquisition. The easier and more intuitive your website or product is to use, the easier it will be to convert potential buyers into new, paying customers. 
• Customer retention. If your users can easily use your product or service, it’s less likely that they’ll switch to using your competitor’s services. 
• Reducing development time. By not spending time fixing bugs and mistakes in the UI, you can allocate more time and resources to new developments. 
• Reducing support costs. Aiming for a smooth and fail-proof product or website is a great way to cut the overall number of support queries.
• Increasing productivity. The better your product or website is to use, the more time users will spend, well, using it. 

Benefits of a well-designed user interface for eCommerce businesses

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. 

What are the differences between UI design vs. UX design?

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:

• Is the vegetable peeler easy to grip? 
• Was the online store checkout process smooth and easy for the user? 
• Does the banking app make the user’s money management easy and fast?

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. 

How UX and UI work hand in hand

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. 

How to design a good user interface

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:

• Will the interaction be direct (tapping an icon) or indirect (using a mouse to click on an icon)? 
• What type of interfaces will you be using: is your interface based on speech recognition? Or will they mainly interact through typing? 
• What’s the main interaction going to be like: will the user tap on an icon or swipe the screen? Maybe they will swipe a card instead? 

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.