Hot answers tagged

296 votes
Accepted

Is there a name for this drop-down anti-pattern?

One suggestion for a name for a solution is from this great article is directional menu aiming. It shows how Amazon prevent users from incorrectly selecting an unwanted element while hovering their '...
Midas's user avatar
  • 6,537
122 votes
Accepted

Confusing checkboxes and radio buttons

In a scenario like this I would make the UI reflect the possible states of the application. You can only have one manager so there should only be one place to select a manager, everyone else can ...
Tristan Shelton's user avatar
106 votes

Confusing checkboxes and radio buttons

Since the change of current Manager is an action invalidating the other options - I would present it in a manner which communicates clear what is about to happen. Waiter/Chef are Radio-Buttons, so ...
Falco's user avatar
  • 2,048
97 votes

Is there a name for this drop-down anti-pattern?

The issue you're talking about is sometimes referred to as a "narrow mouse corridor". Having a narrow mouse corridor can result in users becoming frustrated by the lack of user control. An ...
Jonathan's user avatar
  • 2,519
87 votes

Most User Friendly Color Picker

Basic users first I assume this isn't a color theory app. If this is intended to support quick color selection with a sub-set of power users, a hybrid palette chooser / builder will work well. Make &...
plainclothes's user avatar
  • 21.2k
75 votes
Accepted

Button changing its text & action. Good or terrible?

You can change the button to reflect the only available action, but separate the display of state. You've replaced the button label with the only available action: reverting (unregistering). Where it ...
Mike M's user avatar
  • 24.5k
51 votes
Accepted

Better way to show books in a row

By the usability point of view, the optimal choice would probably be #2, since it leaves no doubt about the binding between the book title and its cover (see the Gestalt's Proximity Principle). An ...
Stefano's user avatar
  • 871
46 votes

In burger menus, should "Logout" always be at the bottom and why?

I think Steam just haven't noticed this problem. Here are some reasons to put the logout button at the bottom of the dropdown: Avoid Accidental logouts - as you pointed out putting the logout at ...
Kristiyan Lukanov's user avatar
36 votes

Is there a name for this drop-down anti-pattern?

Where I work, we call that a "death-star trench menu". I"m pretty sure we didn't invent that name, but I can't find the book it's from.
Matthew's user avatar
  • 377
29 votes

Most User Friendly Color Picker

I'm not sure there's any objective answer to this one, because it'll depend too much on the demographics of your clients. I'll give my subjective two cents though! If they're not graphic designers or ...
A. Sim's user avatar
  • 849
25 votes
Accepted

How should horizontal dashboard numbers react on a responsive page?

The best way to cover long numbers on small devices is to use the K, M, B values; such as 10K, 10.51M etc... As per layout try resizing this codepen, you'll get an idea https://codepen.io/geoffyuen/...
Dipak's user avatar
  • 16.2k
25 votes
Accepted

Align text left or right Next to textBox?

It depends. LukeW has covered this in his book Web Form Design. It's not a new book, but covers most of the common web form problems. Each has an advantage/disadvantage: Right aligned: Right-aligned ...
Mike M's user avatar
  • 24.5k
24 votes
Accepted

What is the name for wireframing in the browser?

Wireframing in an app is called Wireframe Developing the wireframes to interactive demos (e.g.Bootstrap) is called Prototyping Edit: Helpful prototype types from the slides @Jose mentioned in his ...
Dipak's user avatar
  • 16.2k
24 votes

How can I show a clear label on this start page without pushing the content vertically?

I'd even increase the vertical space for your label. It needs a bit more breathing room. If you do this, you can move your filter options (or are they action buttons?) to the top. This will clean up ...
Nick Groeneveld's user avatar
24 votes
Accepted

How to deal when two or more markers in a map are super close?

Having the cartographic point of view, in my opionion, clustering can definitely be the way to go in such a case. In the following example, points which are very close to each other: spread out when ...
tallistroan's user avatar
23 votes

How to deal when two or more markers in a map are super close?

I found Instagram really handy when it came to its map functionality. Maybe you could use something similar to this one since it seems less cluttered it is clear how many items there are when you ...
Dimitra Miha's user avatar
  • 3,719
21 votes
Accepted

Counter in a corner of a button

Are you restricted to using an angled corner? If not, a box would be much more simple & sleek. Otherwise if you are stuck using the angled corner, aligning to the top right rather then center is ...
alexbouchard's user avatar
21 votes

Confusing checkboxes and radio buttons

This seems like a user grouping task. Both of these examples have the nice property that you can print out a similar view to display in the kitchen. You also don't have any duplicated / redundant ...
icc97's user avatar
  • 7,228
20 votes

Most User Friendly Color Picker

All the color pickers you list are based on variations of the HSL / HSV (hue, saturation, lightness / value) color representations. Thus, their main differences are not in color theory, but simply in ...
Ilmari Karonen's user avatar
17 votes

In burger menus, should "Logout" always be at the bottom and why?

Make it harder to find destructive buttons If you do need to include destructive buttons, you should definitely find a way to make them harder to find than the primary action button Best ...
Dipak's user avatar
  • 16.2k
16 votes

How to deal with an excess of white-space in a CRM UI?

Visualize hierarchy You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest. The nice thing about ...
plainclothes's user avatar
  • 21.2k
14 votes

Most User Friendly Color Picker

@DavidGrinberg has a good point about most users not caring about having more than a small number of colors to choose from. However you can cater to both that group and people who want more choices ...
Dan Is Fiddling By Firelight's user avatar
13 votes
Accepted

Fixed width for buttons or proportional with the text?

In my opinion, if the buttons are one over the other then try to adapt the shorter to have the wider's width. In your example it would be the green option, but giving less padding to the "Subscribe" ...
Alvaro's user avatar
  • 16.8k
13 votes

In burger menus, should "Logout" always be at the bottom and why?

User Flow Think about each menu item as a task. You can perform tasks sequentially, like task1, task2, task3.... taskN . Which would be the very last task you can perform? Answer is easy: logout. ...
Devin's user avatar
  • 36.5k
13 votes

Confusing checkboxes and radio buttons

Use this - This is a higher role view. In manager's view, the manager won't have a combo-box for his/her role. The view of other two will be plain text - no combo-boxes. download bmml source &...
Dipak's user avatar
  • 16.2k
13 votes
Accepted

Categories in a list: Empty state or hide?

Option 1 does present more data, but is bound by a more explicit rule. If someone looking out over a six month period for reservations, and is coordinating or receiving this data from other systems, ...
Mike M's user avatar
  • 24.5k
12 votes
Accepted

Why are the titlebar buttons on the left side in OS X?

In the original MacOS versions (pre-10), there was a close button in the top left and maximize (if available) in the top right, as shown here: Putting them together seems like a reasonable choice to ...
SeanG's user avatar
  • 166
12 votes

Why do 4-wheel suitcases usually have their wheels on the short side, rather than the long side?

Payload Carriers define a rectangular prism into which luggage must fit. The wheels and the air between them occupy some of that volume. The way to maximize storage volume (and minimize air volume) ...
Spencer Joplin's user avatar
11 votes

Why are the titlebar buttons on the left side in OS X?

Steve Jobs was fairly inspired by Xerox's Xerox Star, which was the first to introduce a User Interface in their system. Demo video: https://www.youtube.com/watch?v=QYvxgNhUwBk Xerox's Xerox Star ...
Swapnil Borkar's user avatar
11 votes

Counter in a corner of a button

One option you may try is to make the dark area variable, depending from the number of digits. This way the dark area will also work as a visual cue, indicating the magnitude of the number.
DesignerAnalyst's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible