Paul has published an essay about official photographs of politicians. In it, he expertly points out the various deficiencies of some of them and where they show a distinct lack of quality.

But, here's the thing, I don't think anyone other than a photographer would notice or care about those "problems".

If you're a website designer, you're always noticing "jank" on other sites. Your skin crawls at the poor kerning, the FOUT, the lack of keyboard navigation, improper contrast ratio, and a dozen other flaws. 99% of users just don't care. It doesn't impact them in any meaningful way.

A decade ago, I ranted about how designers were chasing a perfection which would never be noticed by non-experts. You may take pride in your craft, but the majority of people physically cannot notice the difference between good and bad design. Not even subconsciously.

I include myself in this maddening desire for unnoticeable perfection. I've got several rants about things most people would find inconsequential. There are things which I know to be important in terms of technical correctness, but which most people couldn't give a shit about.

There's a brilliant essay by Will Tavlin called "Casual Viewing - Why Netflix looks like that".

In it, the author (correctly and fairly) skewers Netflix's model of producing huge amounts of low-quality content for an undiscerning audience. The creatives recoil in horror and the æsthetic choices, poor scripting, and lack of creative pizazz. Everything is mediocre at best and that's destroying the creative industries.

But, much like designers fretting about getting things Pixel Perfect or photographers complaining about background composition or musicians ranting about the loudness wars - the hoi polloi just don't care.

And, frankly, who can blame them? Take this quote from the Netflix essay:

The difference between Netflix and its predecessors is that the older studios had a business model that rewarded cinematic expertise and craft.

Bluntly, I don't think that's true. Look at the amount of movies Elvis was in. A couple of good ones, sure. But the majority are literally just "This demographic will pay a dollar to see Elvis on screen; so put him on screen". You only need to look at the various lists of highest grossing movies to see that the viewing public don't necessarily reward expertise and craft.

In an essay called "Fraught Pleasures: Domestic Trauma and Cinephilia in American Culture", the author points out that in the movie "Scream" (a movie ostensibly about movies) nobody goes to the cinema. Their entertainment is schlocky VHS tapes of low-budget and low-quality horror films. The nearest they get to discussing the quality of movie making is when one character recommends renting "All The Right Moves" because:

If you pause it at just the right place, you can see [Tom Cruise’s] penis!

Quality!

Netflix, so the essay argues, has perfected the art of designing content for "casual viewing". Something you can have on in the background while cooking, playing a game, or doom-scrolling.

Several screenwriters who’ve worked for the streamer told me a common note from company executives is “have this character announce what they’re doing so that viewers who have this program on in the background can follow along.”

So? Not everything should be hard work. After a long day, most people don't want to work for their leisure. People don't want to expend cognitive energy on interpreting what a story means. Forget Subtext - People Don't Even Get Surtext.

We also have the problem that close to 100% of culture is now readily available to us. Why take a risk on something new when you could watch something guaranteed to be good? An executive at Amazon's streaming division recalls receiving an email which said:

‘here are the one hundred movies that people are watching most on Amazon SVOD today by the minute.’ It was always a lot of Tom Cruise sci-fi movies, action movies from the ’90s and aughts, and Talladega Nights.

You want to get everyone dancing at your party. Do you put on some experimental music that no one has heard of? No - you stick on ABBA and watch the dance-floor fill up.

Want something with a guaranteed number of chuckles-per-minute? Friends is there for you.

When you visit Paris, do you go to some little art gallery showcasing new artists or do you visit Le Louvre? You, like everyone else, bask in front of the Mona Lisa.

Finally, we reach the inevitble endgame of Netflix. Cut out the authors, actors, directors, make-up artists, sound designers, and the hundreds of other unionised parasites involved in making a modern show. Go straight to AI and create an infinite and endless stream of algorithmically-designed crowd-pleasing content.

Streaming platforms are the only place where this [AI Generated] garbage makes any sense — a place where it would never be watched at all.

Hard disagree. Not because I think AI slop is good; but because the audience doesn't care. Most people don't notice the wires on the special effects. They can't see that the lighting is wrong on the CGI shot. The lead actor's shitty accent passes without comment.

I'm not trying to slur people when I say that the majority are unsophisticated - because I include myself amongst them.

Audiophiles complain about MP3 compression and crappy headphones. Most of us just want to listen to our tunes, not listen to the equipment.

Cinephiles complain about poorly calibrated projectors and or motion smoothing on TVs. Most of us just want to crunch popcorn and see big explosions.

Fact-checkers complain about fictional quotes from famous people. Most of us just want a daily dose of something that sounds like wisdom.

Pornographers complain about the move from gorgeous celluloid to low fidelity videotape. Most of us just want to rent a VHS rather than visit a cinema for our extra-special-personal-time.

Fashionistas decry the homogeneity of modern dress. Most of us think jeans and a t-shirt are basically fine.

Is the quality of pizza better from a tiny restaurant hidden away in an Italian village using only fresh ingredients? I'm sure it is. But Domino's delivers something good enough, cheap enough, and hot enough.

Next year, your pizza will be topped with cheap 3D printed "meat" and, while chefs will decry it as an affront to culinary perfection, it'll be cheap and tasty. Besides, you're munching on it while chatting to friends and watching something dopey on Netflix. Call it the rise of "Casual Eating".

Google used to have some beautiful logos for its apps. Each had a distinct shape, style, and colour. Then, someone decided that they all needed a consistent visual language. And this mess was born.

*sigh* I get it. I really do. Brand is a thing. Users often use visual heuristics to identify similar groups. Having each team go wild on an icon design doesn't always reflect the professionalism and consistency that you want to project. The logos aren't awful - but I find them a little boring. Not the worst sin in the world. Though that's only half the problem.

