User interface (UI) design

Have you ever wanted to learn more about UI design? In this article, we’ll dive into the history of graphical user interfaces, and how we arrived at modern day interfaces. We’ll also cover who’s responsible for designing interfaces and some basic principles of UI design.

What is UI design?

User interface design (UI design) refers to the visual elements of a product or digital experience.

In essence, it’s the translation of a brand’s vision into a product or piece of software. The look and feel of a product. The most common UIs are on the phone, computer, or tablet you’re using right now; at the ATM where you take out cash; and in your car.

Who creates these user interfaces? Primarily user interface designers. Their goal is to make user interactions as simple and efficient as possible, guiding them to solve their problems with ease. In order to better understand UI design, it’s helpful to start at the beginning.

A brief history

Before the glossy veneer that we commonly interact with today, interfaces were actually text-based.

That’s right, TUI, or text-based user interfaces, were how we originally communicated with computers. Text-based UIs are text only, with no graphics. An example of a TUI is Windows Safe Mode: a simple menu with a black background, grey text, and zero styling.

TUIs are still relevant today in the form of text editors, including Terminal for Mac, and Command Prompt for Windows. In fact, a majority of engineers spend their day in text-based UIs writing code that will then be rendered by a browser or server.

In 1963, Ivan Sutherland developed Sketchpad, widely held as the first computer-aided design program and the advent of modern day graphical user interfaces. Sketchpad used a light pen to create and manipulate objects on engineering drawings in real time, and coordinated them with graphics on the screen. This was the first step toward the modern day CAD (computer-aided design) systems that we know today.

By the late 1960s, researchers at Stanford Research Institute, led by Douglas Engelbart, developed the On-Line System, which used text-based hyperlinks manipulated with a mouse. However, until 1983 when the Apple Lisa was released, computers with graphical user interfaces (GUIs) were not available to individual users. And it would take an additional year before GUIs were widely consumed via the Macintosh 128K in 1984.

Today, with touch screen devices, augmented reality, and virtual reality, the mouse has almost lost its seat at the table.

What makes a good user interface design?

With interface design, less is more. The flow should be smooth and seamless, getting out of the user’s way and allowing them to be fully immersed in the experience.

A good user interface is…

1. Clear: The interface speaks plainly and is never overly embellished or redundant. There’s clarity on every screen.
2. Intuitive: It presents the user with everything they need at the moment they need it.
3. Structured: It’s organized thoughtfully, with related items grouped together in a purposeful structure. Elements are clear, consistent, and recognizable.
4. Responsive: The user is shown clear state changes on both the success and failure of their actions. This can even be applied to micro-interactions via button animations or feedback on input boxes.
5. Consistent: It should recycle behaviors and components that allow a user to rely on its patterns.
6. Flexible: It should reduce the cost of mistakes and proactively prevent errors. It should also be tolerant, and handle multiple types of situations gracefully.

What is a user interface designer?

A UI designer is the driving force behind creating an interface that is clear, intuitive, and consistent. They are responsible for laying out an attractive start-to-finish interface that blends the brand’s voice and the user’s needs together. This includes every screen, success message, loading graphic, error state, and default state.

A great user interface designer will also validate their designs with new or existing users, making sure their proposed interface will help solve a problem, not create a new one.

Once the product or feature ships, they’ll also learn from and refine their designs based on analytics. Where are users getting stuck? Where are they dropping off? Are they overwhelmed? Iterating based on usability testing is imperative to a successful user interface.

Depending on the context of the product, there are various techniques a designer should rely on. For example, a vehicle’s temperature control interface would have a wildly different approach than a business analytics dashboard.

• In the car, the user’s context is different: There’s not as much time for them to read the individual components. The user needs to find their input fast, which means the UI needs to be super intuitive, allowing them to focus on the road.
• On the other hand, users would have more time to pore over the data—and possibly even cross-cut the data differently through filters—on an analytics dashboard. This means the UI would need to be flexible to handle different dimensions of data.

Understanding the context of when, how, and why a user is engaging with the product is paramount to its success.

Give your users a truly immersive experience.

You want your user to have a smooth product experience—but creating an intuitive interface can be tough if your team isn’t on the same page.

InVision’s collaborative design platform empowers your team to work together to create elegant, seamless UI. Capture your product’s look and feel with Freehand wireframes. Create animations and micro-interactions in Studio to get a true-to-life interactive view of the screens your users will see, and then rest easy knowing that Inspect ensures pixel-perfect handoffs from design to development.

In the end, a good user interface ensures the user is able to complete the task at hand easily and effectively. A great user interface is a beautiful blend between form and function.