Smashing Newsletter #299: UX Edition

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 Smashing Friends,

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. <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)

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

unsubscribe update preferences view in your browser

Older messages

Meet "Image Optimization", a Brand New Smashing Book

Wednesday, April 28, 2021

Meet “Image Optimization”, our brand-new practical guide to optimizing and delivering high-quality images on the web. Written by Addy Osmani. Let's get images on the web right. Meet “Image

Smashing Newsletter #298: Web Typography

Tuesday, April 27, 2021

Web type tools, from little CSS helpers to open-sourced typefaces and some helpful guides to choose great type pairings. Issue #298 • Tue, April 27, 2021 • View in the browser 💨 Smashing Newsletter

Smashing Newsletter #297: Web Performance

Tuesday, April 20, 2021

With Lighthouse, debugging CLS, caching, web fonts subsetting and React performance. Issue #297 • Tue, April 20, 2021 • View in the browser 💨 Smashing Newsletter Hola Smashing Friends, Web performance.

From Cats With Love: New Navigation, Guides and Workshops

Monday, April 19, 2021

From cats with love — new navigation, evergreen guides and online workshops around front-end and UX. From cats with love — new navigation, guides and online workshops. • View in the browser 💨 Smashing

Smashing Newsletter #296: Security and Privacy

Tuesday, April 13, 2021

With CAPTCHA, web security, spam prevention, security, vulnerabilities, tracking blocker and guide to better design.Issue #296 • Tue, April 13, 2021 • View in the browser 💨 Smashing Newsletter G'

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →

✏ 3 Ways to Design More Inclusively, What is a Design System?2021 Fun Typefaces, and more...

Thursday, June 17, 2021

3 Ways to Design More Inclusively WEBDESIGNERDEPOT.COM COMMENTS What is a Design System? ROBERTCREATIVE.COM COMMENTS Animal Crossing Font FONTSPANDA.COM COMMENTS Some Fun Typefaces for 2021 KOTTKE.ORG