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
72 votesAdminjannel (Admin, Patternry) responded
The name is a bit misleading. How about “Fat flyout navigation menu” instead? ;)
-
46 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
-
35 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/27 votes -
20 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
17 votes -
Scrollable timeline with tooltips
I have prepared a working example here:
http://www.futekov.com/alexander/#timeline13 votes -
12 votesplanned ·
I 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/
-
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
11 votes -
10 votes
-
Matrix
Show items in matrix view. This gives visibility to all item attributes and allows easy comparison between items.
10 votes -
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 -
7 votes
We 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/
-
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.
-
List Building Groups
Using 2 lists and 2 grids create or build from one list to another. For example here are all my available options in list one. And here are the ones I choose to create. A user would add/remove from List 1 to create the wanted items in list 2
4 votesThanks for your suggestion. Is this what you mean: http://osdpl.fluidproject.org/designPatterns/List-Builder
