User Experience Design


Übersicht Scribble Tools

Es ist eine Weile her, dass ich was über Scribble Tools geschrieben habe. In der Zwischenzeit hat sich vor allem in Sachen Mobile und Responsive Design Konzeption einiges getan, deswegen möchte ich euch eine Übersicht aller Scribble Tools vorstellen, die ich aktuell einsetze. Eine Anmerkung noch vorab: Bis auf Papier und eine iPad App arbeite ich zum Scribbeln komplett unter Windows:

Scribbles mit Stift und Papier oder am Whiteboard

Die ersten groben Ideen zu einem Produkt sammle ich fast immer „offline“ mit Stift und Papier. Nachdem ich die ersten 2-3 Hauptansichten des Produkts grob skizziert habe, steige ich auf „Online“ Tools um.

  • Ideen sammeln: Mit Stift und Papier kann ich mich auf die Produktidee konzentrieren, ohne von irgendwelchen technischen Problemen abgelenkt zu werden (die ja immer auftreten, wenn man am PC arbeitet… ;-). Zu Stift und Papier greife ich auch, wenn ich mich während der Feinkonzeption an einem komplexen konzeptionellen Problem festgebissen habe. Dann wirkt eine „Bildschirmpause“ oft Wunder.
  • Arbeiten in der Gruppe: Gestaltet man einen Entwurf in einer Gruppe, bieten sich Flipchart oder Whiteboard an, damit alle gut sehen können.
  • Ideenfindung mit dem Kunden: In der direkten Zusammenarbeit mit dem Kunden haben einfache, handgezeichnete Scribbles den Vorteil, dass sie mehr Raum für Diskussionen lassen. Sieht ein Entwurf zu aufwändig und perfekt aus, trauen sich Kunden häufig nicht, Änderungswünsche zu äußern.
Scribble mit Papier und Stift

Scribble mit Papier und Stift

Schnellcheck Papier Scribbles

  • Für erste Ideen, schnelle Grobentwürfe und Gruppenarbeit
  • Sehr günstig!
  • Positiv: Ablenkungsfrei, schnell und günstig
  • Negativ: Änderungen sind aufwändig, Elemente können nicht mehrfach benutzt werden

 

Powerpoint Scribbles

Powerpoint setze ich ein, wenn ich Grobentwürfe im Rahmen einer Präsentation vorstelle. Auch wenn es absehbar ist, dass es mehrere Abstimmungsrunden zu einem Grobentwurf gibt, nutze ich Powerpoint, um die Änderungen leichter einpflegen zu können.

  • Grobentwürfe in Präsentationen: Soweit es möglich ist, bereite ich für die erste Abstimmung mit dem Kunden bereits grobe Entwürfe vor. Vor allem für Kunden, die nicht täglich mit IT-Themen zu tun haben, ist es damit leichter, die Anforderungen an das Produkt zu formulieren. Auch die weiteren konzeptionellen Schritte lassen sich leichter ableiten. Da ich für Abstimmungstermine ohnehin immer eine Powerpoint Präsentation vorbereite, kann ich mich innerhalb einer Anwendung bewegen, wenn ich hier auch die Scribbles erstelle.
    Scribble Powerpoint

    Scribble Powerpoint

  • Grobe Prozess- oder Strukturentwürfe: Auch erste Skizzen für Prozesse und Strukturen, wie z.B. Bestellabläufe oder Seitengerüste lassen sich schnell und einfach in Powerpoint darstellen.

Schnellcheck Powerpoint Scribbles

  • https://products.office.com/de- de/professional
  • Für Grobe Scribbles im Rahmen von Präsentationen, Grobentwürfe für Abläufe und Strukturen
  • ab ca. 500,- EUR aktuelle Version Microsoft Office Paket, Office 2010 reicht aber auch (100,- EUR).
  • Positiv: Schnell und übersichtlich, kann direkt in Präsentationen verwendet und bearbeitet werden, Vielzahl anderer Verwendungsmöglichkeiten.
  • Negativ: Keine vordefinierten Scribble-Elemente, geringe Wiederverwertbarkeit von Elementen

 

Axure

