Show older

23. don’t interrupt flow of thought. if a user is opening an application, they usually have some specific task to complete. nagging them at this point in time about software updates or handy tips is very user hostile.

24.many jokes are made about the “save” icon looking like a floppy disk. it’s very appropriate, since the command as a concept is built around the technological limits of floppy disks, limits that are comically irrelevant in the 21st century.drag your app out of the 1980s and implement autosave and version control already.

25. consistency consistently consistent. there’s few things more fun than designing your own custom ui widget toolkit, css framework, or interaction paradigm. however, please strongly consider *not* doing this. custom UI is like ugly baby photos. instead, stick as much to the HIG guidelines and conventions of the platform you are on, so users can use what they’ve already learned about where things usually are, and what the fuck the weird molecule icon does.

26. try to imagine ways to use your shiny new software to abuse, harass, stalk, or spy on people, especially vulnerable people. ask a diverse range of people to do the same.
then fix it so you can’t. if you cannot figure out how to do your special software thing without opening vulnerable people to abuse, consider not making it available to anyone.

27. UX is ergonomics of the mind (and also body). Where traditional ergonomics considers the physical abilities and limits of a human body, UX considers the limits of the human mind: attention, memory, response time, coordination, emotions, patience, stamina, knowledge, subconscious, and so on. If you ever find a UX practitioner sacrificing accessibility on the altar of so called “good experiences”, you are dealing with incompetence.

expanding on 1. Natural Mapping:
user interfaces typically “map” to the system they control, each button and dial corresponding to some element of the system. Natural mapping is when the interface forms an obvious spatial relationship to the system, such as 4 stovetop dials that are in the same arrangement as the stovetops. the anti-pattern is arranging controls in an arbitrary order with no spatial correspondence to the system.

2. Visibility of System State:
Software typically has state (to state the obvious), such as “where” you are in the software’s menu system, what “mode” you are currently in. whether your work is safely stored on disk or has “unsaved changes”, what stage of a process you are up to and how many steps are left. Failure to effectively communicate system state to the user is inviting them to get lost and make mistakes. counterexamples: setting the time on a digital wrist watch, programming a VCR

3. Discoverability
this is about making the possible actions in a system visible- or if not immediately visible, the mechanism of their discovery should be visible and consistent. For instance, the menu items in a GUI system are discoverable. the available commands in a unix system are not. the opposite of this principle is “hidden interface”, examples of hidden interface are rife in iOS: tapping the top of the screen for “scroll to top”, shake to undo, swipe from edge for browser back- etc.

4. Constraints and Affordances.
A constraint is something that is not possible in a system. an affordance is something that is possible to do. which is which should be communicated clearly- the nature of this communication breaks down into three subcategories:
a. physical:
visually obvious from the shape of objects in a system- two lego bricks can only snap together in a limited number of ways.
b. logical: what’s possible or not makes sense logically: e.g. color coding,
c. cultural

constraints and affordances is at the heart of the “flat design” vs. “skeumorphism” debate. the benefit of skeumorphic interfaces is that replicating the look of real world objects like buttons, provides a natural way to communicate interactions. where skeumorphism went wrong is communicating false affordances: a detail in the ios6 calendar app hinting that pages could be torn out- when no interaction supported it.
flat design throws the baby out with the bathwater. we still need real buttons.

5. Habits and Spatial Memory
this is mostly about not arbitrarily moving around.buttons in an interface. people are creatures of habit, and if you fundamentally change the method of performing a task for no good reason, it’s not a “UI revamp” it’s pointlessly frustrating your existing users.
for spatial memory, millions of years of evolution have left us with mental machinery for remembering exactly *where* something is physically. you can take advantage of this in UI with persistence of space.

an example of this persistence of space concept is the meticulous way some people curate their phone’s launch screens. even better would be if iOS allowed a different wallpaper for each page, and for icon grids to permit gaps anywhere instead of forcing them to sort left to right, top to bottom. the different look of each screen could then be very personal and memorable. Finding an app, then, a matter of finding the page with the right color and shape.

6. Locus of Attention
this is a recognition of the fact that human consciousness is single threaded. that while parallel processes permit us to do things like walk and chew gum at the same time, there is only one thread of processing that represents our conscious awareness. therefore, interfaces that expect our attention to be fully present in the status bar, the cursor, the flashing banner ad, the address bar, the lock icon, the autoplaying video and the notifications are misguided.

