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 '...
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 ...
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 ...
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 ...
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 &...
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 ...
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 ...
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 ...
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.
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 ...
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/...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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" ...
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.
...
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 &...
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, ...
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 ...
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) ...
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 ...
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.
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
layout × 891website-design × 130
gui-design × 129
usability × 125
forms × 104
buttons × 60
navigation × 54
interaction-design × 45
tables × 38
web-app × 37
mobile × 36
design × 35
design-patterns × 33
interface × 29
responsive-design × 29
user-behavior × 28
user-expectation × 27
page-layout × 27
android × 24
grid × 22
menu × 19
desktop-application × 19
content × 17
mobile-application × 16
lists × 15