Five Seconds Test – Schnelle und einfache Usability Optimierung

Usability sollte eigentlich ein Thema für Jeden und jedes Projekt sein, wird meist aber eher stiefmütterlicher behandelt. Oft mit dem Argument, dafür sei kein Budget vorhanden. Verwunderlich, wenn man bedenkt, dass eine verbesserte Usability in den meisten Fällen auch eine höhere Conversion Rate zur Folge hat.
Es braucht nicht immer viel Zeit und Geld und auch keinen Experten, um Usability-Verbesserungen bei einem Projekt vorzunehmen und es ist nie zu spät. Usability Optimierung findet nicht nur einmalig in der Entwicklungsphase statt, sondern ist ein ständiger Prozess, der auch im laufenden Betrieb Beachtung finden sollte.

Eine kostenlose und unverbindliche Methode ist z.B. das Befragen von Kollegen, Freunden oder Familie. Dafür eignet sich z.B. der einfache 5-Sekunden-Test, bei dem man einer Person eine Website 5 Sekunden lang zeigt und dann aufschreiben lässt, was in Erinnerung geblieben oder besonders aufgefallen ist. So finden sich schnell Problemstellen oder aber auch gut funktionierende Mechanismen.
Wer mehr zum Thema einfache, kurze und regelmäßige Usability Tests erfahren möchte, dem kann ich das Buch Web Usability: Rocket Surgery Made Easy empfehlen, in dem Steve Krug Usability Optimierung gut und an praktischen Bespielen erklärt.

Auch im Web finden sich unzählige Tools, die helfen sollen, Usability-Tests einfach und schnell durchzuführen. Dazu zählt auch das Online Tool Five Second Test, das die oben genannte 5-Sekunden-Methode ins Web holt. Ich möchte das Tool in diesem Artikel etwas genauer vorstellen.

Das Tool

fivesecondstest

Wie der Name schon verrät, geht es bei dem webbasierten Tool Five Seconds Test um die schnelle Durchführung von Usability Tests und unkompliziertes Feedback von Probanden. Das Ziel ist, dass unabhängige Personen Entwürfe oder fertige Websites beurteilen und so auf Verbesserungen aufmerksam machen.

Die Testpersonen werden mit einem Screenshot konfrontiert und sollen nach kurzer Zeit wiedergeben, was hängen geblieben ist.
Die Ergebnisse können auf 2 Wegen angegeben werden: Über einen Click Test direkt auf dem Screenshot oder durch das Aufzählen der Punkte aus dem Gedächtnis. So erkennt man relativ schnell, ob wichtige Elemente gut sichtbar und wiedererkennbar gestaltet und platziert sind.

Die Tests sind sehr schnell mit der Angabe von ein paar Punten erstellt. Am Anfang werden ein paar Details abgefragt, dann folgt der gewünschte Screenshot und am Ende gibt es die Möglichkeit, eine Aufgabe zu formulieren und verschiedene Fragen an die Testpersonen zu stellen. Danach können die Tests auch schon beginnen.
five seconds usability test

Im Backend können registrierten Nutzer an zufällig ausgewählten Tests anderer Nutzer teilnehmen. Für jede Teilnahme bekommt man sogenannte Karma Punkte, die man dann wiederum einsetzen kann um weitere eigene Tests durchzuführen. Da ein Test nicht viel länger als 5 Sekunden dauert, braucht man sich nicht viel Zeit nehmen und kann immer mal wieder zwischendurch teilnehmen.

Für jeden Test erhält man einen Report, der die Ergebnisse der Durchläufe festhält und aufbereitet. Der Testreport zeigt die Auswertung, aufgesplittet nach einzelnen Fragen und Punkten. Zum Beispiel in einer Tag-Cloud mit den häufigsten genannten Begriffen (siehe Screenshot unten).
five seconds usability test report

Alle Tools von usabilityhub sind über einen Account in der Basis-Version kostenlos nutzbar. Neben fivesecondstest gibt es auch noch die Tools navflow und clicktest im Angebot. Erweiterte Funktionen bekommt man dann ab $20 pro Monat. Tests von zahlenden Nutzern werden beispielsweise etwas bevorzugt und die Test- und Response-Limits können erhöht werden.

Fazit

Das kinderleichte Erstellen der Tests und die geringe Hürde, an anderen Tests teilzunehmen, machen das Tool für mich zu einem echten Gewinn. So kann man ohne viel Aufwand und in regelmäßigen Abständen immer mal wieder eigene Projekte testen und Schwachstellen ausfindig machen. Ich rate jedem, sich mindestens mal die kostenlose Version genauer anzuschauen. Ich freue mich auf euer Feedback und eure Erfahrungen.

Sign Up Forms Must Die! – Luke Wroblewski

