Jährliche Archive: 2013


Neue Kundenwebsite online: www.ellislaedle.de

Elli’s Lädle in Bruchhausen bei Ettlingen mit neuem Webauftritt: www.ellislaedle.de

Website Elli's Lädle Bruchhausen

Inhalte und Eckdaten des Projekts:

  • Beratung bei der Auswahl des Webdesigns, Anpassung vorhandener grafischer Elemente.
  • Entwurf der Seiten- und Inhaltsstruktur
  • Auswahl bestehender Fotos, Fotografieren noch fehlender Motive
  • Anpassung der Website für die Anzeige auf mobilen Geräten
  • Erstellung einer mobilen Einstiegsseite mit den wichtigsten Informationen rund um den Laden
  • Training der Kundin, so dass sie die Website zukünftig selber pflegen kann
  • Domain-Umzug und E-Mail-Einrichtung
  • Erstellt mit dem Jimdo Homepage-Baukasten
  • Projektstart: 07.10.2013, Abnahme: 07.11.2013

Mobile Einstiegsseite mit den wichtigsten Daten rund um den Laden auf einen Blick:

Mobile Schnellinfo Seite

Auch alle übrigen Inhalte der Website sind als optimierte Version für Smartphones verfügbar:

Mobile Website Elli's Lädle


Neue Kundenwebsite online: www.gabis-kiddys-club.de

www.gabis-kiddys-club.de

Website Gabis-Kiddys-Club

Inhalte und Eckdaten des Projekts:

  • Beratung bei der Auswahl des Designs, Anpassung vorhandener grafischer Elemente.
  • Entwurf der Seiten- und Inhaltsstruktur
  • Auswahl bestehender Fotos, Fotografieren noch fehlender Motive
  • Anpassung der Website für die Anzeige auf mobilen Geräten
  • Training der Kundin, so dass sie die Website zukünftig selber pflegen kann
  • Erstellt mit dem Jimdo Homepage-Baukasten
  • Projektstart: 30.09.2013, Abnahme: 16.10.2013

Mobile Webseite Gabis-Kiddys-Club


Apps für UX testing von Smartphones und Tablets

Frisch aufgetankt mit Inspirationen von der Mobile HCI Konferenz in München wollte ich mich die letzten Tage dran machen, ein Testsetup für Usability Tests von mobilen Geräten zusammen zu stellen. Irgendwie hatte ich gehofft, dass es mittlerweile etwas Professionelleres gäbe, als Webcams, die mit Klebeband an selbst gebaute Gestängekonstruktionen geklebt werden und den Teilnehmer zwingen eine Stunde regungslos sitzen zu bleiben.

Ein Smartphone oder ein Tablet bringt an sich ja alles mit, was man zum Aufzeichnen eines Usertests braucht. Es sollte also doch möglich sein eine App zu bauen, die den Usertest aufzeichnet mit dem Video des Teilnehmers, dem Ton und der Aufzeichnung des Bildschirms. Leider steht dieser Idee im Weg, dass Apps aus Sicherheitsgründen untereinander nur eingeschränkte Zugriffsrechte haben, was hauptsächlich der Aufzeichnung des Bildschirms im Weg steht. Hier ein vergleich der momentan verfügbaren Apps zum Aufzeichnen von Usability Tests:

iOS Apps

Aufgrund der Zugriffsbeschränkungen für Apps unter iOS gibt es keine universelle Lösung um UX Tests für Websites UND Apps aufzuzeichnen.

UX Recorder

http://www.actualinsights.com/go/ux-recorder/

Preis: Einzel-Session 1,79 EUR, 5er Pack 6,99 EUR, unlimitiert 54,99 EUR

iPad App mit der ihr nur Webseiten testen könnt, keine Apps. Kann als Testversion installiert werden, mit der Einschränkung, dass man nur 30 Sekunden Sessions aufzeichnen kann. In meinem Test traten deutliche Performance-Probleme auf, Reaktionen auf Klicks und Zooming waren zum Teil stark verzögert, die App stürzte auch mehrfach ab.

Das ist der Einstiegsscreen, auf dem man die Tests anlegen und verwalten kann. Einstellen lässt sich die Bild-in-Bild Position, die Videoqualität, Aktivieren/Deaktivieren der Soundaufnahme, Aktivieren/Deaktivieren der Screen Gesture Anzeige im Ergebnisvideo:

Screenshot UX Recorder

Das ist der Recording Screen. Während der Aufzeichnung wird das Bild-in-Bild ausgeblendet. Ansonsten gibt es nur noch oben die Adresszeile:

Screenshot UX Recorder