In Google's Android, they've decided that - for consistency - all icons must be firmly encased in a white circle. It makes everything look clean, consistent, friendly, and...

...oh.

I apologise for getting old. My visual acuity isn't what it once was. When I'm staring at my phone, with its screen caked in fingerprint grease, on a juddering bus, after a long day at work, all I want is a quick way to identify the app I want to use.

Like most people, my brain has evolved to take mental shortcuts. It looks for a distinct shape and colour to identify things. I simply can't do that with modern Android's adaptive icons. They all look like white circles with a splodge of colour in the middle.

A few years ago, I wrote about fixing Android's circular icons. Sadly, I don't have the skill to produce my own icon pack. But using the open source Iconeration I was able to manually set my icons to be beautifully inconsistent.

With a glance, I can immediately see which is which. Do I care that they're not all aligned perfectly? Nope!

I've got a high-resolution screen, I want high-resolution artwork. Look at that Firefox icon! It is gorgeous! It isn't a pale, flat, blob - it has texture and uniqueness.

Phones used to be wild and unique - now they're all boring black rectangles. User Interfaces used to reflect the aspirations of their designers - now they're just a bland corporate mediocrity.

I hope, one day soon, the fashion pendulum will swing back and interfaces can become interesting again. Until that day, I'll use Iconeration to make my phone easier and more delightful for me.

Some websites don't contain dates in their URls. There may not be a © date or publication date shown on the page. And the <meta> tags might not contain anything useful. If you're lucky, the site will look old fashioned:

Unlike the BBC, most sites have adopted the "Eternal CSS" pattern. When fashions change, the entire site gets a facelift - which means ancient articles look modern. This can mislead readers into thinking old information is new.

Here's (one way) this can be fixed - inspired by Moriel Schottlender fabulous historic CSS selector.

Get the page's publication date

A page might have a date published on it. For example:

Published on <time id="published" datetime="2005-02-14">Valentine's Day</time>

CSS has an attribute selector which can see the year encoded in that datetime:

[attr|=value] Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

That means, the element can be styled based on its year. For example, make the year 2005 green, and the year 2006 blue:

time[datetime|="2005"] {
  color: green;
}

time[datetime|="2006"] {
  color: blue;
}

That's fine for styling a specific element, but using the CSS property has() it is possible to set variables based on the date. For example, this code sets a variable which can be used anywhere on the page:

:root:has( time[datetime|="2005"] )  {
    --timeColor: green;
}

:root:has( time[datetime|="2006"] )  {
    --timeColor: blue;
}

p {
  color: var(--timeColor);
}

(Note that has() is only available in Chrome. It is coming soon to Firefox.)

Variables from Metadata

If the published date is in the metadata, rather than the body, it can still be used in CSS. This is how WordPress adds the original published date to a page's <head>:

<meta property="article:published_time" name="article:published_time" content="2007-11-16T12:34:41+00:00" />

The date can be accessed and used to set specific variables depending on the year:

:root:has( [name="article:published_time"][content|="2007"] ) {
    --font: "Old Fashioned";
    --bgColor: green;
    --fontColor: red;
    ...
}
:root:has( [name="article:published_time"][content|="2023"] ) {
    --font: "Modern";
    --bgColor: white;
    --fontColor: black;
    ...
}

Using this pattern, it is possible to have a single style-sheet which has a different look and feel depending on the age of the article.

Imagine that! You could set old pages to have a 1990's look and feel while keeping modern markup.

Maths limitations

It isn't yet possible to use the attr() CSS Function to get the date. And it is impossible to do if/else or use less than / greater than in CSS.

But we can cheat!

A variable can be set depending on the year published:

:root:has( [name="article:published_time"][content|="1998"] ) {
    --publishedYear: 1997;
}
:root:has( [name="article:published_time"][content|="1999"] ) {
    --publishedYear: 1999;
}
:root:has( [name="article:published_time"][content|="2000"] ) {
    --publishedYear: 2000;
}
...

That pattern can be repeated as far back as your site goes - and as far forward as you think you'll still be publishing.

CSS has no access to the computer's datetime functions - that requires JavaScript. But if the website does expose the date it was generated, it should be possible to calculate the age of the page.

For example, if the <body> contains:

<time id="RomanYear" datetime="2023">ⅯⅯⅩⅩⅠⅠⅠ</time>

The year can be turned into a variable using a similar pattern:

:root:has( #RomanYear[datetime|="2023"] ) {
    --currentYear: 2023;
}
:root:has( #RomanYear[datetime|="2024"] ) {
    --currentYear: 2024;
}
:root:has( #RomanYear[datetime|="2025"] ) {
    --currentYear: 2025;
}
...

It is then possible to use the calc() CSS function to calculate the age of the page:

--age: calc( var(--currentYear) - var(--publishedYear) );

From this, it's possible to work out how old the page is as a percentage of the site's history. For example, if the earliest publication on the site is from 2001:

--oldestYear:    2001;
--currentYear:   2023;
--publishedYear: 2014;

--siteAge: calc( var(--currentYear) - var(--oldestYear) ); /* 16 */

--pageAge: calc( var(--currentYear) - var(--publishedYear) ); /* 9 */

Finally, a sepia filter can be placed over the page - with its intensity higher the older a page is.

--percentAge: calc( var(--pageAge) / var(--site-age) );

--filterRatio: calc( var(--percentAge) );

filter: sepia( var(--filterRatio) );

What's next

What will you do with this forbidden information?

I couldn't find much to disagree with (although I have the odd quibble) but some of the language it uses is very exclusionary unless you're terminally online in very specific communities. "Undocuqueer", "heteropatriarchy", "LGBTQIATS" - I scuttled off to the glossary more than once to try and understand what was being talked about.

