Hugo’s UI Theory and Tips

Concepts & Definitions

In this project, you will design UI controls providing user feedback through state transitions triggered through micro-interactions; in other words, you will design a pattern library.

The highlighted keywords above are explained below. It is important to share a language when talking about the stuff we talk about. Every field of human endavour has its technical terms. You should familiarize yourself with those of design. Here we are looking at a specific subset of those. I purposefully included more keywords than absolutely necessary in the sentence above so you get acquainted with a wider set of concepts. Words matter.

Control

This is an important word for you to know, but it is not clearly defined. A control is an object that can be manipulated by the user in an interface. A typical example is a navigation menu. The word control refers to the thing itself. It does not specify what type or style of thing it is. A site’s drop-down menu, picture carrousel, search box; these are all controls. Note that controls are also called widgets. The words do not have exactly the same meaning, but they are often used interchangeably.

Feedback

This constitutes the fundamental purpose of this project’s mandate. We design interfaces to help the user of the app achieve what they want. Feedback is the way an app or system tells the user what is going on. To know that it worked when you clicked a button, the button itself or the presentation should visually change when you click on it. It is also a good idea to show a progress bar during long actions, for example.* Programmatically, there is no need to show anything on the screen; the button has been cliked, the action has been triggered, the computer does it’s thing. But for the user, you want to provide feedback. Lack of feedback is confusing. You know this from personal experience, when you click an OK button, and nothing happens. Did it work? Should I click again? In this project, feedback will take the form of transitions and micro-animations between states.

* Note that although they remain useful for the user, and completely useless for the program itself, progress bars rarely show the actual progression of the computer’s process. They are psychological tools to help enhance the user’s patience, not faithful representations of what is happening. 🤯

State

A state is an occurance of feedback, it defines the appearance of an object at the different moments of an interaction. A button, like most controls, usually has many states with names like: stand or default, when it appears on the page; hover, when the mouse pointer passes over it; click or active, when the user clicks with the mouse or touches the screen at the location of the button; disabled, when a button is visible but inactive or unavailable. The designer should provide a different visual appearance for every state of a control.

Transition

A transition is usually a short animation that progressively blends the visual qualities of a control during the passage between two states. If a text field is white by default and red when there is an error, the transition is the passage between white and red when an error is triggered. There can be no transition, and the field will just instantly switch to red when there is an error, or the colour of the field can transition more or less quickly between white and red. Transitions contribute to the user experience by smoothing the feedback.

Trigger

A trigger is the action that makes an event happen in user interaction design and in programming. An event can be triggered by a user action – click, touch, select, type — by hardware – copying a file, recording video with a camera – or by a software action – the end of a calculation, when a value becomes true.

The trigger is important because it determines which state to transition toward: if the trigger is a click, transition to the click state; if the trigger is file upload complete, transition to the task completed state.

Micro-interaction

What you design and create for this project is generally called micro-interaction. State changes, transitions, feedback are all part of the overall concept of micro-interactions. Micro-interactions contribute to the user experience. They make the experience richer, more dramatic, more fascinating. For many years now, people have gotten used to micro-interactions and micro-animations. Interfaces that do not provide them seem cold and unpleasant.

Pattern

In design, a pattern is a recurring, reusable solution applied to solve a common design problem. The term is used in many different fields. In computer programming, a design pattern is a piece of code that can be used for many applications. In web development, code that connects your program to a database would be a design pattern. An example of a design pattern, in retail this time, is the Sale sticker or stamp. Every store has one (or several), they all look different.

It sounds like a pattern is similar to a control. Actually, the control is the result of designing the pattern. Example. You need a device to display and access all the sections on your site. The pattern you design is a nav bar. The control is the exact nav bar you create, implement on the site, and that users of your site interact with.

Library

A library is simply a collection. Here we are talking about a library of patterns, so a collection of reusable solutions to common problems. Remember a code library – like a JS animation library: it’s a collection of functions and objects that achieve some goal – like animating objects.