Die Grundfarbe der Seiten hat im Laufe der Zeit an Dominanz verloren, stattdessen wird inzwischen häufig mit sehr hellen Hintergründen gearbeitet. Auf große, dunkle Flächen wird weitgehend verzichtet. Neben der Grundfarbe kommen außerdem häufiger als früher noch weitere Farben als Kontraste zum Einsatz. Beispiele dafür sind die bunten Kategorieneinstiege bei RWE oder die farbigen Flächen in der Bühne der Allianz.

Unternehmensauftritt RWE

Unternehmensauftritt Allianz

Weiterhin ist eindeutig ein Trend zu größeren Bildflächen erkennbar.

Ein großer Teil der Unternehmen setzt inzwischen auf ein großflächiges Bild im oberen Bereich der Startseite oder auf Bühnen, die an dieser Stelle dank Flash verschiedene Bilder im Wechsel zeigen.
Aber nicht nur die Größe der Bildflächen hat sich verändert. Hatten die früher vorherrschenden schmalen Banner noch eher dekorativen Charakter mit einer Mischung aus Gebäudeansichten und Szenen aus dem Arbeitsumfeld, so transportieren die Bilder jetzt wesentliche Inhalte.
Häufig sind deshalb auch Texte in die Bilder integriert oder sie dienen sogar als Einstieg in ein Video, welches weitere Informationen vermittelt.
Deutlich wird dieser Trend beispielweise bei BASF und Daimler.

Unternehmensauftritt BASF

Unternehmensauftritt Daimler

Diese beiden Trends sind bei Corporate Websites durch deren in erster Linie repräsentativen Charakter besonders deutlich zu erkennen, gelten aber auch für diverse andere Webangebote.

Sind Ihnen noch weitere, branchenübergreifenden Trends im Webdesign ins Auge gefallen?

Zum Projekt „Design im Wandel“:
eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen, unter anderem auch von acht Nachrichtenmagazinen. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

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.

Sie wünschen sich vielfältige und herausfordernde Aufgaben? Dann sind Sie bei STRATO genau richtig.

Wir gestalten die Zukunft des Internets – innovativ, dynamisch, leistungsstark.
Als Europas zweitgrößter Anbieter von Internet-Speicherplatz und Web-Anwendungen genießt STRATO das Vertrauen über einer Million Kunden in sechs europäischen Ländern. In unseren zwei TÜV-zertifizierten und klimaneutralen Hochleistungsrechenzentren in Berlin und Karlsruhe hosten wir vier Millionen Domains. STRATO gehört zu der Deutschen Telekom AG und zählt zu den begehrtesten Arbeitgebern in Deutschland. Wir bieten faszinierende Perspektiven in einem international expandierenden IT-Unternehmen und spannende Projekte in professioneller sowie angenehmer Arbeitsatmosphäre.

Ihr Verantwortungsbereich

• visuelle Umsetzung und Produktion von Navigations- und Interaktionskonzepten
• Pflege und Weiterentwicklung des STRATO Styleguides sowie Unterstützung bei der Erstellung von interaktiven Prototypen
• Enge Zusammenarbeit mit Produktmanagement und dem Scrum-Entwicklerteam sowie Beratung bei Fragen zum Visual Design
• Vertretung der Nutzersicht und kontinuierliche nutzerzentrierte Weiterentwicklung unserer Produkte
• Unterstützung bei der Standardisierung von Interaktionskonzepten sowie der Analyse und Dokumentation von Anwenderzielen und Arbeitsabläufen (Use Cases)
• Unterstützung bei der Vorbereitung, Durchführung und Auswertung von qualitativen und quantitativen User Research-Methoden und Ableitung von konkreten Handlungsempfehlungen

Ihre Persönlichkeit

