Hello Reader,

I reviewed approximately 200 brief notes and selected three practical UI/UX solutions that significantly improve interfaces.

Short and concise—often overlooked.

Verifying the email field

I tried to sign up and accidentally typed "gmaail." Look at the alert message they showed.

Since technically the email has the correct format, they noticed that I probably meant gmail, not gmaail.

This demonstrates their concern for their users.

​

Segmented butttons

There is a nice discussion here, where I picked up a short rule and also learned the term "segmented buttons" (never knew what they were called).

I'll copy the image from the link; all credits go to the author.

So, once and for ever, use switches when

1. The option is binary (yes or not; turn on or turn off).
2. The action is applied immediately.

Just like these guys

But when you need to change different options, such as

• List view/Map view
• Cash/Card
• Delivery/Pick up

Use segmented buttons. This article provides a comprehensive overview of segmented buttons.

​

Flex Shrink

One of the most common bugs I've encountered so far is when you don't set flex-shrink to zero. Here's what we have.

Look at the "view job" button in the middle of Y Combinator's job board.

Another three examples of:

1. Twitter UI (show more is squeezed)
2. I can't recall where I took the screenshot, but it also squeezes my avatar
3. The third is an artificial example made by me since I couldn't find a real one, but it happens all the time. An icon or button accompanies the message in some kind of alert message.

Another example, my cell phone:

So be careful and always test your UI with lengthy data.

Thank you, and have a wonderful day!

​