In der Praxis läuft es jedoch meist aufgrund verschiedener Rahmenbedingungen (Zeit, Budget, mindset, Workflows, Zuständigkeiten,…) nicht immer mustergültig ab….

Mein Auffassung von UCD ist aufgrund dessen vielmehr eine der Fragestellung bzw. Zielsetzung entsprechende, sinnvolle Verzahnung von einzelnen Methoden, um die Entwicklung eines neuen Features bzw. die Optimierung einer bestehenden Applikation nutzerzentriert zu begleiten.

Pragmatisch gesagt: Ein user centered design-Prozess sind für nicht nur Relaunch- bzw. Redesign-Projekte. Anbei einmal einige Beispiele aus unserem Projektalltag, um dies mit Leben zu füllen:

1. Launch eines neuen Online-Shops

• Ziel: die stationären Händler und den Shop bestmöglich zu verheiraten im Sinne des Multi Channel Retailing
• Schritt 1: Erhebung der Anforderungen und Erwartungen der Bestandskunden (offline) als auch der anvisierten Neukunden (online) an einen solchen Online-Shop mittels Fokusgruppen
• Schritt 2: Validierung bestimmter Anforderungen an gewisse Features / Inhalte sowie Klärung essentieller Wordings mithilfe einer Zielgruppenbefragung per Online-Panel
• Schritt 3: Bildung von Personas – gemäß der erhobene Zielgruppenmerkmale – als Unterstützung im weiteren Gestaltungsprozess
• Schritt 4: 2stufiger Klickdummy-Test von neuartigen, für herkömmliche Shops untypische/ neue Interaktionsprozesse
• Schritt 5: Finale Evaluation der Shop-Betaversion mittels einem Usability-Test im Labor kurz vor dem Livegang

2. Bestimmung der optimalen Produktbebilderung für einen Online-Shop im Bereich Mode

• Fragestellung: Wie müssen die Produkte fotografiert werden, um das Image positiv zu steigern, um sich vom Wettbewerb abzuheben und einen maximalen Umsatz zu erreichen?
• Schritt 1: Auswahl und Bewertung der favorisierten Varianten mittels qualitativer Fokusgruppen (Gruppendiskussionen) – inkl. Wettbewerbsanalyse, um die tatsächlichen, detaillierten Hintergründe für die Entscheidungsfindung zu erfassen
• Schritt 2: Online-Befragung von Bestandskunden und Wettbewerbskunden (potentiellen Neukunden), um die aus den Fokusgruppen ermittelten Ergebnisse noch einmal mit einer großen Stichprobe zu quantifizieren.
• Schritt 3: A/B-Testing , um die tatsächlichen Umsatzeffekte gegen die aktuelle Bebilderungsvariante messen zu können. Warum erst jetzt? Weil die Produktion der Bilder für alle denkbaren Varianten als auch das A/B-Testing einen nicht vertretbaren Aufwand bedeutet hätte.

3. Optimierung eines Checkout-Prozesses für ein großes Verlagshaus

• Ziel: Conversionoptimierung durch Etablierung eines multiplizierbaren Prozesses für mehrere Shops
• Schritt 1: Expertenbasierte Evaluation unter Beachtung der vorliegenden Web Analytics-Daten als Ausgangsbasis für die Neukonzeption
• Schritt 2: Nutzerbefragung zu bestehenden Anforderungen und Erwartungen an den spezifischen Kaufprozess (wie ist das mentale Modell?)
• Schritt 3: mehrstufige Konzeption verschiedener, denkbarer Varianten mittels Wireframes
• Schritt 4: mehrstufiger Klickdummy-Test mit Probanden aus den einzelnen Zielgruppen, um die beste und nutzerfreundlichste Variante zu ermitteln
• Schritt 5: Begleitende Beratung bei der technischen und grafischen Umsetzung

Wie definieren Sie UCD?
Freue mich auf Ihre Sicht der Dinge und eine bestenfalls „heiße“ Diskussion zu diesem Thema.

Jedes Jahr finden im Herbst über 400 Kreative ihren Weg zur decoded conference nach München. Im Rahmen der Munich Creative Business Week wird nun vom 08. bis 10. Februar die Fachkonferenz decoded@mcbw in der BMW Welt München veranstaltet.

Unter dem Motto „Discover Interactive Opportunities“ richten sich die Organisatoren dieses Mal an Manager und Unternehmer, die über drei Tage hinweg exklusive Einblicke in digitale Trends der interaktiven Branche erhalten. In 15 Vorträgen stellen Ihnen 17 Experten aus den Bereichen Design, Entwicklung, User Experience und Marketing ihre Projekte und Arbeitsweisen vor.

Unter den Sprechern finden sich unter anderem namhafte Vertreter von Branchenführern wie Google, Adobe Systems, BMW, DATEV oder BurdaYukom. Das Ambiente der BMW Welt München liefert dabei einen würdigen Rahmen. Dabei wurde die Teilnehmeranzahl exklusiv auf 110 Besucher limitiert. Seien Sie dabei, wenn wir einen Blick auf neue Strategien und Trends werfen.

usabilityblog.de ist Medienpartner der decoded conference. Deswegen profitieren Sie von vergünstigten Konditionen. Für die nächsten 30 Anmeldungen gibt es auf das 3-Tagesticket 25% Rabatt und für ein 1-Tagesticket 15% Rabatt.

Geben Sie bei Ihrer Anmeldung den Code usabilityblog-3TAGE für das 3-Tagesticket und den Code usabilityblog-1TAG für das 1-Tagesticket an.

Zur Anmeldung

Startseitenvergleich (alt vs. neu)

Startseite bis Dezember 2011	Startseite ab Dezember 2011

Auf der alten Startseite konnten Nutzer entweder über die prominent platzierte Suche einsteigen, oder über einen der darunter angebotenen Sortimentsteaser. Diese beiden Elemente sind auf der neuen Startseite ebenso prominent dargestellt. Sie wirken allerdings aufgrund des Designs deutlich edler und insbesondere die Teaser sind deutlich aufgeräumter.
Zusätzlich gibt es jetzt noch eine horizontale Hauptnavigation sowie einen Bereich „aktuelle Tests“, der die neusten Testberichte verschiedener Zeitschriften kurz vorstellt. Ich denke für jeden Suchtyp – ob Stöberer oder gezielten Sucher – ist hier ein passender Einstieg dabei.

Was fehlt noch?
Eigentlich kaum etwas. Nur beim Überfahren der einzelnen Navigationspunkte fehlt aus meiner Sicht ein Layer.
In diesem könnten sehr schön die verschiedenen Unterrubriken visualisiert werden und Nutzer könnten noch schnell zur gewünschten Produktgruppe geführt werden.

Produktlistenvergleich (alt vs. neu)

Produktliste bis Dezember 2011	Produktliste ab Dezember 2011

Die bessere Übersichtlichkeit macht sich vor allem auf der neuen Produktliste bemerkbar. Sie wirkt ruhiger und strukturierter. Und das Wichtigste, die Testbewertung eines Produkts prominent angezeigt. Auch die links positionierte Filterung ist gut erfassbar und lässt sich intuitiv bedienen.

Aus meiner Sicht gut umgesetzt ist die Handhabung der Vergleichs-/Merkfunktion. Nutzer erhalten hier mit Hilfe einer Layer-Einblendung ein deutliches Feedback und können bei Bedarf direkt die Vergleichsfunktion aufrufen.

Vergleichs-/Merklistenfunktion über Layer gelöst.

Die Checkboxen neben der Produktabbildung könnten zwar etwas aufmerksamkeitsstärker sein und strenggenommen ist die Funktion mit „vergleichen“ nicht richtig benannt. Denn der eigentliche Vergleich kann erst im Layer gestartet werden, der nach Anklicken der Checkbox erscheint.

Daher würde ich die Funktion spontan mit „vergleichen/merken“ benennen und analog den „Merkzettel“ in „Vergleichs-/Merkliste“ umbenennen. Dies würde beide Funktionalitäten deutlicher wiederspiegeln.

Klare Struktur verloren

Die beiden Seiten „Komplette Tests“ und „Kaufberater“ können im Punkto Übersichtlichkeit und Struktur allerdings nicht überzeugen.

Produktliste: komplette Tests	Produktliste: Kaufberater

Aufgrund der unterschiedlichen größte der einzelnen Teaser wirkt die Seite sehr unruhig und ist schwer zu erfassen. Zudem wird nicht klar nach welchen Kriterien die einzelnen Artikel gelistet werden, auf jeden Fall nicht nach Datum.

Umfassende Detailseite

Produktdetailseite

Die Detailseiten zu Produkten enthalten sehr viele Informationen und erstrecken sich daher gelegentlich über mehrere Bildschirmseiten. Dennoch geht der Überblick nicht verloren und der Nutzer kann sich umfassend auf einer Seite über die Eigenschaften des betrachteten Produkts informieren.

Ein besonderes Highlight stellte die Möglichkeit dar, Abschnitte aus den Textberichten gelisteter Zeitschiften lesen zu können. Die kompletten Testberichte können auch direkt gekauft werden.

Ebenso ein sehr nettes Feature ist das Element „Besser und günstiger?“. Hier werden Produktalternativen angezeigt, die als besser eingestuft wurden und günstiger im Preis sind.

