Ob es Ihr Portfolio, ein Blog, eine Marketing-Website oder eine Sammlung von Spielen ist, wir möchten alle Besucher auf unsere Website locken und sicherstellen, dass sie eine angenehme Erfahrung haben.

Usability misst das Niveau der Erfahrung eines Benutzers und kann dadurch charakterisiert werden, wie einfach eine gegebene Aufgabe ausgeführt werden kann; ob es mit Vorwissen gemacht wurde oder dass der Benutzer eine neue Art der Interaktion lernen sollte. Ich denke, Jakob Nielson hat es wahrscheinlich am besten erklärt, als er sagte:

"Usability ist ein Qualitätsmerkmal, das bewertet, wie einfach Benutzeroberflächen zu verwenden sind. Das Wort "Usability" bezieht sich auch auf Methoden zur Verbesserung der Benutzerfreundlichkeit während des Designprozesses. "

In diesem Artikel hoffe ich, Ihnen eine Form einer Usability-Checkliste zu geben , die Themen vom Formulardesign bis zu einfachen Navigationstipps behandelt, die Sie auf jedes Webprojekt anwenden können.

1. Erstellen einer aktiven Navigation

Den Benutzer wissen zu lassen, in welchem ​​Bereich der Site oder in welcher Kategorie er navigiert, kann jeder Site einen enormen Usability-Boost geben. Die aktive Navigation ist eines jener Usability-Konzepte, die an dieser Stelle fast automatisch sind. Und wir alle haben unsere eigene Art, sie zu erschaffen.

Die ideale Situation, um eine aktive Navigation zu erstellen, besteht darin, dies serverseitig zu tun, da es die Menge an benötigtem HTML und CSS massiv reduziert. Wenn das Generieren eines aktiven Status serverseitig keine Option ist, manipuliere dein Körperelement Jedes Navigationselement direkt zu gestalten, ist ebenfalls eine gute Wahl.

Als dritte Option können Sie einfach Erstellen Sie eine aktive Navigation mit JavaScript .

Ihr aktiver Navigationsstatus sollte sich immer von Ihrem Hover-Status unterscheiden.

aktiv und Hover Navigation Beispiel

2. Klickbare Beschriftungen und Schaltflächen

Wenn Sie sich die Zeit nehmen, ein Formular ordnungsgemäß zu markieren, kann ein Benutzer auf a klicken label um das zugehörige Formularelement zu aktivieren und es gibt eine wirklich einfache Möglichkeit, es anzuzeigen. Dies ist eine großartige Funktionalität, die direkt in HTML integriert ist. Leider wissen nur sehr wenige Benutzer von diesem natürlichen Juwel der Benutzeroberfläche.

Wenn der Benutzer weiß, dass ein Label anklickbar ist, benötigt er nur eine oder zwei Zeilen CSS (abhängig davon, wie Sie ihn schreiben), um den Cursor vom Standardtextinsert in einen anklickbareren und freundlicheren Zeiger zu ändern.

Formular-Label mit Hover-Effekt

Inzwischen wissen alle, dass Buttons zum Senden klickbar sind. Ich fand es immer komisch, dass dieses - offensichtlich anklickbare - Element nicht den gleichen Cursor wie ein Link verwendet. Also ich möchte dieses Bit von CSS auch auf Schaltflächen anwenden:

label, button, input[type="submit"]{cursor:pointer;}

3. Verknüpfen Sie Ihr Logo

Das Verknüpfen eines Logos mit der Website Ihrer Website ist eines der frustrierendsten Dinge, die ich im Web gesehen habe. Ich kann nicht verstehen, warum jemand das nicht so machen würde. Es ist so einfach, und es ist mittlerweile sicher, dass Nutzer es erwarten.

Die Verknüpfung Ihres Logos ist heutzutage so üblich, dass viele Websites feststellen, dass ein Link mit der Bezeichnung "Home" nicht mehr sinnvoll ist, da Nutzer nur auf das Logo klicken, um zur Startseite zu navigieren.