• Abgeschlossenes Hochschulstudium oder Vergleichbares
• Erfahrungen in der Umsetzung von Styleguides und der strategischen Markenentwicklung
• Fundierte praktische und theoretische Kenntnisse in der Erstellung von visuellen Designs
• Ausgeprägte Kreativität in Verbindung mit hohem Qualitätsanspruch
• Sicherer Umgang mit Tools wie z.B. Adobe Photoshop, Adobe Illustrator, Adobe Fireworks
• Sehr gutes Abstraktionsvermögen und analytische Fähigkeiten sowie Liebe zum Detail
• Spaß an interdisziplinärem Arbeiten mit Produktmanagern, Konzeptern, Designern und Technikern
• Sehr gute Kommunikationsfähigkeiten
• Erste Kenntnisse mit User Experience Research-Methoden
• Erfahrung mit agiler Produktentwicklung erwünscht

Ihre Perspektiven

Wir suchen Mitarbeiterinnen und Mitarbeiter mit Neugier, Innovationsgeist und Tatkraft – Menschen, die eigenverantwortlich und serviceorientiert handeln. Kompetenten und engagierten Mitarbeiterinnen und Mitarbeitern bieten wir viel Raum für eigene Ideen, ein angenehmes Betriebsklima sowie eine leistungsgerechte Vergütung.

Bitte richten Sie Ihre vollständigen Bewerbungsunterlagen unter Angabe Ihres möglichen Eintrittstermins und Ihrer Gehaltsvorstellung an:

Anschrift: STRATO AG, Abteilung Personal, Pascalstraße 10, 10587 Berlin

oder per E-Mail bewerben: personal@strato.de

Chris Goward von widerfunnel beschäftigt sich mit einem anderen eCommerce-Thema, welches mindestens genauso spannend ist: Rotating Offers – the Scourge of Home Page Design Die Gestaltung der Startseite ist bei nahezu allen Shopbetreiber ein großes Politikum. „Was kommt drauf, wie viele Angebote können wir in der interaktive Bühne innerhalb kürzester Zeit bringen? Wir müssen emotionalisieren, informieren, …!“ Chris beschreibt einige Nutzungsszenarien / Erwartungen eines Besuchers, der auf die Startseite kommt und die Angebote innerhalb der interaktiven Bühne durchrotieren sieht. Regt zum Nachdenken an und erklärt, warum auf so manchem Shop mehr als 80% des Traffics auf der Startseite sich auf Suche und Navigation verteilt.

Landingpage-Optimierung ist und bleibt ein großes Thema. Anbei einmal zwei sehr interessante Artikel mit vielen best pracises aus dem unbounce-Blog; auch speziell zum Thema Videoeinbindung auf Landingpages:

• Your Landing Page Sucks! Here are 10 Examples That Don’t…
• 10 Landing Pages that are Crushing it with Video

Viel Spaß beim Lesen.

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

Beispielweise stellen immer mehr Flughäfen die Übersicht der aktuellen Starts und Landungen in den Vordergrund und ermöglichen so einen schnellen Einblick in die aktuelle Situation im Flugverkehr. Am Beispiel Frankfurt ist das deutlich zu erkennen.

Website Flughafen Frankfurt

Aber nicht nur die aktuelle Situation auf dem Flughafen zählt, auch wie man überhaupt dort hin kommt ist wichtig. Deshalb bekommen auch Informationen zur Anreise und zu den Parkmöglichkeiten einen immer größeren Raum auf den Seiten.

Es ist jedoch nicht nur der Trend zu mehr praktischen Informationen erkennbar. Auch die Buchungsmöglichkeiten haben auf den Flughafenseiten in den letzten Jahren zunehmend an Bedeutung gewonnen. Ein wichtiges Indiz ist die immer prominenter dargestellte Buchungsmaske, zu sehen beispielweise auf der Seite des Dresdener Flughafens.

Website Flughafen Dresden

Neben der Suchmaske unterstützt auch der vermehrte Einsatz von Bildern, die Urlaubsziele oder Szenen aus Privatreisen zeigen diesen Trend, wie die Beispiele der Flughäfen Hamburg und Hannover zeigen.

Website Flughafen Hamburg

Website Flughafen Hannover