„Männer sind vom Mars, Frauen von der Venus.“ Populärwissenschaftlich wurde dieses Thema vielfach erörtert. Dass es auch Einflüsse auf die Shop-Gestaltung haben kann, möchte ich heute einmal aufgreifen. Die These, die diesem zugrunde liegt ist folgende:
Frauen suchen das Shopping-Erlebnis, während Männer auf den schnellen Abschluss aus sind.

Was heißt dieses in Bezug auf einen Online-Shop? Aufgeräumte, gut strukturierte Seiten für den Mann vs. verspieltes Design mit zahlreichen Crosslinks und immer neue Anregungen für die Frau?! Vermutlich sind damit beide glücklich und erleben ihren Einkauf als Erfolgserlebnis. Dieses soll nur als Beispiel gelten, um herauszustellen, wie wichtig die Berücksichtigung von Besonderheiten bei Nutzer-/Kundengruppen ist.
Wichtig für den Shop-Betreiber aber zunächst einmal die Definition die (Kern-)Zielgruppe als Ausgangsbasis für eine entsprechende Marktforschung, oder vom Wording her vielleicht besser Nutzerforschung, statt sich auf solche pauschalen Aussagen zu verlassen.

Hier bietet sich zuallererst natürlich eine Onsite-Befragung an, um mehr über die aktuellen Nutzer und deren Bedürfnisse zu erfahren und ggf. schon Besonderheiten festzustellen.
Darüber hinaus ist die schon angesprochene strategisch definierte Zielgruppe des Unternehmens von Bedeutung – die sich ggf. (noch) nicht auf dem Shop aufhält. Mittels einer Zielgruppen-Befragung z.B. über ein Online-Panel können diese Personen gezielt rekrutiert werden. Besonders interessant ist es auch, wenn man die Stichprobe beispielsweise repräsentativ für Online-Shopper wählt, und sich dann anschaut, ob es signifikante Unterschiede gibt zwischen der Durchschnittskunden und dem Wunschkunden. So lässt sich recht zuverlässig feststellen, ob der Aufwand für eine Veränderung oder Neukonzeption gerechtfertigt ist (z.B. Biete ich einen ganz neuen Checkout-Prozess an, der meine Zielgruppe besser abholt), oder die These ggf. sogar widerlegt werden kann.

Auch im qualitativen Bereich besteht die Möglichkeit bei Fokusgruppen, Konzepttests oder User-Experience-Tests im Labor Unterschiede zwischen Zielgruppen zu evaluieren. Ein plakatives Beispiel fällt mir hierzu ein: ein Online-Shop mit Fokus Mode setzt junge, attraktive Models ein. Diskussionen in Fokusgruppen mit der Kernzielgruppe 45+ ergaben, dass „lebensechtere“ Abbildungen gewünscht wurden, da sonst oft Skepsis vor dem Kauf (wie steht das mir, wie sieht das in meiner Größe aus) oder die Enttäuschung nach dem Kauf (entspricht nicht den Erwartungen, führt zu Retoure oder negativer Attribuierung auf den Shop).

Neben der Berücksichtigung von Unterschieden zwischen Männern und Frauen hat sich eResult zuletzt der Untersuchung einer speziellen Zielgruppe, den Digital Natives gewidmet. Auch Senioren standen schon im Fokus des Interesses. Gibt es noch eine Zielgruppe, die Sie brennend interessieren würde – wodurch auch immer abgegrenzt?

In Onlineshops stöbern die Kunden dann häufig durch eine riesige Auswahl und sind zunehmend verwirrt. Resultat ist dann meist der Besuch im Fachhandel, wo man sich mehr oder weniger zufrieden mit Hilfe eines Verkäufers für ein Produkt entscheidet.

Wie schaffen Sie es, diese Kunden auf Ihrem Shop zu halten und sie dort bei der Kaufentscheidung zu unterstützen?

Bleiben wir beim Beispiel Kinderwagen. In diesem Bereich zeigt babyartikel.de (KP Family) einen interessanten Ansatz.

Wählt man hier die Rubrik „Kinderwagen“ aus, gelangt man nicht etwa auf eine Produktübersichtsseite mit einer langen Liste an Modellen, sondern erhält zunächst eine Art Kurzberatung. Kurz und knapp werden dort die wesentlichen Eigenschaften und typischen Anwendungsbereiche der unterschiedlichen Modellvarianten erläutert.

Von hier aus gibt es zwei Möglichkeiten: Entweder man schaut sich gleich die Produkte des entsprechenden Typs an, oder man informiert sich zunächst in der Kaufberatung umfassend über die Details und Ausstattungsmerkmale, auf die man bei der Auswahl achten sollte.

Abb.1: Produktberatung beim Eistieg in eine Kategotie ( babyartikel.de)

Ein schönes Beispiel dafür, dass Beratung in Onlineshops nicht versteckt in einer eigenen Rubrik schlummern muss, sondern den Kunden auch offensiv angeboten werden kann. Die unsicheren Käufer dieser Produktgruppe werden es sicher zu schätzen wissen, bei der Wahl „an die Hand genommen“ zu werden.

Aber nicht nur welches Produkt einer Kategorie das richtige ist, auch was überhaupt in den Warenkorb sollte ist nicht immer einfach zu entscheiden.

Abb.2: Einkaufs-Checkliste (BabyWalz)

Baby-Walz.de bietet zu diesem Zweck Checklisten an, z.B. für die Zusammenstellung der Erstausstattung oder für den ersten Urlaub mit Baby. Für unsichere Eltern bietet das sicher hilfreiche Orientierung und für den Shopbetreiber gleichzeitig eine Cross-Selling-Möglichkeit.

Meiner Ansicht nach zwei gelungene Beispiele für Online-Kundenberatung und ein Vorbild für Shops, die beratungsintensive Produkte anbieten. Kennen Sie weitere gute Beispiele?

Meiner Meinung nach, indem Sie die Bewerber zielgruppenspezifisch und mit Hilfe von interaktiven Tools ansprechen. Hierfür gibt es einige Beispiele. Zwei davon, möchte ich Ihnen in diesem Beitrag vorstellen.

Auf der Einstiegsseite des Karrierebereichs von RWE.de zum Beispiel kann der Nutzer über eine interaktive Auswahl seinen Einstieg auswählen. Dafür stehen dem Nutzer vier unterschiedliche Möglichkeiten zur Verfügung. Vom Schüler über Studenten und Absolventen bis zum Berufserfahrenen.

Einstiegsseite auf der Karriereseite RWE

Die Art der Gestaltung und der Interaktion erfrischt zum einem den ersten Schritt im Bewerbungsprozess. Zum anderen kann der interessierte Bewerber sofort erkennen, welche Zielgruppe das Unternehmen anspricht.

Ein weiteres Beispiel, dass ich Ihnen nicht vorenthalten möchte ist die Einstiegsseite der REWE-Group.de. Die Gestaltung ist im Gegensatz zu RWE.de nicht so interaktiv, allerdings werden dem Bewerber zusätzlich zu den bei den jeweiligen Zielgruppen, die die Einstiegsmöglichkeiten präsentiert.

Einstiegsseite des Karrierebereichs bei REWE-Group

Betrachtet man zum Beispiel die Gruppe der Studenten, so ist für diese direkt erkennbar, dass das Unternehme Praktika als auch Abschlussarbeiten anbietet. Der Weg zur gruppenspezifischen Stellenbörse ist über einen Direktlink ebenfalls verfügbar.

Wie diese beiden Beispiele zeigen, gibt es unterschiedliche Umsetzungsmöglichkeiten Bewerber anzusprechen. Wichtig ist es aber, sofort ersichtlich zu zeigen, welche Kandidaten Sie suchen und welche Möglichkeiten Sie anbieten. So kann der Nutzer in seiner gezielten Suche unterstützt werden.

Alle reden von agiler Usability, von agilem User Centered Design oder von agilen Designprozessen. Warum ist das eigentlich so? Und noch viel wichtiger: Was ist eigentlich „agile Usability“? Und: Gibt es ein Gegenteil von agiler Usability?

Grund genug, sich dieser Thematik einmal in einer Beitragreihe zu widmen. In diesem ersten Teil geht es dabei zunächst darum, was agile Usabiltiy-Methoden eigentlich ausmacht und warum man „agile Usability“ nicht definieren kann.

Der „Hype“ um agile Usability-Optimierung – Warum eigentlich?

Viele Unternehmen greifen bei der Software- und Produktentwicklung mittlerweise auf agile Entwicklungsmethoden zurück. Ziel hierbei ist es, Entwicklungsprozesse zu schaffen, die möglichst schlank gehalten sind und dabei flexibel auf neue Anforderungen reagieren können. Viele Projekte, vor allem in der Softwareentwicklung greifen z. B. auf Scrum zurück. Kerninhalt von Scrum ist die iterative und inkrementelle Produktentwicklung.

Agile Entwicklung mit Scrum: Iterative Entwicklungszyklen ermöglichen frühe „Small Releases“ einer Anwendung; Anforderungen werden flexibel im Prozess angepasst.

