Notices by Stef Walter (stephaniewalter@front-end.social)

I love cute subtle animations. Dmytro Tovstokoryi created this set of beautifully crafted animated icons
They are available under MIT Licence.
Full project: https://icons.pqoqubbw.dev/

I think I've reached the point of AI fatigue, where I can't read yet another article on how AI will kill my job.
So, my 2 cents: my job is about understanding people, processes, services and businesses. No AI can do all of that. We will adapt. Chill, breath, it will be alright.

Looking for a monospaced pixel font with a lo-fi technical vibe, serving old school interfaces? Meet Departure Mono. I love it soooo much!

https://departuremono.com/

A more accessible version of xkcd that offers some transcript for the comic strip, a dark mode, and a link to an explanation in case you didn’t get the reference. Love it. By @mayank
https://xkcd.fyi/

Draw an iceberg and see how it will float! We often draw icebergs vertically, with a little tip above the water, and a giant part under the water. This doesn’t work, it wouldn’t float, because of mass distribution. If you want to have fun, draw your best iceberg, and see how it would actually float!

https://joshdata.me/iceberger.html

Dark Patterns Hall of Shame is a place that collects deceptive patterns and exposes how they are trying to manipulate users: bait and switch, nagging, confirmshaming, primary zuckering, disguised ads, roach model, hidden costs, sneak into basket, misdirection and trick questions.
Resource: https://hallofshame.design/collection/

Brandur wrote a really nice tutorial on how to implement a dark mode, that uses prefers-reduced-motion and some local storage, plus some JavaScript to make a tri-state toggle to keep user preferences between always light, always dark, and follow device theme. Here you go: https://brandur.org/fragments/dark-mode-notes

Love it, especially since some of you asked for one, when I wrote Dark mode & accessibility myth (https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/) and explained it’s good practice to let user chose between dark and light mode.

How to design accessible forms in 10 steps?
- break long form into smaller ones
- provide a label for each field
- use text hint instead of placeholders for format and help
- use HTML5 native form controls when possible
- highlight elements on focus (and make sure the color of the focus follows WCAG standards too)
- help users recover from error with good styling and error messages
https://uxdesign.cc/how-to-design-accessible-forms-in-10-steps-22232d65de18

Designing a pronoun selector isn’t just about ticking a box for inclusivity — it’s about respecting your users. Do you really need a pronoun selector (aka, ask the why behind this information), avoid “other” option, allow for multiple pronouns, let people add tier custom, try to prevent misuse.

For more guidelines, check Asking users for their pronouns: A guide for UX designers, by Chelsea Roden (18min) https://uxdesign.cc/asking-users-for-their-pronouns-a-guide-for-ux-designers-4f31736ae808

What does a PIN Number and a PDF Format have in common? They both suffer from RAS Syndrome, also known as Redundant Acronym Syndrome. It’s when an acronym is followed by a word that is also part of the acronym, and there’s quite a couple of them.

Full details and more examples on Sketchplanations: https://sketchplanations.com/ras-syndrome

I lost my example of "a blog with a save for offline button that lets you read even when there is no connection". Anyone has seen (or implemented on your blog) one of those recently? You can totally plug your own content here if it has such feature!

No, AI user research is not “better than nothing”—it’s much worse
According to @PavelASamsonov, synthetic insights (AI user research, without talking to actual users) are not research. An LLM can’t talk about the last time it had to accomplish a task. Using AI instead of actual users, leads to “commoditized” products that all look the same, yet don’t really solve real users problems and lack a unique selling proposition that will differentiate them on a market.
https://uxdesign.cc/no-ai-user-research-is-not-better-than-nothing-its-much-worse-5add678ab9e7

This is your monthly reminder that you should stop using placeholders in text boxes.
HTML placeholders are not labels, and shouldn’t be used as such.
Here are a couple of issues with them, according to Daniel Berryhill:
- They disappear upon input, so, you are forcing people to remember what they are supposed to fill.
- They might be confused with pre-populated data, so the user might wonder “wait do I need to fill this?” or skip it, thinking it’s filled.

Something I wish was thought more to junior designers, but even seniors struggle with: It's okay to start with a stakeholder's solution. Just don't stop there.
You can't build great products if you don't treat people as partners. Our job, as designers is to balance all of it: stakeholder vision, users needs (I put accessibility in this), business requirements, while working in the constraints of legal, and sometimes technical ones too (I might have forgotten a few).

https://grillopress.github.io/2024/01/24/it-s-okay-to-start-with-a-stakeholder-s-solution-just-don-t-stop-there.html

I've updated my accessibility for designer kit:
- the checklist now has the AA WCAG2.2 criteria
- new component to annotate mockup areas (landmarks for example)
- a list of resources, to help you dig further in each topics
Get it here: https://shop.stephaniewalter.design/b/accessibility-interactions-designer-checklist-annotation-kit

👉🏻 Curated weekly UX, Design & Tech resources:
- universal design methods
- improving UX job interviews
- the good old "use your common sense" UX trope
- scroll jacking
- accessibility and AI
- color contrast
- the psychology of rock paper scissors
- mapping where the earth will become uninhabitabl
- free UI/UX books
- Figma variables resources
- product roadmap
- WordPress accessibility
- the shrinking demand for AI tools

https://stephaniewalter.design/blog/pixels-of-the-week-august-27-2023/

Free Faces: https://www.freefaces.gallery/
A repository of free fonts you can use for personal and commercial projects, categorized by type (cursive, display, monospace, etc.)
#Typography #Fonts