Gutes Webdesign – von der Theorie in die Praxis/ Evaluierung von Design

Evaluierung von Design

Hinweise zur Verwendung

Dies ist Version 1.2 des Kriterienkataloges.

Beurteilung nach Schwerpunkten

Visuelle Ästhetik

• Wirkt das Design auf die Bedürfnisse der Website abgestimmt bzw. auf den konkreten Anwendungsfall optimal zugeschnitten?
• Wirkt die Website glaubwürdig?
• Wirkt das Layout klar? (Vermeidung von Irritationen)
• Wirkt das Layout intuitiv? (Platzierung der Funktionen, Verteilung Inhalt/Feature)
• Wirkt das Design zeitlos?
• Wirkt das Design durchdacht? Zieht sich das Designkonzept bis ins kleinste Detail durch?
• Ermöglicht das Design eine einfache, positive Erfahrung mit der Website?
• Wirkt das Design unaufdringlich?
• Wirkt das Design überladen oder zu leer?
• Wirken Design und Funktion und Inhalt harmonisch aufeinander abgestimmt??
• Bietet das Design dem Inhalt einen adäquaten Rahmen, unterstützt es den Fokus auf den Inhalt? (Gesamterscheinungsbild)
• Wirkt der Einsatz von Typografie und Symbolen passend?
• Ist es schwer, etwas aus dem Design wegzudenken? (weil es einfach so gut ist)
• Gibt es nach kurzer Betrachtung bereits Änderung- oder Verbesserungswünsche? (Ja, aber…)

Emotion

• Berührt das Konzept emotional?
• Hinterlässt das Design einen positiven Eindruck?
• Fällt es schwer zu sagen, was das Design so einzigartig oder ansprechend macht?
• Würde ich mich nach einiger Zeit daran erinnern?
• Würde ich das Design der Website weiterempfehlen oder meinen Freunden zeigen?
• Macht das Konsumieren der Inhalte Spaß?
• Würde ich das Design imitieren wollen? Würde ich eine solche Website auch wollen?
• Inspiriert mich das Design?
• Macht die Benutzung der Website Spaß?
• Gibt es einen Suchtfaktor?

Innovation

• Wirkt das Design als eine Bereicherung für die Online Welt?
• Wirkt das Design wie eine Kopie von bereits Bekanntem?
• Wirkt das Design wie eine Verbesserung von bereits Bekanntem?
• Wirkt das Design wegweisend?
• Eignet sich das Design als Best-practise?
• Würde das Design in 1 Jahr noch innovativ wirken, einen ebenso guten Eindruck vermitteln?

Inhalt

• Macht der Inhalt Sinn?
• Ist der Inhalt accessable? (Stichwort: Text markieren/kopieren)
• Passen Inhalt und Designkonzept zusammen?

=== Funktion und Struktur

• Wird mir unnötige Denk- und Sucharbeit abgenommen?
• Sehe ich, was ich auf dieser Website machen kann?
• Ist das Design der angebotenen Funktion(en) gut gelöst?
• Ist die Website übersichtlich gegliedert? Finde ich mich in der Website-Struktur zurecht?
• Nutzt das Design den vorhandenen Sichtbereich?
• Sind die wichtigsten Elemente identifizierbar?
• Gibt es klare Navigationsstrukturen?
• Ist die Handhabung der Website intuitiv und selbsterklärend?
• Tun Funktionen das, was sie mir vermitteln?
• Werden bereits akzeptierte Abläufe genutzt?
• Werden bereits akzeptierte Abläufe verbessert und erfolgreich umgesetzt?
• Sind Erklärungen (Feedback/Anleitung) nötig um die volle Erfahrung zu bekommen?
• Sind an sinnvollen Stellen gute Feedback-Konzepte eingesetzt, die nicht stören sondern wirklich hilfreich gelöst sind?

Technik/Accessability

• Sind die interaktive Elemente (Links) erkennbar?
• Werden auch ohne Mausinteraktion alle Inhalte vermittelt?
• Ist die Ladezeit für die Startseite in akzeptablem Bereich? → metrics dazu!
• Sind die Ladezeiten für Seiten innerhalb der Website in akzeptablem Bereich?
• Nutzt das Konzept aktuelle technische Möglichkeiten zu seinem Vorteil?
• Ist die Gestaltung des Papierausdrucks mit der Website in Verbindung zu bringen?
• Wenn es eine mobile Version gibt: Ist die Gestaltung der mobilen Version mit der Werbsite in Verbindung zu bringen?
• Nimmt das Design auf den Erfahrungsschatz des Benutzers Rücksicht?
• Wird zumindest W3C Level A erreicht?

Ausführungsqualität

• Setzt sich der Design-Stil in allen Bereichen fort?
• Sind grafische Elemente genau:

a. Frei von Artefakten gestaltet b. In einheitlichem Stil gestaltet c. In adäquater Auflösung gestaltet

• Ist eine Anpassung für verschiedene Ausgabeformate nötig und wurden Inhaltskonzept und Designausführung angepasst für:

a. Mobil b. Tablet c. PC d. Drucker

