Patterns
From Interaction-Patterns.org
Our awesome list of Interaction Patterns
| Name | Description | User Actions | System Action | Link |
|---|---|---|---|---|
| Auto Complete | User wants to enter information | enter, fill in sth. | 0 | http://www.welie.com/patterns/showPattern.php?patternID=autocomplete |
| Tag Cloud | Having it sorted alphabetically --> having two dimensions of information. Sorted according to popularity and alphabet. Sorting it by popularity --> only one dimension. Maybe a surplus in terms of aesthetic. It is a typical Web 2.0 phenomena --> dynamic. When to use? More decorative then actually useful? An interesting site using it too: http://chir.ag/phernalia/preztags. Crtics say that tag clouds are not useful, they are messy and don't bring any additional meaning to it. | sort, search, choose | display information | http://www.welie.com/patterns/showPattern.php?patternID=tag-cloud |
| Calendar | UC-Berkleiy, it's more about organizing information, compare, see time across time, let's say for events, even better would be to compare it with google's calendar or iCal, add it to iCal or a similar application. | enter, choose | 0 | http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=6 |
| Drag & Drop | Personalize a start page by changing the arrangement of widgets or any other moveable items ( e.g. iGoogle). | mark, choose, sort, add, edit, move, place, remove | 0 | http://developer.yahoo.com/ypatterns/pattern.php?pattern=dragdropmodules |
| Animate Transition | The designer needs to communicate that an object is changing its spatial relationship within the page. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=animate |
| Brighten Transition | The designer wants to make a previously dimmed object the point of focus, signal that it is now active or that it is now available. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=brighten |
| Collapse Transition | The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=collapse |
| Dim Transition | The designer needs to communicate that an object is of secondary importance, not available or currently inactive. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=dim |
| Expand Transition | Designer needs to show the detail of an object in its context or reveal a previously collapsed object. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=expand# |
| Fade In Transition | The designer needs to communicate that an object is being added to the page or application. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=fadein# |
| Fade Out Transition | The designer needs to communicate that an object is going away. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=fadeout# |
| Self Healing Transition | The designer wants to show that an object has been removed from a list of objects. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=selfhealing# |
| Slide Transition | The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=slide# |
| Spotlight | The designer needs to call attention to where a data value or content has changed within the interface. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=spotlight |
| Form Validation | The user needs help correcting information when filling out a web form. | enter, read | feedback | http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=38 |
| Table Filter | The same as table Sorter? The user wants to narrow down the search results shown in a table by specific columns. | filter, sort | 0 | http://www.welie.com/patterns/showPattern.php?patternID=column-filter |
| Details On Demand | Not elaborated. | 0 | save space | http://www.welie.com/patterns/showPattern.php?patternID=details-on-demand |
| List Builder | The users need to build up and manage a list of items. | enter, edit, sort, filter | 0 | http://www.welie.com/patterns/showPattern.php?patternID=list-builder |
| Overview by Detail | Picture, items to buy. | wants more information | display information | http://www.welie.com/patterns/showPattern.php?patternID=overview-detail |
| Alphanumeric Filter Links | The user needs the ability to look up information alphabetically within a large data set. | filter, sort, search, choose | save space | http://developer.yahoo.com/ypatterns/pattern.php?pattern=alphafilterlinks |
| Module Tabs | The user needs to browse through a series of tabs without refreshing the page. Welie.com had it under Dealing with Data. | filter, sort, navigate, select, choose | save space | http://developer.yahoo.com/ypatterns/pattern.php?pattern=moduletabs# |
| Accordion | Close to navigation tab but only one panel is allowed to be open at one time. | customize | save space | http://www.welie.com/patterns/showPattern.php?patternID=accordion |
| Retractable Menu --> See also Expand and Collapse Transition | Show and hide the menu if screen space is scarce/rare/needed, the menu stays on the page when activated. | navigate, select, choose | save space | http://www.welie.com/patterns/showPattern.php?patternID=retractable-menu |
| Navigation Tree | The user needs to find an item in the main navigation. Vertically stack sections and open up one at the time while collapsing the other sections. | navigate, select, choose | save space | http://www.welie.com/patterns/showPattern.php?patternID=tree |
| Cursor Invitation | Highly relevant for Drag & Drop. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=cursorinvitation# |
| Drop Invitation | Designer needs to indicate valid candidate drop sites during a drag and drop operation. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=dropinvitation# |
| Hover Invitation | Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=hoverinvitation# |
| Tool Tip Invitation | Designer needs to cue the user about what will happen if they click the mouse on the hovered object. | 0 | feedback | http://developer.yahoo.com/ypatterns/pattern.php?pattern=tooltipinvitation# |
| Calendar Picker | Dynamic | enter | 0 | http://developer.yahoo.com/ypatterns/pattern.php?pattern=calendar |
| Carousel | Dynamic, the user needs to browse through a set of items and possibly select one of them | search, find, browse, select | 0 | http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel# |
| Pulldown Button | The user needs to select an item out of a set of items. | select, choose | save space | http://www.welie.com/patterns/showPattern.php?patternID=pulldown-button |
| Slideshow | The user wants to view a series of images/photos. | browse, search, select, see, choose | 0 | http://www.welie.com/patterns/showPattern.php?patternID=slideshow |
| Inplace Editor | The user needs to easily and quickly edit a value on a page. Just click on the title of an image and edit it. No popup menu. | edit, enter, fill in, change value | 0 | http://ui-patterns.com/pattern/InplaceEditor |
| Live Preview | The user wants to check how changes in form fields effect and result as quickly as possible. | edit, change value | feedback, immediate feedback | http://ui-patterns.com/pattern/LivePreview |
| Continuous Scrolling | The user needs to view a subset of data that is not easily displayed on a single page. The problem with using pagination for browsing between subsets of data is that the user is pulled from the world of content to the world of navigation, as the user is required to click to the next page. The user is then no longer thinking about what they are reading, but about how to get more to read. This breaks the user’s train of thought and forces them to stop reading. Using pagination creates a natural pause that lets the user reevaluate if he or she wants to keep going on or leave the site, which they a lot of the time do.
It can be argued that Continuous Scrolling can be frustrating for the user, as there is no natural pause. The user will ask himself: When am I done reading? | read, navigate (on single page) | feedback | http://ui-patterns.com/pattern/ContinuousScrolling |
| Tagging | User wants to find information again (e. g. bookmarks or any other object). He tags the items according to his own mindset. | add, tag, choose, inform, edit, rate | 0 | http://www.flickr.com |
| Social Tagging | Collaborative Tagging: Each user tags sites. Such tags will be treated prior other meta data. | add, tag, choose, inform, distribute, contribute, rate, fill in | 0 | http://www.flickr.com |
| Auto Save | If there is that to be saved this function makes it possible that the system itself is saving once in a while or the moment new information is been added. Includes a Feeback: System telling the user "Saved". First Process --> then saved. | 0 | support, help, prevent errors, action | http://extjs.com/deploy/dev/examples/statusbar/statusbar-demo.html |
| GUI Popping In | On the main web site you have a little control field/GUI popping in e.g. a messanger. There is no need to load a new page or tab. Facebook uses that pattern for the chatting function. | 0 | immediate display of information, save time | http://www.facebook.com --> messenger. New feature. It allows you to chat with those friends who are online too |
| Slider | Sliders support keyboard adjustments, configurable snapping, axis clicking and animation. There're different variations of sliders. Tread them individually as own sliders? | edit, enter, choose, filter, sort, fill in, adjust | 0 | http://immo.search.ch |
| Column Switcher | Switch on and off a column, used in page grids. Found under a navigation menu. | navigate | save space | http://extjs.com/deploy/dev/examples/dd/dragdropzones.html |
| Quick Tip, Tool Tip? | Mouse over a clickable item and a little box appears to tell you what you can do with it. There is one that will appear after a few seconds. Another one you need to click on the x in order to close it. Mouse track --> as long as you are within the field of the button the help box is on. | 0 | immediate display of information, save time, save click, feedback | http://extjs.com/deploy/dev/examples/simple-widgets/qtips.html |
| Status Bar | A bar indicating how long it's going to take to load a particular set of data. Different variations possible. Indicates that data is being retrieved/loaded. | 0 | feedback | http://extjs.com/deploy/dev/examples/statusbar/statusbar-demo.html |
| Panel | It opens by clicking on a little arrow. Some parallels to flying out menus - only that this isn't a menu. It can be simply text or any other kind of information one wants to open and hide. | adjust, customize view, data displayed | save space | http://extjs.com/deploy/dev/examples/panel/panels.html |
| Resizable | Various ways of how to resize an image/text/field. Pull at the edges and it changes it seize. At the bottom of the reference page (click on the url) there is even one that animtes the change of the seize. Have a look and find out on your own. | edit, customize | 0 | http://extjs.com/deploy/dev/examples/resizable/basic.html |
| Focus | On the page I got it from they call it Spotlight but I've found that a little irritating since all the Mac users think of the search function in Mac OS x. The working title for this pattern is Focus. It dimms those elements which aren't of interest and once you're done with one element it leads you to the next one. It reminds me a little of a Wizard. Could be used to show you in which order you need to click buttons to perform a particular task. | 0 | feedback, guides focus, action | http://extjs.com/deploy/dev/examples/core/spotlight.html |
| Mouse Marking | Like on the desktop: Draw a rectangular over a set of items and they will appear tot be marked. | add, choose, mark, select | 0 | http://extjs.com/deploy/dev/examples/view/data-view.html |
| Type Filter | Filter a set of data using a search field. Just type in the word you're looking for and those data will show up which includes the word. | filter, sort, search, find, choose, select, mark, fill in | 0 | http://extjs.com/deploy/dev/examples/view/chooser.html |
| Message From The Sky | Smoothly sliding in messages indicating what you've changed. Some sort of status feedback. The cool thing is that these messages kind of fly in from above and then dimm away after a while. It feels nice. Best is, if you check it for yourself. | 0 | feedback, immediate feedback, action | http://extjs.com/deploy/dev/examples/menu/menus.html |
| Tool Bar | A tool bar like in a word processor where you have a set of buttons collected to perform tasks like bolden font, underline the paragraph and so on. | edit, enter, mark, adjust | 0 | http://extjs.com/deploy/dev/examples/menu/menus.html |
| Auto Complete Combo Box | Combo box with the auto complete functionality. As you type the system suggests you words you might be looking for. | enter, search, find, filter, sort, fill in | feedback | http://extjs.com/deploy/dev/examples/form/combos.html |
| Red Flag | This tiny little icon is indicating information that has been changed by the user. A cool function. There is only one problem with it: This flag doesn't disappear when changing the data back to the default status. | 0 | feedback | http://extjs.com/deploy/dev/examples/grid/edit-grid.html |
| Search Combo Box | The search results will be presented in a popping down menu. | read, fill in | display information | http://extjs.com/deploy/dev/examples/form/forum-search.html |
| Tree | A structural tree of folders and files similar to the Explorer in Windows XP. | 0 | display information | http://extjs.com/deploy/dev/examples/layout-browser/layout-browser.html |
| Drag & Drop Tree | Rearrange the order of the items listed by dragging and dropping them. Even possible to have multiple trees to also drag and drop files from one tree to another one. | sort, filter, edit, enter, add | 0 | http://extjs.com/deploy/dev/examples/tree/reorder.html |
| Message Box | Informing message, advising, asking, typing | inform, give feedback, enter | feedback | http://extjs.com/deploy/dev/examples/message-box/msg-box.html |
| Tab - the Web 2.0 way | Window tabs | browse, search, navigate, select, choose, customize, view data | save space | http://extjs.com/deploy/dev/examples/tabs/tabs.html |
| Advanced Tab - the Web 2.0 way | Tabs you can close | browse, search, navigate, select, choose, customize, view data | save space | http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html |
| Roll-Over Comment Box, similar to tooltip? | Roll over a photo or any other item and a comment appears. Found on Flickr. | inform | immediate display of information, save time, save click, feedback | http://www.flickr.com |
| Dropdown Menu on Clicking | The dropdown menu only opens when you actually click on it and by simply hovering it. | inform, choose, select, mark | save space | http://www.flickr.com/photos/brennenbirch/1156189300/in/photostream |
| Photo Calendar | Browse photos according to dates, little thumbnail previews. | sort, filter, choose | 0 | http://www.flickr.com/explore/interesting/2008/06 |
| Drawing A Field | Google Calendar is using it: Draw a field to mark those hours/days to indicate the time you will be occupied. | mark, enter, choose, add, fill in | 0 | http://www.google.com/calendar |
| Web Keyboard | Use your keyboard to enter data. Command line interface. | browse, fill in, enter | immediate feedback | http://www.podipodi.com |
| Try out | Let the user try out the website. | inform | 0 | http://www.penzu.com/pad |
| Font Enlarger Web 2.0 Way | Use a slidebar to enlarge continuously the font of a website. | customize, customize view | 0 | 0 |
| Dropdown Control Panel | A dropdown panel that let's you manipulate and control other things. It's like loading a mini website into that dropdown menu. | 0 | save space | http://www.amazon.com/Brain-Rules-Principles-Surviving-Thriving/dp/0979777704/ref=pd_sim_b_2 |
| Middle Screen Feedback | Data is being loaded | 0 | feedback | http://immo.search.ch |
| Live Counter | A quantity of elements is being limited till the one particular element is found the user was looking for e. g. searching for a phone number. | 0 | immediate feedback | http://tel.search.ch |
