Reusable solutions for commonly occurring problems in user interface and user experience design.

learn more… | top users | synonyms (1)

6
votes
7answers
2k views

Favourite site with examples of well-designed web ui elements [closed]

Please list your favourite site for finding examples of well designed web elements, one per answer so they can be upvoted individually. Explain why it is good in the answer
6
votes
3answers
594 views

is there a name for the itunes selection design pattern [duplicate]

Possible Duplicate: UI: name of multiple column interface? you know: with multiple select boxes arranged horizontally, with selection filtering from left to right....
6
votes
1answer
224 views

Clicking twice to edit filename - what are the reasons for this pattern?

Like we all know, one can edit a file or folder name in Windows Explorer by either right clicking and choosing "Rename" from the context menu OR by highlighting the file by left-clicking, and clicking ...
6
votes
4answers
271 views

How many interface designs are necessary beyond the initial mockup phase?

Every time we start a new software project at my company, we will go to great lengths figuring out the best and most user friendly interface possible. We often have many reasons for the decisions we ...
6
votes
2answers
637 views

Any good design patterns for managing columns in data-intensive/spreadsheet views?

I'm trying to move away from the "build a list" pattern we currently employ to manage what columns are shown. The disconnect and lack of "directness" between the table itself and this dialog is ...
6
votes
3answers
2k views

Design patterns for Search

I know this may sound very generic question, but I am forced to post this to understand different patterns of search. I am working on a content oriented site which contains various types ...
6
votes
1answer
650 views

What's the standard interaction pattern for bulk edit / delete actions on windows phones?

I'm looking for the standard pattern for windows phone for bulk actions like delete, archive or move. I mean, for example: How is the user supposed to delete multiple items at once. I couldn't find ...
6
votes
4answers
3k views

Redesigning a My Account Page, What kind of navigation is best?

I have had this low priority pet project to redesign the My Account page on our site, http://www.yousendit.com, and since this has been on the back-burner for so long, I cannot determine the right ...
6
votes
4answers
3k views

Best Web UI for Large Amounts of Data Input

I'm looking for a good solution when users need to enter large amounts of data into a web application. Example A store owner wants to enter 30-40 new products into the system every month. The ...
6
votes
5answers
360 views

Does a log in/sign up field always have to be top right?

Best practice says that log in/sign up fields should always be top right of the website, no arguments there. There seems to be a trend towards simply having "Sign up here. Or log in if you already ...
6
votes
1answer
1k views

Should we use ‘narrow and deep’ or ‘broad and shallow’ navigation pattern on mobile devices?

If we have a large content environment on a mobile device, we need some way to access that content with ease. One could implement a narrow and deep navigation pattern which gives the possibility for ...
6
votes
2answers
862 views

Industry standard for documenting IxD / UI Design Patterns?

What's the industry-standard way to document a design pattern? I have seen websites like ui-patterns.com and patternry.com that host and share design patterns, but when creating an reusing a design ...
6
votes
4answers
1k views

Design pattern for merging duplicate contacts?

Have you seen any good examples of applications (web or desktop) that make it easy for a user to identify and merge duplicate contacts or other records? We need our users to manually approve the merge ...
6
votes
5answers
259 views

Is there a pattern for cycling or toggling through time periods?

I'm looking for a pattern for toggling between different periods of time. Currently I've prototyped an example which is a single button that, when tapped, will cycle through 3 time periods: by month, ...
6
votes
1answer
972 views

Anyone know of a good pattern library for game UI design? [closed]

I'm a big fan of the Yahoo! Design pattern library. I'm surprised there isn't one for game UI - or at least I don't know of one. Does anyone? Looking for patterns for leaderboards, etc.
6
votes
2answers
150 views

Should all browsers share the same experience?

I'm creating a page that uses history.pushState() which is only supported by html5 browsers. As such, should users of older browsers have a different experience? Here are two options that I can think ...
5
votes
5answers
313 views

What's the name of the design technique where you make something clearer by using contrast?

