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

learn more… | top users | synonyms (1)

1
vote
1answer
857 views

Avatar vs Profile Picture vs Display Picture

I have noticed that on message boards, that we use the name avatar for the picture on our profiles. On Facebook and Twitter they are called profile pictures, and on Skype it is called Display Picture. ...
1
vote
2answers
909 views

“Compare products” functionality on a product listing

Are there any good practices when it comes to "Compare products" functionality on product listings? I would like to do some A/B testing with different ones, but to be honest I have not seen something ...
1
vote
1answer
1k views

Better way to display excessive data in table cell iOS

I am displaying data retrieved from server in UITableView. Each cell has to display more than 10 fields as shown in figure. Its looking very ugly if I just simply put up the fields in cell. I have ...
1
vote
3answers
335 views

Best-practices for context-sensitive reports download section

Imagine a web-application that lets student take tests, analyzes the results and presents them to school administrators. The dashboard shows various stats, score break downs for the school overall, ...
1
vote
4answers
104 views

Data tables - what's column should be first?

When creating a table with a lot of rows and a number of columns, what is the recommendation for which column should be first and most important? An example scenario for the data table would be a ...
1
vote
3answers
572 views

Best way to show one-to-many relationship in a grid?

This is probably the most common issue when it comes to grid/table design; How to display one-to-many relationship such not to repeat the item nested. Please take a look at two solutions I came up ...
1
vote
3answers
758 views

Which is the best mobile pattern to use for a form's select box?

I need to design a responsive website with many widgets and forms. I want to provide the best UX to mobile users also when they interact with forms, which is often a nightmare on mobile. You can ...
1
vote
2answers
418 views

Action buttons for mobile — ok to go full width?

Is it acceptable to use full width mobile action buttons, say in the footer, like in the 1st example? It's nice and simple but I'm afraid users might mistake it for a regular footer. The 2nd example ...
1
vote
2answers
233 views

Is there a design pattern for an informational pane?

What I'm picturing is a side panel that updates with region-specific information as I mouse over portions of the form. Is there a name for this pattern? It's like a Two-panel Selector, but not ...
1
vote
1answer
589 views

Are there fixed names for patterns being used by Facebook, Android Market(famous apps)

Is there a fixed name for pattern like Facebook's current sliding dashboard style pattern, or the swiping tabs in Android Market
1
vote
2answers
88 views

Can I use a control NOT specified by Material Design?

Material Design has a comprehensive set of components, but no design framework can reasonably hope to cover all widgets. Many of the UX StackExchange questions on Material Design on this site relate ...
1
vote
3answers
234 views

Adding an item to a pop up list

I have a form in which a user can select multiple tags via a pop-up window (multi-select with check boxes). The tags are maintained in admin/settings section. It is not a good experience if the user ...
1
vote
1answer
284 views

Best way to capture users facebook & twitter usernames?

When capturing a users details, where the goal is to record their twitter handle (@username) and Facebook URL (/username121) what would be the best way to do this? At first I thought using a simple ...
1
vote
1answer
354 views

Giving users a feel that graph can be zoomed and panned

I am trying to develop a graph which has both zooming and panning features. I am using flot chart library (which is irrelevant for this question). What I want to know is: What would be the best way to ...
1
vote
2answers
457 views

using subtle animations for page transitions in single page apps?

In so-called "single page applications" for the web, I am seeing a trend, especially in demo applications, where any navigation between sections of the application/site involves a css animation of a ...
1
vote
2answers
397 views

CMS Pattern Book

I am working on redesigning a CMS and I am looking for some more possible patterns. Does anyone know some good books or websites where they discuss CMS UI Patterns?
1
vote
1answer
113 views

What approaches to online commenting best promote high-value discussions and content?

Anyone who's read a news article online... ever... can see that old-style commenting ( ie: Enter your name, email address, and website (optional) ) is broken. StackOverflow's reputation model, and ...
1
vote
2answers
118 views

What is the name of this dial/spinner-like interface element?

I've tried googling both spinner and dial, but they turn up results that are not this. I need to implement this in a website, and would like to know the pattern for it -- it's just so much easier ...
1
vote
2answers
145 views

Link-heavy web GUI patterns

There is an enterprise system where all entities are interconnected. Let's say we have following entities for a example: Customer, Order, Product, Contact, Employee. The preferred GUI style is ...
1
vote
2answers
91 views

Action requires users leave and interact with another site, how to ensure they come back?

I have a scenario in which a user must copy code from a Site A, paste it into the source code of Site B, then return to Site A to confirm the action was successful. What's the best way to make ensure ...
1
vote
1answer
237 views

Term for a top menu that appears when scrolling up?

