Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/shopping.yahoo.com verwendete, stellte ich einige kleinere Probleme mit Benutzerdaten fest. Um diese Probleme zu lösen, probierte 123WORDPRESS.COM die Verarbeitungsmethoden der oben genannten vier Websites aus und hatte das Gefühl, dass es noch Dinge gibt, die man lernen könnte.

Emotionale Gestaltungsdetails zur Anregung:

EBAY.COM

ebay1

Wenn ein Benutzer einen Vorschlag nicht verwenden möchte oder glaubt, dass ihn ein Vorschlag stören würde, kann er den Vorschlag deaktivieren. (Vorschläge können manchmal den Arbeitsfluss des Benutzers unterbrechen und das mentale Modell des Benutzers beeinträchtigen.)

ebay2

Wenn der Benutzer die Vorschlagsfunktion erneut verwenden möchte, kann er sie wiederherstellen, indem er auf die Schaltfläche rechts neben dem Suchfeld klickt. Wenn Sie zu diesem Zeitpunkt mit der Maus über die Wiederherstellungsschaltfläche fahren, wird ein TIPP angezeigt, der die Funktion der Schaltfläche zeigt, damit der Benutzer die Bedeutung der Schaltfläche nicht versteht.

YAHOO SHOPPING

Yahoo-Shopping

In der orangefarbenen Box von YAHOO SHOPPING fand ich auch die Vorschlagsfunktion, die sich beliebig abschalten lässt.

Zusammenfassung: Oberflächlich betrachtet sind diese Features nur das Tüpfelchen auf dem i, aus der Perspektive des User Emotional Designs können diese Features bei den Benutzern aber auch das Vertrauen stärken, neue Suchfunktionen mutig auszuprobieren und häufig zu verwenden.

Löschen der Inhaltsdetails des Suchfelds mit einem Klick:

APPLE.COM

Apple ist in der Tat ein Unternehmen, das dem User Experience Design großen Wert beimisst, was man an den Details der Suchfunktion auf ihrer offiziellen Website erkennen kann!

Apfel

Wenn der Benutzer Schlüsselwörter in das Suchfeld eingibt, werden unterhalb des Suchfelds Produktkategorievorschläge angezeigt und auf der rechten Seite des Suchfelds (im orangefarbenen Feld im Bild) wird eine Schaltfläche zum Löschen der Suchbegriffe angezeigt.
Wenn Benutzer beim Eingeben von Schlüsselwörtern Fehler machen oder die eingegebenen Schlüsselwörter löschen, müssen sie bei der erneuten Suche die Rücktaste verwenden. Mit der Funktion „Löschen mit einem Klick“ kann die mühsame Operation, bei der wiederholt die Rücktaste auf der Tastatur verwendet wird, jedoch mit nur einem Mausklick erledigt werden. Dieses kleine Detaildesign bietet Benutzern großen Komfort.

Das Design des grünen Felds im Bild ist sehr clever und spiegelt die Eigenschaften der Apple-Designer voll und ganz wider. Benutzer werden feststellen, dass sich neben dem Suchfeld keine Bestätigungsschaltfläche befindet (aus optischen Gründen der Schönheit und Ausgewogenheit). Benutzer können jedoch die Eingabetaste verwenden oder auf den Textlink im grünen Feld klicken, um die Funktion der Suchschaltfläche zu erreichen. Dieses Design erfüllt nicht nur die visuelle Ausgewogenheit, sondern auch die funktionalen Anforderungen. Es ist perfekt!

<<:  Es gibt eine zusätzliche leere Zeile, nachdem die HTML-Seite Include verwendet, um die PHP-Datei zu importieren

>>:  So implementieren Sie eine steuerbare gepunktete Linie mit CSS

Artikel empfehlen

So gestalten Sie die Homepage von Tudou.com

<br />Ich arbeite seit mehreren Jahren im Fr...

Das WeChat-Applet ermöglicht horizontales und vertikales Scrollen

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der elastischen CSS3-Erweiterungsbox

verwenden Flexible Boxen spielen beim Front-End-L...

Top 10 Js Bildverarbeitungsbibliotheken

Inhaltsverzeichnis einführen 1. Pica 2. Lena.js 3...

25 CSS-Frameworks, Tools, Software und Vorlagen geteilt

Kobold-Kuh herunterladen CSS-Fussel herunterladen...

Lösung für die Auswirkungen leerer Pfade auf die Seitenleistung

Vor ein paar Tagen habe ich einen von Yu Bo getei...

So verwenden Sie die JSZip-Komprimierung in CocosCreator

CocosCreator-Version: 2.4.2 Praktische Projektanw...

Vue realisiert Preiskalendereffekt

In diesem Artikelbeispiel wird der spezifische Co...

Docker konfiguriert den Speicherort lokaler Images und Container

Verwenden Sie den Befehl „Find“, um Dateien zu fi...

Docker-Container greift auf MySQL-Operationen des Hosts zu

Hintergrund: Es gibt ein Flask-Projekt, das eine ...