Wie komme ich zu einer optimierten User-Experience bei Applikationen?

Eine Möglichkeit ist es, das Wissen von UI-Experten zu nutzen, um bereits in der Konzeptionsphase die Entwicklung der UI zu verbessern.
Ein andere Möglichkeit ist es die Planung wie bisher zu gestalten, aber mittels Prototypen und einem Try and Error Prinzip (T&E Prinzip) die UI während der Entwicklung zu optimieren.
In diesem Artikel möchten wir anhand der Beispiele

• link4.chat,
• space4share.com und
• letzd8te.com

aufzeigen, wie mittels space-shoot.com das T&E Prinzip umgesetzt werden kann und welche Ergebnisse damit erzielt werden können.
www.space-shoot.com ist ein kostenloses WEB-User Tracking Tool, das in alle Web-Applikationen eingebunden werden kann und verschiedene Einzel- und Aggregationsanalysen ermöglicht.

Das Try & Error Prinzip (T&E-Prinzip)

Bei dem T&E-Prinzip werden weniger Ressourcen in die Planung einer Applikation und deren Workflows investiert, mit dem Ziel möglichst schnell einen Prototypen bereitzustellen, der dann weiter optimiert werden kann.
Mann löst sich von dem Gedanken, dass ein topp Produkt von Beginn an bereitgestellt werden kann, sondern arbeitet in dem Bewusstsein, dass jegliche Applikation der Evolution unterworfen ist und von Beginn an bis zum Ende immer weiter entwickelt werden muss.
Diese Art der Entwicklung eignet sich damit insbesondere für Leute, die der Planung einen geringeren Stellenwert einräumen. Sei es, da diese nie vollständig sein kann oder das man zu faul ist eine zu machen.
Damit man aber nach kurzer Zeit ein ausgereiftes Produkt anbieten kann, muss die Nutzung des Prototypen von Beginn an gemessen und daraus Optimierungen abgeleitet werden.
Wir haben hierfür das Live Tracking Tool SPACE-SHOOT entwickelt und haben es bei der Optimierung der 3 Plattformen link4.chat, space4share und letz8te eingesetzt. Durch SPACE-SHOOT können User frühzeitig auf den Prototypen gelenkt werden, um deren Verhalten zu tracken (Wohin klicken sie? Was übersehen Sie? …).
Mit den Erkenntnissen kann dann in den nächsten Sprints die User-Experience Stück für Stück verbessert werden. Mit dem Vorteil echte User-Daten für die Optimierung zu nutzen.
Nach ca. 2 bis 3 Schleifen kann ein solcher Prototyp zur Marktreife entwickelt werden.

1) Der Use Case www.link4.chat

www.link4.chat ist eine Video Chat Plattform ohne Registrierung, die über das Teilen eines Links zwei Personen zu einem Video Chat verbinden kann. Neben der eigentlichen Video Chat Funktion verfügt link4.chat zudem über weitere Funktionen wie z.B. eine Timer Funktionalität.
Ziel war es, einen ersten Prototyp bereitzustellen und diesen so schnell zu optimieren, dass User ohne jegliche Schulung oder Vorkenntnisse link4.chat intuitiv zum Chatten verwenden können.

1.1) Der erste Prototyp

Die UI wurde im ersten Schritt so geplant, das Sie dem folgenden Prozess folgt (siehe Bild unten in der Heatmap):

• Einstellen ob der Chat sofort oder in der Zukunft ist
• Erzeugen eines Links
• Kopieren des Links und teilen mit einem Freund
• Video Chat Room öffnen und chatten

Ein Vorgehen, das für geschulte User, die link4.chat kennen einfach erscheint. Aber für neu akquirierte User, die link4.chat zum ersten Mal sehen und nutzen sollen absolut ungeeignet ist!

1.2) Was lief falsch?

Anhand der folgenden Heatmap und Einzelanalyse kann man die größten Fehler ableiten. Der schlechte Aufbau der Seite führte dazu, dass lediglich 20 % der User tatsächlich einen Chat Room geöffnet haben.

