Versionskontrolle: Drei Ansätze zum horizontalen Scrollen, die Figma ausprobiert hat
Was wie eine einfache Anfrage aussah – das Hinzufügen einer horizontalen Bildlaufleiste zum Ebenen-Tab in Figma – erwies sich als unerwartete Herausforderung. Hier erfährst du, wie die Design- und Entwicklungsteams durch Iteration und Prototyping die richtige Lösung gefunden haben.
Versionskontrolle: Drei Ansätze zum horizontalen Scrollen, die Figma ausprobiert hat teilen
Illustration von Antonio Carrau
Benutzer*innen hatten uns schon eine Weile gebeten, dem Ebenen-Tab eine Funktion zum horizontalen Scrollen hinzuzufügen, bevor es Teil von UI3 wurde. Wenn verschachtelte Frames aus dem Sichtfeld geschoben werden, benötigst du eine Bildlaufleiste zum Scrollen. Klingt einfach, oder? Nun, nicht ganz. „Etwas, das scheinbar leicht zu lösen war, brachte im Hinblick auf Design, Entwicklung und Zusammenarbeit wirklich interessante Herausforderungen mit sich“, sagt Figma-Produktdesigner Giorgio Caviglia.
„Zunächst einmal ist das Ebenen-Tab 'sehr funktional'“, sagt Giorgio. „Die Gestaltung der Oberfläche ist knifflig, weil das Tab ständig benutzt wird und sehr zuverlässig sein muss.“ Außerdem ist das Panel nicht nur eine statische Liste aus übergeordneten und untergeordneten Elementen. „Die Elemente sind quasi lebendig“, sagt er. „Du kannst Ebenen ausblenden, sperren, einklappen und ausklappen. Was passiert also mit diesen Elementen, wenn du scrollst?“ Eine weitere Herausforderung war die Virtualisierung. Um die Leistung zu verbessern, sollten nur die aktuell sichtbaren Ebenen gerendert werden. Wenn du im Panel nach oben oder unten scrollst, kommen andere Ebenen ins Spiel. Zudem verursacht die variable Textlänge dieser Ebenen Probleme beim horizontalen Scrollen. All diese Faktoren erschwerten die Umsetzung des eigentliches Ziels: die Orientierung der Benutzer*innen innerhalb der Hierarchie und die Anzeige von Hinweisen auf weitere Elemente.
Du kannst Ebenen ausblenden, sperren, einklappen und ausklappen. Was passiert also mit diesen Elementen, wenn du scrollst?
Um diese Komplexität zu reduzieren, führten Giorgio und ein Entwicklungsteam unter der Leitung der Softwareingenieur*innen Amy Shan und Grant Phelps eine Reihe von Iterationen durch, mit denen ein reibungsloses, intuitives Erlebnis geschaffen werden sollte. Hier stellen sie drei Ansätze vor, die es nicht ins fertige Produkt geschafft haben. Außerdem erklären sie, was sie dabei gelernt haben.
Ansatz 1: Verhalten außerhalb des Sichtbereichs auf der linken Seite
Giorgio begann direkt mit dem Prototyping mit Code und verwendete JavaScript, HTML, CSS und React, um ein Gefühl dafür zu bekommen, wie sich verschiedene Ansätze anfühlen würden. „Ich liebe das Prototyping mit Code, weil es das Beste aus beiden Welten ist“, sagt er. „Ich kann innerhalb der Einschränkungen der Codebasis arbeiten, mich aber trotzdem auf das Ziel und das Design konzentrieren.“ Diese praktische Herangehensweise war besonders wertvoll für eine so dynamische Funktion wie das Scrollen. „Wenn man es mit Tausenden Ebenen, mehreren Scrollrichtungen und komplexen Interaktionen zu tun hat, muss man ein Gefühl dafür haben, wie es funktioniert“, erklärt Giorgio. „Beim statischen Entwerfen ist es nicht möglich, alle Eventualitäten vorherzusehen.“
Eine der Fragen, die für die Umsetzung der horizontalen Scrollfunktion beantwortet werden musste, lautete: Was soll mit dem Leerraum passieren, wenn Benutzer*innen tiefer in verschachtelte Knoten scrollen? Bei einer vom Team ausprobierten Variante wurden die Ebenen symmetrisch behandelt, wenn sie den oberen linken Rand des Panels verlassen und zum unteren rechten Rand wechseln. Wenn Ebenen aus dem Blickfeld geschoben wurden, wurden sie durch Icons dargestellt, die an der entsprechenden Kante platziert waren. „Der Gedanke war, ein symmetrisches Design mit Frame-Icons oben und unten zu haben, um zu zeigen, wo man sich in der Ebenenhierarchie befindet“, sagt Giorgio.
Dies erwies sich jedoch aus technischer Sicht als heikel. Die Platzierung der Icons an den Rändern des Panels war einfach, aber sie brauchten einen undurchsichtigen Hintergrund, um den Text des Ebenennamens zu verdecken, während Benutzer*innen scrollen. Das kollidierte mit der Struktur der Ebenenreihen. „Beim horizontalen Scrollen sollte der Hintergrund in verschiedenen Situationen so aussehen, als würde er unter einige Ebenenelemente gleiten, während andere abgeschnitten werden“, sagt Amy. „Das ist schwierig, wenn die Komponente, die wir gestalten, nicht genau weiß, wo die übergeordneten Elemente platziert sind.“
Auch in Bezug auf das Design war dieser Ansatz nicht ideal. Wenn Benutzer*innen nach rechts scrollten, bildeten die Enden der Ebenennamen oben links einen ausgefransten Textrand. „Im Design konzentriert man sich oft auf Symmetrie. Das ist eine eher idealistische Herangehensweise, da die Realität oft komplizierter ist, als man es sich vorstellen kann“, sagt Giorgio. „Wir haben hier ein typisches Beispiel für eine Lösung, die ein neues Problem aufwirft – vor allem aber öffnete diese Iteration die Tür zur Annäherung an den weißen Raum über den sichtbaren Ebenen.“
Ansatz 2: Automatisches Scrollen zu einer ausgewählten Ebene
Für einen anderen Ansatz probierte das Team einen Prototyp für automatisches Scrollverhalten aus. Wenn Benutzer*innen eine Ebene auf der Arbeitsfläche auswählten, die nicht im Ebenen-Tab angezeigt wurde, wurde die Bildlaufleiste automatisch verschoben, um sie im Panel zu zentrieren. Während dieses Verhalten in der Theorie sinnvoll klang, war es in der Praxis verwirrend. Ein interner Tester erklärte: „Wenn man auf ein tief verschachteltes Element klickt, stört diese Automatik, weil der Ebenenbaum horizontal und vertikal dorthin scrollt. Dadurch habe ich den gesamten Kontext der übergeordneten Elemente verloren.“
Giorgio vergleicht dies mit der Nutzung von Google Maps beim Autofahren: Wenn die Karte zu einem anderen Ort springen würde, wüsste die benutzende Person nicht, wohin sie als Nächstes fahren soll. „Als Designer*in ist es sehr wichtig, genau zu wissen, mit welcher Ebene man gerade arbeitet – wo sie sich in der Hierarchie befindet, wie sie heißt und ob sie Teil eines übergeordneten Elements ist“, sagt er. „Du erstellst ein mentales Modell, das im Ebenen-Tab widergespiegelt wird. Wenn du die Orientierung verlierst, fängst du an, an dir selbst zu zweifeln. Du möchtest, dass das Tool dich unterstützt und nicht gegen dich arbeitet.“
Ansatz 3: Umbenennen von Ebenen
Die Einführung einer Funktion zum horizontalen Scrollen warf auch neue Fragen in Bezug auf das Umbenennen von Ebenen auf. Was würde passieren, wenn ein*e Benutzer*in auf eine Ebene klickt, das Textfeld bearbeitet und dann zu einer anderen Ebene scrollt? Eine Möglichkeit bestand darin, die aktuelle Eingabe als neuen Ebenennamen festzulegen. Das hätte jedoch zu unbeabsichtigten Umbenennungen führen können. „Wir hatten nicht das Gefühl, dass das Scrollen ein ausreichend starkes Signal ist, um eine Änderung zu bestätigen“, sagt Giorgio.
Stattdessen erstellte das Team zu Testzwecken ein Textfeld, das sich beim Scrollen der Benutzer*innen nach rechts ausdehnte. Das führte jedoch zu einem UI-Fehler, bei dem das Feld an der Seite flackerte. „Da das Team zur Größenänderung von Elementen JavaScript verwendete, gab es keine Möglichkeit, die Verzögerung zu umgehen, die durch die horizontale Größenänderung des Panels entstand“, sagt Grant. „Wenn wir die Größe von der linken Seite änderten, kam es auf der rechten Seite zu einer verzögerten Darstellung, und wenn wir die Größe von der rechten Seite änderten, kam es auf der linken Seite zu diesem Effekt.“ Dies war nicht nur ein schlechtes Benutzererlebnis, sondern konnte auch dazu führen, dass die Bildlaufleiste zurückspringt, um den Text anzuzeigen, wenn die Benutzer*innen weiter tippen. Basierend auf dem, was das Team beim Ausprobieren der automatischen Scrollfunktion gelernt hat, war dies ein No-Go.
Der finale Ansatz: Das richtige Gleichgewicht
Alle diese Iterationen helfen dem Team, wichtige Entscheidungen zu treffen: Sie ließen den weißen Bereich über den sichtbaren Ebenen vollständig leer, damit er dem weißen Bereich am unteren Rand des Ebenen-Tabs entspricht. Und wenn ein Ebenenname vor dem Scrollen der Benutzer*innen bearbeitet wurde, wurde er einfach zurückgesetzt.
Um die Umsetzung der automatischen Scrollfunktion voranzubringen, entwickelte das Team Heuristiken dafür, wann und wie weit die Bildlaufleiste angepasst werden soll, wenn ein*e Benutzer*in eine Ebene auswählt, die nicht im Sichtfeld ist. Wenn sich das Ebenen-Icon und die Textlänge um 50 Pixel oder mehr über den linken Rand des Ebenen-Tabs hinausragen, verschiebt sich die Bildlaufleiste beispielsweise nach links. Das reicht aus, um den zusätzlichen Kontext darüber anzuzeigen, und reißt Designer*innen nicht aus ihrem Fluss. In Bezug auf die Virtualisierung stellte dies eine besondere technische Herausforderung dar. Wenn ein*e Benutzer*in auf eine Ebene klickt, die derzeit nicht gerendert wird (und es keine Informationen darüber gibt, wie lang der Text ist), ist unklar, wie viel automatisch gescrollt werden muss, um eine korrekte Ausrichtung zu erreichen. „Grant und ich haben einen Weg gefunden, eine unsichtbare Darstellung der Zeile zu erstellen, bevor wir sie verschieben“, sagt Amy. „Dann messen wir diese Zeile und verwenden sie für den automatischen Bildlauf, sodass sie perfekt ausgerichtet ist.“
Mit jedem prototypisierten und getesteten Ansatz verstand das Team besser, was automatisiert werden sollte, was der Kontrolle der Benutzer*innen überlassen werden sollte und wo die Dinge einfach gehalten werden sollten. „Es ging darum, die Dinge nicht zu sehr zu verkomplizieren und technische Einschränkungen zu berücksichtigen, um das Benutzererlebnis nicht zu verlangsamen“, sagt Giorgio. „Das Ergebnis sollte sich wie eine Weiterentwicklung und nicht wie ein Rückschritt anfühlen.“ Heute funktioniert die Bildlaufleiste auf eine sinnvolle Art und Weise – und wie in den meisten Fällen ist diese Nahtlosigkeit das Ergebnis unzähliger Iterationen und Prototyping-Versuche. Giorgio beschreibt dies wie folgt: „Lösungen, die sich richtig anfühlen, fangen nicht einfach so an. Sie entstehen oft aus dem Wahnsinn heraus.“
Am 30. April werden wir UI2 einstellen und UI3 einführen. Erfahre mehr darüber, warum wir diese Änderung vornehmen und wie du möglichst nahtlos umsteigen kannst.
