Email or username:

Password:

Forgot your password?
Top-level
Zen

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

52 comments
Zen replied to Zen

I mean, if you set your website at 10px you’re just invoking the wrath of Stella Young’s ghost. watch your toes.

Zen replied to Zen

45. in olden times, type was carved by hand into metal for each type size. the different sizes were not just scaled versions of the same design: tiny adjustments were made for each size for color and workarounds for printing technology. With the invention of computer fonts, "hinting" was only done for screens at small sizes, wrong anti-aliasing later accidentally mimicked the effect. Few noticed laser printed documents looked slightly wrong or why. Now retina screens have the same issue.

Adobe Jenson MM, various point sizes from 18pt to 72pt, scaled to the same size to show the changes in glyph design. Multiple Master fonts were a brief flash in the pan, a format that reprduces the effect, but only if you use the specific adobe software that supports the format.
Zen replied to Zen

46. Untitled%20toot%208_FINAL.docx
less a principle than a specific criticism of a ubiquitous concept.
problem: filenames try to be both a programmer interface and a user interface and it’s bad at both. spaces, special characters and long names cause problems for programmers. being overly restrictive causes problems for users. Asking for a filename on file close is the wrong time to ask the user to think about a good findable name- exactly when they’ve just decided to do something else.

Zen replied to Zen

47. Optical Adjustment
In the course of creating visual designs, designers very very often accidentally create optical illusions. This usually *isn't* desirable. Objects the same size appear different sizes. Lines that are meant to be straight look curved. The only way around this is to carefully adjust things by hand until they "look right". This is called "optical adjustment"

Four rows of various shapes. the first row is a row of squares with a circle and a triangle  in the middle of exactly the same height as the squares, but optically appearing shorter. 
the second row is similar, but the circle and triangle have been made slightly bigger in order to appear the same height as the squares. the third and fourth rows duplicate the first two, but with gray guidelines for exposing the illusion.
"SPHINX OF BLACK QUARTZ, JUDGE MY VOW" has been typeset in the Optima font. a zoomed in portion of the line of text is duplicated below with red circles highlighting the optical adjustments that have been done in this font: curves that slightly overshoot the base and cap lines, slightly bowed vertical strokes, kerning adjusted on round letters, especially the 'AC' digram which unadjusted would contain an unsightly amount of extra space.
Zen replied to Zen

48. Things that work different should look different.
in linguistics, false cognates are words that look and sound similar, with similar meaning, but different origin. false friends are words with similar sound but different meaning. software has false cognates and false friends too. In 2018 they nearly ended the world:

core77.com/posts/71726/Bad-UI-

a standard light switch next to a bright red fire alarm switch that is behind glass that must be broken to activate
two aerosol spray cans with identical yellow packaging labeled with identical font. one is “fly and insect killer” the other is “canola cooking spray”
Zen replied to Zen

49. Figure-Ground and sillouettes.

The fastest and most well developed stage of visual recognition is of the sillouette of an object. In character design, getting the sillouette of a character to be disctinct is most important. in portraiture if you get the shape of the head right, you’re 90% there. it takes far longer to notice the interior features. time how long it takes you to spot what is wrong with adele. This is important in icon design too- don’t mask all your avatars in circles please

Zen replied to Zen

like seriously, i know half of you only as “vaguely orangey smudge”, work on your avatar sillouettes people!!

Zen replied to Zen

50. We use too many damn modals.
see also: 10., 23, 29 and 30.

need to use a confirmation box?

are you sure?

cancel, okay.

modalzmodalzmodalz.com

Zen replied to Zen

51. Humans make mistakes. It’s no use pretending they don’t. You’re just going to have to deal with it. So just make them easy as possible to fix. Include infinite undo, back button, home button, version control.

Autocorrect, I am not so sure about. I for one don’t like the computer to insist it knows better than me and then provide no way to easily insist i am right. Let me make mistakes! just make it easy to fix them.

Zen replied to Zen

52. The Perception - Action Loop.
A principle from psychology, it describes a method by which humans interact and learn from their environment. it goes:

1. Perceive situation
2. make prediction about it
3. take action
4. observe result. if it matches prediction, reinforce that mental model.
go back to 1.