Fertige Sessions erscheinen in der Übersicht:

Screenshot UX Recorder

Im Ergebnisvideo werden Gesten mit pinkfarbenen Markern angezeigt. Wie ihr hier sehen könnt, ist die Nutzung der internen Kamera für die Aufzeichnung des Teilnehmervideos nicht optimal, da man den Teilnehmer bei normaler Sitzposition nicht unbedingt im Bild hat und man oft mehr Hände als Gesicht aufzeichnet. Tonaufzeichnung über das eingebaute Mikro funktioniert dagegen sehr gut.

Screenshot UX Recorder

Fazit: Die Bedienung des Tools ist sehr einfach und es lässt sich ohne großen finanziellen Einsatz testen. Durch die Beschränkung auf Website Tests ist die App jedoch nicht universell einsetzbar. Weiteres Manko ist die Stabilität und die Performance der App. Für mich als Nicht-iTunes-Nutzer stellt sich als zusätzliche Herausforderung: wie bekomme ich die Videodateien vom Gerät runter? Export ist möglich nach iTunes, in die Dropbox und in die Camera Roll. Die Dropbox App unterstützt aber nur Uploads die maximal 200 MB groß sind. Das 30 Sekunden Video ist allerdings schon 16 MB groß…

Magitest

http://magitest.com/
https://itunes.apple.com/us/app/magitest/id580459701?ls=1&mt=8

Preis: Magitest App für Browser-Tests 44,99 EUR, Magistest Native SDK zum Testen von Apps 44,99 EUR.

Mit der Magitest App kann man Websites und Apps testen. Zum Testen von nativen Apps muss man allerdings den Quellcode der Magitest App in den Quellcode der App integrieren. Dafür steht das Magitest Native SDK zur Verfügung. Letzteres habe ich nicht ausprobiert.

Einstiegsscreen mit den Einstellungen für die Testsitzung:

Magitest Screenshot

Ansicht während der Aufzeichnung:

Magitest Screenshot

Nach Abschluss der Sitzung wird das Video direkt gerendert:

Magitest Screenshot

Auch hier werden die Gesten im Ergebnisvideo mit pinkfarbenen Markern hervorgehoben:

Magitest Screenshot

Fazit: Auch diese App ist einfach zu bedienen. Sie läuft zwar stabil, zeigt aber wie auch der UX Recorder deutliche Performance Probleme, was zu einer starken Verzögerung beim Laden der Inhalte führt. Weitere Nachteile: es gibt kein gestaffeltes Preismodell.

Das Testen von nativen Apps über die Integration von Magitest Quellcode ist in der Praxis nur bedingt tauglich. Testet man projektintern, mag dieser Anpassungsaufwand noch zu leisten sein. Kunden, die nur einen Test einer nativen App wünschen, ist dieser Aufwand und Eingriff in den Quellcode nur schwer zu vermitteln. Die Ergebnisvideos werden in der Camera Roll abgelegt, so dass auch hier das Problem des Exportieren der Videos besteht.

delight.io

http://www.delight.io/

Preis: monatlich 3 Stunden Aufzeichnung 50$, 10 Stunden 150$, 30 Stunden 300$

delight.io ist ebenfalls eine Lösung, bei der native Apps getestet werden, indem Aufzeichnungs-Quellcode in den App Quellcode integriert wird. Die Aufzeichnungen werden hier allerdings nicht auf dem Mobilgerät gespeichert, sondern auf dem delight.io Server.

Die Oberfläche sieht ganz ansprechend aus:

Es gibt einen Testaccount, mit dem man 1 Stunde im Monat kostenlos testen kann. Etwas suspekt ist mir der Anbieter. Auf der Website finden sich keine Firmeninformationen, so dass ich die Speicherung sensibler Testdaten hier nicht empfehlen würde. Darüber hinaus finde ich es schlichtweg zu teuer, vor allem bei dauerhafter Nutzung.

Jailbreak Lösung

Die Übertragung des Bildschirms des iOS Geräts wird möglich durch „jailbreaken“ des Geräts. Ein komplettes Testsetup beschreibt capstrat.com auf: https://www.capstrat.com/posts/recording-usability-tests-iphone/. Hier sollte man sich aber bewusst sein, dass man sowohl Garantieansprüche für das Gerät verlieren kann, als auch Gefahr läuft, das Gerät zu beschädigen. Es sei hier nur der Vollständigkeit halber erwähnt.

Android

Es gibt keine App für das Aufzeichnen von Usability Tests auf Android Geräten. Für „gerootete“ Android Geräte gibt es zumindest Programme zum Aufzeichnen des Bildschirms, allerdings ohne Bild-in-Bild-Aufzeichnung der Testperson und ohne Sound.

