Invisible Details of Interaction Design(rauno.me)
rauno.me
Invisible Details of Interaction Design
https://rauno.me/craft/interaction-design
37 comments
One thing I was surprised to read being praised was the I-beam loupe in iOS.
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?
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?
I can't tell you how many times I've 1. tapped on the I-beam wanting to copy or paste some text, 2. waited... waited... for the “paste, copy, select all” menu to come up, 3. gave up waiting assuming I did something wrong, 4. went to re-tap the I-beam but as I did the menu finally appeared, BUT my tap dismissed it. Now I don't know--do I wait and tap again? How long should I wait? How long after I tap will I know if it was successful? Just a totally bonkers and frustrating experience, to do something that should not be complicated.
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.
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.
The lack of feedback is exactly the problem, you’re 100% right. Touch interfaces are still so useless with any sort of precise control which is when you need some sort of feedback and assurance that what you want to do, is what’s happening. I’m surprised we haven’t seen some new touch-ui equivalent to “right click” become the norm. Something that signals “I’ve chosen precisely what I want to interact with, DON’T CHANGE MY SELECTION, and give me the actions I can preform on them”. How did “long press” get saddled with that and 4 or 5 other actions?!
Designers are not immune to "the cobbler's children go unshod" / https://en.wikipedia.org/wiki/Muphry%27s_law - if someone writes a post boasting about how minimalist or simple their page is, then it will surely have implementation flaws or load 100kb of unnecessary JS; if it boasts about performance, then everything will be uncached and it blows 1s unnecessarily before rendering; if it talks about the challenge of "frequency & novelty", then it will surely be an unending scroll of rapidly flickering distracting looped GIFs; and so on.
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?
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?
> [...] 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.
Interesting note: the page doesn't respect the `prefers-reduced-motion` media query.
> I had to resize the browser window to read the content of the article and carefully position the scroll bar
I had to remove the floating share bar at the bottom using UbO element picker. That wasn't a good first impression.
I had to remove the floating share bar at the bottom using UbO element picker. That wasn't a good first impression.
First, how about visible details of interaction design, like putting navigation/promo bar on top of the text I'm trying to read... with icons so low contrast you can't know what those buttons do until you tap them? And how do you manage to make it lose scroll position every time I switch back to it on mobile?
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
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
> 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.
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.
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.
I think it's easy to explain both swipe and pinch and the author just misses the mark.
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.)
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.)
In my opinion these are largely things that the average UI designer should certainly be aware of, but should also not be concerned with reproducing or reinventing.
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.
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.
What a perfect example.
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.
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.
To be fair, architects will obsess about choosing the right door knob to fit their overall design.
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..
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..
In theory maybe, but all the best designers I know concern themselves with the small details, while the ones who grandstand about information architecture and 'big picture' thinking frequently make glaring mistakes.
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.
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.
Thank you for the doorknob example. It's perfectly on-point.
> Sometimes we can get away with not animating mouse or keyboard interactions, without it feeling jarring.
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.
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.
[deleted]
There is an oversight in Apple's approach: it hides a lot of functionality as "magic" without affordances. Feature demonstrations are too often shoveled into product launches or OS update news and then never revisited. To remedy this, Apple needs current, comprehensive visual user manuals for each product demystifying every trick and function in pedantic, encyclopedic terms.
Highly agree. Their interface is not intuitive. If it were then I (with my decades of computer experience) would be able to use an iphone after having never used one. The few times I've tried, I've walked away annoyed that there were so many hidden tricks needed to get basic things accomplished. And to that point, based on this article, it looks like animation is a key crutch in illuminating them. Of course android is following suit now, so once again new users are alienated.
I think there is a distinction between good interaction design and good functionality. If you look at the apple product as a toy to be interacted with, then the points in this article are fine. If you want to get something done quickly, then Windows 98 with a mouse and a mechanical keyboard was still quicker and less frustration.
I doubt it's an oversight, it's probably a conscious choice most of the time. I agree with you some pieces are highly questionable, as there's literally zero affordance and absolutely no way to discover them. But to be fair, you definitely don't need user manual to start using iOS. It's slightly more difficult to MacOS due to most of first time users coming from Windows environments.
Around the time of the iPhone 3G, they had a video on their website (around 30 minutes long, IIRC) showcasing every function and interaction.
I appreciate this post because for engineering (non-design) types like me, UX design is one of those things that I don't take note of unless it's really bad. As a result, when I try to design a webpage, I have no idea what made the other web pages good and mine looks like garbage :) I guess it's kinda like that thing where you ask random people to draw a bicycle without referencing a picture.
Plus, the pacing of the content and animated content was enjoyable
Plus, the pacing of the content and animated content was enjoyable
This is post-hoc rationalization of the only kind of touch controls accessible to the average user. Nothing novel or pre-planned about these, and they certainly don't "teach" the users to do certain things (as much as apple fanboys might want it to). It's a generalized user-interface, not difficult or novel. In fact it's very unopinionated, contrary to what the article states.
Was wondering why this site looked so familiar. Very vercel-esque, which reminded me of paco.me, and that's when it clicked both of you worked on vercel!
Gorgeous sites, wonderful little details all around. As another example of this article's very message!
Gorgeous sites, wonderful little details all around. As another example of this article's very message!
The amount of thought & attention to detail that went into this post is...incredible. A true masterpiece.
Really?
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?
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?
I find this comment dismissive, negative, and disrespectful; I feel compelled to write an opposite comment should the author himself read this.
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.
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.
I forgot my HN account credentials, but this heartwarming framing made me create a new one just to say thank you for such kind thoughts! Appreciate it :)
> With the Magic Mouse I can scroll on a window, then move the pointer over a second window to click or find something, and the scroll events will not register on the second window. This feels great to me.
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.
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.
Keyword being “details”. Interaction design is (or should be) primarily about understanding what’s going on and how to “do things”. Both are signal-to-noise problems. Just like engineering, trade offs. Don’t treat it like a science, it isn’t. It’s a craft.
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.
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.
I often think these kinds of posts are bullshit. UX paradigms are not proven to always work outside of its very specific context, spatially, temporally, culturally. When experts come in they make us feel safe, but the only way we get to these answers is by having inspiration to try something, give it to users, measure the results, and iterating on it.
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.
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.
Hi, I’m an overpaid UX engineer and I assure you I’m abysmal at the politics of decision making. What I’m good at—exceptional even—is predicting, in advance, before a single line of code is written, whether a given UI idea will “work”; whether users will love/hate/tolerate/be indifferent about it. If I was good at the politics too, I’d be running the place.
This is (sadly) an engineer’s perspective.
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.
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.
The ui and the content you have has to leverage each other if that makes sense. A new fancy navigation animation because it looks cool is asking for a lot of trouble. Only teams with a lot resources can afford to do fancy animations, as they take a lot of time to debug, change, make it work with other elements and most time consuming - get the details just right. You have to stick to the stuff the OS framework gives you but add a bit of creativity to it.
Interaction Design is applied neuroscience. Developers write software for computer processors, designers write software for human brains.
[deleted]
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.