Smashing Magazine - #405: UX and Interface Design

UX metrics, golden rules of design research, B2B interface, guide to animation, enterprise UX and designing for attention. Issue #405 May 16, 2023 View in the browser

Smashing Newsletter

Iyi akşamlar Smashing Friends,

Designing complex interfaces has its own rules and conventions. You won’t find much whitespace in enterprise applications, and when it comes to B2B environments, it’s difficult to get access to users to run usability testing.

Plus, you need to continuously track the impact of your UX work on business KPIs. In this newsletter, we’ll explore UX guidelines and strategies to better navigate in such environments.

SmashingConf SF 2023
Coming up next week, May 23–26: SmashingConf SF, all around cutting-edge frontend.

When it comes to complex interfaces, we are getting ready to dive deep into front-end and tooling, with a few lovely events and sessions:

In the meantime, let’s dive into some of the useful UX gems and pointers to better cope with the enterprise UX world!

Vitaly (@vitalyf)


1. Designing Complex Data Tables

Enterprise UX means that a lot of complex data needs to be displayed — be it in dashboards, internal tools, or web apps. Tables in different forms and variations are usually the number one choice to help users make sense of data. So what do we need to consider when designing complex tables?

Enterprise UX: essential resources to design complex data tables

Stéphanie Walter put together a useful list of essential resources and blog posts that help you design complex tables with a lot of data and interactions. It covers table design basics and specific table patterns, just like designing data tables for enterprise apps and how to fit tables with a lot of content in any screen size. (cm)


2. Ultimate Guide To UI Animation

Getting UI animation right can be an art. It needs to feel natural and be unobtrusive enough not to distract users from the task they want to perform. But how to achieve that? Taras Skytskyi wrote a practical guide to using animation in UX, covering all the rules and principles you need to be aware of to create delightful animation effects that, well, feel just right.

The ultimate guide to proper use of animation in UX

The guide explores animation duration and speed, easing, and choreography. You’ll learn to adapt your animation to different screen sizes and platforms, how to read animation curves, and how to guide your user’s attention when transitioning from one state to another. The guide doesn’t cover specific use cases but rather universal principles that you can apply to all kinds of interface animations. Handy! (cm)


From our sponsor

Reduce Your Design Workload By 50% With Supernova

Supernova
Unlock your design system’s full potential with Supernova’s end-to-end platform. Streamline your design workflow, document better, and deliver exceptional user experiences.We’re also introducing our new integration with Tokens Studio. Discover how it enables a seamless sync between Supernova and Figma. Try Supernova today and elevate your design system!


3. Designing B2B Interfaces

Imagine you want to book a train ticket. As a consumer, you’ll want the simplest experience possible. But if you’re an employee of the railway company who uses the booking interface all day, you need a lot more information than a consumer. ‘Simple’ won’t cut it for you. You need a product tailored to your specific professional usage.

Designing For Experts 101

So how can designers find the sweet spot between not too simple and not too complicated? Morgane Peng introduces a strategy that helps you design relevant products while taking people’s business and interface expertise into account: the UX Efficient Frontier. It allows you to consider your users’ expertise levels and tackle projects differently depending on their audience. A great reminder that ‘efficient’ is not always simple and ‘simple’ is not always efficient. (cm)


4. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. 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
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


5. Golden Rules Of Design Research

The importance of user research has gained more and more attention lately, and design teams have embraced the idea that they truly need to understand their customers to create products that matter. However, there are still some myths and misconceptions about user research. To correct them, Erika Hall summarized nine golden rules of successful research.

The 9 Rules of Design Research

The nine rules help you adopt the mindset you need when conducting user research. It’s about being comfortable with being uncomfortable, knowing your goals and finding good questions, embracing imperfection, collaboration, and learning how your leaders make decisions before you try to use data to influence those decisions. Valuable tips that help you get the most out of user research. (cm)


From our sponsor

Creative Commerce Without Limits

