The use of animation in IOS7, Pitfalls and Promise.

I have been using IOS 7, the newest operating system for Iphones and Ipads since it first became available back in June. First on my Iphone 4 now on my even faster and better Iphone 5s and Ipad 4.

Nowadays, good design is so much more than how an app looks. It also has to “feel right”. When you look carefully at the animations and transitions in IOS 7, you will notice that the interaction is nearly as important as the whole experience.

When they released IOS 7 it came with some problems for people that suffered from motion sickness. The zooming in and out of icons when launching or closing back to the home screen look sharp but is not to everyone's liking. After plenty of complaints about people suffering from motion sickness, Apple got the message that iOS 7 zooming isn't for everyone. The iOS 7.0.3 update has made it possible to switch off the zoom effect.

Diving deeper into the trends of animations and transitions, you can see how some apps simply use the same transition throughout. For example, Instagram and Snapchat use’s almost no animations or transitions therefore successfully creating a quick and responsive experience. I wonder if this will become the norm.

However, there are other apps that have inherited slightly more technical transitions such as Skype or Evernote, where they use slides from left to right and bottom to top with a slight spring action entwined into the animation.

They also have inline transitions. This means the screen never changes but you can scroll through a menu and see different features on the app without the screen actually changing the screen.



IOS 7 introduces many UI changes, such as borderless buttons, translucent bars, and full-screen layout for view controllers. Using Xcode 5, you can build a project for IOS and run it in an IOS 7 simulator to get a glimpse of how the app looks with IOS 7 UI.

For example, the only differences between the two versions of the elements table below are the deployment target and the simulator.


As soon as a new update is released, it can be tempting to dive straight into your app, but there are a fews things to think about before updating your app.

As you figure your way around IOS 7, it becomes clear that the changes are both subtle and profound. Similar UI elements are easily recognisable but look very different.

As you explore, you begin to distinguish the main themes of IOS 7:

  • Deference. The UI helps users understand and interact with the content, but  never tries to compete with it.
  • Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and are sharpened to focus on functionality and motivates the design.

  • Depth. Visual layers and realistic motion heighten users delight and understanding.

When we design digital products, we often use design applications like Photoshop and Sketch. People who have worked in the industry for a few years now, obviously have learnt that it is more than just about visual presentation. However, people still continue to create static designs. The late Steve Jobs said this about design:


“Its not just what it looks like and feels like. Design is how it works.”


limo-Static.jpg

A static website usually only consists of a few pages with content that does not change very often.

The experience and impression of a product is shaped by a mixture of factors, with user interaction taking an important role. No longer can we think of interfaces as static designs and then add transitions and interactions later on. Instead, we need to implement the interactive nature of the web from the very beginning.

Let’s now look at some examples in which interaction, defined by subtle animation, improves the user experience.

 

Animated Scrolling

The absolute curse of the web is Hyperlinks. When you click a link it has the potential to take you anywhere, from a product page to a weird collector’s page in the middle of nowhere. You end up with a loss of context.

When you read a book ( which I don't do much of ) you get the sense of linearity. Every chapter builds on the last. You must read chapter one to understand chapter 2. If you miss a chapter, you feel you may have missed something important. On the web and with long websites, this can happen accidentally. By adding a scrolling animation, this can be fixed.

 

Stateful Toggle

From the last example, transitions help users to understand the pace and flow of an interface. Nothing feels more unnatural than a sudden change, because let’s face it, nothing ever suddenly changes. Change happens over time. For example are the toggle menus. If you were to ask me what I associated a plus sign with, I would say "The action of adding content or expanding an element". By rotating it by 45 degrees, the plus sign becomes a cross, an interface element widely understood to mean "close".


This animation completely changes the meaning of the icon. Such a small detail means the difference between having to guess what will happen and knowing what the icon means in either state. If you ask me, the transition in very user friendly and notice how the plus sign always rotates the same the direction as the content, reinforcing the flow. 


Collapsed Forms and Comments

The comment forms on many blog pages and websites are the most unhappy places to be.  Why? Well, most of them aren't very user-friendly. When you are ready to post a comment, you just want to start typing the comment itself and nothing else. Instead you are forced to do all kinds of other stuff first. It's very annoying.

To motivate people more to comment, you can collapse or hide other features of the comment form just to show the most important parts of the form, the comment field.

Drag to refresh

This, by far, is one of the most exciting transitions to emerge since the Iphone was released. It allows the user to update any sort of feed from Twitter, Instagram, to Snapchat -they all have inherited the "Drag to Refresh" animation to their apps.


 

Below are some more examples of animations and transitions that are popular. 

Focus Transition:

When navigating by keyboard, the user is often confused on where the focus has moved to upon pressing the Tab key. Animation points them to the right spot on the page. The transition is subtle but has a big impact on orienting the user.

Context Based Hiding:

The basic idea is that the navigation controls for the Chrome Browser hide automatically once the user scrolls down. As soon as the user scrolls up again, the controls reappear.

Sticky Labels:

Sticky labels are another subtle yet useful combination of a user-interface component and a meaningful transition. The project label scrolls along with the content, thus providing context for the images on the right, until the next project appears. This behaviour is similar to that of the address book in iOS and is especially helpful for providing context in long sections.

Conclusion

These are only a few examples, among hundreds of other out there. The point is not to show off the latest and fanciest interaction techniques, but rather to show how small interaction details can significantly improve the user experience.

If we are to keep designing better digital products, then we need to challenge our current beliefs and see how interaction patterns and trends can potentially make the life of the user more enjoyable. I'm not saying we should reinvent the wheel, but we should keep exploring the boundaries and get out of  our comfort zones and keep testing.