Und hier kommt die Usability-Optimierung ins Spiel: Agiles Vorgehen in der Entwicklung von Applikationen sei es Software, Websites oder mobile Applikationen – ist nämlich unter dem Aspekt des User Centered Design von großem Vorteil: Iterative Anpassungen und regelmäßige Akzeptanztests sind hier ohnehin die Regel. Ziel ist hier vorwiegend, funktionierende Anwendungen zu generieren, mit denen der Nutzer zufrieden ist. Warum aber nicht auch User Experience-Expertise einbeziehen, um Anwendungen zu schaffen, die aufgrund ihres Designs, der Funktionalität und der Interaktion eine sehr gute User Experience bieten und den Nutzer begeistern?

Dass Usability bzw. User Experience und agile Entwicklung unter bestimmten Voraussetzungen gut zusammenpassen, wurde hier an anderer Stelle bereits ausführlich diskutiert. Doch vor der Überlegung, wie diese Zusammenarbeit im konkreten Fall aussehen kann, sollten Sie sich zuerst fragen:

Sind agile Methoden der Usability-Optimierung etwas völlig anderes als „klassische“ Methoden? Sind sie vielleicht sogar deren Gegenteil?

Die Antwort auf diese Fragen ist eindeutig: Nein!

Agile Usability-Optimierung sollte in keinem Fall als eine einzige Methode verstanden werden, deren Vorgehensweise man klar definieren kann – das an sich würde ja schon dem agilen Charakter widersprechen. Vielmehr geht es um die Art der Herangehensweise– also die flexible Anpassung bestehender Usability-Methoden an die jeweiligen Anforderungen. Im konkreten Fall also an die Art der Produktentwicklung des Entwicklerteams, mit dem man arbeitet.

Im Fokus: Die Nutzer

Ziel sollte es also sein, Methoden so zu flexibel anzupassen, dass sie im Hinblick auf Optimierung der User Experience und Usability das bestmögliche Ergebnis für die Verbesserung des Produktes liefern – und zwar unter Einbeziehung der Arbeitsweise der Entwickler. Wie dies im Einzelfall konkret aussieht, ist unterschiedlich.

Im Fokus der Optimierung stehen jedoch immer die Nutzer sowie deren Anforderungen an eine Anwendung. Daher stellen agile Usability Methoden auch keinesfalls das Gegenteil „klassischer“ Methoden dar; sondern vielmehr eine Facette derer.

Wann und mit wem?

Im Grunde können alle Methoden, die der Optimierung der User Experience und der Usability dienen in „agiler Form“ zum Einsatz kommen und dies sowohl

• … als kontinuierliche Begleitung eines agilen Entwicklungsprozesses als auch
• … im Rahmen eines punktuellen Einsatzes zu einem bestimmten Zeitpunkt des Prozesses.

Eine Einbeziehung dieser Methoden erfordert zudem nicht zwingend die Zusammenarbeit mit einem Entwicklerteam, das mit Scrum arbeitet – auch in der Beratung von User Experience Abteilungen können diese Methoden zum Einsatz kommen, wenn bestimmte Voraussetzungen in der Kommunikation, dem Entwicklungsprozess und der Zusammenarbeit gegeben sind. Wie dies z. B. konkret aussehen kann und Voraussetzungen hierfür notwendig sind, darauf werde ich in meinen kommenden Beiträgen noch weiter eingehen.

Zunächst interessiert mich allerdings: Wie verstehen Sie „agile Usability/User Experience Optimierung?“ Haben Sie bereits Erfahrungen mit dieser Art der Evaluation gesammelt? Ich freue m ich auf Ihre Kommentare!

Das Ziel und der Nutzen von Gamification aus Sicht eines Unternehmens:

Der Kunde soll sich stärker mit einem Angebot beschäftigen, daran teilhaben, interagieren. Kurz: Kundenbindung!

Das verwendete Mittel:

Indem Spaß während der Nutzung einer Anwendung oder Durchführung einer Aufgabe erzeugt wird, investiert der Kunde gern seine Zeit. Es wird die psychologische Tendenz des Menschen ausgenutzt, sich eher mit etwas zu beschäftigen, das spielerisch bewältigt werden kann.

Was ist Gamification wirklich?

Sie haben sich noch nicht mit Gamification beschäftigt? Vielleicht doch, denn die Anwendungsfelder sind älter als das 2008 erstmalig genannte Kunstwort selbst. Vielflieger-Programme und andere Bonusprogramme verkörpern schon lange die Idee der Gamification.

Gamification kann Offline und Online betrieben werden. Einen wissenschaftlichen Artikel zur definitorischen Abgrenzung finden sie hier.

Die am häufigsten strapazierten (Online-)Beispiele für Gamification sind Nike+ und Foursquare. Dieser Artikel soll einen weiteren Blickwinkel zum Thema bieten, weswegen diese hier nicht vorgestellt werden. Es gibt genügend andere Quellen.

Dieses Video verdeutlicht die Anwendungsmöglichkeiten von Gamification sowieso besser:

Experimentelle Applikation von SAP

Viele Definitionen beschreiben Gamification mit der Anwendung von spieltypischen Elementen, Designprinzipien, Mechaniken und Prozessen auf eigentlich spielfremde Systeme. Oft als typische Spielelemente angeführt werden Highscores, virtuelle Güter, Fortschrittsbalken und Ranglisten. Aber wie das Video der SAP-Applikation zeigt: Gamification beinhaltet viel mehr, als sich die meisten von uns auf den ersten Blick vorstellen können.

Folgendes Video zeigt den zugrundeliegenden Gedanken von Gamification sehr anschaulich: „Jeder Mensch kann motiviert werden etwas häufiger oder auf eine bestimmte Art zu nutzen, wenn es Spaß macht!“

Treppen steigen kann auch Spaß machen

Warum ist Gamification für jedes Unternehmen interessant?

Kundenbindung war das Stichwort: Einen Kunden zu halten ist um ein vielfaches billiger, als einen Neukunden zu gewinnen. Können Sie Ihren Kunden so motivieren, dass er sich regelmäßig mit Ihrem Unternehmen/Produkten auseinandersetzt und dabei noch Spaß hat, verringern Sie mindestens die Wechselwahrscheinlichkeit und haben die Chance den Umsatz pro Kunde zu erhöhen.

Wenn etwas Spaß macht, können Sie Menschen sogar dazu bewegen sich mit etwas zu beschäftigen, dass sie normalerweise nicht nutzen würden.

Ein Beispiel für Gamification in der Unternehmenskommunikation

Auch typische Aufgaben im Unternehmen, wie die E-Mail-Korrespondenz, können von Spielelementen profitieren. Aye Moha stellte eine Applikation vor, die die Produktivität bei der Bearbeitung von E-Mails steigert. Bestandteil des Konzepts sind typische Spielelemente: ein Timer, ein Fortschrittsbalken sowie Punkte/Highscores. Gleichzeitig wurde auch der Funktionsumfang des E-Mail-Clients auf die notwendigen reduziert. Das Ergebnis ist eine bessere Fokussierung des Nutzers auf die Aufgabe, damit einher geht die Reduzierung der benötigten Zeit zur Bearbeitung der E-Mails.^[3]

Nur die richtige Umsetzung generiert Mehrwert

Gamification setzt auf den spielerischen Umgang mit einem Produkt, sei es eine Website, Software oder Handy-App. Der spielerische Umgang ist aber nur möglich, wenn einige Dinge gegeben sind:

• Die Bedienung ist intuitiv, d. h. leicht verständlich und einfach zu handhaben.
• Das „Spiel“ darf nicht zu komplex sein, es darf nicht „in Arbeit ausarten“.
• Es dürfen keine Informationsdefizite existieren. Informationen müssen zur richtigen Zeit angeboten werden, wo sie den Nutzer weiter involviert halten, anstatt ihn an falscher Stelle zu überfordern.

Je nach Zielgruppe können die Produkteigenschaften unterschiedliche Ausprägungen besitzen und trotzdem diese Bedingungen erfüllen.

In der Spielebranche wird oft von einer guten Spielbalance gesprochen, wenn die einzelnen Phasen und Bereiche des Spiels ausgewogen sind. Bedeutet: Der Nutzer wird jederzeit motiviert weiterzuspielen und es gibt keine überfordernden Ereignisse, sodass er frustriert das Spiel beendet.

Ein häufig verwendetes Mittel, das eine Überforderung ausschließen soll, ist das schrittweise Heranführen an die einzelnen Bedienelemente. Denken sie an sehr komplexe Software, wie Photoshop. Könnte die Wahrscheinlichkeit der Überforderung während der Erstnutzung nicht reduziert werden, wenn ein Neunutzer erst nach und nach die einzelnen Bedienelemente angezeigt bekommt? In eine ähnliche Kerbe schlägt das PlugIn LevelUp.

Eine gute Balance könnte in Zukunft demnach auch außerhalb der Spielebranche bald als Qualitätsmerkmal gelten.

Wie sichert man den Erfolg eines „gamifizierten“ Produkts?

