Visual Elements of User Interface Design

UI / UX Design Specialization by California Institute of Arts (CalArts).

What is a User Interface?

It’s the bridge between user and content/functionality.

The Relationship between UI and UX

A Brief Historical Overview of Interface Design

We need to have feedback, know when the interface is working or not, know if we make a mistake or if it’s all right, and to be able to undo and redo our actions.

Interface Conventions: Theory

An interface should be based on:

• Real world knowledge (analog models).
• Learned behavior (conventions).
• Cause and effect (action / reaction).
• Consistency (logical / systematic).
• Seamless (speed and ease).
• Immediate intuition (a few teach a lot).
• Fulfillment (payoff / results).
• Undo / redo / confirm (feel safe).

Template vs Content

To ensure we make the right interface, it should be based on content, context, and functionality for a specific, well defined audience.

A generic template can work for some UI elements or components. But it won’t work for the entire interface, that leads us to a generic experience, a poor experience.

Aesthetics & Functionality

Aesthetics and functionality are different things, but, UI should always be related and familiar to the functionality. Relationships make it easy to know how it works by how it looks.

Design Before Design

Project Brief is the non-visual pre-design (how it all starts).

Here we define:

• What is it?
• Who is it for?
• Where does it live?

The client determines and must be clear about:

• Goals.
• Constraints.
• Platform.
• Audience.

Look and Feel

Defining style and mood helps to envision the overall design (pre-design).

It defines:

• Mood.
• Typography.
• Color palette.
• Language.

Language as a design tool

Language sets mood and tone.

We need to define naming and branding for the UI by specifying the audience, their attitude and motivation to use the app/web.

Color & Shape

Use color and shape to define association, functionality and state of UI elements. That lets the user know if an element is disabled, active or inactive.

Imagery

Kinds of imagery:

• Imagery as content: can be videos, search engines and all images in boxes.
• Imagery as navigation: they are icons, symbols and links to some other content or functionality.
• Imagery as mood: they contribute to the look and feel, and can be a part of the content or the navigation.
• Immersive imagery. It’s a special case, it’s used for games, apps and animations. By its own, they create the context, a whole world/universe for the product, where things don’t have to “live” in boxes anymore.

Typography

Type is language made physical, is fast, is accurate, and has a clear meaning, is economical, and can represent what cannot be depicted.

Types of typography:

• Type as content: typographic material, articles, blogs, books, etc.
• Type as interface: labels, buttons and navigation.
• Type as branding: the app or site identity.

Icons

Difference between icons and symbols:

• Icon: pictorial representation (realistic/descriptive). We use to know what an icon is.
• Symbol: non-pictorial representation (abstract). We use to learn what a symbol means.

Sometimes a single image can act as both an icon and a symbol.

What makes a good icon?

• Communication (ideas + aesthetics).
• Functionality (technical).
• Audience (they get it!).
• Recognition (saturation + simplicity).

Functionality

Creating a logical UI is creating a predictable system.

A UI must combine logic, hierarchy and systematic behaviors. While using intuition, discovery and learning.

These facts help the user to interact fast and easily, as we make an economic interface. Economizing UI elements and user actions, saving time and doing more with less.

Speed and Style

Speed

Style

Composition and Structure

Content-specific design: Sometimes, the structure is the actual content, and its functionality drives all the design decisions.

Buttons

Size: Must be related to the size of the cursor, finger and the screen.
Shape: Meaningful for functionality, depending on its label and the screen.
Color: It can make it easy to recognize what a button is made for (even without a label).
Dimension: Making a button similar to a real one, makes the UI intuitive.
System: Buttons need to have a logic placement on screen to make sense by thyself.

Not Buttons

Menus, links, fields. Use design conventions for these elements, for shape, scale, contrast, clarity and economy, in order to reinforce and emphasize the goals of speed and function.

States and Changes

Let the user know the UI element is responsive (is working) by adding visual states, normal, hover, active, inactive.

Think about the different static element states as well as how your elements animate between states.

Hierarchy of Content

Figure out what goes where, and why:

• Function, what’s (and what’s NOT) important to the user?
• Intention, what’s (and what’s NOT) important to the client?

It’s critical to define the scene, the thinking, and physical reaction of the user:

• What’s the first thing the user sees?
• What’s the user’s first impression?
• What’s the first thing the user does?

Conventions and Expectations

Small screen: single task + multiple screens.

By convention we focus on a single task when working on a small screen, even when multiple functions are available, we keep them hidden, until we need them.

Big screen: multiple tasks + single screen.

In this case, we can focus on multiple tasks on a single big screen as we have enough space to work.