BRING TO LIFE CAR AND DRIVER | BOOST USER ENGAGEMENT WITH DATA VISUALIZATIONS AND FUNCTIONAL ANIMATIONS

AGENDA

  • INTRO
  • HOW TO BOOST USER ENGAGEMENT?
  • ANIMATION
  • HOW ANIMATION HELPS IMPROVE UX
  • HOW TO BRING CAR AND DRIVER TO LIFE
  • TYPES OF ANIMATIONS
  • MICROINTERACTIONS
  • FUNCTIONAL ANIMATIONS
  • DATA VISUALIZATIONS
  • HOW CAN WE ACHIEVE THE BEST RESULTS?
  • METHODOLOGIES AND BEST PRACTICES
  • LET'S ANIMATE!
  • NEXT STEPS
  • THANKS

For Car and Driver we need to stay constantly relevant to our users, whether they are car enthusiast or in market shoppers. We can accomplish that by driving customer engagement and creating valuable and memorable experiences.

HOW?

With the use of Animation, At first the term animation may seem frivolous, but different types of animations and interactions have a significant psychological impact on users, that is why animations can be meaningful and are rooted in human psychology.

ANIMATION

DISNEY'S PRINCIPLES OF ANIMATION

To animate is “to bring to life”. By breathing additional life into our designs through the use of animation, we can add meaning and function to the experience.
  • Communicate status and providing feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions
  • Developers should see animation as an integral part of writing code, not an add-on or ancillary element.
  • Product Teams, Social, SEO, Analytics should have strong opinions about how animation can help drive user engagement and satisfaction.
  • Other Teams should be delighted to see more users, higher levels of engagement, and an increase in the number of transactions that are driven by a rich UX.

Animation is no longer just for delight; it is one of the most important methods for successful interaction.

TRANSLATE PHYSICAL ACTION INTO YOUR INTERFACE

Emotional design underlies animation

  • MICRO-INTERACTIONS
  • FUNCTIONAL ANIMATIONS
  • DATA VISUALIZATIONS

MICRO-INTERACTIONS

A micro-interaction conveys to the user an action has been performed. Once the action has been performed, the user receives an indication of some kind to let him or her know they succeeded in their intention.

  • The Trigger: This is what initiates an action. On most interfaces, this includes clicking or touching specific elements of the interface.
  • Rules for Responses: The micro-interaction bases the response on how the user interacted.
  • Feedback: This is the response that lets the user know the action was performed successfully.
  • Loops: The end of the cycle is whatever happens next. Clicking a “Share” button on a social media post results in a notification to the user that the post has been “Shared,” and the result is a new post on the user’s profile.

FUNCTIONAL ANIMATIONS

Functional animation is subtle animation that has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life.

Motion can make surfaces feel alive by multiplying and dividing them, and changing their shape and size. You should use functional animation to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.

Successful motion design possesses the following six characteristics:

  • RESPONSIVE
  • ASSOCIATIVE
  • NATURAL
  • INTENTIONAL
  • QUICK

DATA VISUALIZATIONS

  • Choose the right type of visualization. Make sure you’re following best practices, which you can learn about more here.
  • Present the information correctly. Ensure that data visualizations do not skew the data or misrepresent what the data means.
  • Logically order information. This refers to organizing categories either alphabetically, sequentially or by value. Doing so allows readers to interact with your data more intuitively.
  • Make it easily comparable. Data visualizations should allow viewers to easily navigate the information, making it easy for them to filter and compare values.
  • Make your data command attention. Do not distract your audience from the data by adding unnecessary illustrations or icons. This is referred to as chart junk and it only litters the visualization.
  • Use proper color palettes and icons. This increases comprehension. Make sure to also remove any unnecessary labeling.

RESEARCH METHODOLOGY - SOCIAL MATH

A method of framing information that makes a relevant comparison, utilizes good visual design, and incorporates a strong call to action.

EXAMPLE OF GOOD USE OF DATA VISUALIZATION COMPARISON

How do we apply these principles for Car and Driver?

  • CAR AND DRIVER ACTIONS
  • TEST DATA
  • REPORTS
  • ILLUSTRATIONS
  • SPECIFIC TASKS
  • GRAPHS
  • COMPARISONS
  • VIDEO
  • DESIGN SPRINTS
  • DESIGN STUDIOS / SKETCHING SESSIONS
  • 2017 ROAD MAP PRIORITIES
  • UX TEAM
  • ANALYTICS AND DATA SCIENCE

By adding a number of delightful surprises that are user initiated and part of the user journey, Car and Driver will create a memorable and fun experience.

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.