Kategorien
Betriebliches E-Business

Mit Crowdtesting die Usability des Onlineshops sicherstellen – Acht Anbieter im Vergleich

Wenn es ein Angstwort in der eCommerce-Welt gibt, dann ist es wohl die Conversion Rate. Seit Jahren suchen Onlineshop-Betreiber nach der Antwort auf die Frage, warum die Besucher am Ende nicht zum Käufer werden. Dabei müssten sie ihren Kunden und Nutzer einfach mal über die Schulter schauen und ihre Usability hinterfragen. Ein optimaler Weg ist dafür das Crowdtesting – das gezielte Testen der eigenen Applikation von Nutzern unter Realbedingungen. Doch nicht jeder Anbieter von Crowdtesting bietet dasselbe.

Bei gerade einmal 2,5 % bewegte sich im dritten Quartal 2016 laut Monetate die globale Conversion Rate von Webshops. In Deutschland sieht es sogar noch düsterer aus. Laut dem ECC Köln wies die Mehrheit eine Conversion Rate zwischen 0,9 % und 1,9 % auf – weit unter dem globalen Durchschnitt.

Onlineshops leben nicht allein von ihren Produkten. Entscheidend für die Besucher ist, ob sie sich auf der Seite zurechtfinden und sie gezielt und klug von der Einstiegsseite zum Kaufabschluss geleitet werden. Hier spielen Einkaufspsychologie und Interaktionsdesign eine nicht zu unterschätzende Rolle. Sie bestellen ja auch nicht in einem Restaurant, dass unordentlich wirkt und dessen Personal Ihnen die Hilfe verwehrt.

erklärt Benjamin Uebel, CEO der Crowdtesting-Plattform RapidUsertests, die typischen Blind Spots von eCommerce-Applikationen.

Die eigenen Kunden testen lassen

RapidUsertests gehört zu einer Reihe Dienstleister in der DACH-Region, die eCommerce-Betreibern sowie Webseiten- und App-Entwicklern anbieten, ihre Applikationen von echten Nutzern auf Herz und Nieren testen zu lassen. Dabei werden nicht aufwendige Labortests mit wenigen Testpersonen in künstlicher Umgebung vorgenommen. Vielmehr werden die Test dort durchgeführt, wo die Applikation am Ende genutzt wird: zu Hause, unterwegs oder im Büro.

Das Konzept dahinter nennt sich Crowdtesting und nutzt die Chance, per Internet eCommerce-Applikationen von echten Menschen auf echten Geräten testen zu lassen. E-Commerce-Betreiber können dabei im Self Service die Tests selbstständig durchführen oder sich im Managed Service bei der Durchführung unterstützen lassen.

Beim Crowdtesting auf Bugs und für Usability absolvieren und bewerten ganz normale Menschen am eigenen Gerät typische Nutzerreisen auf den Applikationen der eCommerce-Betreiber (Quelle: Pixabay)
Beim Crowdtesting absolvieren und bewerten ganz normale Menschen am eigenen Gerät typische Nutzerreisen auf den Applikationen der eCommerce-Betreiber (Quelle: Pixabay)

Für Entwickler, UX-Designer und Betreiber von eCommerce-Plattformen lässt sich das Funktionieren ihrer Applikation auf technische Aspekte (Functionality) und verkaufspsychologische Aspekte (Usability) eingrenzen. Entsprechend wird bei den Crowdtests in Functional Testing und Usability Testing (UX-Testing) unterschieden. Während eCommerce-Plattformen heutzutage die Funktionalität, also Freiheit von Bugs, schon gut auf dem Schirm hat, hapert es bei vielen noch immer an der Usability. Die Übergänge sind natürlich fließend.

In diesem Spannungsfeld bewegen sich auch die acht deutschsprachigen Anbieter von Crowdtesting: TestIO, Testbirds, Applause, Testemit, Testeron, Passbrains, TESTTailor und RapidUsertests. Bis auf Testemit und TESTTailor standen alle Anbieter für Nachfragen im Rahmen dieses Artikels zur Verfügung.

Wie unterscheiden sich nun die einzelnen Anbieter? Und welcher Anbieter passt zu welchem Projekttyp? Letztlich müssen die Testergebnisse so aussagekräftig sein, dass jegliche verkaufsbehindernden Fehler beseitigt werden können.
Die drei entscheidenden Faktoren dabei sind:

  1. Die Crowd: Wer ist der beste Tester für Ihren Applikation?
  2. Die Dokumentation: Können Sie die Testergebnisse schnell in die Umsetzung bringen?
  3. Der Preis: Welches Bezahlmodell passt zu Ihren Testanforderungen und wo erhalten Sie das beste Preis-Leistungsverhältnis?

Functionality in Abgrenzung zur Usability

Das Functional Testing beinhaltet den Check von Webseiten und Apps auf ihre technische Fehlerfreiheit. Beim Functional Testing ist deshalb das Ziel, Bugs bzw. Programmierfehler zu beseitigen, welche den Kaufabschluss:

  • verhindern (fehlende Seiten oder Links, Ladefehler, Abstürze, Programmierfehler in der Registrierung),
  • sehr stark erschweren (fehlerhafte Darstellung, lange Ladezeiten) oder
  • rechtlich angreifbar machen (zum Beispiel durch ein fehlendes Impressum).

Neben Problemen bei einzelnen Bezahlmethoden funktionieren z. B. häufig Social Logins und bestimmte Emailadressen bei der Registrierung nicht, so Jan Schwenzien, CTO bei TestIO.

Und Jan Wolter, Europachef bei Applause ergänzt

Gutscheine, die für dieselbe Bestellung mehrmals genutzt werden können; unerwartete Begrenzungen bei der Anzahl der Artikel, die Nutzer in den Einkaufswagen legen können, was nicht selten zu Abstützen führt; Bilder, die für spezifische Geräte-Browser-Kombinationen nicht richtig gerendert sind oder schlicht Bildschirmeinstellungen, die es unmöglich machen, eine Bestellung aufzugeben (Links oder Buttons, die abgeschnitten sind),