For instance, choosing a background color that makes all text stand out better, or giving all hyperlinks a background color the opposite of the color of the actual hyperlinks. An example of this is my ...
5
votes
5answers
2k views

Is it a bad idea to put the logo in the top-right corner and the navigation in the top-left?

Firstly I would like to say that I don't think there is a concrete rule about where the logo on a website should be – but intuitively I think it should be in the top left at least for continuities ...
5
votes
6answers
204 views

How do you handle prohibition inside a “free form” interface?

I come to you with a dilemma that I think is most closely identified with 'user experience.' I'm wireframing a web application, yet this "free form" user area has posed a few interesting challenges. ...
5
votes
4answers
309 views

Should clicking a drop-down menu in a native app a second time close it?

Why do some UIs use drop-down menus that can be closed with a second click, while others do not? It really annoys me when I have to click outside of the menu in order to close it and I accidentally ...
5
votes
3answers
10k views

Speech Bubbles meaning

I am developing a toon story to illustrate my company's offerings. May be I'll use a landing page, or just create it on the home page. I have 3 actors in it, a cab driver, a bpo company owner and ...
5
votes
2answers
981 views

Responsive design Pattern for secondary navigation - is there a way not to swamp the user?

I am having trouble to find a good way to present the user some kind of secondary navigation on smaller screens. On Large screens, it looks something like this: (This one is taken from ...
5
votes
2answers
650 views

Displaying a large number of columns in a table

I have a Twitter Bootstrap based table with responsive CSS. Everything looks good but, when I try to put more columns than the size of the table supports, I have a line breaking. I tried to change ...
5
votes
4answers
222 views

How early should you funnel users in a registration process?

As part of a registration form I am building I need to, at some point, differentiate between whether the user is a 'student' or 'professor'. I've seen this handled in two different ways and was ...
5
votes
3answers
585 views

What is the UI pattern used for managing people in Google+ called?

I've tried to find more info on this particular UI pattern Google+ exposes, and I'm sure I've seen it before, but still, I haven't been able to find references to it. If you go to the Circles section ...
5
votes
8answers
772 views

Creating a shared pattern library

I work in a small but growing team of UX designers developing a suite of web applications. It's become obvious that we would benefit from a common pattern library, but are unsure how to get started or ...
5
votes
3answers
808 views

Any good examples of interactive map patterns? [closed]

The goal is to design a page that allows the user to easily find a dealer near his/her location. My initial idea was to map the geographical locations on a map of the country. The country map is ...
5
votes
2answers
7k views

A Better alternative to display Hierarchical Data than using TreeView

I am a ASP.net Developer and am looking out for other alternatives to Treeview control. Reason behind is shipping too much of viewstate information for each request. Functionality of treeview would be ...
5
votes
3answers
154 views

What are the advantages of existing real world patterns in Information Architecture

When explaining real data structures to users, companies often use a parallel to the real world to help explain it. An example is the newsstand on an iPhone. When is it a good idea to do something ...
5
votes
1answer
292 views

Chrome Options UI Pattern Name

I've been looking for a way to organize hierarchical data. I came across the UI in Chrome Options. I really like it and think will work well for what I need. Is there a name to this pattern? As you ...
5
votes
5answers
542 views

What are some examples or design patterns of an aggregating website with different types of content? [closed]

I'm designing a website that is meant to aggregate on it's homepage different types of contents such as: Blog posts from around the web User generated movies, presentations, documents, pictures etc. ...
5
votes
2answers
457 views

UI Metaphor or Examples of configuration preset selection

What is a good UI metaphor for selecting from a set of configuration options? The tool I'm designing for has nearly 200 (!) inputs that can be set depending on your particular application and needs. ...
5
votes
1answer
877 views

What nomenclature do you use for UI Elements

Having worked with multiple OSs, platforms and UI Kits I always run into the problem of how to consistently naming things be that larger structures with names like Widgets, Views, Forms, Controls or ...
5
votes
2answers
162 views

What is the name for a pattern featuring helper text in a semi-transparent overlay?

I am seeing an emerging design pattern in web apps that is used for helping new users get oriented to a page or application. It consists of showing a diagram with succinct helper-text over a ...
5
votes
3answers
726 views

Alternative sites devoted to UI micro features

Little Big Details is a microblog that shows screenshots of various user-interfaces, highlighting the the "little" things that make a "big" difference. For example, the latest entry highlights a ...
5
votes
2answers
306 views

Best practice for in-page search algorithms (not SEO for Google or the like)

my team and I are working on a football hub website and we would like to make the in-page search engine as powerful as possible as many uses would like to use search. Q: Are there any best practice ...
5
votes
1answer
313 views

Drag and Drop: Better to avoid drag-n-drop to offscreen elements?

I have a particular web interface in which drag-and-drop may be useful, however, the problem that I see is that the list of items to be dragged could potentially be very long (below the fold). Is it ...
5
votes
1answer
1k views

Examples of Master/Detail UI for “Social-Style” data [closed]

I'm looking for examples of interfaces that allow users to explore complex, interconnected systems on a variety of levels, from high-level patterns to low-level details. In the mapping world, this ...
5
votes
2answers
3k views

Side navigation menus for Android tablets

The new trend of side navigation menus has taken over Android apps - Facebook, Evernote and now youtube and google+ are all doing the side navigation menu like here: Though it seems like this has ...
4
votes
5answers
2k views

Slide out teasers near the bottom of the page?

On more and more sites now I'm seeing what I'm calling "slide out teasers" appearing at the bottom of pages. What happens is I'm scrolling down the page and nearing the bottom, and then a small box ...
4
votes
5answers
609 views

Encourage users to tap the “review” button

How to layout an Info screen, so as many as possible are tempted to tap the "review" button? I wish users would tap the "review" button and write a long positive review on the app store where they ...
4
votes
6answers
541 views

How should a breadcrumb behave?

What is the expected action when a breadcrumb is clicked? I have a hierarchy of data that includes meta descriptors such as: PersonName / Assets / House I have a page for a list of Assets, a home ...
4
votes
5answers
312 views

Best way to represent distance in a clear way?

I'm building a job board and the user can search for jobs around its hometown. It can adjust the radius using a slider. Example: 1) User enters "Brussels" in the input box. 2) User changes the ...
4
votes
3answers
176 views

Completing a process in linear steps - what should happen if a user changes one of the previously entered steps?

I'm working on a tool made for professionals to calculate advice for their customers. The user is following predefined steps. The steps are represented as tabs (with arrows) in the interface. The ...
4
votes
2answers
3k views

What is the difference between a 'slider', a 'gallery' and a 'carousel'?

From a pattern perspective is there a difference? Or are they really different names for the same thing?
4
votes
1answer
267 views

what's the design pattern for the sidebar navigation used by Amazon, NewEgg and LightInTheBox?

See the below navigation examples currently used by Amazon, LightInTheBox and NewEgg. What's the pattern called? The content containing the subcategories would slide out when the mouse is hovering ...
4
votes
2answers
132 views

Forgiveness Enabled Dialog Pattern?

I'm working in some workflows, and we've caught a number of possible exceptions (before actually implementing) that might allow the user to correct their actions. We're debating between just sending ...
4
votes
3answers
127 views

When should feedback be in-page and when should feedback be a separate screen?

I've seen feedback/confirmation on a separate screen for example when the user has submitted a form. Then the next screen they see: "congratulations you have successfully..." Then on other occasions ...
4
votes
2answers
3k views

CRUD Desktop Best Practice

I always use this design for CRUD Desktop Form: Is it a good design for a CRUD Form? Do you have any suggestions for a better crud desktop form?
4
votes
2answers
1k views

What are the differences between Progressive Enhancement and Graceful Degradation?

What is Progressive Enhancement? I'm not able to understand this concept. How it works, and how it’s a model different/better(?) than Graceful Degradation?