Smashing Magazine - #338: UX & Front-End Tools

Little tools for card sorting, tree testing, gathering feedback, testing with screen readers and monitoring Core Web Vitals. Issue #338 February 1, 2022 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

Just yesterday I found myself rewatching Bret Victor’s incredible talk on Inventing on Principle — a truly inspiring talk that goes into the fine detail of how to create applications that bridge the gap between the creator and their creation. It’s one of the talks that makes a profound impact on you when you watch it, and changes the way you view your work and your tooling.

In fact, there are so many mundane tasks around us. They require attention, consume too much of our energy, and keep us away from meaningful work. In this newsletter, we’d like to look into tooling — obscure but useful little tools for usability testing, scheduling, gathering feature requests, monitoring Core Web Vitals and testing applications. We hope you’ll find them useful.

Touch Design for Mobile Interfaces

On the topic of UX, we are so happy to release our shiny new Smashing book on “Touch Design for Mobile Interfaces” today — jam-packed with insights from brand-new research, guidelines and best practices on designing for our lovely touch interfaces. Get the book right away.

And of course, if you’re a wonderful Smashing Member, you can find the book in your dashboard. Happy reading, everyone!

Have a peaceful, happy week, everyone, and let’s dive into tooling!

— Vitaly (@smashingmag)


1. Understanding Your Customers Better

Customer feedback is crucial to making informed decisions and, thus, building better products. However, giving feedback can be a disappointing experience. Just like managing feedback and trying to keep track of everything that comes in via email, Slack, and other channels. Canny helps change that.

Canny

Canny captures, organizes, and analyzes product feedback in one place so that nothing slips through the cracks. The tool lets you see what features are most requested and impactful and ranks them by priority. To increase feature awareness and engage customers, you can automatically follow up with people once you’ve released an update. If you want to give Canny a try, there’s a free 14-day trial available. A great tool to help you better understand your customers’ needs. (cm)


2. Handy Tools For User Research

We all want to create products that matter. Products that make a difference for the people who use them. And to achieve that, we can’t base our design decisions on assumptions, we need to understand what our users really want and need. If the topic “user research” feels a bit intimidating to you, you might want to take a look at Optimal Workshop. It’s a suite of five well-designed research tools that help you understand your users.

Optimal Workshop

To support you on your user research journey from start to finish, each of the five tools covers one particular aspect of user research. OptimalSort, for example, helps you discover how people conceptualize, group, and label ideas so you can confidently optimize your content structure. Or take Treejack: The tool provides you with the user insights you need to build a site structure that works for the people using it. Tools to help you with first-click testing, running surveys, and capturing all your observations in one single source of truth are also part of the suite. A powerful package. (cm)


3. Reviewing Websites Live

We all know the drill: You are working on a project and want to gather feedback from teammates, clients, stakeholders. What follows is a back-and-forth of countless emails, Slack messages, calls, and maybe even Google spreadsheets to gather opinions from everyone involved. To make collecting feedback more efficient, Pastel offers a visual approach to reviewing and commenting on a website live.

Pastel

All you need to do is share the unique Pastel link with your clients and teammates, and within seconds, they can click to leave comments with their thoughts and copy suggestions — without having to create an account. Pastel collects the comments for you, along with information on browser and screen size details. And if you’re making changes to the site in the meantime, no worries, they will be automatically updated in every Pastel link, too. A handy little helper. (cm)


4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
Frontend and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:


5. Getting Conversations Started

Spontaneous conversations can feel almost magical at times. It’s always that little spark of a little friendly conversation that helps people connect, get to know each other, and improve communication channels within the company. But in remote times, it might be a bit difficult to create these “watercooler” moments — but that’s where Donut comes in handy.

Donut

Donut is a tool that integrates into Slack to spark a conversation in a Slack channel or invite team members to join a virtual coffee, learn together or get to know each other. Most importantly, it tries to connect people who happen to be active in different channels and whose paths never cross. Of course, you can opt-out of them as well. There are literally hundreds of templates you can use in your organization. A great way to connect people, especially in a remote setting. (vf)


6. Fuss-Free Scheduling

Despite the most straightforward tools, sometimes it takes a meeting to clarify things with team members or clients. And, well, we all know how difficult it can be to find a date and time that works for everyone involved. If you want to skip the hassle of back-and-forth emails, Calendly has got your back.

Calendly

All you need to do to schedule a meeting is to let Calendly know your availability preferences and send guests your Calendly link. They can pick the time they prefer and the event is added to your calendar — without any calendar conflicts. Reminders go out automatically, and in case it needs to be rescheduled, Calendly takes care of that, too.

