Übergänge in Benutzeroberflächen

Designer lieben es, Details so genau und korrekt wie möglich zu behandeln. Viel Zeit wird dafür verwendet, Buttons pixel-perfect zu gestalten, Formulare angemessen zu stylen & Icons scharf wie eine Klinge aussehen zu lassen. 1+, gut gemacht, ich will euch dabei nicht aufhalten.

… allerdings wird nur wenig darüber nachgedacht, wie alles außerhalb eines statischen Aufbaus aussieht. Du tapst auf einen Button und das Formular …erscheint einfach? Du wischst um etwas zu löschen und es verschwindet einfach? Das ist bizarr und einfach nur unnatürlich. Nahezu nichts in der reellen Welt macht etwas so seltsames wie einfach den Zustand von jetzt auf gleich zu ändern. Es würde sich wie ein Glitch anfühlen.

Oh, ok, wie süß. Du hast etwas gelernt — es “slidet rein”.

Wie? Zügig? Bounct es zurück? Federt es ab? Statisches Design bietet keinen Kontext zwischen einzelnen Zuständen.

Leute werfen immer noch das Wort “Entzücken” um sich, wenn sie auf Animationen und süße Interaktionen verweisen. Schön für diese Menschen. Weißt du was? Animationen können aber auch funktional sein. Es sind eben nicht nur verschönerte Details.

Animationen machen sich eine übersehene Dimension zunutze — Zeit! Ein unsichtbares Gefüge welches Lücken zusammennäht. Du musst kein Mathedepp sein um so etwas zu verstehen.

Werfen wir einen Blick auf einige einfache Ideen:

(Anmerkung des Übersetzers: Ich habe einige Wörter einfach Englisch gelassen. Man kann sie teilweise nicht akkurat in das Deutsche übersetzen und würde damit das Verständnis auch zu sehr erschweren.)

Easing/cushioning

Bei traditionellen Animationen bestimmt ein sogenannter “Breakdown” wie sich eine Masse von Punkt A zu Punkt B bewegt. Er fügt eine Verzerrung zur Bewegung hinzu und bestimmt, wie der Rest des Frames Gestalt annimmt. Nehmen wir zum Beispiel diese 25 Frame Interpolationen, bei welchen die Position des 13. Frames (der mittlerste Punkt) variiert:



Schaut euch das an! Du hast gerade etwas über Easing/Cushioning gelernt. Computer sind Trottel und lieben es Lücken linear zu füllen, weil sie faule Säcke sind. Ein großartiger Animator/Motion Designer verbringt die meiste Zeit damit, gegen PCs anzukämpfen, damit sie sichergehen können, dass es die Computer nicht vermasseln.

Bei Animation geht es um Timing. Man kann mit verschiedenen Arten von Spacing arbeiten, um unterschiedliche Ergebnisse zu erhalten. Aber genug davon. Das hier ist kein Animationstutorial. Ich wollte euch zum Nachdenken über die Sprache des Timings und Spacings anregen.


Einige Ideen über Animationen im Zusammenhang mit Benutzeroberflächen

Wie ich vorhin schon gesagt habe, können Animationen helfen, Kontext bereitzustellen. Es hilft dem Gehirn die verschiedenen Informationsflüsse zu verstehen.


Ein Item in eine Liste einfügen

Sagen wir, du schaust eine Liste an Dingen an und du möchtest, dass Live-Daten eingepflegt werden. Wenn du das dem Computer überlässt, würde es irgendwie so aussehen:

Huch, das ist derb ...


Damit es geschmeidiger wird, müssen wir nur ein paar Frames einfügen. Wie wäre es damit, dass wir dem Gehirn einen Hinweis geben, was mit der Liste passiert?:

Damit ein neues Element hinzugefügt wird, muss die Liste Platz für dieses Element schaffen und dann muss das neue Item (welches von irgendwo herkommt) den Platz füllen. Weniger wäre unnatürlich. Es gibt easing-in & easing-out der Zustände um die Veränderung sanfter zu machen. Es sieht natürlicher aus weil es sich eher so anfühlt, als würde man im echten Leben etwas inmitten anderer Dinge einsetzen.


Einige zusätzliche:

Navigieren zwischen Items in einer Liste

Da gibt es dieses typische, 0815 Schema beim Sliden von einer Liste zu einem (detaillierterem) Item. Es wird häufig eingesetzt, aber macht räumlich gesehen nicht sehr viel Sinn.

Die Richtung des Slidens gibt uns keine wirklichen Hinweise, außer eine lineare Ansicht.

Wie wäre es wenn wir berücksichtigen würden, dass das Item ein Container ist, den wir, um mehr Details zu erhalten, klicken. Dadurch würde sich dieser wie im Bild erweitern.

Wir könnten es sogar so handhaben dass alles andere unsichtbar wird:

Ein Vorteil “inline” zu bleiben ist, dass man darauf verzichten kann, dem Benutzer zu erläutern, in welcher Hierarchieebene er sich im Moment befindet. Die Hierarchienavigation kann sozusagen ausbleiben, denn er User hat gesehen, wie er zum momentanen “View” kam.

Natürlich funktionieren die oben genannten Ideen nicht in jedem Fall — allerdings kann diese Perspektive zu viel eleganteren Lösungen führen, um einen angenehmeren “Flow” zu erhalten.

Ein Implementationsbeispiel — Thinglist

Thinglist, ein Elepath Produkt, an dem ich mit Herrn Kyle Bragger arbeite, hat einiges an lustigen “Transitional Interfaces” zu bieten. Das obere Beispiel demonstriert wie wir das neue Filterfeature enthüllen.


“Transitional Interface” Beispiele, die du dir anschauen solltest:

Ich kann nicht viele nennen… auf der einen Seite haben wir einige wunderschöne, aber leider entsetzlich statische Benutzeroberflächen. Auf der anderen Seite existieren Interfaces, welche über-schönt wurden mit effekthascherischen Animationen.

Doch drei stehen für mich hervor.

Clear: Geniale gesture-gesteuerte Animationen.

Willcall: Hat einen konsistenten, kinetischen Rythmus. Es gibt keine harten Übergänge zwischen den Views. Sehr verspielt.

Facebook.app: Nicht sehr konsistent, aber es gibt einige nette Umsetzungen, gerade lightbox-mäßige Ansichten von Fotos.


Es erscheint mir verrückt, dass Menschen nicht über Interfaces mit der Zeit-Variable nachdenken. Bewegung kann so viel Informationen übermitteln! Vielleicht liegt es ja daran, dass Prototype Werkzeuge für die meisten Designer zu kompliziert sind?

Ich habe dies hier ursprünglich als internes Dokument für Elepath Mitarbeiter geschrieben, um meine “Motion”-Besessenheit zu erklären. Nichtsdestotrotz bin ich ein Animator.

Wir dachten es wäre cool das hier für eine Diskussion zu sharen. Ich würde gerne Gedanken von anderen Menschen hören, die auch Benutzeroberflächen erstellen, besonders im Hinblick auf den “Motion”-Aspekt.

Lasse deine Kommentare hier oder schreibe mir auf Twitter: @pasql

…oder beteilige dich bei der Diskussion auf Branch: http://branch.com/b/transitional-interfaces-design-ux

Update: Ich habe diesen Article um einen 50 minütigen Talk erweitert, den du hier anschauen kannst ->


*I take no responsibility for you plunging down the rabbit hole and getting hooked on animation.