Ich hatte das Glück, mit einigen der besten Designer der Branche zusammenzuarbeiten, darunter Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas und natürlich Dutzende von den großartigen Designern bei MediaMonks. Viele der Projekte, an denen wir gearbeitet haben, erfordern benutzerdefinierte Animationen und Richtlinien, die es Entwicklern ermöglichen, ihrer Kreativität freien Lauf zu lassen und die Grenzen dessen, was wir für möglich halten, mit CSS und JavaScript zu verschieben.
Dann gibt es andere Projekte, denen es an Ressourcen mangelt. Dies sind die Projekte, bei denen wir als Entwickler die Führung bei der Animation bestimmter UI-Elemente übernehmen und entscheiden, ob die von uns erstellten Richtlinien zu einer großartigen Benutzererfahrung führen. Das sind im Allgemeinen die Projekte, bei denen ein einfacher Trick uns helfen kann, festzustellen, ob wir auf dem richtigen Weg sind.
Ich habe zufällig einen einfachen Trick, der mir geholfen hat, schnell zu testen, ob meine Animationen ins Schwarze treffen. Diesen möchte ich jetzt mit Ihnen teilen. Ich nenne ihn Die Papier-Prototyp-Regel.
Der Print-Mindset
Webdesign (vielleicht unbewusst) übernimmt viele Dinge aus dem Printdesign. Wenn man darüber nachdenkt, sind einige der grundlegendsten interaktiven Web-Muster, wie Akkordeons oder Tabs, nur eine digitale Darstellung davon, wie wir früher Informationen physisch gespeichert haben.
Auch wenn die Branche in den letzten zehn Jahren einen stärker digital-ersten Ansatz verfolgt hat und über das Print-Paradigma hinausgewachsen ist, fällt es uns oft schwer, aus dieser Print-Mentalität herauszukommen. Als Entwickler kann es sich anfühlen, als wären wir darauf programmiert, UI-Elemente auf eine langweilige standardmäßige Weise zu animieren, die nicht über die Referenz von bewegten Papierstücken hinausgeht.
Die Papier-Prototyp-Regel
Ich habe im Laufe der Jahre, in denen ich mit anderen zusammengearbeitet habe, einige Tipps und Best Practices gesammelt und sie zu einfachen Regeln für die Arbeit mit Animationen entwickelt. Obwohl ich die Regeln eher als Richtlinien oder persönliche Referenz betrachte, habe ich in letzter Zeit mehr Wert darauf gelegt, sie meinem Team weiterzugeben.
Und das verdanke ich Der Papier-Prototyp-Regel, die besagt:
Wenn Sie eine Animation mit einem Papierprototypen nachbilden können, dann müssen Sie wahrscheinlich mehr Zeit dafür aufwenden.
Die Absicht ist nicht, Animationen übermäßig zu verkomplizieren, sondern die Vorteile der Schaffung einer digitalen Erfahrung zu nutzen, die sich von Printkonzepten löst. Und das Prinzip ist ziemlich einfach. Kann die Animation mit Papier prototypisiert werden? Wenn ja, können wir es besser machen. Wenn nein, dann sind wir auf dem richtigen Weg.
Die Papier-Prototyp-Regel in der Praxis
Verstehe mich nicht falsch, Papierprototypen haben sich als großartiges Werkzeug für User-Tests erwiesen. Aber wir können die Einfachheit seiner Natur nutzen, um zu bestimmen, wann unsere Interaktionen zu einfach sind.
Lassen Sie uns ein Beispiel versuchen.
Fast jede Standard-Website hat eine Art Navigation. Nehmen wir also an, wir übernehmen ein Design-Comp, das Anweisungen für aktive und inaktive Navigationszustände liefert. Sicher, das können wir machen. Es ist nicht so schwer.
Können wir diese Erfahrung mit Druck nachbilden? Ja. Alles, was dazu gehört, ist, ein Blatt Papier auf ein anderes zu legen. Wir können es besser machen.
Angenommen, die erhaltenen Comps enthalten keine Anweisungen für den Übergang zwischen geöffneten und geschlossenen Menüzuständen, können wir die Animation mit der Transformationseigenschaft ein wenig verbessern. Allein das verbessert die Erfahrung erheblich.
Das einfache Schieben des aktiven Menüzustands von links nach rechts hilft dem Benutzer, den Übergang zu verstehen und gibt Kontext, wo er sich befindet. Es besteht kein Zweifel, dass das Menü ein Overlay ist, das den Seiteninhalt überdeckt. Das war nicht ersichtlich, bevor wir die Transformation hinzugefügt haben. Man könnte sagen, dass wir mit einer einfachen CSS-Zeile nun die Arbeit erledigen.
Stellen wir uns also die Frage: Könnte diese Interaktion in einem Papierprototypen dargestellt werden? Meine sofortige Antwort ist: Ja. Das bedeutet, dass noch viel Raum für Verbesserungen besteht.
Wir können unseren digitalen Denkansatz nutzen, um etwas zu schaffen, das nicht nur die Arbeit erledigt, sondern die Erfahrung verbessert. Wir können mit Techniken wie Fading, Masking, Parallax, Staggering oder einfach dem Aufteilen des Menüs in verschiedene Teile, die unabhängig voneinander animiert werden, experimentieren. Das ist die Chance, kreativ zu werden und unsere Front-End-Fähigkeiten einzusetzen, um eine einzigartig digitale Erfahrung zu schaffen.
Um es einfach zu halten, sehen wir uns an, wie es nach der Anwendung einiger grundlegender Techniken aussehen würde.
Da haben wir es! Jetzt weichen wir langsam von der Papier-Mentalität ab. Kann Papier von links nach rechts gleiten? Ja. Aber kann es Inhalt mit einer Offset-Animation ein- und ausblenden? Soweit ich weiß nicht!
Und, wie ich bereits sagte, es gibt noch viel mehr, was wir hier tun können. Aber ich denke, Sie verstehen den Punkt. Sie könnten mehr Zeit damit verbringen, mit den Animationen zu spielen, um die „perfekte“ Interaktion zu finden, aber das hängt weitgehend vom Projekt ab. Das Ziel dieser Regel ist es, uns von der Printdesign-Mentalität wegzubewegen und die Möglichkeiten zu nutzen, die wir haben, um einzigartige digitale Erlebnisse zu schaffen.
Sobald Sie die Papier-Prototyp-Regel als Teil Ihres Entwicklungsprozesses anwenden, werden Sie wahrscheinlich nach Werkzeugen suchen, um Ihr Handwerk weiter zu verbessern. Ich empfehle immer, sich über grundlegende Animationsprinzipien zu informieren und immer nach frischer Inspiration von anderen Websites Ausschau zu halten.
Wenn Sie also das nächste Mal an einem Karussell, Modal oder einer anderen interaktiven Komponente arbeiten, nehmen Sie sich einen Moment Zeit, um Ihren Animationsansatz zu überprüfen. Besteht er den Papier-Prototyp-Test?
Gefällt mir. Ich werde Ihre Regel beim nächsten Mal ausprobieren, um mich dazu anzuregen, einige Effekte hinzuzufügen.
Interessant, wie die Papier-Prototyp-Regel angewendet wird, und danke, dass Sie sie in der Praxis zeigen, damit wir mehr darüber verstehen können!
Ein schöner Artikel, um den Tag zu beginnen:)
Es ist die Aufgabe von Front-End-Entwicklern, sich mit UX/VD-Leuten anzufreunden und ihnen die verrückten Dinge wie Pixi/GSAP/Three.js zu zeigen.
Es ist die Aufgabe von UX/VD-Leuten, mit FE-Leuten cool zu sein und sie ein wenig zu überraschen.
Es ist die Aufgabe des PMs, ihnen den Raum zum Fokussieren und Experimentieren zu geben, damit wir die Dinge bauen, die schwierig sind, Zeit brauchen, wichtig sind und unsere Benutzer begeistern.
Das ist ein interessantes Konzept, aber ich denke, ich stimme nicht zu. Barrierefreiheit kommt mir sofort in den Sinn; einfache Animationen sind oft am besten für die Benutzerfreundlichkeit.
Ich mochte, wie freundlich sich die Lektüre für Nicht-Entwickler wie mich (UI-Designerin hier) anfühlte.
Die Technik scheint praktikabel und ich hoffe, sie hilft den Entwicklern, ihre Animationsfähigkeiten immer weiter zu verbessern, denn das ist ein GROSSER und wirklich wichtiger Teil der Arbeit.
Gut gemacht, Ronald! Ich fühle mich geehrt für die Erwähnung :)
Das Hinzufügen von Animationen wie diesen steht im Gegensatz zu einer guten Benutzererfahrung.
Den Benutzer zu zwingen, auf eine Aktion zu warten, die sofort ausgeführt werden könnte, ist immer ein Fehler.
Während ich Ihnen bei diesem Beispiel zustimme – ich bevorzuge das zweite Beispiel gegenüber dem letzten, das diese „Papier“-Regel einhält, indem es unnötig in die Länge gezogen wird –, ist diese Aussage definitiv nicht wahr. Es gibt viele Fälle, in denen eine Übergangszeit, die eine Aktion verlangsamt, die Erfahrung verbessern kann; zum Beispiel die Milderung von „hartem/ruckartigem“ Verhalten und das Hinzufügen positiver Verstärkung (z. B. eine kleine Animation beim Klicken auf einen „Like“- oder „Share“-Button).
Ich würde sagen, dass die Papier-Prototyp-Regel genau umgekehrt funktionieren sollte. Wenn etwas mit Papier prototypisiert werden kann, ist es wahrscheinlich eine gute, einfache und intuitive Animation. Nur weil man weitere Extras hinzufügen kann, heißt das nicht, dass man es immer tun sollte.
Ich finde das eine großartige Regel und einen guten Rat, um Ihre Animationen ein wenig „außergewöhnlicher“ zu gestalten.
Ich persönlich denke schon seit Ihrer ersten Erklärung so über diese Regel, also danke, Ronald! Sie war wirklich hilfreich.
Übrigens ein großartiger Artikel!