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

learn more… | top users | synonyms (1)

35
votes
6answers
2k 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 ...
34
votes
6answers
5k 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 ...
32
votes
6answers
3k 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. ...
30
votes
9answers
2k 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 ...
30
votes
1answer
5k 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 ...
29
votes
4answers
2k 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 ...
28
votes
7answers
3k 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 ...
27
votes
8answers
4k 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 ...
26
votes
4answers
1k 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 ...
25
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
5answers
2k 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 ...
25
votes
9answers
3k 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 ...
25
votes
2answers
3k 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 ...
25
votes
4answers
788 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?
25
votes
10answers
2k 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 ...
23
votes
10answers
12k 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 ...
22
votes
7answers
3k 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 ...
21
votes
2answers
1k 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
3answers
4k 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 ...
19
votes
8answers
1k 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?
18
votes
5answers
1k 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 ...
18
votes
6answers
3k 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 ...
17
votes
5answers
2k 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.
17
votes
3answers
2k 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 ...
15
votes
4answers
585 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 ...
14
votes
3answers
1k 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? ...
13
votes
4answers
299 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 ...
13
votes
8answers
2k 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 ...
13
votes
5answers
4k views

What is the navigation concept Bootstrap uses called?

The Bootstrap documentation site uses a very interesting navigation concept. They have a per-page navigation bar that sticks on top of the page once you scroll down and highlights the current area on ...
13
votes
5answers
655 views

How to define/classify messages and notifications

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 ...
12
votes
3answers
739 views

Why some websites put a small contrasting bar on top of the page?

I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it? Readability header: Tenderapp header:
12
votes
3answers
493 views

Defaulting to show all until user searches?

I am designing an admin page that will be used to manage account information for hundreds to thousands of medical offices (practices). Users will be able to take a few actions on a practice or take ...
12
votes
4answers
377 views

Best Practices For Marking New Content

In my web app I want to clearly tell a user what has happened while he was not there. At this time I just highlight new posts with yellow. But if there were many changes then the whole page is ...
12
votes
3answers
3k 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) ...
12
votes
2answers
1k 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 ...
12
votes
4answers
370 views

What is the best way to ask for a specific amount?

Consider the following simple scenario: User has 2,352 cookies in his account. Now, he is prompted with a message, "How many cookies would you like to eat?" Given he can enter any number from 1 to ...
12
votes
5answers
2k 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 ...
12
votes
4answers
421 views

What are some of the negative consequences of using dark patterns in design? [closed]

After reading up on dark patterns ( http://darkpatterns.org/ ) and radical persuasion design, I have a question. What examples are there of companies facing consequences (like litigation, lost ...
12
votes
4answers
2k views

What is the best way to visually present a sitemap?

Do you know which are the common patterns for a graphical representation of a sitemap?
11
votes
6answers
2k views

Should I stick to Google's Android UI Design Patterns or not?

Both the official Twitter application and Facebook application use a similar set of UI design patterns in their apps. These patterns were set out by google themselves in this blog post. The thing is ...
11
votes
1answer
947 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? ...
11
votes
2answers
2k views

Fixing UI Antipattern “multiple menu levels”

My brain seems to be pre-programmed to make administrative UI's look like the mockups below. In the mockups I have 3 levels of navigation, with on the form another set of buttons for the form ...
11
votes
5answers
1k views

Bylines at the top or bottom of an article? Or both?

Jakob Nielsen's latest Alertbox post recommends omitting bylines except in a few cases regarding credibility. We've considered dropping bylines from the top of news articles to the bottom of articles ...
11
votes
8answers
2k 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 ...
11
votes
1answer
509 views

Is there a name for the pattern of a categorized autocomplete?

Lately, I've noticed that Facebook search presents it's autocomplete options as a nice categorized list: However, I'm uncertain what to call this pattern. It reminds me a bit of what Peter Morville ...
11
votes
4answers
671 views

What UI designs are a good fit for the Kinect / PrimeSense DevKit?

Now that the manufacturer released the open source drivers, I'm interested in seeing what User Interfaces work well with this platform. Please share any links, source code, or commentary relevant to ...
10
votes
5answers
520 views

What is the correct meaning of “slider”?

I'm confused by the word "slider". It seems to be used interchangeably for two quite different types of UI control. An input allowing selecting of a point on a numeric scale, as in the jQuery UI ...
10
votes
7answers
2k views

“Clear input” button within a search box - why nobody but Apple uses it?

In my opinion, this button is very useful, giving you an ability to start over in just one click. But I can't seem to find non - Apple software that implements this pattern. Why? EDIT: I'm not ...
10
votes
2answers
290 views

Should primary click/tap action be listed in contextual menu as well?

Contextual menus are a nice way to extend the number of actions that can be performed directly on an item. However, the primary action is sometimes doubled there, usually listed as the first one. ...
10
votes
1answer
823 views

Case studies on using gradients in a design

Are there any case studies on the use of gradients in a web design? I'm looking for answers similar to this answer about the usability of rounded corners. Specifically, I'd like to know: Is there a ...