Hugo’s Pattern Library Tutorials

On this site, you will find the theory component as well as links to the tutorials for the second project. You really need to read this theory page in order to understand the language of the tutorial pages. Also, mastering the concepts and fundamentals will help you complete this mandate (and hopefully get a better mark. 😉 ).

You should also read this page before you start putting together your mood board. 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 patterns for a library of UI controls providing user feedback through state transitions triggered through micro-interactions.

The highlighted keywords 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.

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. (You’ve used such a pattern in the DB class: remember db_connect.php.) You need this often in web apps, so you create a solution that you can reuse in many apps. An other 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.

Library

A library is a collection. In this case 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.

The mandate of this project is to put together a small library.

Control

This is an important word for you to know, but it is less 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.

It sounds like a control is similar to a pattern. 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.

Feedback

This constitutes the fundamental purpose of this project’s mandate. We design interface patterns and components 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.* 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.

I explain the states I ask you to create in this project in a section below. Keep on reading.

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.

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.

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

Pattern Library Examples

So you will design a pattern library. You have probably never done something like this. So I thought I would show you some examples, and discuss them a bit.

In order to focus our attention on the two examples I link below, I will discuss a single pattern from both libraries: the button. A button pattern is a reusable control that allows the user to make decisions about what the app should do next. The buttons in the two libraries have different visual qualities, but they are recognizable as buttons and fit within the visual language of their own library. This is what you need to do.

Another thing to notice in the two examples is that each present several different buttons. There are different types of buttons, that achieve different things. There are hierarchies of buttons: generic, more important, critical. And there are different states of buttons.

The last element I want you to notice when you look at the examples is how each button is presented as a working button. Try them: put your mouse over them, click them, etc. They react to your triggers. You need to present your library the same way. In their case, they even provide code samples. I don’t ask you to do this, but if you want, you certainly can too.

MailChimp

MailChimp’s Pattern Library

The first pattern library I want you to look at was created for MailChimp: an email marketing tool. This one is quite elaborate. My link brings you to the buttons section, but notice that there are several other patterns in their library (left column). Look at how the buttons are presented. Look at the different included states. Look at the organization of the working examples and the other elements of the presentation.

Notice how this library has very few animated transitions. Yours should have transitions between states.

Feel free to look at the other components as well. Browse the library, it is comprehensive. Obviously, your library will not contain as many patterns, but it should give you a sense of how to present your patterns. You may even find some interesting/useful controls in the Form Elements section.

Natasha Hockey

Natasha Hockey’s Pattern Library

This second library was designed as an example by Natasha Hockey. (I do not know her.) It is not used for a site, as far as I know. The process of creating it and the context are extensively discussed in the following article which I strongly recommend you read. Hint: You may find a step by step tutorial on how to create a pattern library and its presentation in this article. She worked with a different set of patterns than what I ask of you, and her process is quite ellaborate, but she provides great insight. Read the article.

In this library, you will notice that the buttons (again I link directly to the buttons section) are presented in a slightly different way than the MailChimp example. The types of buttons are also different. But what is important is that you have buttons, and they are working as buttons in the presentation.

This library makes good use of transition animations.

This kind of presentation is exactly what I am asking you to do. If this was submitted by a student for this assignment, she would get a very good grade. You want a good grade, right? So do something like this.

Discussion Of States

Before I let you go to the more technical tutorials, I wanted to clarify what I mean by the names I give to each state in the table of patterns for you to provide in your library in the assignmen sheet. I’ve included screenshots from the two example libraries discussed above.

Stand

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.

Hover

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

Disabled

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.

Focus

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

Error

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.

Here’s a reminder of the patterns to create and their different states.

Sorry, this table is not responsive. It does not look good on mobile.

Category

Pattern

States

Buttons

Primary [OK]

stand, hover, click

Secondary [Cancel]

stand, hover, click, disabled

Action [Send]

stand, hover, click, disabled

Text field

Text input box with label

stand, focus, disabled, error

Icons

Settings/Options/Preferences

stand, hover, click

Profile/Account

stand, hover, click