Questions tagged [design-patterns]
Reusable solutions for commonly occurring problems in user interface and user experience design.
107
questions
90
votes
3
answers
52k
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 generally mean that there is ...
- 1,154
25
votes
6
answers
10k
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.
- 403
32
votes
5
answers
4k
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 ...
- 421
45
votes
8
answers
40k
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 ...
- 573
64
votes
8
answers
35k
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 ...
- 2,052
33
votes
7
answers
5k
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 ...
- 10.4k
20
votes
3
answers
22k
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 (...
- 1,201
55
votes
7
answers
13k
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 ...
Philip Morton
39
votes
7
answers
18k
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 ...
- 491
12
votes
2
answers
3k
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? ...
- 507
12
votes
4
answers
1k
views
What is the name of this combined button/popupbutton?
This button is in the new Firefox, but what is the name of it?
- 921
6
votes
5
answers
895
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 ...
- 361
82
votes
12
answers
23k
views
Should read-only text appear as plain text or in a read-only textbox?
Should I use labels for read-only information, or should I use read-only text boxes to maintain the look of the fields?
It seems to me that if something is in a textbox it implies there is some way ...
- 1,657
51
votes
10
answers
42k
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 ...
45
votes
6
answers
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 ...
- 637
38
votes
11
answers
18k
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 ...
- 10.4k
30
votes
5
answers
78k
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?
- 471
22
votes
7
answers
6k
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 ...
- 27.1k
20
votes
7
answers
12k
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 ...
- 359
19
votes
3
answers
6k
views
Design pattern for sorting / ordering items in card view
In a table design pattern there is usually a 'primary' key value which all the other values can be sorted by, and it is easy to sort or order the rest of the attributes associated with the item.
...
- 27.1k
17
votes
3
answers
5k
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 ...
- 270
16
votes
8
answers
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 ...
- 7,762
12
votes
6
answers
11k
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 ...
- 552
11
votes
4
answers
4k
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 ...
- 161
10
votes
3
answers
3k
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 ...
- 4,320
9
votes
4
answers
5k
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 ...
- 1,521
9
votes
3
answers
4k
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 ...
- 101
8
votes
2
answers
720
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 ...
- 1,004
7
votes
3
answers
4k
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 ...
- 153
5
votes
1
answer
666
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 ...
- 51
3
votes
1
answer
1k
views
Internal Consistency vs. Consistency across the Industry
Does anyone have any recommendations on how to balance having styles/patterns/icons being consistent to a single website vs following recommended practices/patterns/icons that are popping up across ...
- 2,019
3
votes
3
answers
2k
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 ...
2
votes
2
answers
1k
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 ...
- 69
1
vote
2
answers
1k
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
...
- 7,416
74
votes
12
answers
12k
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 ...
- 927
71
votes
7
answers
10k
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.
...
- 1,962
51
votes
6
answers
8k
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 ...
- 7,449
44
votes
11
answers
8k
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 ...
- 1,585
38
votes
4
answers
10k
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 ...
- 10.4k
32
votes
4
answers
4k
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 ...
- 10.4k
31
votes
10
answers
6k
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 ...
- 499
30
votes
9
answers
6k
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 ...
- 4,449
21
votes
8
answers
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?
- 2,616
21
votes
5
answers
5k
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 ...
- 5,040
21
votes
2
answers
3k
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 ...
- 8,281
21
votes
5
answers
5k
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 ...
- 313
18
votes
6
answers
13k
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 ...
- 1,032
17
votes
4
answers
5k
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?
...
- 2,052
17
votes
3
answers
13k
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) ...
- 1,769
15
votes
5
answers
16k
views
Desktop software design patterns
There are a lot of resources on the web about web applications design patterns, but only a few about desktop applications.
And this is quite strange as most of the business targeted software is (...
- 898