Hugo’s UI Theory and Tips

On this site, you will find some theory and concepts related to the second project. I will present this tuff in class, but you really should read this theory page. Mastering the concepts and fundamentals will help you complete this mandate (and hopefully get a better mark. 😉 ).

You should read this page before you start putting together your prototype. It will allow you to anticipate the elements to look for and what to pay attention to while doing research. Also, it will provide you with keywords to use in search engines to find stuff about the mandate and project.

Concepts & Definitions

In this project, you will design UI controls providing user feedback through state transitions triggered through micro-interactions.

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.


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.


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. 🤯


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.


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.


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.


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.


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.


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.

Brief Discussion Of States

Here is a short list of controls that show different states. I give them names which are typical, but not universally applied. There is no standard vocabulary for this sort of thing. So this is just to give you an idea.


This is the default appearance of the control. This is how it looks when the page loads and it is enabled and ready for user interaction.


This is the state when the mouse pointer intersects with the control. This state does not exist on mobile.

Click & Active

This is the appearance of the button when it is clicked or touched. It can be triggered when the mouse is pressed (like an action button), or after it has been released (like a favourite button).


This is the appearance of the control when the user cannot interact with it because of a condition that prevents its function. The control is typically greyed out in this state.


This is the appearance of the control when it has been selected and is receiving the keyboard typing focus.


This is the appearance of the control when the system has detected an error with the input. The colours of this state are usually redish.

More information

Here are links to sites that may be useful for the completion of this project.

More information about micro-interactions << Read this, really.

Article about use of animations in UI/UX design

Watch this video about micro-interactions

Read this article which is related to the video, and written by the same person: Alita Joyce.

You should also read this article.