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

learn more… | top users | synonyms (1)

0
votes
1answer
181 views

Intuitive Active / Idle / Off status button

I have a requirement to visually show the three status of Active / Idle / Off status for devices. I somehow convinced with switch design as you can see in the below illusion, not fully satisfied ...
4
votes
6answers
245 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 ...
0
votes
1answer
40 views

What is the best way to represent two scores for a square result?

I'm not sure if this is the appropriate forum for this question, so please let me know if it is not. I'm a graduate student working on figures for a research article. I have data that is being ...
3
votes
2answers
483 views

Assigning to multiple groups

While there are plenty of "assign to blah" topics here, I'm not sure that I've seen this exact case. Apologies in advance if this is repeated. Building out a new website, with quite a lot of ...
2
votes
2answers
223 views

Copy/paste VS Clone

When managing lists or objects, what are the advantages of a "clone" action over "copy & paste", if any? What are the disadvantages? Or when should you use one pattern over another? I assume ...
0
votes
0answers
147 views

Is there a best practice for where to display toast notifications and snackbars?

What is the best practice for the location of toast-style notifications and snackbars? I have seen them predominantly in the lower right hand corner for toasts, and across the bottom of a browser for ...
3
votes
3answers
494 views

Providing multiple paths/flows for the same Action

We are developing a complex platform with heavy functionality, and I am having a dilemma, concerning whether or not to add a button for the same functionality one-step earlier in the User Flow. As ...
1
vote
1answer
166 views

Horizontal Accordian on website - Best usability practices

I'm designing a website and have a section which contains two categories. These two categories work like a slider (or a horizontal accordion). The default state is the two categories are represented ...
3
votes
2answers
278 views

Drag and drop in long lists

I continue to hear drag and drop can be a bad user experience when dragging to reorder over long distances, such as within a list and when scrolling to the target location is required. Are there any ...
1
vote
1answer
416 views

A Good “Invitation to Connect” Experience

We are building an "connect with your friends" part of our app and I am curious about a good way of doing this. My first thought is do like everyone else, so I looked at Facebook, twitter, LinkedIn, ...
0
votes
0answers
141 views

Radio button best parttern in mobile app