Letztendlich lässt sich auch dieser Trend hin zu Buchungsmöglichkeiten für Privatreisende der Orientierung an den Bedürfnissen der Kunden zuordnen. Aber auch der Wunsch, sich das Zusatzgeschäft der direkten Buchungen nicht entgehen zulassen ist sicher ein treibender Faktor dieses Trends.

Wir dürfen gespannt sein, ob sich die Websites von Flughäfen noch mehr als bisher als Reisevermittler positionieren. Oder was meinen Sie, wo die Reise hingeht?

Zum Projekt „Design im Wandel“:

eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen, unter anderem auch von acht Nachrichtenmagazinen. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

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.

Sicher haben einige von Ihnen schon bemerkt, dass Usabilityblog.de nun auch einen Stellenmarkt anbietet. Der Wettbewerb um die besten Mitarbeiter wird sich in Zukunft noch weiter verschärfen, vor allem wenn man Experten aus o.g. Bereichen sucht. Viele Unternehmen bzw. unsere Blogbesucher, suchen händeringend nach passenden Mitarbeitern oder auch selbst nach einem neuen Job.
Wer neue Mitarbeiter oder einen neuen Job sucht, schaut meistens bei einschlägigen Jobportalen (wie z.B. Jobware, Stepstone), in Tageszeitungen und Wochenmagazinen (wie z.B. FAZ, Zeit) und im Web, z.B. auf Blogs, XING, in Facebook usw.

Damit Sie gleich am richtigen Ort suchen, bieten wir nun für ausschreibende Unternehmen als auch für Jobsuchende eine effiziente Alternative.

Über unseren Blog können Sie potenzielle Mitarbeiter direkt ansprechen, vor allem auch solche, die noch nicht direkt auf Jobsuche sind, allerdings nicht gegenüber einer neuen Herausforderung in einer Top-Position abgeneigt wären.

Und diese Vorteile bietet eine Stellenanzeige über unseren Blog:

• Sie erreichen mehr als 75.000 Blog-Besucher pro Monat; 90% unserer Blognutzer besuchen den Blog mindestens einmal pro Woche, sehr viele auch deutlich häufiger.
• Direktansprache von Experten, deren Arbeitsbereiche größtenteils in der Konzeption, Beratung, Design oder auch im Bereich Marketing und Informationstechnologie liegen. Schauen Sie selbst: (PDF: Nutzerstrukturdaten Usabilityblog.de)
• Ihr Unternehmen wird als lukrativer Arbeitgeber wahrgenommen und präsentiert.
• Und: Sie schalten eine Stellenanzeige derzeit noch zum vergünstigten Kennlernangebot!

Dies haben bereits Unternehmen wie SportScheck, HRS oder SirValUse erkannt. Sie haben schon bevor unser Stellenmarkt an den Start ging, Stellenanzeigen über unseren Blog veröffentlicht.

Haben wir Ihr Interesse geweckt? Wir würden uns freuen, wenn auch Sie unseren neuen Stellenmarkt nutzen.

Weitere Informationen zur Schaltung eines Stellenangebots auf Usabilityblog.de gibt es unter: http://www.usabilityblog.de/stellenmarkt/informationen/.

Weitere individuelle Lösungen oder Pakete sind allerdings auf Anfrage auch schon jetzt möglich!

Meine These war – Sie erinnern sich sicherlich:
Unscharf dargestellte Elemente auf Webseiten ziehen die Aufmerksamkeit von Nutzern schnell auf sich!

Hält die These einer Prüfung stand?

Angeregt von der Diskussion hier im Blog, führten wir eine Studie durch. 20 Personen, Erstnutzer des Mirapodo Online-Shops, betrachteten 10 Sekunden lang die Startseite mit dem unscharf dargestellten Seitenelement. Während der Seitenexploration wurde der Blickverlauf mit Hilfe eines Eyetrackers im Usability-Lab gemessen.

Und siehe da …

Das unscharfe Seitenelement zieht die Aufmerksamkeit auf sich, jedoch erst im Zeitintervall von 7-10 Sekunden.

