Hello!
Today I'm thinking about a line from Elon Musk that people are buying Full Self-Driving with a car attached, not the other way around. People buying the outcome (it drives me places) instead of the tool (a car) is going to impact a lot more products, especially software. At a high level, this is how AI upends existing companies. Why does this matter so much for software? Because software teams spent decades making tools people use to get the outcomes they want. Photoshop is a good example. It has thirty-plus years of interface built around manipulating pixels, but when you want to edit a photo you're thinking "make her hair flow to the left," not "select these pixels and apply a transform." The tool sits between you and what you actually want. I've been chasing this idea for a while. Back in 2024, I wrote about how the continuous march of "more features, more UI" leaves people with more functions they don't know about and don't use, and how AI lets you control software with hundreds of features by just telling it what you want to do. Last month I pushed it further: start from the outcome ("here's the news you asked for") and let people engage with the tools later if they want to. Outcome first, tool second. The car example just makes it really concrete. Nobody wants a steering wheel, they want to get somewhere. As we've said for years, we don't call carpenters "hammer users." So if you're building software today, ask yourself: what's the "it drives me places" version of your product? Because if you don't ship that, someone else will, with your tool attached as an afterthought.
Where do I place labels on mobile Web forms?
Based on my research and experience with mobile form design, I strongly recommend using top-aligned labels for mobile web forms. Here's why:
Top-aligned labels work best for mobile screens. They provide several advantages that are particularly important in the mobile context:
Top-aligned labels minimize completion time, which is crucial on mobile where users often want to complete tasks quickly.
They offer flexibility for localization and complex inputs, which can be especially helpful on smaller screens where space is at a premium.
Top-aligned labels support multiple screen resolutions, making your forms more adaptable across various mobile devices.
They're easier to code and better for accessibility, which can simplify development and improve the experience for all users.
Top-aligned labels allow for better support of help/error messaging, which is critical for guiding users through form completion on mobile.
It's also worth noting that top-aligned labels are particularly effective when the data being collected is familiar to users, such as personal information or addresses, which is often the case in mobile forms.
Another important consideration for mobile forms is the "field zoom" feature common on many mobile devices. When users tap on an input field, it often zooms in for easier typing. With left-aligned labels, this can cause the label to disappear from view, leaving users unsure of what they're supposed to enter. Top-aligned labels solve this problem by keeping the label visible even when zoomed in.
To summarize, use top-aligned labels & single column layouts for the best mobile form experience. This approach will help ensure your forms are user-friendly, efficient, and accessible across various mobile devices and screen sizes.