Enhancing ExperiencesWith Animation

A lecture by Alfredo Aponte, UX Director @NorthKingdom

Let’s Clarify.

We will not be talking about these kind of Animations.

Sorry :- (

We will be talking about...

Behavior

Visual Feedback

Transitions

Affordance

Good Stuff ;- )

But First... Why?

COMPUTERS

Interaction Design started from two separate directions.

We need to remember and understand that this comes from... two separate directions.

Screen Graphics on Displays

Input Devices

...with a good mixture of innovation!

Result, screens and input devices become one.Which easily allows technology to begin to !t into our everyday lives.

Let’s Begin!

When we design a computer-based system or device, we’re designing not just what it looks like but how it behaves.

The Nest Learning Thermostat

What is unique here... Apps (Digital Products) can easily be added to any of these type of devices.

The Camper Weather App

Animation is so much a part of a product’s personality.

because when we are designing the product, we are designing not just what it looks like but how it behaves.

Let’s use acting as an example. Actors are trained to capture the essence of their character in order to make you believe in them.

Additionally, the behavior needs to respect its audience. We need to de!ne what is appropriate, and who’s attention do we want.

Yet we need to remember what is natural. Everyday things can be personal and visual feedback helps the user understand what is happening or even working.

“Interaction Design should be concerned with the issues of beauty as our environments of experience become rapidly shaped by digital, networked, multifunctional artifacts that influence our lifestyle and perceptions”– Uday Gajendar

As designers today, we are in the unique position to improve aspects of everyday life, including visual, emotional, and experiential.

Talk to Me!

What is the value of time? Where is the sweet spot? 1 to 2 seconds?The answer is that time needs to be relative to its context.

A well designed system has reassuring feedback.

For example, we need to know what we have done when we have done it.

First levels of interface began with text edit... then we began asking ourselves how do we point, select, drag, etc.

Here are examples of how the GUI evolved with Lisa.

Here is an example of where we are today with graphic displays.

70Over time... interfaces began spreading into other products besides computer screens and they took on similar interface characteristics.

With gestures, we are designing the quality of how we and it interacts.

In this case, the system doesn’t necessary need to tell the user what it is doing. The user needs to know what is going on.

N9 Demo

Example of realistic impressions of motion with the basic laws of physics.

Web Browsing

Moving on to a different example of gesture interaction with motion sensors.

People create mental models about certain objects and task, which is why this is important for us to build familiarity for the future.

As technology advances... we are now redesigning everything.

Take me there.

Start-up screens and background animations are examples of establishing the tone and setting the tempo.

The Cosmopolitan

An indirect example: People’s behavior can be greatly affected by factors that they aren’t even aware of...

The Cosmopolitan

Transitions are creating fluid experiences.

Ro.me – Overall Flow

Planning for all transitions, controls, chapters, and interactions is important in order to create a continuos stream without instructions.

Ro.me

It’s very important that we grab the user’s attention and hold it.

Twitter is an example of how gesture interactions begin to in"uence little details in display graphics in order to increase the experience.

Simple is another example that uses visual animation as a seamless "ow to strengthen the products story.

In this case, every transition is meaningful... there is a purpose with each one because it helps structure the sections.

As you have seen, every little detail and animation is extremely valuable in the product’s holistic experience.

Relationships

Siri Ad Spot

As more products become personal... people are increasingly becoming attached. Partly because it allows people to be social,

emotional, and seek attention.

People perceive and pursue pleasure because evolution actually programed it in our behavior.

Which is essential for survival.

The Future of Self Service Banking

The Kinect Effect

“All aspects of a design must support the intended personality structure”– Donald Norman

Thank you.

Credits (slide #)3. Toy Story (Pixar)12. NASA Mission Control14. Ro.me15. Cyborg R.A.T.7 19. Nest20. Camper Weather App22. The Shining .gif23. Social Network .gif24. Blade Runner .gif27. Nooka30. Apple Lisa32. Sony Google TV33. Astronaut App (iOS)34. Nokia N9

35. Safari (iOS)37. Kinect38. Kinectimals41. Sony PS3 Start-Up42. Cosmopolitan Hotel45. Ro.me46. Twitter47. Simple48. iPod Nano49. Nizo51. Siri53. BBVO + IDEO54. Kinect Effect

ReferencesBill Buxton, “Sketching User Experience”Bill Moggridge, “Designing Interactions”Donald Norman, “Emotional Design”Tom Kelley, “The Art of Innovation”