Questions tagged [design-patterns]

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

Filter by
Sorted by
Tagged with
74
votes
2answers
35k views

What is the significance of the three dots “…” on menus and buttons and how to use them right?

Adding three dots after the title of items in a dropdown menu seems to be a common practice (as you can see on the picture of a drop down menu in Google Chrome). They generaly mean that there is "...
21
votes
6answers
8k views

The notification tray at the top of Stack Exchange sites: what is it called? And are there other good examples of this?

I'm trying to clean up notifications for a client site and was wondering if the notification pattern that Stack Exchange employs has a name that I can use to search for more examples.
30
votes
5answers
3k views

Should Android and iPhone UI be different?

I'm not completely new to developing apps, but I'm at a point where I'm trying to develop something and deploy it on several mobile platforms. To only concentrate on two major ones, suppose I'm ...
40
votes
8answers
26k views

Should hyperlinks be blue?

I've built a site where all hyperlinks have the default colors: blue for links, purple for visited links. They turn red on hover. I believe that always using blue for hyperlinks is a good thing, so ...
32
votes
7answers
4k views

Why does the golden ratio work? Or does it?

This is just one example of an article promoting use of the golden ratio in design. Over the past few years I've seen quite a few similar articles, but none of them really seem to go into depth beyond ...
57
votes
8answers
25k views

Best UI pattern for letting a user assign items to groups