als klassische Bugs.

Beim Functional Testing zählt neben der Expertise der Tester vor allem die reibungslose Integration in die eigene Bugtracking-Software (Quelle: TestIO Webseite)
Beim Functional Testing zählt neben der Expertise der Tester vor allem die reibungslose Integration in die eigene Bugtracking-Software (Quelle: TestIO Webseite)

Im Gegensatz dazu werden beim Usability Testing weniger diese technischen Fehler berücksichtigt – obwohl diese meist automatisch mit gemeldet werden. Vielmehr geht es bei der Usability jedoch um Aspekte, die den Besucher bei ihrer Kaufentscheidung beeinflussen. Im Mittelpunkt stehen somit Fragen zur:

  • Bedienbarkeit,
  • Auffindbarkeit,
  • Verständlichkeit und
  • Einfachheit der Nutzerreise vom Zugang bis zum Kauf (Sales Funnel).

“Die Liste an vermeidbaren Conversion-Rate-Killern ist lang und meist sehr individuell”, bestätigt Benjamin Uebel von RapidUsertests. “Angefangen bei der Navigation, die durch Unübersichtlichkeit und schlechte Funktionalitäten z. B. bei der Autovervollständigung Kunden abschreckt. Über Filter, die nicht dem Suchverhalten der Besucher entsprechen, und fehlende Inhalte auf der Produktdetailseite. Bis schlussendlich zu all den kleinen Details der Kaufseite, wo noch einmal Vertrauen, Transparenz und Privatsphäre eine große Rolle spielen.”

Diese Unterscheidung zeigt sich bei genauerem Hinschauen auch bei den Crowdtesting-Anbietern. Die Angebote für das Functional Testing sind weitestgehend standardisiert und vergleichbar. Schließlich geht es beim Functional Testing vorrangig um klare technische Fehler, die einen direkten Effekt haben (Abbruch, Fehlleitung etc.). Beim UX-Testing wird es dann jedoch ungenau. Auch auf Nachfragen erhält man mehrheitlich Wertversprechen und Claims anstelle konkreter methodischer Aussagen. Die Berliner RapidUsertests entpuppen sich in diesem Zuge als einziger Dienstleister mit einer dezidierten Usability-Agentur im Hintergrund, dessen Team aus Psychologen und Interaktionsdesignern spezifisch für diese Testings rekrutiert wurde.

Dennoch bieten fast alle Crowdtesting-Dienstleister im DACH-Raum sowohl Functional Testing als auch Usability Testing an (siehe Grafik). In der Regel stammen die Anbieter jedoch originär aus dem Feld des Functional Testing oder zeigen hier ihre Kernkompetenz.

Unterschiede zwischen den Anbietern von Functional Testing

Wie bereits angedeutet, bleiben die Anbieter für Functional Testing – zumindest im Rahmen ihrer Selbstdarstellung – weitestgehend vergleichbar:

  • Zusammenarbeit mit professionellen Testern mit häufig technischem Hintergrund. Teilweise werden Ottonormalverbraucher hinzugezogen, um einer Betriebsblindheit der Profis vorzubeugen (diese konzentrieren sich häufig auf die kritischen und besser vergüteten Bugs).
  • Abdeckung (fast) aller Gerätetypen, Konfigurationen und Betriebssysteme.
  • Mehrheitlich identisches Portfolio mit Sanity Tests (Kurztest auf kritische Bugs), Security Tests, Regression Tests (Bugtest bei Code-Änderung) und Lokalisierungstests für verschiedene Länder und Kulturräume. Applause, Testbirds und passbrains bieten zudem End-To-End Tests, bei denen der gesamte Bestellvorgang bis zur Reklamation durchlaufen wird. Testbirds bietet zusätzlich das sogenannte Global Real Device Network (GRDN) an. Bei dieser Leistung können Unternehmen direkt auf Geräte von Testern zugreifen und selbstständig Tests an diesen durchführen – was jedoch auch einen Mehraufwand für die Unternehmen bedeutet.
  • Dokumentation über Bugreports mit allen relevanten Daten und Screen Captures (Foto und Video).
  • Echtzeitmonitoring und Bugexport über proprietäre Cloudware.
Einige Anbieter locken mit individuellen Leistungen zu individuellen Preisen. Bei Functional und Usability-Testing-Anbieter Applause scheint der entscheidende Faktor jedoch die Mitarbeiterzahl ihrer Kunden zu sein: links das Online-Preisangebot für einen einfachen Test bei 1-25 Mitarbeitern, rechts dieselbe Leistung bei 101-250 Mitarbeitern (Quelle: Applause Webseite, Kollage)
Einige Anbieter locken mit individuellen Leistungen zu individuellen Preisen. Bei Applause scheint der entscheidende Faktor jedoch die Mitarbeiterzahl ihrer Kunden zu sein: links das Online-Preisangebot für einen einfachen Test bei 1-25 Mitarbeitern, rechts dieselbe Leistung bei 101-250 Mitarbeitern – die 10 zusätzlichen Teststunden wurden ungefragt dazugebucht (Quelle: Applause Webseite, Kollage)

Verwunderlich ist bei dieser Vergleichbarkeit und der starken Automatisierbarkeit der Projekte allein die Nebellandschaft der Preisstrukturen. So haben TESTTailor ihren Preiskalkulator mittlerweile von der Webseite genommen. Applauses Online-Kalkulator wirkt wie eine reine Leadgenerierung, die zudem für verschiedene Unternehmensgrößen verschiedene Preise ausgibt. Testbirds wiederum versteckt ihre Preise hinter einer Kryptowährung, die nach dem Fotolia-Prinzip funktioniert. Im Interview liegt der Aufwand für einen Crowdtest bei mindestens 1.500 €, während auf der Webseite von “ab 2.000 €” gesprochen wird. Die Nutzung der Cloud-Software muss zudem monatlich hinzugebucht werden.

