Grumpy Website


“Open link?”

“Sure, seems safe”

But seriously, don’t ask users questions if they have no way to make an informed decision. Whatever users does here, it’ll be based on guess/luck, not on any logical conclusion

Thanks Andrei for the picture

#Popup #Messenger

If you struggle to choose between “action or state” for your button, at least be consistent. Otherwise you get something like “See All” / “All items” and it’s very confusing

Thanks for the video

#Button #Toggle #ActionOrState

Pro tip: try to name your group relevant to their content.

Presented here,

Move & delete: has move but no delete

Tags: has Mark all as read

Another pro tip: if you make a group, it should contain at least two elements.

Thanks @HID_DEVICE for the picture

#Outlook #Dropdown #Menu

You UI has chicken pox, please stay at home!


First: dropdowns can scroll. You don’t need to help them by limiting the amount of choices. Especially dates in the past

Second: please, I beg you, indicate somehow that controls are clickable

#Invisible #Dropdown

This is called undesirable correlation. It looks like left panel (Detect language) asks you to drag and drop and right one (English) to choose a file.

In reality, both actions apply to the left one! Or to the entire UI, if you will

Anyway, try to avoid

Thanks @slavamfsu for the picture

#UndesirableCorrelation #GoogleTranslate

Can one put EVERY possible control on one screen?

Yandex says — YES!

- Toggle

- Button

- Navigation chevron

- Checkbox (round, no shadows)

- Checkbox (round, shadows)

- Dropdown

- Color icon with filled background (circular)

- Color icon with filled background (rectangular)

- Color icon without background

- Color icon with grey backbground

- Black-and-white filled icon (circular, smaller)

- Black-and-white thin line icon

- Black-and-white thick line icon

- Bold black text

- Normal black text

- Smol black text

- Normal grey text

- Smol grey text

I don’t even know how to tag this post

Thanks @apust for the picture

Your regular reminder: if user can’t see the control, they will not use it

Thanks @SomeKirill for the picture

#Invisible #button #googlepay

Remember to add max-width to your buttons

#Google #Reddit #Button

If you are looking for the checkmarks, they are on the right. Stretching your UI is good, but only up to the point

Thanks John Siracusa for the picture