Axure ist für große Projekte mittlerweile meine erste Wahl. Das Programm ist komplett darauf ausgelegt, umfangreiche Webprodukte und Apps zu scribbeln. Die Einarbeitung fällt relativ leicht. Auch dynamische Elemente lassen sich leicht erzeugen.

  • Für Oberflächen-Feinkonzept in umfangreichen Projekten, da es eine Menge Zeit spart:
    • Für Standard Interface-Elemente gibt es Vorlagen
    • Elemente, die man häufiger verwendet, kann man einmal zentral anlegen und danach wiederverwenden
    • Für dynamische Elemente, wie die Navigation, gibt es fertige Elemente. Damit fällt viel manueller Pflegeaufwand weg.
    • Es gibt Mechanismen, um das Verhalten von responsive Designs einfach im Prototyp zu zeigen.
  • Interaktive Prototypen: Mit wenig Aufwand kann man aus seinen Scribbles einen interaktiven Prototypen erstellen, den man für die Abstimmung mit dem Kunden nutzen kann oder für Usability-Tests.
  • Einfaches Teilen von Prototypen: Prototypen können direkt auf einen Server von Axure hochgeladen werden. So haben auch Kunden schnellen und einfachen Zugriff auf die Prototypen.
Scribble Axure

Scribble mit Axure

Schnellcheck Axure Scribbles

  • http://www.axure.com/buy
  • Feinkonzeption auch umfangreicher Projekte, interaktive Prototypen
  • 289,- US$ Standard Version, Pro Version 589,- US$. In der Pro Version könnt ihr Anmerkungen in die Scribbles eintragen und im Team an Projekten arbeiten.
  • Positiv: Einfache Bedienbarkeit, viele Konzeptionsvorlagen, Elemente wiederverwendbar, automatische Navigation, Prototypen einfach erstellen.
  • Negativ: Bei Kunden noch nicht sehr verbreitet. Falls die Anforderung besteht, Quelldateien weiternutzen zu können, ggf. Kompatibilitätsproblem.

 

Visio

Visio hat mir jahrelang treue Dienste für Scribbles geleistet. Der Vorteil ist, dass man das Programm für weit mehr als Scribbles einsetzen kann. Viele Kunden arbeiten zudem schon mit diesem Programm, so dass sie eure Scribbles bei Bedarf weiter bearbeiten können. Der Nachteil ist der Preis. Die Shapes für Benutzeroberflächen sind leider nur in der Professional Variante enthalten, die in der aktuellen Version 740,- EUR kostet. Ich selbst arbeite noch mit der 2010 Version, die völlig ausreicht und um einiges günstiger ist. Zum Kauf dieses Programms würde ich euch nur raten, wenn ihr noch andere Funktionen in Visio nutzt oder eure Kunden mit diesem Programm die Scribbles weiter bearbeiten wollen.

  • Scribbles für Benutzeroberflächen: Wie ihr in den Screenshots unten sehen könnt, hat Visio Professional etliche Shapes für grundlegende Elemente von Benutzeroberflächen. Standardoberflächen könnt ihr damit problemlos gestalten. Es gibt allerdings keine Hilfsmittel, um dynamische oder web-spezifische Elemente zu erstellen. Die Bedienung ist nicht annähernd so komfortabel, wie in Axure.
    Scribble Visio

    Scribble Visio

  • Use Case Diagramme, Workflows und Sitemaps: Neben Scribbles setze ich Visio für folgende weitere Konzeptionsaufgaben ein: Use Case Diagramme, Workflows und Sitemaps.
    Visio Workflow

    Visio Workflow

    Visio Use Case Diagramm

    Visio Use Case Diagramm

Schnellcheck Visio Scribbles

 

OmniGraffle für iPad

Die OmniGraffle App fürs iPad nutze ich, um Scribbles für Apps und mobile Webseiten zu erstellen. Man hat ein besseres Gefühl für das Format und die Dimensionen, wenn man direkt auf dem späteren Ausgabegerät entwirft. Mit einem Preis von 50,- € ist das die teuerste App, die ich jemals gekauft habe. Der Preis ist aber vertretbar, da die Bedienung der App komfortabel ist und man auch noch viele andere Diagrammarten gestalten kann (z.B. als Ersatz für Worksflows und Sitemaps in Visio).

Scribble Omnigraffle für iPad

Scribble Omnigraffle für iPad

Schnellcheck OmniGraffle Scribbles

  • https://www.omnigroup.com/omnigraffle
  • Scribbles für mobile Apps und Webseiten
  • 49,- EUR
  • Positiv: Einfache Bedienbarkeit, universelles Tool für vielfältige Aufgaben. Direkter Bezug zum Ausgabegerät.
  • Negativ: Medienbruch, falls Entwürfe am PC weiter verwendet werden.

 

Photoshop

Photoshop war zwar das erste Programm, das ich für Scribbles verwendet habe, heute benutze ich es dafür fast nicht mehr. Warum? Die Bearbeitung von Scribbles in Photoshop ist wesentlich aufwändiger, als z.B. in Axure. Photoshop bietet auch nur wenig spezifische Unterstützung für die Erstellung von Scribbles. Heute nutze ich es nur noch dann, wenn das Screendesign die konzeptionellen Überlegungen beeinflusst, z.B. wenn nur ein einzelnes Seitenelement neu gestaltet wird oder das Screendesign (aus welchen Gründen auch immer) vor der Konzeption steht.

