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.
Use multi-column layout for forms
|
Hi Reader! Wait, what?Okay, I admit it's a clickbait. Somewhat. Shouldn't we use one-column layout for forms? You should. However, one-column layout is not the same as placing each input on a new row. Don't take it too literally. Yes, it's better when you go from up to down. But if a group of fields is tightly related, they are perceived as a single group. And users don't have a problem recognizing that, Card Name - Expiration Date - CVC is one group. So the thing is to avoid Z-pattern, but it should be indeed the Z-pattern, otherwise the app where I'm writing the newsletter also violates the rule - there are many columns, links, elements placed across the app. “Hey, but that’s your opinion right?” - one may say. Well, may I refer to Baymard Institute: Notably, separate fields that are highly associated or can be thought of as a single coherent entity — such as
- dates (e.g., day/month/year fields);
- first, middle, and last name;
- city/state/ZIP or postal code;
- and credit card details (e.g., card number/expiration date/security code)
— can be placed on a single line within a form.
Across multiple rounds of checkout studies, having 2–3 inputs on a single line didn’t cause issues when they logically belonged to the same single entity — and so long as the rest of the overall form layout only consisted of a single column.
In short, there is a distinction between “some lines having 2–3 fields per line” (an acceptable practice in certain cases) and an overall “two-column form layout” (generally problematic and never recommended).
Thanks for reading, and have a nice 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.
I've just gone through some of the screenshots I collected over the past few months. I’d like to share one of them with you. I don’t have a universal solution for rating UX. What I want to share is this thought: sometimes people come up with a great solution, but due to human nature, lifestyle, or whatever-you-want-to-call-it, the solution ends up becoming useless. I remember reading news about a new law that limits the number of SIM cards a person can buy. Many people use them for fraud, or...
I apologize for being absent. For the past ~2 months, I've collected quite a lot of topics for newsletter issues; hopefully, you will like them. Today I want to share with you a screenshot from my bank app and make a quick review of the problems it has. In my humble opinion, of course. Here we go. There are quite a few problems: 1. Separated from each other, the expiration date, card number, and security code are all part of the card credentials. The thing is, if you need to see card number,...
It's been quite a while since I sent my last newsletter. Fully focused on my course that I should have finished in the past year =\ But I want to share something really cool. Accidentally, I noticed this trick on nuxt.com. Then I posted about it, and other folks sent more examples of the same trick. Sometimes, when I want to download a logo, I right-click on the header logo to copy it. Now, look at what happens on these four sites. Nuxt.com Linear.app Evidence.dev Svgl.app All these examples...