Wie das Verderben des Endes UX verbessert
Beim Storytelling geht es darum, dass das Unbekannte bekannt wird. Aber Designer sind keine Geschichtenerzähler, und die Ziele, die sie entwerfen, sollten für den Benutzer immer klar sein. Indem wir kleine Spoiler in unsere UI-Designs einfügen und die Überraschung verderben, gestalten wir die Benutzerfreundlichkeit erheblich.
Es wurde oft von Fans der Pop-Weisheit behauptet, dass es solche gibt nur zwei verschiedene Plots in der ganzen westlichen Kultur: Eine Person geht auf eine Reise, und ein Fremder kommt in die Stadt.
Ein kurzer Blick durch Ihr Bücherregal widerlegt die Regel - es sei denn, Sie erlauben metaphorische Reisen, in denen alles passt - aber die Häufigkeit, mit der die Idee wiederholt wird, und der Sinn, den sie zu geben scheint, sprechen Bände über die Zentralität des Unbekannten im Westen Ideen der Erzählung.
In beiden Handlungen wird eine Person mit etwas Neuem und Unerwartetem konfrontiert, die einzige Variation ist der Standpunkt, von dem die Erzählung spricht; In beiden Fällen ist der Handlungsbogen das Unbekannte , das bekannt wird . Als Clint Eastwood im Jahre 1800 in Idaho in eine zerfallene Stadt fährt, ist unsere Neugier auf seine Identität die treibende Kraft für unser Engagement. Wenn wir Tolkiens Trilogie über den Herr der Ringe lesen, zweifeln wir nie daran, dass Frodo es irgendwann nach Mt Doom schaffen wird, das Interesse liegt in dem, was auf dem Weg passiert.
Der Schlüssel zum Geschichtenerzählen ist, dass es ein Unbekanntes gibt und dass das Unbekannte bekannt wird.
Designer sind keine Geschichtenerzähler
Viele Designer haben sich selbst als Geschichtenerzähler bezeichnet, aber das ist einfach eine kitschige Art, auf Kommunikation zu verweisen. Um eine Geschichte zu erzählen, müssen wir das Unbekannte in Vorbereitung auf eine große Enthüllung fördern, und das Haupthindernis für diesen Ansatz ist, dass Web-Erfahrungen - und ich würde argumentieren, dass die meisten Begegnungen mit Design - nicht linear und offen sind.
Design ist der Poesie tatsächlich viel näher. Poesie existiert typischerweise in mundgerechten Brocken und in denen Themen erforscht werden, die offen für Interpretationen sind.
Weit davon entfernt, eine Geschichte zu konstruieren, ist die Aufgabe eines Designers so unaufdringlich wie möglich zu klären.
Spoiler in Mikrointeraktionen verwenden
Was ist das ansprechendste Element in Jaws ? Brodelt Brody mit dem Bürgermeister? Erzählt Quint die Geschichte von Indianapolis? Ist es Hoopers Affäre mit Ellen Brody (ja wirklich, lies das Buch!)? Nein. Es ist die Musik. Sobald der Hai das Cello spielt, wissen wir, dass es kommt, seine Ankunft wird buchstäblich angekündigt. [Übrigens ist Jaws ein interessantes Beispiel für einen Film, in dem ein Fremder (der Hai) in die Stadt kommt, und dann geht ein Mann auf eine Reise (ins Meer).]
Wir können Engagement im Design schaffen, indem wir mit unserer eigenen Cello-Musik fortwährend Spoiler ablegen und auf das Kommende hinweisen. Dazu verwenden wir Mikrointeraktionen - einfache UI-Komponenten mit Trigger und Feedback. Der Feedback-Teil der Mikrointeraktion ist der Ort, an dem Sie Ihren Spoiler einsetzen können.
Es funktioniert durch Vorschau von Daten, die in einer linearen Erfahrung zu einem späteren Zeitpunkt eingeführt werden. Der Schlüssel ist, Daten nach vorne zu bringen.
Vorschaubilder
Beginnen wir mit etwas Vertrautem: Das klassische Beispiel, um Informationen nach vorne zu bringen, ist das Thumbnail. Ein Thumbnail ist eine Vorschau eines größeren Elements, eine visuelle Anleitung, was am anderen Ende eines Links zu erwarten ist.
Jacky Winter ist eine Talentagentur für Künstler, Illustratoren und Animatoren. Mit einer Vielzahl von Talenten können Sie am besten mit traditionellen Thumbnails stöbern.
Thumbnails müssen nicht traditionell sein. Alexandre Nacache ist ein Art Director und interaktiver Designer, dessen Website Vorschauen von Projektelementen statt Reproduktionen eines Designs in Miniatur verwendet.
Bao ist ein taiwanesisches Restaurant mit drei Standorten in London. Ihre Ortsbilder wirken wie Thumbnails, die nicht nur einen Blick auf das Restaurant, sondern eine mögliche Erfahrung geben.
Ein Tag draußen ist ein Designstudio in Glasgow. Die Thumbnails auf ihrer Seite sind ein wesentlicher Bestandteil der Kunstrichtung und begründen ihre eigene Markenästhetik.
Die 5 Minuten gelesen
Damals wusste man nur, wie lange es dauern würde, einen Artikel wie diesen zu lesen, um die Uhrzeit zu überprüfen, den Artikel zu lesen und die Uhrzeit erneut zu überprüfen.
Einer der erfolgreichsten UI-Elemente der letzten Jahre ist der hilfreiche kleine Indikator, der uns sagt, wie lange ein Artikel zum Lesen braucht. Popularized von Websites wie Medium, es gibt keine Eye-Tracking beteiligt oder Lesegeschwindigkeit berechnet, die "5 Minuten lesen" Schätzung basiert auf Wortzahl - 125 Wörter ist erwartet in 30 Sekunden gelesen zu werden oder in der Nähe. Aber selbst diese grob verallgemeinerten Daten reichen aus, um den Nutzern zu ermöglichen, fundierte Entscheidungen über ihr Engagement für eine Website, einen Artikel oder ein Produkt zu treffen.
Das Monotone von Australisches Design Radio wird nur durch das kontrastierende Rot gebrochen, das für Hover-Zustände verwendet wird. Das einzige Element, das das Rot ohne Interaktion einsetzt? Der Abspielkopf mit Position und Gesamtlänge.
Mammutbaum ist eine in Kalifornien ansässige Risikokapitalfirma. Profile von Tech-Unternehmen belegen ihre Zielseite. Jedes Profil verfügt über eine nummerierte Position, und der animierte Timer des Schiebereglers macht Sie darauf aufmerksam, wo Sie gerade sind.
Vimeo bietet einige der besten Videos im Internet. Sie hätten alle Informationen anzeigen können, die sie wollten - Produzent, Thema, Titel - wenn sie über ihre Vorschaubilder schwebten. Sie wählten Dauer.
Cinelli ist Italiens coolste Fahrradmarke. Ihre Produktschieberegler-Funktionen nummerierten "nächste" und "vorherige" Tasten. Pfeile allein würden ausreichen, um Bedeutung zu vermitteln, aber die Designer brachten Daten mit einem einfachen Zusatz zu den Schaltflächen voran.
Qualifizierende Daten
Eine der einfachsten Möglichkeiten zur Verbesserung einer Schnittstelle besteht darin, Daten mit einem sinnvollen Kontext zu qualifizieren. Der Schlüssel dazu ist nicht zu viel Information zu liefern, nur eine einfache Zusammenfassung, die auf einen Blick gelesen werden kann.
Hilf Scout ist ein Kundenservice SaaS. Ihr Dashboard zeigt wichtige Messwerte wie Gesamtkonversationen an, die ohne den Zusatz eines Pfeils bedeutungslos wären, und ein Prozentsatz, der angibt, ob dies eine Verbesserung oder ein Rückschlag ist.
Ein Flugticket von Lyon nach Bordeaux zu buchen ist einfach Zuglinie Zeigt einen Balken unterhalb der Reisezeit an, um sowohl die Dauer als auch die Anzahl der Änderungen optisch anzuzeigen.
Karten und Rückversicherung
Wenn wir Reisen vorwegnehmen, besonders eine Reise ins Unbekannte, entmystifizieren wir oft die Erfahrung mit einer Karte. In der realen Welt ähnelt eine Karte sehr stark einer Miniatur eines Ziels. Bei der Gestaltung von Benutzeroberflächen verdeutlichen die von uns verwendeten Karten die Informationsarchitektur.
Etiketten sind einer der komplexesten Bereiche der Informationsarchitektur, da sie zu Fachjargon neigen, oft nur für den ausschließlichen Jargon des Unternehmens. Durch das Hinzufügen einer Jargon-freien Mikrokopie wird das Ziel für Benutzer in einer Vorschau angezeigt und sie finden den Weg zu den richtigen Informationen.
Gitter ist ein Performance-Management-SaaS, aber ihre Produkte sind sehr unternehmenszentriert. Sie lösen dieses Problem, indem sie das Hauptmerkmal jedes Produkts in ihrem Menü signalisieren.
Thriva hilft Ihnen, Ihre Gesundheit mit Bluttests zu verfolgen, die Sie zu Hause nehmen können. Sie haben drei Produktstufen, die in ihrem Menü erklärt werden.
Finanztransaktionen sind technisch komplex. Plaid bietet eine Vielzahl von API-Produkten für Entwickler. Ihre Speisekarte erklärt nicht nur das Hauptmerkmal jedes Produkts, sondern bietet auch eine Vorschau auf zwei mögliche Lösungen basierend auf Produktkombinationen.
Der Schlüssel zum effektiven UI-Design sind Spoiler
Geschichten erzählen ist das Gegenteil von effektivem Design, weil Geschichten von ihrer Natur her zu den unbekannten Elementen in einer Erfahrung pendeln. Design dagegen versucht das Unbekannte durch Klärung zu beseitigen.
Wenn wir Daten in einem Design nach vorne bringen, tun wir dies in der Regel auf einfache Weise. Ein einzelner Teil gut ausgewählter Daten kann einen gesamten Prozess verdeutlichen. Mikrointeraktionen sind der ideale Weg, um diese "Spoiler" einzufügen, die es den Benutzern ermöglichen, ihre eigenen Erfahrungen zu machen, während sie immer genau wissen, wo sie sich im größeren Kontext befinden.
Indem wir mehr als nur eine lineare Geschichte enthüllen, können wir Nutzer viel effektiver ansprechen und Erfahrungen entwickeln, die robust und angenehm zu nutzen sind.