6 Prinzipien und Tipps für das Interface-Design, die jeder Webdesigner kennen sollte

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Gutes Interface-Design ist wie die Luft, die wir atmen - es ist da, wenn Sie es brauchen und Sie verwenden es ohne nachzudenken. Wenn Sie jemals ein schlechtes Interface-Design verwendet haben, Probleme hatten, sich auf einer Website zurechtzufinden, weggeklickt haben, weil Sie nicht herausfinden konnten, was vor sich ging, eine Aufgabe, die Sie sich vorgestellt hatten, nicht erledigen konnten oder einfach nur verwirrt waren, Sie werden die Gefahren eines Fehlers in diesem Bereich kennen.

Websites sind keine schönen Bilder, sie sind dazu da, verwendet und konsumiert zu werden. Daher ist es ziemlich wichtig, dass wir als Webdesigner einen Großteil der Zeit damit verbringen, über Benutzerfreundlichkeit nachzudenken. In diesem Artikel werden wir einige der großen Usability-Probleme und meine Tipps für einen besseren Interface-Designer betrachten.

Dieser Beitrag ist Tag 7 unserer Webdesign-Sitzung. Kreative Sitzungen

« Sitzungstag 6 Sitzungstag 8 »

1 - Zielgruppen analysieren

Bei der Gestaltung von Psdtuts+ berücksichtigen wir die unterschiedlichen Nutzungsmöglichkeiten der Website

An jeder Website sind mindestens drei verschiedene Parteien beteiligt - der Kunde oder Eigentümer der Website, die Benutzer der Website und der Designer oder Ersteller der Website. Tatsächlich gibt es oft mehrere Benutzergruppen, einige verschiedene Kundenvertreter und möglicherweise einige Personen im Designteam. Dies sind alles, was die Leute gerne als Stakeholder bezeichnen (ein Wort, das mich an eine Gruppe von Leuten erinnert, die T-Bones halten).

Jetzt ist die Sache mit den Stakeholdern, dass jeder normalerweise etwas anderes will. Ihre Kunden haben eine Agenda - ob es dem Chef gefällt, das Logo größer macht und natürlich ihre Botschaft vermittelt. Ihre Benutzer haben eine Agenda - die Aufgaben, die sie ausführen möchten, die Informationen, die sie suchen. Und natürlich haben Sie eine Agenda - Ihr Design in einer bevorzugten CSS-Galerie zu präsentieren, Ihren Chef zu erfreuen und vor 17 Uhr ein schnelles Design zu erstellen, wenn Sie ausgehen ...

In der Welt der Stakeholder ist es immer wichtig, sich daran zu erinnern, dass Benutzer an erster Stelle stehen. Wenn Sie eine erfolgreiche Website wünschen, müssen Sie Ihre eigenen Pläne mit den Anforderungen Ihres Kunden so aushandeln, dass die Benutzer zufrieden sind und das finden, was sie benötigen. Aus diesem Grund ist eines der ersten Dinge, die Sie bei der Planung einer Website tun, herauszufinden, wer die Zielgruppe ist.

Publikumsklassen

Die Worte Zielgruppe scheinen zu implizieren, dass es sich um eine Gruppe von Personen handelt, die wir für die Nutzung der Website anstreben. Die Realität sieht eher so aus, als gäbe es eine Menge Leute, die die Website nutzen werden, ob es uns gefällt oder nicht, und es liegt an uns, herauszufinden, wie wir diesen Menschen dienen können. Ich denke also lieber an Zielgruppen, das sind verschiedene Gruppen von Menschen, die eine Website nutzen werden.

Jede Zielgruppenklasse hat eine Reihe von Aufgaben, die sie ausführen möchten, und Informationen, an denen sie interessiert sind. Als Webdesigner müssen Sie herausfinden, wer diese Personengruppen sind, was sie wollen und wie sie die Website nutzen werden. Um die Sache zu verkomplizieren, können Sie ein Publikum im Allgemeinen auf verschiedene Arten aufteilen, von denen einige hilfreicher sind als andere.

Zum Beispiel könnte man bei Psdtuts+ sagen, dass wir diese vier Publikumsklassen haben:

Photoshop und Design Amateure
Web- und Grafikdesigner
Computergrafikkünstler
Besucher mit gelegentlichem Interesse

Dies ist wahrscheinlich eine gute Methode zur Segmentierung des Publikums, wenn ich daran interessiert war, welche Arten von Inhalten auf der Website platziert werden sollen - z. Sollten wir mehr Webdesign-Tutorials oder mehr 3D-Blending-Tutorials haben? In Bezug auf die Benutzerfreundlichkeit der Website ist dies jedoch nicht sehr hilfreich. Eine andere Möglichkeit, das Publikum aufzubrechen, besteht darin, zu sagen, dass wir diese Gruppen haben:

Menschen, die Photoshop lernen möchten
Regelmäßige Leser behalten nur ihre Fähigkeiten bei
Regelmäßige Leser, die die Zeit totzuschlagen suchen
Regelmäßige Leser, die an der Community teilnehmen
Gelegentliche oder gelegentliche Besucher

Wenn Sie es so betrachten, sehen Sie, dass verschiedene Zielgruppentypen zu Psdtuts+ mit einem anderen Ziel kommen. Aus dieser Trennung können wir schließen, dass Personen in den Kategorien 1 und 2 am wahrscheinlichsten unser Plus-System treffen, die Kategorien 1 und 4 an der Flickr-Gruppe interessiert sind und so weiter. Dann würden Sie unterschiedliche Zielgruppengrößen schätzen und eine Vorstellung davon bekommen, was auf der Website am wichtigsten und am wenigsten wichtig ist.

Priorisieren von Benutzeraufgaben

Sobald Sie Benutzergruppen identifiziert, herausgefunden haben, was sie auf der Website tun möchten und wie groß und wichtig die verschiedenen Gruppen sind, können Sie Prioritäten für die verschiedenen Benutzeraufgaben festlegen. Wichtig ist, dass hier Ihre Kunden- / Eigentümerziele ins Spiel kommen, da sie die Bedeutung verschiedener Benutzergruppen gewichten.

Zurück zu unserem Psdtuts+ -Beispiel: Eine der wichtigsten Benutzeraufgaben ist die Anmeldung beim Plus-System, da sich dies für die Website auszahlt. Auch wenn "Personen, die Photoshop lernen möchten", keine so große Zielgruppe sind wie "Regelmäßige Leser, die die Zeit totzuschlagen suchen" und "Regelmäßige Leser, die an der Community teilnehmen" sind dennoch wichtiger. Infolgedessen geben wir einer Box über das Beitreten zu Plus einen Teil unseres besten Bildschirmbereichs (oben rechts in der Seitenleiste).

"Regelmäßige Leser, die an der Community teilnehmen" ist dagegen eine ziemlich große Gruppe, aber auch eine Gruppe von Leuten, die sowohl mit der Site vertraut sind als auch bereit sind, ein bisschen mehr Arbeit zu leisten, so etwas wie die Flickr-Gruppe Setzen Sie sich tief in die Seitenleiste, wo es zugänglich ist, aber nicht sofort offensichtlich.

Teilinstinkt, Teilanalyse, Teil gesunder Menschenverstand

Am Ende des Tages wollen und werden die Zielgruppen eine Mischung aus Instinkt, Analyse und gesundem Menschenverstand. Ich habe oft das Gefühl, fundierte Vermutungen anzustellen, während ich mir bei Projekten mit einem großen Budget sicher bin, dass Sie Umfragen durchführen und etwas sicherer sein können. Ich denke, unabhängig von Ihren Fähigkeiten und Ihrem Budget, obwohl es eine gute Angewohnheit ist, eine kurze Analyse der verschiedenen Gruppen zu schreiben. Oft zwingt es Sie, Beziehungen und Probleme zu sehen, an die Sie sonst vielleicht nicht denken.

Anschließend können Sie dem Kunden Ihre Analyse präsentieren. In den meisten Fällen sollten Sie feststellen, dass sie Ihnen Dinge über die Zielgruppen erzählen können, die Sie sonst nie gekannt hätten. Und je mehr Sie über die Benutzer wissen, desto besser können Sie eine Website für sie entwerfen.

2 - Sie können viel lernen, indem Sie Menschen beobachten

