Best Practices für 6 allgemeine Benutzeroberflächenelemente
Das Erscheinungsbild und die Verwendbarkeit bestimmter Elemente und Funktionen der Benutzeroberfläche sind entscheidend für den Erfolg von Websites auf dem heutigen Markt.
Studien haben gezeigt, dass selbst eine Verzögerung von Sekundenbruchteilen beim Nachdenken die Wahrnehmung und das Interesse an einer Website schwächt und letztendlich die Conversion-Rate der Website senkt.
In bestimmten Nischen und Branchen kann die Verwendung von UI-Elementen, die in ihrer Verwendung nicht offensichtlich sind, durchaus akzeptabel sein. Die Blogging- und Webentwicklungsbranche sind perfekte Beispiele.
Aber wenn wir Benutzeroberflächen für nicht technisch versierte Zielgruppen entwickeln - was normalerweise bei der Client-Arbeit der Fall ist - müssen wir sicherstellen, dass bestimmte UI-Elemente nicht zu weit von dem entfernt sind, was Benutzer gewohnt sind.
Dieser Artikel beschreibt einige Best Practices und Usability-Merkmale von sechs Benutzeroberflächenelementen und die Konventionen für diese, so dass Entwickler Benutzererfahrungen erstellen können, die sowohl schön als auch einfach sind.
1. Aussehen des Suchfelds
Auf großen, informationsreichen oder produktlastigen Websites ist die Suche der König. Hier verzichten die Nutzer im Allgemeinen auf konventionelle Navigationsleisten zugunsten der Suchbox.
Ein Suchfeld, das nicht sofort sichtbar ist, wird einen von zwei Effekten haben: 1) der Benutzer wird annehmen, dass keine Suchfunktionalität verfügbar ist, oder 2) der Benutzer wird die Suchfunktion nach einer verzögerten und möglicherweise irritierenden Periode finden.
Stellen Sie sicher, dass das Suchfeld auf Ihrer Website leicht zu sehen ist. Dunkle Hintergründe und ausgefallene Grafiken beeinträchtigen die Benutzerfreundlichkeit , daher ist es am besten, sie weiß oder hellgrau zu halten. Stellen Sie außerdem sicher, dass das Suchfeld relativ zu anderen wichtigen Elementen auf der Seite groß genug ist, um seine Position in der visuellen Hierarchie beizubehalten.
Das Suchfeld auf Domain nach IP passt gut zum visuellen Thema der Website, ist orange und grafisch konsistent mit der Umgebung. Aber wenn ein Suchfeld auf einer belebteren Website diese Behandlung erhalten würde, wäre es wahrscheinlich schwer zu erkennen.
Das Design ist kein Hindernis für Domain by IP, da die Website eine Funktion hat: Suche, die sich in der Mitte der Seite befindet. Außerdem sind die Entwickler in einer technologischen Nische weniger an der Konvention interessiert. Dieser Grad an Kreativität sollte jedoch auf größeren Websites vermieden werden , deren Zielgruppe möglicherweise nicht so technisch versiert ist.
Abenteuer-Zeit unterdessen behält das Suchfeld weiß, bequem groß und leicht auf der Seite zu finden:
Obwohl es in einer fremden Sprache ist, hat Adventure Time ein sehr klares Suchfeld, selbst für englischsprachige Benutzer. Die Größe und Farbe der Box wird durch die Lupe ergänzt, die zum universellen Symbol für die Online-Suche geworden ist. Ein Benutzer, der nach dieser Funktionalität sucht, hat hier kein Problem.
Dieses Muster sollte in allen Projekten verfolgt werden, die auf eine vielfältige Nutzerbasis ausgerichtet sind.
Weiterführende Literatur:
2. Deutlich gekennzeichneter reduzierbarer / erweiterbarer Inhalt
Websites profitieren von zusammenklappbaren Feldern und Dropdown-Menüs, da sie für sauberere und weniger überladene Layouts sorgen. Der versteckte Inhalt in diesen Schnittstellenelementen kann jedoch die Verwendbarkeit einer Website beeinträchtigen, wenn ihre Anwesenheit nicht klar angezeigt wird.
Wenn ein Benutzer auf einen leeren Link oder eine Schaltfläche klickt, erwartet er, dass er auf eine neue Seite geleitet wird. Wenn ein Benutzer jedoch auf einen Link oder eine Schaltfläche mit einem versteckten Inhaltsindikator klickt, erwartet er, dass der neue Inhalt sofort angezeigt wird (über JavaScript oder AJAX) und die Option hat, ihn anschließend auszublenden. Daher sollte eine Website scharf zwischen normalen Links und Links unterscheiden, die neue Inhalte über JavaScript aufzeigen .
Reduzierbare Inhalte, wie in Seitenbereichen und Menübäumen, können mit einem Pfeil, einem Dreieck oder einem Windows Explorer-ähnlichen Plus / Minus-Indikator angezeigt werden. Das Fenster, in dem angemeldete Benutzer angezeigt werden CSS Globus zeigt deutlich an, dass es zusammenklappbar ist:
Unten ist die gleiche Seite, nachdem das Panel erweitert wurde, um eine Gruppe von Funktionen anzuzeigen:
Wenn der Inhalt des Fensters jetzt erweitert ist, wird der Pfeil um 90 Grad gedreht, was darauf hindeutet, dass derselbe Inhalt nun ausgeblendet oder ausgeblendet werden kann. Dasselbe Prinzip kann auf Drop-Down- oder Fly-Out-Menüs angewendet werden, obwohl diese keinen rotierenden Pfeil benötigen. Überraschenderweise wird diese Eigenschaft oft sogar auf professionell gestalteten Websites weggelassen.
Weiterführende Literatur:
3. AJAX Ladeanzeige
Wenn Sie die Benutzerfreundlichkeit durch das Laden von Inhalt durch asynchrone Anforderungen verbessern, müssen Sie den Benutzer darüber informieren, dass eine AJAX-Anforderung verarbeitet wird. Ohne diesen Indikator kann der Benutzer das Warten aufgeben oder sich wundern, warum als Reaktion auf seinen Klick nichts passiert ist.
Sie können dies auf verschiedene Arten erreichen. Eine Möglichkeit besteht darin, eine "Lade" - oder ähnliche Nachricht in oder in der Nähe des Ortes zu markieren, an dem die Aktion ausgeführt wird, wie es der RSS-Reader von Google tut:
Am oberen Rand des Screenshots befindet sich ein gelber hervorgehobener Text, der angezeigt wird, wenn auf die Schaltfläche "Alle als gelesen markieren" geklickt wird, um dem Benutzer mitzuteilen, dass etwas passiert.
Eine andere Möglichkeit, dies anzuzeigen, ist eine Animation oder eine sich drehende Sanduhr, die Windows-Benutzern vertraut ist. Ein animierter Indikator wird auf zahlreichen Websites verwendet, einschließlich Twitter Klicken Sie auf "Mehr", um ältere Tweets anzuzeigen:
Nach dem Klicken auf die Schaltfläche und abhängig von der Geschwindigkeit der Verbindung des Clients mit dem Server wird eine vertraute, animierte, wirbelnde Grafik angezeigt, die dem Benutzer mitteilt, dass seine Anforderung verarbeitet wird.
AJAX Lade Grafiken sind kostenlos von einer Reihe von verschiedenen Websites zur Verfügung, von denen viele Sie die Grafiken mit Größe, Farbe und andere Optionen anpassen können.
Diese Art des visuellen Indikators ist wichtig für asynchrone Anforderungen, die keine clientseitigen Hinweise darauf enthalten, welche Aktivität geladen wird.
Ein AJAX-ähnlicher Indikator könnte auch verwendet werden, um Nicht-AJAX-Funktionalität zu verbessern, die sich wie AJAX verhält und Zeit zum Laden benötigt. Dies könnte eine Fotogalerie beinhalten, die ein größeres Bild lädt, wenn auf ein Vorschaubild geklickt wird.
AJAX Lade Grafiken und andere Indikatoren beschleunigen nicht wirklich eine Seite, aber sie verbessern die "wahrgenommene" Ladezeit , die oft genauso wertvoll ist wie die tatsächliche Ladezeit zu verbessern.
Weiterführende Literatur:
4. Standort des Einkaufswagens und der Anmelde- und Registrierungsfunktionen
Wenn Nutzer eine Seite für den "Warenkorb" oder den "Jetzt registrieren" -Link einscannen, sehen sie zuerst die obere rechte Ecke der Seite. Wenn Sie keinen zwingenden Grund dafür haben, behalten Sie diese Funktionalität an ihrem gewohnten Ort bei, sonst riskieren Sie, die Benutzererfahrung zu verlangsamen und zu stören.
Zu den Optionen und Funktionen, die unter diese Kategorie fallen, gehören "Warenkorb anzeigen", "Auschecken", "Anmelden", "Ausloggen", "Registrieren", "Link senden", "Passwort vergessen?" Und sogar "Kontaktieren Sie uns. "Dieser letzte Eintrag wäre normalerweise der letzte in einer horizontalen Navigationsleiste.
Geschmackbuch enthält vier solcher Links in der oberen rechten Ecke des Layouts:
Maui Divers Schmuck ist ein weiteres gutes Beispiel und enthält auch eine Einkaufstasche Grafik:
5. Ablaufdatum Format auf Kreditkartenformularen
Wenn ein Formular nach dem Ablaufdatum Ihrer Kreditkarte fragt, ist das Format immer dasselbe: der Monat, dargestellt durch zwei Ziffern, gefolgt vom Jahr, dargestellt durch zwei oder vier Ziffern (zB 03/11 oder 03/2011). Das vierstellige Format ist, wie das Ablaufdatum auf der Kreditkarte selbst erscheint.
Der beste Weg, diese Informationen zu sammeln und das Benutzererlebnis zu verbessern, besteht darin, zwei separate Auswahlfelder zu verwenden, eines für den Monat und das andere für das Jahr. Lassen Sie den Benutzer das Ablaufdatum nicht in einem einzigen Textfeld eingeben, selbst wenn Sie Anweisungen angeben.
Hier ist ein gutes Beispiel aus der Zahlungsseite von Maui Divers Schmuck:
Und hier ist ein Beispiel für ein schlecht gestaltetes Ablaufdatum Feld:
Außerdem sollte der Monats-Selektor nicht die Namen der Monate anzeigen, sondern stattdessen die Nummern 01 bis 12 auflisten. Es gibt keinen Grund, die Benutzer zu verlangsamen, indem man ihnen vorgaukelt, dass "08" "August" bedeutet.
6. Leicht identifizierbare Links
Dies sollte niemals ein Problem sein, aber leider unterscheiden einige Webseiten immer noch nicht klar zwischen Links und normalem Text im Hauptteil.
In den meisten Fällen besteht der beste Weg, um diesen Unterschied anzuzeigen, darin, Links eine andere Farbe zu geben und sie zu unterstreichen. In einigen Fällen reicht eine starke Kontrastfarbe allein aus; Aber nur die Unterstreichung oder nur eine leichte Veränderung der Farbe ist selten genug und beeinträchtigt oft die Zugänglichkeit.
Cameron.io macht diese Unterscheidung gut:
Diese Links wären nicht so sichtbar, wenn sie lediglich unterstrichen, aber nicht farblich verändert würden. Sie würden keine Schaltfläche entwerfen, die nicht wie eine Schaltfläche aussieht. Warum also Textlinks in den Hauptteil einfügen? Da die meisten Benutzer Text online scannen, sollten Designer sicherstellen, dass alle Links identifizierbar sind, lange bevor eine Maus darüber gerollt wird.
Weiterführende Literatur:
Fazit
Alle Elemente und Funktionen der Benutzeroberfläche, die in diesem Artikel beschrieben werden, sind entscheidend für die Benutzerfreundlichkeit der Website und spielen eine wichtige Rolle bei der Wahrnehmung Ihrer Marke durch den Nutzer.
Viele kleine Verbesserungen können einen großen Unterschied in der wahrgenommenen Geschwindigkeit machen und Benutzer davon abhalten, frustriert oder unbehaglich zu werden.
Machen Sie Ihre Benutzeroberflächenelemente einfach und gestrafft und befolgen Sie, wo immer möglich, Konventionen. Sie werden geringere Absprungraten, bessere Conversions und einen stetigen Rückflussverkehr sehen.
Geschrieben exklusiv für WDD von Louis Lazaris, einem freiberuflichen Schriftsteller und Web-Entwickler. Louis rennt Beeindruckende Webs , wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht.
Wie könnten einige dieser oder andere Elemente der Benutzeroberfläche verbessert werden? Bitte teilen Sie Ihre Gedanken in den Kommentaren unten.