Interface design in animatie

Als jouw business draait rond een app of een website, dan moet een animatie ook duidelijk en overzichtelijk de interface weergeven. Screenshots zijn moeilijk te bekijken als de video op normale grootte wordt afgespeeld. Als er te veel tekst te zien is, proberen kijkers alles te lezen en ben je de aandacht even kwijt.

Swörl heeft een speciale aanpak om apps en websites overzichtelijk te tonen in animaties. Het storyboard bestaat uit illustraties van je app of site die alleen de essentie van de interface overhouden. Animatie en kleurgebruik maken de interacties duidelijker.

In deze animaties zie je de interfaces van Prezly.com, HowAboutSales.com en Mijn Telenet helder en overzichtelijk.

Tekst: zo weinig mogelijk

Als er mensen te zien zijn in een animatie video, zullen we eerst naar hen kijken. Naar hun ogen. Maar als we een beeld zonder mensen te zien krijgen, dan kijken we eerst naar de tekst.

Interface design in video animaties

Heb je wel eens een Powerpoint slide gemaakt met veel tekst op? Als je die toont, dan leest je publiek eerst alles wat in beeld komt en kijkt dan pas terug naar de presentator. Zo ben je de mensen eventjes helemaal kwijt.

Daarom moet een animatie zo weinig mogelijk tekst bevatten en wordt tekst in de interface van een website of app vervangen door balkjes. Als we woorden wel tonen, dan verdienen ze aandacht: belangrijke menu items of knoppen. Eéntje tegelijk.

Design principes

Principes die gebruikt worden om échte websites en apps gebruiksvriendelijk te maken, zijn ook van toepassing om interfaces te tonen in animaties.

Interface design in video animaties

Zo herkennen surfers makkelijk conventies zoals een website met een logo links boven en een horizontale menubalk met één actieve knop. Door de tekst weg te laten en het kleurcontract voldoende groot te maken, herken je in een oogwenk een website.

Ook hardware waar apps en sites op getoond worden, wordt zo eenvoudig mogelijk getekend om niet te veel aandacht te trekken. Een laptop bestaat amper uit 2 grijze vlakken en een cirkel voor de webcam, zodat jouw interface de show kan stelen.

Presentatie over interfaces in animaties kijken?

Swörl heeft een grappige en onderhoudende presentatie over hoe apps en sites worden weergegeven in video animaties. In 30 minuten zie je hoe de essentie van een user interface wordt benadrukt om op korte tijd een hele boel screens overzichtelijk te tonen.