Halbwegs transparent bleiben passbrains und TestIO, die klare – wenn auch unterschiedliche – Preismodelle ausweisen. Bei passbrains wird pro Projekt abgerechnet, während Unternehmen bei TestIO eine monatliche Pauschale zahlen, mit der unbegrenzt getestet werden kann. Ein komplett anderes Preismodell verfolgt dagegen Testeron. Die Crowdtest-Plattform versteht sich als Community, auf der im Sinne von Geben-und-Nehmen kostenlos getestet wird. Wer seine Applikation z. B. von zehn Leuten testen lassen möchte, muss selbst zehn Tests als Tester bestritten haben.

Aufgrund ihrer Transparenz punkten beim Functional Testing somit vor allem TestIO und passbrains.

Crowdtesting für Usability Testing

Das Crowdtesting für Usability gestaltet sich im Gegensatz zum Functional Testing komplexer. Das spiegelt sich auch in den Leistungen und methodischen Ansätze wider.

Zu den Anbietern von UX-Crowdtests gehören neben RapidUsertests und Applause noch Testbirds und passbrains. Auf Testemit können zwar ebenfalls Usability Testings durchgeführt werden, jedoch ist hier keine gesonderte Testerauswahl nach Zielgruppen möglich – eine Grundvoraussetzung für das UX-Testing. TestIO bieten auf ihrer Webseite ebenfalls UX-Testing an, arbeiten für diesen Service jedoch mit einer dezidierten UX-Agentur zusammen. RapidUsertests ist von allen der einzige Anbieter im Vergleich, der sich konkret und ausschließlich auf Usability spezialisiert hat. Die Plattform wird von der Userlutions GmbH entwickelt und betreut, die als spezialisierte Usability-Agentur auf ein Team aus Psychologen und Interaktion-Designer zurückgreift.

Die Crowd: Amateur schlägt Profi

Beim UX-Testing muss die Crowd zwei Dinge mitbringen: Unvoreingenommenheit sowie die Vorlieben und das Nutzerverhalten der jeweiligen Zielgruppe. Im besten Fall gehören die Tester selbst zur Zielgruppe. Die Tester sollten die Käufer genau widerspiegeln.

Dementsprechend groß muss die potentielle Crowd sein, aus der die richtigen Tester ausgewählt werden können. Applause versteht sich mit 300.000 Testern weltweit dabei als größte Agentur. RapidUsertests erwähnt jedoch im Interview, in Zusammenarbeit mit Partnerpanels bei Bedarf weltweit auf über 11,5 Millionen Tester zugreifen zu können. Solche Feinheiten sind oftmals nicht auf den Webseiten zu finden.

Selbst bei einem großen Testerstamm entscheidet am Ende jedoch, ob die Zielgruppe damit abgebildet werden kann. Applause und passbrains versuchen, diesem Anspruch über eine Mischung der Crowd aus Profitestern und Ottonormalverbrauchern gerecht zu werden. Für betreute Projekte werden UX-Experten aus der Community rekrutiert. RapidUsertests und Testbirds dagegen setzen bei ihrer Crowd vollständig auf Endverbraucher. Beim Managed Service betreuen bei beiden Anbietern Inhouse-Experten mit mehrjähriger UX-Erfahrung die Projekte. Sowohl Testbirds als auch RapidUsertests schaffen somit den Spagat zwischen Zielgruppen-Fokus auf der einen Seite und verlässlichen Experten auf der anderen Seite.

RapidUsertests geht dabei noch einen Schritt weiter und adressiert ein besonderes Problem beim Testing: die Übertestung. Bei Testern stellt sich bei einer hohen Testfrequenz häufig eine Art Betriebsblindheit ein. Die Tester schauen irgendwann nur noch auf die bekannten und häufigsten Fehler und haben auch die grundsätzliche User Journey dermaßen verinnerlicht, dass sie jedes Testdesign (betriebs-)blind durchspielen. Kleine Fehler, Widersprüche und Ungereimtheiten fallen dann häufig nicht mehr auf. RapidUsertests stellt deshalb sicher, dass ihre Tester maximal 8 Mal pro Monat zu Tests eingeladen werden.

Testeron fährt eine andere Strategie: Die Plattform versteht sich als Community, bei der das Geben und Nehmen im Mittelpunkt steht. Kernfokus liegt auf dem Functional Testing, Usability kann aber auch getestet werden (Quelle: Testeron Webseite)
Testeron fährt eine andere Strategie: Die Plattform versteht sich als Community, bei der das Geben und Nehmen im Mittelpunkt steht. Kernfokus liegt auf dem Functional Testing (Quelle: Testeron Webseite)

Die Ergebnisdokumentation: Die unmittelbare Reaktion zählt

Für eine sehr gute Usability ist eine reibungslose User Journey der aussagekräftigste Indikator. Und diese wird sehr unmittelbar und häufig unbewusst vom Nutzer wahrgenommen. Wie finde ich mich auf der Seite zurecht? Fühle ich mich hier wohl? Möchte ich hier meine Kreditkartendaten eingeben? Die Herausforderung, denen Crowdtest-Anbieter deshalb gegenüberstehen, ist das Einfangen der unmittelbaren Reaktionen, Gedanken und Gefühle der Tester.

Dennoch beschränken sich die meisten Anbieter beim Standardauftrag auf schriftliche Aufzeichnungen und Rating Scores, die teilweise erst im Nachhinein durch die Tester ausgefüllt werden. Diese werden zwar durch Screenshots oder Screencasts unterstützt, die jedoch erst im Nachhinein (Reproduzierung des Fehlers) aufgezeichnet werden. Eine Unmittelbarkeit der Nutzerwahrnehmung wird damit nicht erreicht.
Eine Alternative dazu sind die sogenannten Think-aloud-Videos. Bei diesen werden neben der Nutzerreise auf dem Screen die Emotionen der Tester in Echtzeit aufgezeichnet. Die Tester sind dabei angehalten, direkt und ungefiltert ihre Emotionen und Gedanken wiederzugeben und ihr Handeln zu kommentieren. Dadurch erhalten eCommerce-Betreiber eine sehr unmittelbare Aufzeichnung darüber, wie sich potentielle Kunden an welcher Stelle auf der Webseite zurechtfinden und fühlen.

