Suggest New Design Patterns
Share your ideas for new design patterns with us
Did you spot a new UI design pattern? Suggest a new pattern here! We will do our best to add new patterns we have missed to our library.
-
Mega Drop-Down Navigation Menu
I got the idea for this pattern from Jakob Nielsen's Alertbox article. According to the article, "Mega drop-down navigation menus" work better than regular drop-downs.
Read the article here: http://www.useit.com/alertbox/mega-dropdown-menus.html
89 votesAdminjannel (Admin, Patternry) responded
The name is a bit misleading. How about “Fat flyout navigation menu” instead? ;)
-
50 votes
Thanks for you suggestion. I’ve thought of this, and think that file upload is more a UI component than a UI design pattern. Other opinions?
EDIT: Have a look at “Compehensive File Upload” in Fluid Open Source Design Pattern Library. http://osdpl.fluidproject.org/content/file-upload
-
40 votes
-
Grid View
Also known as: Grid-Based Layout, Page Grids
Use Grid view to display content.
Links:
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
http://developer.yahoo.com/ypatterns/pattern.php?pattern=grid
http://www.maxkiesler.com/index.php/weblog/comments/beyond_the_list_view_new_patterns_in_user_interface_design/29 votes -
Field Error Indicator
Indicate clearly errors on the form.
24 votes -
Inplace Modal
Modal(Lightbox/thickbox) displays are great to focus users' attention on to a particular task. There are some places where the user needs to be focussed on a particular portion of a web page without losing the context of the surrounding user interface elements. Inplace modal displays a overlay around the user interface element that needs focus.
Unfortunately, I don't have the application where I am using this idea published yet. But here is a demo of the concept with the jQuery script:
http://site.ringce.com/code/jQuery/jquery-inplace-modal.html
18 votes -
group/user/role/permission administration
An administration page for viewing groups, adding a group, viewing group members, adding users, adding users to the group, giving roles (or permissions) to those users
14 votes -
Scrollable timeline with tooltips
I have prepared a working example here:
http://www.futekov.com/alexander/#timeline13 votes -
periodic refresh
periodically refresh a page; update displayed data dynamically.
12 votesI hadn’t recognized this as a pattern before you suggested it, thanks. Now when I identified it I see this pattern in use all the time: Gmail, Twitter search, Google Docs etc. But, is this a UI design pattern, or AJAX/coding pattern instead? Or, is this a pattern at all, or rather just part of other patterns? Those are few things I need to consider before turning this idea into a pattern.
One more thing: I’m going to focus now more on patterns people need when they make early sketches of the UI, and this pattern is a bit out of the scope. But, after I have finished that theme, I’ll consider this pattern again.
Edit: Just found a good screencast example of periodic refresh on Flickr from Designing Web Interfaces: http://flickr.com/photos/designingwebinterfaces/3259238059/
-
11 votes
-
Matrix
Show items in matrix view. This gives visibility to all item attributes and allows easy comparison between items.
10 votes -
Search result filters
Patterns for filtering and reducing the results of a given search.
8 votesWe already have “Refining Search” pattern which should be close to what you described. Or did you mean something else or more patterns on the topic?
Have a look at: http://uipatternfactory.com/p=refining-search/
-
Assign multiple words from a taxonomy
Allow a user to assign a content element (e.g. an image) with a number of words from a hierarchical list.
8 votes -
Advanced Controls / RIA Controls
In addition to basic input controls, people would probably need a pattern describing more advanced controls.
8 votes -
Realtime notifications
Ajax same window notification of users actions.
7 votes -
select a global region or a country
graphical pattern for permitting user to select her region or country for purposes of localization/translated sites
6 votesThis is a very common design problem, but I think noone has patternized this yet. I’ll add it to my to do-list, thanks!
-
Pull to refresh on touch devices
On list-based apps on touch devices such as the iPhone, the user is able to "pull" down to refresh the page http://www.usabilitypost.com/2010/07/21/pull-down-to-refresh/ Used in the official Twitter app to retrieve new tweets
5 votes -
Header/Dropdown product navigation
This is an interesting solution for Header, but it also functions as a dropdown navigation
http://www.sram.com/sram/road/products/sram-red-front-derailleur5 votes -
tabbed carousel lists
Multiple small tabs across the top of a function list. tabs represent function groups, list items represent subfunctions. Conceptually similar to the windows menu line but with all sublist items fitting in the same list box space - transition between lists carousel fashion for pizazz!
4 votesDo you happen to know any Website that is using this pattern? I’d be interested to see an example how it works.
-
global search field gets bigger
The global site search field on some sites expand on entry. This keeps the search field small until needed, and visually unobtrusive, and makes it more welcoming for typing search criteria when needed.
See
* http://ux.stackexchange.com/
* http://apple.com/
* http://telstra.com/Also, the expanded search field might occlude alternative functions being disregarded by the user's choice to use global search -- see ux.stackexchange for example.
4 votes
- Don't see your idea?