Heatmap

Der User müsste eigentlich die Buttons in der Reihenfolge 1, 2, 3 klicken. An der Heatmap sieht man aber, dass die Nutzer zwar auch auf die Buttons klicken, aber auch viel zu sehr auf andere, die für einen ersten Chat nicht notwendig sind.

In der Einzelbetrachtung sieht man beispielhaft, wie ein User nicht die Reihenfolge erkennt, sondern den gesamten Bildschirm betrachtet und punktuell klickt. Dieses exemplarische Beispiel steht für ca. 100 andere User in dem ersten Testzeitraum von 3 Tagen.
Was sind die UI Schwächen:

• Der User ist viel zu abgelenkt durch andere Knöpfe, die für den Start eines Video Chats nicht benötigt werden.
• Die eigentlichen Buttons liegen nicht dicht nebeneinander.
• Es gibt keine verständliche Reihenfolge.
• Generische Namen wie „Generate Link“ und „Copy & Open“ versteht der User nicht und bieten keine Call to Action.
• Erklärungen sind zwar hilfreich, interessieren aber ggf. nur 20 % der User.

>> Ergebnis der ersten UI: Lediglich 20 % der User haben tatsächlich einen Chat Room geöffnet.

1.3) Was wurde geändert?

Aus den Problemen wurden 3 einfache Lösungen abgeleitet, mit dem Ziel, dass die Neu-User einen Chat-Room öffnen sollen, um die einfache Nutzung zu verstehen.
Umstellung

1. Der Haupt-UseCase (Chatroom öffnen) wurde auf einen Button reduziert – „Start“ >> damit muss den Usern nichts erklärt werden, sondern der User kann einfach beginnen und das Produkt erkunden.
2. Der notwendige Chat-Link wird automatisch erzeugt und hat keine Relevanz für den User.
3. Alle Zusatz-Features (Meeting in die Zukunft), wurden unter den Link gestellt und dienen mehr als Add on ohne den eigentlichen Prozess (Klicke auf Start) zu stören.

Der neue Screen war damit für Erst-User einfacher zu bedienen und bot für Erfahrene User dennoch alle Optionen.

Man sieht sehr deutlich an der Heatmap, dass die User gezielter auf den Start Button klicken und weniger auf Punkte um den Start Button herum. Zudem haben auch die Einzelanalysen gezeigt, dass User erst gezielt auf Start klicken und erst später andere Funktionen nutzen.
>> Ergebnis: Nach den Umstellungen stieg der Anteil der User, die einen Chat Room geöffnet haben von 20% auf 80%.

2) Der Use Case www.space4share.com

www.space4share.com ist eine Plattform zum Teilen von Dateien (ZIP, Bilder, Musik, u.v.m.), ohne dass eine Registrierung oder Anmeldung notwendig ist. Der Vorteil der Plattform soll in einer einfachen Verwendung ohne viel Involvement liegen.
D.h. alle Handgriffe eines Users müssen sitzen, denn da der User weder eine E-Mail angeben muss noch andere Kosten für die Nutzung hat, liegt seine Bindung im ersten Versuch nahe bei 0. Ein zwei Klicks maximal, dann muss der User das Prinzip verstehen, oder der User bricht ab und ca. 2 EUR für das Werben sind verloren.
Der User muss zum Teilen eines Files mit anderen Usern folgende Schritte machen:

1. Files zum Teilen aussuchen,
2. diese Hochladen und
3. den spezifischen Share-Link teilen.

Klingt einfach, birgt aber trotzdem immense Detailprobleme.

2.1) Der erste Prototyp (der Upload Prozess)

Zur Auswahl der Files musste der User irgendwo auf die Lila Fläche Klicken („1“) oder die Files einfach per Drag and Dropp auf die Lila Fläche ziehen und dann („2“) auf „Upload“ klicken.
Mit einem Button und der großen Drop and Drag Fläche sollte die Konsole einfach zu bedienen sein und andere Buttons sollten nicht vom Upload und teilen ablenken.