this principle relates to constraints and affordances, in that the perception step can exploit pre-existing experiences, and observing a result can either reinforce or contradict them

52. The Perception - Action Loop.
A principle from psychology, it describes a method by which humans interact and learn from their environment. it goes:

1. Perceive situation
2. make prediction about it
3. take action
4. observe result. if it matches prediction, reinforce that mental model.
go back to 1.

Zen replied to Zen

54. THE BLANK PAGE problem
-if a user is presented with a blank screen, a blank search field, or a blank page, it can be very difficult to know what to do or what to try. In this case it is better to lead by example, not by patronising tutorial.

Zen replied to Zen

55. All manufactured things should be designed to be used by one hand. either hand.

there are safety features of some industrial equipment that require both hands so that both hands are no where near the dangerous hand mangler part- use best judgement

via @space_cadet

Zen replied to Zen

56. on Unskippable Cut Scenes.
Game UI seems to live in an alternate universe, immune from both the advances and blunders of mainstream computer interfaces. unskippable Cut Scenes and dialogue bubbles are a staple annoyance for Video Game Afficiandos. What everyone secretly wants is for story cut scenes and dialogues to just be presented with ordinary vhs controls and scrolling text planes to read at our own pace. The game industry is to cowardly to do it for reasons.

Zen replied to Zen

57. Negativity Bias
related/mentioned in #35.
humans are wired to notice and remember negative experiences more strongly than they notice or remember positive experiences. negative yelp reviews are more likely than positive yelp reviews. if your software is successful at being easy to use, it will be invisible, and most people won’t remember it.

Zen replied to Zen

58. more on episodic memory

ever stand up to do something, walk into another toom and forget what you were doing?

it turns out there’s a reason for this. since human memory is organised around episodes, experiments have found that walking through a door is a trigger for ending an episode- the result? short term memory is cleared and primed for new input.

what triggers exist in software? how often have you picked up your phone to do something, saw a notification and lost your flow?

Zen replied to Zen

59. Please don't use confirmation dialogues, but if for some reason you absolutely must, don't sleepwalk through writing the the messages and the button labels. Don't just label them "okay" and "cancel" Without thinking about whether that wording harmonises with the message text. If possible, label the buttons as what they actually do, specifically.

Enable ads for rotten tomatoes
or
continue without disabling
Cancel disk format?
cancel, ok
Adrian Cochrane replied to Zen

@zensaiyuki This is exactly why I advise against using JavaScript's alert(), confirm(), or prompt() functions: They don't allow you to label your buttons anything other than "Okay" & "Cancel".

I generally prefer native UIs, but in this case: PLEASE implement your own! Preferably something non-blocking like GTK's InfoBars.

Zen replied to Adrian

@alcinnz those also (at least in some browsers) block the main thread of execution.

Zen replied to Zen

how not to manufacture consent

Frost, Wolffucker 🐺:therian: replied to Zen

@zensaiyuki I really like how NMS both does this and - crucially - says "your game was last saved X minutes ago".

So I can go "saved 1 minute ago? yeah okay we're all caught up." or "oh, 6 minutes? we were just sitting in our ship the whole time, 's'fine."

Zen replied to Zen

60. Plan for failure

software breaks. hardware fails. services go down. users make mistakes. Anticipate as many failure modes as you can, and design recovery plans and craft reasonable, well written communications for the user. Technical writing is its own topic, but for error messages the important things to accomplish are
a. clearly communicate the situation in language that is relevant to the user demographic. e.g. if it’s not a technical audience don’t use jargon
b. explain what to do next

Zen replied to Zen

61. Label your buttons. With words. don’t do clever shit like only showing labels on hover. hidimg the labels is mystery meat navigation.

Zen replied to Zen

62. Stop making your updates so intrusive. I open an app to use it. if you force me to stop and update it first i forget what I opened it to do. this is user hostile behavior. Ideally, users should not be bothered about updates at all- but unfortunately they a necessary.

a less intrusive pattern is asking for permission to download and install an update on app EXIT.

Zen replied to Zen

just don’t ask using a blocking modal dialog, for the love of durga.

the least intrusive pattern of all is web apps that are just automatically always the latest version, and at worst, occasionally ask you to reload your browser so the front end matches the back end.