Es ist ziemlich faszinierend (und ärgerlich) zu beobachten, was die Leute tatsächlich auf einer Site tun

Der beste Weg zu wissen, wie Leute eine Website nutzen werden, besteht darin, ihnen dabei zuzusehen. Dies nennt man Benutzertests und ich hatte lange Zeit den Eindruck, dass es etwas war, was nur große, ausgefallene interaktive Agenturen zu tun hatten. Sicher, formale Benutzertests durchzuführen, ist wahrscheinlich etwas, das aus dem Budget der meisten Webdesign-Projekte herauskommt, aber es gibt einige Dinge, die Sie tun können, selbst wenn Sie nur ein Mann sind, der in einem Keller sitzt und Webprojekte über eLance übernimmt.

Benutzertests sind gut für Sie als Webdesigner

Das erste, was Sie erkennen müssen, ist, dass Sie bei der Durchführung von Benutzertests zu einem besseren Webdesigner werden. Sie werden genau sehen, wie die Leute Ihre Webdesigns verwenden, und es besteht eine gute Chance, dass Sie überrascht sein werden, wie sie dies tun. Dinge, von denen Sie denken, dass sie offensichtlich sind, sind es oft nicht, Text, von dem Sie dachten, er habe etwas erklärt - wird nicht einmal gelesen, und im Allgemeinen tun Benutzer Dinge, die sie nicht tun sollten. Selbst wenn der einzige Benutzertest, den Sie jemals durchführen, darin besteht, einige Freunde zu bitten, eine Website zu verwenden, während Sie sie beobachten, sind Sie unabhängig vom Projekt selbst bereits besser dafür.

Es gibt richtige Benutzertests

Wenn Sie formelle Benutzertests durchführen möchten, ist die Verwendung der heuristischen Bewertung von Jakob Neilsen eine der einfachsten und kostengünstigsten Methoden. Trotz des beängstigenden Namens werden im Grunde genommen eine Reihe von Meerschweinchen dazu gebracht, eine Website zu nutzen, und diese dann anhand einer Reihe spezieller Kriterien bewertet, die als Heuristiken bezeichnet werden. Der am häufigsten verwendete Satz von Heuristiken ist Neilsens Satz von 10 Usability-Heuristiken. Der tatsächliche Prozess, wie Sie die Tests durchführen, wird von Neilsen in einem relativ leicht verständlichen Artikel erläutert.

Das Schöne an der heuristischen Auswertung ist, dass Sie nicht sehr viele Personen zum Testen benötigen. Tatsächlich sollten 5 Personen etwa 75% aller Usability-Probleme feststellen, während eine Verdoppelung auf 10 nur zu 85% führt. Ich stelle mir jedoch vor, dass die 5 Personen einigermaßen unterschiedlich sein müssen, da die Idee ist, dass unterschiedliche Personen dazu neigen, unterschiedliche Probleme zu finden.

Einer Fallstudie zufolge betrug das "Nutzen-Kosten-Verhältnis für ein heuristisches Bewertungsprojekt von 48: Die Kosten für die Verwendung der Methode betrugen ungefähr 10.500 USD und der erwartete Nutzen ungefähr 500.000 USD" (Neilsen 1994) - was ziemlich erstaunlich klingt, obwohl ich weiß Ich habe nicht an sehr vielen Projekten gearbeitet, bei denen ich zusätzliche 10 Riesen an dem Kunden hätte vorbeischwingen können.

Und es gibt grobe Benutzertests

Nur weil Sie keine coolen 10.500 US-Dollar zum Herumwerfen haben, heißt das noch lange nicht, dass Sie nicht von Benutzertests profitieren können! Am Ende des Tages brauchen Sie nur ein paar Leute (a.k.a. Freunde), mit denen Sie 10 Minuten verbringen können. Vorher müssen Sie etwas organisieren, um sie zu testen. Dies kann alles sein, von Papier- und Stiftdrahtrahmen über Photoshop-Modelle bis hin zu einer halb funktionierenden Website. Als nächstes sollten Sie einige Ideen darüber herausfinden, wonach Sie suchen, welche Aufgaben eine Person auf der Website ausführen wird, und in Ihrem eigenen Kopf klarstellen, was Sie erwarten.