Erfolg ist viel wahrscheinlicher, wenn derjenige, der es später benutzen wird in den Entwicklungsprozess mit einbezogen wird. Unternehmensintern sind es Mitarbeiter, im B2C-Bereich hingegen Personen aus der Zielgruppe. Usability-Tests und Aktivierungsmessungen sind ein hervorragendes Mittel um Optimierungspotenziale bezüglich der Nutzerfreundlichkeit bzw. dem Spaßfaktor zu ermitteln. Insbesondere wenn thematisch Neuland betreten wird, sollte verstärkt auf die Qualität der erfolgskritischen Merkmale geachtet werden. Wie das Forbes-Magazin feststellt: Immer mehr Entwickler stellen die User Experience an die erste Stelle des Entwicklungsprozess. Oder glauben Sie an den Erfolg eines „Spiels“, das keinen Spaß macht?

Welche Beispiele von Gamification kennen Sie?

Quellen & weiterführende Links

• [1] http://www.forbes.com/sites/sap/2011/03/04/the-gamification-of-sap/
• [2] http://www.taz.de/!74711/
• [3] Moha, Aye (2011): Play Your Way to Productivity – Using Game Design to Achieve „Flow“, in: User Experience – The Magazine of the Usability Profassionals‘ Association, Volume 10, Issue 4, 4th Quarter 2011.
]]> http://www.usabilityblog.de/2011/12/gamification-so-macht-ihr-kunde-was-sie-wollen-%e2%80%93-sogar-freiwillig-und-mit-spas/feed/ 5 http://www.usabilityblog.de/2011/11/mein-erster-besuch-in-der-online-filiale-von-galeria-kaufhof/ http://www.usabilityblog.de/2011/11/mein-erster-besuch-in-der-online-filiale-von-galeria-kaufhof/#comments Tue, 29 Nov 2011 14:17:09 +0000 Steffen Heim http://www.usabilityblog.de/?p=8545 Seit Anfang Oktober ist die Online-Filiale von Galeria Kaufhof nach großen Umbau und Erweiterungsmaßnahmen wieder eröffnet. Grund genug sich den neuen Online-Shop einmal anzusehen.
Denn interessant hören sich einige Informationen zum Re-Launch auf jeden Fall an:
• Das komplette Sortiment aus stationären Filialen kann nun online bestellt werden.
• Echtes Multichannel-Retailing, d.h. Lieferung können zu einer Filiale erfolgen, Retourieren ist direkt in Filialen möglich und ausverkaufte Artikel können in der Filiale online bestellt werden.

Mal schauen, ob die Online-Filiale diesen großen Ansprüchen gerecht wird.

Startseitenvergleich (alt vs. neu)

Startseite bis Oktober 2011	Startseite ab Oktober 2011

Die neue Startseite wirkt insgesamt deutlich strukturierter und übersichtlicher, obwohl mehr Inhalte angezeigt werden. Hierzu trägt insbesondere die Verlagerung der Hauptnavigation in den Header bei, wodurch sich der Content-Bereich über die komplette Seitenbreite erstreckt und Inhalte erhalten mehr Raum zur Entfaltung.
Die Emotionalisierung der Startseite erfolgt über großflächige Bühnenbilder, die automatisch durchlaufen.

Benutzerführung

Layer-Navigation mit sinnvollen Unterteilungen

Beim Überfahren eines Navigationspunkts erscheint ein Layer mit den jeweiligen Unterkategorien. Bei Herren sind dies beispielsweise: Specials, Bekleidung, Accessoires, Schuhe und Top-Marken.
Innerhalb des Layers können auch direkt weiter Untergruppen aufgerufen werden.



Layer-Navigation mit direkten Sortimentseinstiegen

Visuelle Führung

Wählt man jedoch den langen Weg und hangelt sich von einer Kategorieneinstiegsseite über eine Sortimentsseite bis hin zur Übersichtseite fällt auf, dass im Content-Bereich fast ausschließlich auf grafische Elemente zur Nutzerführung zurückgegriffen wird.
Im Content-Bereich werden alle Seiten mit Hilfe von Teaserflächen visualisiert, die auch über die die links positionierte Subnavigation erreichbaren sind.



Klickweg: Herren > Bekleidung > Hemden (Kategorie > Sortiment > Übersicht)

Nutzern stehen viele verschieden Wege bereit um zur gewünschten Produktgruppe zu gelange, je nach dem was ihm lieber ist.




Verortung der aktuellen Position

Direkt unterhalb der Navigation ist der Breadcumb positioniert über den Nutzer sich orientieren und navigieren können.
Lediglich das Highlighting der besuchten Hauptkategorie könnte aus meiner Sicht noch etwas deutlicher sein, der nur leicht dunklere Grau-Verlauf ist hier zu gering.



Highlighting der Hauptnavigation und Breadcrumb

Die Übersichtsseite

Filterangebot in linker Spalte

Die Artikelanzahl der Übersichtsseite kann über sortimentsabhängige Filter weiter verringert werden. Die Bedienung ist eigentlich ohne größere Probleme möglich. Jedoch müssen Nutzer erst einmal erkennen, dass durch erneutes Anklicken einer bereits gewählten Farbe (Mehrfachauswahl) diese wieder abgewählt werden kann.
Hier wäre ein passender Hinweis per Layer beim Überfahren mit der Maus sinnvoll. Denn über den Link Auswahl aufheben werden alle Farben abgewählt.

Als sehr komfortable empfinde das ganz oben in der Filterspalte angebotene Auswahlfeld, über das Nutzer direkt in ein anderes Sortiment wechseln können. Beispielsweise von den Hemden direkt zu Hosen.



Übersichtsseite mit links positionierten filtern

Blickfang auf der Übersichtsseite

Einen sehr effektiven und humorvollen Blickfang bieten die ersten 3 Artikel auf der Übersichtsseite. Die Interaktion dieser Abbildungen in der ersten Reihe miteinander fängt die Blicke gekonnt ein und die Aufmerksamkeit der Nutzer liegt sofort auf den Produkten.
Allerdings habe ich die Animation nach einiger Zeit als etwas störend bzw. nervig empfunden. Denn nach jeder Filterung läuft die Animation neu, auch wenn ich nach einer Farbe gefiltert habe, in der es die 3 animierten Produkte überhaupt nicht gibt.
Grundsätzlich finde ich die Idee zum Einfangen der Aufmerksamkeit richtig gut, jedoch sollte Sie nicht immer neu starten.




Hinweis auf Artikelanzahl

Ein Manko, das mich noch etwas mehr gestört hat, ist das Fehlen eines Hinweises darauf, wie viele Artikel (Hemden) angeboten werden.
Ein solcher Hinweis ist meist für Nutzer recht wichtig um abschätzen zu können, ob weiter gefiltert wird oder nicht. Einen Anhaltspunkt auf die Artikelanzahl liefert meist auch die Blätterfunktion, jedoch wird diese nur am Seitenende angeboten. Nutzer können also nicht sofort erfassen, wie viele Artikel insgesamt angeboten werden.

Die Artikeldetailseite



Detailseite zu einem Artikel

Abbildung und Detailaufnahmen

Zu jedem Artikel werden Abbildungen aus verschiedenen Ansichten angeboten sowie Aufnahmen von Details wie Nähten, Bestickung usw. Per Mouseover-Zoom können die Abbildungen noch genauer betrachtet werden.

Aktuell fehlen bei der Visualisierung von Artikeln noch 360° -Ansichten oder Videos, wie sie bei anderen Online-Shops schon eingesetzt werden.

Informationen zum Artikel

Die Informationen zum Artikel sind umfassend und übersichtlich dargestellt.
Im sofort sichtbaren Seitenbereich werden alle für die Bestellung wichtigen Informationen dargestellt. Nicht mehr erhältliche Größen oder Farben werden durchgestrichen. Ebenso erhält der Nutzer bereits Informationen bzgl. der Versandkosten – aktuell aufgrund der Eröffnungsaktion noch versandkostenfrei – sowie der Payback-Punkte.

Im weiteren Verlauf der Seite wird der näher beschrieben. Auch Hinweise auf die Pflege und Waschung werden angeboten.

Fazit

Aus meiner Sicht ein gelungener Re-Launch und eine deutliche Verbesserung im Vergleich zum alten Auftritt. Der Shop wirkt moderner und strukturierter.

Wenn das Multichannel-Retailing reibungslos funktioniert und die noch fehlende Funktionen (z.B. Videos, Kundenbewertungen, usw.) wie angekündigt in den nächsten Monaten noch eingebunden werden, dann wird die Online-Filiale von Galeria Kaufhof seinen Platz in der Riege der großen Online-Shops finden.

]]> http://www.usabilityblog.de/2011/11/mein-erster-besuch-in-der-online-filiale-von-galeria-kaufhof/feed/ 2 http://www.usabilityblog.de/2011/11/konsistenz-nutzerkontrolle-fehlervermeidung-%e2%80%93-ein-online-shop-unter-der-%e2%80%9eheuristik-lupe%e2%80%9c/ http://www.usabilityblog.de/2011/11/konsistenz-nutzerkontrolle-fehlervermeidung-%e2%80%93-ein-online-shop-unter-der-%e2%80%9eheuristik-lupe%e2%80%9c/#comments Fri, 18 Nov 2011 08:26:21 +0000 Andrea Struckmeier http://www.usabilityblog.de/?p=8387

