I've started publishing my “Introduction to human-computer interaction” slides as CC-licensed reusable teaching material. (My #OER debut!)
https://fietkau.science/teaching/intro_hci
I've been wanting to share these for more than a year. Doing that all at once felt insurmountable, so now I'm putting them up piece by piece over the summer. 
Two out of 15 sections are up and public now, feel free to browse!
If you follow me for fediverse stuff: this is my day job. 
Dear webmasters: If your website is multilingual and has language selection link somewhere, PLEASE make sure they actually take the user to the translated version of the current page, not just the homepage. It’s so frustrating because it forces the user to search for the translated page manually.
#Accessibility hive mind, I have some questions about #ChromeVox as well as #Chromebook accessibility & #usability in general. I'm working with a #PixelBook that has never been used. ChromeVox is telling me to use commands involving the search key as a modifier, but these seem not to work as any use of the search key invokes #Google #Gemini. What's going on here? Additionally, how are #blind people using #Chromebooks? In what tasks do they excel. In what tasks do they fall short? Any input and/or information would be greatly appreciated.
#Blind #BlindMasto #BlindMastodon #BlindFedi #a11y @mastoblind
I Want to Love Linux. It Doesn’t Love Me Back
https://fireborn.mataroa.blog/blog/i-want-to-love-linux-it-doesnt-love-me-back-post-1-built-for-control-but-not-for-people/
by @fireborn
Read this article! I promise this is not another “I’ve tried Linux but it is too hard” post but a very insightful and well-written piece on accessibility across the Linux landscape.
USABILITY TIP:
Do not show error messages that say “Something went wrong”. They frustrate users because they can’t take action about them. Instead, say: “You broke our app. It’s your fault. Write a 150 words apology in this box to continue:”
#ui #ux #usability #a11y
And look, I get it, git’s commands make perfect sense (and, dare I say, are elegant) if one thinks in directed acyclic graphs. The challenge is creating interfaces for all the folks who don’t think in directed acyclic graphs. Or, in simpler terms, a note from one of my earlier talks on design: “Your app shouldn’t look like your database just threw up.”
Which leads us to the difference between inside-out and outside-in design…
More: https://ar.al/talks/#superheroes-and-villains-in-design
Ich hab gehört, im Fediverse interessieren sich ein paar Leute für #Digitalisierung und #IT?!
Gut zehn Minuten Eurer Zeit für die Masterarbeit eines Freundes: eine #Umfrage zu #KI und #Chatbots in der Kommunalverwaltung.
#Datenschutz, #Privatsphäre, #Usability - was ist Euch wichtig? Sagt es ihm für seine Studie 
https://hcicaachen.fra1.qualtrics.com/jfe/form/SV_e8UNu6D47p2tHwO Boosting is sharing! Für die Forschung! 
#Web #usability and #accessibility ...
This is from crimethinc.com, but I'm not trying to pick particularly on them. There are many, many, many sites just as bad or worse.
This is a screenshot from an article on their site today, rendered in Firefox (Linux).
See the hair-thin font? See the fact that it's light grey on a white background? There's virtually no contrast between the text and the background.
This is an accessibility nightmare for those with any sort of vision problem. Picking the colour out of the screenshot (I didn't look at the CSS), it appears the text is basically 45% grey. This is ludicrous.
If the font face had some heft, it might be still be half-assed readable with contrast this low.
But as is... If I were to take my contacts out, I wouldn't even be able to tell that this screenshot *had* any of the normal-sized text in it, much less be able to read any of it.
Web designers, I beg you: please consider more than the appearance of what you're creating when you're making design choices.
Remember that not everyone is a 20- or 30-something with near-perfect vision.
Remember that people have cataracts or other types of eye cloudiness which necessitate high-contrast text to be able to read, even if they scale the fonts up by a huge amount.
Remember that vision degrades naturally in people in many ways other than "just wear glasses" can fix.
Bike rack producers: »Let's create more front wheel bike racks because – reasons.«
Cyclists using these bike racks:
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up, by @webdesignerdepot.bsky.social:
In #Munich, the surface metro is called "S"-Bahn and the underground is the "U"-Bahn. There's this elevator on my way to work that has these three buttons: "O", "S" and "U". Which one would you pick to get to the "S"-trains when you're coming from the "U"-trains?
Over and over I've seen tourists with suitcases make the wrong choice in this elevator. It bothered me so much that I've printed a label to fix the #UX of this #usability disaster.
It's been there for 2 weeks now 
Sometimes I’m playing with Kitten and something makes me smile. This time, it’s an error message. Always nice when you get a little hat-tip from past you to current you. Thanks for putting in the work, past me ;)
![Screenshot of a browser window showing the page at address https://localhost/patron/cs_test_a1ghlmjTxqnNUUHo41PvYu1lYx1sjA1igwYk2Um2TnyEmAlXaBMUooKy3m/:
500
TypeError: Cannot read properties of undefined (reading 'items')
Stack trace
From your app (lines 241-247)
@param { { subscription: import('stripe').Stripe.Subscription } } data
*/
html ({ subscription }) {
const subscriptionItem = subscription.items.data[0]
const patronageAmount = subscriptionItem.price.unit_amount * subscriptionItem.quantity /100
const subscriptionId = subscription.id
const subscriptionItemId = subscription.items.data[0].id
While running UpdatePatronageForm.html
in /patron/index_[id].page.js (line 244, column 43)
From Kitten (heading)…](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/268/843/666/014/035/original/ec68bc25e4f07f68.png "Screenshot of a browser window showing the page at address https://localhost/patron/cs_test_a1ghlmjTxqnNUUHo41PvYu1lYx1sjA1igwYk2Um2TnyEmAlXaBMUooKy3m/:
500
TypeError: Cannot read properties of undefined (reading 'items')
Stack trace
From your app (lines 241-247)
@param { { subscription: import('stripe').Stripe.Subscription } } data
*/
html ({ subscription }) {
const subscriptionItem = subscription.items.data[0]
const patronageAmount = subscriptionItem.price.unit_amount * subscriptionItem.quantity /100
const subscriptionId = subscription.id
const subscriptionItemId = subscription.items.data[0].id
While running UpdatePatronageForm.html
in /patron/index_[id].page.js (line 244, column 43)
From Kitten (heading)…")
Dear #Microsoft , your #MSWindows #GUI insists on having window borders measuring 1px wide, which we get to grab to resize the windows. With a mouse that seems easy. Try again using a touch pad when cold and shivering, or tired, or in a dusty machine mill with a trembling floor. Don't even get me started on people suffering central tremors, cerebral palsy, or other physical limitations.
#usability #accessibility
Recent datepicker experience:
1. Control is presented as three separate spin controls, supporting the Up/Down Arrow keys to increment and decrement the value as well as manual typing. But because they're not text inputs, I can't use the Left/Right Arrow keys to review what each separate one contains, only to move between day, month, and year.
2. I tab to year.
3. I press Down Arrow, and the value is set to 2075. I'm unclear how many use cases require the year to be frequently set to 2075, but I can't imagine it's many so this seems like a fairly ridiculous starting point.
4. I press Up Arrow, and the value gets set to 0001. The number of applications for which 0001 is a valid year is likewise vanishingly small.
5. I delete the 0001, at which point my #screenReader reports that the current value is "0". Also not a valid year.
6. Out of curiosity, I inspect the element to see which third-party component is being used to create this mess... only to find that it's a native `<input>` with `type="date"` and this is just how Google Chrome presents it.
A good reminder that #HTML is not always the most #accessible or user-friendly.
Microsoft war mal Vorreiter bei UX & Usability. Die Älteren unter uns erinnern sich noch.
Dieses Fenster kommt beim PC-Start und enthält keine klickbaren Elemente.
Angemessene / dynamische Schriftgröße Textumbruch Scroll-Leisten Kontrast und Ausrichtung des Fenstertitels 1px-Rahmen zum Vergrößern
Das muss wohl dieses Copilot-Vibe-Coding sein!
(ja, dieses Windows ist auf 100% Textskalierung eingestellt!)
Alternativen zur Google Suche
Vielen fällt der Umstieg auf andere Suchmaschinen schwer und ich verstehe das Problem nicht.
https://kaffeeringe.de/2025/03/27/alternativen-zur-google-suche/
It seems that #Scrum / #SAFe websites are terribly afraid of C&P and are perfectly fine throwing #Usability and #UX out of the window
https://framework.scaledagile.com/ adds a multi-line html formatted copyright notice to anything you copy
var pagelink = "
© Scaled Agile, Inc. ...";
var copytext = selection + pagelink;
Brand new infrastructure in Fairview, Dublin. Zebra crossing over cycle path. Onto that knobbly surface for blind users, to show them pedestrian crossings. This surface guides them past the footbridge and into a crossing that doesn't exist over a 5 lane road. The non crossing also has a barrier, directly in front of them. It's a disgrace
#dublin #usability #accessibility #urbanDesign
New washing machine was installed yesterday and today I’m seriously considering making a spreadsheet of all the programmes. Or maybe an iPhone app.
30 years ago on my Human-Computer Interaction post-grad we studied the usability failings of VCRs. It appears that washing machines are the rightful heir to this infamy.
The manufacturer is clearly aware of this as the machine has a “fuck it / don’t care” button.
Designing Safety-critical #interface s entails proving the #safety and operational #usability of each component.
See this experimentation-based
#typographical #design #study for safety-critical contexts.
https://enac.hal.science/hal-01022511/file/Legible_are_you_sure-.pdf
It lead #Airbus to engage a group of designers to create a special #truetype #font, called B612. You can use #B612 for free:
https://b612-font.com/