Scribble Photoshop

Scribble Photoshop

Schnellcheck Photoshop Scribbles

  • http://www.adobe.com/de/products/photoshop.html
  • Scribbles, wenn das Screendesign schon feststeht
  • 23,79 pro Monat im Abo für die Vollversion. Zum reinen Scribbeln reicht aber auch Adobe Photoshop Elements für einmalig rund 80,- €
  • Positiv: Pixelgenaue Entwürfe, viele Grafikfunktionen
  • Negativ: Höherer Zeitaufwand für Erstellung, da keine Scribble-Optimierung

 

Fazit: Welches Scribble Tool empfehle ich?

Wenn ihr viele Scribbles erstellt…

legt euch Axure zu. Das Preis-Leistungsverhältnis ist klasse und es beschleunigt eure Arbeit ungemein.

Wenn ihr nur gelegentlich Scribbles erstellt…

nutzt das, was ihr schon habt: Powerpoint, Photoshop, Visio, Gimp, was auch immer. Denn dann lohnt sich die Anschaffung eines zusätzlichen Tools meistens nicht. Vor etlicher Zeit hatte ich auch mal das völlig kostenlose Scribble Plugin Pencil für Firefox vorgestellt. Damit kommt man auch sehr weit.



Gekaufte Facebook Fans und Likes erkennen

Ich werd den Eindruck nicht los, dass die Facebookseiten mit, nennen wir es „überdurchschnittlicher“ Aktivität durch gefälschte Facebook Fans und Likes in letzter Zeit deutlich zugenommen haben. Wenn es ein lokales Ein-Mann-Unternehmen schafft, ohne große Marketingaktivitäten und ohne überdimensionalen privaten Freundeskreis in 2 Wochen 500 Facebook Likes einzusammeln, riecht das schwer danach, dass der Aktivität mit Geld nachgeholfen wurde. Derartige Angebote sind im Internet ohne Probleme zu finden und preislich so attraktiv, dass es sich selbst kleinste Unternehmen leisten können, ihre Fangemeinde um eine dreistelligen Zahl anzuheben.

Warum macht man das? Klar: eine Seite mit vielen Likes wirkt (zumindest aktuell noch) populär und was viele andere gut finden, dem schließt man sich selbst auch schneller an. Falls ihr diesem Schwindel nicht aufsitzen wollt, gibt es hier 3 Kriterien, anhand derer ihr mit ziemlicher Sicherheit gefälschte Facebook-Aktivitäten erkennen könnt:

1. Aktivität auf der Seite im Verhältnis zu den Fans

Schaut euch zunächst mal an, was auf der Seite passiert:

  • Wie sieht das Verhältnis von Fans zu Likes, Kommentaren, Shares und Besuchen aus. 602 Fans aber nur 3 Likes zu einem Beitrag ist relativ wenig. Natürlich ist die Aktivität der Fans nicht jeden Tag gleich, schaut deswegen auf jeden Fall mehrere Beiträge durch.
  • Auffällig ist auch, wenn die Aktivität in den Posts sehr abrupt ansteigt (z.B. von 3 Likes pro Post auf über 500 in 2 Wochen), ohne dass es einen Anhaltspunkt in der Seite gibt über eine besondere Marketing-Aktion (wo, wenn nicht auf Facebook müsste die auftauchen…).
  • Auch wenn eine Seite dauerhaft eine geringe Aktivität hat, kann es ein Hinweis sein, dass die Fans kein echtes Interesse haben, sondern nur dafür bezahlt wurden, den Like Button zu drücken. Natürlich kann das auch ein Zeichen dafür sein, dass die Inhalte für die echten Fans nicht interessant sind, was natürlich auch nicht besser ist…
Anzahl Facebook Fans im Verhältnis zu Likes in Beiträgen

Anzahl Facebook Fans im Verhältnis zu Likes in Beiträgen

2. Wer ist in den Beiträgen aktiv?

