Create front-end style guides in minutes

Try for free See features

autocomplete

Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Written by: Janne Lammi

Autocomplete

search-pagination

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Allow the user to navigate between pages using a pagination (paging) control. Fl...

Written by: Janne Lammi

Search Pagination

hover-invitation

Use hover invitation to clue the user in to interact with objects and still keeping the interface lightweight. Flickr uses hover invitation to let the user know he can edit image title directly &#...

Written by: Janne Lammi

Hover Invitation

tag-an-object

Tags are keywords that are used to make information (e.g. pictures, computer files, books) easier to find. Encourage users add their own tags to objects and let them manage existing tags to build...

Written by: Janne Lammi

Tag an Object

endless-scrolling

The most common way to handle large data sets on websites is to use Search Pagination pattern. Endless scrolling provides an alternative way to get to additional content. When the user scrolls dow...

Written by: Janne Lammi

Endless Scrolling

overlay

An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also...

Written by: Janne Lammi

Overlay

inline-input-adder

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user inte...

Written by: Janne Lammi

Inline Input Adder

information-dashboard

Information dashboard organizes and presents the most important information from large amounts of data in a way that it is easy to read and understand for the user. Dashboards summarize informatio...

Written by: Janne Lammi

Information Dashboard

one-page-wizard

Guide the user through a task with several steps by showing a clear path to completion. CampaignMonitor uses a static One Page Wizard for signing up. Sign up process is quite simple – the pr...

Written by: Janne Lammi

One Page Wizard

multiple-page-wizard

Present each major step in a task on a different page. Indicate clearly where the user is in the process, and how many steps there are left. Finnair uses Multiple Page Wizard to guide the user thr...

Written by: Janne Lammi

Multiple Page Wizard

good-defaults

Good defaults pattern is about helping users to answer questions on the form by providing good default values. This pattern saves the users work and reduces the possibility of input errors. Trave...

Written by: Janne Lammi

Good Defaults

inline-expand

Show only the most essential features/content up front, and hide the rest. Reveal secondary elements “inline” when requested by the user. Travelstart flight booking service BBC: Tools fo...

Written by: Janne Lammi

Inline Expand

radial-menu

Radial menu provides available actions in a context-sensitive, circular popup menu made of several pie slices. It gets activated when the user clicks on an item that can be manipulated. Songza pro...

Written by: Janne Lammi

Radial Menu

refining-search

Allow user to refine search results in real time using multiple filters in any order until the desired items are found. Kayak.com hotel search is a typical example of Refining Search pattern. Sea...

Written by: Janne Lammi

Refining Search

data-table

Show collection of items with multiple attributes in a data table to make the data easy to scan, analyze, and customize. In WordPress administration panel, blog posts are shown in a data table al...

Written by: Janne Lammi

Data Table