Swell
Swell is powerful and flexible commerce infrastructure for innovative developers, agencies, and brands who want to build world-class buying experiences. Smashing Magazine chose Swell so they could smoothly adhere to global tax regulations, easily manage memberships, and fulfill separate bundles. Read Swell’s case study.


6. How To Measure UX

Perhaps you’ve already been in a situation where a decision-maker rejected a great design because they had a bad day. Or maybe you pushed a solution forward without being aware of critical flaws that ultimately cost your project a fortune. To help you minimize the risks that human bias and non-objective evaluation can pose on UX design, Roma Videnov wrote a comprehensive guide to measuring UX.

Measuring UX: Your First Step Towards Objective Evaluation

The guide dives deep into UX benchmarking, scoring, and analysis and elaborates on four UX metrics: UMUX-L, Levels of Success, Time on Task, and Single Ease Question. Some of them require basic knowledge of how data is processed, but no worries, you don’t need to know about statistics; Roma explains everything that’s important in common words to get you up and running quickly. A must-read for every UX designer. (cm)


7. Designing For Realistic Attention

Most people only scan the content of a page rather than reading it word by word. In fact, Christopher Butler estimates that 80% of your page’s visitors are scanners and that 20% at most will read. So how to structure a page to make sure that your design efforts serve 100% of your audience?

Designing For Realistic Attention

In his post “Designing for (Realistic) Attention,” Christopher shares practical tips for structuring a page to better signal to scanners what it contains, whether it is relevant to them, and what they should do next. He dives deeper into arranging visual elements to communicate context and explores how subtle indentations and outdentations effectively guide a user’s understanding of a page — even if they only scan it. (cm)


From our sponsor

Northwestern’s Online MS In Information Design And Strategy

Northwestern’s Online MS In Information Design And Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more →


8. Spotify Ways Of Working

Design is a collaborative effort. However, with designers spread out amongst cross-functional teams, multiple product areas, and perhaps even countries and time zones, a lot of work happens in isolation, particularly during the UI design phase.

Spotify Ways of Working

To make UI design more interconnected and participatory, Spotify Design introduced an organization system for Figma: “Spotify Ways of Working.” It helps speed up the design workflow and organically exposes designers to their colleague’s work to ease collaboration and prevent inconsistencies in the design.

If you plan to create a Figma organization system for your team, too, Cliona O’Sullivan and Barton Smith share valuable insights into how Spotify Design tackled the task. They take a closer look at the goals they set for themselves, the challenges they faced, and how they managed to create a system that truly suits the needs and culture at Spotify. (cm)


9. New On Smashing Job Board


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

#404: Front-End Tooling

Tuesday, May 9, 2023

DevTools tips, fluid type scale, Terminal explained, HTML email, better mobile input and fluid CSS grid. Issue #404 • May 2, 2023 • View in the browser Smashing Newsletter Cagā dina Smashing Friends,

#403: Advanced CSS In 2023

Tuesday, May 2, 2023

Advanced CSS techniques with container queries, :has() selector, CSS text balancing, a combined CSS-aspect-ratio-grid and new color formats in CSS. Issue #403 • May 2, 2023 • View in the browser

#402: Useful Figma Plugins and Tools

Tuesday, April 25, 2023

Figma design specs, skeleton screens, handoff helpers, design systems, embedding ChatGPT into Figma and Figma templates. Issue #402 • April 25, 2023 • View in the browser Smashing Newsletter Bom dia

#401: Web Performance

Wednesday, April 19, 2023

Optimizing time to first byte, debugging CLS, optimizing LCP, React DevTools, priority hints and low-hanging web performance fruits cheatsheet. Issue #401 • April 18, 2023 • View in the browser

#400: Useful Templates For UX Designers

Tuesday, April 11, 2023

With usability testing Notion templates, UX research templates, UX questions bank and tools for better thinking. Issue #400 • April 11, 2023 • View in the browser Smashing Newsletter Selamat petang

You Might Also Like

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Small teams

Thursday, December 19, 2024

Issue 224: Why the mentality of lean and small always wins ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