Invisible Details of Interaction Design
rauno.me
rauno.me
I had to resize the browser window to read the content of the article and carefully position the scroll bar so I could read the content without being constantly distracted by the looping, unpausable animations.
Interesting note: the page doesn't respect the `prefers-reduced-motion` media query.
I don’t think any other interaction fills me with more rage than trying to paste content where I set the I-beam. You set the I-beam in a spot, and then… hold? Sometimes the “paste, copy, select all” menu comes up. Or it just prolongs the loupe being on screen. So you have to carefully slide down, without moving left or right, and then pinpoint exactly where the I-beam is with your finger, hold, and now you can paste. It will happily jump to a word or line ending on any step of that process.
Or! I’ve made some typo that’s inexplicably locked in the iOS dictionary now, so I have to remove one letter… which it will happily swap back to the incorrect one after I spent 10 seconds fiddling with a virtual magnifying glass to correct it. Why is that not a signal to iOS that I’m precisely editing this text?
This happens a lot on mobile and especially on the web. You tap or click on something, and there is no immediate feedback about whether or not that action did or will do anything. The computer churns for an indeterminate number of seconds, and then you finally get the UX feedback--or you don't. Awful.
It is amusing, but also a good lesson in that you can't take these tu quoques or 'doctor heal thyselfs' too seriously. I mean, the last Edward Tufte book I bought (_Seeing With Fresh Eyes_) could've benefited from a few more fresh eyeballs on it inasmuch as it had material better left out and tons of typos in it! Am I going to throw out everything I learned from Tufte or say that he wasn't an expert in scientific communication after all?
I had to remove the floating share bar at the bottom using UbO element picker. That wasn't a good first impression.
As to the content, some call me an Apple fanboy but even I found the article full of dubious parallels, captain obvious observations and generally an unbearable read without a point.
For example, I never swiped physical book pages, by the way. Since childhood I turn a page by lifting its edge first with initial pinch motion towards the edge. For me "swiping" often lifts more than one page which is frustrating. Yet people like me don't have problems using swipe. (Let alone new generations who see tablets before books.)
Maybe because it's just a thing we all learn when using the device?
Later this paragraph just killed me, no comment:
> As a designer, I love to animate everything. Object permanence, creating a focal point, and delight are all good reasons for doing so. But it's not so obvious when not to animate something.
Okay maybe one comment: please stop animating everything, thanks.
And I dislike the Pencil's unscrewable tip, because I do actually fidget with it and this leads to trying to write with it not fully screwed on and thinking Pencil is breaking. Because it randomly stops drawing unless it is fully screwed in. A useful detail would be if it had a tactile bump when screwing to let you know you are safe to use it.
I'd keep it to myself but the article reads just so full of itself I couldn't resist. Maybe my mood contributed
Yeah, that in particular was weird. Even the animation in the article subtly hints you at why you don't swipe pages in books: that's a quick way to get bent or torn pages. A sideways motion is literally the worst way to start a page flip, since the force you apply acts at the right angle to the motion you want, and instead is trying to compress the paper sheet.
The pinch gesture explanation was even weirder. Myself, I'd go for analogue of using finger swipes and two-finger motions to slide pieces of paper, or other small objects, on a desk. Only in that context pinching sort of comes up as a candidate zoom gesture - bringing small objects closer or further apart.
Device establishes a simple intuition: while you touch the screen you expect whatever is under your finger to follow where your finger goes until you lift it.
So within that intuition designer's job is to see what gestures are physically OK to do with a screen and what tasks the user needs to accomplish, and to come up with interactions that suitably bridge them together.
So it doesn't have anything to do with book reading or anything. In fact it misleads the readers. In reality designers establish a simple primitive intuition/map and build on top of it. Swipe and pinch are pretty much the two things you can work with on flat screen, and pinch is obviously zooming (per above), so there was no other way for them to do page turning
(If you are like me you probably noticed how this intuition breaks when you try to pinch or move stuff around to find out it's unmovable. This is also why in scroll lists it lets you scroll past the end: to satisfy the intuition.)
These low-level interactions are part of the operating system substrate for most applications. Like with the desktop UI before mobile, conventions have been established by the platform creators, and the application UI designer’s job isn’t to second-guess how a checkbox works or how pinch-to-zoom works. Adding your own unique personal animated touch might feel delightful and fun, but more often than not it’s just confusing to the user. (There are exceptions of course — some apps have a user base who thrive on discovering surprises and figuring out the unexpected. But the typical SaaS or mobile ordering app isn’t that.)
The word “design” itself has become somewhat misleading about what the purpose of this job actually is. “Information architecture” was always a better description of the actual bulk of the work.
Architects don’t generally spend any of their time inventing delightful door knobs that turn in unexpected ways. But user interface professionals tend to focus on the micro. Design systems often seem to be just another avenue to tinker with the details of button border styles and similar decorative flotsam.
Delightful door knobs turn in expected ways and are at best well-styled, never to the point of confusion. Not calling attention to themselves, but immediately obvious when you need to open a door.
Creating interfaces that demand attention is annoying at best.
Having smart and creative people spend time on inventing doorknobs is not the best idea.
And some architect will obsess about novel ways of opening the door – although it's not always desirable, it may occasionally result in something that makes sense in given context.
It's also fair to add that some design prevail only due to tradition - the US round door knobs are a great example. It's really bad design, if you think of it..
On the subject of doors: there was once a professor of architecture who made a point of asking every senior thesis presentation "where is the door?". It was always shocking how many people would overlook this basic detail while focusing on something like the hermeneutic of teleology implicit in a vast spiral corridor. Architects who focused on doorknobs always got this one right. Good design requires a tremendously high dynamic range between the micro and the macro. People who understand the importance of motion/animations generally make better decisions about how to structure information architecture at the large scale because it all needs to line up.
For fucks sake, you shouldn't even use animations for taps!
Sharing a screenshot in iOS puts a damn animation between each of the 4 or so required taps. Totally unnecessary and you can't even get out by clicking the home button. It's disabled until the animation finishes! You're stuck there watching them for the 1000th time.
Plus, the pacing of the content and animated content was enjoyable
Gorgeous sites, wonderful little details all around. As another example of this article's very message!
Articles like this always amuse me. This person has created nothing except annotating and designersplaining the design work other people already researched, designed, tested, and deployed.
I suppose by thought and attention to detail you mean staged well-composed screen grabs of these common UI patterns?
It requires sensitivity to notice and appreciate the little details in our world. The author has shown a wealth thereof. He took exceptional time and effort to uncover and document all kinds of wonderful interactive details for us to appreciate. He wrote in a clear, direct manner, and he had his writing reviewed by others.
His article shows a rare level of passion, attention to detail, and respect for the reader. You don't have to agree with it, but you should at least respect it.
To Rauno Freiberg should you read this: thank you for writing and sharing this article.
This is the behavior of the touchpad of my HP ZBook with Debian 11 and Gnome. I just checked. I didn't check with an actual mouse because it's somewhere in some drawer but I can't remember where.
Apparently that works on Macs only with the Magic Mouse, because:
> However, with any traditional mouse, like the Logitech MX Master 3, the scrolling on the first window is cancelled and hijacked by the second window
Does that mean that the mouse knows about the windows it is placing the pointer on? That seems weird. That kind of intelligence should be in the window manager (whatever it is on a Mac) and not inside an external device or more probably its device driver. If that was the case, all pointer devices should behave in the same way.
Mapping the mental models of “where am I now”, “did I change this or do I need to click save first?”, “wait, that was unintentional, take me back”, “can other people see that I’m typing”, “omg look at all this garbage, how do I organize these random notes” and other everyday things are often overlooked.
I’ve found that there are many subtle choices that most engineers think of as equivalent but are different for the user. UX people are sometimes slightly better but oh my they miss the forest for the trees soo often as well.
When you try to look backwards and say "this is why it works", that's not a lie, but applying the learnings in a forward moving sense are filled with exceptions and traps. So you're kinda back where you started, where the palette of things to try gives you inspiration, and then again, you gotta put it to users.
Anyway, great for UX people that they command so much money, but I think that's less that they are objective and scientifically based and more because they are good at navigating the politics of decision making.
Things don’t have to be “proven to always work” to be useful. If paradigms engender thoughts, they can be useful in context.
By your logic, since most heuristics don’t always work, we should throw them out. Don’t throw the baby out, too.
Unproven things can be useful.