Create front-end style guides in minutes

Try for free See features

13 patterns found for tag actions


Drag and drop idiom allows the user to move items from one place to another within a browser page directly without the need of moving into a separate mode to do this. Drag and Drop Modules allows ...

Created: Janne Lammi, July 8, 2010

Drag and Drop Modules

Progress bar tells the user the application is busy doing something and she needs wait. It should be used especially when the action in progress takes more than few seconds to complete to keep the...

Created: Janne Lammi, March 25, 2012

Progress Bar


Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Created: Janne Lammi, Sept. 26, 2010

Inline Edit


Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible. Primary actions are actions such as “...

Created: Janne Lammi, Sept. 12, 2010

Primary & Secondary Actions


Hover-Reveal Tools allows user to interact directly with the content. Hover-Reveal Tools are contextual tools that are shown when the user hovers over an element that has tools available. Hiding t...

Created: Janne Lammi, July 8, 2010

Hover-Reveal Tools


Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was add...

Created: Janne Lammi, July 8, 2010

Spotlight Effect


People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get thei...

Created: Janne Lammi, July 8, 2010



Contextual Tools, like Always-Visible Tools, allow user to interact directly with the content. Like the name says, Always-Visible Tools are always visible instead of hiding them until the user nee...

Created: Janne Lammi, July 8, 2010

Always-Visible Tools


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 &#...

Created: Janne Lammi, July 5, 2010

Hover Invitation


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

Created: Janne Lammi, July 5, 2010



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

Created: Janne Lammi, July 5, 2010

Tag an Object


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

Created: Janne Lammi, June 14, 2010

Inline Expand


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

Created: Janne Lammi, June 14, 2010

Inline Input Adder