In der frühen Orientierungsphase – den ersten 2 und auch den ersten 5 Sekunden – bekommt das Element dagegen keine bzw. kaum Aufmerksamkeit.

Aufmerksamkeitsverteilung im Zeitintervall 0-2 (linkes Bild) bzw. 0-5 (rechtes Bild) Sekunden.

These damit nicht bestätigt!
Schade. Aber neue Erkenntnisse und Fragestellungen gewonnen:

1. Es lohnt sich in diesem Bereich weiter zu forschen:
   Wie ändern sich die Daten, wenn das unscharfe Seitenelement animiert wird? Zunächst erscheint es unscharf, mit der Zeit wird es wieder klar dargestellt. Ohne Unschärfe.
   Diese Art der Animation könnte Aufmerksamkeit anziehen. Vielleicht.
2. Die Daten basieren auf einer Messung mit Personen, die Mirapodo nicht kannten.
   Wie verändern sich die Ergebnisse, wenn wir Kunden des Mirapodo Online-Shops mit der veränderten Startseite konfrontieren? Wirkt die Veränderung überraschend und fällt somit eher auf? Vermutlich.
3. Unschärfe alleine reicht nicht aus. Was passiert, wenn das Bild vollständig verstellt dargestellt wird?
   Die Pixel des Bildes also per Zufall neu angeordnet werden – und so richtig „Unruhe“ beim Betrachter entsteht.
   Wirkt das aktivierend?
4. Und schließlich die Frage: Wie bewerten Nutzer die Technik der Unschärfe? Stört das, finden sie es abwechslungsreich und damit interessant?

Es bleiben also einige offene, interessante Fragen übrig.
Sicherlich gibt es weitere.

Packen wir sie an. In der Diskussion hier im Blog und, wenn möglich, in der weiteren Forschung. Ich freu mich darauf schon sehr.

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/lassen-sie-ihre-nutzer-genau-hinschauen/ http://www.usabilityblog.de/2011/11/lassen-sie-ihre-nutzer-genau-hinschauen/#comments Tue, 01 Nov 2011 12:18:39 +0000 Thorsten Wilhelm http://www.usabilityblog.de/?p=8136 Bitte betrachten Sie den folgenden Ausschnitt der Startseite des Mirapodo Online-Shops …


Wohin haben Sie zuerst geschaut?

Ich denke, dass ich mit einer Wahrscheinlichkeit von um die 60% vorhersagen kann, wohin Ihr Blick wanderte. Prüfen Sie das gerne nach …

Meine Prognose:
Sie haben den „unscharfen“ Teaser unten rechts schnell fixiert.
Aus Verwunderung und Überraschung: „Was ist denn das da unten?“.
Aber auch um sich zu vergewissern, ob mit Ihren Augen noch alles „in Ordnung“ ist, Sie keinen Sehfehler haben.

Nutzen Sie diesen „Reflex“!

Stellen auch Sie auf Ihren Webseiten einfach mal einen Teaser „unscharf“.

So bekommen Sie Aufmerksamkeit auch für flächenmäßig eher kleinere Aktions-Teaser und für solche, die an wenig reizstarken Stellen positioniert sind, z.B. am rechten, unteren Seitenrand.

Zum Vergleich: So präsentierte sich die Mirapodo Startseite im Original (Stand: 28.10.2011) …



Ein Eyetracking würde mit hoher Wahrscheinlichkeit die Erkenntnis liefern, dass der Teaser unten rechts („Stiefeletten“) wenig Beachtung bekommt. Der Blick wird sehr stark auf die Mitte fokussiert sein.

Nehmen Sie also mit:

Unscharf dargestellte Seitenelemente ziehen die Blicke von Nutzern auf sich. Nutzen Sie das.

Per Animation sollten unscharfe Flächen nach 2-3 Sekunden wieder an Schärfe gewinnen. Oder bieten Sie dem Nutzer eine Möglichkeit an, mit der er die Schärfe selbst herstellen kann (z.B. über einem Button mit der Kennzeichnung „Scharf stellen“). Es wird funktionieren.