Zwar bieten alle Crowdtesting-Dienstleister Think-aloud-Videos an. Nur bei RapidUsertests und Applause gibt es die Think-aloud-Videos jedoch standardmäßig als Dokumentation. Bei allen anderen sind diese limitiert (passbrains) oder gegen Aufpreis (Testbirds) erhältlich.

Die Leistungen: Für jede Entwicklungsstufe ein Test

Typische UX-Test-Kategorien sind bei allen Anbietern Prototyp- und Betatests sowie End-To-End-Tests. Kein Wunder: sie bilden die Meilensteine der Produktentwicklung.

Oftmals lohnt es sich jedoch, während der frühen Entwicklungsphase auch konzeptionell tiefer einzusteigen. So bieten RapidUsertests und die Testbirds zusätzlich Wettbewerbsanalysen sowie die Card-Sorting-Methode für die Entwicklung der perfekten Navigation. RapidUsertests ermöglicht darüber hinaus Tests, um die Wirkung eigener Werbemaßnahmen zu testen – eine gute Möglichkeit, dem nächsten Shitstorm vorzubeugen.

Die Leistungen können sowohl im (günstigeren) Self Service als auch im Managed Service eingekauft werden. Einzige Ausnahme bildet Applause, die ausschließlich auf Managed Service setzen. Testbirds und RapidUsertests haben ihre Service Level weiter ausdifferenziert, um mehr Budget-Flexibilität zu ermöglichen. Bei beiden gibt es einen weiteren Servicelevel (Self Service Plus), bei dem Unternehmen bei der Testerstellung unterstützt werden, die Testdurchführung jedoch selbstständig durchführen. RapidUsertests bietet zudem als vierten Servicelevel Konzeptionsworkshops an, in denen im Anschluss an einen UX-Test eine funktionierende Lösung entwickelt wird.

Klare Preisstrukturen, aussagekräftige Testdokumentation und - wie hier - eine hohe Transparenz darüber, wie so ein Crowdtestingprojekt für Usability eigentlich aussieht, findet man selten auf den Webseiten der Anbieter (Quelle: Rapidusertests Dashboard Demo)
Klare Preisstrukturen, aussagekräftige Testdokumentation und – wie hier – eine hohe Transparenz darüber, wie so ein Crowdtestingprojekt eigentlich aussieht, findet man selten auf den Webseiten der Anbieter (Quelle: Rapidusertests Dashboard Demo)

Die Preise: Lichtblicke im Nebel

Wie schon beim Functional Testing berechnet Applause die Preise individuell und projektbezogen, während die Kryptowährung bei Testbirds eher verunsichernd wirkt. Auf Nachfrage bei Testbirds kostet ein Test mit 20 Testern im Self Service 10 BirdCoins, was – je nach Menge der gekauften Coins – mindestens 2.200 € entspricht, zuzüglich der Nutzung der Cloudware.

Passbrains und RapidUsertests beweisen hier mehr Transparenz mit einer klaren Abgrenzung der Leistungen und Projektgrößen. So beläuft sich bei passbrains der Aufwand für einen vergleichbaren Test auf rund 1.390 €. Die Ergebnisse liegen binnen 5 Tagen vor.

Bei RapidUsertests liegen die Kosten je nach Testgeräten (Desktop vs. Mobil) zwischen 780 € und 1170 €. Die Ergebnisse erhalten Unternehmen hier bereits nach nur 2 Tagen. Kleinere Projekte (z. B. mit nur 7 Testern) ermöglichen sogar Testergebnisse binnen 24 Stunden.

Fazit

Beim UX-Testing sind vor allem zwei Dinge wichtig: die Auswahl der richtigen Zielgruppe und die Dokumentation der unmittelbaren Reaktionen. Diese Detailfragen werden in der Regel nicht auf den Seiten der Dienstleister erläutert, was eine direkte Vergleichbarkeit schwierig macht. Im Rahmen der Interviews haben sich dennoch klare Unterschiede herauskristallisiert:

  • Testbirds und RapidUsertests stechen mit einer klaren Endnutzer-Orientierung heraus.
  • Applause und RapidUsertests bieten als einzige Crowdtester standardmäßig und ohne Aufpreis eine vollständige Dokumentation in Think-aloud-Videos an.
  • Die höchste Preistransparenz bieten passbrains und RapidUsertests mit klaren Paketpreisen.

Gerade die Ungenauigkeit vieler Dienstleister bei der Angebotsformulierung im Usability-Testing erschwert die Einschätzung der Ergebnisse. Es empfiehlt sich deshalb, den Anbietern zu vertrauen, die sowohl ein ausgewiesenes Wissen zu Usability und Kaufpsychologie vorweisen können, als auch möglichst transparent mit ihrer Preisgestaltung und Ergebnisdokumentation umgehen. Diesbezüglich hat sich zum Anbietervergleich 2015 nichts geändert. In Bezug auf die genannten Kriterien überzeugt im Vergleich aller Anbieter vor allem RapidUsertests.

Kategorien
(Kostenlose) Services E-Business Essentials Workflow

Web Developer Checklist und Userium: Zwei nützliche Helfer für vergessliche Web-Entwickler

Gut, man muss nicht notwendigerweise vergesslich sein, um einen Nutzen aus den beiden Diensten zu ziehen, die ich im folgenden Beitrag vorstellen werde. Immerhin ist es kein einfaches Unterfangen, alle wichtigen Aspekte eines modernen und sauberen Webdesigns vollständig abzudecken. Jeder von uns wird sich im Laufe der Jahre seine eigenen Checklisten angelegt haben. Bei mir waren es stets die schmerzhaften Erfahrungen, die meine Checklisten nach und nach verfeinern halfen. Mit Userium und der Web Developer Checklist können sich angehende, aber auch durchaus schon erfahrenere Web-Entwickler einiges an Schmerzen ersparen.

checklists-f1

Userium – Usability-Unterstützung aus Finnland

