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,619
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,118
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
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.7k
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
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.7k
25 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
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
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,739
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,218
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.3k
14 votes

According to the basic principles of UI Design, which alignment works the best as shown in the following picture

In the first layout it is clearer that the content is subject to the recommended analysts heading, because it is fully encapsulated by the heading. This is less obvious in the second layout because ...
Chris Schaller'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
  • 38k
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.7k
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

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
11 votes

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

I don't see an issue with the white space. Card-type interfaces are prone to having white space. Maybe you can condense the details into the global components, like the header, and dedicate the body ...
Nicolas's user avatar
  • 5,608
11 votes
Accepted

What is a good reason to tell clients who want their logo to be always included in every screen that it shouldn't be done for a mobile app?

If the client says the logo must appear on all the company screens, even those of the mobile application is absolutely correct and of course, they are in their right to say that. But, this is where ...
Danielillo's user avatar
  • 19.1k
11 votes

According to the basic principles of UI Design, which alignment works the best as shown in the following picture

Alignment of grey container in the first image means that content of grey container is associated with recommended analysts and provides information related to recommended analysts. Second image ...
fakermaker's user avatar
10 votes

Button changing its text & action. Good or terrible?

I would keep the general style of the button, to be consistent. However I think the most important thing is to confirm that you have registered, and not have this state be confusingly similar to not ...
Nick Gammon's user avatar
9 votes

What is the name for wireframing in the browser?

You can use a wireframe as a prototype, but not all wireframes are prototypes. Wireframe = a diagram that uses black and white lines only and no color. Prototype = anything that helps you test a ...
Jose Berengueres's user avatar

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