Smashing Magazine
Smashing Magazine

Smashing Newsletter #299: UX Edition

Email sent: May 4, 2021 8:33am

On web forms, opening menus on hover/click, UX tooling, maps and UX training exercises. Issue #299 May 4, 2021 View in the browser 💨

Smashing Newsletter

Hej -,

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.

Image Optimization cover

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 Praise of the Unambiguous Click Menu

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. Pitfalls And How To Do Better

On mobile, large buttons are easier to choose than typing, and typing might be still better than a -dropdowns or complex birthday picker widgets. But what do we use in HTML for this kind of input? 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, 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)

From our sponsor

Build More Inclusive And Accessible Websites With Axe DevTools Pro

Build More Inclusive And Accessible Websites With Axe DevTools Pro

Front-end accessibility testing is easy with Deque’s axe DevTools browser extension. Find and fix accessibility issues with very little effort or expertise required. Plus, improve user experience and prevent regressions by fixing bugs while you code. Get started with axe DevTools Pro for free today!

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.

UI Coach

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.

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.

Smashing Online Events

As the next workshops, we have coming up:

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.

2020 Election Maps And Charts

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)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.

Earn your master’s degree online.

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.

Food UX

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)

8. New On Smashing Job Board

9. Recent Smashing Articles

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!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

Weekly issues with useful tips for web devs.
Email: [email protected].

Other emails from Smashing Magazine

Smashing Magazine
Apr 28, 2021
Meet "Image Optimization", a Brand New Smashing Book
Smashing Magazine
Apr 27, 2021
Smashing Newsletter #298: Web Typography
Smashing Magazine
Apr 20, 2021
Smashing Newsletter #297: Web Performance
Smashing Magazine
Apr 15, 2021
From Cats With Love: New Navigation, Guides and Workshops
Smashing Magazine
Apr 13, 2021
Smashing Newsletter #296: Security and Privacy
Smashing Magazine
Apr 6, 2021
Smashing Newsletter #295: Boosting Your Coding Workspace