Setzen Sie sich jetzt zu Ihrem Meerschweinchen, informieren Sie es, damit es versteht, was es erreichen will - dh "Sie versuchen, ein Ticket nach Fidschi zu kaufen, und Sie sind auf dieser Seite angekommen ...", und zeigen Sie ihm dann das Set von JPEGs oder Papierstücken oder der Bare-Bones-Site. Wenn es nicht wirklich funktionsfähig ist (d. H. Eine Reihe von JPGs oder Papieren), erstellen Sie die Funktionalität - entweder indem Sie erklären, was passiert, wenn sie irgendwo "klicken", oder indem Sie zum nächsten Bildschirm wechseln, den sie sehen.

Persönlich denke ich, dass JPGs am besten sind, weil Sie beobachten können, wo sich die Maus der Person bewegt. Sie sehen etwas, das sich dem nähert, was sie tatsächlich sehen wird, aber gleichzeitig müssen Sie keine vollständige Site erstellt haben.

Während Sie testen, sollten Sie nicht zu viel sagen. Denken Sie daran, dass Sie beobachten! Am Ende verbringst du noch ein paar Minuten damit, ihnen Fragen zu stellen, die du hast. "Warum zum Teufel hast du dort geklickt, du Trottel?" und machen Sie sich Notizen, die Sie brauchen "Notiz an sich selbst, machen Sie diese Schaltfläche viel größer".

Und das ist es! Sie brauchen keinen weißen Laborkittel, Sie brauchen keine spezielle Ausrüstung, Sie brauchen wirklich nichts ... außer einigen Freunden oder Leuten, die Sie bestechen können - die selbst keine Webdesigner sind.

Bezahlte Dienste von Drittanbietern

Nachdem ich das alles geschrieben hatte, kam mir der Gedanke, dass es einige relativ billige Dienste von Drittanbietern geben könnte, die Benutzertests anbieten können. Sicher genug, es gibt eine Firma namens UserTesting.com, die Ihnen ein Video und eine schriftliche Zusammenfassung einer realen Person zur Verfügung stellt, die Ihre Website ab 19 US-Dollar für einen einzelnen Tester bis zu 100 Testern für 1.699 US-Dollar nutzt. Ich kann nicht sagen, wie objektiv diese Leute sind, aber ich muss sagen, dass es für ein kleines bis mittelgroßes Projekt nicht schlecht ist, 100 US-Dollar auszugeben, um 5 Leute dazu zu bringen, eine Website zu durchlaufen. Wenn nichts anderes klingt, klingt es beeindruckend, wenn Sie Ihrem Kunden mitteilen, dass Sie eine Reihe von Benutzertests organisieren werden!

Sie sollten bedenken, dass Sie einen solchen Dienst nur mit einer tatsächlich funktionierenden Website wirklich nutzen können. Wenn Sie versuchen, Tests in der Photoshop-Modellphase oder in der Papier- und Stift-Drahtgitterphase durchzuführen, werden Sie einige Schwierigkeiten haben!

Analysetools nach dem Start

In der heutigen Zeit gibt es viele statistische Tools, mit denen Sie testen können, wie Benutzer eine Website verwenden. Hier einige Tools zur Analyse:

Klickanalyse - CrazyEgg, Google Analytics Site Overlay, ClickHeat Mit diesen Diensten können Sie Heatmaps anzeigen, auf die Personen klicken. Das einzige, das ich wirklich verwendet habe, ist das in Google Analytics (klicken Sie im Seitenmenü auf Inhalt > Site-Overlay). Diese sind ziemlich ordentlich, um ungefähr zu sehen, wohin die meisten Leute auf einer bestimmten Seite gehen, aber natürlich wissen Sie nicht viel darüber, was die Benutzer tun oder zu erreichen versuchen, also ist es wirklich nur die halbe Wahrheit.
Pfadanalyse - Die besten Analysepakete Das Herausfinden, welche Pfade Benutzer durch eine Website nehmen, kann durch Statistikpakete wie Google Analytics ermittelt werden. Zwischen dem Einrichten von Zielen, Trichtern und Ereignissen, dem Verfolgen von Ausgangsseiten sowie dem Durchsuchen von Inhalten und dem Betrachten von Navigationspfaden gibt es wirklich mehr Informationen, als Sie sich vorstellen können. Persönlich finde ich es manchmal etwas überwältigend und benutze nur wirklich Ziele und Trichter, aber ich denke, es ist besser, mehr zu haben, als Sie brauchen, als bedürftig zu sein.
Split Testing - Die meisten guten Analysepakete Beim Split-Test wechseln Sie zwischen zwei verschiedenen Versionen einer Seite, um zu sehen, wie jede konvertiert wird. Es ist eine ziemlich praktische Technik, um herauszufinden, wie insbesondere Verkaufs- und Zielseiten optimiert werden können, aber Sie können sie für so ziemlich jede Art von Schnittstellendesign verwenden.

3 - "Lass mich nicht nachdenken" ... zu viel

Was für ein Titel! Was für ein Buch!

Don't Make Me Think ist der Titel eines berühmten Buches des Usability-Experten Steve Krug und fasst die Usability in dieser einen Aussage zusammen. Ein brauchbares Design sollte keine Gedanken beinhalten, es sollte offensichtlich sein, was zu tun ist und wann es zu tun ist. In dem Buch erklärt Krug, dass Menschen Websites auf eine ganz andere Art und Weise nutzen, als wir glauben möchten (was bei ein paar Benutzertests deutlich wird!), Und dass es wichtig ist, dies zu wissen, damit Sie es können gestalten sie entsprechend. Indem Sie Text nicht überkomplizieren, für das Scannen entwerfen, akzeptieren, dass die Leute Ihre langwierigen Anweisungen nicht lesen, und so weiter, können Sie mit der Realität der Benutzergewohnheiten und des Benutzerverhaltens arbeiten, um benutzerfreundlichere Designs zu erstellen.

Sie fragen sich vielleicht, warum ich dieser Überschrift "... zu viel" hinzugefügt habe. Nun, ich muss zugeben, dass es mich nervt, dass die Websites von Usability-Experten wie Steve Krug und Jakob Neilsen einfach so verdammt einfach aussehen. Ich nehme an, ich verstehe, warum sie es tun, aber es macht mir nichts aus, Benutzer ein wenig nachdenken zu lassen, wenn es bedeutet, eine bessere visuelle Wirkung zu erzielen. Ich denke, ich bin eher ein 37Signals-Usability-Typ als ein Jakob Neilsen-Anhänger.

4 - Navigation und Orientierung

Adobe.com macht einen guten Job mit seinem Breadcrumb Trail, um Sie auf dem Laufenden zu halten, wo zum Teufel Sie sich auf ihrer riesigen Website befinden.

Ich glaube nicht, dass ich einen Artikel über das Design von Benutzeroberflächen schreiben könnte, ohne das Thema der Fortbewegung auf einer Website anzusprechen. Die Grundregeln der Navigation sind:

Benutzer sollten immer in der Lage sein, herauszufinden, wo sie sich auf einer Site befindenDies wird als Orientierung bezeichnet und Sie können ein gutes Ergebnis durch hervorgehobene Menüpunkte, Breadcrumb-Trails und Überschriften erzielen. Sich an einer Site orientieren zu können, ist der Schlüssel, um sie verständlich und nutzbar zu machen. In der realen Welt sind Straßenschilder das physische Äquivalent der Orientierung. Sie zeigen Ihnen, wo Sie sich gerade befinden.
Die Navigation sollte konsistent bleibenEs gibt nichts Verwirrenderes, als eine Menüleiste an einen anderen Ort zu verschieben, sich dramatisch zu ändern oder einfach zu verschwinden. Die Navigation einer Site ist eines der wichtigsten Tools, mit denen Besucher eine Site verstehen. In der realen Welt ist das physische Äquivalent der Navigation eine Straßenkarte, mit der Sie herausfinden können, wohin Sie gehen können.

Der beste Weg zu verstehen, warum Navigation und Orientierung so wichtig sind, besteht darin, sich vorzustellen, dass Sie plötzlich in eine abgelegene fremde Stadt gebracht wurden und aufgefordert wurden, irgendwohin zu gelangen. Der Haken war, dass es keine Straßenschilder gab und Ihre Karte sich in regelmäßigen Abständen neu ordnete und verschwand und wieder erscheinen. Die Schmerzen auf einer Website sind geringer, aber nur, weil Sie mit einem Mausklick da rauskommen!

Es gibt viele andere Konventionen und Ideen darüber, was eine gute Navigation / Orientierung ausmacht - aber alles andere unterliegt diesen beiden Regeln.

5 - Machen Sie die Probleme zu Ihren

Obwohl es mehr um Webentwicklung als um Design geht, enthält das 37signals-Buch einige interessante Abschnitte über die Arbeit an Ihren eigenen Problemen. Und das Beste ist, dass das Buch kostenlos online gelesen werden kann.

Kein Problem ist klarer als Ihr eigenes. Dies ist einer der Gründe, warum neuen Unternehmern immer geraten wird, Unternehmen zu gründen, die ihr eigenes Problem lösen. Auch Webdesigner können von der Lösung von Problemen profitieren, die sie selbst erlebt haben. Das Erleben des Schmerzes aus erster Hand macht deutlich, wie es besser sein könnte.

Da es unwahrscheinlich ist, dass Sie sich nur für die Arbeit mit Websites entscheiden, mit denen Sie direkte Erfahrung haben, ist es eine bessere Methode, Erfahrungen mit den Websites zu sammeln, an denen Sie arbeiten. Sie können dies tun, indem Sie entweder:

Verwenden der aktuellen Site (falls vorhanden) für Ihren Client
Verwenden von Websites von Mitbewerbern, die ähnliche Aufgaben ausführen

Das Wichtigste ist, dass ich mit "Verwenden" nicht nur ein paar Sekunden herumklicke und dies dann von Ihrer To-Do-Liste abhake. Ich meine wirklich eine Seite benutzen. Finden Sie einige typische Aufgaben heraus (z. B. "Ich muss das Verkaufsbüro in Delaware kontaktieren", "Ich möchte eine Buchung vornehmen") und führen Sie sie dann vollständig aus. Wenn Sie die Aufgaben und Probleme, mit denen ein Benutzer auf einer Website konfrontiert ist, wirklich verstehen, können Sie eine viel bessere Lösung entwerfen.

6 - Konventionen sind vertraut und einfach

Symbole sind ein hervorragendes Beispiel für Konventionen. Schauen Sie sich die Symbole oben an und sehen Sie, wie viele Sie automatisch an eine Aufgabe oder Aktion denken lassen. Diese Symbole sind übrigens in einer Creative Commons-Lizenz über Web Appers verfügbar

Es ist weit über ein Jahrzehnt her, seit das Web zum Mainstream wurde, und in dieser Zeit gibt es viele Dinge darüber, wie Websites aussehen und funktionieren, die allgemein akzeptiert werden. Wenn Sie beispielsweise auf eine Schaltfläche mit der Aufschrift "Startseite" klicken, wird erwartet, dass Sie zur Startseite wechseln. Sie erwarten jedoch nicht, dass Sie zu einer Seite wechseln, auf der das Haus einer Person angezeigt wird. Es klingt offensichtlich und dumm, aber genau das sind Konventionen.

Als Folge unseres früheren Tipps "Don't Make Me Think" bedeutet die Verwendung akzeptierter Standards genau, dass Benutzer nicht nachdenken müssen. Wenn Sie Ihre Navigationsleiste in die Fußzeile jeder Seite einfügen, werden Benutzer verwirrt, verärgert und gehen. Wenn Sie häufig verwendete Symbole für ungewöhnliche Zwecke verwenden, beschriften Sie Elemente nicht richtig und geben Sie nicht "Sind Sie sicher?" An. Bestätigungen für irreversible Aktionen usw. Sie riskieren, Ihre Benutzer zu entfremden, und das ist das Letzte, was Sie tun möchten.

Sicher, es gibt Zeiten, in denen Sie möglicherweise nicht den herkömmlichen Methoden folgen, aber Sie sollten gute Gründe dafür haben und alles tun, um klar zu machen, was Sie tun.

Dieser Beitrag ist Tag 7 unserer Webdesign-Sitzung. Kreative Sitzungen

« Sitzungstag 6 Sitzungstag 8 »