Grumpy Website

nikitonsky: “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

nikitonsky: 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 @spiralganglion@mastodon.social for the video

#Button #Toggle #ActionOrState

nikitonsky: 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

nikitonsky: You UI has chicken pox, please stay at home!

#Notifications

nikitonsky: 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

nikitonsky: 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

nikitonsky: 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

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

Thanks @SomeKirill for the picture

#Invisible #button #googlepay

nikitonsky: Remember to add max-width to your buttons

#Google #Reddit #Button

nikitonsky: 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