|
Hey Harry, Figma just announced some awesome new features at their Config 2025 conference. But selfishly, I was most stoked to see the open source font I designed, Figtree, in some of their feature demos! 👀 One of the new features they demoed was autolayout grids, which I think will make designing data tables much smoother. (Want to get up-to-speed on it? My fav way 👉 Figma’s playground file) Anyhow, that’s a good lead-in. This month, I’m talking about the design of popular SAAS app UI elements, and today, let’s talk about tables. (Thank you to Design Hacks reader Zlaty S. for the suggestion! 🙂) A single row of controls = ❤️In general, the most usable, well-designed tables have a SINGLE row of controls above the data. (Once you get multiple rows of controls, it’s confusing what applies to what 🤪) Whenever I see the controls displayed across multiple rows, like this... I always try to make them consistent and in a single row, like this... (This example is from the Live Redesign Vault, which comes with Learn UIDesign. And all 3 of my courses open for new enrollment on May 28th! 🎉) To save space, go customSometimes, it’s easy to get all your table controls into a single row. But when it gets really difficult, you’ll need to pull out the big guns: custom controls. A normal dropdown is only so space-efficient – but a custom control can optimize for maximum power in minimum space. But, like in all designs, there’s a tradeoff... let’s talk about that next 🙂 The cleanliness/engagement tradeoffLook at these two sets of filter controls. Which one is better? Trick question. Which is better? IT 👏 DEPENDS 👏 ON 👏 THE 👏 USE 👏 CASE. But! Here’s what we do know:
(In Learn UX Design, I say: “Out of sight, out of mind. Out of mind, won’t get clicked” 😅) Whenever you show more, it’ll get used more. Whenever you show less, it’ll appear cleaner and often be easier to grok. AirTable shows the absolute minimum: Stripe plays a middle ground. Show some filters – but hide the least used ones: Dang, I love this stuff 😮💨 I think I picked the right career. It’s so satisfying to create an interface that looks great and just gets out of the way. And it’s doubly satisfying to help others do the same – even those who don't think they "have the designer eye". On that note, all 3 of my courses (Learn UI Design, Learn UX Design, & Landing Page Academy) open for new enrollments on May 28th 🎉 But I’ve also got an team signup special running May and June. Sign up 5+ seats (a seat is one person × one course), and get:
Perfect for design teams – or dev teams that need some design skills. Interested? Get the details. Cheers, |