2.2) Was lief falsch?

Die Intuition die Usability einfach zu halten und daher nur einen Button anzubieten, war theoretisch OK, praktisch aber ein absoluter Fehlgriff.
Das Ergebnis war, dass nur 10% der User tatsächlich ein File hochgeladen haben, um es zu testen oder zu teilen.
Heatmap
(die Heatmap zeigt in dem Fall nicht das Design 1 zu 1 sondern nur die Flächen und Buttons wie sie von oben nach unten angeordnet sind, ohne Design).

Betrachtet man die Heatmap, so sieht man sehr genau, wo das Problem lag:
Man erkennt sehr deutlich, dass die User auf den einzig verfügbaren Button klicken mit dem Namen „Upload“. Mit dem Ziel, damit den Prozess zu starten. Den Text oder die Lila Fläche haben die User einfach übersehen. Dies führte dazu, dass einzelne User bis zu 20 Mal auf den Button „Upload“ geklickt haben und dann aufgegeben haben.
Auch hier wurde von 90% der Usern, der Hinweis „Click Here or Drag and Drop File“ einfach übersehen.
>> Ergebnis: nur 10% der User haben tatsächlich ein File hochgeladen, um es zu testen oder zu teilen.

2.3. Was wurde geändert?

Die Lösung war sehr einfach aber effektiv. Es wurde ein zweiter Button Über dem ersten eingestellt mit und diese mit den Nr. 1 und 2 beschriftet (siehe Bild).
Zudem, wurde der 2’te Button solange gesperrt bis nicht ein File ausgewählt wurde.

Heatmap Betrachtung

Man sieht sehr schön im Vergleich der beiden Heatmaps von Vorher zu Nachher wie die User nun gezielter auf die beiden Verfügbaren Buttons klicken. Insbesondere vermehrt erst auf Button „1“ und dann auf Button „2“:
>> Ergebnis: Von 100 Usern klicken 80 gezielt auf den ersten Button und von diesen ca. die hälfte auf den zweiten um etwas hochzuladen. Damit konnte die Anzahl der Uploads von 10% auf 40% der User erhöht werden, die einen Raum auch wirklich geöffnet haben.

3) Der Use Case www.letzd8te.com

Letzd8te ist ein Video Dating Portal, in dem User nach Eingabe weniger Daten mit anderen Usern Video-Chatten und flirten können. Um den Video-Chat starten zu können, muss ein User aber folgende Eingaben machen:

1. Auf Start Drücken
2. AGBs zur Kenntnis nehmen
3. Geschlecht, Alter eingeben und Herkunftsstadt eingeben

Diese Angaben sind wichtig, damit die User gezielt nach Personen ihres Typs suchen können bzw. von anderen passenden Usern gefunden werden können.

3.1) Der Prototyp

Nachdem der User sich entschlossen hat den Chat zu starten, sollte er schnell die folgenden Prozesse durchlaufen.

1. AGBs bestätigen
2. Eigene Daten ausfüllen – Geschlecht, Alter und Heimatstadt eingeben
3. Daten der Zielperson eingeben.

Wir haben uns hierbei direkt dafür entschieden, alle notwendigen Daten für 2) und 3) in einer Übersicht zu packen, damit der User erkennt, dass es schnell und ohne persönliche Daten zum Chat gehen kann.
Vorher sollte der User aber die AGB bestätigen bevor er zu dieser Übersicht kommt.

3.2) Was lief falsch?

Ca. 85% aller User wollten einen Chat starten und klickten auf die nächste Seite mit den AGB. Leider schafften es dann aber nur noch 10% zum eigentlichen Chat. Hierbei brach die überwiegende Mehrheit den Prozess bereits bei den AGB ab. Aber wieso?

Heatmap
Die AGB-Sperre (Schwarzer Bildschirm mit weißen AGBs), die die Nutzer abholen sollte und bewusst die Einwilligung einholen sollte, hat die Nutzung fast vollständig unterbunden.
Im ersten Schritt gingen zwar 85% der User auf Start und damit auf die Eingabefelder, aber nur 15% haben tatsächlich die Felder ausgefüllt und nur 10% sind dann in den Chat gegangen.