If you can get through the language, there's a brilliant clarion call. We get to imagine the future - we're not tied to the old ways of doing things.

Designers imagine images, objects, buildings, and systems that do not yet exist. We propose, predict, and advocate for (or, in certain kinds of design, warn against) visions of the future.

We can build worlds where everyone gets to say what the future looks like. We need to end the practice of designing for the majority and screw everyone else.

One of the paradoxes with Design Justice is that it doesn't cope with competing needs well. For example:

we prioritize design work that shifts advantages to those who are currently systematically disadvantaged within the matrix of domination.

But, to take an example, what about audible alerts on street crossings? A lifeline for the blind but a nightmare for those with sensory issues. I don't think there's a real solution here - other than consideration. As it goes on to say:

The point is not that it’s wrong to privilege some users over others; the point is that these decisions need to be made explicit.

Each choice we make needs to be justified. Unfortunately, we are forced into many of the choices by the nature of society. Quoting Laurie Penny:

The wants and needs of young, healthy, middle-class people with connections and a reasonable amount of spare cash are over-represented among Start-up City’s priorities. For one thing, those are the problems with solutions that sell. For another, given a few million dollars and a team of semi-geniuses, those problems are easy to solve. Structural social injustice and systemic racism are harder to tackle.

And that's something the book can't easily tackle. It acknowledges that using tools like Facebook to protest is a devil's bargain; the master's tools will never dismantle the master's house.

What I found empowering was that there was lots of practical advice for practitioners; something that's often lacking in these sorts of books. Similarly, while it was very US focussed, it did at least acknowledge the presence of the Rest Of World.

There's an interesting diversion to look at the US Civil Service - specifically 18F's tackling of unemployment:

The problem statement offered by 18F immediately skips over any discussion of structural inequality. For example: How is the unemployment rate distributed among different groups of people in the United States? How is college education distributed? What groups of people are getting access to those jobs that are growing, and what groups are being left out? In a design justice approach, the answers to these kinds of questions inform both the “people” and “problem” statements. Exploring these questions also modifies the assumptions undergirding the problem statement.

But this leads to an activist Civil Service. Should unelected bureaucrats be changing the way elected officials conduct policy? Maybe - but that's a tricky proposition to sell.

I also think the book misses the mark when it comes to civic participation:

Just as users provide free labor for the dominant platforms in the cultural economy, neoliberal citizens provide free labor for city managers on the dominant urban incident reporting platforms. Citizens are encouraged to report potholes, petty crime, and graffiti and are rewarded with promises of more rapid service delivery. Journalism professor Michael Schudson describes these practices as monitorial citizenship. Monitorial citizenship can be read as a key part of the privatization of public services, the conflation of the citizen with the user [...]

I disagree. I don't see a difference between organising a community litter-pick and reporting potholes. Nor between watching my neighbours' house when they're out and reporting on damage and defacement. Making it easier for a community to work together and report their concerns doesn't seem like a neoliberal privatisation nightmare. Such platforms should be designed with the community, of course, but those of us who want to live in a pleasant environment see no difference between public rubbish bins and QR codes asking us to report broken street lights.

Perhaps the weakest section is the chapter on hackathons. It is boringly American and seems to have a lot of misplaced ire. I'm aware of how events like Homeless Hackday can be misconstrued - but a hackday is a start of an experiment, not an end unto itself.

As I said, I mostly agree with the book. But the thing I take issue with most is this:

We believe that everyone is an expert based on their own lived experience, and that we all have unique and brilliant contributions to bring to a design process. [...] The principle that everyone is an expert based on their own lived experience is a crucial element of design justice,

I just don't think that's universally true. Lots of people have absolutely no objective understanding of their own predicament, nor the tools available to overcome their obstacles. Having participated in many co-design events, I know that many people are, at best, naïve at best ("can't you just make a phone that doesn't need recharging") to outright malicious ("if I had that feature I could really annoy my neighbours!"). As depressing as it is, sometimes designers need to be a little bit like strict parents.

Anyway, I was left enourmously uplifted and encouraged by this book. Too often design is done to people, let alone for them, and rarely with them. The book ends with this:

For any design project, we can ask three questions: Who participated in the design process? Who benefited from the design? And who was harmed by the design?

If you can make it through the academic language, this is a handy book.

Suppose a digital design team has to support a policy which charges people money every time they do a thing. Let's say driving a car across a bridge. There's all sorts of cool tech that you could use in order to make the payment process as simple as possible. Perhaps numberplate recognition tied to a credit card? Or a simple registration process and a push notification? Nice! Do lots of user research and make it as easy as possible. Hurrah!

But…

What if the payment is to discourage use of the bridge. Perhaps the policy owners are worried about damage, pollution, or some other negative thing. Their goal is to reduce usage - by any means necessary.

Does that mean the team should make the process deliberately difficult?

A team might decide that it makes sense to make a service which is hard to use. No mobile-friendly page, a huge form to fill in, unrealistic timeouts, all the things designers usually fight against. Maybe even make the service break every few days?

Rather than using the monetary cost as a disincentive, the service's lack of usability could be the disincentive!!

This is, of course, a deliberately silly thought experiment. Generally speaking, Government wants to make it easy for you to give it money. And there are usually easier ways to change behaviours.

The private sector often places these sorts of barriers in place. Phone lines are "experiencing higher levels of calls than usual" and have dozens of impenetrable options because having a human answer your query is expensive. So it's hard to do.

If you've ever seen "this page looks better in the app", that's usually because the app makes more money, or was an executive's pet project. So a business puts up interstitials to prevent users from doing what they (the users) want to do.

