I had been working on an app called “Animata!” for a year plus now and finally it has been released on iTunes App Store. In this app, I handled the user interface and also taking care of the app’s experience design. In this post, I will talk about the roadmap of the object animator, which is the core function of the app.
When the developer Ting approached me with the idea and prototype design of the app, I find it is a very interesting app and is very unique, because there are not much animator apps on the market that can do such animation with unlimited animation possibilities. But there is one problem: the prototype of the object animator is extremely difficult to use.
Discovery
Picture above shows the prototype design of the animator. So you tap an object on the canvas, a popover appears and the animate options were shown. You can move, rotate and resize the object. Quite painful to use and the popover is huge, it covers up the canvas. So we sat down and discuss about possible improvement solutions.
We draft out a couple of sketched and in the end, we found that the timeline like the Adobe Flash could be the answer. So I went to my workstation and worked out on the design and came out this as below (I skipped the art direction process and just focus on the object animator part). So when entering the animator, each object will have its own timeline and you can edit the animation as you like. Each animation type was represented by a symbol and you can drag the bar to adjust the animation time.
Well, looks much better than the prototype but it’s still didn’t solve the fact that it’s still very hard and complicated to use. Plus, it’s also troublesome and time consuming when you want to animate more than one object. This is not going to work.
Back to sketch
So one day, the Animata! developer Ting, came back to me with his new idea on the object animator by using checkpoints by showing the demo video (sorry couldn’t find the source video). The users can tap on the screen to insert checkpoints, and he/she can move/scale/rotate the object at that particular checkpoint. With this solution, we can actually get rid of the timeline and make the animation process much easier!
Bravo! I saw the video and told him, let me back to the sketch board and sketch for possible improvement of this approach. So I did a couple of wireframes in Balsamiq Mockups and showed to him. With checkpoint idea, not only we can eliminate the complicated timeline, we can also quickly animate different objects on the canvas without hassle.
Final design
After a couple of iterations, above is the final design of the Object Animator. We spent the most time tweaking the animator design, because this is the place where users will spend most of their time. In here, you can almost do anything, from animating to add/edit object and adjust layer’s sequence (top to bottom), which previously can’t. It is much cleaner and easier to use. We are all happy with the result.
Check the app!
Please visit the Animata! homepage and check out the app! You can also watch the Youtube video of a reviewer on what his take about the app too. If you are interested, why not visit the App Store and purchase the app? It’s one of the kind animator for iPad and you can share your masterpiece by using the in-app uploader to Facebook and Youtube. Now everyone can be an animator!
Comments