Probleme
Anhand der Video-Analyse ergaben sich zwei Probleme:
Problem 1: Fehlenden User-Lenkung – Nach dem Start wird suggeriert, dass es losgehen kann und dann taucht ein schwarzer Bildschirm auf und der User erkennt nicht direkt wie es weitergehen soll und was passiert. Das war ein großes Hindernis. D.h. der User hat nicht verstanden, was das bedeutet und ist ausgestiegen.
Problem 2: Selbst wenn der User erkannt hat, dass man hier die AGB bestätigen muss, war das Bestätigungskästchen zu klein und hat sich nicht deutlich von den anderen Informationen unterschieden. Man sieht sehr deutlich, wie stark die User um die eigentliche Schaltfläche herum klicken, ohne sie zu finden oder erst beim 10 klick.

3.3) Was wurde geändert?

1. Der User kam direkt auf die Eingabefelder und sieht diese direkt
2. Der schwarze AGB Overlayer wurde entfernt
3. die AGB Bestätigung wurde zu einer Information umgebaut
4. die AGBs wurden an das Ende gesetzt (vor dem Start Button)

Mit diesen beiden Änderungen wurde der User-Flow nicht mehr gestört, der User sah dass wenige und unpersönliche Daten eingeben werden mussten und dass man damit direkt andere Singles kennen lernen konnte.
>> Ergebnis: Damit konnte der Anteil der User, die in den Video-Chat-Room gehen von 10% auf 30% erhöht werden.

4) Vorteile des T&E Prozesses

Anhand der 3 Use Cases www.link4.chat, www.space4share.com und www.letzd8te.com können folgende Vorteile zusammengefasst werden:

• Bereits ab ca. 50 unabhängigen User-Beobachtungen kann man die Schwachstellen einer UI und eines Prozesses schnell identifizieren.
• Eine Testphase kann binnen 2 bis 3 Tagen abgeschlossen werden.
• Es werden keine UX- oder Statischen-Kenntnisse benötigt, sondern Geduld um sich die einzelnen Sessions anzusehen und ein Auge für das Verhalten des Kunden.
• Auch ungeschulte Mitarbeiter wie z.B. Praktikanten können bereits Prozesslücken identifizieren und Verbesserungen erarbeiten.
• Die Lösungswege können direkt besprochen werden und dann schnell verifiziert werden.
• Nach zwei bis max. drei Loops kann eine optimierte UI bereitgestellt werden.
• Man kann in finaler Konsequenz auch Ressourcen für das Testing verringern und durch die Beobachtung der User die Fehler im Nachhinein beseitigen.
• Die Konversion konnte je nach Fall um den Faktor 3 bis 4 verbessert.
• chat: Öffnen eines Chat-Rooms von 20% auf 80% gesteigert
• com: Upload-Quote von 10% auf 40% gesteigert
• com: Öffnen eines Video Session von 10% auf 30% gesteigert

5) Zu space-shoot

www.space-shoot.com ist ein Live Tracking Tool, dass durch die Einbindung eines Tracking Codes es dem Seitenbesitzer ermöglicht, einzelnen Sessions der User zu beobachten.
Hierbei kann der Seitenbesitzer sich jede einzelne User-Besuch als Video ansehen oder die Daten als aggregierte Heatmaps (Klick-Heatmap, Scroll Heatmap und Mouse-Over Heatmap) ansehen.

The post SPACE-SHOOT – Mit Try & Error kostengünstig optimierte UIs entwickeln appeared first on Dimention GmbH.

Was kaufen die deutschen Online-Shopper?

Quelle: Arbeitsgemeinschaft Online Forschung (AGOF)