Auf der Warm Gun Design Conference in San Francisco hat Luke Wroblewski, Autor von Web Form Design, über die Alternativen von Sign Up Forms gesprochen. Er stellt dabei drei Alternativen genauer vor: web services, communication tools, and gradual engagement.

Sign-up forms must die. Because, frankly we can do better than asking people to fill in a bunch of input fields when they want to use our products. In fact, we can get people engaged with digital services in a way that tells them how such services work and why they should care enough to use them. We can do this without explicitly making them fill out a sign-up form as a first step.

Ab Minute 24:15 beginnt sein Vortrag und er dauert ca. 18 Minuten. Leider ist die Qualität nicht ganz so gut, sie reicht aber, um alles zu verstehen.

Seine Folien gibt es außerdem als PDF zum Download.

via

Wochenend-Lektüre #8

wochenend-lektuere

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

hover ist tot, lang lebe acitve

hover active pseudoklasse css

Ursprünglich als Visualisierung einer Link-“Berühung” gedacht, werden mittlerweile auch andere Elemente mit der Pseudoklasse :hover modifiziert und erweitert. Laut der W3C-Spezifikation ist es zugelassen, die Eigenschaft für alle HTML-Elemente zu verwenden, also z.B. auch für input, table oder div-Container. Ob diese Anwendungen immer sinnvoll und aus Usability-Sicht von Vorteil sind, ist eine andere Frage. Richtig eingesetzt kann der Einsatz der Pseudoklasse aber große Usability-Verbesserungen mit sich bringen, z.B. in großen unübersichtlichen Tabellen, bei denen man zur besseren Übersicht Zeilen und Spalten markiert.

Dennoch ist mit der Entwicklung des mobilen Webs und der Steuerung über Touchscreens ein Umdenken erforderlich. Ganz so dramatisch wie im provokativen Titel behauptet, ist es natürlich nicht. Die Pseudoklasse :hover ist mit seinen vielen Möglichkeiten für Designer im heutigen Webdesign kaum wegzudenken und wird bei klassischen Websites auch weiterhin ihre Daseinsberechtigung haben. Bei der Arbeit mit modernen Touchscreen-Interfaces wird man allerdings auf die Hilfe der Klasse verzichten müssen, denn dieser Status ist beim neuen Bedienkonzept nicht mehr abbildbar. Eine Herausforderung für jeden Designer, denn für eine gute Usability galt bisher immer, dass ein Link mit einem Hover-Status versehen werden muss. Der Status dient als zusätzliches Merkmal, einen Link oder Button kenntlich zu machen. Viele Nutzer „erkunden“ Websites mit dem Mauszeiger und werden so durch Hover-Effekte auf Links aufmerksam. Für das Design neuerer Interfaces gilt: Klickbare Flächen und Elemente müssen auf ersten Blick und ohne “Ausprobieren” und langes Erkunden als solche erkennbar sein, Buttons müssen ganz klar gekennzeichnet werden, denn: Der permanente “Cursor” wird durch den temporären Finger ersetzt wird.

Richtig problematisch wird es bei Anwendungen, bei denen Funktionen über :hover aktiviert und deaktiviert werden und die dann über Touchscreens schnell nicht mehr navigierbar sind.

Aber was hat :hover mit :active zu tun?

Im Prinzip erstmal nichts, außer, dass es sich bei :active ebenfalls um eine Pseudoklassen handelt, die den nachfolgenden Status von :hover beschreibt. :active wird in dem Moment aktiv, in dem ein Nutzer einen Klick ausführt. Oft wird hinter der Klasse die Funktion vermutet, ausgewählte Links zu markieren, aber es handelt sich wirklich nur um den kurzen Moment des Ausführens.
Bisher lag die Klasse eher im Schatten von :hover und wird immer noch oft vernachlässigt. Jetzt könnte sie aber helfen, die Lücke, die das Wegfallen von :hover hinterlässt, zu schließen. Da der Nutzer nicht mehr sieht ob er gerade einen Link oder klickbarers Element berührt, wird es umso wichtiger dem Nutzer ein Signal zurückzugeben, sobald eine Funktion “ausgeführt” wird.

Was meint ihr? Ist die Herausforderung für den Designer, eine gute Usability zu erreichen, durch den Wegfall größer geworden? Oder gibt es noch andere Alternativen?

UPDATE: Apple arbeitet einem kürzlich veröffentlichten Patent zufolge an der Umsetzung von hover-Gesten für Multi-touch-Geräte.

Wochenend-Lektüre #7

wochenend-lektuere

