profile

Victor Ponamariov

Here are 3 quick UX gems for you

Published 7 months ago • 1 min read

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!

​

Victor Ponamariov

I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.

Read more from Victor Ponamariov

Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff! I've just posted the same article on LinkedIn, for my first time. Accessibility concern There’s a condition called VIMS: Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still. To...

2 days ago • 1 min read

After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....

6 days ago • 1 min read

I've been skimming through my list of topics to cover and found an interesting CSS property that’s especially useful when you need to highlight a specific phrase inside a block of text. Normally, when a text block breaks into multiple lines, the browser treats the whole element as a single box — which often results in broken or inconsistent styling. So this code: Results in the following styling: To fix that, all you need is: box-decoration-break: clone; It tells the browser to treat each...

about 1 month ago • 1 min read