Share
Vor kurzem produzierte Vox zusammen mit 99% Invisible einen brillanten Kurzfilm über eine Tür im zehnten Stock des Vox Media-Büros. Neben vielen anderen Türen war Don Norman dabei: Design-Ikone und gefeierter Autor von The Design of Everyday Things. Der Zweck des Films bestand darin, die Verwendbarkeit von Produkten und Systemen hervorzuheben, wobei zwei grundlegende Prinzipien des auf den Menschen bezogenen Designs berücksichtigt werden: Auffindbarkeit und Feedback.
„Was mache ich?“ Wenn Sie auf ein Objekt, ein Produkt oder ein System einer Art stoßen, sollten Sie verstehen, wie Sie damit umgehen. Mangelnde Auffindbarkeit führt dazu, dass Sie einfach keine Ahnung haben, wie Sie etwas verwenden.
"Was ist gerade passiert? Wenn Sie mit Ihrem Objekt oder System eine Aktion ausgeführt haben, sollten Sie durch ein Feedbackelement darüber informiert werden, was passiert ist und warum. Ohne Feedback bleibt man im Dunkeln.
Schauen wir uns einige Beispiele von Schnittstellen und Produkten im Web an, die eine gute Verwendung dieser Ideen zeigen.
Wir beginnen mit Entdeckbarkeit. Für jede Website, sei es für E-Commerce, ein Portfolio, Marketing, ein Produkt oder eine Dienstleistung oder etwas anderes, müssen die Benutzer wissen, was von ihnen erwartet wird. Die Homepage von CodePen verwendet eine eingängige Gürtellinie, gefolgt von einem klaren Wertversprechen, bevor sie den Blick nach unten lenkt und neuen Besuchern zwei klare Vorgehensweisen bietet.
Es gibt viele Diskussionen im Web über die Wirksamkeit von "Geister" -Knöpfen (bei denen der Knopf keine Füllung, nur einen Rand hat), da sie nicht unbedingt erforderlich sind aussehen wie Knöpfe. Dies könnte die Auffindbarkeit behindern, aber ich kann Sie dort entscheiden.
duolingo.comDuolingo, die beliebteste Plattform zum Sprachenlernen (richtig?), Macht die Startseite für neue Benutzer noch klarer. In der Mitte des Bildschirms befindet sich eine sehr offensichtliche, sehr anklickbare Schaltfläche. Und wenn ich darauf stoße, weiß ich genau, worauf ich mich einlasse.
Diese ersten beiden Beispiele werden gut ausgeführt, "Calls to Action" (CTAs). Als Produktbesitzer möchten wir, dass sich die Benutzer gezwungen fühlen, Maßnahmen zu ergreifen, aber es reicht nicht aus, einen Knopf groß, rot und glänzend zu machen. Jenseits des Seins visuell Es ist offensichtlich, dass ein CTA den Benutzern helfen soll zu verstehen, wofür sie Maßnahmen ergreifen.
www.spotify-valentines.comSpotifys kürzliche Valentinsaktion, bei der Sie eine Liebesnotiz über eine Playlist versenden konnten, war (wie immer) ästhetisch umwerfend. Aber der Weg zum Handeln wäre vielleicht klarer gewesen. Es ist offensichtlich, was das Ergebnis sein soll, aber die Anweisung (die als CTA fungiert) tut dies nicht tun etwas. Stattdessen wird von uns erwartet, dass Sie nach unten scrollen, was für manche das Gefühl hat, sie würden sich von der gewünschten Aktion entfernen.
Im Gegensatz dazu ist hier ein Beispiel für eine sehr auffindbare Aktion: der bescheidene Abspielknopf.
http://valiocon.com/Dieses kreisförmige Symbol mit seinem großen Leerraum zieht Benutzer zum Handeln an. Das Spiel-Symbol ist allgemein anerkannt, und seine Form lässt eine Richtung erkennen; ein nächster Schritt. Wenn Sie dies treffen, wird ein Video abgespielt.
BuddyApp, ein Thema für die Community-Plattform BuddyPress in WordPress, bietet uns hier zwei mögliche Optionen, zeigt aber deutlich, welche Route der bevorzugte Weg ist.
Bei all der bisher besprochenen Entdeckbarkeit wird von einer sehr wichtigen Sache ausgegangen: Wir haben keine Probleme mit der Zugänglichkeit. Wenn ein Interface es schwierig macht, unter perfekten Bedingungen herauszufinden, was von uns erwartet wird, stellen Sie sich vor, wie sich dies auf diejenigen auswirkt, die visuelle, körperliche oder kognitive Behinderungen haben?
A11yIch kann gar nicht genug empfehlen, dass Sie einen Blick auf John Hartleys Beginner's Guide to Web Accessibility-Kurs werfen. Bei 2,5 Stunden ist es ein ernst umfassende Anleitung, was Zugänglichkeit für das Web bedeutet und wie Sie es zu einem Teil Ihres Workflows machen können.
Mit Github können Benutzer heutzutage Dateien direkt über die Weboberfläche zu Repos pushen. In Bezug auf die Auffindbarkeit ist dieser Befehl ziemlich klar. Es gibt sogar eine sekundäre Vorgehensweise, klar dargestellt, falls wir sie brauchen sollten.
Sobald ich meine Datei in das Fenster gezogen habe, erhalte ich eine Statusänderung als Rückmeldung, dass meine Aktion bestätigt wurde: gestrichelte Linien und weitere Anweisungen.
Sobald ich meine Datei abgelegt habe, bekomme ich schließlich ein Feedback in Form eines Fortschrittsberichts, um mich mitzuteilen, dass die Datei unterwegs ist und bereit ist, festgeschrieben zu werden.
Die gestrichelte Linie wurde zu einem herkömmlichen Muster (entschuldigen Sie das Wortspiel) für Rückmeldungen, das die Benutzer dazu bringt, das, was sie ziehen, abzulegen. Invision ist ein weiteres Beispiel, obwohl die Auffindbarkeit einer solchen Aktion nicht ganz so offensichtlich ist, sondern auf ein gewisses Fachwissen des Benutzers angewiesen ist.
Und Basecamp macht etwas Ähnliches, obwohl es keine gestrichelte Linie ist. So oder so, gutes Feedback.
Bewegung ist die perfekte Art, Feedback zu geben. wir sind es gewohnt, in der realen Welt Aktion und Reaktion zu sehen, warum also nicht auch im Web? Designer verwenden seit langem subtile Übergänge (z. B. für Schwebeflugzustände), weil sie dem Benutzer helfen, die Verbindung zwischen vorher und nachher zu verstehen. Heutzutage können wir mit Animation und SVG darüber hinaus gehen. Haben Sie kürzlich etwas auf Twitter gemocht??
Diese Mini-Explosion lässt uns ohne Zweifel wissen, dass unsere Aktion dazu geführt hat, dass etwas passiert.
In diesem Beispiel zeigt das Modus-E-Commerce-Design für WordPress das typische Verhalten von Woocommerce. Beim Hinzufügen eines Produkts in den Warenkorb wechselt eine Miniaturansicht vom Hauptbild in den Warenkorb oben rechts auf dem Bildschirm. Dies ist ein hervorragendes visuelles Feedback, das mich wissen lässt, dass ich etwas in den Warenkorb gelegt habe, und schlägt vor, wo ich als nächstes meinen Einkauf abschließen kann.
FcStore; Bei einem anderen WooCommerce-Thema wird weniger wörtlich vorgegangen. Stattdessen wird ein einfaches Häkchen angezeigt, um anzuzeigen, dass mein Produkt erfolgreich in den Warenkorb gelegt wurde.
makethisyear.comFormulare sind das klassische Beispiel für Situationen, in denen Benutzer unbedingt Feedback benötigen. Wurde das Formular korrekt übermittelt? Habe ich etwas vermasselt? Make This Year verwendet hier eine sympathische Kopie und ein High-Five-Emoji. Natürlich habe ich mich für ihren Newsletter angemeldet.
Indem Sie sich auf Erkennbarkeit und Feedback konzentrieren, stellen Sie sicher, dass sich Benutzer mit Ihrer Website verbinden. Machen Sie sich mit ihren Verhaltensmerkmalen vertraut, helfen Sie ihnen, die Vorgänge zu verstehen und vorherzusagen, und Sie werden sich letztendlich bei Ihrem Produkt gut fühlen. Als letzte Referenz zur Inspiration sollten Sie sich Aarron Walters Buch „Designing for Emotion“ sowie Don Temans TED Talk 3 ansehen, auf der Sie mit gutem Design zufrieden sind.
Accentsconagua