Nina Patkai und ihre Firma aus dem finnischen Helsinki legen mit Userium eine umfangreiche Online-Checkliste zum Thema Usability auf Websites vor. Ziel ist es, die gebräuchlichsten Fehler bereits vor der Testphase auf Nutzerseite abzufangen. Userium basiert auf den Guidelines des W3C, integriert aber auch Erkenntnisse aus den vielfältigen Veröffentlichungen der Nielsen Norman Group und einigen anderen. Insofern darf man sicher sein, dass man auf jeden Fall keinen Fehler begeht, wenn man sich an Userium orientiert.

usability-checklist
Userium in seiner Online-Variante

Übersichtlich in Kategorien gegliedert, liefert Patkai vielfach Tipps und Hinweise, die man spontan als trivial bezeichnen möchte, die aber bei tieferem Nachdenken durchaus sinnvoll in eine Checkliste integriert gehören. Denn häufig sind es gerade die einfachen Dinge, die vergessen werden, etwa einen ordentlichen Kontrast zwischen Text und Hintergrund vorzusehen.

Userium kann online verwendet werden, ist aber zusätzlich als Printversion auf 7 A4-Seiten druckbar. So haben etwaige interne Tester auch gleich einen Aufgabenzettel, anhand dessen es sich leichter prüfen lässt. Userium steht kostenlos zur Verfügung.

Prädikat: Empfehlenswert

Web Developer Checklist – Work in Progress mit weiteren Verweisen

Vom Ansatz her umfangreicher angelegt als Userium, kommt die Web Developer Checklist von Sayed Ibrahim Hashimi und Mads Kristensen dennoch weniger umfangreich daher. Hier handelt es sich um den Beginn einer Checkliste für Web-Entwickler, der mehr Substanz gut zu Gesicht stehen würde. Lediglich die Basics sind derzeit grob abgedeckt.

web-developer-checklist
Web Developer Checklist – Interessanter Ansatz, aber erweiterungsbedürftig

Dafür verfolgt die Checkliste insofern einen interessanten Ansatz, als sie zu jedem Punkt weiterführende Links zu nützlichen Diensten oder Grundlagen, wie entsprechenden Guidelines, und ähnliche Infos anbietet. Das Projekt steht auf Github unter Apache-Lizenz zur kostenlosen Nutzung und vor allem auch zur tätigen Mitwirkung bereit.

Links zum Beitrag:

Kategorien
Design UI/UX

Usability-Desaster: Windows 8 ist eine einzige Enttäuschung

Jakob Nielsen wird nicht von jedermann gemocht, gehört jedoch unbestreitbar zu den größten Experten für nutzerfreundliches Design, die wir haben. Sein Werk „Designing Web Usability“ habe ich 1998 am Stück durchgelesen. In der Folgezeit kamen auch immer mal Einwürfe aus Richtung Nielsen, denen ich nicht stets so folgen konnte, aber im Großen und Ganzen macht man keinen Fehler, wenn man Nielsens Urteil zumindest Gehör schenkt. Ganz aktuell beschäftigte sich der Design-Experte mit Windows 8 und kam zu ganz klaren Aussagen.

Windows 8 ist weder für Neulinge, noch für Power-User brauchbar

Die Skepsis ist naheliegend. Auch ich kann mich nicht davon frei sprechen. Als Windows-Nutzer der ersten Stunde erscheint die völlige Abkehr von der bisherigen GUI wenig nachvollziehbar. Sicher, die Tablet-Variante des Redmonder Betriebssystems benötigt eine touch-freundliche Oberfläche, aber ich an meinem herkömmlichen PC doch nicht. Ist alles halb so wild, heißt es, der Desktop ist ja auch noch da. Dann wechselst du halt zwischen Modern UI und Desktop munter hin und her.

Auch Nielsen hielt diese doppelte Herangehensweise wohl spontan nicht für eine so gute Idee und machte daher die Probe aufs Exempel. 12 erfahrene PC-Nutzer lud der Experte in sein Usability-Labor ein. Diese sollten nun mit einigen gängigen Aufgaben konfrontiert werden. Dabei mussten sie sowohl ein Surface RT Tablet, wie auch einen konventionellen PC bedienen.

Das Fazit fällt vernichtend aus: So ist es den Testpersonen vielfach nicht gelungen, die gestellten Aufgaben zu lösen. Und dabei handelte es sich, man führe sich das noch einmal vor Augen, um versierte Anwender älterer Windows-Versionen. Nielsen identifizierte folgende Schwächen als maßgeblich für die schlechte Usability.

Desktop oder Start-Screen? Wenn man sich zwei Konzepte merken muss..

Es ist grundsätzlich schlecht, zwei grundlegend unterschiedliche Desktop-Umgebungen auf einem einzigen Gerät zu haben. Wohin muss ich gehen, um was zu erledigen? Ich muss einräumen, dass ich mich mit der Kritik voll identifizieren kann. Ich kämpfe seit etwas über einer Woche mit einem neuen Ultrabook mit Windows 8 und musste mir doch tatsächlich ein Buch kaufen, um einigermaßen produktiv mit Windows 8 in die Gänge zu kommen. Sicherlich, ich hätte auch rumprobieren können, aber, ich weiß ja nicht, wie sich Microsoft seine Nutzerschaft vorstellt, doch ich muss arbeiten. Ich habe keine Zeit, nach Funktionen zu suchen, von denen ich bislang im Schlaf wusste, wo sie zu finden sind. Auch Nielsens Testpersonen hatten massive Probleme mit dem Wechseln zwischen den Welten.

Als total ungünstig identifizierte Nielsen die Tatsache, dass Browser sowohl in der Modern UI, wie auch auf dem Desktop gestartet werden können. Auch das ist mir schon passiert. Der Haken an der Sache ist, dass jeder Browser als eigene Instanz mit seinem eigenen Set an Browser-Tabs läuft. Mir ist bislang nicht klar geworden, wie ich es überhaupt geschafft habe, zwei Browserinstanzen zu starten.