Während man die Liste der Fans einer Seite in der Regel nicht einsehen kann, könnt ihr bei den Beiträgen sehen, wer aktiv ist. Es ist ja nicht so, dass man nur Likes für die Facebookseite kaufen kann, es gibt natürlich auch gekaufte „aktive Nutzer“, die regelmäßig die Beiträge liken oder teilen. Öffnet also mal die Liste der Likes und geteilten Inhalte und achtet auf Folgendes:

  • Herkunft: Anhand der Namen erhaltet ihr einen ersten Anhaltspunkt über die Herkunft der Likes. Ein Klick in das Profil der Personen gibt weiteren Aufschluss darüber, woher die Person kommt: Ist der Wohnort angegeben? In welcher Sprache verfasst die Person ihre Beiträge?
  • Interessen: Weniger konkret aber umso wichtiger ist das Interessensprofil (Fotos, Beiträge, Likes, Orte,…), das Anhaltspunkte liefern kann, ob die Person tatsächlich ein Interesse an der Seite haben kann. Fans einer SEO-Agentur, die weder eine eigene Firma haben, noch in der IT-Branche arbeiten (Indikator: Katzenfotos im Profil…) können keinesfalls einen Großteil der Fans ausmachen.
  • Auffälligkeiten im Profil: Fehlende Fotos oder Informationen, blocken von Freundesanfragen kann ebenfalls darauf hindeuten, dass es sich um ein bezahltes Profil handelt (Systemadministratoren ausgeschlossen…)

Wie gesagt, diese Analysen sind vage aber wenn ihr euch ein paar Profile durchschaut, erkennt ihr bei gefälschten Seiten relativ schnell ein Muster.

Deutlich wird das am Beispiel einer kleinen deutschen SEO-Agentur, die einen kurzen Beitrag über ihre Arbeitsweise gepostet hat – nett gemacht aber nicht spektakulär. Bei rund 1.000 Fans der Seite schaffte es der Beitrag auf fast 500 Likes, also jeder 2. Fan hatte auf Like geklickt. Schaut man sich die Likes genauer an, stellt sich heraus, dass die Mehrzahl der Likes aus dem nicht-deutschsprachigen Raum oder von deutschsprachigen Damen mittleren Alters kommen, deren Kerninteresse nicht unbedingt die Suchmaschinenoptimierung zu sein scheint (außer man kann damit mittlerweile seine Bejeweled Blitz Ergebnisse verbessern…). ;-)

Fake Facebook Beiträge und Aktivität

Fake Facebook Beiträge und Aktivität

Auch bei den Shares ist das Bild eher einseitig:

Fake Share auf Facebook

Fake Share auf Facebook

Stern TV hat neulich über dieses Thema berichtet und eigentlich ein ganz nützliches Tool gebaut: den Stern TV Facebook Like Check, mit dem man ermitteln konnte aus welchen Ländern die Fans einer Facebook-Seite kommen. Für diese Seite stammen 88,2% aller Fans aus Deutschland. Das hat mich etwas stutzig gemacht, da die händische Überprüfung einen deutlich höheren Anteil nicht-deutschsprachige Profile ergeben hat. Stern TV hat auf Nachfrage eingeräumt, dass der Facebook Like Check aktuell nicht mehr sauber funktioniert, da Facebook die notwendigen Daten nicht mehr zur Verfügung stellt (warum bloß…). Es bleibt also momentan nur die manuelle Überprüfung.

3. Kommentare checken

Auch die Qualität der Kommentare liefert Anhaltspunkte, ob die Fans tatsächlich bei der Sache sind. Für oben genanntes Beispiel gab es folgende drei Kommentare:

Fake Facebook Kommentare

Fake Facebook Kommentare

Unser indischer Fan war auch hier wieder aktiv, mit dem global und universell einsetzbaren Kommentar „Very nice“. Die beiden übrigen Kommentare „Cool…“ und „Na ja…“ sind eher… kurz gehalten oder anders gesagt: echte Euphorie, auf die eine 50% Like Quote hindeutet, sieht anders aus.

Was spricht gegen gekaufte Facebook Fans und Likes?

Auch wenn es sich verlockend anhört, sich relativ günstig einen ganzen Schwung Fans auf die Facebook-Seite zu holen, es gibt 3 Dinge zu berücksichtigen:

  • Eventuell Verstoß gegen das Wettbewerbsrecht: Das Landgericht Stuttgart hat vergangenen Monat gekaufte Facebook Fans mit gekauften Produktbewertungen gleichgesetzt und als irreführende Werbung bewertet. Damit ist es ein Verstoß gegen das Wettbewerbsrecht (aktuell allerdings noch nicht rechtskräftig, da in Berufung).
  • Laut Facebook AGB untersagt: Zumindest sagt Facebook, dass die AGB so zu lesen sind.
  • Weniger Sichtbarkeit bei echten Facebook Fans: Ebenso gravierend ist, dass ihr euren echten Fans viele Beiträge vorenthaltet und die echte Aktivität auf der Seite noch geringer wird. Facebook zeigt eure neuen Beiträge zuerst einem kleinen Teil der Fans an. Erst, wenn es Anzeichen gibt, dass der Beitrag für die Fans interessant ist (Likes, Shares, Kommentare), wird der Beitrag weiteren Fans angezeigt. Wenn ihr also sehr viele inaktive Fans habt, sinken eure Chancen, dass die echten Fans eure Beiträge sehen (und ihr müsst noch mehr falsche Fans kaufen…) Das gleiche Phänomen kann übrigens auch auftreten, wenn man die Facebook-internen Werbemaßnahmen nutzt.