Welche Techniken gibt es noch, um Aufmerksamkeit zu steuern? Welche Tipps und Tricks haben Sie? Welche Erfahrungen haben Sie mit verschiedenen Taktiken zur Aufmerksamkeitssteuerung gesammelt?

Freue mich auf eine anregende Diskussion mit Ihnen.

]]> http://www.usabilityblog.de/2011/11/lassen-sie-ihre-nutzer-genau-hinschauen/feed/ 16 http://www.usabilityblog.de/2011/10/als-letztes-bleibt-die-frage-%e2%80%9evorsprung-durch-technik%e2%80%9c-oder-doch-lieber-%e2%80%9efor-life%e2%80%9c/ http://www.usabilityblog.de/2011/10/als-letztes-bleibt-die-frage-%e2%80%9evorsprung-durch-technik%e2%80%9c-oder-doch-lieber-%e2%80%9efor-life%e2%80%9c/#comments Fri, 21 Oct 2011 08:04:30 +0000 Steffen Heim http://www.usabilityblog.de/?p=8073 Einkaufen im Internet ist heute alltäglich.

Jeder beliebige Shop hat 24/7 geöffnet und es gibt eine schier unfassbare Anbieter- und Produktauswahl. Nutzer können sich ausgiebig über gewünschte Produkte informieren und ihre Kaufentscheidung treffen. Egal ob es sich um eher einfache Produkte – z.B. Kleidung, Schuhe, Nahrung – oder komplexe Produkte – die selbst konfigurierbar sind – handelt.

Speziell hierzu habe ich mir verschiedene Auto-Konfiguratoren angesehen. Jeder Autohersteller bietet einen solchen Konfigurator an. Ziel hierbei ist es den Nutzer möglichst leicht zum Traumauto zu verhelfen. Aber genau hierin liegt die Schwierigkeit. Nicht jeder schafft es den Konfigurationsprozess optisch ansprechend und vor allem verständlich im Web abzubilden.

Wie also sollten komplexe Konfigurationsprozesse im Web dargestellt werden?

Dies möchte ich ihnen anhand der Konfiguratoren von Audi und Volvo zeigen. Beide überzeugen durch ihr Gestaltung und die Führung durch den Konfigurationsprozess, der aufgrund durchdachter Auswahlmechanismen schnell zum Traumauto führt. Die sich auch auf andere Prozesse im Web übertragen lassen.

Gut visualisierte Modell-/Grundauswahl

Die Modellauswahl erfolgt nicht einfach nur per schnöden Textlinks, sondern wird durch eine beispielhafte Abbildung des Modells optisch überstützt. Zudem erhalten Nutzer beim Überfahren der Modelle mit der Maus bereits weitere Informationen.

Modellauswahl über Abbildungen mit Mouseover und alternativer Radiobuttonauswahl.

Modellauswahl über Abbildungen mit Highlighting bei Mouseover.

Bei Audi ist diese Auswahlprozess aufgrund der vielen Varianten je Modell noch weiter untergliedert. Nach der Modellreihe muss zunächst die Karosserie und dann das Modell bzw. Modelllinie gewählt werden. Mit Hilfe der Radiobutton-Auswahl unterhalb der dargestellten Fahrzeuge können auch alternative Wege eingeschlagen werden, so kann beispielsweise auch SUV oder direkt das gewünschte Modell ausgewählt werden um den Prozess zu verkürzen.

Die einfache Bedienung setzt sich auch bei der Motorisierung fort. Je nach getroffener Auswahl werden nicht mehr wählbare Eigenschaften dynamisch ausgeblendet (Audi) oder deaktiviert (Volvo). Was Fehleingaben, die in eine Sackgasse führen, unmöglich macht.

Motorenauswahl mit reduzierender auf mögliche Auswahlen.

Motorenauswahl mit Deaktivierung nichtmehr möglicher Auswahlen.

