Of course, necking a few shots every time you update your website isn't great for your health - so is there another way?

Click the "🥴 Drunk" button at the top of the page and see what happens!

These are a relatively simple set of CSS rules which you can apply to any site in order to simulate inebriation.

(I may have changed these since writing the post. Check the source for the latest version.)

First, monkey around with the fonts. This sets all the lower-case vowels to be rendered in a different font - as discussed in "targetting specific characters with CSS rules":

/* Drunk */
@font-face {
    font-family: "Drunk";
    src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
    /* Lower-Case Vowels */
    unicode-range: U+61, U+65, U+69, U+6F, U+75 ;
    size-adjust: 105%;
}

The rest of the characters will be rendered in the system's default Cursive font. Characters will also be slanted. The first character of every paragraph will be shrunk:

:root:has(input#drunk:checked) * {
    font-family: "Drunk", cursive;
    font-style: oblique -12deg;
    text-align: end;
}
:root:has(input#drunk:checked) p::first-letter {
    font-size: .5em;
}

Next, use the child selectors to rotate and skew various elements. While we wait for CSS randomness to come to all browsers this is a simple way to select various elements:

:root:has(input#drunk:checked) *:nth-child(3n) {
    transform: rotate(2deg);
}
:root:has(input#drunk:checked) *:nth-child(5n) {
    transform: skew(5deg, 5deg);
}
:root:has(input#drunk:checked) *:nth-child(7n) {
    transform: rotate(-3deg);
}

Make the entire page blurred and saturate the colours:

:root:has(input#drunk:checked) body {
    filter: blur(1px) saturate(2.5);
}

Make any hyperlink harder to click by having it gently bounce up and down:

:root:has(input#drunk:checked) a  {
    animation-name: bounce;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes bounce {
    0%   { margin-top:  0px; }
    25%  { margin-top:-10px; }
    50%  { margin-top:  0px; }
    75%  { margin-top: 10px; }
    100% { margin-top:  0px; }
}

Does this really simulate drunkenness? No. It is a pale simulacrum. What it is, however, is deliberately inaccessible to the majority of people.

How does it make you feel using the site in Drunk-Mode? Does it frustrate you? Do your eyes hurt due to the garish colour scheme? Do you keep missing the thing that you try and click on? Are the words so hard to read that it takes you extra time to do anything useful? Will you recommend this experience to your friends and family?

I've written before about cosplaying as being disabled. Strapping on a pair of Glaucoma Goggles will give you an idea of what a visual impairment is like. But it won't give you the experience of living that way for months or years.

You should test your stuff with people who have cognitive impairments or physical disabilities. Find out how usable your site is for someone lacking fine motor control or for those with learning disabilities. Pay disable people to take part in usability studies. Integrate their feedback.

Faffing around with CSS will only get you so far.

The common theme in those examples is that we are designing for the phone's context, not the user's context.

We rarely say "let's introduce a left-handed option" or "do we need a night reading mode?" or "does the user have time to concentrate on this UI while driving?" The user should be at the heart of our decision making, and her context should feature heavily in our conversations about UI.

A lot of modern "lifestyle" apps are focussed around getting people to bars and clubs - so why aren't designers creating interfaces for the "cognitively impaired?" i.e. Drunk!

I'd encourage you to watch this usability study from Three Sheets Research where they ask a drunk woman to navigate and interact with a moderately complex website.

Hilarious, right? But also accurate. Users have many demands on their time - being distracted by a phone ringing, or an incoming email, or a bright and shiny object has the same effect as being drunk. They return to the user interface with reduced thinking capacity.

My favourite social drinking app is Untappd. It lets me check in to beers and bars to let my friends know what I'm drinking and where I am. It serves as a beer sommelier by aggregating my beer reviews and presenting me with places to go and try new and interesting brews.

The interface, however, doesn't fully respect the change that I go through the more I use the app. It starts off well enough. A clean row of beers to choose from and a search bar.

After a couple of beers, the interface becomes less useful: The white on yellow colour scheme isn't helping things, some of the buttons are too small to hit first time and there seems to be a bunch of text which I just can't be bothered to read. There's a character count - but the font is too small. I'm pretty sure that's a camera icon, and I'm at least 75% certain I remember which shade of blue is Twitter and which is Facebook.

By the end of the night, the interface has morphed into this hot mess:

We know how drunk users act. Interfaces should adapt to the user's context.

If I am inebriated, perhaps those Facebook and Twitter buttons should disappear. Make it easier for me to hit the correct button and harder for me to share my sozzled opinions with my social network.

Fonts need to be much larger and distinct. Emboldened text with a strongly contrasting colour scheme is helpful.

Text is routinely ignored and the tyranny of choice can become insurmountable when tired and emotional.

Separate actions need to be strongly differentiated. Two brown buttons in close proximity makes no sense to someone rat-arsed.

Why is it so easy to make a bad decision when drunk? Oughtn't the interface say "I'm sorry Dave, I can't let you do that" - or at the very least give me a chance to undo my actions?

Interfaces don't need to stay static. Most competent designers can build apps which shift when the screen is rotated from portrait to landscape mode. Apps already have to cope with users setting their own font size and screen contrast - so why not go the whole hog and proactively adapt the interface based on how trollied the user is?

I've previously discussed why I think designers are crazy. And I can already hear some of the precious snowflakes crying out in horror at the butchery I am asking them to perform on their babies.

It's necessary. If you know that your user is going to have difficulty touching small icons, will have unfocussed eyes, and may have several other sensory impairments - it is your duty to adapt that interface!

Here is a radically simplified version of one of the Untappd screens. Yes, it's missing details (which the drunkard won't care about) - no, it's not pretty (I'm sure the beer goggles will make up for that) - but it's easy enough for anyone to use after a few cheeky beers.

Rather than going up to strangers in a coffee shop to ask them to beta test your latest UI, take the plunge and ask the folk propping up your local bar at midday. If they can use it, anyone can.

Here's a hand cut-out-and-keep user story for you to sneak into your next agile session.