Why do budget airlines make it so hard to do anything on their websites? Perhaps because they generate more revenue if people turn up to the airport and have to pay for seats and baggage?

Anyway, the next time you're stuck trying to complete something that should be simple, and are cursing the fools who designed the process, please remember that Hanlon's Razor is only a suggestion. Some badly designed processes are malicious.

There is a fair bit of Te reo Māori (Māori language) in the book. It's great that the language is enjoying a resurgence. Most concepts are explained in context - although you may need to rely on your eReader's dictionary function a few times.

Ideas like ‘social licence’ for me is hōhā, terrible, because it’s based on the fact that the government has trust. I think that’s a fundamental assumption that the government doesn’t have the right to assume, especially after 180-plus years of colonisation.

Some of the lessons it teaches are specifically relevant in a Māori context - for example whether the local iwi may only have signed and acknowledge He Whakaputanga and not Te Tiriti. But the lessons are broadly applicable to to every community.

It really focuses on the systemic issues which can lead to people being (self) excluded from fully participating in digital life:

As well as general mistrust of government, there is a lot of intergenerational ill-feeling in Māori communities and organisations about over-consultation by researchers and government staff.

It doesn't just focus on Māori issues - there are lots of stories about how participatory design should be used to ensure services are move inclusive and equitable.

When the NZ COVID Tracer app was first launched in 2020, the mandatory and seemingly simple act of placing QR code posters in shops and cafés excluded certain sectors of the community. Many businesses displayed the posters in places inaccessible to wheelchair users, which made them unable to comply with the directive to scan in.

It's a great book for the modern digital practitioner with a social conscience.

I tried sharing a website using Google Chrome for Android. I hit the share button, and a panel popped-up from the bottom of the screen.

Hmmm. It didn't have the share destination that I wanted. It was early in the morning - when I'm not at my cognitive best - and I was stumped. There is nothing on this screen - other than the icons - to tell me how I can interact with it. There's no scrollbar, no handle, no "more" icon, nothing.

Let's talk about doors for a while.

I'm sure you've all come across a door with an ambiguous handle. This is what usually happens:

perry

@SloanPerry

when you push a pull door and the person behind says "you need to pull" aye cheers lad sure next plan was to start lifting from the bottom

---

Ideally, all doors would look like this:

Even if you don't speak the language written on the doors, the physical nature of the handles tells you what you can do with them. A flat panel can only be pushed. The protruding handle is designed to be pulled. This design feature is known as an "affordance".

If you're involved in design, at any level, I urge you to read the classic book "Design of Everyday Things". This is what it has to say on the subject:

How can design signal the appropriate actions? One important set of signals comes through the natural constraints of objects, physical constraints that limit what can be done. Another set of signals comes from the affordances of objects, which convey messages about their possible uses, actions, and functions. Where do we grab it, which parts move, and which parts are fixed? Affordances suggest the range of possibilities, constraints limit the number of alternatives. The thoughtful use of affordances and constraints together in design lets a user determine readily the proper course of action, even in a novel situation.

(Emphasis added.)

Let's go back to that accurs'd Android panel. I tried swiping it up - that's what I've learned most panels do in Android. But it did nothing. So I gave up. I didn't feel like battling with my computer to achieve a simple task. I just assumed that Google had chosen a set of default options and I was not allowed to stray from them.

As I went to dismiss the panel, my thumb slipped transversely. Nudging the row a few pixels to the left. The fucking thing was a horizontal slider!

I felt like a bit of an idiot. And that violates the unwritten 0th law of robotics - no computer interface shall make a human feel stupid.

I vividly remember being pissed off 12 years ago at the iPhone's inability to delete podcasts. It turned out that, once again, you had to magically know that swiping a podcast revealed hidden buttons.

The thing is, it's easy to add an affordance. Here's my crappy paint attempt showing a couple of options:

Either an arrow to let the user know there's more to the side (maybe even give it a jaunty animation) - or a scrollbar to show how far through a list they are. I'm sure you can think of a dozen better ways to represent a scrollable area than literally nothing!

Apple's solution is to bisect the final icon in a row, to indicate to the user that there's more available.

That's a cute way to do it. But there's evidence that Apple are slowly undoing their great usability work in the name of elegance.

Modern design is so beautiful to look at - but an absolute nightmare to use. You either need to use trial an error on every element, or hope that someone else can tell you what you need to do.

Flat, minimalist, clean, material - whatever you want to call it - is an annoying antipattern. Computers are here to make life easier for humans. Removing affordances is just a nasty thing to do to your users.

Everyone has fingerprints!

The BBC has a grim tale of a family with a genetic mutation which means they have no fingerprints. It details the issues they have getting official ID.

In 2010, fingerprints became mandatory for passports and driver's licences. After several attempts, Amal was able to obtain a passport by showing a certificate from a medical board. He has never used it though, partly because he fears the problems he may face at the airport. And though riding a motorbike is essential to his farming work, he has never obtained a driving licence. "I paid the fee, passed the exam, but they did not issue a licence because I couldn't provide fingerprint," he said. The family with no fingerprints

Even if this genetic issue didn't exist, it should be obvious that not everyone has fingers, or hands. Some people are born without hands, some people lose them later in life.

Policy is about the edge-cases. It's easy to design something which works for the majority of people - the real challenge is how we deal with the fringes.

Everyone has a unique face / unique DNA

Ever heard of twins, dumbass?

OK, it is a little bit more complicated than that.

It is easy to revoke a biometric indicator

Even if you assumed that everyone has ten fingers - that means you can only change your ID 9 times. If you're using iris recognition, that's one change you're permitted before you have to grow new eyeballs.

Biometrics can't be copied