Geführte Detailauswahl mit Optimierungspotential

Die weitere Auswahl von Ausstattungsdetails wird bei beiden auch recht gut gelöst. Nutzer werden geführt und erhalten bei Bedarf zu den verschiedenen Elementen weitere Informationen.

Einblendung weiterführender Informationen

Audi blendet diese Informationen nach Klick auf das Info-Icon mittig zentriert in einem Layer ein, der Rest der Seite wird leicht ausgegraut. Volvo hingegen hat dies per Mouseover gelöst. Die Informationen erscheinen in einem kleinen Layer direkt neben dem Info-Icon.

Info-Einblendung mittig im Layer mit Ausgrauung der restlichen Seite.

Info-Einblendung rechts neben Info-Icon; klein und fummelig.

Meiner Ansicht nach, hat Audi hier die bessere Art der Informationsdarstellung gewählt. Die komplette Seitenbreite kann zur Darstellung der Informationen genutzt werde. Bei Volvo hingegen wird es bei vielen Informationen in dem kleinen Layer sehr unübersichtlich und fummelig.

Auswahl von Interieur und Exterieur

Bei der Auswahl von Interieur und Exterieur hat Volvo die Nase vorn. Die Auswahl ist etwas interaktiver als bei Audi, da mehr mit Visualisierungen gearbeitet wird – beispielsweise bei der Farbauswahl.

Standardmäßige Farbwahl mit sofortiger Anpassung der Abbildung.

Interaktive Farbwahl mit sofortiger Anpassung der großen Abbildung.

Sehr schön ist es, dass sich die Fahrzeugabbildung sofort nach der Auswahl einer Eigenschaft aktualisiert und das Gewählte visualisiert. Speziell das gewählte Exterieur kann mit Hilfe der 3D-Außenansicht optimal betrachtet werden. Hier gefällt mir die Ansicht bei Volvo etwas besser, da das Fahrzeug deutlich größer dargestellt wird und mehr zu erkennen ist.

Erschwerte Lesbarkeit; geringe Schriftgröße; zu wenig Kontrast

Große Abbildung; 360° drehbar.

Ein Punkt der mich beim Audi-Konfigurator zudem noch etwas stört: Die recht kleine Schrift und fehlender Kontrast zum Hintergrund. Dies erschwert das Lesen der Texte merklich.

Auswahl weitere (Sonder-)Ausstattungen

Nicht optimal ist die Auswahl weitere Ausstattungsmöglichkeiten gelöst.
Bei Volvo ist dies wieder in einem kleinen eingeblendeten Layer – bereits bemängelt – gelöst. Weitere Informationen zu einzelnen Sonderausstattungen gibt es nicht.
Audi löst die Auswahl durch Strukturbaum mit 10 Einstiegspunkten und weiteren Unterpunkten. Informationen zu einzelnen Ausstattungen gibt es hier immer. Jedoch wirkt das Ganze recht komplex und fummelig.

Strukturbaum zur Auswahl weiterer Sonderausstattung.

Layer-Einblendung zur Auswahl weitere Sonderausstattung.

Was haben wir nun gelernt?

Komplexe Produkte können auch im Web einfach und verständlich zugänglich gemacht werden. Es braucht lediglich die richtigen Bedien- und Interaktionsmechanismen.
Hört sich einfach an, es steckt aber viel Arbeit dahinter bis Konfiguratoren (geführte Prozesse) so gut zu bedienen ist wie die Audi und Volvo.

Bei eigenen geführten Prozessen, sollte auf folgendes geachtet werden:

• Klare Prozessdarstellung
• Sinnvolle Visualisierung von Auswahloptionen bzw. des Produkts
• Interaktivität der Auswahl-/Einstellungsmöglichkeiten
• Informationen zu einzelnen Auswahl-/Einstellungsmöglichkeiten anbieten
• Attraktives stimmiges Design – Farbe, Schrift, Kontrast – wählen
• Rücksprünge und Abkürzungen – speziell für Power-User – einbauen

