Kontakt aufnehmen

Artikel vom 22.07.2019

Beweg dich!

Anbieter digitaler Anwendungen kämpfen um die beste Nutzerfreundlichkeit. Der Schlüssel zum Sieg ist Motion Design, das den Nutzer ans Ziel führt.

Knöpfe laden zum Drücken ein, Heizungsthermostate und Lautstärkeregler zum Drehen und Autotüren zum Ziehen. Diesen Spaß an Interaktion möchten auch Anbieter digitaler Produkte erzielen. Digitale Oberflächen haben es dabei schwerer als Autotüren und Lautstärkeregler. Mit Motion Design lädt auch die digitale Welt zum Drehen, Schieben, Drücken und Wischen ein. 

Stellen Sie sich vor, Sie klicken in einem Online-Shop auf „jetzt kostenpflichtig bestellen“. Daraufhin erscheint ein Ladebalken und füllt sich: zuerst langsam und dann immer schneller. Diese Bewegung tut zwei Dinge: 

Sie gibt Ihnen Orientierung. Sie wissen, dass die die Zahlung verarbeitet wird. Ohne diese Animation könnten Sie nur vermuten, dass der Shop Ihre Aktion ausführt. 

Sie werden unterhalten und die gefühlte Ladezeit wird verkürzt. Die beschleunigte Füllung des Ladebalkens kam zudem überraschend und Ihre Erwartungen an die Ladegeschwindigkeit wurden übertroffen. 

Haben Sie jemals so genau darüber nachgedacht, wieso sich Dinge in digitalen Anwendungen so bewegen, wie sie es tun? Animationen verbinden statische Zustände miteinander. Die Bewegung macht das Erlebnis natürlich und gibt dem Benutzer Orientierung. 

Das ist mit Natürlichkeit gemeint: eine Autotür ist nicht zu und dann plötzlich auf. Sie muss erst einmal aufschwingen. Bewegungen wie diese empfinden wir als natürlich, weil sie logisch sind und wir sie physikalisch erklären oder zumindest nachvollziehen können. Schafft man es, digitale Bewegungen genauso natürlich wirken zu lassen, steigt die Nutzerfreundlichkeit der Anwendung erheblich. 

Was Autotüren mit Motion Design zu tun haben

Um im Beispiel zu bleiben: statt die Autotür zu öffnen, wischen Sie zwischen zwei Ansichten in einer App hin und her. Sie wischen beispielsweise nach rechts und die gerade geöffnete Ansicht verschwindet aus dem rechten Bildschirmrand und zwar genau so schnell wie Sie wischen. Gleiches gilt beim Scrollen durch E-Mails oder Artikel.  

Geschwindigkeit ist ein Beispiel, in dem Motion Design sich an physikalischen Gesetzen orientieren sollte, um natürlich zu wirken. Die Autotür kann sich nicht schneller öffnen, als Sie an ihr ziehen. Deshalb sollte sich eine Website-Ansicht auch nicht schneller bewegen als Sie scrollen beziehungsweise wischen. 
 
Dinge, die schnell ins Bild kommen, sollten mit der Zeit langsamer werden – wie ein Auto, in dem der Fahrer vom Gas geht. Bewegt sich etwas aus dem Bild heraus, sollte es langsam starten und mit der Zeit schneller werden – wie ein Auto, das beschleunigt. 

Bewegung weist den Weg

Wir haben diese Grundsätze des Motion Designs auf unserer eigenen Website angewandt. Dabei haben wir uns darauf konzentriert, unsere Markenbotschaft in Bewegung zu transportieren. u+i interact steht für die perfekte Interaktion in der digitalen Welt. Verbindungen zwischen Inhalten werden auch visuell transportiert, indem sich Elemente zusammenfügen und verschmelzen. 

Ein Beispiel: der Nutzer bewegt die Maus auf ein klickbares Foto. Der Mauszeiger verwandelt sich zu einem Plus, in dem das Wort „JOB“ steht. Nach dem Klick auf das Element verwandelt sich der gerade geklickte Teaser in einem fließenden Übergang in das Kopfelement der Detailseite des Stellenangebots. Gut durchdachtes Motion Design gibt dem Nutzer Mehrwert und Orientierung. 

Hagedorn gewinnt Innovationspreis

Ihr Browser ist veraltet!

Bitte aktualisieren Sie Ihren Browser, um diese Website korrekt dazustellen. Den Browser jetzt aktualisieren

×