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
Adminjannel (Admin, Patternry) responded
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 ·
Adminjannel (Admin, Patternry) responded
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
Adminjannel (Admin, Patternry) responded
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 votesAdminjannel (Admin, Patternry) responded
This 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 votesAdminjannel (Admin, Patternry) responded
Do 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 votesAdminjannel (Admin, Patternry) responded
Thanks for your suggestion. Is this what you mean: http://osdpl.fluidproject.org/designPatterns/List-Builder