UX design for video animations

  • Published on

  • View

  • Download


Hi, Im Sander Spolspoel from SwrlVIDEO ANIMATION OF USER INTERFACESYou 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 LUXURIESThese 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 / secTHE ART OF SHRINKING A UIUISPEEDVS BEAUTYRule 1 for shrinking UIsYou 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 ALLRule 2 for shrinking UIsYou cant NOT read text in an image.So when text is shown, its small and intended to read.your eye usually follows almost all textCONVENTIONSMAX OUT THETop 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 EYEThe 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& METAPHORSThis is my job: replacing text with images.Thats an easy icon.this represents creative professionalsForget what you think something looks like Look better.I changed a characters head. What makes this body female?Head Chest Shoes tummyAnd 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 funnyCreate your own metaphorsBy using repetitionGoogle image can inspire for complex icons / termsGoogle image can inspire for complex icons / termsGRAPHTRIM THEWhat can you throw away?the Biggest Part is a very simple pie chartOUTZOOMA storyboard allow consistency checks (colors, metaphors,...)SANDER@SWORL.BE