Natürlich komme ich mit der Desktop-Umgebung im Verhältnis besser klar. Denn hier hat sich die Bedienung zwar in der Tiefe, aber nicht an der Oberfläche geändert. Die Modern UI hingegen lässt mich regelmäßig fast verzweifeln. Eine inkonsistente Nutzerfahrung konstatiert entsprechend auch Nielsen.

Wo sind denn die Windows hin?

Nielsen schlägt vor, Windows 8 umzubenennen. Window 8 wäre ein sehr viel besserer Name. Denn in der Modern UI gibt es stets nur ein einziges Fenster, das den kompletten Bildschirm ausfüllt. Das ist sicherlich für Tablet-Nutzer auf dem Surface eine sinnvolle Herangehensweise. Wenn ich jedoch neben Word, Excel, Photoshop und Yammer noch einen Skype-Chat offen halten will, dann kann ich die Modern UI dafür nicht gebrauchen. Überhaupt erschließt sich mir der Vorteil nicht, den es haben könnte, wenn ich eine App, die bislang ein schmaler Streifen an der rechten Ecke meines zweiten Bildschirms war, vollflächig auf 1080p vor die Nase gesetzt bekomme.

Auch Nielsen und seine Tester konnten sich mit den Einschränkungen der Modern UI in dieser Frage nicht anfreunden. Die Desktop-Umgebung wurde bislang glücklicherweise nicht abgeschafft. Denn wäre das der Fall, würde Windows, so wie ich es bisher verwende, vollkommen unbenutzbar. Für Einsteiger dürfte es indes nicht so prima sein, wenn sie willentlich entscheiden müssen, welche Skype-App sie denn nun installieren wollen. Die aus dem Store für Modern UI oder die von der Website für den Desktop? Gleiches gilt für andere Anwendungen.

Flache Bedienelemente und eine niedrige Informationsdichte

Windows 8 verfügt über eine komplett flache Bedienoptik. Alle Icons sind platt, es wird nicht mit Dimensionalität gespielt wie man das ansonsten kennt. Ob ein Element klickbar ist oder nicht, wird optisch durch nichts signalisiert. Der folgende Screenshot präsentiert ein schönes Beispiel:

Gut, dass man die Icons vermutlich klicken kann, hätte ich mir schon noch gedacht. Aber, dass „Change PC Settings“ ebenfalls ein Bedienelement ist, darauf wäre ich ohne weiteres nicht gekommen. Es wirkt eher wie eine Art Label für die Icon-Gruppe. Auf dem Surface führte die Bezeichnung bei Nielsens Testern übrigens zu weiteren Problemen. Die identifizierten das Surface nämlich gar nicht erst als PC.

Übernommen von Windows Phone ist die Modern UI typografisch ein interessantes Projekt. Große Kacheln, große Schriften. Alles wirkt übersichtlich. Das geht allerdings zu Lasten der Informationsdichte. Sprich, auf dem Bildschirm ist kaum noch was zu sehen. Scrollen wird zur Haupttätigkeit moderner Windows-User. Nielsen hat einen Screenshot parat:


Schwache Informationsdichte, scrollen ist vorprogrammiert


Die Website zeigt eine Informationsdichte, mit der man arbeiten kann

Man erkennt, dass, verglichen mit der Website der LA Times deutlich weniger Inhalte auf einen Blick erfasst werden können. Im Ergebnis muss man entsprechend für den Konsum der gleichen Menge an Nachrichten bei Nutzung der Modern UI mehr Zeit einplanen. Aber, soll einen ein Computer nicht produktiver machen?

In die gleiche Kerbe schlägt das Design der neuen sogenannten Live Tiles. Auch hier wird ein im Ansatz ganz nützliches Konzept durch die konkrete Ausführung ad absurdum geführt. Ich versuche bereits, vollständig auf diese Tiles zu verzichten. Denn sie bieten durch ihre gleichartige Art der Darstellung keine schnellen Differenzierungsmöglichkeiten. Mit anderen Worten: Ich muss viel zuviel lesen, um zu erkennen, welcher Tile jetzt der gesuchte ist.

Windows Charms Bar: Suchen, statt finden

Wie man die Windows-Charms-Bar öffnet, habe ich bereits heraus gefunden. Windows-Taste + C öffnet die neue kontext-sensitive Hilfeleiste, die je nachdem, wo man sie aufruft, ganz unterschiedliche Features bereit hält.

Nielsen ist der Auffassung, dass eine versteckte Funktion schon ganz grundsätzlich eine schlechte Funktion ist. Im Falle der Charms-Bar kann aber, jedenfalls nach meiner Erfahrung, nicht von Unzumutbarkeit die Rede sein. Weniger schön ist, dass die Kontextbezogenheit nicht so weit geht, dass Features, die im Kontext nicht verfügbar sind, gar nicht erst angezeigt werden. Klassiker und auch von Nielsens Testern bemängelt: die Suchfunktion. Diese steht auch in Anwendungen zur Verfügung, die keinen Gebrauch davon machen. Die Benutzung führt zu einer Fehlermeldung. Grober Unfug.

Gesten mit hohem Verwechslungspotenzial

Es passiert mir alle Nase lang. Ich führe eine Geste aus, von der ich einen bestimmten Effekt erwarte und es passiert etwas ganz anderes. Am häufigsten springe ich per unbeabsichtigter Geste zwischen Modern UI und Desktopn hin und her. Irgendwann, wenn ich mal das Win8-Buch gelesen habe, werde ich genauer herausfinden, was ich da falsch mache.

Neben eigenen Fehlern sind Gesten in Windows nach Nielsens Meinung bereits viel zu fehleranfällig angelegt. Probates Beispiel ist das Swipen von rechts nach links, das im Grunde horizontales Scrollen initiieren soll. Befindet sich der Finger oder die Maus jedoch zu weit im rechten Bereich des Screens führt der gleiche Swipe zum Öffnen der Charms-Bar.