Das Institut für Demoskopie Allensbach kommt zu dem Ergebnis, dass 90 Prozent der Befragten mehrmals pro Jahr im Internet bestellen oder kostenpflichtige Dienste in Anspruch nehmen, 30 Prozent davon sogar mindestens 1-mal im Monat. Die bevorzugte Zahlungsart der Kunden ist mit einem Anteil von etwa 40 Prozent nach wie vor die Rechnung, häufig genutzt wird auch die Vorkasse (Quelle: BITKOM).

76 Prozent der deutschen Internet-Nutzer gehen täglich ins Netz – so die ARD/ZDF-Onlinestudie 2010. Entsprechend verteilen sich die Käufe im E-Commerce immer gleichmäßiger über alle Wochentage. Besonders hoch ist die Frequenz beim Online-Shopping im Zeitfenster zwischen 16 und 18 Uhr.

Zu den Zielgruppen, die laut einer Studie des E-Commerce-Center Handel künftig stärker in den Fokus der E-Commerce Anbieter rücken werden, gehören ältere Internet-Nutzer. Erfolgreiche Online-Händler berücksichtigen bei der Gestaltung ihres Angebots die besonderen Anforderungen der kaufkräftigen ‘Generation 50plus’ – beispielsweise im Hinblick auf die wahrgenommenen Kaufrisiken oder die Benutzerführung und die grafische Darstellung der Shop-Inhalte.

Zum Schluss interessiert uns natürlich noch der Unterschied zwischen Frauen und Männern beim Online-Shopping. Nicht nur im realen Leben sind die Frauen die aktiveren Einkäufer. Auch in der virtuellen Welt schlagen sie zu: 64,1 Prozent aller Online-Käufe in Deutschland tätigen Frauen. Finden Männer auch einmal den Weg ins Netz, geben sie allerdings mit 71,77 Euro pro Einkauf im Schnitt deutlich mehr aus als Frauen, die 57,11 Euro investieren. Und nun noch zu der Frage: Was kauft Frau und was kauft Mann im World Wide Web? Das weibliche Geschlecht kauft ganz klischeehaft deutlich häufiger Kleidung, Kosmetikartikel, Schmuck und Schuhe, während Männer sich auf Telekommunikation, Unterhaltungselektronik, elektrische Haushaltsgeräte, Heimwerkerbedarf und Computer-Software bzw. -Spiele konzentrieren.

The post Online-Shopping in Deutschland: Tatsachen und Trends zum Käuferverhalten appeared first on Dimention GmbH.

Bei mehr als der Hälfte der Internet-Händler richtet sich das Angebot an Privatkunden (B2C), während 12 Prozent der Anbieter sich rein auf Unternehmenskunden (B2B) konzentrieren. Die übrigen Unternehmen haben gemäß ibi research an der Universität Regensburg einen gemischten Kundenkreis.

Als größte Herausforderung im Internet-Handel betrachten die von ibi research befragten Unternehmen die Bekanntmachung ihres Angebots. Insbesondere geht es dabei um die Suchmaschinenoptimierung (u.a. Identifizierung der richtigen Keywords) und um die Auswahl der geeigneten Werbepartner. Suchmaschinen stellen in Deutschland eine zentrale Informationsquelle für die Kunden dar, gefolgt von Preisvergleichs- und Shoppingseiten, Hersteller-Pages und Internet-Seiten mit Produkttests.

Zahlreiche E-Commerce Anbieter setzen bereits auf Social Media Marketing. So haben z.B. 33 Prozent der Shops ein Facebook-Profil und 21 Prozent einen Twitter-Account (Quelle: EHI Retail Institut 2010). Auch Couponing und Online-Prospekte gehören zu den Trends, die in Deutschland auf wachsendes Interesse stoßen und gezielte Kaufanreize setzen. Ganz neue Impulse für den Internet-Handel bringt die Verbreitung von modernen Handys und den zugehörigen mobilen Diensten mit sich. Schon heute ist es beispielsweise möglich, ein Produkt zu scannen oder sogar einfach nur zu fotografieren, um in Sekundenschnelle den billigsten Verkaufspreis zu ermitteln.

The post E-Commerce im Aufwind – die Entwicklung des deutschen Marktes appeared first on Dimention GmbH.