Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [design-patterns]

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

79
votes
14answers
18k views

How to make text look *not* clickable

Problem: I am currently building a textbook exchange website as pictured below. During beta testing users kept trying to click the three snippets of text under the logo ("6 books listed," "12 ...
72
votes
2answers
34k 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 "...
71
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 ...
70
votes
12answers
14k 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 ...
66
votes
5answers
10k views

Should “Deletion successful” confirmation be red, or green?

What color should a deletion confirmation message be? This is related to the question Should 'yes, delete it' be red, or green?, but different because this question asks about a passive confirmation ...
64
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. ...
56
votes
12answers
13k views

How to create better user account creation experience for customers who do not want to create an account

Trust and personal information security are very important issues these days when it comes to online accounts, so it is not unusual for people not wanting to create an account (i.e. provide personal ...
55
votes
8answers
24k 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 ...
47
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 ...
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 ...
45
votes
10answers
33k 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 ...
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 ...
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 ...
42
votes
6answers
5k views

Why is tree representation of data becoming unpopular?

I'm asking not about professional software like IDE's, but about OS GUI and web interfaces. A few years ago there was File manager in Windows, Gopher and other interfaces and data models like this. ...
41
votes
10answers
3k views

Have I missed anything from my list of web form best practices?

So I have been putting together a list of best practices to apply to forms recently and there is a lot of conflicting research out there. I have been combing everything from blogs through to HCI ...
38
votes
8answers
23k 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 ...
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 ...
35
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 ...
32
votes
7answers
11k 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 ...
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 ...
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 ...
31
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 ...
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 ...
30
votes
4answers
3k views

Why does Firefox remove the “close tab button” when you have more than n tabs open unless you focus on the tab?

The origin of this question is that I've tried to find a way to override the behaviour of Firefox which removes the close tab button of unfocused tabs as the number of tabs rises, with no luck. My ...
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 ...
28
votes
4answers
19k views

Best pattern for international address forms?

I've noticed an emerging pattern in web-based forms is to put the country field before city/state. This is contrary to how we would normally fill out an address on paper, but it allows us to have ...
26
votes
12answers
2k views

Is 'crazy' good?

I am in a group at University that is producing a mobile application targeted at Android. Our efforts are going to be on the mobile platform and making an application that 'stands out'. I have come ...
25
votes
6answers
1k views

Where to place icons in a checklist? Before or after?

I want to display a list of permissions, with tick icons to indicate what permissions a user has. Where should I place the tick icons - before (on the left) or after (on the right) each item?
24
votes
3answers
46k views

Comparison between Bootstrap and Material Design frameworks [closed]

The Bootstrap/Foundation family of design frameworks has been the main driving force behind a lot of responsive front-end web development projects. The Google Materials Design concept has also been ...
22
votes
5answers
132k views

Why is 1366x768 considered by some to be the standard widescreen for modern laptops?

I have a 13" MacBook Pro (mid-2012) but it is limited to 1280x800. The other resolutions available to me, when I go to system preferences, are 1152x720, 1024x768, 1024x640, and 800x600. Presumably, ...
22
votes
4answers
46k 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?
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 ...
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?
21
votes
5answers
2k views

Should a user be able to control the timezone when scheduling something?

I have a product where users can schedule content to post to social networks. The users may have their account set to their local timezone, while running a campaign which requires them to schedule ...
21
votes
5answers
7k 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.
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 ...
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 ...
20
votes
7answers
7k 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 ...
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 ...
19
votes
2answers
7k views

What is such a presentation of music cover art images called?

Can someone guide me what is the design pattern used in the below image? What is it called?
19
votes
3answers
20k 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 (...
18
votes
3answers
3k views

Why must a website footer always span the entire width of the page?

I am currently completing an online design course, and while watching one of the set course videos, the instructor advised: The [website] footer must always span the entire width of the screen. ...
18
votes
7answers
742 views

What is it about our mental models that app-centric seems more intuitive than content-centric?

I always thought that content-centric was the easiest for people to deal with, i.e. "I want to change this document", and not "Let's run this app so I can then change that document". It seems that ...
17
votes
6answers
8k 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 ...
17
votes
4answers
873 views

Designing for Perpetual Beginners

In About Face 3 Alan Cooper encourages to design for the intermediate user (instead of the beginner or expert). This is due to the fact that users start to pick up on cues and become adept due to ...
17
votes
8answers
7k views

Best practice for translating context menu options to touch devices?

I'm building a photo site that must allow users to manage thousands of photos via paged thumbnails on a big desktop. I also want to offer a touch interface that is both usable and delightful on the ...
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 ...
16
votes
7answers
3k views

Which UI design pattern is this? (progress bar at the top of an article)

On this page there is a progress bar at the top which progresses as you scroll down. I’m really intrigued by this UI pattern. Does anyone know its name or its origin?
16
votes
3answers
9k 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) ...
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 ...