Crash Course: UI Design

A recap of my design workshop PennAppsXV.

UI vs. UX

If you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX?

At their most simple forms, UX design is what makes an interface useful, and UI design is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from a good interface, one must understand the UI design is merely just one layer of the entire design process. Perhaps this is why people often confuse UX and UI. In the following few paragraphs, however, I hope to help you as the audience or reader understand where the differences lie in the context of the design process.

According to Garrett in The Elements of the User Experience, UX can be understood in five primary planes. Let’s start with the most abstract plane:

The first plane of product design

At a high level, the first plane is really the starting block of product design. Here, you’re applying different research methods, including user interviews, competitive analyses, user personas, and other research techniques to understand:

What is the problem you are trying to solve? What are your user needs? How does your product fit within a business context (product objectives)?

The second plane:

The second plane of product design

In this stage, you should be defining functional specifications and content requirements of your platform. In other words:

How might you solve the problems through your platform? What are the features, and how might you prioritize them?

The challenge here for designers is prioritizing features while minimizing tradeoffs. Sure, you might have hundreds of ideas to solve a problem, but you can’t implement all of them.

The third plane:

In this stage, your ideas should begin to form a structure. Information architecture is concerned with how the information within an app is organized, and how users cognitively process the information. User flows map out the specific journeys users embark on through the app to help solve their specific need. It’s concerned with the most logical steps for your users to gratify their needs.

The next plane is where things become less abstract and more concrete:

The skeleton plane seeks to achieve the structure of an interface design and information design. Interface design is concerned with the arrangement of specific interface elements to enable users to interact with the functionality of a system, while information design is concerned with the presentation of information in a way that facilitates understanding.

In this stage, you’ll probably find UX or Product Designers designing, testing, and iterating on wireframes. Wireframes are very low fidelity, often greyscale mockups that demonstrate the intent of each interface element for users.

And finally, the most concrete plane:

The surface plane, as the name suggests, strives for great sensory experience and visual design. The goal here for designers is to form a visceral connection with users by successfully communicating the brand, product, value and functionality in one cohesive image.

This is the plane where you’ll find UI Designers and Visual Designers doing the bulk of their work using tools such as Sketch, Photoshop, Adobe Experience Design, Illustrator, or Figma.

Next, let’s jump into some basic principles of UI Design.

Principle #1: Clarity comes first.

There’s nothing worse than ambiguity in an app. What does this button do? How did I get here? How do I go back? In order to avoid this, a designer should always ask themselves:

Why is this here? Does this make sense? What other possibilities can I explore?

Great designers know how to explore the variety of possibilities of an interface layout, the potential tradeoffs of each, and understand which design might help a user best achieve their goals. Clarity in design allows a user to feel confident while navigating through your app.

Principle #2: Provide clear, meaningful feedback

We’ve all used a website or an app where we’ll try to click a button, and we’ll wonder if the system registered the click.

Simply put, every action needs a reaction. If you’re a web developer, for example, changing the :hover state of a button is a common form of feedback to allow your users to understand their hover action.

A great example is Facebook’s use of their skeleton loading state. While the user waits for their content to load, a loading state in the shape of the content provides meaningful and relevant feedback for users for them to understand that their content is loading.

Principle #3: Consistency matters.

When I refer to consistency, I’m talking about consistency in the placement of interface elements or the language throughout the product. Once your users start learning how to use a product, they shouldn’t have to relearn it. Let’s take a look at an example of bad consistency.

Xfinity Home Page

Xfinity TV Page

Xfinity Personal page

The above example might look like 3 websites from 3 different companies, but it’s actually not. What might make one think that? Well, the navigation bars for each page uses a different set of colors, layout and font styles. As a user, this might be confusing and disorienting, and users might forget that these are all under one single website.

As a designer, how can you maintain consistency throughout your app? You can design your app using a consistent grid system, such as the common 8-point grid system found in mobile apps and icon design. You can also maintain a consistent color scheme and navigational elements across screens. These elements can all be rooted in a style-guide:

The point is: good consistency and structure will make your users feel at home.

Principle #4: When in doubt, use established design patterns.

Don’t get me wrong here — innovation is awesome and encouraged, but it shouldn’t have to be at the expense of the user experience. There’s no need to reinvent the wheel if the wheel is doing a great job at doing its job. For example, if you’re ever unsure if an icon accurately or intuitively represents a word, just use the word in its place. Or adhere to common color patterns, such as a shade of red to warn/alert a user, or green to mark something complete.

Why use established design patterns? Well, for one, many of these established design principles are grounded in human perception. Let’s take a F-Shaped reading pattern or eye scanning pattern when it comes to reading blocks of content.

The F-Shaped reading pattern.

This is a heat map generated by data collected from an eye-tracking experiment. The red areas represent the most viewed sections, while the blue are the least. As you can see, the heat map generated somewhat resembles the letter F. But what does this mean for designers?

It means you should put the most important content at the top left corner.

For example, you’ll typically find a logo in the top left corner. This allows companies to strengthen their brand identities. In the top right corner, you might typically find the pages for navigation, or perhaps a search bar. This allows users to navigate different pages with ease without searching throughout the page for the navigational elements. Here are two examples that adhere to this design pattern: