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:
- Smashing Hour with Yiying Lu, an award-winning designer and illustrator, on Wed, August 17,
- Smashing Meets Goes Data all around Data Visualization, on Tue, August 23
- SmashingConf Freiburg 2022, an in-person conference on front-end and UX in Germany, on Sep 5–7.
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”.
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.
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.
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)
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 — Videos, a 9h-video course with Vitaly Friedman,
- Smart Interface Design Patterns — UX Training, 9h-video course plus 8 × 2h live sessions, on Sep 9 – Oct 7.
As always, here’s an overview of our upcoming workshops:
- Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27
- Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5
- Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14
- Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14
- Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18
- Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18
- Jump to all 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.
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?
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)
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.
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)
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).
- Design Systems
- Lovely Little Websites
- UX Guides, Templates and Career Ladders
- Useful Front-End Tools
- Design Systems
- Data Visualization And Dashboards
- Designing For Mobile
- Design & UI Inspiration
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.