• Klappt die Designumsetzung in allen gängigen Browsern?

Benutzererfahrung

• Fühle ich mich als Benutzer positiv angesprochen?
• Empfinde ich mich als eine der mit dieser Designlösung (vermeintlich) addressierten Zielgruppen der Website?
• Erweckt die Website den Eindruck, als wäre sie auf eine bestimmte Zielgruppe erfolgreich zugeschnitten?
• Werden bestimmte Benutzergruppen durch das Design kategorisch ausgeschlossen (und ist aber nicht sinnvoll)?

Beurteilung anhand von Usability Kriterien (nach Nina Patkai / www.userium.com)

Benutzererfahrung

Benutzererfahrung (User experience)

• Personalisierte Funktionen. Währung, Sprache, Land spezifische Angebote, Steuern oder Lieferoptionen sind je nach Standort des Benutzers angepasst. IP-basierte Lokalisierung (geolocation) ist ohne Zutun des Benutzers aktiviert.

• Registrierung bietet den Nutzern einen Mehrwert. Zum Beispiel ein Gratis-Testangebot kommuniziert einen klaren Vorteil, aber eine Schaltfläche "Registrieren" tut dies nicht. Unnötige Anmeldung wird vermieden.

• Transparente Preisgestaltung. Die Preise sind übersichtlich dargestellt. Es gibt keine versteckten Kosten oder Überraschungen in den Bedingungen.

• Seiten nicht automatisch aktualisieren. Benutzer können verwirrt werden, wenn neue Inhalte plötzlich hochgeladen werden, wie zum Beispiel auf Nachrichten-Websites.

• Beispielhafter Inhalt. Zum Beispiel gibt es neben einem Beispiel-Newsletter ein entsprechendes Newsletter-Anmeldeformular.

• Webseite ist glaubwürdig. Glaubwürdige Hinweise, Anmeldeinformationen, Kontaktinformationen, Standort und Bilder von realen Personen sind auf der Website angezeigt.

Auch ist die Website professionell gestaltet und scheint aktuell.

• Übersichtliche Produkt- und Service-Informationen. Information ist leicht erfassbar und Bilder können vergrößert oder verkleinert werden für etwaige detailliertere Betrachtung.

Website

• Klare Handlungsanweisungen. Die Nutzer wissen, was als nächstes zu tun ist und warum es ihnen Vorteile bringt, genau das zu tun. Sie verstehen den Zweck der Webseite.
• Erster Eindruck. Die Homepage macht einen positiven ersten Eindruck und unterstützt die Konvertierung.
• Der Name des angemeldeten Benutzers wird auf der Website angezeigt z.B. "Hallo , Charles", nicht "ein generisches "Sehr geehrter Benutzer"
• Wichtige Änderungen an der Website sind publiziert. Zum Beispiel Änderungen bei den Lieferbedingungen oder geplante Wartungsarbeiten an der Website.
• Standort- und Kontaktinformationen zum Unternehmen sind auf der Homepage leicht zu finden.
• Es gibt eine Datenschutzerklärung, falls Informationen über die Nutzer gesammelt werden.
• Bilder und Videos sind relevant und sinnvoll. Keine themenfremden Bilder (stock photos). Es gibt qualitativ hochwertige Screenshots, Videos oder Fotos der Produkte und Dienstleistungen. Audio oder Video starten nicht automatisch, es sei denn, die Benutzer erwarten dies.
• URL-Umleitung. Die URL der Website funktioniert mit oder ohne www davor. Zum Beispiel "www.userium.com" und "userium.com".

Barrierefreiheit (accessibility)

• Alt -Attribute werden für Nicht-Text-Elemente wie Bilder und Landkarten zur Verfügung gestellt. Untertitel und Abschriften werden für Ton und Videoinhalte verwendet .
• Farbe allein wird nicht verwendet, um Informationen zu vermitteln .
• Inhalt ist lesbar, auch ohne einem CSS Stylesheet. Schneller Test mit z.B. http://achecker.ca/checker/index.php
• Barrierefreie Navigation. Die Website kann mit einer Tastatur navigiert werden, ohne Maus, übliche Browser-Tastaturkürzel werden nicht überschrieben.

• -Links , Buttons und Checkboxen sind leicht anklickbar , zum Beispiel ein Benutzer ein Kontrollkästchen aktivieren , indem Sie auf den Text , nicht nur das Kontrollkästchen.

Navigation

• Wichtige Links werden nicht in beweglichen Elementen platziert, z.B. Auto- rotierenden Karussells und Akkordeons.
• Alphabetische Sortierung von A-Z wird vermieden, sondern nur verwendet, wenn es keine besseren Alternativen gibt (wie eine Gliederung in beschreibende oder verwandte Gruppen).
• Benutzer wissen, wo sie auf der Website sind. Beispielsweise bei der Verwendung von Breadcrump-Navigationen. Außerdem gibt es eine Sitemap auf großen Websites.
• Navigation ist konsistent auf jeder Seite.
• Die Links sind beschreibend formuliert. Es gibt keine "hier klicken" -Links.
• Es gibt eine Beschreibung im Fenstertitel, die sich genauso leicht wie der Titel eines Lesezeichens verwenden lässt.
• Site URL ist einprägsam.