Aber das Wichtigste ist:
Der abzubildende Prozess muss im eigenen Kopf verinnerlicht sein; jedes Detail muss überdacht und berücksichtigt werden. Zudem ist es wichtig zu wissen, für welche Zielgruppe der Prozess realisiert wird.

]]> http://www.usabilityblog.de/2011/10/als-letztes-bleibt-die-frage-%e2%80%9evorsprung-durch-technik%e2%80%9c-oder-doch-lieber-%e2%80%9efor-life%e2%80%9c/feed/ 0 http://www.usabilityblog.de/2011/10/fehlentscheidungen-aus-blickdaten-ableiten-geht-ganz-schnell-wenn-sie-nur-mit-einer-heatmap-arbeiten/ http://www.usabilityblog.de/2011/10/fehlentscheidungen-aus-blickdaten-ableiten-geht-ganz-schnell-wenn-sie-nur-mit-einer-heatmap-arbeiten/#comments Tue, 18 Oct 2011 13:50:26 +0000 Thorsten Wilhelm http://www.usabilityblog.de/?p=8021

Heatmap einer Startseite - Betrachtungsdauer von im Mittel 25 Sekunden.

Wir alle kennen diese schönen, bunten Wärmebilder (Heatmaps). Sie zeigen uns z.B. Klick- oder Blickhäufigkeiten auf Webseiten an. Wir erkennen damit Bereiche höchster Aufmerksamkeit und zugleich solche, die kaum Beachtung finden. Aus Heatmaps lassen sich Entscheidungen ganz schnell ableiten – Fluch und Segen zugleich!

Schauen wir uns dazu das Bild mit der Blick-Heatmap einmal genauer an:

• Die Navigation am linken Seitenrand und die rechte (Marginal-) Spalte werden intensiv betrachtet – gut so.
• Die Navigation am oberen Seitenrand geht komplett unter. Nur wenige schauen dort hin.
• Obwohl im mittleren Seitenbereich Bilder und relativ viel Text dargestellt sind, liegt auf diesem Bereich keine Aufmerksamkeitsspitze.

Mögliche Schlussfolgerungen aus den Daten:

• Die Navigation am oberen Seitenrand wird aufmerksamkeitsstärker gestaltet, in dem z.B. der Kontrast zum Hintergrund erhöht wird.
• Um die Aufmerksamkeit des Betrachters stärker in den mittleren Seitenbereich zu lenken, werden reizstärkere Bilder eingesetzt und die Größe der Bilder wird ausgeweitet.

Alles gut? Nicht unbedingt – das sehen wir aber erst, wenn wir uns unterschiedliche Zeitintervalle anschauen.


Also: Nicht nur eine Heatmap für die gesamte Betrachtungsdauer, sondern stattdessen 3 Heatmaps für unterschiedliche, bewusst gewählte Zeitintervalle:

• 0-5 Sekunden – die so genannte Orientierungsphase („Was bietet mir die Site, wie ist die Seite aufgebaut? etc.“)
• 5-15 Sekunden – die so genannte intentionale Phase.
  In dieser Phase sucht der Nutzer nach zielführenden Elementen, d.h. nach Inhalten, Funktionen und Links, die ihn dabei unterstützten seine aktuelle Intention zu realisieren.
• 15-25 Sekunden – die Phase der Entscheidungsvorbereitung und -findung.
  In dieser letzten Phase vor dem Klick findet ein Abwägen zwischen denkbaren Handlungsoptionen statt. Diese werden vergleichend bewertet – immer vor dem Hintergrund der Intention.

Voilà … und hier nun die Daten für die verschiedenen Zeitintervalle in unserem Beispiel:



Heatmaps in unterschiedlichen Zeitintervallen.

Ich leite daraus ab: Wir haben kein Problem im mittleren Seitenbereich.

Die Bilder und Text werden in der intentionalen Phase intensiv betrachtet. Sie bieten dem Nutzer somit einen Überblick zum Inhalt und unterstützen ihn in seiner Entscheidungsfindung.