Fazit

Die reine Anzahl an Facebook-Fans sagt nichts darüber aus, wie erfolgreich euer Geschäft ist. Wenn ihr nur 200 Fans habt, mit denen ihr euer Geschäft erfolgreich betreiben könnt, ist das völlig in Ordnung. Der Kauf von Facebook-Likes bringt rechtliche Probleme und kann eure Performance bei den echten Fans nach unten ziehen. Also Finger weg davon! Verteilt das Geld lieber in Form von Gutscheine an eure echten Interessenten.


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.


Usabilitytest und neues Redesign: Barcelona.de

Ein neues Redesign ist in Arbeit: das Reiseportal barcelona.de. Da wir schon ein paar Änderungen online haben, hier der Originalzustand der Seite:

Alte Startseite Barcelona.de

Welche Punkte nehmen wir beim Redesign in Angriff?

Design

Das Design der Seite ist schon ein paar Jährchen alt, deswegen werden wir es Schritt-für-Schritt modernisieren. Erster Schritt auf diesem Weg: das Redesign des Headers und erste Anpassungen in der Farbgebung. Hier zum Vergleich der alte und der neue Header:

Vergleich alter Header zu neuem Header

Folgende Änderungen haben wir bereits vorgenommen:

  • Headergrafik: Bisher war die Headergrafik recht dunkel und kleinteilig, einige der Bilder konnte nicht jedermann sofort als charakteristisch für Barcelona erkennen. Für die neue Grafik habe ich die Anzahl der Fotos auf 4 reduziert. Das zentrale Element, die Sagrada Familia, wird umrahmt von einer geschwungenen Linie, die zum einen eine Anlehnung an die Formsprache des Jugendstils ist und gleichzeitig das Meer symbolisiert. Der Verlauf der geschwungenen Linie führt die Blickrichtung auf das Suchelement und die Buchungsmenüpunkte. Das Logo überlappt jetzt nicht mehr mit der Hintergrundgrafik.
  • Farben: Den Blauton habe ich von einem eher gelblichen Blau in ein rötliches Blau geändert. Dieser Farbton symbolisiert mehr die Elemente, die man sich von einem Urlaub im Süden erwartet: Meer und blauer Himmel.
  • Hintergrundfarbe Navigation: Damit der Header ein geschlossenes Element bildet, hat die Utilitiesnavigation jetzt dieselbe Farbe, wie die Hauptnavigation. Der Hintergrund der Navigation zweiter Ebene ist jetzt weiß, was den Vorteil hat, dass auf der Startseite, wo bisher ein leerer grauer Balken zu sehen war, kein „leeres“ Element mehr erscheint und das Design insgesamt leichter wird.
  • Schriftfarbe: Die Schriftfarben habe ich auf weiß und blau reduziert.
  • Trennlinien: Die vertikalen Trennlinien zwischen den Hauptmenüpunkten habe ich entfernt
  • Icons: Die Icons der Utilities Navigation habe ich ebenfalls entfernt.

Noch offen ist die Frage der Menüpunkte oberhalb der Headergrafik. Meine Vermutung wäre, dass nur wenige Besucher diese Links verwenden. Das wollen wir aber noch mit einem Tracking verifizieren.

Usability

Ein erster Usabilitytest mit 5 Personen hat gezeigt, dass die Seiten und Elemente, die von barcelona.de bereitgestellt werden, weitest gehend gut zu bedienen sind. Bedien- und Qualitätsprobleme treten allerdings in den Elementen auf, die von externen Partnern bereit gestellt werden, wie z.B. die Hotel- und die Flugbuchung. Da dies zentrale Elemente der Webseite sind, versuchen wir momentan über Kontakt zu den Anbietern eine Verbesserung in diesem Bereich herbeizuführen.

Nächste Schritte

Als nächstes wollen wir die Struktur der Inhalte angehen. Aktuell gibt es sehr viele Einstiegspunkte in die Inhalte und wenig Gewichtung, was die Seite zum Teil etwas unübersichtlich macht. Ziel ist es, dass der Besucher auf den ersten Blick die wichtigen Informationen und Services im Überblick hat und sich das gesamte Angebot nach und nach erschließen kann.


Speed4Projects Website Redesign – Teil6: Konzept, Abstimmung und … Online!!! 1

