« Mobile UI Animation, Part 1 | Main | Usability. What is it? »
September 23, 2005
Mobile UI Animation, Part 2
We have been building countless user interfaces for mobile devices using FlashLite these days. Flash can bring a lot to the mobile experience, but one of the most powerful areas Flash can change the mobile experience is with animation. In part one of this blog series I gave an example of poor mobile UI animation. In part two, I'll show some good examples and further discuss how animation can make the mobile experience useful and enjoyable instead of useless and distracting.
Now for the good stuff.
One of the best uses of animation in a Flash mobile UI is in reinforcing physical interactions. Recall Andrew's astute observation that mobile phones don't use a mouse. Seems obvious, but you might not fully realize how fundamental this is until you start building some mobile interfaces. The physical interaction on a phone is utterly different than on the desktop (in fact, the whole conceptual model is different, find more on that here). Phones typically make use of a five-way joystick or pad to move through an interface. This has a couple important implications to the user. Firstly, it means that all navigation is linear. You can't just click anywhere. If you want to get from point A to point C, you'll need to go through B to get there. Secondly, since there's no cursor, we need to be very clear to the user where they currently have focus. Which begs the question, if I try to move, where will I go from here? These are important questions in mobile UI design and animation can help considerably.
In this next example we use animation specifically to reinforce the connection between the physical interaction with the five-way and the content on the screen. Use the up and down arrows to move between screens. First try the example with no transitions.
Note: You will see many Flash movies in our blogs. To interact with them, click on them first to give the individual movie focus. Then you will be able to control them with the keyboard.
|
|
It's easy enough to get around, albeit a little disconcerting. Next try the interface with the sliding transition. As you move up and down here, the animation responds in the direction you move. It's simple, but effective. In this way, the user's actions are encouraged by the visual feedback from the interface, and an otherwise unfamilar interaction becomes immediately clear.
In this last example, let's look at another scrolling list. This one with a slightly different interaction. We call this UI a carousel. Essentially, it is a horizontal scrolling list. However, while the vertical list might be familiar to the average user, this horizontal scrolling can seem foreign - especially when they're combined.
|
|
Because there is no preview of the next or previous items, and left/right scrolling is fairly unfamiliar, the static version is downright confusing. Once again, by using animated transitions we reinforce the connection between the physical interaction (pushing left and right) with visual feedback to create a useful interface.
I'll talk more about creating device approriate UIs with FlashLite in future blogs.
Josh Ulm
Principal Designer/Developer, XD Team
Posted by julm at September 23, 2005 10:52 AM
Comments
Ciao Josh,
again got the point right.
I like the sliding idea. Also because it is a new concept in the mobile UI space.
Alessandro
Posted by: Alessandro at September 23, 2005 12:38 PM
yes the scrolling is way nicer, the visual cues while its scrolling do make everything much clearer to the user. However, in the last example, if you hadn't of told me to go left and right, I might not have discovered that so easy. Those two little tiny arrows dont exactly jump out to let me know what to do...maybe even adding the word "more" inbetween the arrows would have helped.
great work though, i cant wait to start doing some flash lite stuff.
Posted by: flashape at September 23, 2005 03:04 PM
Very slick (transition versions), which I truely feel give proper feedback of "flipping" through content.
Posted by: Chris Charlton at September 23, 2005 05:23 PM
I think the hardest thing will be building conventions in this space. Because general conventions from browsers and other assorted apps just wont work on a phone we have to take cues from them and addapt them for phones. Nice examples, really enjoying these post....:O)
Posted by: Campbell at September 24, 2005 04:43 AM
Cool samples
But should also be able for developers some samples of How we should animate complex UI for mobile Fonte, for example a maplink to view maps etc and draw a rentagle and then overload to maximize draw like zoom.
Other possible sample and how to develop is a catalog for products for example.
Posted by: Igor Costa at September 24, 2005 08:01 AM
Check out "http://microsoftgadgets.com/sideshow.aspx"
In the header graphics see the menu on the mobile devices? looks pretty cool huh!
Posted by: Campbell at September 25, 2005 04:07 AM
Interesting find Cambell. They say imitation is the sincerest form of flattery.
As for conventions, indeed we'll need to discover what UIs feel natural for devices. There is certainly no telling which way it will go anytime soon, but I think MM has some good ideas. ;)
Posted by: Josh Ulm at September 25, 2005 11:35 AM
I like those examples a lot. very cool.
As far as the phone not having a mouse, I still prefer to pretend like it does in a lot of cases. The tail users are finally up to speed on how their PC and that mouse thing work (for the most part) so why should we take it away from them.
More to the point(er), shouldn't we let them keep their security cursor for a bit as users get more comfortable with mobile experiences?
some examples of what I mean:
http://www.infinitumdesign.com/mobile/manhattan.html
http://justin.everett-church.com/index.php/2005/09/26/flash-lite-game-aces-high/
Posted by: Justin Everett-Church at September 26, 2005 06:33 PM
Indeed justin those are great examples of successful mobile experiences. And indeed, you can do non-linear navigation on mobile. In fact you 'could' even build a faux cursor and move around that way. However, let me make two points about those examples.
1. They aren't truly non-linear. You still can't jump anywhere from anywhere. You still have to jump from point to point to get around.
2. They aren't the best UI for all uses. Specifically for games and maps it's better to have a little more flexibility to jump around. However, linear movement can and often is much faster than non-linear movement with a 5-way. Pressing down-down-down is much quicker than pressing left-down-left. You take advantage of muscle memory that way and ultimately create a faster more intuitive UI.
Posted by: Josh Ulm at September 29, 2005 06:08 PM
It's not who was the developer, it's whether he respects your freedom that matters. If you want to live in freedom, you've got to reject software that tramples your freedom.
Posted by: chat at August 2, 2007 09:08 AM
very nice,
i belive this is the main thing that is making flashlite betrer than j3me. there are many cool j2me apps, but it take more efforts to code in j3me than flashlite which is more RAD.
thanks, keep posting the good stuff.
// chall3ng3r /
(originally posted October 6, 2005 10:36 AM - accidentally deleted)
Posted by: chall3ng3r at September 14, 2007 03:50 PM