Smashing Newsletter: Issue #299

Editorial

Everyone on the team is a designer. DevOps engineers, front-end developers, interface designers, marketing department and customer support. Independent of a specific role we take over in a company, we all contribute to the overall experience that our customers will have when using our products or services.

This reflects in everything — from information architecture to error messages and the shape of buttons to accessible tab order of our forms. In this newsletter, we want to highlight some of the UX considerations that are useful for anybody on the team — from interface designers to back-end engineers.

In the Smashing Family news, just last week, after 2 years in making, we’ve announced a brand new book by Addy Osmani on image optimization (get a preview and free PDF sample).

In fact, we have a few wonderful Smashing books — printed and digital — that you might find interesting, from better UX and form design to TypeScript. Thank you for your kind support, everyone. 🥁

Happy reading and UXing!
— Vitaly (@smashingmag)

1. Why Click/Tap Menus Are The Better Alternative

Can I click the parent element? Will the parent element be a link to the same page as the first submenu link? When it comes to hover menus, there’s no standard answer to these questions. Not to mention accessibility issues for keyboard users. To prevent all of this from happening, Mark Root-Wiley stopped building hover menus entirely and suggests using an unambiguous alternative instead: click/tap menus.

In his article on CSS Tricks, Mark dives deeper into such menus and the benefits they bring along for usability, accessibility, and content strategy. One major benefit: Contrary to hover menus, click menus don’t accidentally disappear when people bump their cursors.

Obviously, hover menus won’t work on mobile anyway, so we’ll need a click/tap menu option at least as a fallback. So we could just keep the interaction the same for mobile and desktop menus, as JavaScript also stays the same, no matter if your menu is hidden behind a hamburger icon or visible on mobile. Do we need hover menus in 2021? Unlikely. Arguments that make it worth to reconsider our approach to menus. (cm)

2. <input type="number"> Pitfalls And How To Do Better

On mobile, large buttons are easier to choose than typing, and typing might be still better than a <select>-dropdowns or complex birthday picker widgets. But what do we use in HTML for this kind of input? <input type="number"> can bring along quite some usability problems, as the Design System team at GOV.UK found out.

Why the GOV.UK Design System team changed the input type for numbers

The problems concern assistive technologies and, as it turns out, there’s also a more structural issue linked to it: per definition, <input type="number> can only be used for incremental numbers, such as dates or the number of people in a household. Other numbers can cause problems with browser validation, for example when browsers attempt to round large numbers or convert them to exponential notation.

How to do better? As the GOV.UK team advises to use inputmode="numeric" pattern="[0-9]*" that allows for a degree of separation between how the user enters data, what the browser expects the user to input, and how it tries to validate it. Need more tips on forms UX? Adam Silver has got your back. Good to know! (cm)

3. Design Prompts To Improve Your UI Skills

The best way to get better at something, has always been and still is practice. It’s not any different when it comes to designing good user interfaces. Based on the idea that you’ll get a better UI designer by, well, creating lots of interfaces, UI Coach generates UI design challenges to tinker with.

A note-taking platform where everyone can take notes and share them with others, a language translation app that translates spoken words in real-time, or a graphical restaurant reservation app that allows you to choose your desired table — these are just a few of the design prompts that UI Coach generates for you. Each prompt comes with a color palette, font pairing, and illustrations library so that you can focus on what really matters: the interface. And once you’ve implemented the challenge with your preferred tools, you can post it on the anonymous feedback platform to receive feedback from the community. A great way to take your UI design skills to the next level. (cm)

4. Tools To Build Better Digital Experiences

The right tools at the right time, help streamline the design process. To give you a better overview of which tools could enhance your UX design projects, Jordan Bowman and Taylor Palmer curate the site UX Tools.

Their design tools database features tools for everything from UI design and prototyping, to user flow and handoff, design systems and versioning. Each tool is rated by usage and user rating (the data is taken from the 2020 Design Tools Survey which Jordan and Taylor conducted among 4,000 designers) and comes with detailed information on platform support, cost, and features. On the site, you’ll also find practical UX challenges to train yourself in crucial UX skills. A great resource to build better digital experiences. (cm)

5. Upcoming Smashing Online Workshops

Web performance is pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. The interface has to load and respond quickly, and that affects all facets of users experience.

As the next workshops, we have coming up:

The React Performance Masterclass Dev
with Ivan Akulov. May 20 – June 4.
Dynamic CSS Masterclass Dev
with Lea Verou. May 25 – June 8.
New Adventures In Front-End 2021 Dev
with Vitaly Friedman. June 9–23.
Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
Designing Websites That Convert UX
with Paul Boag. July 22–30.
The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.

6. Election Charts Compared

Visualizing complex data in a user-friendly and engaging way is certainly one of the most challenging aspects of UX design. But it’s also one that offers a lot of room for creative ideas and solutions that think outside the box.

Alan McConchie from the cartography and data visualization studio Stamen analyzed the data visualizations for an event that brought forth a lot of different variations: the 2020 US elections. But what actually worked and what didn’t? In his article, Alan dissects his team’s favorite charts and maps, pointing out trends, things that went well, and what could be improved. Inspiring! (cm)

7. Food UX

What do food and UX have in common? Quite a lot actually! If you’re open for a different kind of approach to UX, we came across a project that already has a few years on its back but offers a perspective on user experience design that you probably haven’t taken on before.

For a talk he gave in 2010, Peter J. Bogaards collected thoughts, ideas, and resources, simply everything that creates a link between the disciplines food/gastronomy and user experience design on his blog Food UX. What might seem a bit strange at first will start to make sense the deeper you start to dive into his way of thinking.

As it turns out, in the end both gastronomy and UX are really about the same thing: engaging the senses to allow experiences to emerge, setting the stage for something good to happen and serving something delightful. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. And if you have a moment, please recommend the newsletter to your friends and colleagues. Thanks, and see you next time!

May 4, 2021 Smashing Newsletter: Issue #299

Previous Issues