A splash of zoom

Foolproof by design

I cooked up a little app launch animation with edge animate for an imaginary mobile operating system. (Click on the gif animation to view the original html & css animation.) It's somewhat similar to what we have now on iOS 7. In iOS the animations are nice and simple: the icon scales up and fades into the splash screen of the app, then the splash fades into the app ui. (If the app was already open, it fades to a screenshot of the app and as the app loads, the screenshot gets swapped for the real ui, but that's a topic for another post.) So the concept there seems to be that the icon is the app. Beautifully simple, I think.

To bring a little more feeling of depth to the home screen, I thought the icon could be a view into the app, like mask or a lens. The icon would show a part of the splash screen, masked by the icon bounds. So the icon wouldn't necessarily be a picture made with static pixels, but actual app content. There are already some platforms with some sort of live home screen icons, like widgets, or animated icons and tiles that show the app state in some way. I don't think home screen icons should be full of animation, or some sort of mini apps, but if the icons contained actual app content that would animate into view, it might give the ui a more navigable feel. Like having an easier mental model of where you are in the system.

When you'd launch the app, the whole view would zoom in with parallax (not shown in the above animation, but imagine some other icons and a wallpaper there), so that the icon bounds would fly toward the user. Other icons and the wallpaper would be left far back on the z axis. The app contents would zoom in a bit slower than the mask. Once the app would be loaded, the splash screen would fade out and reveal the ui, also with a slight parallax. In my app example, an even better version could to have that triangle logo move to the app top bar and the ragged edged modal jump in from the top. Of course there might be such a thing as too much animations. If there are lots of things moving, the ui may either be delightful or get confusing if you're not careful.

If you're into ui's and animation, you should watch Pasquale D'Silvas talk Designing with animation talk, it's a really good talk on the topic.