this is a tradeoff of course because those updates happen without consent.

Zen replied to Zen

63. Never indicate semantic differences with only color. Always use the trifecta of color, shape, and text. This way, people who can't distinguish colors see shapes and people who can't see shapes can hear text.

Add texture where that's possible.

via @liw

Zen replied to Zen

64. never steal focus, never generate a button directly under the cursor, never enable a button immediately after it is displayed, never disappear a button immediately after it is pressed.

Zen replied to Zen

65.

IF YOU PROGRAM A "NO" BUTTON TO SAY "MAYBE LATER" YOU HAVE FAILED AT BOTH INTERFACE DESIGN AND BASIC CONSENT

via @HTHR

IF YOU PROGRAM A "NO" BUTTON TO SAY "MAYBE LATER" YOU HAVE FAILED AT BOTH INTERFACE DESIGN AND BASIC CONSENT - heather flowers
Zen replied to Zen

66. if something has low odds of happening, that means it’s still going to happen. Don’t ever use that as an excuse not to fix a problem, especially if it could cause damage to life or data; or reduce accessibility.

calcifer :nes_fire: replied to Zen

@zensaiyuki @zens yep. As any D&D player will attest: 1% is a lot higher chance than you think

Zen replied to Zen

67. don’t do whatever the fuck this is. bad reddit. this made me replace “www” with “old” so fast.

a reddit a pop up confirmation box says “the app has unlimited cats” a cat graphic sits atop a button that says “use the app”, small tiny barely visible text says “i’m a dog person”
Zen replied to Zen

what do you even call this pattern? a surveillance wall?

Zen replied to Zen

68. don’t assume your users’ devices resemble yours or your close circle of friends when deciding minimum requirements- especially if you intend to reach a wider audience with a range of socioeconomic conditions and internet connection speeds.

brought to you by the Australian government locking welfare payments behind a mininum iOS version.

Lien Rag replied to Zen

Tiens @Natouille tu considères ça aussi comme de l' #UXFail ?

Lien Rag replied to Natouille 🍷 🥃 🍾

@Natouille

Le dernier message avant le mien, "the Australian government locking welfare payments behind a mininum iOS version."

Zen replied to Zen

69. via Jan Niko @nihilazo

nothing a computer does should ever feel like magic. if something a computer does feels like magic, that's because it doesn't sufficiently inform you (the user) of what it is actually doing or allow you to create a mental model of the system

Zen replied to Zen

70. your ui should not passively animate for anything less important than a carbon monoxide leak.

it's effective at getting attention, often way too effective.

via @binarycat

Evelyn fra denne andre øya replied to Zen

@zensaiyuki@mastodon.social It's a fairly straightforward argument to make that this is illegal per GDPR too, data minimisation is a binding legal requirement and demanding people register when there's no actual necessity seems to contradict that

‏‏ ‏fedifriend (pride aspect) replied to Zen

@zensaiyuki Wow, they're like shop security asking you to buy something or leave. Except they also want you to open a loyalty account.

Mina replied to Zen

@zensaiyuki i couldn't figure out what was wrong with Adele until i put her upside down…

i hate it.

Adrian Cochrane replied to Zen

@zensaiyuki It's worth noting: This is why FontConfig is part of GNOME's text stack!

To allow font designers to distribute multiple font files for a single font family, so they can perform these optical adjustments for each relevant size & style.

Zen replied to Zen

i keep going over and over this one and i am never satisfied with how I worded it. i have no idea if anyone else gets what i am saying here.

Deborah Pickett replied to Zen

@zensaiyuki I think this idea of different fonts [in the old sense, where font implies a size as well as a typeface] not just being scaled versions of each other is something that OpenType tries to address with its parametric features. There doesn’t seem to have been much uptake of the feature though.

Zen replied to Deborah Pickett

@futzle past a certain threshold of nuance, people tend not to care. they might have the odd feeling that one peice of design seems nicer or “more expensive” than another peice but they won’t be able to put a finger on why.

this level of care in web typography basically represents the tip of the diminishing returns curve: lots of effort for an implacable feeling

Stewart Russell replied to Zen

@zensaiyuki also thin fonts with low contrast background. These bastards are invisible past 40

Go Up