Back in 2002, Tsutomu Matsumoto copied fingerprints using Gummy Bears.

Researchers can consistently fool iris scanners

3D printed facemasks can defeat facial recognition systems.

The thing about biometrics is that they are not secret. You leave your fingerprints everywhere. If a camera can read your face, it can copy your details.

Biometrics can't be changed

Will having a "nose job" stop your iPhone from recognising you? Probably not. But there are a range of surgical procedures which can be done.

People who have Facial Feminisation Surgery can be given a letter from a doctor to explain to border guards why a person's face may no longer match their biometrics.

What are they good for?

Biometrics are not passwords. Nor are they a universal 2nd factor. Biometrics are, at best, usernames.

For the average user, it's probably fine to use your fingerprint or face to unlock your phone. If you think an enemy state is going to devote considerable resources to steal copies of your biometrics, consider changing to a different password mechanism.

Or, if you have kids.

Pushkar

@Pushkarr

Friend's 5-year old daughter started unlocking his phone with his fingerprint while he's asleep so that she can play games.

He now sleeps with gloves on. #lifeisblackmirror

---

Or if you're cheating on your spouse.

A Qatar Airways pilot was forced to make an emergency landing after a passenger found out her husband was cheating on her and had a violent reaction in midair. The woman reportedly used her sleeping husband's finger to unlock his phone and discovered his cheating ways. Eyewitness News

In a safe-ish environment, biometrics are a good convenience mechanism. If your phone is snatched by an opportunistic thief, they're unlikely to have the means to spoof your ID.

But they are not a perfect security measure.

Parts

• Floppy Disks
• Printer Labels
• Frame

Background

As part of my Floppy Disk Walkman project, I asked my friends to send me a couple of floppies. Alistair and @gas_liverpool both sent me loads. So I needed something to do with them!

Close Ups

Note!

• What a "classic" floppy label looks like, and what you remember it looking like, can be two different things.
• I also can't afford a colour printer - so I stuck with black & white on colourful floppies.
• I'm not a graphic designer. Thankfully, neither were most of the people who designed floppy labels back in the day. If graphic design is your passion, feel free to improve these!
• The labels don't have the rounded corners of proper labels.

GLaDOS - from Portal

Are you still there?

Bandersnatch - from Netflix's Bandersnatch

I used an open source Teletext Font called Bedstead rather than the more corporate Courier.

Holly - from Red Dwarf

I thought a dot-matrix style vision of Holly would be a nice touch.

A Young Lady's Illustrated Primer - from The Diamond Age

Using the Reenie Beanie font and a bit of groovy clipart.

Janet - from The Good Place

The font is close enough

Polybius - from the arcade

I spent so much money on this arcade game back when I was a kid. Not so easy to find nowadays.

Mother - from Alien

I made great use of this excellent article about the typography of Alien.

WOTAN - from Doctor Who

This was a difficult one to get right. The font is not Westminster!

Clayton Hickman

@claytonhickman

Just noticed the War Machines title font isn't one of the regular typefaces I assumed it was. Was it specially made? pic.x.com/jiyfllgl8d

---

I grabbed the title card and manually recreated the font.

WOPR - from War Games

A slightly modified copy of the games list from WOPR. Using a reconstructed font

Rejected Ideas

Originally, I thought about making disks of Vapourware. Things like "Commander Keen: The Universe Is Toast!" and "Half-Life 2: Episode Three" - but I really couldn't find enough good titles.

So, I asked on Twitter:

Terence Eden is on Mastodon

@edent

Which fictional bit of software would you like a copy of?

