User Interface

Do you ever wonder why some apps feel easy to navigate, while others leave you frustrated and confused? The answer lies in user interface design.

Imagine you’re using your phone to check your emails, scrolling through the Gmail app and effortlessly deleting all those messages cluttering your inbox. Thanks to Google’s thoughtful interface design, everything about the app makes sense. You can toggle between inbox tabs, swipe emails away to archive them, and bulk-select emails for efficient organization. This functionality feels intuitive. The user interface of the Gmail app behaves how we expect it to behave, and this ensures our experience is smooth and enjoyable.

The user interface (UI) is the space where humans and computers interact. It’s the part of the machine, computer, or software that handles input and output (as opposed to the back end where all the computing takes place).

For example, the UI of a laptop includes the keyboard, screen, and trackpad. These physical input and output devices allow you to use the computer by entering text, clicking on items, and viewing what's going on. The laptop’s UI also includes graphical elements on the screen, such as menus and icons, that allow you to use the computer’s operating system. Essentially, UIs allow us to effectively control and operate software or computerized devices.

The goal of UI design is to make it as easy as possible for people to understand and use computers. The better the UI design, the less input is required to produce the desired output. Imagine if, instead of quickly tapping the delete icon to remove an email from your inbox, you had to navigate through several settings and menu items to find the delete option. This would require significantly more input for the same output. By designing programs with user needs, wants, and behaviors in mind, designers can create UIs that save us time and make our lives easier.

Human-Machine Interface (HMI): An interface that serves as a point of interaction between humans and machines, often in the context of an industrial application. HMIs can be touch screens, control panels, push buttons, keyboards, or mobile devices that operators use to control machinery.¹

Graphical User Interface (GUI): The standard computer UI that enables people to communicate with computers through icons, menus, and other graphics.² Users can navigate a GUI using a keyboard and mouse or a finger on a touch screen. Whether you’re navigating the desktop on your computer, visiting a website, or scrolling on an app, you’re interacting via a GUI.

Command-Line Interface (CLI): A text-based UI that allows people to interact with a computer using the keyboard by inputting lines of text, called command lines.³ Compared with a GUI, a CLI is more efficient for system administration tasks and consumes fewer network resources, which is useful when working with remote servers. This technical interface is most often used by software developers and system administrators.

User Experience (UX): The overall experience of users interacting with a product, such as a website, application, system, or service. UI and UX go hand in hand. Designers rely on UX research to make UI design decisions, and good UI design contributes to better UX.

In the early days of computers, UIs were very rudimentary. The computing power of the 1940s through 1960s was extremely limited, and because software designers had to prioritize the use of the processor, there were few resources to allocate toward UI design.

Amazingly, people interacted with these computers using cardstock or paper tape punched with holes. They would feed this media into the computer, and the computer would output lines of text printed on paper—a process that often took days.

It wasn't until 1969, with the emergence of CLIs, that software became more interactive. Using the CLI, people could make requests by inputting text directly into the computer and receive a response via paper printout within hours (or even seconds).

Thanks to the adoption of video displays in the 1970s, UIs became visual rather than textual. These early computer screens eliminated the need for paper and ink in basic user-computer interactions. Instead of printing information on paper for users to read, computers simply displayed outputs directly on the screen. Xerox PARC, a research center in Palo Alto, developed one of the first personal computers based on a graphical interface, using a video display, mouse, and keyboard. Steve Jobs visited Xerox PARC in 1979 to learn about their GUI, and would eventually develop Apple’s Macintosh computer using these emerging technologies.⁴ 

Following this in 1985, Microsoft created Windows, the operating system for IBM’s first personal computer. It was with this operating system that Microsoft introduced its GUI to the mass market. Both Apple and Microsoft established the standards by which graphical interfaces exist today: a menu at the top of the screen, a status bar at the bottom, and shortcut keys for faster input.

Douglas Engelbart: In the 1960s, Engelbart invented various devices for inputting and displaying data. Together with a colleague at the Stanford Research Institute, Engelbart perfected a variety of input devices, including joysticks, trackballs, and the computer mouse. His work led to the development of the basic GUI, making it possible for anyone to use a computer.⁵

Jef Raskin: Raskin was an expert in human-computer interfaces who worked for Apple in the company’s early days.⁶ He started the Macintosh project in 1979, conceiving the idea that a personal computer could become a regular consumer appliance—as long as it was easy to use. He argued that earlier Apple computers were too complex, envisioning a computer that was low-cost and incredibly user-friendly.

Jakob Nielsen: Web usability consultant and expert in human-computer interaction, Nielsen has been crowned the “king of usability”. He invented several usability principles to guide UI design, called Nielsen’s 10 Usability Heuristics.⁷ These heuristics are broad rules of design intended to improve user experience by ensuring UIs are intuitive, consistent, efficient, and flexible for end users.

Increasing Digital Literacy

As designers created more intuitive UIs, it became possible for regular consumers to use technology. People no longer needed technical training to use computers or software. Since then, UIs have become essential to how we interact with computers and software—we leverage the power of modern UIs every day! From something as simple as sending an email to more complicated tasks like video editing or setting up an e-commerce store, the development of user-friendly interfaces has increased digital literacy so significantly that anyone can perform almost any task with digital technology.

User-Centered Design

Today, UI design is rooted in the needs of real users. When a designer creates or updates a UI, they consider human behavior above all other factors, relying on user research to determine how to improve digital products so they fit seamlessly into our existing lives. Designers attempt to create UIs that people can navigate right out of the gate with limited training, onboarding, or guidance.