Problem: the user has a list of about 5-20 uncategorised items and needs to categorize them into 2-4 groups. The tricky part is that the same item can be placed into more than one group (this is an ...
19
votes
3answers
21k views

Design patterns or strategies for complex or large table data in Mobile phones

I want to display a table with 4/5 columns and possibly 100 rows (as in desktop app right now) in smartphones. The table cells are also editable. Now we want to port this desktop app to smartphones (...
34
votes
10answers
12k views

What is a good way to display infinite nested comments?

Is there a way to do infinite nested comment threads in a way that doesn't look horrible? I realize that one could simply restrict the levels of nesting, but perhaps there's a better way of indicating ...
50
votes
7answers
11k views

When should you use a modal dialog box?

There seems to be an increasing use of modal dialog boxes on the web, but when should you use them? Why would you choose to use them instead of inline controls or another page, and when should you ...
33
votes
7answers
12k views

Autosave UI pattern

I'm developing a web app that puts great focus on simplicity and "just-use" mentality. The basic idea is to write notes. When planning the concept, we where very positive towards the idea of ...
6
votes
5answers
871 views

Where do people get web design patterns/inspiration from? [closed]

I like to think I come up with original concepts as and when I can but I do find it really gives me a kick start when I can see examples of what other people have been doing to inspire my own design ...
12
votes
2answers
2k views

How do I make a table row on a web page look draggable?

I have a table on a web page where I need to let the user reorder the rows. I was thinking of letting the user drag the rows to reorder them. But how would I let the user know that he could do that? ...
20
votes
7answers
8k views

How can I convince others that text over background images is a bad idea?

I'm being pressured to build a feature that would make it easy for users to create web pages that feature large text over large images. Like this: I am of the strong opinion that this design pattern ...
16
votes
8answers
3k views

Do you know any comparative resources like mobile-patterns.com [closed]

Mari Sheibley is the lead designer of foursquare and has created this awesome site comparing mobile UI patterns - for example showing how a feed page looks in different applications, etc. I've found ...
43
votes
6answers
6k views

When is endless paging appropriate?

When is it appropriate to use endless paging in a web application (e.g. auto load or a "see more" link)? Examples Google Reader Facebook This also creates a few issues for the user: Returning to ...
24
votes
4answers
51k 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?
9
votes
4answers
4k views

Good solutions for boolean filter with sub conditions

I'm looking for a good and a clearly represented solution for a boolean filter with sub conditions (max. 5 Levels). Best, a variant with tables. Many apps use the typical mac osx filter (see ...
21
votes
7answers
5k views

How to define/classify messages and notifications in web applications

I have seen content from various style guides and UX guidelines about this, and was wondering if there is a much more simple system to create a consistent and easy to implement design for various ...
11
votes
6answers
7k views

Is there a name for this instant filter search pattern?

I've been trying to find a jQuery plugin which creates behavior similar to that of Stack Exchange user searches. The user search used on Stack Exchange sites is not an auto complete, but is more akin ...
8
votes
3answers
2k views

Layout for adding one or more contacts to a record

The context: The user is creating a client record. Against each record their could be one or more contacts (people) provided. Often this will be adding 1 or 2 but could sometimes be up to 5-10. The ...
2
votes
2answers
692 views

What's the best design pattern for splitting things in parts?

I want to design the following interaction: user buys 1 ton of sugar and 100 apples, and wants it to be shipped to him in 3 different packs: Pack 1: 200 kg of sugar and 50 apples Pack 2: 100 kg of ...
17
votes
3answers
4k views

What do you call websites that make heavy use of vertical scrolling?

This question is similar to Why did scrolling vertically became a pattern? I see a lot of modern websites moving to larger, singular pages with more content and more vertical scrolling. This is often ...
6
votes
2answers
347 views

Why do messaging apps color the user's messages brighter than the people they message?

You would think that the messages you receive are the primary focus of a messaging app, since you spend most of your time reading them. However, many big messaging clients like iMessage and Facebook ...
6
votes
2answers
3k 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 ...
10
votes
4answers
2k views

When is it appropriate to split functionality into separate apps?

I'm a designer and my company has a single app that serves two different types of user. One group is the general public, who uses the app to navigate big events (e.g. annual user group meeting ...
8
votes
3answers
3k 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 ...
5
votes
1answer
582 views

Alternative to a columns of checkboxes in a table

Here's the scenario: A Person has a bunch of Accounts. Accounts may (or may not) have Services attached to it depending on the type of Account. Currently there are two types of Service (indicated by ...
3
votes
3answers
1k views

UI: name of multiple column interface?

Is there a "proper" name for the UI wherein it has multiple columns, and as you interact with the first column, the second column gets populated with with appropriate data? These columns act as a ...
1
vote
2answers
782 views

Do users understand this hybrid checkbox/radio control? [duplicate]

I'm wondering about the perennial problem that arises when presenting multiple options, where the user can select none, one, or several options. Using checkboxes, it's not clear whether a user ...
72
votes
12answers
11k views

Fibonacci pagination

Today I stumbled upon this pagination concept and I found it fascinating: Fibonacci-based Pagination Concept. It's actually an old shot but it made me think as I'll need to paginate some content in ...
47
votes
6answers
6k views

With infinite scrolling, do scrollbars still make sense?

I noticed this today on Google Plus: Virtual Scrollbar in a Google+ Gallery This is a virtual scrollbar, as opposed to native scrollbars everyone on Windows or pre-Lion OS X does know. Now this ...
46
votes
10answers
34k views

Alternatives to checkboxes and radio buttons in web-based surveys?

I've been tasked with designing a simple questionnaire design with a lot of different types of questions. I've been taking a lot of web-based surveys myself as well as testing some with users. The ...
35
votes
4answers
9k views

What objective qualities make a user interface intuitive?

How is intuitive defined in terms of UI? Are there any studies about what objective and measurable qualities make a user interface intuitive? What design principles, patterns, or approaches are most ...
32
votes
4answers
3k views

Design Patterns for Discoverability

What are some tried and true design patterns for discoverability in UI/UX, where information or a feature isn't necessarily overt at first glance, but is discoverable by using the interface through ...
21
votes
8answers
2k views

What are the best IxD/UI Pattern libraries? [closed]

Quite a few question as about design patterns for x or y interface. Where are the best design pattern libraries?
67
votes
7answers
8k views

Why should text be non-selectable?

I've seen some websites that make their text unselectable. And I believe that this can break up user experience, as "selectable text" is a well established ui pattern on web and computer in general. ...
16
votes
3answers
10k views

Design pattern or best practices for top notification bars?

The top notification bar on SE pops up to show messages like 'badge x earned'. What are the best practices for this type of UI? Specific details: On showing - Displace content downward (like on SE) ...
8
votes
2answers
3k 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 ...
20
votes
5answers
4k views

Guidelines for autocomplete widgets

What guidelines exist when working with autocomplete widgets? I'm hoping for general guidelines that apply across different application types: web, desktop, and mobile. A response to a Search as you ...
43
votes
11answers
7k views

Which way do arrows point on a tabbed web page?

Which way are arrows supposed to point on a tabbed web page? Towards the selection or towards the body of the selection? An awkward scenario seems to arise when a user selects another item and the ...
30
votes
9answers
5k views

Why did scrolling vertically became a pattern?

Why do most of today's websites, especially news and blogs, use mostly vertical scrolling? Also why has it become a pattern, that the more you scroll down you find older material, rather than ...
11
votes
5answers
2k views

Tabs design pattern, solving for “N” tabs

I've seen many design patterns that help solve different content presentation issues by leveraging "tabs". Assuming I do want to display grouped content on a page (complex content or simple) and ...
9
votes
7answers
743 views

Is there any resource for UI examples? [closed]

I run a Usability/UX blog, and my biggest hurdle right now is finding examples to illustrate the topics I write about (bad error messages, good implementation of tabs, bad interactions...etc) So is ...
31
votes
10answers
5k views

Show not implemented functionalities to tease the user

I'm working in a startup and we're building a web based application. Not all our features have been implemented yet but we want a way to tell the user that they'll be there one day. Our current ...
21
votes
5answers
4k views

What should be the difference between enabled and disabled buttons? (especially if they are grey)

What is the best way to show that a button is Enabled or Disabled? (especially if it has grey color) For example what do you feel about the following button? Is it enabled or disabled? How could it ...
17
votes
6answers
9k views

How to represent optional fields?

I've read somewhere, that if you have more required fields than optional, best practice is to mark the optional form fields. However I think that asterisk notation for required fields is a widely ...
16
votes
4answers
3k views

Labels above the field or to the side of the field? What about prompt text and validation messages?

Which layout works best for your users?: Field labels on the side of fields Field labels above the data entry fields What about prompt text, format tips, examples and validation or error messages? ...
21
votes
2answers
2k views

Do progress bars help completion rates?

I'm expanding on a question I posed in comments on How do you indicate progress to users in a multi-step form?. Roland made the comment "because everybody wants to reach 100% percent" when discussing ...
7
votes
4answers
5k 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 store ...
6
votes
8answers
1k 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 ...