Wieder mal ein paar Artikel, die mir in dieser Woche auf gefallen sind:

  • What Is User Experience Design?
    Schöner und ausführlicher Artikel im Smashing Magazine mit Erklärungen, Ressourcen und Tools zum Thema User Experience Design.
  • Advice for design students
    Wer gerade in einem Design-Studium steckt, kurz davor steht oder es bereits abgeschlossen hat, findet bei David Airey ein paar nützliche Tipps.
  • The discipline to write daily
    Ich bewundere Blogger, die es schaffen, täglich neue Artikel zu schreiben. Chris Brogan schreibt über die Disziplin, genau das zu schaffen.
  • 35 Excellent Wireframing Resources
    Auf Noupe.com wurde eine große Liste mit Ressoucen zu Wireframes zusammen gestellt.

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Wireframe vs. MockUp

Was ist eigentlich der genaue Unterschied zwischen einem Wireframe und einem Mockup? Bei der Entwicklung von Websites stößt man in der Konzeptionsphase wahrscheinlich auf beide Begriffe. Oft werden sie allerdings verwechselt oder sollen das selbe meinen: grobe Skizzen, Entwürfe oder Vorformen einer Website zur Konzeption, Veranschaulichung und Abstimmung mit dem Kunden. Dennoch gibt es grundlegende Unterschiede zwischen beiden Instrumenten:

Wireframe – function & layout

definition-wireframe

Zum Thema Wireframes habe ich bei der Vorstellung einiger webbasierter Tools schon ein bisschen was geschrieben. Es gibt keine vorgeschrieben Richtlinien, was ein Wireframe beinhalten muss oder nicht darf, über die meisten Punkte herrscht allerdings weitgehend Einigkeit.
Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designers und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um die oben genannten Punkte zu erfüllen.

Variation: Ab und zu findet man Wireframes auch in Verbindung mit so genannten Mood Boards. Ein Mood Board soll mit Farben und Fotos den Stil und das “Gefühl” des fertigen Endprodukts vermitteln. In Kombination mit einem Wireframe kann man so in einigen Fällen das Erstellen von Mockups überspringen. Wer mehr über Mood Boards lesen will, dem empfehle ich den Artikel von Jakub Linowski über Wireframe Mood Boards.

Tools zum Erstellen von Wireframes: Diagramm-Software, z.B. OmniGraffle oder verschiedene Online Tools

MockUp – form, design & visual

unterschied definition wireframe mockup

Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln. Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar.

Ein MockUp bietet sich daher meist besser für Kundenpräsentationen an, da ein Wireframe über look and feel (meistens sehr wichtig für den Kunden) so gut wie nichts aussagt. Trotzdem sollte man sich in Acht nehmen und gut kommunizieren in welcher Entwicklungsphase sich der Entwurf befindet, da ein Mockup vom Kunden leicht als fast fertiges Produkt interpretiert werden könnte und dann oft Diskussionen über kleinste Details und Formulierungen beginnen.

Tools zum Erstellen von Mockups: gängige Grafikprogramme, wie z.B. Photoshop oder Fireworks


Häufig wird bei kleineren Projekten nur eines dieser Instrumente genutzt. Auch bei 37signals hat man sich dazu entschieden, die Erstellung eines Mockups in Photoshop einfach zu überspringen und gleich einen HTML/CSS-Prototypen zu bauen.
Die Erstellung eines Prototypen (auch Click-Dummy genannt) wäre der nächste Schritt im Entwicklungsprozess. Er ermöglicht bereits Interaktion und macht die Entwürfe so navigierbar. Viele Tools bieten mittlerweile auch die automatische Generierung eines Prototypen aus den Wireframes oder Mockups an.

World Usability Day 2010: Kommunikation

World Usability Day 2010 Hamburg

Am 11. November 2010 ist wieder World Usability Day, diesmal mit dem Motto Kommunikation. Zum 6. mal finden in diesem Rahmen regionale Veranstaltungen in verschiedenen Städten statt. Auch in Hamburg stellt die HAW wieder ihre Räumlichkeiten für Workshops und Vorträge zur Verfügung.

Das geplante Programm für den Tag:

  • 11:00 – 14:00 Uhr: Workshops
  • 15:00 – 18:30 Uhr: WUDCamp-Sessions (Vorträge, Diskussionen etc.)
  • ab 19:30 Uhr Get-together

Das WUDCamp soll wie ein BarCamp aufgebaut sein, so dass jeder die Möglichkeit hat, Vorträge einzureichen oder Themen vorzuschlagen. Wer gerne teilnehmen möchte, findet auf der Regionalseite mehr Infos. Auf das Video-Archiv der letztjährigen Vorträge hatte ich ja bereits in der Wochenend-Lektüre #5 verwiesen, dort kann man sich schon mal einen Eindruck verschaffen.

Wer da dann schon mal vor Ort ist, kann gleich im Anschluss mit dem BarCamp HH weitermachen, das am 12. und 13. November stattfindet.

Deutsche Bahn erneuert User Interface der Fahrkartenautomaten

neues ui deutsche bahn