Windows Mobile

Auch hier keine App, nicht mal ein Tool zur Bildschirmaufzeichnung…

Fazit

Das Ergebnis meiner Recherche ist ernüchternd. Leider gibt es keine App, die so ordentlich funktioniert, dass man sie bedenkenlos zum Testen einsetzen kann.

Dann werd ich mich morgen wohl doch mal dran machen, eine Webcam an eine Stange zu kleben… Als Einstimmung hier schon mal ein Interview mit Steve Krug vom 9.8.2013, der seinen Lösungsansatz beschreibt: http://www.peachpit.com/articles/article.aspx?p=2126861.


ZKM AppArtAward 2013

Ein wenig off-topic aber trotzdem interessant: Vergangenen Freitag war die Verleihung des ZKM AppArtAward 2013 in Karlsruhe.

ZKM AppArtAward 2013

ZKM AppArtAward 2013

Für mich war der spannendste Beitrag „Arart“ die App einer japanischen Künstlergruppe, die den Sonderpreis Augmented Reality Art gewonnen hat. Eine App erweckt statische Bilder zum Leben.

arart Augmented Reality Award
Die Gruppe hat unter anderem einige klassische Gemälde aufbereitet und die Illustrationen aus „Alice im Wunderland“. Wird eines der Bilder von der iPad-Kamera erfasst, beginnt eine Animation abzulaufen.

Schwer zu erklären, muss man selber ausprobieren. Die App gibt es hier: https://itunes.apple.com/jp/app/arart/id594400399. Die Gemälde findet ihr hier: http://arart.info/museum/

Was noch spannend war, war die musikalische Begleitung des Abends durch das DigiEnsemble Berlin – Musik, die nur auf Apps gespielt wird. Matthias Krebs, der Leiter des Ensembles hat in einem Vortrag Musik-Apps kategorisiert und vorgestellt. Spannend, welche Bandbreite es da mittlerweile gibt. Auch das kann man sich besser vorstellen, wenn man es sieht.

Hier ein Beispiel für ein klassisches Stück:

Was Eigenes:

Und hier noch ein Video, in dem man die Technik etwas detaillierter sieht:


Gut sichtbare AGB Checkbox

Hey, mal wieder ein Blogpost. Hatte die letzte Zeit nur auf meiner Facebookseite gepostet, weil es so bequem ist. Nachdem die Pagefeeds aber zunehmend untergehen, werde ich mich wieder häufiger im Blog äußern (hier ist ein Artikel zum Thema Facebook Page Algorithmen).

Bin heute auf ein nettes Detail gestoßen: am Ende des Bestellprozesses von buttinette.de bekommt man einen Tipp eingeblendet, wenn man mit der Maus über den „Kaufen“ Button fährt und die AGB noch nicht angeklickt hat. Prima Methode zur Fehlervermeidung beim Abschicken des Formulars:

AGB nicht angeklickt Tipp

Krasses Gegenteil hierzu: die Bahn Ticketbestellung. Hier muss man zunächst die Nutzungshinweise zum Kauf eines Onlinetickets bestätigen und auf einer späteren Seite die AGB. Beide Checkboxen gehen aber derart auf der Seite unter, dass ich, obwohl ich die Seiten regelmäßig nutze, oft vergesse einen der Haken zu setzen:

Bahn Buchung AGB 1

Bahn Buchung AGB 2

Woran liegt es? Die Elemente mit den verpflichtenden Angaben sind genauso gestaltet, wie der Rest des Inhalts. Es gibt keine optische Hervorhebung, anhand der Benutzer erkennen kann, dass für diese Elemente eine Eingabe erforderlich ist. Im ersten Beispiel kommt hinzu, dass die Checkbox mitten in der Seite platziert ist, und nicht am Ende. Die meisten Benutzer schauen sich in der Regel aber nur den Anfang und das Ende einer Seite genauer an, der Rest wird überflogen. Dazu ist es eher ungewöhnlich, dass man in der Mitte eines Bestellprozesses überhaupt eine verpflichtende Angabe machen muss.

Besser würde es durch:

  • Hintergrundfärbung der Elemente entfernen, die nur Daten anzeigen (Adressdaten, Reisedaten,…)
  • Verpflichtende Elemente am Ende der Seite platzieren, bevorzugt in der Nähe des „Abschicken“ Buttons wie im Buttinette Beispiel
  • Angaben, die der Kunde aktiv bestätigen muss, am Ende des Bestellprozesses bündeln.