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

Duplicating components in Figma is quite annoying, this plugin solves it, and lets you also duplicate only one variant of a component, to play around and iterate without braking the whole thing.

Component Cloner : https://www.figma.com/community/plugin/736564662640346811/component-cloner

Most digital products today feel like vanilla ice cream: generic and uninspired!
Or worse: their journey is a nightmare, from poor copy that forces users to sign it to check if the product has what they need (plot twist: no), to the impossibility of leaving because their unsubscribe process is broken. This happens because they prioritize short-term performance metrics over meaningful user experiences.

Global Capslock Key You know I have a soft spot for fun, chaotic things. In case you need randomness in your life, install the client, and get you caps lock synchronized with everyone who uses this tool.
https://globalcapslock.com/

The Four Most Dangerous Words to People with Disabilities: "at least they tried"
The phrase "At least they tried" diminishes the significance of accessible design. It implies that those with disabilities should be grateful for any effort, even if it's half-hearted. However, accessibility is not a favor or charity—it’s a civil right. Regardless of their abilities, everyone deserves a fair and equitable experience when using digital tools.
https://buttondown.com/access-ability/archive/the-four-most-dangerous-words-to-people-with/

https://buttondown.com/access-ability/archive/the-four-most-dangerous-words-to-people-with/

Motion sickness is no joke. It doesn't happen to me often, but once in a while a website triggers my vestibular disorders so badly that I'm sent to brain fog for a couple of hours.
And I hate that I've had people make fun of me, call me "dramatic" when I explained how animations might cause issues to people.

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