user interface (UI)

What is a user interface (UI)?

The user interface (UI) is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop. It is also how a user interacts with an application or a website, using visual and audio elements, such as type fonts, icons, buttons, animations and sounds.

A good UI adheres to design principles that enable users to navigate through the interface and easily use it for their intended purposes.

Many real-world businesses are dependent on web and mobile apps. This has led companies to place increased priority on UI to improve the user's overall experience. UI and web designing no longer just encompass hard skills like coding. They also require knowledge about user interaction design patterns and accessibility to ensure interfaces are user-friendly for everyone and not overly complicated.

Types of user interfaces

The various types of UI include the following:

• Graphical user interface (GUI). Web UIs and other digital products often feature GUIs with graphical elements, such as windows, pull-down menus, buttons, scroll bars and icons. Multimedia is increasingly being incorporated into GUIs for many applications, including sound, voice, motion video and virtual reality (VR).
• Command line interface. CLIs are meant for developers who use programming languages, such as Python, Pearl, C, C++, PowerShell and Bash. A command is entered and the interface completes the task associated with that command.
• Menu-driven UI. The visual elements in a menu-driven UI let users make selections from various options to get what they need. Online shopping sites exemplify this type of UI.
• Touch UI. A touch screen lets users physically interact with many elements of an interface.
• Voice UI. VUIs receive verbal commands or requests from humans and can respond accordingly.
• Form-based UI. This interface provides electronic forms with features such as checkboxes that let users submit responses and forms.
• Natural language UI. This type of user interface understands natural language and can converse with humans, responding in a humanlike manner. Apple's Siri and Amazon's Alexa are examples of devices featuring natural language user interfaces. A natural language interface is distinct from a natural user interface, which focuses on creating interactions that don't require learning an artificial control, such as typing on a keyboard.
• Mobile UI. The popularity of mobile applications led to the development of the mobile UI. It's concerned with creating usable, interactive interfaces on the smaller screens of smartphones and tablets and improving special features like touch controls.

Examples of user interfaces

A wide range of devices might serve as user interfaces or be part of a UI. Examples of these include the following:

• Computer mouse. A computer mouse is a device that serves as a point of human-computer interaction. Users interact with software or webpages in this way.
• Remote control. Like computer mouses, remote controls are a means to control and interact with on-screen elements wirelessly.
• Virtual reality. VR applications let people use physical motion to interact with a computer. The computing device recognizes motion as commands to complete certain tasks.

• Automated teller machines. Users interact with visual elements on an ATM screen to complete transactions or other tasks.
• Speedometer. A speedometer provides information to human users regarding their vehicle's speed from a vehicle dashboard.
• iPod click wheels. Users interacted with an iPod's on-screen elements through a click wheel that could, for instance, sift through a long list of songs.

Websites such as Airbnb, Dropbox and Virgin America have good user interface and visual design characteristics. Sites like these have pleasant, easy-to-operate, user-centered designs that focus on the user and their needs. Mobile first is increasingly a call to action for website design because many users view content on mobile devices rather than on desktop computers. Certain best practices for mobile site design provide a good starting point for meeting these needs.

User interface design

There are multiple steps involved in the UI design process, including the following:

• Assess end-user needs. A UI always has an intended purpose, and its design ultimately must serve the needs of the target audience of users.
• Examine existing features. When designing the user interface, what others are doing can be a good starting point.
• Create sketches. This entails creating low-fidelity drawings to map out a vision of what the final UI could look like.
• Create a wireframe. This step involves creating more detailed visual depictions of UIs, including where and how components will be assembled.
• Design components. UI developers must create the UI components individually then assemble them before a prototype is made and tested.
• Build a prototype. A prototype version of a UI helps spot problems and test the functionality of various components to ensure they work smoothly before implementation.
• Implement the UI. In this step, the official version of the UI is released in a production environment.
• Continuous updates. UIs require troubleshooting to identify issues to fix issues users encounter and to implement enhancements to improve the UI.

Typical elements of a UI

There are many UI elements designers can implement to improve UI usability and ensure users have good interactions. Not all of these interactive elements are mandatory, but each exists for a different reason, and designers can combine as many as needed when building their UI components. They include the following:

• Informational components. Users receive important information and updates, such as notifications, progress bars and tooltips, through these components.
• Input controls. Users enter information into an interface, or select options from predesigned lists, using a variety of input controls such as dropdown lists, radio buttons, text fields and checkboxes.
• Navigational components. Users navigate through a UI to find what they're looking for using components such as search fields, pagination and slide drawer navigation that let users easily switch between webpages.

UI and UX

The UI is often talked about in conjunction with user experience. UX includes the aesthetic appearance of the device being used, response time and the content presented to the user in the context of the UI.

Both terms fall under the concept of human-computer interaction, which is the field of study focusing on the creation of computer technology and the interaction between people and all forms of IT design. Specifically, human-computer interaction studies areas such as user-centered design, UI design and UX design.

An increasing focus on creating an optimized user experience with user research and responsive design has led some to carve out careers as UX and UI experts. Certain languages, such as Hypertext Markup Language and cascading style sheets, support a strong UI and UX.

History of UIs

In early computers, the only UIs were a few buttons on an operator's console. Many of these computers used punched cards, prepared using keypunch machines, as the primary method of input for computer programs and data. While punched cards have been obsolete in computing since 2012, some voting machines still use a punched card system.

The UI evolved with the introduction of the command language interface, which first appeared as a nearly blank display screen with a line for user input. Users relied on a keyboard and a set of commands to exchange information with the computer. The CLI advanced to using menus with lists of choices written in text.

The first GUI originated mainly in Xerox's Palo Alto Research Center. Apple then enhanced GUI development, and Microsoft effectively standardized it in the Windows operating systems throughout the '90s and into the present. Other lesser-known examples were developed concurrently. These evolutions collectively shaped current trends in UIs and web design.

CLIs and GUIs are two common user interfaces. Get to know the advantages and disadvantages of these two UI types.