The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
There are three levels to user interaction: Intuitive, cognitive and narrative.
Intuitive user interaction is the stuff the user already knows, without knowing it, about your product.
Users don’t rationally examine your product’s visual style and decide it sucks. They just know when they look at it.
The processes at the intuitive level happen faster than the user can think. That’s the “just knowing” part-- it happens so fast that it comes to them as plainly observed knowledge. The threshold here is around 16ms to 25ms. This also governs perceptions of framerate. Sites that run at 60fps update every 16ms, meaning they’ll seem better to the user on the intuitive level.
Cognitive user interaction is, roughly, the user thinking about your product. It’s the stuff users will explicitly tell you, or would tell you if you ever did user research.
Cognitive processes weigh in much higher, around 100ms to 250ms in execution time. The number is based on conscious human response time.
Because it’s so weighty, the cognitive can’t be used to judge things like framerate. That’s why engineers never notice bad framerate (unless they’re also PC gamers).
Instead, the cognitive level is where your user will start to impatiently expect your site to simply not exist or not respond after some interaction. This is why the 100ms threshold is so important for loading pages or responding to the user. It’s roughly half of human response time, or the time it takes to send the signal part of the human response.
It’s when your brain says “We should have heard back by now.”
It’s when you notice your arm isn’t moving after you slept on it. Or when you realize you told your hand to touch the hot pan, and it’s going and doing it, and it’s too late to stop it but not too late to watch your hand do it.
Actually, there’s a lot of anxiety associated with this time which is why users are so sensitive to it. Something not happening after 100ms is an inborn human fear, like spiders, or heights, or VTubers.
The final level is the narrative level. That’s stuff like branding. User stories, the annoying creative writing exercise that somehow made it into professional software development, might count under this category. But, day-to-day, this is mostly something for the marketing and business people to worry about.
The first rule of interaction design is to honor the intuitive and cognitive thresholds.
What does that mean? Well, in simple terms it means your app runs at 60fps and returns requested information in under 100ms.
That’s it. That’s all you have to do to feel like a real app. The rest is solid information design and then, third and last, making it look pretty.
Well, there’s all the business logic too. Whatever your app actually does. But this book isn’t about that.
If you just need to know who to go to about it: The 60fps (or one screen update every 16ms) number is the responsibility of the frontend team and the 100ms number is the responsibility of the backend team.
The numbers to remember here are 60fps and 100ms. CASS helps with the other stuff that goes on after these two all-important numbers.
Namely, CASS helps with the information design step. It lets you space out your information and convey it through color right out of the box in a smart way.
Finally, it helps you avoid some of the easier-to-avoid hurdles in user interaction, like low contrast or long text measure. That’s it. It’s not about connecting your app to your user. That’s your job. CASS is about getting out of the way.
The Gumroad version contains a secret chapter that spills the dirt on CSS preprocessors, a tech CASS no longer uses.
