Woman working on web design on multiple computer screens
Andrey_Popov/Shutterstock.com

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:

  • Buttons
  • Text
  • Images
  • Sliders
  • 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.”

Advertisement

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.

Command prompt in Windows

RELATED: Command Lines: Why Do People Still Bother With Them?

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.

File Explorer open in Windows 11

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.

RELATED: What Is Google Assistant, and What Can It Do?

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.

John Bogna John Bogna
John is a freelance writer and photographer based in Houston, Texas. His ten-year background spans topics from tech to culture and includes work for the Seattle Times, the Houston Press, Medium's OneZero, WebMD, and MailChimp. Before moving to The Bayou City, John earned a B.A. in Journalism from CSU Long Beach.
Read Full Bio »

The above article may contain affiliate links, which help support How-To Geek.