(As in some program you've seen in books, TV, films, songs, etc.)

---

Some of the suggestion were brilliant, but a bit hard to implement. What does the software disk for Blade Runner's Zoom Enhance look like?

Famous Movie Floppies

There are only a few popular movies which feature floppies prominently. And none looked particularly cool. Besides, there's nothing interesting about just copying someone else's artwork.

Here are some that I considered.

Hackers

The floppies on display don't have anything interesting written on them.

Similarly, what does The Gibson look like?

Alien

The floppy disk props were never actually used.

The Net

We all love Sandra Bullock, and The Net is a fine movie. But this is hardly an iconic shot.

Red Dwarf

I lol'd, but I wanted something a bit more like real software disk.

Better Than Life is a brilliant bit of software, but there are no product shots.

Star Trek

LCARS was a popular request. But it is so colourful, that it's hard to show on a black and white printer.

What's next?

Not sure. I'm painfully aware that most of these are AI systems, rather than discrete software. I have no need for a colour printer - so I don't think I'll upgrade these. And I don't think I'm a good enough designer to make many more. So this will just sit as a curio on my wall.

But why this ordering? Why distinguish between male and female doctors? Let's see if the source code holds any answers.

As many of you may have guessed, the website is German. Herr Doctor and Frau Doctor are distinct titles. In some societies, it is extremely rude to refuse to use someone's correct title.

But, again, why are the titles presented in this way?

Next time you fill in an official form which asks for sex information, notice that it is almost always in the format Male / Female. Why is "male" first? It isn't alphabetical - the normal way to order things. And it's not in demographic proportion - there are more women than men.

If the above list were in alphabetic order, in English it would have "Dr (Fem)" first. In German it would be "Divers" first. So who made the choice to put it in this specific order? And why isn't the first title, for example, Frau Professor?

What choices have been made, and why have they been made?

Very.co.uk

Here's another example, the British shopping site Very.co.uk I suspect that they know their user base is predominantly female. But do their demographics also skew towards married? Is that why they've put Mrs first?

I recommend reading Kate Roberts' "Women On Top: Inappropriate Dropdowns" - which takes a proper look at the usability of dropdown ordering.

British Airways

BA have a weird grouping. After the "normal" titles is a hodge-podge of Captains, Rabbis, and Reverends. What's the order? Why are some grouped alphabetically and others not? How easy is it to quickly find the correct title on this list?

Emirates

Emirates are quite happy to use young women as part of their advertising images. But "Miss" comes at the bottom of their title list.

Who are we leaving out?

The approach by British store Fortnum and Mason is extremely inclusive.

But they're still sticking Mr on top...! Lord comes before Lady etc.

And they're missing my title - "Supreme Commander".

Are titles important?

I'm torn. I remember as a teenager receiving my first letter addressed to Mr Eden. I was so proud. But today, everything seems to be so casual. Call centres refer to me by my first name. My bank sends emails addressing me as "Dear Terence".

Of course, I'm cisgendered and only rarely misgendered when speaking to people. It doesn't distress me when people get my title wrong.

It comes down to why you collect title. Do you really need to know the gender of your user or their marital status? Is knowing educational attainment or religion necessary to good functionality?

Rather than offering a drop-down of limited options - which is guaranteed to exclude someone - perhaps it makes more sense to just ask the user how they would like to be addressed.

Give your users a free-form text box - and make it optional.

I now work in the public sector, where things are a little different.

Jeffrey Allen

@jallen300

We're hiring #servicedesign-ers at @MoJGovUK!

No one wants to come in contact with the justice system — when you do, something has generally gone very wrong. We're working to make the justice system as easy & effective as possible for everyone. Join us!

jobs.jobvite.com/justicedigital…

---

Most people who are arrested, probably don't want to be arrested.

Generally speaking, people don't want to need to go to a hospital.

People may or may not want to pay tax. But they don't get much choice in the matter. And there's only one entity you can pay.

Government is, mostly, a monopoly. Traditionally, that means crap services, atrocious design, and an unwilling attitude. That's changing. I see dedicated public servants around the world realising that they have to change the way the state and the citizen interact. Paying your taxes should be as simple as buying something online. Registering to vote should be no more complicated that registering on a social network.

But those are willing transactions. OK, you may not want to interact with the tax service - but you do so because the alternative is a monetary penalty or a criminal record. It's not much of a choice - which is precisely why we should make it as easy and pleasant as possible.

(Side note - I don't use the word "delightful". That usually means cutesy graphics, chummy language, and a fake bonhomie which irritates most normal people but is beloved by marketing-folk. Transactions with Government are serious business, and probably don't need to be festooned with emoji.)

The private sector also uses length of engagement time as a key metric. How long does a user spends on your site? The longer the better, right?

Well, not for our sites. A user doesn't want to spend a single nanosecond longer than necessary with us.

Plain, simple, fast. That's what we're aiming for.

In Mismatch, Kat Holmes describes how design can lead to exclusion, and how design can also remedy exclusion. Inclusive design methods—designing objects with rather than for excluded users—can create elegant solutions that work well and benefit all. Holmes tells stories of pioneers of inclusive design, many of whom were drawn to work on inclusion because of their own experiences of exclusion.

Part manifesto, part manual. This is an excellent overview of inclusion and design. More than just about usability, it goes to the psychological heart of why we get upset when we can't use things.

It's a little short, and doesn't go into a huge amount of technical detail. But it more than makes up for it in sheer quality of advice.

One to read whether you're designing apps or policy.

Do You Want To Phone A Friend?

A popular website asked me to confirm my phone number. It "helpfully" pre-filled the country-code with +1. And proudly displayed the Stars and Stripes.

Except, of course, the USA isn't the only country to use +1 - our friends in the Great White North also use +1.

Thanks to the North American Numbering Plan, a full 25 countries or territories use +1. From Anguilla 🇦🇮 to Turks and Caicos Islands 🇹🇨. OK… their flags look pretty similar! But they're obviously different from 🇺🇸!

Canada 🇨🇦 and Jamaica 🇯🇲 have very different flags - and climates - but they both use +1.

I suspect that the website designers were expecting people to look at the flag and realise that it didn't represent their home country, and then change it. However, for the majority of +1 countries which aren't part of the United States, it looks a little crass.

My home country, the United Kingdom 🇬🇧, uses the +44 code. As do Guernsey 🇬🇬, Jersey 🇯🇪, and the Isle of Man 🇮🇲.

The UK is comprised of Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿, England 🏴󠁧󠁢󠁥󠁮󠁧󠁿, Wales 🏴󠁧󠁢󠁷󠁬󠁳󠁿, and N.I. (with a more complicated flag status!)

People can have a complicated relationship with flags. Your glorious banner of home might be my symbol of a conquering despot.

Flags change. Afghanistan's flag has changed 4 times since the year 2000.

Some flags are not recognised by other countries.

Flags represent countries, states, territories, and pirate ships 🏴‍☠️ - but they do not represent international dialling codes!

Lingua Franca

Lots of countries speak English. But the majority of them don't have 🇬🇧 as their flag.

Indeed, lots of people in the UK don't speak English. So using a 🇬🇧 to indicate language choice may be confusing.

If you are in South Africa, there are 11 official languages. Does 🇿🇦 represent Xhosa, Zulu, Afrikaans, English…?

Flags are for golf courses ⛳, motor-sports 🏁, and for Pride 🏳️‍🌈 - not for representing languages.

Do You Have A Flag

I'm pretty sure the law requires me to share this video…

This is hokum.

First Principles

When we first learn about computers, we're taught about pixels. The individual squares that make up a graphics display. Each platonic pixel is a perfect square that can display a range of colours.

In our naivety, we see how a diagonal line might be drawn on such a system.

We then learn that we can include hints to enable Sub Pixel Rendering.

The line doesn't intersect those pixels, but if we make them grey, the line will look smoother to the user. Nifty! The grid is magic!

This is a lie. Just like everything else in computing - pixels are a simple abstraction for our puny human minds.

Technology

Screen technologies play a huge part in how "pixels" are laid out. If you've never taken a look at a screen through a microscope, you should!

Here's a magnified version of a typical AMOLED "pentile" screen:

The individual colours aren't square. Not every pixel has the same colours available. They don't align in the way you might think. In short; if you design for "the grid" you're not going to align with the physical pixels.

Different technologies have different layouts.

If you want to go into the weeds, take a look through Ian Mallett's Subpixel Zoo - A Catalog of Subpixel Geometry

Outside of phone screens, pixels aren't always square.

Compare and Contrast

Here are a selection of some phone screens all displaying the letter b. (I've shamelessly stolen that image from Phone Arena's Screen comparison (2014) article. You can view the full resolution image.)

You can tweak your fonts and graphics to your heart's content. There is no universal grid on which they will be displayed.

OK, but all of us super cool designers have high end Apple kit. That's got a grid, right?!

Nope! Here's what your iPhone, iPad, and iWatch look like under a microscope: Now, that font might be hinted for lots of different sizes, but it isn't hinted for different screen technologies.

Grease is the word

When you're next on the bus, take a look at the screens people are using. I guarantee you'll see phones which are:

• Covered in fingerprint grease.
• Several cracks running through the glass.
• Screen protectors badly applied with dust trapped under them.
• External lights reflecting off the screen.

That's the typical environment for viewing your icon. The pixels don't even come into it!

Think I'm exaggerating? Look for yourself. Count the number of people on your commute who don't have pristine screens. As a bonus, this is my friend's phone: It hurts to look at, I know. But that's what your icon is typically shown on.

Biology

How far away are people holding their phones? Are their eyeballs up to the screen, or is the phone on their lap while they tap at it?

Visual acuity is complex, and humans come in a variety of visual abilities. Generally:

At absolute best, humans can resolve two lines about 0.01 degrees apart: a 0.026mm gap, 15cm from your face. In practice, objects 0.04mm wide (the width of a fine human hair) are just distinguishable by good eyes, objects 0.02mm wide are not. Science Focus

The latest iPhone has 458 "pixels-per-inch". That's about 180 pixels per centimetre. The individual pixels are at the limit of what the perfect human eye can see up close and in perfect conditions.

Humans can't see your pixels. Sorry. We're not on 17inch CRT screens at 800x600 any more. Your users simply can't physically distinguish between your fine-tuned icons.

Summary

There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.

An obsession with pixel perfect rendering is futile.

Designers aren't bad people. They're not stupid, mendacious, or wasteful. But they can be unreasonably obsessed with perfection.

The majority of your users aren't sat in front of a perfectly calibrated, retina mode, well lit, perfectly clean monitor. If they see your design at all, it is through a glass, darkly.

I have an icon which, depending on the user's preference, can be inside a square or a circle. Is it possible for it to be centred in both?

Here's a visual example. On the left is the AirBnB logo centred in a square. When the background is turned into a circle, the logo appears to "drop" - the bottom of the logo is closer to the edge than the top of the logo.

So, let's change that and make the logo's extremities equidistant from the circumference of the circle:

Now, in the square version, it appears to be floating near the top.

Part of the problem is that I don't know what terms I need to search for. I am lacking in design vocabulary.

Is this a problem which can be solved? Can you help square this circle? Please let me know!

I was taking a look at Google's "Family" proposition - which allows users to share their purchases with other family members. What I found didn't impress me.

Terence Eden is on Mastodon

@edent

File under "Falsehoods Programmers Believe About Families." pic.x.com/3vgiq0ursf

---

Let's take a look at some of the more baroque requirements in their terms & conditions.

Does your family have more than five members? Around 10% of babies born in the UK have three or more siblings. It also ignores families which want to include grandparents and in-laws in their group.

Or, "Sorry little Timmy, we can only add you to the Google family plan once your granny dies."

You're adopted, having been with a few foster families this year. You can't join the same Google family as your new brothers and sisters.

You split up from your partner - you can't join a new partner's family for a whole year.

In the UK, you can marry and/or start a family at 16. Are a young married couple really excluded from sharing their media?

The credit card requirement also seems odd given that you can purchase media using pre-pay cards with no age restriction.

Your adult child is about to be deployed overseas. Can they remain in the family so you can buy them games & films?

You live with your mum & step-dad. Your bio-dad wants to add you to his Google family. What do you do?

Why does Google have such a narrow conception of what a "family" is?

Falsehoods programmers believe about the "falsehoods programmers believe" meme

A number of people on Twitter have taken the title literally. "This is about managers and lawyers!" they protest. But, of course!

Terence Eden is on Mastodon

@edent

Replying to @edentOMG! The number of people who think I *literally* blame programmers!

The "Falsehoods" meme is about exposing poor planning at *all* stages.

---

All of the "Falsehoods" memes - including the original - are a shorthand for "Constraints placed upon a complex system by a mixture of ignorance, apathy, business requirements, or other legal constraints".

That's not quite as snappy!

This is undoubtedly a licensing issue. Google have used "Family" as a consumer-friendly term for "Group of people who want to share media but may or may not be related." The nuclear ideal of Mom, Pop, Dick, Jane, and one miscellaneous doesn't really fit with many people's reality.

If I buy a physical DVD or videogame, I can lend it to as many people as I want - whether they're part of my family or not. The friction of dealing with moving physical items is really the only barrier to me lending out my entire collection to the whole world.

The digital world obliterates friction.

So we're stuck with a situation where a mega-corporation and their lawyers try to define the minimum viable family which will keep other lawyers happy and, hopefully, won't piss off too many real families.

How do you think they're doing?

Thoughts?

You can continue the conversation on this blog, or this Twitter thread, or on BoingBoing where Cory has written some excellent insder information on the decision making process which produced this.

Well, it has been a dozen years and no one has released my killer idea, so I'm setting it free.

It's simple. A set of Bluetooth headphones with a built in display to show off album artwork. Here's a quick mock-up:

Original photo by Thomas Hawk

The nearest that I've seen to it is these cheap headphones which have a fairly dull LCD status screen:

Or, these monstrosities, with an LED graphics equaliser display.

There's nothing technically unfeasible about this idea. Bluetooth's AVCRP 1.6 specification supports Cover Art. If you've ever paired your phone to your car and seen artwork on the dashboard - you'll have seen this in action.

The three big drawbacks are...

1. Weight. Headphone wearers want them to be as light as possible. Will a screen on each ear add significantly to the weight and bulk? Not to mention the heavier batteries needed because...
2. Battery life. Charging headphones is boring. We're still waiting for colour e-Ink to reach critical mass. Is the benefit of displaying what you're listening to worth the reduction in listening time. And, for that matter...
3. Privacy and approachability. Do you want everyone to know about your terrible taste in pop music? Do you want people to talk to you when you're wearing headphones?

Right - who wants to create a Kickstarter for these awesome concept cans?

Take a look...

This is Google's default logo on its regular grey background.

The contrast ratio between the yellow and grey is 1.50. That fails to meet current accessibility guidelines.

This is just awful - I find it quite hard to read, especially for long passages. The text seems to shimmer about the background.

The logo is also often found on a pure white background with similarly poor results.

Against white, it is somewhat more readable - but it's nowhere near to a suitable contrast ratio

According to Google's own guidelines:

Text should maintain a minimum contrast ratio of at least 4.5:1 (calculated based on luminance values) for legibility. A ratio of 7:1 is preferred.

Material Design - Typography

Don't get me wrong, it could be a lot worse! But it really is unfortunate that their logo contains a central character which is so out of kilter with the background that it becomes a distraction.

The realization of the new identity required the collective work and diligence of hundreds of Googlers, in different roles, spanning the entire organization.

Evolving the Google Identity

Sadly, it would seem, none from the accessibility department.

It's hard wandering around seeing the mistakes which are made by designers. Perhaps it's poor keming on fonts, or a hotel room light switch which makes no sense, or - in my case - bogs.

Lots of toilets incorporate a "dual flush." Press one button to unleash a deluge sufficient to sink all but the hardiest of bowel-movements, press a different button to release a trickle designed to gently dilute the user's micturations.

I've often visited lavatories where I was unsure of which button to press - but I think this is the first time I found a toilet which blocked its own buttons!

The only way to access the buttons is to manhandle the toilet seat, or attempt to curve your fingers as to avoid touching the filthy thing.

But wait! There's more! As all Usability Experts™ know - a sign is an admission that you've failed to create something intuitive. Let's take a closer look.

It would appear that there really is no need for two buttons. Neither works by itself - the only way to flush is to simultaneously depress both. Not quite practical with one hand.

Here's how a sensible loo would work.

• Finish the shameful business in hand.
• Rotate body.
• Use finger of one hand to depress button.

Here's how this crapper works.

• Contemplate what it's like cleaning peanut butter out of a thick pile carpet.
• Rotate body.
• Read sign.
• Close lid.
• Use both hands to activate dual button flushing system.

What a palaver, eh? Nul points!

The web is built on three fundamental components:

1. HTML - the structure of the page.
2. CSS - how the page is styled.
3. JavaScript - the interactivity.

Typically, the website owner sets up the CSS to say links are blue, headlines are big, images have borders etc. etc.

Users, however, can over-ride these styles using their own CSS. For example, a person with poor vision may decided to pump up all the fonts, or make all the text high-contrast. Or, they could change the fonts to something like OpenDyslexic.

Or, they could hide the parts of websites that they just don't want to see!

Let's take Facebook. There are loads of parts of Facebook I just couldn't give a damn about. Take this weird little menu bar:

Who the hell is still poking in 2014?

Well, by right-clicking on the offending item, and selecting "inspect element", it's possible to find the ID and class which tell the browser how to display it.

So, how do we get rid of it permanently?

1. In Firefox, type into the URL bar about:support.
2. Where you see "Profile Directory", click the "Open Directory" button.
3. You're now in the folder where Firefox keeps its guts - be careful!
4. Open the folder called "chrome". If it doesn't exist, create it. (Note: all in lowercase.)
5. Open or create the file called "userContent.css" - again, this is case sensitive.
6. Add the following into the file and then save it.

   #appsNav{
      display: none;
   }
   

7. Restart Firefox.

Hey presto! The offending item is gone :-)

There are loads of CSS "hacks" like this that you can use. A good place to start if you want to re-draw the web is userstyles.org

My Personal Styles

I'm currently getting rid of "trending topics" and the constant adverts for games on Facebook. I've also disabled the annoying Google+ notification. Oh, and those silly "Outbrain" adverts which infect most news-sources.

/*
Facebook - remove trends and recommended pages
*/
#appsNav,#pagelet_trending_tags_and_topics,#pagelet_organic_ego_pane,#pagelet_ego_pane{
   display: none;
}

/*
Google - Remove G+ message counts
*/
div.gb_Ca{
   display: none !important;
}

/*
Outbrain - content from around the web nonsense
*/
#outbrain,#outbrain_widget,#outbrain_widget_0,#outbrain_widget_1,#outbrain_widget_2{
   display: none !important;
}