7. No Modes
A Gesture is an action (a keystroke, a mouse move) expected to result in some effect (a letter being added to a document, a cursor moving).
A mode changes the effects associated with some or all gestures. caps lock is a mode. “apps” are modes. Modes are bad if they result in modal error: the unawareness that a mode has been activated, resulting in unexpected effects, and possibly unawareness it *is* a mode, or how to get out of it. VIM is prime offender. so are modern TVs.

modes are typically employed as solutions to the situation of the number of functions in a system far exceeding the number of available external controls. this can happen either as a result of featuritis, or an apple-esque fetish for small numbers of buttons.
suggested remedies include quasimodes like the shift key, that activate a mode only while a button is being held down. another approach is developing composable UI conventions like GUI menus, or search, that can scale without modes.

another way of looking at this is examining how much context a user needs to understand what effect a gesture will have, and how effectively that context is being communicated. Can i write a step for step guide to doing a task on a computer, for a computer novice, that doesn’t include first determining where in the operating system you are, whether the correct application is open, figuring out which of many methods can get you into that apllication are applicable in that situation?
no.

this is what was nice about the “home” button on iphones: it doesn’t matter where you are in the system, there’s a physical hardware clicky button that will always bring you back to the start, and cannot be overriden by third party software.
apple ruined it with the iphone X swipey home gesture. not only is it hidden interface, but it’s modal now-which edge you swipe depends on the orientation sensor, and is —- sometimes but not always visually indicated by a line that is maybe correct.

8, Fast Feedback 17. Consider the 3 important limits of your user's patience:
0.1 second, 1 second, 10 seconds

nngroup.com/articles/response-

why is this important? because without fast and constant communication, the UI will feel broken. it’s why a chattering cli log *feels* faster than a crawling progress bar. the gui might, on stopwatch time, be faster than the CLI, but time *perception* works differently, it works with feedback and delays.

28. making your software configurable/customisable allows you to accomodate more diverse users, but it also makes your software more complicated and harder to document and learn, since a configuration is a kind of mode.

29. Never use a warning when you mean “UNDO”.
while there are many actions you can take on a computer that are non reversible, most of the ones with confirmation dialogs truly are reversible. these boxes should only be used when absolutely necessary, and seriously rethoghr even then. the unfortunate side effect of their overuse has been alert fatigue: people have become accustomed to their typical meaninglessness and dismiss them without reading, even important ones

web.archive.org/web/2020033119

30. Avoid alert fatigue at ALL costs.
imagine the marketing department got their hands on the fire alarms. they would almost certainly use them every day to gather the entire building to one spot, and megaphone about the latest 30% off sale at Myer.

when there’s something actually important, like a real fire, people would die, and it would be marketing directly responsible for those deaths.

this is why letting app developers register notifications on your phone was a huge mistake.

31. don’t rely on the user to have fast reaction times, or high levels of hand eye coordination. this is as much an accessibility guideline as it is a usability guideline. Primary offenders are things like double clicks, rapidly changing search results, drop down menus, popouts that rapidly appear and disappear, and in general bait and switch buttons.

32. don’t confuse a steep learning curve for bad UI. don’t confuse something that is just similar to what you’re used to for good UI. Don’t confuse the level of pain you went through to learn something with its intrinsic worthiness. The only “intuitive” interface is the nipple.
(not actually true, there’s a whole job for teaching babies how to breastfeed, but that’s the catchphrase for this one, sorry.)

33. the subjective experience of a UI is often vastly different from the objective reality of the system, particularly with regards to perception of time and mental models about what the computer is actually *doing* and how it works. The Watched Kettle effect. For instance, shortcut keys *feel* faster but are measurably slower than just using menus. A file copy routine can be made as fast or slow as you like but the *perception* of its speed is down to how the progress bar is animated.

34. The user maintains a mental model of the system in their mind, a representation of the way the system works that helps them percieve situations, respond to situations predict outcomes and solve problems. It’s the software UI’s responsibility to either help the model become more accurate, or intentionally abstract and deflect the mental model from the truth. A user with a wrong mental model making an inaccurate prediction leads to user frustration.

35. the brain structures responsible for human memory and perception of time are wired directly to the amygdala: the seat of human emotion. a session at a computer will be represented by an episodic memory, regulated by the user’s emotional state at different points in time. frustrating experiences will be represented more prominently in memory than “average” experiences. the last experience in the episode is more prominent than experiences in the middle. our memory is structured narratively.