Erst mal vorweg: die Seite ist online: http://speed4projects.de! :-) Klar, der letzte Feinschliff fehlt noch, aber das Hauptziel haben wir erreicht: seit heute hat Wolfram Werbung für die Seite geschalten und die Hauptseiten sind online.

Was ist seit dem letzten Schritt passiert? Nachdem das Basisdesign feststand, habe ich mich an das Website-Konzept (Pflichtenheft, Feinkonzept, wie auch immer ihr es nennen wollt) gemacht, die Entwürfe mit den Entwicklern abgestimmt und dann, ja dann wurde die Seite eben umgesetzt. Hier die Details zu den einzelnen Schritten:

Konzept

Der eine oder andere mag sich wundern, wozu man ein Konzept braucht, wenn man eine fertige Photoshop-Datei hat. Ich bin ein großer Anhänger dieser Form von Dokumentation, weil sie den Designer dazu bringt, sich im Detail Gedanken über sein Design und die Funktionalität zu machen. Zusätzlich reduziert es den Kommunikationsaufwand und die Anzahl von Korrekturen während der Umsetzung.

Folgende Inhalte sind im Konzept enthalten:

  • Strukturen (Sitemap, Seitenstruktur, Navigationskonzept,…)
  • Funktionsbeschreibungen (Suche, Registrierung, Login,…)
  • Design (Farben, Schriften, Bemaßungen, Beschreibung von Detailelementen, Grafiken,…)

Strukturen
Dieses Kapitel beschreibt den Grundaufbau der Seite. An dieser Stelle sollte man klare Bezeichnungen für alle Elemente einführen und diese durchgängig verwenden, z.B. auch in Dateinamen und in den Photoshop-Dateien.

Übersicht Seitenelemente Startseite

Funktionsbeschreibungen
Hier werden alle Funktionalitäten der Website beschrieben. Auch wenn es der 10. Registrierungsprozess ist, den ihr entwerft, es wird aufgrund der technischen Gegebenheiten immer wieder Abweichungen in den Lösungen geben, so dass es sich auf jeden Fall lohnt, auch die Funktionen zu beschreiben, deren Gestaltung scheinbar selbstverständlich ist. An dieser Stelle ist eine enge Abstimmung mit den Entwicklern erforderlich, um möglichst früh zu klären, welche Funktionalitäten umsetzbar oder welche Lösungen eventuell schon implementiert sind.

In diesem Kapitel arbeite ich bewusst mit Scribbles statt mit Reinzeichnungen. Das spart Zeit und ist bei Nachbesserungen schneller zu ändern. Zusätzlich zu den Scribbles gibt es eine kurze Beschreibung des Standardablaufs (eine Art reduzierte Use-Case-Beschreibung), sowie Anmerkungen zu Besonderheiten. Hier zum Beispiel die Beschreibung des Logins:

Interface Konzept Login

Design
Das dritte Kapitel enthält alle Informationen rund um das Thema Design. Da ich zur Optimierung der Schrift mit HTML-Dummys gearbeitet habe, habe ich die entsprechenden CSS-Formatierungen gleich mit ins Konzept gepackt:

Beispiel Schriftartentest

Auch bei den Beschreibungen der Einzelelemente habe ich zu den Bemaßungen möglichst viele Detailinfos mitgegeben – was zu leuchtenden Entwickleraugen geführt hat. ;-)

Beispiel Bemaßungen von Einzelelementen

Abstimmung

Die Programmierung der Website wurde von der werkraum GmbH in Karlsruhe übernommen. Beim ersten Treffen haben mir die Entwickler die Rahmenbedingungen des technischen Systems erläutert und ich ihnen den Design-Ansatz. Das zweite Treffen fand unmittelbar vor Beginn der Programmierung statt. Hier sind wir das Konzept noch mal im Detail durchgegangen und haben letzte Fragen geklärt. Dann ging es los…

Qualitätssicherung, Nachbesserungen und Online-Gang

Konzept übergeben und das war’s? Nö, auch während der Umsetzung ist unsereins keineswegs arbeitslos:

  1. Rückfragen der Entwickler: Ein Konzept ist nie so eindeutig und fehlerfrei, dass es ohne Rückfragen umgesetzt werden kann (außer man steckt Unmengen an Aufwand in die Überprüfung, aber wer will das schon bezahlen…). D.h. während der Umsetzung ist ein direkter Draht von den Entwicklern zum Designer notwendig, um missverständliche Passagen oder Fehler zu klären.
  2. Qualitätssicherung: Als UX-Designer sollte man während der Umsetzung nicht nur mit dem Pixellineal unterwegs sein, sondern die Website als Ganzes aus Sicht des Besuchers überprüfen: Passen alle Abläufe zusammen, stimmt die Performance, usw. Hier bitte vorher mit der Entwicklung klären, welche Seiten tatsächlich schon für eine Überprüfung bereit sind. Nichts ist schlimmer als ein Kommentar zu einer halbfertigen Seite „da fehlt aber noch was“. ;-)
  3. Inhalte: Dieser Punkt gehört sicher nicht zu den Kernaufgaben eines UX-Designers, in diesem Fall habe ich Wolfram allerdings dabei unterstützt, die bisherigen Inhalte seiner Website in das neue System umzuziehen. Bei dieser Gelegenheit konnten wir etliche Standards für Formatierungen und Strukturen der Texte festlegen und auch inhaltlich noch etwas nacharbeiten.

