If you’re even tangentially in the web design or graphic design space, you’ve heard the term “UI,” or “UI design.” You may have also seen it used interchangeably with “UX,” so what is it and how does it differ?
In truth, UI and UX aren’t the same. Below we’ll get into what UI is, and what it stands for.
What Is UI, and What Does It Mean?
UI is short for “user interface.” It’s the elements of a website or app that the user interacts with as they navigate the page or program — the graphical layout of an application. Page and app elements that qualify as UI include:
- Scroll bars
- Form fields
- Page layout
Basically, everything a user interacts with is part of the UI. Because of that, aesthetics are a big part of any site or app’s UI design.
Adobe explains UI in their XD design blog like this:
“A user interface is a place where interactions between humans and machines occur. It allows users to effectively operate a machine to complete a task or achieve a specific goal, like making a purchase or downloading an app.”
UX, on the other hand, means “user experience.” And while UI can definitely affect UX, they are not the same thing.
Different Types of UI
The UI of any device includes both hardware and software. Everything from the keyboard you use to the URL to the sidebar menu of the website you’re visiting is part of the UI.
The hardware of a UI can be divided into two categories:
- Input hardware: devices that let people control the machine from their end, like a mouse or tablet.
- Output hardware: devices that give the user information, like monitors and speakers.
According to Adobe, there are three types of user interfaces: command-line interfaces, graphic user interfaces (also called GUI), and voice-enabled user interfaces.
Command-line interfaces were the first UIs, dating back to the 1970s. Users would input a command and the computer would respond with a line of text. These UIs require knowledge of machine language and have largely been replaced by graphical user interfaces (GUIs) in today’s computers. They’re now mostly used in computer programming and system administration.
GUIs are the interfaces most modern users are familiar with. Graphics, like icons and cursors, allow users to interact with digital products. When you move the mouse arrow to click on the Spotify icon so you can play music, that’s a GUI. The icons we regularly interact with on our smartphones? Also a GUI. These UI systems allowed the widespread use of computers as we know them today.
Voice-enabled user interfaces allow people to interact with a digital system using just their voice. In the last few years, voice-enabled interfaces have surged in popularity via digital assistants like Alexa, Siri, and Google Assistant.
Elements of Good UI
Any designer will tell you a good UI is key to a good product. If something isn’t easy to use, it won’t catch on. A well-designed UI will be:
- Familiar: People will be able to intuit how to use the program based on their previous experience.
- Clear: The function of every element in your UI should be clear to the person using it.
- Consistent: Elements should be consistent across the product so people can recognize patterns.
- Efficient: Minimal input from the user is required to achieve the desired output. Shortcuts are provided for more experienced users.
- Forgiving: Good UI forgives when someone makes a mistake, e.g. Google’s “did you mean” link in search results.
UI designers will create simulations of a system and test it on the intended audience before accepting it and moving it into production. Ideally, it will have all of the above characteristics.