Websites wie Facebook verfolgen Nutzerklicks, indem sie jedem Navigationselement den Parameter "ref" hinzufügen. Im Folgenden finden Sie ein Beispiel dafür, wie Facebook sein Logo verlinkt:

Facebook

4. Vergrößern des Trefferbereichs auf einer Verbindung

Vor ungefähr einem Jahr schrieb Ryan Singer von 37Signals einen Artikel darüber, wie sie das machen gepolsterte Linkziele für besseres Mouse im Basecamp. Dies ist ein weiterer kleiner Usability-Trick, den Sie verwenden können, indem Sie einfach einen Padding um Links einfügen, um den anklickbaren Bereich zu vergrößern.

Dies ist eine großartige Ergänzung für jede Website und kann dazu beitragen, ein falsches Klicken auf einen Link zu verhindern, was oft ein wenig frustrierend sein kann. Es hilft auch viel im mobilen Webdesign, wo Benutzer mit ihren Fingern klicken und diesen extra großen Trefferbereich auf einem Link wirklich brauchen.

iphone

5. Hinzufügen von Fokus zu Formularfeldern

Die Fokussierung auf ein Formularfeld ist ein wachsender Trend im UI-Design. Es lässt den Benutzer wissen, dass das, was er gerade getan hat, etwas verursacht hat (hat das Sinn gemacht?). Es ist eine schnelle und einfache Möglichkeit, nützliche, unaufdringliche Informationen an den Benutzer weiterzugeben. Sprich etwas wie: "Hey! Du hast gerade hier geklickt. "Kann sehr nützlich sein.

ein fokussiertes Formelement

6. Bereitstellen einer nützlichen 404-Seite

Es ist sehr wichtig, dass sich der Benutzer wohl fühlt, und eine große Apache-Fehlermeldung auf dem Bildschirm ist nicht der beste Weg, dies zu erreichen. Eine nützliche 404-Seite kann einen langen Weg zurücklegen und sie muss nicht die Zahlen "4" oder "0" enthalten, da sie für andere als den Entwickler nicht sehr hilfreich sind. Außerdem muss niemand wirklich den Fehlercode für alles, was hinter den Kulissen passiert, kennen. Benutzer möchten nur, dass eine Website so funktioniert, wie sie es erwartet.

Auf der anderen Seite findet sich ein Benutzer auf einer "Seite nicht gefunden", es ist viel hilfreicher, sie irgendwo hinzuführen, wo sie die gesuchten Informationen finden könnten, indem sie einen entschuldigenden Text, ein Suchfeld, oder schlagen Sie einige mögliche Ziele vor. Aber versuchen Sie nicht, dem Benutzer die Schuld zu geben, dass er auf einer falschen URL landet.

Blogussion schrieb einen tollen Artikel über Erstellen einer informativen 404-Seite das listet einige sehr gute Tipps und sogar einen Code für diese WordPress-Nutzer unter uns auf.

404 Fehler

7. Verwenden von Sprache, um eine zwanglose Umgebung zu erstellen

Das Schreiben im Web ist momentan ein großes Thema. Es ist so, als würden wir eine riesige Checkliste mit folgenden Themen durchgehen: HTML, CSS, progressive Verbesserung, Zugänglichkeit, Schreiben für das Web und die allumfassenden "Webstandards".

Wir hören viel über das Schreiben im Web und es scheint sich ständig zu ändern. Aus den Tagen von Steve Krug uns zu sagen, dass wir unsere Inhalte halbieren sollten, um Listen mit Aufzählungszeichen zu verwenden, wo immer dies möglich ist.

Jetzt sollten wir alle schreiben, als würden wir mit einem Freund reden, und alles läuft darauf hinaus, dem Benutzer das Gefühl zu geben, in einer angenehmen Umgebung zu sein. Wenn Sie die Kopie auf Ihrer Website als zwanglos betrachten, fühlt sich der Benutzer weniger gestresst. Selbst wenn er auf etwas Verwirrendes stößt, kann er dennoch ein Gefühl der Entspannung und Informalität spüren, wenn er nach seiner Antwort sucht.

Couch

8. Zeilenhöhe für Lesbarkeit anwenden

