Pixels of the Week – August 20, 2023

On Twitter, LinkedIn, and Mastodon, I share curated articles I read, resources and tools about UX Design, User Research, UI and mobile design, HTML, CSS, the web industry, some processes, some inspiration, etc. This is an archive of everything I shared this week. And some extra links that I decided to only share for the blog readers. Also, subscribe to the newsletter to get notified when those are published!

Now: what I’m currently up to

I’m current working on a new version of our cognitive bias cards: new design, new content for some and a new easier way to print it at home, with some folding (and glue coming next) involved. I’m at the “prototype phase”, I’m happy to report the “print and fold” works nicely. I will launch those soon in the shop, so, stay tuned. Also, newsletter subscribers will get a discount (like you always do when I launch a new template). Just saying.

Also, August 31, I’ll be talking in Zurich at Front Conference. I’ll be around for the 2 days, and I will bring stickers hehe. If you want to chat and say hi, reach out!

Interesting frameworks and concepts

An alt Decision Tree: a useful tool to decide if you need an alt text or not for that image. Also remember, if you don’t it means you keep the alt empty, you still require the tag.

TL; DNR: the one you should not miss

3 questions to evaluate design patterns and avoid unnecessary work that degrades UX (4min) The purpose of design is to solve actual problems, so, when facing a new “trend” or pattern, ask yourself:  1. does research show this pattern solves a problem? 2. are there any potential usability issues with this pattern? and 3. how much effort is it to build?

Interesting articles that caught my attention

UX research, design, etc.

• Accordions on Desktop (17min) great tips to understand how to use accordions, when to use them and make it work to users
• UX is Not Dead, It’s Just Misunderstood (12min) let’s discuss user advocacy in business and how to align departments toward prioritizing users for meaningful and impactful outcomes.
• Nostalgia in UX Desig (10min) nostalgia explained through the prism of psychology, and how we can embrace it in our designs. It needs to be user-centric, innovative (no limitative), coherent, and inclusive.
• The problem with disabling paste and what to do instead: disabling paste in form fields is annoying and prone to errors, instead, get an email verification step, a “check answer” page, or a password reveal button.
• Define Value Beyond “faster-easier-efficient-scalable” (4min): there are different ways to calculate value. Our goal, as researcher, is to measure how well a solution supports a person addressing their goal, their way. Not just “faster, easier, more efficient and scalable.” The goal is to move the needle to increase the ways you provide honest value.

Accessibility

• Heading off confusion: When do headings fail WCAG? (10min): bringing back some older article, because it’s still relevant. Even if not ideal, skipped heading (like H1 then H3) is not an accessibility failure. That being said, if you can avoid it, avoid it. Illogical heading order and non-descriptive ones are thought.
• Best practice for TV user interface accessibility (15min) 16 principles (derived from WCAG and some other guidelines) to help you make TV apps more accessible, from screen reader support to keyboard navigation support, use of colors, contrast, focus indicator and more.
• Subtitles are standard: mainstreaming accessibility (7min) When accessibility practices become standard, everyone benefits. Well, I guess, Nolan’s movies being created for the best experience in the best movies theaters is kind of a good metaphor for some websites that were designed for a giant macbook pro with a lot of CPU, not giving a damn about the rest of the actual users.
• New Threads app fails accessibility test (10min) so, Threads is a case study of everything that you can do wrong when launching a new product, when it comes to accessibility?

Inspiration: fun experiments, beautiful art, and great ideas

Meet Ben & Jo, a creative agency from Strasbourg, France (yeahy) who creates beautiful colorful branding, packaging and more

Useful tools & resources

• Shots.so: an online tool to put your screens into mockups to present your work on mobile, desktop, etc.
• Mood2Movie: don’t know what to watch tonight? This tool lets you find movies based on your mood. It offered the Lion King when I picked “tense”, yup, I think that hakuna matata song would be perfect.
• Sticky! a nicely designed semi transparent sticky note app. Is it strange that I find that semi transparent design soothing, while I hated windows Aero? Also, the sounds are cute.

Cool and Interesting Videos

• Breaking Conventions with The Legend of Zelda: Breath of the Wild an awesome panel on the creation of the previous Zelda game. I love the part where they explain how they attached “physics” properties to objects to bring all the magical interactions of the game.
• Cities Aren’t Loud: Cars Are Loud: an example of what happens when noise pollution is taken seriously, with the example of the city of Delft (Netherlands)
• Check out these wild predictions from 1978! I love this: we are bad at predicting the future, but it sure makes fun YouTube videos 45 years after. So, keep this in mind, the next time you hear some guy telling you what the world in 2050 is going to be like: it seems entirely possible that some of the most dramatic changes are coming in areas where we don’t expect them, while some of the things we think are going to change the most, are actually just going to continue to plot along in the same old way for the next few decades.

Tutorials

• Quick Figma Color variable tip:  Don’t select each element individually -make a bulk selection and jump to “Selection colors” at the end of your properties panel. Easy and efficient!
• A Blog Post With Every HTML Element that’s quite fun, there’s a few I didn’t know existed
• Designing Accessible Text Over Images Part 2: even more techniques when you want to have text over images: framing the image, soft colored gradients, playing with style and position, playing with shapes, etc.

Latest news in the industry

What happens when thousands of hackers try to break AI chatbots: “I told the AI that my name was the credit card number on file, and asked it what my name was,” he says, “and it gave me the credit card number.”. I’m super interested in how the field of security will evolve with those tools. And meanwhile, DOD Announces Establishment of Generative AI Task Force. Yep, that makes sense.