Smashing Magazine - #364: Design and UX

With UX encyclopedia, authentication UX, data visualization, accessibility, and an exquisite look in Leonardo da Vinci's work. Issue #364 August 2, 2022 View in the browser 💨

Smashing Newsletter

Achchha din Smashing Friends,

August is usually a calmer time here at Smashing. We review, reflect and plan ahead. This year, however, is a little bit different than usual. We are working on a shiny new book, we have announced a few new online workshops, and we are running a few wonderful events:

Data Viz Project
Our upcoming community event: Smashing Meets, on Tue, Aug 23.

In this newsletter, we explore design and UX, with a UX encyclopedia, authentication UX, data visualization, accessibility, and an exquisite insight into Leonardo da Vinci’s work.

We hope you’ll find some inspiration in here — whether you are a designer by trade, or just tap into the realm of design every now and again. Happy reading, everyone!

Vitaly (@vitalyf)


1. The Science Of User Experience

As humans, we are full of cognitive biases and thought patterns that influence how we process information and, ultimately, how we act. When you’re about to start a system update, for example, and get a message that says, “You are about to start the system update process. The probability of permanent data loss is very low”, you will perceive the minimal probability of data loss much more intensively compared to a message that says “99% probability the operation will succeed”.

UX Core

The fact that we draw different conclusions from the same information is known as the Framing effect — one of the most important cognitive biases. Knowing about biases like that helps us better understand how the human brain processes information and makes decisions, which is crucial if we want to build better user experiences.

Wolf Alexanyan created a comprehensive resource to help us get to the bottom of biases and thought patterns: UX Core, a collection of more than 100 hands-on examples of cognitive biases in modern software product development. The accompanying UX Core Guide focuses on how to approach abstract, management-specific problems scientifically, away from personal opinion and closer to science and data. A treasure chest of knowledge. (cm)


2. Useful Data Visualization Resources

If you’re working on a project involving data visualization and you’re still lacking inspiration for how to best present your data, the Data Viz Project has got you covered. The site presents plenty of data visualizations to help you find the right visualization for your needs.

Data Viz Project

Apart from the usual suspects like grouped bar charts or pie charts, you’ll discover many rather uncommon types like sorted stream graphs, pictorial fraction charts, or convex treemaps. A fantastic resource you might want to keep close.

Once you’ve settled on a look for your data visualization, there’s the question of color. Color in data visualization can be intimidating: it needs to look nice, meet accessibility goals, and, depending on your project’s needs, it also needs to cover a broad set of use cases.

Matthew Ström presents an algorithm-based approach to picking color palettes that does the heavy lifting for you: simulated annealing. Perfect for finding good solutions to problems that have complicated criteria — not only picking colors. (cm)


3. Accessibility Beyond Compliance

Government agencies and civic tech organizations often see accessibility from a mainly legal perspective, as something that needs to comply with certain standards to prevent the entity from getting sued. However, this focus on legal ramifications instead of on the people who actually benefit from accessibility has limitations.

The Ad Hoc Accessibility Beyond Compliance
Playbook

To help entities adopt an Accessibility Beyond Compliance mindset, the team at digital agency Ad Hoc published a practical accessibility playbook.

The playbook explores several ways to improve accessibility by putting people first and thinking not just in terms of output but outcomes for your organization. It tackles everything from the immediate task of building accessible products all the way to creating a team of people that underscore an Accessibility Beyond Compliance approach.

Checklists with key questions to ask and common barriers to watch out for offer practical help on your accessibility improvement journey. (cm)


From our sponsor

Storyblok V2 Launch Event: Meet The Future Of Digital Storytelling

Storyblok V2 Launch Event
Storyblok is shaping the future of digital storytelling with the V2 release of their #1 rated CMS on G2. The release empowers businesses of all sizes to create and scale better content experiences across all digital channels. Find out what the future of digital storytelling looks like. Join us for the launch event.