I have radio button selection in mobile app where on selection of it, the dropdown box gets activated. My question is that, is it best practice to place radio button and dropdown in stack manner (pic ...
3
votes
1answer
101 views

What is the origin of the term 'coach marks', in the context of software UI?

The earliest reference to "coach marks" (in the context of software UI) appears to be the following patent, filed in 1993: Method and apparatus for generating and displaying multiple ...
2
votes
3answers
193 views

Does a user's knowledge of operating system interactions carry over to a browser?

My coworkers and I recently discussed an article criticizing the hamburger icon + drawer navigation approach, and began to debate whether Window's "Start" button utilizes the same approach. There ...
1
vote
6answers
863 views

Where to place Logo, left or middle? [duplicate]

Most people say upper left is the best, due to recognizability issues. I saw a video on Treehouse and showed that CNN did the bold move, to put it in the middle. Then i checked CNN and the logo was ...
3
votes
2answers
362 views

Best way to lay out home page of mobile app

I'm redesigning a mobile trivia app, and on the homepage, there are radio buttons that let the user choose the difficulty, and then there are also 3 buttons that start the game. The current layout ...
3
votes
2answers
2k views

What is the best web design pattern for toggle-able options within a parent toggle-able menu

I'm working on a menu that can be toggled on or off, with sub-options within the menu that themselves can be toggled on or off. while logically I think it makes sense for both the parent menu and ...
2
votes
2answers
36 views

info presented to the user in a payments page

I am in the stage where I will start building the page of my app that displays the payment status of the user. Nonetheless I have no idea what this page will look like from a content point of view. ...
4
votes
2answers
849 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 ...
1
vote
2answers
285 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 ...
3
votes
2answers
480 views

How to design a parent child relation Edit dialogue

Does anyone know a good way to design an administration dialogue to add and edit items that have a parent child relationship? The mockup below x bike categories and for each bike category y z ...
0
votes
2answers
419 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 ...
14
votes
4answers
2k 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? ...
1
vote
2answers
363 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
1answer
164 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 ...
2
votes
4answers
285 views

Name, icon, and color of the button

I want to clear the text from the text box, what should be the button named as? what icon and color should the same button have? Thanks in advance.
3
votes
1answer
207 views

Standardized design patterns for UI?

In 2004, Jakob Neilson wrote about two studies that looked at a database of websites and compiled a list of standard UI patterns based on usage. The studies looked at 100's of web pages and ...
3
votes
1answer
116 views

Are there any recommendations or statregy for showing reviews on content at product launch?

We have a bunch of content that want people to read and have added reviews to the content to help others understand what is more valuable than other content. We are about to launch this feature and ...
7
votes
3answers
823 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 ...
1
vote
0answers
53 views

How to configure a graph widget? [closed]

I am working on a web app to help the user create configure a graph widget wherein the user: Names the widget Selects a graph type (one of many) Provides the details (5 to 6) that graph. I'm ...
4
votes
1answer
56 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 ...
0
votes
0answers
56 views

What is the best way to illustrate how discrete elements relate?

I have three pieces of information, say, that are being displayed: A score An abbreviated explanation for the score A call-to-action for a suggested activity based on the score Is there a best ...
8
votes
4answers
6k views

Where can I find a comprehensive list of UI Components?

I think this is the site where I can ask this. Sometimes I have to build specials "slider" or "scrollbar" but when I try to look for information is difficult because I don't know the proper names. ...
3
votes
1answer
198 views

Design patterns for unstructured storage and search of information

The prevalence of tags seems to have helped drive a trend towards unstructured storage of information, and instead supporting unstructured or intelligent search features to help retrieve stored ...
19
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 ...
4
votes
2answers
177 views

Anemic user interface

Recently, while discussing the design of a user interface for a web app, I noticed a phenomenon in which people only think of a few simple user interactions like "type text there", "select an item ...
2
votes
3answers
268 views

Why does twitter not update live? [closed]

I'm wondering from a ux design perspective, why does twitter not show tweets live? Instead they add a bar which you can click to show new tweets. If tweets were rendered so that they are not so tall ...
6
votes
2answers
1k views

Drag and Drop: Better to avoid drag-n-drop to offscreen elements?

I have a particular web interface in which drag-and-drop may be useful, however, the problem that I see is that the list of items to be dragged could potentially be very long (below the fold). Is it ...
0
votes
3answers
147 views

How to provide an “easy to understand” UI to display/hide checked items?

I have a tree where the user can check/uncheck each item. Since there's many items, I would like to provide a way to filter the tree to display: all items only selected items only unselected items ...
2
votes
1answer
296 views

Better List Builder Pattern

In the list entry pattern here the user searches for a record using the form input, and the results are displayed below in a grid. Selecting a record from the grid adds the record to a list. The ...
0
votes
5answers
108 views

What is this type of interaction/component called?

When a user fills out some input fields and adds it as an entry to an existing list. Usually there's a way to edit/delete these entries as well.
6
votes
2answers
198 views

What's the best way to present a nested drop down menu but avoid the drop down going off screen?

I'm currently working on a design that originally was using a nested drop down meny like so: But, when a user clicks on the "more" icon of the card furthest to the right, the drop down menu no ...
11
votes
3answers
577 views

What is the difference between anti-patterns and dark patterns

Both are generally bad when they find their way into the user experience of a product and we are advised to know about them but avoid their application. Specifically what is the difference between ...
1
vote
1answer
189 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 ...
0
votes
2answers
124 views

Using a carousel pattern to display a set of questions

I'm considering using the carousel pattern to ask questions in a more dynamic and engaging way (this is my hypothesis). The carousel isn’t the only element on the site and will be displayed at the ...
58
votes
7answers
7k 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. ...
2
votes
1answer
74 views

What is the best combination of shortcuts for sending text message and breaking line?

So far I have encountered web applications that use these shortcuts to send messages(posts, emails etc) without clicking the submit button: ctrlEnter or cmdEnter ShiftEnter Just Enter On the other ...
3
votes
1answer
186 views

Thinking in Inheritance vs Editing Multiple Disimilar Values

When presented with multiple similar modules, all containing the same set of user definable parameters, what pattern is shown to best suit the widest range of user expectations? Inheritance: Using a ...
1
vote
4answers
488 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 ...
13
votes
4answers
17k 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?
1
vote
1answer
317 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 ...