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

learn more… | top users | synonyms (1)

5
votes
3answers
13k views

Comparison between Bootstrap and Material Design frameworks [closed]

The Bootstrap family of design frameworks has been the main driving force behind a lot of front-end web development projects. The Google Materials Design concept has also been floating around for a ...
5
votes
4answers
438 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
1answer
627 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 ...
5
votes
2answers
3k 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
2k 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
2answers
4k 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?
5
votes
2answers
177 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 ...
5
votes
4answers
324 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
724 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
2answers
288 views

What do you call a point-by-point (like Slack's) registration ui?

Slack has an effective registration that prompts the user for each data point on a different view. I've found the pattern is very nice in terms of reducing the user's cognitive load. I'm curious if ...
5
votes
3answers
377 views

Tables with a lot of rows - where should the delete option be?

Question regarding how to handle large tables with many rows: Where should the delete option be? I see many examples placing the delete icon or text on the far-right of the row. Is this best ...
5
votes
3answers
323 views

What's the name of this type of navigation?

I want to know whats the name of the navigation of these sites bellow: http://www.visitsuffolk.com http://www.ehow.com.br http://www.blogdoplaneta.com I searched for 'responsive grid', but its ...
5
votes
3answers
1k 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
3answers
201 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
311 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
3answers
265 views

What are conventions for keyboard shortcuts in Windows and OSX?

Keyboard shortcuts in Windows appear to follow some sort of convention based on the modifier key, but I can't figure out precisely what it is. Here is my current best guess: Ctrl-* often does a ...
5
votes
3answers
344 views

Is it better for website accessibility to have the menu before or after the content

I have seen two approaches to menu/content markup order in relation to accessibility for keyboard only users: Menu first then content with a skip to content link at the top Content first then menu ...
5
votes
2answers
311 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
1answer
242 views

Documented guidelines for one-handed mobile phone interfaces

I'm trying to come up with user interface ideas for a mobile app that can be entirely used with your thumb while holding the phone with one hand. While I've looked at Apple's guidelines it doesn't ...
5
votes
3answers
1k 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
391 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
87 views

Are there any established patterns or models for haptic feedback?

With the rise of smart watches and other haptic-enabled peripherals, it seems inevitable that there will need to be a set of established patterns that will be immediately (or with the smallest ...
5
votes
4answers
727 views

Examples of designs that keep a title or heading in view [closed]

I'm looking for examples of designs where there is special logic that prevents a title, heading, or landmark from being moved out of view, so that the user doesn't lose their context. Examples: ...
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
2answers
837 views

The Name of a Full-size Device-independent Start View with tagline only content and downward pointing arrow to access the site?

I don’t know if this is a new trend or just the fact that I’ve not come across this pattern before and it’s actually old, but I’m unable to find anything on it. The story is that you access the root ...
4
votes
5answers
725 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
686 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
417 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
208 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
3answers
115 views

Is there a better solution for picker control on iOS

I'm doing a form field on an app and need to included a drop down at the end of some of the text fields. For the android version I'll be using the material design standard as below. for iOS, they ...
4
votes
3answers
4k views

Are mega footers good UX? [duplicate]

I've noticed that several websites — especially universities and web development sites — have recently started placing mega-menus in their footers. Here are some examples of what I ...
4
votes
3answers
144 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
1k views

When designing (UX/IA) a property search system what are some important things to remember?

I'm designing the UX for a property search system. The platform is FSIS. I am basically looking for best practices in doing a Faceted Search while being able to incorporate many refiners based off the ...
4
votes
2answers
179 views

Evidence of Button-action and Link-action in the same scope?

When I started to know GUI in the early 1990s there were always the same type of control to perform an action of the same type, even though the action was different as in [OK] [Cancel] and [Yes] [No]. ...
4
votes
1answer
869 views

New design pattern for tagging documents?

Working on the design of platform for keeping annotations, I came up with a new way of tagging items, which I call 'Drag to tag': Drag the tag to the words that are typical for the webpage to add ...
4
votes
6answers
716 views

Good example of a Keyboard Shortcut Manager implementation [closed]

I am implementing a keyboard shortcut manager in which the user can assign shortcut keys to global (or contextual) commands in a Windows desktop application. Note that the application has load of ...
4
votes
3answers
300 views

Pattern for navigating by typing text in a text-field

I am working on an application which has a very dense UI with lots of menu items. Is there a UI Pattern for navigating to different screens by typing text in a text-field? The keyboard focus is on ...
4
votes
2answers
635 views

Best practice for displaying no of records on datagrid

I am designing a banking application where i have a record count of over 1000 rows. I wanted to understand the ideal design patterns for pagination and displaying rows on a data grid. I am ...
4
votes
5answers
778 views

Where do people get web design patterns/inspiration from?

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 ...
4
votes
3answers
489 views

Multiple instances of a Property Editor

I am designing an application in which several kind of user objects have properties. When clicking an object, the properties of the object would be shown in a pane similar to the Properties pane in ...
4
votes
6answers
201 views

What do you call this ux pattern for search fields?

What do you call this feature where a search query gets converted to "tags" that has been popularised by Pinterest (but could also be seen in Google Drive, Facebook, Apple Mail etc) and what ...
4
votes
1answer
639 views

Design patterns for hierarchical multiple selection

Given the hypothetical structure: Representing a group of items that can be classified as type A or B, and each subtype can be classified as type C or D, and within D can be classified type E or F. ...
4
votes
2answers
321 views

How can you show human element without showing pictures of people?

With a company that changes all the time, how can you show the personal touch of human interaction without showing pictures of humans? Essentially, blurring the line between technology and people, ...
4
votes
1answer
977 views

Patterns and models for representing Many-to-many relationships in interface design

I seem to spend a lot of time trying to figure out how to design User Interfaces for many-to-many database relationships. There are lots of resources available to assist with the data-modelling ...
4
votes
2answers
291 views

Is there a particular reason contextual content areas and menus aren't more prevalent in web applications?

The idea would be that if you had a menu: Feed | Settings | Logout And for example, the user is on the Shared Documents page, and clicks Settings: Feed | *Settings | Logout *Shared --> ...
4
votes
1answer
51 views

Need a pattern to capture multiple data sizes

Something I am struggling with: a UI for Network QoS Changes. The situation: There is a fixed maximum limit. The sum of the sub-values must not exceed this limit. Sub-values are captured as integers ...
4
votes
2answers
185 views

Why Google and Facebook use one text field by page for account creation?

I would like to know if there is some reason to have the account creation tunnel that way. Is it only because user focus more on an action by page?
4
votes
2answers
454 views

Can I use drag'n'drop interaction in a mobile website?

I'm currently designing a mobile website. My intention was to use interaction patterns like drag'n'drop for some interactive features. E.g. I want to ask users to sort 5 items by personal relevance ...
4
votes
1answer
438 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 ...
4
votes
2answers
523 views

What is a good UI metaphor for switching roles user plays in the application?

I am building a conference/tradeshow application where a user can assume multiple roles within the application and within a particular conference. For example a user can be an attendee, and have ...