UX design for video animations

  • Published on
    19-Jan-2017

  • View
    201

  • Download
    0

Embed Size (px)

Transcript

  • Hi, Im Sander Spolspoel from Swrl

  • VIDEO ANIMATION OF USER INTERFACES

  • You have a great idea for a startup: deliver fresh meals. Never been done before.

  • But youll be cooking by the front door. You need a video to explain that.

  • THE FOLLOWING MONTAGE SHOWS WHAT THESE ANIMATIONS

    USUALLY LOOK LIKE.

  • 60% OF THE WORK IS ANIMATING WEB OR APP INTERFACES.

  • Never use screenshots. Redraw every interface.

  • TIME & SPACE ARE NO LUXURIES

  • These screens are all shown in 7 seconds.

  • You have 1,5 seconds per screen.

  • This is a website to show in an animation.

  • Pretty small on a mobile device.

  • Even smaller in portrait mode (popular)

  • The redrawn version focusses on the essence.

  • When watched smaller, more is retained.

  • And it takes less brainpower / sec

  • THE ART OF SHRINKING A UI

    UI

  • SPEEDVS BEAUTY

    Rule 1 for shrinking UIs

  • You have another startup: a taxi service to rescue you from a forrest.

  • What will the trees look like?

  • This is less functional, more emotional.

  • The one on the right is even less functional and even more evocative.

  • An animation needs both: functional design and emotion.

  • Complexity and emotion in the back, functional interface in the front.

  • Domain is available, if you like.

  • TEXTKILL ALL

    Rule 2 for shrinking UIs

  • You cant NOT read text in an image.

  • So when text is shown, its small and intended to read.

  • your eye usually follows almost all text

  • CONVENTIONSMAX OUT THE

  • Top left logo, top menu bar, content you know: conventions ensure quick understanding.

  • Site with complex navigations,

    are best not duplicated in animation.

  • We leave out the interface & focus on content.

  • COLORGUIDES THE EYE

  • The girl stand out because of color contrast.

  • Buttons stand out. The mug on the right was a mistake.

  • I like the Kuler site to generate swatches based on style guides.

  • Color in the background can unite scenes

    to create a mental space.

  • if your identity has few colours and you use them as accents...

  • youre left with Mr. Grey.

  • if theres only 1 color, we take it away to reintroduce it as an accent.

  • MS Word is mainly blue with orange accents.

  • ICONS& METAPHORS

  • This is my job: replacing text with images.

  • Thats an easy icon.

  • this represents creative professionals

  • Forget what you think something looks like

    Look better.

  • I changed a characters head.

    What makes this body female?

  • Head Chest Shoes tummy

  • And caveman back.

  • What color are people of color really?

  • More pink than you think.

  • Simple icon.

  • Combining simple icons instead of making a complex one.

  • visualising the opposite makes it funny

  • Create your own metaphors

  • By using repetition

  • Google image can inspire for complex icons / terms

  • Google image can inspire for complex icons / terms

  • GRAPHTRIM THE

  • What can you throw away?

  • the Biggest Part is a very simple pie chart

  • OUTZOOM

  • A storyboard allow consistency checks (colors, metaphors,...)

  • SANDER@SWORL.BE

Recommended

View more >