Wie eingangs bereits erwähnt, sind wir mit den Überarbeitungen noch nicht zu 100% fertig. Ich möchte trotzdem schon mal jetzt allen Beteiligten für die tolle Zusammenarbeit danken und wünsche Wolfram mit seiner neuen Seite viel Erfolg! :-)

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil5: Design Website

Und weiter gehts in die vorletzte Runde: das Design der Website. Hier noch mal zur Erinnerung der bisherige Stand:

Aktuelle Website

Auch hier möchte ich kurz die Vorgehensweise beschreiben, wie ich den Entwurf erarbeitet habe. Ausgangspunkt war, wie bei den vorangegangenen Schritten, die Analyse der Anforderungen und Zielgruppen. Wichtigste Zielgruppe der Website sind die Kaufentscheider. Für diese Gruppe müssen die Verkaufsargumente kurz, prägnant und überzeugend dargestellt werden. Für diesen Zweck habe ich im Hauptbereich der Startseite einen Teaser eingerichtet, der die wichtigsten Informationen über Speed4Projects enthält:

  • Um was geht es: Critical Chain = Projekte schnell und sicher zum Abschluss bringen (zusätzlich Einführung des Begriffs)
  • Wie: Kurze Skizze der Methode, Verweis auf den pragmatischen Ansatz der Methode
  • Warum: Übersicht der Vorteile + Verweis auf Erfolgsgeschichten bisheriger Kunden

Für die zweite Zielgruppe, die auf der Suche nach Informationen ist und bereit ist, sich mehr Zeit für die Seite zu nehmen, wurde noch ein Abspielbutton eingefügt, der ein Video öffnet, in dem Wolfram das Produkt erläutert.

Teaser Startseite

Hier nun der Entwurf wie das Element eingebettet in die neue Startseite aussehen wird. Man sieht, dass das grafische Element des Abspielbuttons gleichzeitig dazu dient, das Teaserelement optisch abzugrenzen und den Besucher auf die Kontaktmöglichkeit in der Sidebar zu leiten.

Alle übrigen Seitenelemente sind weit möglichst reduziert, um die Kernaussage im Vordergrund zu halten. Als einziges weiteres prominentes Element ist das Foto von Wolfram in der Sidebar eingesetzt, um zu unterstreichen, dass es sich um eine individuelle Beratung mit einem kompetenten und vor allem präsenten Ansprechpartner handelt.

Redesign Startseite

Die Inhaltsseiten sind vom Grundaufbau ebenfalls sehr schlicht gehalten, da die Seiten sehr viele Inhalte, vor allem auch Grafiken enthalten werden. Hier seht ihr eine Zusammenstellung verschiedener Elemente, die auf den Inhaltsseiten vorkommen können:

Design Inhaltsseite

Fehlt zur fertigen Seite also nur noch ein Schritt: die Implentierung. Jeder, der schon mal eine Website gebaut hat, weiß, dass jetzt die Tücken im Detail losgehen, denn wie im Entwurf siehts später nie aus… ;-). Mehr dazu im nächsten Teil.

Verwandte Artikel Speed4Projects Website Redesign


Speed4Projects Website Redesign – Teil4: Logo und Schriftart 3

Im diesen Schritt geht es um das Redesign des Speed4Projects Logos. Noch mal zur Erinnerung, so sieht das bisherige Logo aus:

Bisheriges Logo Speed4projects

Das neue Logo sollte, wie auch die neue Website, schlicht und seriös sein, die Farbpalette aus Grautönen, Schwarz, Weiß und Rot bestehen. Wolframs Wunsch war es, die Visualisierung eines Projektdiagramms in das Logo zu integrieren. Im Verlauf der Gestaltung haben wir davon allerdings Abstand genommen, da das Logo damit zu kleinteilig geworden wäre.