Schlussendlich gelangt Nielsen zu dem Ergebnis, dass Windows 8 auf Tablets noch eine Chance hat, wenn die angesprochenen Designmängel behoben werden. Auf PCs sieht er Windows 8 jedoch nachhaltig als das falsche Produkt und empfiehlt, bei Windows 7 zu bleiben und auf Windows 9 zu hoffen…

Links zum Beitrag:

Kategorien
JavaScript & jQuery Programmierung

UICloud: Neuer Dienst für Designer und Webentwickler bietet mehr als 25.000 Elemente für die UI-Entwicklung

UICloud ist ein ganz frisches Projekt. Erst im Juli 2012 gestartet, kann es bereits zum jetzigen Zeitpunkt mehr als 25.000 UI-Elemente in mehr als 1.000 Sets vorweisen. Der gesamte Bestand ist kostenlos nutzbar, auf individuelle Lizenzvorgaben ist aber zu achten. Hinter dem Dienst steckt Jack Cai, ein Freelancer, spezialisiert auf Icon- und GUI-Design, der zwar chinesische Wurzeln hat, sich aber dennoch in Southampton ganz wohl zu fühlen scheint. Mit UICloud legt Cai sein Meisterstück vor. Die Plattform ist einfach zu bedienen, intuitiv ist das richtige Wort. Auf UICloud zu stöbern macht regelrecht Spaß. Das Design ist modern und elegant, ie Inhalte übersichtlich angelegt. Genug Gründe also, sich die Plattform einmal näher anzusehen.

UICloud: Die Startseite kommt spontan bekannt vor

Mit einiger Wahrscheinlichkeit wird die Startseite die erste Seite sein, die Sie von UICloud zu sehen bekommen. Mein erster Gedanke war, ich wäre auf einem eben frisch relaunchten Google gelandet. Die Ähnlichkeiten sind offensichtlich: eine große Suchbox in der Mitte, eine dunkle Navigationsleiste am oberen Rand des Browserfensters, eine Schaltfläche mit der Aufschrift „Search“. Aber, warum auch nicht? Usability muss man nicht täglich neu erfinden. Das minimalistische Design, das für Google funktioniert, funktioniert ebenso gut für UICloud.

UIClouds Startseite

Ausgehend von der Startseite gibt es verschiedene Wege, sich dem enthaltenen Content zu nähern. Zunächst könnte man einen freien Suchbegriff verwenden, um zu schauen, welche Ergebnisse diese Vorgehensweise zu Tage fördert. Vorausgesetzt, es wird ein Ergebnis generiert, wäre das selbstverständlich der schnellste Weg zum Erfolg. Ich versuchte es mit dem Begriff „Metro“ und war durchaus zufrieden mit der Rückmeldung. Sowohl Metro UI CSS, wie auch das neue BootMetro Design-Framework ermittelte UICloud. Übrigens nutzte ich absichtlich ein eher spezielles Suchwort, um zu schauen, wie breit UICloud aufgestellt ist. Tippen Sie etwas generisches, wie „progress bar“, werden Sie sich vor Ergebnissen kaum retten können.

UICloud: So kann ein Suchergebnis aussehen

Verlässt man die Startseite, wandert die Suchbox an den oberen Bildschirmrand, wo sie in etwas kompakterer Ausführung von überall her verwendbar bleibt.

UICloud: Andere Wege, relevanten Content zu erreichen

Wenn Sie her zum Stöbern und weniger zum gezielten Suchen neigen, werden Sie von UICloud ebenso bedient. Die Funktion „Browse“ lädt Sie ein, den gesamten Bestand zu durchstöbern. Alle enthaltenen Sets werden in einer grafischen Liste mit lediglich den wichtigsten Informationen dargestellt. Jeweils 24 Inhaltselemente finden sich auf einer Matrix von 6 x 4 Screenshots. Inhalte lassen sich nach verschiedenen Kriterien sortieren. So ist es möglich, die neuesten Einreichungen, die bestbewerteten Pakete oder die populärsten nach Downloadzahlen anzeigen zu lassen. 45 Seiten mit rund 1.100 Sets gewährleisten, dass Sie schnell jede Menge Zeit verbrennen.

UICloud: Browsen durch die neuesten und populärsten Inhalte

Sie haben keine Zeit zu verleren oder suchen nach bestimmten Elementen, etwa Android UI-Elementen? Dann werden Sie wohl auf UIClouds Kategorieansicht zurück greifen. Diese Ansicht zeigt die Inhalte in strukturierter Form. Kategorien, wie Android, Apple, Windows, PSD und andere leiten Sie nicht in die Irre. Über die Wahl der vergebenen Kategorien könnte man streiten. Nicht alle sind offensichtlich sinnvoll.

UICloud: die Kategorieansicht

Unzweifelhaft nützlich ist die zweite Möglichkeit der Kategorie-Navigation. Hier sortiert UICloud Elemente nach ihren Anwendungsbereichen. Die Kategorien lauten Buttons, Forms, Sliders, Switches etc. und lassen wohl keinen Nutzer rätselnd zurück. Eine dritte Möglichkeit erlaubt die Suche nach Farb-Schemata. Das ist nützlich, wenn Ihnen noch das eine letzte Element in einer bestimmten Farbe fehlt.

Auf der Suche nach einer bestimmten Farbe?

UIClouds Einzelansicht: Alle wichtigen Fakten im Überblick

Egal auf welchem Weg man sich dem Gesuchten nähert, am Ende steht eine sehr informative, übersichtlich strukturierte Einzelansicht des UI-Sets.

UIClouds Einzelansicht bietet alle wesentlichen Informationen auf einen Blick

Die Einzelansicht zeigt einen oder mehrere große Screenshots des Elements oder Sets auf der linken Seite des Bildschirms. Bei mehreren Screenshots werden diese unterhalb des initial angezeigten Bildschirmfotos in Form einer Thumbnail-Galerie dargestellt. Rechts angeordnet finden sich die wichtigsten Informationen zum Produkt, darunter vor allem die zu beachtende Lizenz, sowie in welchen Formaten die Sets vorliegen und welche Dateien im Downloadpaket mitgeliefert werden.