I am experiencing more and more pages using this style of top menu. When you scroll the page downwards, all is fine, but as soon as you need to scroll up for some reason (such as to read the ...
1
vote
2answers
103 views

What would you call that pattern for entering phone numbers?

how do you call this type of pattern where you first can select the type of a phone number, and then in the next field enter the phone number itself (the phone number being an example). This is well ...
1
vote
1answer
615 views

Password reset with lost email functionality

I have searched and viewed most of the other questions and answers about implementing forgot password functionality on a website. However, we have a unique situation. When a user registers an account ...
1
vote
2answers
471 views

New navigation pattern - Time.com

Recently I ran across Time.com's new navigation pattern. What do we call this? What do you think about it? What is the use case for it? My first impressions for the large screen are: the site is ...
1
vote
1answer
133 views

What is the best Menu pattern for large dataset?

I was searching on various UI components that is out there. new, old and more. I want to know, Are there any good website which lists and compares web UI components? I am specifically looking for ...
1
vote
2answers
214 views

Time Zones and Calendar Interfaces

I am a systems administrator that schedules when a call center will be open to take calls from hospitals. We have 3 elements: Systems Administrator (Ohio - ET) Call Center (Denver - MT) Hospital ...
1
vote
4answers
519 views

Best way to get feedback from users [duplicate]

Form fillings through survey or feedback form and even email responses is now getting boring and appears to be a waste of time for many users to click on or even answer. I even revert to "you must ...
1
vote
2answers
300 views

UX for encouraging naming of an auto-saved item

I’m working on a web application where users can generate results after answers questions in a workflow. Over time, they will use this workflow to generate additional, different results. Our goals ...
1
vote
1answer
181 views

How to represent asynchronous states?

I am working on an interface where there is a list of things (tests) that can be running, drafts or running and pending tests. In the latter options the same object represents two states (A - the ...
1
vote
2answers
159 views

name for top-of-page informational messages?

Many apps show informational messages to users in a pane at the top or bottom of the sceen. Often these are shown sliding down after an important operation completes like saving data or sending ...
1
vote
3answers
442 views

How to list items with variants in an iOS Table View?

I'm looking for an elegant way to show a list of items in a Table View, where most (not all) items will have 2 variants. If I lay the items out as is (with A and B represented by icons): ...
1
vote
1answer
106 views

What do you call a control that changes the relative sizes of two sections?

I want to implement a control to change the relative size of two sections within a single entity. This would use an east-west resize cursor, and as the user dragged it would make one block smaller ...
1
vote
3answers
792 views

What are good visual metaphors for exploring many-to-many relationships?

Right now I'm using two lists side by side where clicking on an item in list A filters list B to offer only the Bs related to the selected A, and Vice Versa. So clicking on B3 make A2 and A5 disappear ...
1
vote
1answer
720 views

Comments Design Patterns or Best Practices?

Are there any resources online that discuss best practices for comments/threaded discussion systems? I'm wondering if there has been any consensus on issues like comment edit windows, deleting ...
1
vote
2answers
2k views

Multiple edit table UI

I am wondering if you have seen a table design on web where multiple items could be edited at the same time. For example if I have a column with title group name and the first row is having value ...
1
vote
2answers
81 views

Should bulk-editing functions be hidden until a table row is selected, or is there a better solution?

As an example, MailChimp displays subscriber lists in a table/data grid. Notice that while the user can select one or more rows using the check box at the left of each row, he doesn’t know what ...
1
vote
1answer
54 views

What widget should I use to filter table rows based on checkboxes?

Suppose my table has a column on the far left that consists of only checkboxes used for selecting rows. The default design is that the header of that column would have a checkbox, which would be used ...
1
vote
1answer
66 views

Android design convention for saying a user needs to complete an action first?

I've read the Android design conventions, but can't see a good solution. I have a 3 tab mobile application. Tabs 2 and 3 need a selection made on screen 1 before they will work. The user enters at ...
1
vote
1answer
227 views

Is a wizard the best design pattern for this problem?

So my web app lets users charge monthly subscriptions for email newsletters. In my next update, I am completely retooling the user experience and need some advice. Users can create multiple plans for ...
1
vote
1answer
164 views

Dynamic picklist Vs. All options with active/inactive selections

In a tool that has filters that allow the User to drill down to the data that is most useful to them. Would it be better to dynamically populate a Delivery Time pick list with only the available ...
1
vote
4answers
242 views

How could a webpage containing multiple tables be displayed effectively?

I am designing a user management tool where users will be made up of several groups. Each group has its own table, but the table headings need to be sticky. Example of a table with a sticky header ...
1
vote
1answer
175 views

Advantages/disadvantages of a ring or stair design for long page websites

I'm currently planning for my personal website, which I plan to make as a long page website. (See this for an example of a long page website) As how I imagine my Experience section, it will ...
1
vote
1answer
120 views

What is a Design pattern for “Remember Me” that forces user to explicitly choose “remember” or "do not remember?

We have a very nontechnical user base. We provide a "Remember Me on this computer" option (checked by default) but perhaps it should not be checked by default. However, I want to make sure they have ...
1
vote
4answers
294 views

What are the Design Patterns to indicate something has been clicked?

There are different Design Patterns to indicate something was clicked depending on whether it's text (changing the link color) or an image (special clicked picture). I'm looking for an effect that ...
1
vote
1answer
166 views

Are there any examples of multi-screen or multi-device design patterns?

There are increasingly more offices and work environment setups that allow employees to use multiple screens to do their work, and there are also many people who use multiple devices at the same time. ...
1
vote
1answer
422 views

What pattern is used on LinkedIn's profile strength meter?

On LinkedIn, there is a pattern/widget that is used in several places. Most notably, it is on the right hand side of your LinkedIn profile, which shows how complete your profile is. When you hover on ...
1
vote
2answers
248 views

On mobile web app, where should primary & delete buttons go?

I'm looking at designing a web app for that allows users to view details info of an item and do one of 3 things Create another item by "copying" the current one (primary action) Edit specific ...
1
vote
4answers
295 views

How to show forms on One page websites

Our earlier website was an old school design with window size fixed pages with a lot of unnecessary content. We shifted to a one page website. We aim at acquiring leads for business through the site. ...
1
vote
1answer
531 views

What pattern should I use for merging data display tables

I have a situation where i'm splitting one huge table (it is beyond 3 folds of screen) and creating two tables (one is new and other is updated version of old) Which are again huge in terms of ...
1
vote
1answer
181 views

Main menu organization and usability patterns

I have a main menu at my application. We are refactoring the UI of the application, and we are thinking about reorganize the menu items. We are considering 2 options: leave as it's alpha sort ...