Create front-end style guides in minutes

Try for free See features

breadcrumbs

Breadcrumbs show where the page is located in the website hierarchy (Location breadcrumbs), or the attributes the user has chosen while refining the search (Attribute breadcrumbs). Breadcrumbs are...

Written by: Janne Lammi

Breadcrumbs

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

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

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

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

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

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

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

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

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

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

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

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