In meinen letzten Beiträgen habe ich mich dem Thema Usability-Heuristiken gewidmet und regelmäßig eine Heuristik anhand verschiedener Beispiele von Websites erläutert. Im Vordergrund stand dabei die Vorstellung der einzelnen Heuristiken und weniger die einzelnen Websites. Im Normalfall dienen Heuristiken aber natürlich gerade dazu, einzelne Anwendungen zu beurteilen. Genau das möchte ich zum Abschuss meiner Beitragsreihe heute tun – als Beispiel hierfür habe ich den Shop spreadshirt.de mal in vor dem Hintergrund verschiedener Heuristiken unter die Lupe genommen.

Bei spreadshirt.de handelt es sich um einen Anbieter, bei dem der Kunde selbst Produkte (z. B. T-Shirts, Tassen, Mützen) individuell selbst gestalten kann. Ein solcher Konfigurator bietet eine Vielzahl von Möglichkeiten und Funktionalitäten zur individuellen Gestaltung eines Produktes – und diese sollten für die Nutzer bestmöglich zu handhaben sein, damit er auch zum Ziel kommt und die Bestellung abschickt und den Shop bestenfalls wieder aufsucht.

Die Nutzerfreundlichkeit der Seite lässt sich mit Hilfe von Usability-Heuristiken sehr gut beurteilen. Zu diesem Zweck habe ich mir bei der Betrachtung der Seite verschiedene Fragen gestellt, die jeweils eine oder mehrere zusammenhängende Heuristiken näher betrachten.

Macht es mir die Website einfach, Funktionen zu erkennen und zu erlernen? Sind die Funktionen konsistent gestaltet?

Im Grunde beinhalten diese Fragen gleich zwei Heuristiken – die der „Erlernbarkeit“ und der „Konsistenz“. Dass diese beiden Richtlinien oftmals zusammen wirken, wird sich im Folgenden zeigen.

Auf den ersten Blick erscheint die Gestaltung von Spreadshirt sehr übersichtlich und leicht zu erlernen. Oberhalb sind die einzelnen Konfigurationsmöglichkeiten sichtbar aufgeführt (Produkt auswählen, Motiv auswählen, Text hinzufügen und Foto hochladen). Der Nutzer (in diesem Fall: ich) kann sich also direkt beim Einstieg in die Seite einen Überblick über die Möglichkeiten verschaffen, die er hat, um ein Produkt zu gestalten.



Startscreen des T-Shirt-Konfigurators bei spreadshirt.de

Dennoch steckt der Teufel im Detail: Leider sind nicht alle Icons durchgehend mit einem Mouse-Over-Effekt ausgestattet. Da Icons nicht immer unbedingt selbsterklärend sind, bleibt mir also nur „Learning-by-Doing“ übrig – zudem muss ich mir merken, welche Funktion sich hinter welchem Icon verbirgt.

Weiterhin fällt auf, dass das Icon für „Rückgängig“ (linke Abb., oben rechts) fast genauso gestaltet ist wie das Icon, mit dem ich mein Motiv „drehen“ kann (rechte Abb. oben links). Diese Inkonsistenz kann schnell zu Fehlhandlungen des Nutzers führen und erschwert zugleich die Erlernbarkeit, ich mir für das fast gleiche Symbol unterschiedliche Aktionen merken muss, die mit diesem verbunden sind.



Leider fehlt bei den meisten Icons ein Mouse-Over mit entsprechendem Erläuterungstext. Die Nutzer müssen sich die Bedeutung der Symbole durch ausprobieren erschließen. Das Symbol für „drehen“ und „rückgängig“ ist nahezu identisch.

Hilft mir die Website dabei, Fehler zu vermeiden? Unterstützt sie mich bei der Behebung von Fehlern?

Beide Fragen können an dieser Stelle eindeutig mit „Ja“ beantwortet werden. So werde ich z. B. bei der Auswahl eines bestimmten T-Shirt-Typs sofort darauf hingewiesen, dass ich in der Platzierung meines Druckmotivs auf bestimmte Einschränkungen achten muss. So wird von vorne herein vermieden, dass ich das Motiv falsch positioniere.



Hinweis bei Auswahl eines bestimmten T-Shirts: Hier muss ich bei der Positionierung des Motivs aufpassen!

Positioniere ich ein Motiv dennoch außerhalb des Druckbereichs, so erhalte ich unmittelbar eine eindeutige Fehlermeldung, mit der ich sofort eine Korrektur vornehmen kann.



Die Fehlermeldung gibt mir unmittelbar Rückmeldung zu einer Fehleingabe

Ermöglicht die Website mir eine gute Nutzerkontrolle? Kann ich Schritte rückgängig machen oder Aktionen abbrechen?

Auch hier lautet die Antwort beide Male „Ja“.

Der Wechsel zwischen einzelnen Konfigurationsschritten ist jederzeit möglich, ich muss mich nicht an eine vorgegebene Reihenfolge halte und kann z. B. auch erst das Motiv und dann das T-Shirt auswählen. Die Kontrolle über das Vorgehen liegt also bei mir.

Und auch wenn mir ein Fehler unterläuft, ist mein Entwurf nicht verloren: Wie bereits dargestellt, kann ich alle Aktionen über ein Icon rückgängig machen. Und auch Fehleingaben werden gut abgefangen. So klickte ich zum Ausprobieren (es gibt ja kein Mouse-Over) auf ein Icon, dessen Funktion mir unklar war. Es zeigte sich: Dieses war dazu da, meinen bisherigen Entwurf zu löschen und die Konfiguration neu zu starten. Hier erfolgte jedoch vorab eine Abfrage, dank derer ich meinen Entwurf „retten“ konnte.



Glück gehabt: Durch eine Zwischenabfrage bleibt mir mein Entwurf enthalten.

Dieses Beispiel zeigt sehr deutlich, dass die Nicht-Einhaltung einer Heuristik (fehlende Erläuterungen von Icons per Mouse-Over) durchaus durch die Einhaltung einer anderen Heuristik (Bestätigung vor Ausführung einer Aktion) abgefangen oder zumindest abgemildert werden kann.

Kann ich bestimmte Prozesse auf der Seite individualisieren um die häufige Nutzung für mich einfacher zu gestalten?

Auch dies ist durchaus möglich – hierfür muss ich mir allerdings einen Account anlegen. In diesem kann ich meine konfigurierten Produkte speichern und bei Bedarf einfach erneut bestellen. Auch eigene Fotos kann ich hier hinterlegen, um sie beim nächsten Mal nicht noch einmal hochladen zu müssen.

Gesamturteil: Gut, doch nicht ohne Optimierungspotenzial

Die Gesamtbewertung zeigt, dass spreadshirt.de bereits viele der hier betrachteten Heuristiken erfüllt. Dennoch gibt es vor allem bei der Konsistenz und der Erlernbarkeit noch Verbesserungsmöglichkeiten, die die Nutzung der Seite noch einfacher und unkomplizierter machen könnten.

Heuristiken als wichtiger Anhaltspunkt für Bestandsaufnahme

Sicher müssen für eine umfassende Bewertung noch weitere Heuristiken und Richtlinien herangezogen werden. Dies würde jedoch den Rahmen dieses Beitrags sprengen. Es zeigt sich jedoch, dass allein durch die Anwendung einiger wesentlicher Heuristiken schon eine gute Einschätzung der Stärken und Schwächen einer Anwendung getroffen werden kann. Diese Erkenntnisse können dann wiederum in einem nächsten Schritt anhand eines Nutzertests oder oder Expert Reviews noch weiter gewichtet und konkretisiert werden.

]]> http://www.usabilityblog.de/2011/11/konsistenz-nutzerkontrolle-fehlervermeidung-%e2%80%93-ein-online-shop-unter-der-%e2%80%9eheuristik-lupe%e2%80%9c/feed/ 2 http://www.usabilityblog.de/2011/11/ausfullen-von-formularen-und-self-fulfilling-prophecys/ http://www.usabilityblog.de/2011/11/ausfullen-von-formularen-und-self-fulfilling-prophecys/#comments Fri, 11 Nov 2011 08:37:31 +0000 Stefan Meißner http://www.usabilityblog.de/?p=8267 Wurden früher spezifische Produkte zumeist zwischen zwei Menschen, die zur gleichen Zeit am selben Ort waren, gehandelt, so tritt dieses persönliche Verhältnis beim E-Commerce vollends auseinander. Man kann 24 Stunden, an 7 Tagen einkaufen und man kann dies von jedem beliebigen Ort aus tun. Die Vorteile, wie Bequemlichkeit für den Kunden und Effizienzsteigerung für den Händler liegen auf der Hand. Doch wird das ehemals persönliche Verhältnis dadurch zunehmend anonym und abstrakt. Und sicher, es wäre anders nur schwer möglich und wer will schon auf E-Commerce verzichten?

Ich jedenfalls nicht!

Jedoch möchte ich als Kunde nicht nur eine Zahl sein, sondern mich als Person wahrgenommen fühlen. Deswegen mag ich es, wenn mich Newsletter persönlich ansprechen oder Websites mir Produkte empfehlen, die ich wirklich mag. Und ich möchte Websites, die mich darin unterstützen, meine Dinge erledigt zu bekommen.