an amusing consequence of #35 is what a study about colonoscopies can teach us about software interfaces.

fool.com/investing/general/201

#36. the law of conservation of complexity. Every system has an irreducable minimal amount of complexity. The only question is, where will you put the complexity? on the user, the application developer or the platform developer?

#37. lawsofux.com contains another numbered list of of principles that amazingly mostly does not overlap with this one.

#38. Gestalt, or “the sum is greater than the parts” refers broadly to the repertoir of tricks the human mind has for completing patterns from incomplete evidence. I could go on and on about it, but i found this great article summing it up along with examples of how it applies to various UI situations

uxdesign.cc/ux-psychology-go-h

#39. this might seem obvious, but it’s violated enough times to make it worth saying: if you’re making a UI for a touch screen, make the buttons big enough for adult human fingers. Apple reccomends at least 40x40pts

#40. Convention over experimentation.

There are many arbitrary decisions in UI design. for example: where to place the search bar? fundamentally, it doesn’t matter what you do, but if there’s an established convention please use that. Place the search bar on the upper right hand side of your global nav; not because there’s science to back that up but because if you put it there I’ll be able to guess where it is. that’s where most sites put it. Don’t make me search for search.

41. Dark Patterns
Dark patterns refer to the repertoir of UI designs and techniques intended to trick or coerce a user into doing things or agreeing to things either with or without their knowledge. a windows prompt that registered closing the window as agreement to upgrade, prompts that give only the choices “ok” and “later”, or sign up sheets that hide the “skip uploading my contacts” link with a small dim font (twitter). If you do any of these, I think you’re probably a rapist too.

I don’t say that last part to be hyperbolic. lack of respect for other people’s consent runs deep and affects everything you do. Implementing a dark pattern is a fucking sign.

42. for legible body text, optimal line length is 60-70 characters per line. no fewer than 35, no greater than 80. going longer than these ranges makes it difficult for the eye to track back to the beginning of each line. go shorter and reading becomes stuttered, like reading a telegram. or a toot.

43. The web, and UI frameworks will fight you on this, but if you establish a vertical rhythm in your typographic grid, you’ll increase the feeling of unity in the design and help the eye flow better across the design. Choose a verrical spacing that suits the size and style of your main text font. there’s no hard and fast rules, but it’s good to aim for the vertical spacing to be around 1.33-1.5 the point size of your body text. heading sizes can be neat integer multiples of 1/2 or 1/3 of main

44. Past the age of 40, vision tends to decline at a steady pace. mine certainly has. Us old people can’t really deal with font sizes much below 14pt- which tends to look large and goofy to younger folk. whatever size you choose or however you set up your grid, please gracefully permit users to override your choice, and ideally design and code your thing to not break when this is done. this isn’t just politeness, it’s the law in USA, the UK and Australia, along with the rest of WCAG 2.0

@zensaiyuki Well, i am happy to say that i'm glad there is NO law for anything design, unless it turns out dangerous, however, i am with you on your critique :) Eyes get worse, and at some point glasses dont help anymore. Hard to understand for a 25-year old in full swing, however, they'll get there, too, hehehehe.

@jayrope or copyright for that matter. it seems like such a strangely confident statement for something that’s just obviously wrong, so I am just confused

@jayrope heritage listings. council rules for archetectural aesthetics, voter ballots, almost everything in france

@jayrope if you read that, you’ll see that various national laws are based on the United Nations defining equal access as a human right. it’s no joke.

@zensaiyuki Thank you again, very enlightning. Didn't knwo about the United Nations deifinition. - Off-question: Is your computer not configurable in terms of accssibility? I will rely on this feature in a few years for sure. you can set a minimum font size for your needs for instance, or vn turn everythign black and white.

@jayrope yes lots of things are adjustable, but if a website, for example, bakes words into an image, those settings do nothing. there is a myriad of ways to break accessibility and they are extremely common and popular things.

@zensaiyuki Thanks a lot, i am Grman, i wasn't aware of such a thing. So it is called EAA in Europe. I am starting to read this, but honestly, the buerocratic monster that loom sover me now will let me bail out from this verey soon.

Reg. your observation: European institutions' websites are mostly not respecting eligibility guidelines. Text is way too small and designs break down on smart phones. There's an advantadge though: The presented information is usually complete.