Stellen Sie sicher, dass Sie in jedem Falle genau auf die Lizenz achten. Zwar sind alle gelisteten Elemente kostenfrei zu verwenden, allerdings kann es vorkommen, dass sie nicht zu jedem Zweck frei zu verwenden sind. Unser Beispielelement Metro UI CSS steht unter der lberalen MIT-Lizenz, aber andere Sets können teilweise nur für private oder nicht-kommerzielle Zwecke kostenlos verwendet werden.

Das allseits bekannte und bewährte Rating-System auf der Basis zu vergebender Sterne kommt für das Bewertungssystem zum Einsatz, das von den Besuchern des Dienstes ohne Registrierung benutzt werden kann. Die Anzahl der Downloads wird neben der Anzahl der Besucher des jeweiligen Sets angezeigt. Eine Vergabe von Tags ist ebenfalls vorgesehen und kann ebenfalls frei von jedem Besucher vorgenommen werden. In Anbetracht der Lustigkeit verschiedener Mitmenschen wird man sehen, inwieweit Jack Cai dieses Feature auf Dauer halten will.

Links zum Download, zu den Demos und zur Originalquelle des Sets finden sich unterhalb des Screenshot-Bereichs. Alle Ressourcen sind auf UICloud selber gehostet. Auf diese Weise ist das Angebot gut vor 404 und anderen Späßchen, die einem mit extern eingelinkten Inhalten widerfahren können, geschützt. Sollten Sie Zweifel an der Aktualität der hinterlegten Version haben, können Sie natürlich jederzeit auf der Originalquelle nachsehen.

Wie aus dem Blog-Umfeld bekannt, ist es auch auf UICloud möglich, Kommentare zu den angebotenen Elementen und Sets zu hinterlassen. Momentan ist der ommentarbestand insgesamt noch überschaubar. Aber Sie können natürlich jederzeit in die Vollen gehen und den nächsten Flamewar vom Zaun brechen.

UICloud: Jeder kann Sets einreichen

Das schnelle Wachstum der UICloud könnte allein durch die Arbeit einer einzelnen Person nicht erreicht werden. So ist es naheliegend, das Wachstum im Wege des Crowdsourcing zu generieren. Jeder Besucher kann UI-Sets über ein einfaches Formular zur Überprüfung einreichen. Alle Vorschläge durchlaufen einen redaktionellen Prozess, in dessen Verlauf sie geprüft, auf Eignung evaluiert und dann veröffentlicht werden. Da die Einreichung nicht über direkte Uploads, sondern das Posten des Links zur Originalquelle erfolgen muss, sind Urheberrechtsverletzung relativ unwahrscheinlich. Zumindest würden derartige Verletzungen mit hoher Wahrscheinlichkeit im Rahmen der redaktionellen Prüfung auffallen. UICloud wendet sich direkt an die Entwickler der Elemente und ruft sie dazu auf, etwaige Fehler in der Präsentation zu reklamieren oder auch die Entfernung der Sets aus der Plattform zu verlangen, wo sie das für erforderlich erachten.

Natürlich gibt es auch das obligatorische Kontaktformular für Menschen, die typischerweise solche Formulare verwenden…

UICloud: Button Builder – WYSIWYG-Generator für CSS-Buttons

UICloud begnügt sich nicht damit, eine großartige Ressource für das Finden von User Interface Elementen zu sein. Stattdessen bringt einen Baukasten für CSS-Buttons mit, den Button Builder. Hier kann man sich seinen Wunschbutton über eine intuitive grafische Benutzeroberfläche basteln. Es gibt etliche Standard-Vorschläge. Diese können jedoch in vollem Umfang auf die eigenen Bedürfnisse angepasst werden.

Der Button Builder wird Ihnen auf den ersten Blick vertraut vorkommen und stellt insichtlich seiner Bedienung niemanden vor Rätsel:

UIClouds Button Builder

Auf einem Canvas sehen Sie den Button in seiner vorkonfigurierten Darstellung. Wenn Sie jetzt Änderungen durchführen, werden diese unmittelbar auf dem Canvas angezeigt. Unterhalb des Canvas finden sich weitere vorkonfigurierte Button-Vorschläge. Oberhalb des Canvas befinden sich die Schaltflächen, mit deren Hilfe das korrespondierende HTML und CSS generiert wird. Die unscheinbar wirkende, rechts angeordnete Tabelle ist das eigentliche Herzstück des Button Builders. Hier liegt die Funktionalität zum Finetuning der zu erstellenden Buttons. Auf den ersten Blick mag man vermuten, es handele sich um eine statische Tabelle, die lediglich die Werte des angezeigten Buttons listet. Aber klicken Sie mal in die tabelle inein, jeder Wert kann auf einfache Weise angepasst werden.

UICloud: Feineinstellung für die CSS Buttons

Zwar können wir nicht wirklich eine Knappheit an Generatoren für CSS-Output im Web erkennen, ähnlich ausgerichtete Tools gibt es wie Bäume im Wald, aber UIClouds Button Builder hebt sich von der Masse ab und ist eine sehr intuitiv bedienbare Web App. Zumindest ist es die beste App für diesen Anwendungsfall, mit der ich bis jetzt gearbeitet habe.

UICloud: das generierte CSS

Jack Cai erzählte mir, dass der Button Builder nur der Anfang einer ganzen Serie von kleinen Generatoren sein wird. In naher Zukunft soll es auf UICloud möglich sein, auch Tabs, Menus, Fortschrittsbalken und einiges mehr generieren zu lassen.

Social Media: UICloud informiert auf mehreren Wegen über Neuzugänge im Bestand

Wollen Sie auf dem Laufenden bleiben, was sich bei UICloud so alles tut, so stehen Ihnen zu diesem Zweck mehrere Möglichkeiten zur Verfügung. Da wären erst einmal Twitter oder Facebook. Aber auch ein RSS-Feed, sowie eine Mailing-Liste – old-school par excellence – stehen zur Verfügung.

Welchen Weg Sie auch wählen, wählen Sie einen!

Links zum Beitrag: