Was User wirklich wollen
Wie kommt man zu optimal benutzbaren Oberflächen? Die Antwort: Erfolg hat, wer frühzeitig die Bedürfnisse und Anforderungen der Benutzer in den Mittelpunkt der Planung stellt. Praxisnahe Hilfe bietet das Vorgehensmodell des "benutzerzentrierten Designs". In diesem Artikel wird gezeigt, worauf Sie bei der Planung achten müssen.
Wie sieht ein gelungener Internetauftritt aus? Was ist eine bedienbare Webseite genau? Und vor allem: Wie bringt man die Benutzer dazu, eine Webseite wieder zu besuchen? Fragen, die heute jeden Webentwickler beschäftigen sollten - die Realität sieht jedoch oftmals noch ganz anders aus. Seiten laden zu lange, die Navigation ist unübersichtlich, Links führen ins Leere - sicher hat sich jeder Anwender schon das eine oder andere Mal geärgert, wenn er auf eine derart unbenutzbare Webseite gestoßen ist.
Gute Webentickler machen sich zunächst Gedanken über Idee und Zielsetzung der geplanten Website sowie über die Nutzergruppen. Danach entscheiden sie, welche Inhalte in welcher Form anzubieten sind und welches Design den Auftritt am besten zur Geltung bringen. Erste Ideen werden mit Benutzern getestet, bevor man damit "live" geht. Fehler, Unklarheiten, eine schlechte Struktur oder unsachgemäße Informationen lassen sich auf diese Weise bereits aufdecken, bevor sie später einem größeren Publikum offenbar werden.
Stellt man den Benutzer ins Zentrum der Entwicklung, so spricht man von benutzerzentriertem Design - ein Ansatz, der von vielen großen Unternehmen wie SAP oder IBM zunehmend für die Software- und Webentwicklung favorisiert wird.
Bei dieser Vorgehensweise werden nicht die Hardware und Software, sondern die erhofften Besucher der Site ins Zentrum gestellt. Besondere Kennzeichen dieser Art der Entwicklung sind vorab angelegte Storyboards und Prototypen sowie die iterative Vorgehensweise, bei der nacheinander und aufeinenader aufbauend immer weitere Versionen programmiert und online gestellt werden.
Storyboards: Die Webseite als Film
Sobald man den künftigen Durchschnitts-benutzer konkret von Augen hat, entwickelt man im nächsten Schritt eine Vorstellung vom Aufbau der künftigen Webseite über ein Storyboard. Der Begriff ist aus der Filmsprache entlehnt: Das Storyboard zeigt in Skizzen die Einstellungen eines Films. Analog dazu bildet ein Storyboard für die Webentwicklung Skizzen der geplanten Webseiten und deren Zusammenhäneg und Abfolgen ab. Aufbauend auf den Skizzend wird später ein Prototyp entwickelt.
Prototypen: Testen Sie Ihre Seite vorab
Prototyping bedeutet das Entwickeln eines Beispielsystems, das den späteren Benutzern gezeigt wird. Im Gegensatzzur Laufzeit des Gesamtprojekts wird der Prototyp sehr schnell zusammengestellt. Ziel dieser Vorgehensweise ist es, aus der Arbeit des Benutzers mit dem Prototyp Erkenntnisse zu gewinnen, die in die endgültige Anforderungsdefinition eingehen und eine Grundlage für Sollkonzeption bieten.
Nach der Präsentation des Prototyps bei den Benutzern können Änderungen aufgenommen und neue Anforderungen realisiert werden. Mit jeder Wiederholung wird ein stabilerer Prototyp erreicht. Zudem besteht die Möglichkeit, den Benutzern Alternativ-Versionen zu präsentieren.
Es gibt verschiedene und sehr unterschiedliche Möglichkeiten, Storyboards und Prototypen anzulegen. Die einfachste Form sind Skizzen, Zeichnungen und Scribbles, die mit Papier und Bleistift, eventuell mithilfe von Post-Its, Lineal und Schere erstellt werden. Bereits etwas aufwändiger ist das Zeichnen eines Storyboards mit einem Zeichen- und Grafikprogramm. Prototypen, die bereits auf einfache Art und Weise interaktiv zu bedienen sein sollen, erzeugt man etwa mit HTML, Powerpoint, Visio oder Mindmap. Die fortgeschrittene Stufe stellen GUI Bilder und Prototyping-Tools wie Denim dar. Viele Beispiele und Abbildungen für Storyboards und Prototypen findet man unter
http://www.sapdesignguild.org/resources/design_session.asp. Ausgehend von den ersten getesteten Entwürfen wird der Webauftritt entwickelt.
So gelingen Webseiten
Als Webgestalter fällt die Planung leichter, wenn die hier beschriebenen sieben Grundregeln des Webdesign konsequent beachtet und angewendet werden. Die erste und zweite Regel sind die wichtigsten: Sie stellen sicher, dass man als Benutzer Dinge, die man kennt und gewöhnt ist, auch so wiederfindet.
Mit den folgenden Regeln wird sichergestellt, dass die Anforderungen der DIN EN ISO 9241 ungesetzt werden.
Regel 1: Konsistent gestalten
Konsistente Gestaltung unterscheidet die "selbstgestrickten" von den professionellen Auftritten. Wenn jede Seite anders aussieht oder die Rubriken der Navigation sich verändern, das Logo auf jeder Seite um einige Pixel verschoben ist, der Link zur Eingangsseite einmal "Home" und einmal "Start" heißt, bekommt der Benutzer den Eindruck, dass hier lieblos und mit wenig Sorgfalt vorgegangen wurde. Ob bewusst oder unbewusst: Diese Vorbehaltewerden schlimmstenfalls auf die Qualität der Produkte und Services der Website übertragen.
Daher die wichtigste Grundregel: Der Auftritt ist konsistent zu gestalten! Möglichst wenige Templates (Seitenvorlagen) regeln den Aufbau der Seiten: Text, Grafik, Fonts und Farbe, Navigation und Links, Logo und Claim (Unternehmensleitspruch) sind einheitlich zu gestalten und zu platzieren. Wichtige Hifsmittel sind Cascading Style Sheets, kurz CSS.
Für größere Projekte legt man "Style Guide" an, der das Look & Feel, also das Gesamterscheinungsbild, für das Unternehmen oder das Projekt definiert. Ein "Style Guide" regelt etwa, welche Fonts und Farben einzusetzen sind, welche Gestaltungselemente berücksichtigt werden sollen, wie das Logo zu verwenden ist. Wer vor allem eine gute Usability als Ziel hat, sollte in den "Style Guide" Vorgaben und Regeln einbauen, wie die Website möglichst benutzerfreundlich gestaltet wird. Einen Anhaltspunkt bieten die sieben Regeln, die in diesem Artikel aufgeführt sind. Mit einer konsistenten Gestaltung unterstützt man auch die Fähigkeit der Seite zur Selbstbeschreibung.
Regel 2: Erwartungskonformität bieten
Für die Webgestaltung bedeutet Erwartungskonformität, dass der Benutzer Erkenntnisse, die er als Surfer gesammelt hat, auch bei einem neuen Auftritt anwenden will.
Zu den wichtigsten Erwartungen des User gehören:
- Das Logo ist oben links platziert.
- Ein Klick auf das Logo führt zur Eingangsseite.
- Die Navigation befindet sich auf der linken Seite und/oder ist oben horizontal angeordnet.
- Die verwendeten Icons/Symbole entsprechend denen aus der Windows-Welt und arbeiten mit Metaphern, die der Benutzer kennt (etwas dem Diskettensymbol als Zeichen für Downloads).
- Unterstrichener Text ist ein Link.
- Unter "Kontakt" findet man eine Adresse und eine Anfahrtsskizze, dazu gibt es eine E-Mail-Adresse oder ein Kontaktformular.
- "Sitemap" führt zu einer Gesamtübersicht mit allen Links.
- "Home" oder "Start" rufen die Eingangsseite auf.
- Das Impressum befindet sich unten auf jeder Seite (das ist mittlerweile auch gesetzliche Anforderung).
Jeder Designer sollte sehr genau überlegen, ob und wann er von diesen Vorgaben abweichen möchte. Und wenn Sie sich dazu entschließen, die Regeln zu brechen, dann sollte das konsistent umgesetzt werden. Wenn etwa das Logo rechts oben platziert ist, muss das auf jeder Seite der Fall sein. Eine Abweichung muss eine bewusste Entscheidung gegen die Praxis der Benutzer sein.
Regel 3: Lesbarkeit sicherstellen
Die Forderung nach Lesbarkeit bezieht sich auf Text in jeder Form. Dazu gehören etwas inhaltliche Beschreibungen, Über- und Unterschriften und Links. Betrachtet werden Font, Farbe und Auszeichnungen wie Unterstreichungen, Fettdruck und Texte in Versalien. Kursivschrift sollte nicht verwendet werden, da sie schlecht lesbar ist. Laufschriften sind ebenfalls passé.
Verwenden Sie möglichst nur eine einzige Schriftart, diese sollte serifenlos sein (etwa Arial). Der Text sollte linksbündig angeordnet sein und höchstens 50 Zeichen pro Zeile umfassen. Insgesamt sollten alle Textpassagen kurz sein und nach Möglichkeit nicht scrollen. Überschriften sollten einzeilig sein.
Die Schrift sollte einen ausreichenden Farbkontrast zum Hintergrund haben. Mit dem
Farbkontrast-Analyzer überprüfen Sie die verwendeten Farben.
Schwarz auf Weiß ist eine gute Wahl, aber allein zu langweilig. Verwenden Sie also Farben, allerdings nach gewissen Regeln. Blauer Text und Unterstreichungen sind für Links reserviert, ansonsten nicht erlaubt. Es soll so vermieden werden, dass Benutzer Links vermuten, wo keine sind. Die Webseiten müssen mit jedem gängigen Browser lesbar sein, daher ist auf Browser-kompatibilität zu achten. Wichtig ist auch hier, dass man die Benutzer und ihre Anforderungen und Vorlieben genau kennt. Richtet sich das Angebot auch an Nutzer, die schlecht oder gar nicht lesen können, muss das Angebot von einem Screen-Reader vorlesbar sein. Kommen die Kunden hauptsächlich aus Deutschland, ist der Auftritt auch für Firefox aufzubereiten, da bereits über 20 Prozent der Surfer in Deutschland diesen Browser nutzen. In den USA ist die Nutzerzahl von Firefox dagegen eher gering.
Neben der Browser-kompatibilität sollten Sie die Lesbarkeit bei verschiedenen Auflösungen überprüfen. Wie Ihre Website in unterschiedlichen Größen aussieht, zeigt Ihnen diese Seite:
http://www.wpdfd.com/restest.htm
Eine gute Lesbarkeit mit bestmöglicher Textgestaltung und optimalem Farbkontrast ist die gestalterische Voraussetzung dafür, dass eine Website ihre Aufgabe erfüllen kann.
Regel 4: Feedback ermöglichen
Geben Sie dem Benutzer Feedback, so dass er zu jeder Zeit die Antwort auf folgende Fragen weiß:
- Wo bin ich?
- Wie kam ich hierher?
- Was passiert gerade?
- Wo kann ich hin?
Die Navigation muss ausreichende Orientierung bieten. Machen Sie duetlich, in welcher Rubrik der Benutzer sich gerade befindet und wie die Subnavigation für diesen Bereich aussieht. Die so genannte "Brotkrumen"-Darstellung gibt den bisherigen Navigationsweg her.
Fortschrittsbalken, Textmeldungen, ein "Busy Cursor" (Cursor zeigt Sanduhr an) sind nützliche Darstellungsmittel, die dem Benutzer verdeutlichen, dass das System momentan beschäftigt ist. Wenn die Interaktion mehrere Schritte erfordert (wie beim Onlineshopping oder Onlinebanking), sollte stets deutlich werden, wie viele und welhe Schritte es gibt und bei welchem Schritt der Benutzer sich jeweils befindet. Es muss eindeutig gekennzeichnet werden, wann ein Verweis das Angebot verlässt. So hilft es etwas, wenn externe Links durch einen Pfeil gekennzeichnet sind.
Regel 5: Inhalte benutzerorientiert aufbereiten
Diese Regel ermöglicht die Umsetzung der inhaltlichen Aufgabenangemessenheit. Individualisierbarkeit ist immer dann gegeben, wenn es personalisierte Bereiche mit Login gibt oder wenn die Art der Darstellung vom Benutzer verändert werden kann, wenn er etwa vergrößerte Schrift, andere Schrift- und Hintergrundfarben oder Musik an- und abschalten kann.
Inhalte müssen verständlich und in der Sprache der Benutzer und nicht im Deutsch der Geschäftsleitung abgefasst sein.
Das Bildmaterial sollte so ausgewählt sein, dass es zum Text passt und dessen Aussage unterstützt. Die angebotenen Produkte sollen abgebildet werden, und zwar im Idealfall so, dass sie die Anwendung durch Benutzer zeigen. Darstellungen mit Menschen, die der Nutzergruppe entsprechen, sind immer besser als leblose Gegenstände.
Ordnen Sie die Informationen so, dass sie der Benutzer versteht und wiederfindet und dass sein Interesse geweckt wird. Nutzen Sie dazu etwa folgende Angebote:
- Jetzt neu
- Aktuelles
- Am häufigsten besuchte Seite
- Top-Ten-Downloads
- Tipp der Woche
- Terminkalender
- Sonderangebot
Es versteht sich von selbst, dass diese Bereiche auch entsprechend aktuell sein müssen.
Je mehr es von diesen Angeboten gibt, desto häufiger werden die Benutzer auf die Seite zurückkehren (siehe dazu auch Regel 7).
Benutzerorientierung bedeutet auch, dass das System fehlertolerant sein muss. Solche Ärgernisse können Sie von vorneherein vermeiden: Der Benutzer hat ein Formular ausgefüllt. Nun wechselt er auf eine andere Seite, doch dort wird wegen eines Eingabefehlers eine Fehlermeldung angezeigt. Jetzt sollte der Benutzer jederzeit zum Formular zurückkehren können, ohne die bisher geschriebenen Daten zu verlieren. Sollte ein Begriff falsch geschrieben worden sein, etwa in einem Suchfeld, sollten Vorschläge gemacht werden, was gemeint sein könnte.
Vorbildlich ist hier
http://www.google.de: Wenn es keine Suchergebnisse gibt, dann sollte der Benutzer nicht einfach mit der leeren Trefferliste allein gelassen werden. Besser ist es, wenn er stattdessen Vorschläge erhält, wie er doch noch zum gewünschten Ziel kommen kann. Typische Elemente für weiterführende Hilfeangebote sind beispielsweise eine Sitemap, eine Liste der Toplinks oder eine erweiterte Suche.
Auch die Fehlermeldungen müssen in der Sprache des Benutzers verständlich formuliert werden. Fast jeder Provider erlaubt es mittlerweile, eigene Fehlerseiten zu konsistenten Look & Feel zu gestalten.
"Mitdenken" im Sinne des Benutzers und Fehlertoleranz erzeugen Vertrauen und motivieren zum Wiederkommen.
Regel 6: Navigation optimieren
Die Navigation ermöglicht es, den Ablauf des Webseiten-Besuchs zu steuern. Optimale Steuerbarkeit ist ein wichtiger Grundsatz, um den Benutzern Orientierung und Flexibilität zu bieten. Die Navigation ist dann am besten, wenn man sie als solche nicht bemerkt und sie sich nicht in den Vordergrund drängt, so dass sich die Benutzer ganz selbstverständlich zurechtfinden. Die Navigation sollte zudem unterschiedliche Zugänge bieten, etwa durch eine Sitemap oder einen Index.
Der Benutzer sollte selbst die Kontrolle über die Abläufe haben und entscheiden können, wie es weitergeht. Dazu gehört etwa das Überspringen von Introseiten mit "Weiter".
Umfasst ein Angebot mehrere Seiten, gibt man dem Benutzer eine Übersicht an die Hand, über die er das gewünschte Angebot gezielt anwählen kann. Optimal ist es, wenn er hier auf ein Verhaltensmuster zurückgreifen kann, das er von Suchergebnislisten bereits kennt. Der Benutzer sollte selbst entscheiden können, in welcher Reihenfolge er sich Informationen ansehen möchte.
Jede Navigation sollte logisch und konsitent aufgebaut sein und einheitliche Begrifflichkeiten verwenden. Am besten besteht ein Navigationslink jeweils nur aus ein oder zwei Begriffen. Die Zahl der Rubriken sollte der Regel von Miller (Info:
http://www.well.com/user/smalin/miller.html) folgen, die besagt, dass man am besten sieben plus/minus zwei Elemente (also fünf bis neun Rubriken) verstehen und behalten kann.
Einige weitere Grundregeln für die Navigation heißen:
- Gleicher Ort: Die Navigationselemente sollten immer am gleichen Ort zu finden sein und dürfen nicht plötzlich verschwinden oder an anderen Stellen auftauchen.
- Hierarchie: Die Navigation sollte am besten als zwei-, maximal dreistufige Hierarchie aufgebaut werden. Außerdem sollten die einzelnen Rubriken ausgewogen sein, also in etwa gleich viele Sublinks in jedem Bereich ahben.
- Identifizierbarkeit des Navigationsbereichs: Der Navigationsbereich und die Links müssen sich durch ein markantes Design von den restlichen Inhalten unterscheiden. Sie müssen sich vom Inhalt abheben, und es muss klar sein, was das Navigationsziel ist. Links, die nicht zu Inhaltsseiten führen, sondern Services und Organisatorisches wie "Kontakt", "Spracheinstellung" und "Impressum" betreffen, sollten immer optisch von der Hauptnavigation abgegrenzt werden.
Regel 7: Mehrwert bieten
Die letzte Regel zielt darauf ab, Interesse zu wecken, attraktive Inhalt und interessantes Design mit aktuellen Informationen zu kombinieren und zum Wiederkommen einzuladen. Benutzer geben sich nicht mit Textseiten zufrieden, die keine Interaktion bieten. Auch für die Inhalte einer Webseite sind Aufgaben- und Benutzerorientierung zentrale Forderungen. Mehrwert ist die Lösung! Folgende Fragen helfen Ihnen, Mehrwert zu schaffen:
- Was interessiert die Benutzer?
- Wo erfahren sie echten Gewinn?
- Was hebt den Auftritt von anderen ab?
- Wie verführe ich Nutzer zum erneuten Besuch?
Quelle: Chip Web-design professionell Ausgabe 2 (No2)
Dieser "kleine" (1 1/2 Stunden Tipparbeit) Artikel sollte schonmal helfen.
Wenn du die in dem Artikel genannten Ratschläge, Tipps und Regeln befolgst, bist du schon mal auf einem guten Weg zu einer guten Webseite.
Das Design solltest du aber schon selbst bestimmen. Versuch also mal einen Prototypen zu skizzieren. Denn kannst du uns ja dann vorlegen. Wir können darauf Details verbessern und dir zu bestimmten Farben raten. Den Grundaufbau musst du aber schon selbst gestalten. Lass deiner Kreativität und deinem Bleistift einfach freien Lauf, dann wird schon was schönes bei rauskommen.