@jayrope accessibility is hard, but a little like copyright, in australia at least, it is challenge based. there isn’t accessibility police but if someone raises a legitimage complaint your organisation can end up in a world of shit.

@jayrope museums have wheelchair ramps audio guides and sometimes tactile exhibitions.

@jayrope mastodon has an image descriptions feature, you should use it.

@zensaiyuki FF's zoom feature is good for most i need, i am more interested in text than images. Also there is Stylus in FF and the Accessibility control panel in my OS. By now this works okay. The part of the internet that you describe is mostly companies and instituions, in fact that is where i rarely go. I like art and music and text and such, and also i appreciate anyone who have their own design style.
The most obligation i see for accessibility is institutional websites.

@jayrope it’s true institutions and say, grocery stores, department stores, libraries, universities, museums, television websites, streaming video services and what not.

if you make an inaccessible personal art site, you’re probably not going to get in trouble.

but imagine setting at a booth at an art market, a nearly blind 17 year old girl walks up and asks you to describe your paintings.

you say “no, you’re blind, why should I need to do that?”

@zensaiyuki Hmm, to describe things in detail, regardless fo what it is, is already and inaccessible feature for most people, especially not just artists. Beyond goog/bad and all kinds of one-worded derivatives of such there isn't much complex thought or a kind of describing empathy in general. That, unfortunately, is a connected issue, that concerns the majority of human brains :)

@jayrope it’s not perfect but for mastodon images i just imagine posting a joke image, and then 5 seconds later several blind people asking me what’s in the image.m, and having to answer 3 seperate times- then i finish imagining and i put the description in the image.

it’s not an unlikely scenario either. there are plenty of vision impaired people here and they normally won’t ask, they’ll just quietly miss out on the joke.

@zensaiyuki Yeah, unfortunately not in Berlin. The authorities here slack massively on establishing accessibility, not even all metro stations or city train stations are accessible, not all buses.
Some museums still have no ramps, most galleries don't either.
Tactile exhibitions, i suppose you can read Braille?

@jayrope i was talking more like sculpture and bas reliefs, and bas relief renderings of paintings

@jayrope oh wait, nevermind i misread.

i am a little surprised at the laxness in germany. I imagine germany would be a little more sensitive about human rights given the history, but i probably just don’t understand german culture on some fundamental level.

the UK has, on the other hand, pretty on top of accessibility in websites for a decade now.

there’s lots of money to be made by consultancies too.

@zensaiyuki I am a German myself. My observation is, that Germans
- (elegantly taking myself out of this description ;) -
have a tendency to over-complicate things. They almost mistrust things, that are easy to accomplish.
In project circumstances they like to talk about all things impossible, using many complex sentences.

Just stating what you want and how you get there? Few Germans are _able_ to do this.

@zensaiyuki Clear me up, i am an eye-d person yet. But yes, things to feel. How would one feel a - say - Tesla coil?
Or a minimal oil painting showing just the artist choice of pink?

@jayrope some blind people didn’t stary out blind, so they understand the concept of pink. but if it’s important to the experience of the painting, how the pink makes the painting feel is a thing that can be described.

i recognise that, philosophicaly, it’s difficult to describe some things. but nobody expects perfection, just an opportunity to be part of the world and to know about what other people are enjoying

@jayrope accessible games is the real challenge. unfortunately there’s a fair amount of resistence to making that work.

@zensaiyuki Given the percntadge of "normal" teenagers, that never learned to properly speak, read, directly interact, or move in social circumstances or simply use their hands, senses, bodies ... -> i don't think any more promotion of games is currently needed ;) Anybody getting off a screen more often surely has bigger empathy for people and our real-life issues - such as accessibility.

@jayrope it’s sad, i think games as a creative medium has much more potential for the elevation of humanity and art that has largely been squandered. it’s one of the most effective ways to express to another human complex systems thinking, which is something we desperately need more of for the biggest challenges we face in the 21st century.

@zensaiyuki Interesting. And yet it seems an interesting thing to strive for to describe a color and its composition to somebody who never saw a color. I am wondering now, if there is synesthetics somewhere in the blind world, like hearing colors. I am a music person, to me certain music has certain colors, i am using color words to describe music oftenly. Those inner color sights started appearing when i was _very_ young and listening impressionist classical music in fact.

Sign in to participate in the conversation
Mastodon

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!