User Interface (UI)

Updated Sept 10, 2020 · 10 min read

What is a user interface (UI)?

A user interface (UI) is the point at which humans interact with and control software applications (like Airbnb or Facebook) or hardware devices (like ATMs or speedometers). The goal of an effective user interface is to allow humans to operate and control machines in natural and intuitive ways.

Graphical user interfaces (GUI)

Nearly all software programs today have a graphical user interface (GUI) as the human-machine interface. The graphical user interface is a type of user interface that includes graphical controls, such as windows, buttons, sliders, and dropdown menus, for interacting with a machine. It differs from the command line interface (CLI), which is a text-based user interface used to view and manage computer files.

Users interact with the graphical user interface by directly manipulating the graphical controls. Designers at Information technology companies spend their time considering the placement and design for these graphical controls to make operating their machines more pleasant.

User experience (UX)

User experience (UX) is the impression users have while interacting with a company’s software application or hardware device. The user experience includes the aesthetic, response time, and placement of controls that leave the user with an impression. Companies continue to emphasize the importance of optimizing the user experience to increase customer satisfaction and adoption.

Cognitive scientist Don Norman is credited with coining the term while working at Apple in the 1990s.

UI vs. UX: What’s the difference?

The user interface is often talked about while talking about the user experience. Both terms focus on designing for human-computer interaction. However, while the user interface is the visual design of an application or device, the user experience is the impression from users while interacting with the application or device.

The user interface includes the images, typography, color themes, and other visual elements that make machines more usable. While designing a user interface, designers research competitor visual designs and construct style guidelines for consistency.

User experience focuses on how customers interact with the software application or hardware device and their journey while attempting to complete tasks. While considering the user experience, designers observe users interacting with an application or ask customers questions about how inuitive or confusing their experience is.

How they work together

UI and UX teams collaborate to create a cohesive human-machine interaction, and for some companies, the UI and UX designs are created by a single team. When the UI and UX teams work independently, the UX team focuses on the flow of the application, the tasks users want to accomplish, and how the application serves the information. Meanwhile, the UI team focuses on how these interface elements will appear to users.

Tools and applications

UI and UX designers use similar tools to create effective and intuitive designs.

Before designing the design for buttons and graphical components, designers will use a tool like Balsamiq, Figma, and Lucidchart to develop wireframes. A wireframe is a schematic or bluefront for helping designers and other team members think about the structure and placement of component in a user interface.

Once a team agrees on the blueprint for a user interface, designers use one or more of the following tools to make their applications or devices truly beautiful:

  • Adobe XD
  • Axure
  • Craft
  • Figma
  • InVision Studio
  • Marvel
  • Origami Studio
  • Proto.io
  • Sketch
  • Webflow

UI Frameworks

Many developers use HTML, CSS, and JavaScript to build beautiful user interfaces. Developers also use UI frameworks, which are software tools based on HTML, CSS, and JavaScript. They include a series of files and resources to help designers build UIs and developers implement them quickly.

Popular frameworks include React, Angular, Vue, Bootstrap, Semantic UI, Skeleton, UI Kit, and Ember.

Hardware

Most hardware devices also include a user interface. As an example, when you interact with your TV, you use a remote control that facilitates the interaction. The remote includes a keypad, channel buttons, a power button, and sometimes rewind and forward buttons.

Like the user interfaces for software applications, the user interfaces for hardware devices differ across many similar items, but are close enough that customers can replace hardware devices and still understand how it works.


Related Terms

Programming
Cascading Style Sheets

CSS (Cascading Style Sheets) is a language used to format and design the presentation of web pages, such as text size, background images...

Programming
Command Line Interface

A command-line interface (CLI) is a text-based interface for interacting with applications or operating systems (OS) through commands.

Programming
Frontend

It contrasts with the frontend, which refers to the parts of software programs that end users can see and interact with through its user interface.