Am 1. Oktober hat die Deutsche Bahn angefangen ein neues User Interface, das schon auf der Innotrans vorgestellt wurde, auf alle Fahrkartenautomaten zu spielen. Mittlerweile müsste das Design bundesweit an allen Bahnhöfen zu sehen sein. Da es sich nicht nur um ein paar kleine Korrekturen und Anpassungen handelt, sondern um ein komplett neues Design, möchte ich hier ein paar erste Eindrücke schildern und ein paar Bilder zeigen. Bei den Bildern muss ich mich allerdings für die Qualität entschuldigen, da ich gestern leider nur mein iPhone zur Hand hatte. Die Änderungen sollten aber deutlich genug erkennbar sein.

Farben

Man hat sich vom dominierenden Dunkelblau im Hintergrund verabschiedet und setzt jetzt auf Grau und Weiß als Hauptfarben. Für Button-Variationen kommen zudem noch Rot (ausgewählter Status) und Grün (wichtige weiterführende Elemente) zum Einsatz.
Der Kontrast leidet durch die neue Farbwahl leider etwas. Gerade bei starkem Lichteinfall wird es wahrscheinlich Probleme mit der Lesbarkeit geben.

Stil

Der alten Benutzeroberfläche sah man ihr Alter durchaus an. Das neue Design kommt modern und schlicht daher. Für die dreidimensionale Erscheinung der Buttons sorgen nicht mehr abgeflachte Kanten sondern Schatten und Farbverläufe. Insgesamt wirkt das ganze Interface nicht mehr so klobig und kühl sondern viel weicher und freundlicher als zuvor. Dazu tragen auch die runden Ecken bei. Ab sofort stellen Lightboxen Informationen zu einzelnen Funktionen dar (über die i-Buttons erreichbar).

Funktionen und Struktur

Funktional und strukturell hat sich kaum etwas geändert. Wer schon öfter DB-Automaten bedient hat, muss sich auf keine großen Änderungen gefasst machen und wird sich auch weiterhin schnell zurechtfinden. Ich habe nicht alle Funktionen getestet, sondern nur den Verlauf eines Fahrkartenkaufs durchgespielte.

Fazit

Aus meiner Sicht war eine so drastische Veränderung des Design nicht unbedingt notwendig, auch wenn die alte Oberfläche optisch natürlich überholt schien. Das Redesign ist zwar durchaus gut gelungen, aber ohne die Usability spürbar zu verbessern. Was meint ihr, ist die Neugestaltung des User Interfaces gerechtfertigt oder vollkommen überflüssig?

Nun aber zu den Bildern:
Neues User Interface Deutsche Bahn Fahrkartenautomaten

Neues User Interface Deutsche Bahn Fahrkartenautomaten

Weitere Bilder des neuen Interface anschauen …

And the winner is…

Gestern Abend ist das erste Gewinnspiel hier auf meinem Blog zu ende gegangen. Vielen Dank für eure Teilnahme und die Verbreitung!

Aber jetzt kurz und schmerzlos zur wichtigsten Info: Der Gewinner ist housebreaker! Herzlichen Glückwunsch! Ich werde den Gewinner gleich per Email benachrichtigen und dann so schnell wie möglich das Buch versenden. (Wenn ich keine Antwort erhalte, wird das Buch neu verlost)

Für die zufällige Auslosung habe ich radom.org genutzt. Das ganze hat wirklich Spaß gemacht, also noch mal vielen Dank! Die Nicht-Gewinner müssen auch nicht traurig sein, denn es wird hier bestimmt nicht das letzte Gewinnspiel gewesen sein. Vielleicht geht es ja schon zur Adventszeit weiter :)

Wochenend-Lektüre #6

wochenend-lektuere

  • Going Freemium: One Year Later
    Ben von MailChimp zieht ausführlich Bilanz der ersten 12 Monate nach dem Wechsel auf das Freemium-Model. Zusätzlich gibt es noch Einblicke in die Geschichte von MailChimp.
  • Guiding the user with a call to action
    Immer wieder ein spannendes und komplexes Thema: Call to action und Web Design.
  • Match te tool to the problem
    Sketches, Wireframes, Mock-ups oder HTML Prototypen? Für jedes Projekt/Problem gibt unterschiedliche Anforderungen und dadurch auch angepasste Vorgehensweisen.
  • UX Myths
    Auf UXMyths.com werden User Experience Mythen (bisher 25) aufgedeckt und Erklärungen geliefert, warum sie nicht wahr sind.
  • UXpod – User Experience Podcast
    Hier findet ihr eine große Auswahl (über 50 Folgen) des UXpods mit Interviews und Kommentaren zum Thema User Experience Design.
  • Ten Things I Have Learned
    Zum Schluss noch ein Teil des AIGA Talk in London von 2001.

Viel Spaß und ein schönes Wochenende!

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Page 21 of 32« First...10...192021222324...30...Last »