Grumpy Website

 

Do not randomly swap buttons for no apparent reason

Thanks @SomeKirill for the picture

#Consistency #PyCharm

If only computers could create directories instead of complaining about it

Thanks @grishka for the picture

If you want to trick users into enabling notifications, at least come up with a good reason to do so.

How do notifications help me stay safe? Or send tabs? Or discover features?

Thanks @sobersolar for the picture

#Firefox #Notifications

Dear website designers! Please don’t hijack our scroll!

Seriously. It only looks good in one situation: if user scrolls down with constant speed, from start to finish.

But that’s not what real people do! We want to go back and forth, skip some blocks, go back to re-read, search. It’s a website, not a movie

Thanks @generalgda for the recommendation

#Scroll

This is a dropdown menu. With two options. I guess the lesson here is “don’t use pictures of controls as icons for other controls”

Thanks Hudson for the picture

#Dropdown #Toggle #Icon #Calendly

...aaaaand it’s gone!

If you let user hide something, also give them the tool to bring it back

Thanks @migvidal for the video

#Reversibility #AppleMail

“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 @spiralganglion@mastodon.social 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!

#Notifications

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

Pages:
149148147146145144143142141140...