Movement in Mobile Design
DevUX pt.2: Using movement in mobile UX design
A Developer’s Guide to UI/UX: This series is an attempt to provide useful UX information to new developers, because if the overcrowded app store tells us anything, it’s that people don’t know basic UX, or even common sense, really. Some coding knowledge is helpful, but not necessary.
When you finish this article, you should have a more extensive understanding of how 80% of the things that are moving in your app probably shouldn’t be.
Introduction
At its core, apps are essentially limited 2D windows into a much larger 2D, or even 3D world. In life, when you store a hammer in a drawer, it still exists, and you expect it to be there when you open the drawer again. On your phone, when an object leaves the screen, it doesn’t really “exist” anymore. So, making an intuitive app is all about moving what’s on the screen in such a way that the user gets a feel for the world you built.
My experience building apps, painfully scrutinizing apps, reading books, and devouring online content has taught me that movement can be broadly categorized as Expected Movement and “Ooh, Shiny” Movement.
Expected Movement
Do you have facebook? Of course you do. Without opening the facebook app, tell me: when you scroll up and down on the main feed, does anything other than the feed move? Give it some thought and then scroll down.
The answer
is….
……
…..
….
…
..
.
Yup (duh).
Now that I’ve mentioned it, it’s obvious isn’t it? They want to make more space for your obsessive focus on everyone else’s lives, so when you want to read more content, they hide the stuff at the top. Simple. What’s amazing is that you probably didn’t even notice this. This is a perfect example of Expected Movement.
My action directly affects the movement of the app in such an intuitive way that I don’t even notice.
Achvr is an example of the same action (scrolling) with an unexpected movement. With the facebook app, when I scroll up 5 pixels, it hides the bar by 5 pixels, making it feel as if I’m moving the bar. In Achvr, a small movement causes a much larger movement in the app, which causes a different effect. With facebook, I ignore the top movement, with Achvr, it forces me to focus on it.
(note: I scroll approximately the same amount in these two gifs.)
Why does this happen?
Watch Apollo Robbins pickpocket someone on the Ted Stage (8:47). Robbins discusses how our brain can actually only focus on very little at a time, like a spotlight. To use his example: what’s the icon on the lower left corner of your iPhone’s home page? Check it. Were you right? Now put your phone down and tell me, without looking, what time is it? You saw your clock at least twice while checking the icon, but chances are you didn’t know the time.
Simple, intuitive, everyday things are ignored by our brains because it doesn’t find anything interesting or threatening about them. On the other hand, is your attention is still being drawn to that spazzy box on the left? You don’t have any intuitive context for understanding why that’s happening, so your brain pays attention to it.
Conclusion: Sometimes you want users to notice things, sometimes you don’t. And that brings us to:
“Ooh, Shiny” Movement
As you’ve probably guessed, this kind of movement is based on using movement to direct focus somewhere. Maybe there’s a feature you want people to pay attention to, or maybe you want to build a 2D background space that flows better.
This is Animoto Video Maker, my favorite example for using movement to pull attention to something. Animoto basically avoids having a tutorial by making their interface incredibly simple. So, when you get to this page and you suddenly see this bouncing pane, you can’t help but want to open it .
Beautiful, ain’t she?
This is Jink. Where is your eye drawn? To the movement. The reason why this is important is because people don’t pay attention to intro screens, but I very much did for this app (try it out). Most apps try to get people to read info text, but Jink uses the text as a secondary source of information if you don’t understand what the graphic is showing.
The Takeaway
“OMG look what I can do!” -Every New Developer. That’s a great feeling, but it’s also dangerous. You’ll suddenly go from not knowing how to call objects to being able to move one across the screen, and now you want to move everything across the screen. I did this a ton when I started, and still catch myself doing it today. But, that box you just flew across the screen? Not as rad as you think it is. So, here are the takeaways:
- JUST BECAUSE YOU CAN MAKE SOMETHING MOVE DOESN’T MEAN YOU SHOULD.
- Most moving things are the “Ooh, Shiny” type, which means they are drawing attention away from what’s important. If you cannot justify the movement, get rid of it.
- If something must move, ask yourself this, do you want the feature to serve the user unnoticed, or do you want them to notice it?
- Ask an experienced dev for their opinion. Friends will tend to think something is cool if they know you built it, but devs know how things are built, so they’re bound to be less impressed by novelty.
- Try to spot it in the wild. One of my greatest pieces of advice is to scrutinize terrible apps, not just good ones. Good apps show what worked well for them, terrible apps show what won’t work for anyone.
- Expected Movements are much harder than “Ooh, Shiny” Movements. So if you need to implement one, do your research first. (I’ll probably do a post about this).
Wait, what about…?
You could argue that transitional movement, segues, color changes, popups, expansion/shrinkage, etc are all different styles of movement. I would agree that these are all worth talking about individually, but I still believe that in general, movement does one of two things: react in a way that the user would expect, or act of its own accord to draw the user’s attention. If you think I missed out on something, I’m not suggesting you’re wrong, this is a very simplified article, so feel free to shoot me a message!
Now that you’re equipped with this information, go out into the world and spot it! Tweet me your findings! If you spot better examples, send them over to me and I’ll replace my current examples. Do you disagree with me? Shoot me a message, I’d love to discuss it with you.
-(@)cwRichardKim (twitter, github, @gmail, medium)