Zeilenhöhe ist eines der Dinge, die direkt von physischen Medien wie Büchern und Zeitungen geerbt werden können. Diese Quellen gibt es schon seit Hunderten von Jahren und sie hatten viel Zeit, die Lesbarkeit und Zeilenhöhe zu meistern. Wenn Sie das nächste Mal hier feststecken, haben Sie keine Angst, ein Lehrbuch zu öffnen und es zu überprüfen.

Dies ist ein Aspekt des Webdesigns, der leicht übersehen und leicht missbraucht werden kann. Ich beginne normalerweise mit einer Zeilenhöhe von etwa 1,4em und passe sie von dort aus an, je nach Design und Inhalt.

Beispiel für Zeilenhöhe

9. Verwenden von Leerraum zum Gruppieren von Elementen

Die Gruppierung von Elementen ist eine der einfachsten Möglichkeiten, Assoziationen zu zeigen. Sie können es mit Bildern, Rahmen oder einfach nur weißem Leerraum machen. Die Verwendung von Leerraum zum Gruppieren von Elementen schafft natürliche Assoziationen zwischen verwandten Elementen, die, selbst wenn sie auf einen Blick gelesen werden, vom Benutzer leicht aufgenommen werden können.

Wenn das Auge eine Seite scannt, liest ein Benutzer natürlich zuerst die Überschriften. Das passiert sehr oft mit Top 10 Listen (:: ahem: :). Hoffentlich ist der Inhalt interessant genug, um etwas Aufmerksamkeit zu erregen und den Benutzer dazu zu verleiten, etwas genauer zu lesen. Sie pushen Nutzer in die richtige Richtung, indem Sie Ihre Inhalte so gestalten, dass zusammenhängende Inhalte tatsächlich wie verwandt erscheinen.

Leerzeichen

10. Zugänglich sein

Indem ich zugänglich bin, meine ich nicht die Einhaltung von Section 508 und ADA. Zugänglichkeit bedeutet in diesem Fall, dass Sie für Ihre Benutzer da sind, wenn sie ein Problem haben (Reaktionsfähigkeit).

Wenn es bei der Benutzerfreundlichkeit darum geht, sicherzustellen, dass Ihre Benutzer nicht frustriert werden und gehen, ist Reaktionsfähigkeit Ihre letzte Verteidigungslinie gegen den Verlust dieses Benutzers an einen der Millionen von Mitbewerbern, die nur einen kurzen Klick entfernt sind.

Letztendlich können Sie alle Tests durchführen, die Sie wollen, und alle Ratschläge zur Benutzerfreundlichkeit befolgen, die Sie bekommen können, aber jeder ist anders. Benutzer werden verwirrt und verloren und brauchen schließlich Hilfe. Die Zeitspanne, in der Sie einen Benutzer verwirrt verlassen, kann der Unterschied zwischen jemandem sein, der zurückkommt, und jemandem, der nicht zurückkehrt.

Wenn es um Zugänglichkeit geht, gehen viele Menschen auf eine Konversation über Sehbehinderte zurück, aber die Zugänglichkeit reicht weit darüber hinaus. Zum Beispiel müssen Sie Ihre Website für Benutzer mit Bandbreitenbeschränkungen (DFÜ-Verbindungen, Zellendienst, langsame Netzwerke) und älteren Browsern zugänglich machen (einige Unternehmen lassen die Mitarbeiter die Browser nicht aktualisieren).

Wenn wir unser Bestes tun, um unsere Seiten so zugänglich wie möglich zu machen und schnell auf Fragen zu antworten, können wir ein Gesamterlebnis schaffen, das den Benutzer ständig mehr verlangen lässt.

Kundenservice zählt ... sogar auf einem Blog.


Geschrieben exklusiv für WDD von Tim Wright , Webdesigner / Entwickler und Blogger. Sie können mehr von seinem Schreiben an finden CSSKarma oder Folge Tim auf Twitter .

Folgst du all diesen Prinzipien auf deinen Webseiten? Wie können wir ein besseres und nützlicheres Web erstellen? Wir würden gerne Ihre Kommentare hören ...