Suche

• Es gibt ein Suchfeld (auf umfangreichen Websites).
• Die Suche steht auf jeder Seite zur Verfügung, nicht nur auf der Startseite.
• Das Suchfeld ist breit genug, so dass die Nutzer ihre Eingabe auch sehen können
• Die Suche ist ein Formularfeld, in das Benutzer Suchwörter sofort eingeben können, nicht einen Link zu einer Suchseite.

Verweise

• Wichtige Interaktionsmöglichkeiten werden als Schaltflächen angezeigt, keine Links. Zum Beispiel "Kaufen" oder "Bezahlen" ist ein Button, kein Text-Link.
• Links öffnen sich nicht in einem neuen Browser-Tab oder Fenster, es sei denn, es ist keine Html-Seite sondern z.B. eine PDF-Datei.
• Links sind leicht erkennbar. Sie sehen anklickbar aus. Dinge, die nicht Links sind, sehen auch nicht anklickbar aus, zum Beispiel sollte unterstrichener Text vermieden werden.
• Farbe. Besuchte Links haben eine andere Farbe als unbesuchte.
• Keine defekten Links. Überprüfen Sie beispielsweise mit W3 Link Checker .

Layout

• Wichtiger Inhalt wird zuerst angezeigt.
• Seite reagiert angemessen. Seite ist funktionstüchtig für unterschiedliche Bildschirmgrößen. Es gibt kein ungewolltes oder unnötiges horizontales Scrollen.
• Verwandte Informationen sind ersichtlich gruppiert.
• Es gibt so wenige Pop-up-Fenster wie möglich.
• Konsistenz. Seitenlayouts sind konsistent über die gesamte Website umgesetzt.
• Die Seiten sind nicht überladen. Es gibt genügend Weißraum, um das schnelle Erfassen der Inhalte zu unterstützen.

Ablauf

• Problemverfolgung. Usability und User Experience Themen werden entsprechend in einem Tracking-Sytem nachverfolgt.
• Benutzer-Tests. In den verschiedenen Phasen des Projekts wird mit der Zielgruppe getestet. Menschen, die nicht an der Entwicklung der Website beteiligt waren, leiten diese Tests.
• Priorisierung. Änderungen werden auf der Grundlage ihrer Bedeutung priorisiert. Ziele, Zeitplan, Budget und andere Einschränkungen des Projekts werden ebenfalls berücksichtigt. Tipp: Usability-Richtlinien von Maya
• Analyse der Auswirkungen von Änderungen. Änderungen können teurer und zeitaufwendiger ausfallen, als ursprünglich angenommen, vor allem wenn andere Teile des Produkts, Menschen oder Prozess betroffen sind. Daher ist es wichtig, die Auswirkungen von Änderungen im Vorfeld zu analysieren.
• Ertrag (return of investment) von Änderungen. Webseite wird vor und nach Veränderungen enstsprechend ausgewertet.

Formulare

• Einfachheit. Nur absolut notwendige und nachvollziehbare Daten werden abgefragt.
• Lange Dropdown-Menüs werden vermieden. Stattdessen gibt es freie Textfelder, deren Inhalt Server-seitig auf Fehler überprüft wird. Auch sind lange Dropdown-Menüs fehleranfällig wenn Benutzer mit der Maus scrollen.
• Die Dateneingabe ist flexibel, z.B. bei Telefonnummern und Kreditkartennummern.
• Felder sind mit klaren Begriffen beschriftet, z. B. Name, Adresse (unterstützt ggf. eine automatische Ausfüllhilfe).
• Erfolgreiche Formularübertragung wird auf einer dedizierten Bestätigungsseite angezeigt
• Fehlermeldungen werden neben dem Eingabefeld eingeblendet, nicht nur oben auf der Seite angezeigt.

Inhalt

• Kontrast. Es gibt ausreichend Kontrast zwischen Text und Hintergrund. Kann beispielsweise mit www.checkmycolours.com leicht überprüft werden.
• Der Inhalt ist visuell gut erfassbar. Es gibt kurze Absätze, beschreibende Überschriften, Listen und Bildern. Visueller Inhalt wird gegebenenfalls anstelle von Textwüsten auflockernd eingesetzt.
• Der Inhalt ist in verständlicher Sprache und Tonalität verfasst, die Benutzer leicht verstehen. Schneller Test z.B. auf www.read-able.com
• Kontakt-und Unternehmensinformationen sind übersichtlich dargestellt. Ein Klick auf einen Kontakt-Link öffnet nicht automatisch eine E-Mail-Anwendung.
• Inhalt ist nützlich und aktuell, Antworten auf die häufigsten Fragen von Benutzern sind auffindbar. Es gibt keine langatmigen Einleitungstexte oder unnötige "Willkommen auf unserer Website" Floskeln.
• Die Verwendung von Großbuchstaben in Prosatext wird vermieden. Groß ist nur für die Formatierung verwendet.