Drunk CSS
shkspr.mobi92 points by FromTheArchives 5 days ago
92 points by FromTheArchives 5 days ago
Relevantly: https://theuserisdrunk.com/
> Your website should be so simple, a drunk person could use it.
I remember the first time I read this post, the message really stuck with me. "The user is drunk" is a brilliant line.
That being said, I don't think every website or tool needs to aim for the lowest common denominator.
> That being said, I don't think every website or tool needs to aim for the lowest common denominator.
Any application that will be used occasionally with the goal of not using it as quickly as possible should work this way.
A counterexample would be e.g. retail POS software, which should be optimized for minimum work and maximum responsiveness for trained users.
Huh? "The user is drunk" as a rule is great, there's no need to redefine it. Especially for POS interfaces! You'd want them as intuitive as it gets, because their users can be under a lot of stress, and could, in fact, be drunk.
I understand GP's "I don't think every website or tool needs to aim for the lowest common denominator" in two ways:
1. This rule isn't an excuse to stop raising the bar when it comes to interaction design ("drunk people won't notice the difference anyway").
2. Some machines should only be operated when absolutely sober and the interface should reflect that requirement ("don't drink and drive!").
Maybe things have changed in the past two decades, but I definitely would have been fired from my retail job if I showed up drunk. The POS interface there was super non-intuitive, but very efficient. This was 20 years ago so the classic text-mode interface with F1-F12 keys assigned to different functions.
While I doubt there's a single job where it'd be allowed to show up drunk, I also happen to know several bar owners that like to share some drinks with their customers. As required by law here in Austria, also bars need to use a POS system. I worked on one almost 10 years ago.
> You'd want them as intuitive as it gets [...]
I've recently been reading up on the science of learning, and I realized I never considered what intuition meant to me. Merriam-Webster lists it as:
> a: the power or faculty of attaining to direct knowledge or cognition without evident rational thought and inference
> b: immediate apprehension or cognition
> c: knowledge or conviction gained by intuition
If I could frame the thought of my original comment in terms of intuition, it would be:
All software should be intuitive, at what point that intuition is built differs.
For widest adoption, that software should be immediately intuitive to the widest group of people.
For maximum efficiency in a given (usually professional) domain, that software should allow a user who has built up their intuition to effectively merge with the machine.
I don't think one precludes the other, and a lot of the best software is immediately understood by a common user while having features for power-users. I do think there's a tradeoff to some degree though. If you're building a very specific technical tool, perhaps you can assume the user is a drunk programmer, but not a drunk grandmother. As in, the expected level of intuition need not be at the lowest common denominator.
That's horrible. Throwing away your health like that for quick money is short sighted.
Ethically dubious. Paying someone to poison themselves to test your site. That they are up for it aint an excuse.
If it was "ill test your site when I next come home from a big night out" it may be OK.
It sounds like he actually orchestrates a "big night out" each time:
One of the things I learned is that my review will be worse than useless if I am not having a good time the night I review it. I'll feel bad for underperforming, you'll feel bad for having a stressed, depressed drunkard on the line, and no one's knowledge of UX and the world is improved. So, I've made a few rules. One: I never drink alone. That means I need to ask friends whether they're up for a night out. I normally pay for their drinks, too. Two: I never schedule in a rush. That means that I now commit to a general two-week turnaround, but it can be longer than that, at times, and there's nothing I'm willing to do about it to make it faster."I'll pay you to look at this and give me your thoughts next time you're drunk." and "I'll pay you to look at this when you're drunk." are not mutually exclusive.
This is not what things look like when you are drunk.
(Source: have been drunk many times, and used a computer.)
I'm not sure it would even be possible to replicate with visual tricks since it's more your thinking which is altered, and not just vision.
The theme switcher in general is really cool. Especially being able to see and compare the "nude" version. It's like a modern day CSS Zen Garden
I was excited for zen garden but didn’t see anything there that stood out as I was expecting more of a focus on the design rather than the css purist lens. There are some amazing things that can be done purely through css, https://a.singlediv.com/2014-2019/ comes to mind.
Except that on mobile it's very not obvious how to access the themes other than dark and light, including drunk.
That's true. I did have it as a grid originally, but it pushed the content too far down. Happy to take suggestions on how to make it more obvious.
Having the horizontal scroll bar always visible and with good contrast may help (right now it auto-hides for me, Chrome on Android). Though in the initial position it may still not be obvious that it's a scroll bar...
Related but I wrote a Tampermonkey/Greasemonkey extension script [1] that when activated randomly rotated all the letters on a website from between -25 to +25 degrees as a part of my experiments around forcing more active "visual engagement" when reading to see if it made a measurable difference for recall.
[1] https://greasyfork.org/en/scripts/551208-rotate-letters-scri...
The irony is that, at least on mobile, you have to be sober to even find the Drunk button.
thats a feautre! prevnets the pregmaing drunsk from getitng double drukn or having the drunknness cancle out or watever
How about, the reader is old and computer illiterate. Being drunk is not needed. For example, here on this site, there is this unused space left and right. I meanwhile scale all websites with such unused space, using Ctrl+`+` to get the font bigger without losing functionality. But this site has an attribute `width=75%` in the outermost table #main, which makes this unused space stay there. So scaling up the font using the mentioned key combination is losing functionality (= less space). Luckily I can tweak that here using a user CSS (`#hnmain {width: revert;}`) but an old computer illiterate will probably have a slight problem. So, don't make your users drunk, just ensure they are, like, 80 and do not have advanced computer skills.
Not quite 80, but the same premise http://theuserismymom.com/
There is also so much more to designing for low tech literate than spacing. The accessibility guidelines focus so much on UI and being able to see what is there, but don’t focus enough on understanding what can be done with the website/app. Making sure your buttons actually look like buttons is a decent start but knowing that you can press a button, what it will do as the action, and being able to undo it and go back are so so valuable to helping them learn how to engage with sites.
CSS is amazing. So much can be done with so little code - blur, animation, insanely tiny loading spinners.. but there are SO many things I didn’t know about on display here.
To the author - hats off! A toast!
On mobile everything being slanted pushes some text offscreen so I can't read it
Does "cursive font" do anything useful on windows or popular linux distributions? I haven't used either of those for about 20 years. I know on Macs a decade ago, it used to display the lovely Zapfino font, but on Windows XP SP2, I seem to recall it falling back to something like Arial.
Anecdata: I have `urw-base35-fonts` [0] installed (as a system package called gsfonts, which was pulled in as a dependency for GNOME Document Viewer).
The gsfonts package comes with a fontconfig file that automatically aliases `cursive` to the Z003 font, which is also what the browser shows me.
I don't have those installed; for me:
$ fc-match cursive
NotoSans[wdth,wght].ttf: "Noto Sans" "Regular"
i have been drunk, this is not it
Dude I'm fucked as shit (but not, "I can't think anymore fricked") and your shit satisfies thoroughly. Have a link because my eloquence has left me:
now that i got to experience being drunk, id rather not, thanks
It's really nothing like being drunk, not to say that you should try it though.