Den kritischsten Punkt dabei stellen oft die Formularseiten dar. Denn während ich sonst die Seiten vorwiegend passiv rezipiere und abscanne, muss ich beim Ausfüllen der Formulare aktiv werden! Dieser Anstrengung unterziehe ich mich nur, wenn ich muss und schon allein dadurch habe ich eine negative Erwartungshaltung.

Wenn jetzt nur eine Kleinigkeit nicht so funktioniert, wie ich mir das vorstelle, werde ich erst ungehalten und dann schnell frustriert. Denn ich gehe ja schon davon aus, dass Formulare ausfüllen für mich aufwendig werden wird. Aufgrund dieser negativen Einstellung werde ich dann umso fehleranfälliger; lese zu lange Hinweistexte nicht sorgfältig durch, klicke zu schnell und bin etwas hektisch. Der dann möglicherweise auftretende Fehler bestätigt auch prompt mein Urteil: Formulare sind anstrengend!

Das Phänomen ist schon länger bekannt und nennt sich: self-fulfilling prophecy. Erstmalig wurde es vom Soziologen Robert K. Merton in den 40er Jahren des 20. Jahrhunderts gebraucht, populär wurde es aber erst mit Watzlawicks Bestsellern wie “Anleitung zum Unglücklichsein”. Ganz allgemein beschreibt es den Umstand, dass eine Vorhersage sich deshalb erfüllt, da sie erwartet wird und so (unbewusste) Handlungen provoziert, die dann zur Bestätigung der Vorhersage führen.

Beim Ausfüllen von Formularen haben wir es mit demselben Effekt zu tun. Erwartend, dass alles schlecht laufen wird, kommen wir auch nicht einfach durch den Prozess. Zudem erinnern wir uns meist nur an die negativen Momente und verdrängen, was alles gut gelaufen ist.

Gerade deswegen müssen die Prozesse nicht nur gut sein, sondern wirklich einfach, intuitiv,
fehlertolerant und geschmeidig zu durchlaufen sein. Sonst erinnern sich Ihre Nutzer an die wenigen nicht so optimalen Stellen und versuchen es vielleicht beim nächstem Mal bei einem Wettbewerber.

Da wir in unseren Analysen mit Hilfe von m-pathy den echten Website-Besuchern beim Ausfüllen der Formulare über die Schulter schauen, leiden wir oft mit. Daraus ergab sich die Motivation, eine Studie anzufertigen, die die wichtigsten Regeln für einfach auszufüllende Formulare zusammenstellt.



Auf Basis von mehr als 17 empirischen Einzelstudien zur Usability von Webformularen haben wir 10 Regeln formuliert und die Ergebnisse mit unserer langjährigen Praxiserfahrung verknüpft. Die Meta- Studie kann auf www.m-pathy.com/formulare kostenfrei bezogen werden.

]]> http://www.usabilityblog.de/2011/11/ausfullen-von-formularen-und-self-fulfilling-prophecys/feed/ 2 http://www.usabilityblog.de/2011/10/usability-heuristiken-in-der-praxis-lassen-sie-den-nutzer-die-website-steuern-%e2%80%93-nicht-umgekehrt/ http://www.usabilityblog.de/2011/10/usability-heuristiken-in-der-praxis-lassen-sie-den-nutzer-die-website-steuern-%e2%80%93-nicht-umgekehrt/#comments Wed, 19 Oct 2011 09:41:20 +0000 Andrea Struckmeier http://www.usabilityblog.de/?p=8053 Egal ob Onlineshop, Reiseportal oder Website einer Zeitung – oftmals kommen Nutzer auf eine Website, ohne ein klares Ziel zu haben. Sie möchten Stöbern, sich inspirieren lassen oder sich über Neuigkeiten informieren. Gerade wenn Nutzer mit keiner festen Intention auf eine Website kommen, ist es wichtig, dass sie nicht etwa auf vorbestimmten (Irr-)Wegen durch das Angebot geführt werden, sondern Ihre Pfade frei wählen und steuern können. Wie diese „Freiheit“ beim Stöbern realisiert werden kann und warum sie so wichtig ist, soll in diesem Beitrag dargestellt werden.

Stellen Sie sich mal vor …

… Sie sind in der Stadt unterwegs und betreten Ihr Lieblingsgeschäft. Gerade ist vieles reduziert und Sie schlendern durch den Laden, schauen sich erst einmal alles an und verschaffen sich einen Überblick. Nach einer Weile entscheiden Sie, noch einmal zu den schönen Pullovern neben dem Eingang zurückzukehren. Doch da steht plötzlich der Verkäufer hinter Ihnen und sagt: „Nein, zurück können Sie jetzt mehr.“ Undenkbar, oder? Genau wie Zeitung, bei der Sie nur einmal in eine Richtung durchblättern können. Würde Ihnen das Spaß machen? Wohl eher nicht…

Wenn wir im Alltag irgendwo stöbern oder uns inspirieren lassen, macht doch vor allem eines das Vergnügen aus: Dass wir die Freiheit haben. Nämlich die Freiheit, selbst zu bestimmen, was wir uns anschauen, wie lange wir uns mit etwas beschäftigen und wie wir dabei vorgehen. Das sollte doch online dann eigentlich genauso sein, oder?

Aber was bedeutet „Freiheit“, wenn man online stöbert?

In erster Linie sollten Inhalte steuerbar sein. Das heißt, Interaktionselemente sollten so beschaffen sein, dass sie den Nutzern die Möglichkeit bieten:

• Ihre „Wege“ auf der Seite frei zu bestimmen
• sich einen Überblick zu verschaffen
• sich jeweils so viel Zeit wie gewünscht nehmen zu können
• auch mal die Richtung zu ändern oder gar zum Anfang zurückzukehren.

Das klingt zunächst simpel, ist aber längst nicht selbstverständlich.

Oftmals glänzen Interaktionselemente durch Abwesenheit, wie das Beispiel von Aldi Süd Reisen zeigt. Hier hat der Nutzer auf der Startseite die Möglichkeit, verschiedene Angebote durchzublättern. Ganz wie im Katalog, also Seite für Seite. Bei näherem Hinsehen zeigt sich jedoch, dass etwas ganz Entscheidendes fehlt: Die Möglichkeit, wieder zurück zu blättern. Für den Nutzer geht es in diesem Falle nur vorwärts – wenn ihm auffällt, dass das Angebot für die Karibikreise auf der vorherigen Seiten doch ganz interessant war, hat er keine Chance mehr, schnell wieder dorthin zu gelangen.



Bühne von Aldi (Süd) Reisen: Blättern ist nur in eine Richtung möglich

Besser: Steuerelemente und Übersichten integrieren

Eine gelungene Alternative aus einem anderen Bereich bietet die Website der Tageszeitung „Der Westen“. Die hier integrierte Bühne am Anfang erfüllt sehr viele der o.g. wichtigen Aspekte, damit die Nutzer Spaß am Stöbern haben: In der Bühne auf der Startseite sind oberhalb sämtliche Themenbereiche aufgelistet (Überblick verschaffen), der automatische Durchlauf der Themen kann mit Hilfe der Start/Pause-Buttons angehalten werden (Zeit nehmen) und der Nutzer kann einzelne Teaser bzw. Themen individuell anklicken (freie Wahl der Wege, Ändern der Richtung).



Bühne von „Der Westen“: Steuerelemente für die Animation und übersichtlicher Themenüberblick

Ein weiteres Positivbeispiel findet sich z. B. bei sheego.de. Hier können Nutzer online den Printkatalog durchblättern. Dabei haben Sie direkt vier Möglichkeiten der Navigation: 1) Über die Blätterfunktion Seite für Seite, 2) eine Navigation unterhalb (Schieberegler) sowie 3) oberhalb (Buttons und Seiteneingabe) und über 4) die Navigation rechts.



Blätterbarer Katalog bei sheego.de mit einer Vielzahl an Steuerelementen

Die Nutzer können individuell entscheiden, wie sie die Funktion steuern möchten und erhalten zudem einen Überblick über die Inhalte (Navigation rechts) und können wiederum frei vor- und zurückspringen. Auch hier macht das Stöbern Spaß, da der Nutzer trotz eines großen Informationsangebotes nie den Überblick verliert und selbst entscheiden kann, was er sich wie und wie (lange und oft) anschauen möchte.

Nutzerkontrolle und Steuerbarkeit – nicht nur beim Stöbern wichtige Aspekte

Selbstverständlich ist es nicht nur beim Stöbern wichtig, dass es in erster Linie der Nutzer ist, der seine Aktionen auf der Website steuert (und nicht umgekehrt). Überall dort, wo Nutzer mit einer Website oder Anwendung interagieren, sollten sie das Gefühl haben, dass sie es sind, die sagen „wo es langgeht“. Welche Interaktionselemente Nutzer erwarten ist dabei unterschiedlich – je nach dem, ob es sich um einen Onlineshop oder ein Reiseportal handelt und wie die Zielgruppe aussieht. Welche Interaktions- und Steuerelemente hier jeweils vorausgesetzt werden, muss daher natürlich gesondert erhoben werden – beispielsweise im Rahmen einer Anforderungsanalyse.