Zunächst habe ich mir noch einmal das alte Logo vorgenommen und die Punkte zusammengestellt, die notwendig wären, um ihm ein zeitgemäßes Design zu geben:

  1. Entfernen des Highlights oberhalb des Pfeils
  2. Anpassung des Rottons in eine dunklere Richtung, weniger aggressiv
  3. Raffiniertere Gestaltung des Pfeilsymbols
  4. Raffiniertere Typographie

Die ersten beiden Punkte wären zwar schnell umzusetzen gewesen, parallel hatten wir uns allerdings etliche Websites angeschaut, so dass sich für das Website Design ein stark reduziertes und filigranes Design herauskristallisierte. Dazu würde die kompakte Grundform des alten Logos nicht mehr passen.

Also habe ich Ideen gesammelt, wie sich das Logo komplett neu gestalten lässt. Hier einige Assoziationen zur Firma und zum Firmennamen:

  • Schnelligkeit und Fortschritt: Autorennen, Tachometer, Zielflagge, Bewegungsunschärfe, kursive Schrift, Pfeil
  • Projekt: Projektdiagramm, Diagrammelemente
  • 4: die 4 so ins Logo integrieren, dass sie mit der Projektvisualisierung oder einem der Geschwindigkeitssymbole verschmilzt
  • Voller Name vs. Initialen fürs Logo

Basierend auf diesen Überlegungen, habe ich erste Scribbles von Hand gezeichnet:

Erste Entwürfe neues Logo

Anhand dieser Scribbles konnte ich mit Wolfram zwei Aspekte klären:

  • Die Option „Logo aus Initialen“ haben wir verworfen. Der Firmenname sollte komplett ausgeschrieben werden.
  • Wenn man Speed4Projects in einer Zeile schreibt, bekommt die „4“ zwangsläufig eine sehr prominente Position in der Mitte. Stärker betont werden sollten allerdings die beiden anderen Komponenten des Firmennamens. Deswegen habe ich in den folgenden Entwürfen nur noch mit einem 2-zeiligen Aufbau gearbeitet.

Im nächsten Entwurf habe ich mich der Auswahl der Schriftart angenähert. Dazu habe ich in Word eine einfache Version eines Logo-Rohlings gesetzt. Danach habe ich mit verschiedenen Schriftarten und Schriftschnitten experimentiert. Die Wahl fiel auf die Variante mit der Tahoma-Schriftart (zweite von oben in der rechten Spalte). Auch hier waren die Auswahlkriterien: leicht und professionell. Zusätzlicher Vorteil: als Websafe Font, kann diese Schriftart für den gesamten Webauftritt ohne Mehraufwand und Zusatzkosten verwendet werden.

Speed4projects Auswahl Schriftart

Über diverse Umwege kam ich dann zu einer ersten Arbeitsversion des Logos, links unten:

Erste Arbeitsversion Logo

Mit dieser Arbeitsversion habe ich mich dann erst mal an das Design der Website gemacht, denn hier wurde meine Vorarbeit von den Programmierern benötigt. Erst als das Webdesign stand, habe ich mir das Logo noch einmal vorgenommen. Zuerst habe ich versucht, doch noch Pfeile in das Logo zu integrieren. Das hat aber in allen Varianten zu einer zu komplexen Darstellung geführt:

Weg zur finalen Logo Version

Über schrittweises Reduzieren bin ich dann zu folgender Variante gekommen:

Finales Logo Speed4Projects

  • Als grafisches Element ist nur noch die spitz zulaufende Linie als Andeutung eines Richtungspfeils übrig.
  • Damit das „Speed“ ordentlich schnell wirkt, habe ich es in Großbuchstaben und kursiv gesetzt.
  • Da Projekte das Kernelement des Geschäftsmodells sind, habe ich „projects“ zur Betonung in Rot gesetzt. Die Laufweite habe ich etwas erhöht, um mehr Platz in der ersten Zeile zu bekommen und die „4“ hochziehen zu können. Zusammen mit dem nicht-kursiven Schriftschnitt fängt die zweite Zeile damit auch die Bewegung der ersten Zeile ein. Es soll ja keine Hektik im Projekt aufkommen… ;-)
  • Die „4“ sollte weit möglichst in den Hintergrund treten, weswegen sie einen dezenten Grauton erhalten hat und am Ende der ersten Zeile steht.
  • Der Einzug der zweiten Zeile wiederholt sich als Stilelement auf der gesamten Website und soll ebenfalls die nach vorne gerichtete Bewegung unterstreichen.

So, und die nächsten Tage bekommt ihr dann das Webdesign zu sehen. Schließlich ist der Online-Gang für nächste Woche Montag geplant – übrigens 3 Tage früher als ursprünglich angesetzt. Die Zeit konnten wir durch gutes Projektmanagement herausholen. ;-)

Verwandte Artikel Speed4Projects Website Redesign