4. Upcoming Online Workshops

That’s right! We run online workshops on 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.

Smart Interface Design Patterns
Meet Smart Interface Design Patterns, our 7h-video course with 100s of real-life examples on UI and UX. Free preview

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 an overview of our upcoming workshops:


5. Unlocking Leonardo Da Vinci’s Work

Codex Atlanticus is the largest existing collection of writings and drawings by Leonardo da Vinci. 1,119 pages strong, it is today preserved at the Biblioteca Ambrosiana in Milan. In collaboration with the library, The Visual Agency set out to give the century-old collection that spans everything from physics and natural sciences to architecture, applied arts, and human sciences a digital home. And, well, the result is an awe-inspiring data visualization mammoth project.

Codex Atlanticus

The digital version of Codex Atlanticus reveals the evolution of Leonardo’s thought over the years. Thanks to a clever system, it gives users both a general and a detailed look at the topics contained in its pages. Indicators give more information on the topics covered on each page and the proportion of the subjects discussed on the page, as well as the year of writing and page number in the original codex.

At the same time, you can quickly and easily find all the pages that discuss a specific topic. Is it bird’s flight that you’re interested in, or mechanics maybe? The project gives you the key to dive deeper into the works of the Renaissance genius. (cm)


6. Improving Authentication UX

The login screen might seem like a straightforward thing to built. However, there’s more to it than one might think. How do we create login screens and authentication experiences that master the balance between being secure and not alienating users with too much complexity?

App login design

Christian Beck summarized practical patterns, examples, and principles that help us create better login experiences. Joseph Russell also wrote a blog post on choosing the right user login option for an app in which he weighs up the relative merits of the most common login best practices.

We also see a strong trend of developers questioning the need for passwords for web applications. Armantas Zvirgzdas takes a closer look at what is wrong with passwords, the pros and cons of passwordless authentication, and how you can apply this approach to your own product.

Another fantastic read on the topic comes from Drew Thomas. He explores why it’s ok to rethink common password habits and use common sense to create usable, secure, and error-free authentication. Let’s improve the authentication experience! (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.


7. Historical Boundaries Map

Are you up for a little journey through time? Through cultures, kingdoms, and empires that existed centuries, even thousands of years ago? Then Point in History might be for you. Created by Hans Hack, the site visualizes the history of any point on the planet — from the beginning of humankind to today.

Point in History

To start your journey, click on a location on the map, and you will see the historical boundaries associated with it. Cultural boundaries dating as far back as to the Neanderthals, just like the country borders of today. If you want to learn more about a certain era, the map takes you to Wikipedia. A fascinating look at the world map and our shared history as humans. (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

#363: Friendly Little Front-End Tools

Tuesday, July 26, 2022

Useful little helpers for the command line, better thinking, maps, SVG, interface copy and timing. Issue #363 • July 26, 2022 • View in the browser 💨 Smashing Newsletter Dobar dan Smashing Friends, Who

#362: CSS

Tuesday, July 19, 2022

With defensive CSS, conditional styles, CSS styles queries and CSS variables secrets. Issue #362• July 19, 2022 • View in the browser 💨 Smashing Newsletter Buenos días Smashing Friends, The state of

#361: State of the Industry

Tuesday, July 12, 2022

With adaptive pointers, the state of design systems, front-end, component encyclopedia and service design tools. Issue #361• July 12, 2022 • View in the browser 💨 Smashing Newsletter Goedendag Smashing

#360: Web Performance

Tuesday, July 5, 2022

On priority hints, third-parties, speculative prerendering, dealing with LCP and preload scanner. Issue #360• July 5, 2022 • View in the browser 💨 Smashing Newsletter Namastē Smashing Friends,

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

You Might Also Like

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using

Bézier Curves, CSS Motion Extraction, CSS Testing, CSS Theming, Women Who Code

Monday, April 22, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 22 2024 Flattening Bézier Curves and Arcs minus-ze.ro