Dennoch veranschaulicht meiner Meinung nach gerade das „Stöbern“ sehr schön, wie wichtig die individuelle Steuerbarkeit von Anwendungen für Nutzer ist: Selbst der Nutzer sich eigentlich treiben und inspirieren lassen möchte, so möchte er doch immer noch selbst bestimmen, in welche Richtung und mit welchem Tempo. Denken Sie mal darüber nach, wenn Sie das nächste Mal eine Zeitung oder einen Katalog durchblättern…

]]> http://www.usabilityblog.de/2011/10/usability-heuristiken-in-der-praxis-lassen-sie-den-nutzer-die-website-steuern-%e2%80%93-nicht-umgekehrt/feed/ 1 http://www.usabilityblog.de/2011/09/tradition-vor-moderne-wie-lassen-sich-radio-horer-online-uberzeugen/ http://www.usabilityblog.de/2011/09/tradition-vor-moderne-wie-lassen-sich-radio-horer-online-uberzeugen/#comments Fri, 23 Sep 2011 10:00:32 +0000 Anja Weitemeyer http://www.usabilityblog.de/?p=7640

Begleitmusik durch das Radio kann sicher noch nicht als Auslaufmodell bezeichnet werden, immer größerer Beliebtheit erfreuen sich Webradios. Für uns Grund genug, einmal 3 Radiostationen unter die Lupe zu nehmen und zu überprüfen, wie diese sich im World Wide Web präsentieren.

Mittels des eResult FUX-Analyzers beurteilten je 100 Personen eine Website eines Radiosenders. Ziel dieses Vergleichs war es zum einen, einen Gewinner zu küren, aber auch Erfolgsfaktoren abzuleiten, die auch auf andere Branchen übertragbar sind.

Die Webseiten wurden nach ausgiebiger Nutzung auf den Dimensionen Usability, Joy of Use und nicht-instrumentelle Qualitäten wie Motivation, Ästhetik und Symbolik bewertet. Weiterhin wurden die Wiedernutzungs- und die Weiterempfehlungsabsicht erfragt.

Dabei wurde der von eResult entwickelte FUX-Analyzer Fragebogen eingesetzt, der insgesamt 25 Bewertungsfragen aufweist. Das Messinstrument wurde auf Basis von Expertenworkshops sowie Studien mit Webnutzern und Online-Shoppern entwickelt und über einen Zeitraum von zwei Jahren bzw. 20 Studienprojekten optimiert.
Nun aber zu den Ergebnissen:
1. Platz: swr3.de
2. Platz: Radio Fritz
3. Platz: MDR Sputnik

SWR3.de geht als klarer Sieger aus dem Vergleich in allen Ebenen hervor. Der klassische Startseitenaufbau verschafft der Seite Wettbewerbsvorteile. Durch die auf das wichtigste beschränkte horizontale Navigation findet man sich sehr einfach zu Recht. Statt einer gewöhnlichen Layernavigation, wie man sie z.B. von Online-Shops gewöhnt ist, verrät hier eine Sprechblase, was sich hinter dem gewähltem Navigationspunkt verbirgt. Ein nettes, spielerisches Detail.



Gewinner swr3.de – Startseite: Sprechblase in Navigation

Eine Flash-Bühne sorgt für die notwendige Lebendigkeit ohne zu überfordern. Drei aktuelle Themen laufen durch. Ebenfalls prominent platziert: Die aktuelle Sendung nebst aktuell laufendem Song – dieser wird zusätzlich oberhalb des Headers genannt, ebenso wie die aktuellen Informationen zu Verkehr und Wetter.

Insgesamt wurde viel Lob zum attraktiven, unaufdringlichen Layout geäußert, z.B. „jung, frisch, übersichtlich, fröhlich, leicht, kreativ“. Vermutlich eine Wohltat im immer unübersichtlicher werdenden Dschungel des Internet.

Radio Fritz stellt die Musik unverkennbar in den Vordergrund. Mit einer Timeline lassen sich vergangene und kommende Titel aufrufen nebst Informationen dazu. Der verwendete Schieberegler wird bei Seitenaufruf als zentrales Element kurz erklärt, so lässt sich elegant die Ladezeit überbrücken. Der gesamte Part basiert auf Flash, dies stößt nicht bei allen Nutzern auf Gegenliebe.



fritz.de – mittels Schieberegler navigiert man horizontal durch die Zeit

Die Seite scheint jedoch für größere Auflösungen optimiert: Bei 1280x1024px erhält man ein schönes Vollbild der Seite ohne zu scrollen – dann wirkt auch das Design stimmig, was bei kleineren Bildschirmen eher anstrengend ist.

Verwirrend ist der Zusammenhang zu rbb-online.de. Oberhalb der Fritz-Navigation wird nämlich diese dargeboten nebst Logo und schwupps hat man die eigentliche Seite verlassen. Die Navigation von Radio Fritz scheint auf Insider zugeschnitten zu sein, neue Nutzer tun sich eher schwer und werden zum Stöbern quasi gezwungen.

Gelangt man in die nächste Ebene, so erhält man eine weitere Navigation. Eher gewöhnungsbedürftig, aber passend, wenn man sich länger in einem Bereich aufhält und nicht viel hin- und her-navigieren möchte.



fritz.de – Eine neue horizontale Navigation (hier sogar zweizeilig) baut sich auf.

Platz 3 unserer getesteten Radioseiten ist MDR Sputnik. Die gesamte Seite kommt eher düster daher mit dem dunklen, unruhigen Hintergrund, der leider die Lesbarkeit erschwert. Die Auflösung des Motivs offenbart sich nur bei großen Bildschirmen: Es ist Wasser, das in der Sonne schimmert. Ein schönes Urlaubsmotiv, hier allerdings eher hinderlich.

Der Nutzer muss sich zunächst zwischen zwei Navigationsbereichen entscheiden. Im oberen Seiten-Bereich werden verschiedene Channel nach Genre angeboten. Die weiteren Seiteninhalte werden in der linken Spalte angeboten.



Dunkel und unruhig kommt die Startseite von MRD Sputnik daher

In tieferen Ebenen wirkt die Seite sehr kleinteilig. Vier Spalten zusätzlich zur Navigation überfordern den Nutzer. Das Highlighting des aktuellen Standortes ist misslungen und kann nur mit Mühe erkannt werden.



Fazit:

Groß, laut, aggressiv – hiermit kann man bei den Radio-Hörern nicht punkten. Eine übersichtliche Seitenstruktur und ein dezentes Farbkonzept sprechen die Nutzer an. Der schnelle Zugriff auf den Live-Stream, Informationen zu den Künstlern oder Events schnell auffindbar – so erreicht man Begeisterung und zufriedene, wiederkehrende Gäste.

]]> http://www.usabilityblog.de/2011/09/tradition-vor-moderne-wie-lassen-sich-radio-horer-online-uberzeugen/feed/ 0 http://www.usabilityblog.de/2011/09/usability-heuristiken-in-der-praxis-machen-sie-deutlich-wo-das-problem-liegt/ http://www.usabilityblog.de/2011/09/usability-heuristiken-in-der-praxis-machen-sie-deutlich-wo-das-problem-liegt/#comments Wed, 21 Sep 2011 10:00:55 +0000 Andrea Struckmeier http://www.usabilityblog.de/?p=7610

Irren ist ja bekanntlich menschlich. Das gilt auch (oder vor allem) dann, wenn Menschen mit dem Computer interagieren und z.B. eine Website nutzen. Wer wesentliche Usability-Heuristiken beachtet, der kann dafür sorgen, dass die Fehlerquote bei der Nutzung einer Website deutlich geringer ausfällt. Ganz vermeiden lassen sich Fehleingaben oder falsche Aktionen durch die Nutzer dennoch nicht. Umso wichtiger ist es, Fehlermeldungen so gestaltet werden, dass sie dem Nutzer auch wirklich weiterhelfen. Wie das gehen kann, das möchte ich in diesem Beitrag anhand einiger Beispiele erläutern.

Wo ist denn nun das Problem?

Das ist eine Frage, die Sie sich beim Lesen der einen oder andere Fehlermeldung sicherlich auch schon einmal gestellt haben. In den meisten Fällen gibt es hierfür zwei wesentliche Gründe:

1) Es erscheint zwar eine Fehlermeldung, aber diese ist aktuell gar nicht im Fokus der Aufmerksamkeit des Nutzers

Ein Beispiel hierfür findet sich z.B. im Online-Banking-System der Commerzbank. Wenn sich ein Nutzer anmelden möchte, obwohl seine vorherige Session noch aktiv ist, so erhält er die Meldung, dass er sich erst in ein paar Minuten erneut anmelden kann. Alles ganz prima erklärt in der Fehlermeldung – allerdings ist diese so weit unten positioniert, dass die die meisten Nutzer sie voraussichtlich erst wahrnehmen, nachdem sie ihre Daten ein zweites Mal erfolglos in die Eingabefelder eingetragen haben. Der Grund: Der Fokus liegt in diesem Fall eher auf den Eingabefeldern. Beim Fehlschlagen der Anmeldung werden viele Nutzer den Fehler wahrscheinlich zunächst bei sich suchen („Hab ich mich wohl vertippt, nochmal versuchen“) aber nicht aktiv nach einer Fehlermeldung schauen. Eine Positionierung neben oder direkt unterhalb der Eingabefelder wäre in diesem Falle ratsam.