UI design can even influence our behavior, encouraging us to click a button or enter our contact information into a sign-up form. The psychology of user behavior plays an important role in design decisions, especially when the goal is engagement or conversion optimization.

Industrial Applications

Advancements in UI design have also led to innovations in other industries, including manufacturing, healthcare, automotive, hospitality, agriculture, and the energy sector. For example, human-machine interfaces (HMIs) have made complex machinery more manageable, reducing errors and improving efficiency in manufacturing.8 In the healthcare industry, HMIs offer professionals a user-friendly method for operating complex MRI machines and CT scanners. HMIs even give farmers access to crucial information about agricultural equipment and allow for more precise control over farming operations.

Dark Patterns

One major critique within the field of UI involves the ethical implications of using design to influence human behavior. Dark patterns, for example, are deceptive UI designs that trick users into doing things, such as buying a subscription/item or giving up personal information.⁹ Some of these tricks might include using misleading language to confuse users, hiding additional fees, automatically adding items to a user’s shopping cart, and leveraging guilt or shame to make users do something, like subscribe to an email list or make a donation. 

User-centered design is supposed to prioritize the goals of the users, but dark patterns prioritize the goals of the designer or business. This harms the user experience and opens the door to several ethical issues.

Privacy and Data Collection

Critics also raise concerns surrounding the collection and use of user data in UI design.¹⁰ Designers often draw on user data to make design decisions and create personalized experiences, which opens the door to privacy and security concerns. For example, conducting user research sometimes means “spying” on user behavior or subjecting users to A/B tests without their knowledge.

Designers must be careful about how they use data, ideally requesting consent from users before collecting their information. Designers collecting and analyzing data to make UI decisions (or create dynamic, personalized UIs) also have a responsibility to secure this data. Overall, transparency and security are key to ensuring the responsible use of user data.

Challenges with Accessibility

While digital products are becoming increasingly inclusive, creating perfectly accessible UIs is still a challenge. Designing accessible interfaces means striking a balance between aesthetics and universal inclusivity. Unfortunately, many designers overlook the importance of accessibility when creating interfaces for software, websites, and apps, unintentionally preventing people with disabilities from being able to use the interface. For example, poor contrast makes text difficult to read for people with visual impairments, and this is a very common problem in digital designs.¹¹ 

Recognition Rather Than Recall

One of Nielsen's 10 Usability Heuristics, recognition rather than recall explains how it’s easier for users to recognize something than to recall something by memory. Creating intuitive UIs—with visible and easily retrievable information—reduces the amount of cognitive effort required from users by limiting the amount of information they have to remember.

Aesthetic and Minimalist Design

We tend to find minimalist designs more aesthetically pleasing. Not only that but limiting the amount of information on a page reduces the cognitive load on users and makes it easier for them to complete simple tasks. Too many elements and moving parts will compete for the user's attention. Because of this, it's a good idea to focus UI design on the essentials, giving users only the information they really need.

1. What is HMI or Human Machine Interface. (n.d.). EXOR International. Retrieved January 24, 2024, from https://www.exorint.com/exor-innovation-blog/what-is-hmi-human-machine-interface-and-do-you-make-or-buy-it
2. Rouse, M. (2021, May 28). What is a Graphical User Interface (GUI)? - Definition from Techopedia. Techopedia. Retrieved January 24, 2024, from https://www.techopedia.com/definition/5435/graphical-user-interface-gui
3. What is a CLI? - Command Line Interface Explained. (n.d.). AWS. Retrieved January 24, 2024, from https://aws.amazon.com/what-is/cli/
4. Asher, M. (2017, July 18). The History Of User Interfaces—And Where They Are Heading. Adobe Experience Cloud. Retrieved January 24, 2024, from https://business.adobe.com/blog/basics/a-brief-history-of-ui-and-whats-coming
5. Hall, M., & Tan, S. (2024, January 10). Douglas Engelbart | Inventor of the Computer Mouse. Britannica. Retrieved January 24, 2024, from https://www.britannica.com/biography/Douglas-Engelbart
6. How Jef Raskin started the Macintosh project. (2012, February 1). Mac History. Retrieved January 24, 2024, from https://www.mac-history.net/2012/02/01/how-jef-raskin-started-the-macintosh-project/
7. Nielsen, J. (2020, November 15). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. Retrieved January 24, 2024, from https://www.nngroup.com/articles/ten-usability-heuristics/
8. The Versatile World of HMIs: Transforming Industries with Human-Machine Interaction Automation Industrial. (n.d.). Retrieved January 24, 2024, from https://l5392.com/blog
9. Nield, D. (2017, April 28). Dark Patterns: The Ways Websites Trick Us Into Giving Up Our Privacy. Gizmodo. Retrieved January 24, 2024, from https://gizmodo.com/dark-patterns-how-websites-are-tricking-you-into-givin-1794734134
10. Friedman, V. (2019, April 25). Privacy UX: Privacy-Aware Design Framework — Smashing Magazine. Smashing Magazine. Retrieved January 24, 2024, from https://www.smashingmagazine.com/2019/04/privacy-ux-aware-design-framework/
11. Chatterjee, S. (2022, September 2). 10 Most Common Web Accessibility Issues to Solve for. BrowserStack. Retrieved January 24, 2024, from https://www.browserstack.com/guide/common-web-accessibility-issues
12. Soegaard, M. (2023, November 3). The 10 Most Inspirational UI Examples in 2023 | IxDF. The Interaction Design Foundation. Retrieved January 24, 2024, from https://www.interaction-design.org/literature/article/ui-design-examples