Doodle uses a similar approach to help you quickly discover who’s available when, no matter the calendar system they are using or the timezone they are in. A great little detail if you need to wrangle a group of busy people: In Doodle, participants can select “if need to be” dates, i.e. dates they can make work if necessary. Two fantastic timesavers. (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. Assisitive Technologies In The Browser

How does your app or website work with real assistive technologies? With screen readers and magnifiers, for example? Assistiv Labs not only lets you experience it firsthand, it also promises to help you find the 75% of bugs that automated accessibility checkers usually miss.

Assisitv Labs

There’s no need to maintain a complicated setup, Assistiv Labs remotely connects you to real assistive technologies like NVDA, JAWS, and Windows High Contrast Mode right in your browser. Every session starts from a new, clean slate, so you don’t need to reboot or adjust your browser and OS settings in between sessions either. If you don’t have any experience with testing with assistive technologies yet, Assistiv Labs also offers plans that include introductory assistive technology training and on-demand debugging help. (cm)


8. Page Speed Monitoring Made Easy

Are you looking for a web performance tool that provides you with all the necessary metrics in a developer-friendly way? Well, then Treo is worth taking a closer look at. Powered by Lighhouse, Treo lets you monitor your page speed with carefully crafted data visualizations that make it easy to make sense of the results.

Treo

Treo audits your pages in a stable, isolated environment, and while traditional web performance metrics are often technical and don’t reflect your customer’s journey, Treo puts special focus on user experience metrics. To represent your customers, you can also configure CPU power and network and choose between nine locations worldwide to avoid network latency and geo barriers. If you’re curious to see what this looks like in practice, be sure to check out the live demos. (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. 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
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#337: Design Inspiration

Tuesday, January 25, 2022

With miniature illustrations, Japanese Fireworks, CSS art, generative art and a free Mac screensaver. Issue #337 • January 25, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing

#336: Front-End Accessibility

Tuesday, January 18, 2022

With tips and advice from the community on improving accessibility by creating accessible and inclusive content and debunking accessibility myths together. Issue #336 • January 18, 2022 • View in the

#335: New CSS Adventures

Tuesday, January 11, 2022

With hand-picked CSS guides, inspiring talks, cross-browser tools and the latest CSS practices to dive into in 2022. Issue #335 • January 11, 2022 • View in the browser 💨 Smashing Newsletter Dear

#334: Getting Ready for 2022

Tuesday, January 4, 2022

With podcasts, mentorship, inspirational websites and self-reflecting yourself as the new year begins... Issue #334 • January 4, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

#333: Boosting Productivity in 2022

Tuesday, December 28, 2021

With advice on how to makie better estimates, achieving more productive meetings and useful checklists for a successful 2022! Issue #333 • December 28, 2021 • View in the browser 💨 Smashing Newsletter

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library

Invoke fun at work

Sunday, May 22, 2022

Issue 93: Fun and play leads to sustainable creativity ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The 7 Design Trends All the Spring Markets Agreed On

Friday, May 20, 2022

Plus, Victor Glemaud teams up with Schumacher, Hermès opens in Austin, and more news View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Shop, Flooring,

The Games Table Is Having a Moment—And We're All In

Friday, May 20, 2022

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

object-view-box, Inclusivity Audit, Page Transitions, Accessibility Illustrations, LCH Color Space

Friday, May 20, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 20 2022 First Look At The CSS object-view-box Property

Justina Blakeney on Defining Her Own Title, Her Debut AD Cover, and More

Thursday, May 19, 2022

Plus, 22 seriously inspiring staircases that know how to make a grand entrance (image) Architectural Digest AD PRO Logo Image may contain: Staircase, Banister, and Handrail 22 STUNNING STAIRCASES FROM

Platform Design, Naming Colors, Interactive Backdrop, Spreadsheet Concept, All at Once

Thursday, May 19, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 19 2022 A Growth-Focused Intro to Multi-Sided Platform

This Fashionable Luxury Retailer Just Launched a Home Category

Wednesday, May 18, 2022

Plus, the 9 best green paint colors designers turn to again and again (image) Architectural Digest AD PRO Logo pile of pillows outside LUXURY E-RETAILER MYTHERESA INTRODUCES A HOME CATEGORY—ZAHA HADID

116 / Designer starter resources, free loaders, notion templates and beautiful agency sites

Wednesday, May 18, 2022

Product Disrupt Logo Product Disrupt Half-Monthly May 2022 • Part 1 View in browser Image Designer Starter Pack Curated list of resources to learn Figma. Very useful to get started in Figma and handy

Unlock a New Member Benefit

Wednesday, May 18, 2022

Learn more about our free online courses ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