2) Die Fehlermeldung ist zwar sichtbar, sie beschreibt das Problem nicht klar genug oder beinhaltet zu wenig Informationen.

Dies gilt zunächst für all diejenigen Fehlermeldungen der Art „Error 456 – [danach irgend ein englischer Warnhinweis mit drei !!!]“. Solche Fehlermeldung kommen glücklicherweise heute nicht mehr allzu oft vor – was nicht bedeutet, dass alle Fehlermeldungen ohne weiteres verständlich sind.
Dies gilt z.B. für den Direktbestellschein auf neckermann.de. Gibt man hier eine Bestellnummer ein, die nicht existiert, so erscheint nach Absenden des Formulars lediglich folgende Information:



Abgesehen davon, dass hier völlig unklar ist, warum der Artikel nicht gefunden wurde (ausverkauft, falsche Nummer?), bekommen die Nutzer auch keinen konstruktiven Lösungsvorschlag für das Problem. Zudem erscheint die Meldung erst, nachdem der Nutzer alle Produkte in den Bestellschein eingegeben hat – er kann nicht sehen, welcher Artikel der Liste es eigentlich ist (Ist es z.B. der Schuh, den ich unbedingt bestellen wollte, oder das T-Shirt, auf das ich auch verzichten kann?). Der Nutzer muss nun also zunächst den Warnhinweis „schließen“, um wieder auf das Formular zu gelangen. Hier muss er dann das entsprechende Feld suchen, noch einmal die Bestellnummer heraussuchen und abgleichen, wo genau eigentlich der Fehler liegt.

Es geht auch verständlicher

Besser ist da z.B. die Fehlermeldung im Direktbestellschein von otto.de. Sofort nach der Eingabe der Artikelnummer erscheint eine Rückmeldung, wenn eine falsche Eingabe getätigt wurde. Der Nutzer kann direkt überprüfen, ob er sich ggf. verschrieben hat. Weiterhin enthält die Meldung auch einen Hinweis zur Fehlerbehebung.



Ein weiteres positives Beispiel für eine hilfreiche Fehlermeldung findet sich auf posterjack.com. Hier kann der Nutzer eigene Bilder hochladen, um diese als Poster ausdrucken zu lassen. Dabei kann es vorkommen, dass die Auflösung des Bildes nicht hoch genug ist, um es auf Posterformat zu vergrößern. Der entsprechende Hinweis hierzu ist sehr eindeutig und beinhaltet alle wichtigen Kriterien für eine gute Fehlermeldung:

• genaue Beschreibung des vorliegenden Problems und
• Vorschläge, wie der Nutzer das Problem beheben kann
• deutliche visuelle Gestaltung
• Nähe zum aktuellen Fokus des Nutzers
• zeitnahe Rückmeldung, dass ein Fehler vorliegt (direkt nach dem Upload des Bildes)


Fazit

Fehlermeldungen müssen den Nutzer sowohl inhaltlich also auch „optisch“ bei der Fehlererkennung und –behandlung unterstützen. Nur so können Unsicherheiten und Nutzungsabbrüche vermieden werden. Die Verständlichkeit von Fehlermeldungen kann beispielsweise durch eine expertenbasierte Evaluation oder einen Usability-Test im Labor überprüft werden.

]]> http://www.usabilityblog.de/2011/09/usability-heuristiken-in-der-praxis-machen-sie-deutlich-wo-das-problem-liegt/feed/ 0 http://www.usabilityblog.de/2011/09/das-warten-hat-ein-ende-behordengange-schnell-und-bequem-online-erledigen/ http://www.usabilityblog.de/2011/09/das-warten-hat-ein-ende-behordengange-schnell-und-bequem-online-erledigen/#comments Fri, 09 Sep 2011 07:00:03 +0000 Elske Ludewig http://www.usabilityblog.de/?p=7470

Das Thema eGovernment gewann in letzter Zeit aus verschiedenen Gründen immer mehr an Bedeutung. Zum Einen wird nach Wegen gesucht, Verwaltungsprozesse effizienter zu gestalten um Ressourcen zu sparen und städtische Dienstleistungen kundenfreundlicher zu machen. Zum anderen steigen auch die Anforderungen der Bürger. Aus anderen Kontexten sind sie es gewöhnt, dass Kommunikation zunehmend digital unterstützt ist und die sich rasch entwickelnden technischen Möglichkeiten effektiv genutzt werden.

Diese Anforderungen werden zunehmend auch an städtische Behörden herangetragen und jede Möglichkeit, lange Wartezeiten in Ämtern zu umgehen, wird dankbar angenommen. Die nötigen Umstellungen innerhalb der Stadtverwaltungen, die ihren Bürgern moderne Bürgerservices anbieten, gehen unterschiedlich schnell voran. Einige Städte ermöglichen bereits den Zugang zu umfangreichen eGovernment-Portalen, andere bieten immerhin Formulardownloads oder auch Online-Terminvereinbarungen an. Doch entscheidend für den Erfolg derartiger Angebote ist natürlich auch ihre Bedienbarkeit. Versteht der Nutzer eine Funktion nicht oder treten Probleme bei der Nutzung auf, sinkt die Motivation sich damit eingehender zu beschäftigen und schnell werden Alternativen gesucht. Letztendlich greift er vielleicht doch wieder zum Telefonhörer und die Investition in das Online-Angebot ist in Gefahr.

Schauen wir uns deshalb einige positive Beispiele an und prüfen, welche Usability-Regeln eingehalten werden.

So umgeht man die Tücken einer alphabetischen Sortierung

Viele Städteportale listen ihre Dienstleistungen alphabetisch auf. Das ist auch sicherlich ein sinnvoller Weg, die Fülle von Themen unterzubringen. Der Nachteil ist allerdings, dass es zu vielen Aufgaben verschiedene Begriffe gibt, nach denen der Nutzer sucht. So meinen „Umweltplakette“ und „Feinstaubplakette“ vielleicht dasselbe, fangen aber mit unterschiedlichen Buchstaben an. Es besteht die Gefahr, dass der Nutzer das Gesuchte nicht findet und unnötige Umwege gehen muss. Abhilfe schafft man bei der Stadt Bremen: Auch alternative Begriffe werden angeboten und es wird zur jeweils „richtigen“ Leistung verlinkt. Der Nutzer wird also sehr gut unterstützt, es wird eine flexible und effiziente Nutzung ermöglicht:



In Bremen denkt man sich in den Nutzer hinein: Auch alternative Bezeichnungen sind aufgenommen und es wird entsprechend verlinkt.

Zum Termin mit wenigen Klicks

Online-Terminvereinbarungen können Behörden und ihren Kunden das Leben leichter machen. Damit alles reibungslos klappt, muss der Nutzer das Procedere verstehen und soll möglichst nicht „aus Versehen“ einen falschen Termin wählen. Besonders wichtig ist hier als die Regel Fehler vermeiden. Recht gut gelungen ist dies in Karlsruhe. Die Auswahl eines Termins erfolgt in zwei Schritten: Zunächst wählt man einen Tag, dann eine Uhrzeit. Zur Unterstützung ist dies kurz erklärt. Sehr wichtig ist hier auch das Vorhandensein einer verständlichen Legende, da die Auswahl der Uhrzeit ja über farbige Felder erfolgt (und nur freie Termine sind klickbar/der Maus-Zeiger ändert sich, falls die Farben eine Barriere darstellen sollten):



Übersichtliche Terminvereinbarung in Karlsruhe: Der Nutzer sieht sofort, zu welchen Zeiten freie Termine zu haben sind.

Hilfe in Formularen muss nicht im Chaos enden

Wenn es um Behördengänge geht, geht es oft um Formulare. Die Stadt Stuttgart verfügt bereits über ein umfangreiches eGovernment-Portal, welches zum Beispiel das Ausfüllen von Anträgen oder komplexere Suchvorgänge ermöglicht. Diese wurden jedoch wie in folgendem Beispiel sehr gut auf den Online-Kontext angepasst. So wird eine Fortschrittsanzeige angeboten und die einzelnen Felder sind sinnvoll gruppiert. Besonders schön ist hier die dynamische Hilfe. Sie erklärt immer denjenigen Punkt, mit dem sich der Nutzer gerade beschäftigt. Alle übrigen spezifischen Hilfetexte sind ausgeblendet. Wir haben es als mit einem ästhetischen Design zu tun, es werden Fehler vermieden und wir finden Hilfe & Dokumentation:



Sehr gute Umsetzung von Hilfe und Struktur im Online-Formular des eGovernment-Portals der Stadt Stuttgart

Die Beispiele zeigen, dass Behördengänge im Internet sehr einfach und übersichtlich sein können. Wird auf nutzerfreundliche Gestaltung geachtet, finden die Angebote bei vielen Bürgern Anklang und sparen Zeit auf Seiten der Stadtverwaltungen. Um den Erfolg einer Anwendung möglichst frühzeitig zu beeinflussen, empfehlen sich auch hier Methoden des User Centered Design, wie zum Beispiel Prototypen-Tests.

]]> http://www.usabilityblog.de/2011/09/das-warten-hat-ein-ende-behordengange-schnell-und-bequem-online-erledigen/feed/ 1