Es ist also nicht erforderlich den mittleren Seitenbereich umzugestalten.

Noch mehr Bilder, größere Bilder und reizstärkerer Bilder sind unnötig, im Gegenteil sogar:
Sie würden die Aufmerksamkeit ganz sicher weg von der rechten Marginalspalte ziehen.

Puh – Glück gehabt.
Unnötige Arbeit und sogar nachteilige Veränderungen an der Seite verhindert!

Werten Sie Prozessdaten – wie einen Blickverlauf – niemals nur punktuell aus.

Betrachten Sie Prozessdaten im Verlauf, in dem Sie sich z.B. Heatmaps zu unterschiedlichen Zeitintervallen darstellen lassen und diese richtig interpretieren. So bekommen Sie eine Vorstellung vom Prozessverlauf und leiten die richtigen Entscheidungen aus Prozessdaten ab (bzw. vermeiden Fehlentscheidungen).

]]> http://www.usabilityblog.de/2011/10/fehlentscheidungen-aus-blickdaten-ableiten-geht-ganz-schnell-wenn-sie-nur-mit-einer-heatmap-arbeiten/feed/ 0 http://www.usabilityblog.de/2011/10/7945/ http://www.usabilityblog.de/2011/10/7945/#comments Tue, 11 Oct 2011 13:00:19 +0000 Johanna Möller http://www.usabilityblog.de/?p=7945 Stellen Sie sich vor, Sie eröffnen einen neuen Onlineshop, launchen ein Webangebot oder bringen eine neue Software auf den Markt – wäre es da nicht spannend mitzubekommen, wie die Nutzer und Kunden ganz zu Beginn mit Ihrem Angebot zurechtkommen?

Gerade Neukunden und -nutzer sind noch nicht an die neuen Oberflächen gewöhnt und stoßen dadurch viel schneller auf Dinge, die „noch nicht ganz rund“ sind, die irritieren oder irgendwie umständlich erscheinen. Je länger die Oberfläche dann genutzt wird, desto stärker wird die Gewöhnung daran und Schwachpunkte werden nach und nach hingenommen.

Gleichzeitig muss man vieles erst ein paar Mal probiert haben, um überhaupt die Möglichkeiten einer komplexen Software oder eines umfangreichen Webangebots zu verstehen und überblicken zu können.

Wie also vorgehen, um die Erkenntnisse aus dieser Erstnutzungsphase erfassen und möglichst schnell in Optimierungen umsetzen zu können?

Wir haben zu diesem Zweck gute Erfahrungen mit einem Nutzertagebuch gemacht, in dem die Neunutzer oder –kunden ihre ersten Schritte dokumentieren.

Jedem Studienteilnehmer steht dafür ein Webtagebuch zur Verfügung, in dem er frei über seine Erfahrungen berichten kann, in dem aber auch konkrete Fragen und Aufgaben gestellt werden können, die dann beantwortet bzw. abgearbeitet werden können. Die Dokumentation jedes Teilnehmers erfolgt dabei zunächst selbständig, geleitet durch die Fragen und Aufgaben. Es ist aber auch möglich, die Teilnehmer zum Abschluss der Studie miteinander diskutieren zu lassen, z.B. um das kreative Potential der Gruppe nutzen zu können oder um die Relevanz bestimmter Erkenntnisse besser einstufen zu können.

Am Ende zeichnet sich so ein umfassender Gesamteindruck von der Nutzbarkeit des neuen Angebots ab – und das nicht nur basierend auf einer einzelnen Situation oder aus der Erinnerung heraus, sondern als hätten Sie dem Nutzer tatsächlich „über die Schulter geschaut“.

Übrigens – dieser Ansatz funktioniert natürlich auch bestens in einer Pilotphase vor dem eigentlichen Start von Webangebot oder Software.

Haben Sie Erfahrung mit ähnlichen Ansätzen? Dann freue ich mich auf einen Austausch.

]]> http://www.usabilityblog.de/2011/10/7945/feed/ 1