Website

About

LIAM HOLTHUSEN

Portfolio

Besuchen Sie mich gern auf meiner Webseite www.l14m.com

Liam HolthusenSchifferstr. 2028832 Achimlholthusen@stud.hs-bremen.de

Ich bin 23 Jahre alt, studiere Medieninformatik an der Hochschule Bremen und arbeite derzeit in der Forschungsgruppe für Rechnernetze und Informationssicherheit.

Kontakt

HSB-Webmail Client

ProjekteWährend meines Studiums konnte ich bereits viele Erfahrungen im Bereich User Experience sammeln. In diesem Dokument gebe ich anhand eines Beispiels einen Einblick darüber, indem ich dokumentiere wie ich Usability Probleme identifiziere und anschließend Lösungen dazu entwickle. Das Beispiel stammt aus dem Modul “Human-Computer-Interaction” und beinhaltet alle Arbeitsschritte, die zum Finden und Lösen von Usability Problemen notwendig sind.

RechercheEin Usability-Problem ist alles in einem Produkt oder einer Webseite, was einen Benutzer zu einem unerwünschten Ergebnis führt. Es ist relativ einfach zu erkennen, wenn Benutzer Probleme mit einer Benutzeroberfläche haben. Um das Problem zu finden, haben wir innerhalb unserer Gruppe nach Problemen in Webseiten und Apps gesucht, die unseren Alltag begleiten. Relativ schnell konnten wir uns auf ein geeignetes Beispiel einigen. Wir entschieden uns dafür, den Webmail Client der Hochschule Bremen nutzerfreundlicher zu gestalten, da dieser gleich mehrere Probleme bietet, für die wir mit unserem neuen Client Lösungsansätze entwickeln können.

Usability ProblemeWie erwähnt bietet unser Beispiel mehrere Probleme, für die wir Lösungen entwickeln wollten. Zunächst mussten jedoch Ideen und Ansätze generiert werden. Dabei erstellten wir Mind-Maps, die uns dabei helfen sollten unsere Ideen festzuhalten und zu erweitern.

Uns allen war wichtig, dass der Client ein übersichtlicheres und moderneres Design erhalten sollte. Außerdem gefiel uns der Gedanke, dass es praktisch wäre, wenn man die Emails nach ihrem Betreff oder Empfängergruppen filtern könnte.

Es stellte sich aber auch heraus, dass wir bei kleineren Punkten unterschiedliche Ideen und Prioritäten hatten. Um potentielle Nutzer zufrieden zu stellen reicht es nicht aus, unsere eigenen Vorstellungen in das Projekt zu integrieren. So entschieden wir uns, eine Umfrage für unsere Zielgruppe zu gestalten.

User UmfrageUnsere Zielgruppe besteht aus allen Studenten und Angestellten der Hochschule Bremen. Einen Hauptaugenmerk haben wir allerdings auf Studenten niedrigerer Semester gelegt, da diese auf den Umgang mit dem Email Client angewiesen sind und meistens noch keine Erfahrung mit dem Umleiten der Mails haben.

Umfrage ErgebnisseAus den Ergebnissen der Umfrage konnten wir erkennen, dass mehr als 50% der 531 Befragten die Webmail Oberfläche mindestens einmal die Woche benutzen. Außerdem sind weniger als ein Drittel der befragten Personen zufrieden mit der derzeitigen Oberfläche, woraus wir schließen konnten, dass der Bedarf nach einer neuen Lösung vorhanden ist.

Hierbei muss berücksichtigt werden, dass diejenigen, die den Client nicht benutzen (42,4%) die Emails umleiten und größtenteils mit dieser Lösung zufrieden sind, sodass sie sich wahrscheinlich keinen neuen Client einrichten würden. Daraus konnten wir ableiten, dass etwa 60-70% der Befragten den neuen Client verwenden würden.

Des Weiteren konnten wir die Vorstellungen und Wünsche der User stärker charakterisieren. Den meisten Nutzern war es wichtig, den Client auf mobilen Geräten nutzen zu können, was uns dazu veranlasst hat, eine mobile Applikation zu designen.

Ergebnisse als Excel-Datei: l14m.com/share/results.csv

Wireframing und PrototypingMit den neu gewonnen Erkenntnissen wurden Wireframes und Papierprototypen hergestellt. Dabei war uns besonders wichtig, eine Preview und eine Filter Funktion zu designen, damit einschnellerer und übersichtlicher Umgang mit dem Client möglich ist.

Iteration I

Testen der PrototypenBeim Testen mussten wir leider feststellen, dass unsere Papierprototypen zu statisch sind. Die Preview Funktion konnte zum Beispiel nicht wirklich getestet werden. Wir nahmen uns also vor, so schnell wie möglich einen digitalen Prototypen mit Android Studio zu implementieren.

First Try - Android StudioDer Umgang mit Android Studio erschien zuerst sehr simpel. Schnell wurden Templates und Snippets gefunden, die wir in unser Projekt einfließen lassen konnten und die Preview Funktion abbildeten. Jedoch konnte in kurzer Zeit kein vernünftiger Prototyp hergestellt werden, da die verwendeten Templates zu komplex waren, um detaillierte Änderungen vorzunehmen. In so kurzer Zeit war es uns nicht möglich mehrere Snippets in unser Template zu integrieren. Mit viel Mühe entstand trotzdem ein erster Prototyp, an dem User die geplante Preview Funktion testen konnten.

GitHub Repository: https://github.com/liamHolt/hsbWebMail.git

EinblickEin kurzer Einblick in unseren digitalen Prototypen aus der ersten Design Iteration. Wir haben es geschaff, die Preview Funktion in eine Android Applikation zu implementieren und Email Inhalte als Vorschau oder über den ganzen Bildschirm anzuzeigen.

Iteration IIConstraintsDurch die Verwendung von Android Studio wurde der Prototyp in seiner Funktionsweise stark eingeschränkt. Wir entschieden uns daher mit dem Prototyping Tool “Adobe XD CC” zu arbeiten, damit die Probanden alle Funktionen testen können. Eine Einschränkung ist dabei zwar, dass keine lauffähige Applikation für Android Geräte (.apk-Datei) entsteht, jedoch liegt der Fokus darauf, zu testen ob unsere Funktionen sinnvoll als Implementierungsmuster für den Webmail Client sind.

Adobe XD CCMit “Adobe XD CC” ist es möglich, sehr schnell übersichtliche Interfaces zu realisieren und zu verknüpfen. Es ist das beste Prototyping Tool, das wir bis jetzt genutzt haben und hat sich für unser Projekt als sehr nützlich erwiesen.

TutorialFür unseren Email Client verwenden wir neu erfundene Funktionen und Gestiken, die für den Nutzer noch fremd sind. Damit die Funktionen gefunden und genutzt werden können, benötigt der User beim ersten Start der App ein Tutorial, in dem die wichtigsten Funktionen der App erklärt werden.

FilterfunktionDie Filterfunktion bietet dem Nutzer die Möglichkeit Register für Emails anzulegen, sodass er schnell überprüfen kann ob die Email an Ihn persönlich, Gruppen oder Aulis betreffend gerichtet sind. Auf diese Weise bleibt das Postfach übersichtlich und aufgeräumt.

PreviewEbenfalls neu ist die Preview Funktion. Über diese Funktion kann der Nutzer schnell den groben Inhalt einer Mail überfliegen, ohne diese extra öffnen zu müssen. In der Funktionalität des Previews wurden wir von Adobe XD eingeschränkt, da wir dort keinen “Long Press” simulieren konnten. Die Funktion ist jedoch im ersten Prototypen erfolgreich getestet worden und erleichterte das Navigieren enorm. Wir entschieden uns daher dafür auch in diesem Prototypen damit zu arbeiten, wenn auch in abgeänderter Form.

Einblick...Login

SucheMenü

Einstellungen

VerfassenSenden

NutzertestsUm zu überprüfen ob die Funktionalität vom Nutzer erkannt und verwendet werden kann, haben wir für unser MVP Nutzertests erstellt und durchgeführt. Der Nutzer sollte über das Smartphone einige Aufgaben erfüllen und stand dabei unter unserer Beobachtung. Nach Absprache und Einverständniserklärung des Nutzers haben wir außerdem sein Verhalten aufgezeichnet, um dieses auch nachträglich analysieren zu können.

Besonders wichtig war uns dabei zu überprüfen, ob der Nutzer durch unser Interface schneller mit den Aufgaben zurecht kommt, als mit dem alten Interface. Um dies zu überprüfen haben wir die gleichen Aufgaben auf beiden Oberflächen durchgeführt und die Zeiten verglichen.

Im Folgenden sind die Fragebögen für den Nutzer und unsere

ErkenntnisBeim Konzipieren der Nutzertests konnten wir mehrere Erkenntnisse gewinnen. Es ist hilfreich mehrmals die gleichen Fragen in abgeänderter Formulierung zu stellen, um zu überprüfen, ob die Fragen gewissenhaft beantwortet wurde. Auch das Manipulieren von regelmäßigen Mustern ist hilfreich um dies zu erkennen. (Siehe )Für unsere nächsten Tests haben wir gelernt, dass eine gerade Anzahl an Kästchen sinnvoll ist, damit der Nutzer nicht “mittel” ankreuzen kann. Diese Aussage liefert keinen Erkenntnisgewinn und sollte möglichst vermieden werden

Unsere NotizenUm das Verhalten der Probanden besser dokumentieren zu können, haben wir außerdem Protokolle für uns erstellt.

Ergebnisse

Die Ergebnisse zeigen deutlich, dass Nutzer mit dem neuen Interface weniger Zeit für die Aufgaben benötigen, als mit dem alten. Außerdem wird das Design von den meisten Nutzern als intuitiv, lebhaft und übersichtlich wahrgenommen.

Oft wurden Zusatzfeatures wie Studenpläne, Mensakartenscanner und ein Kalender als Wünsche angegeben. Da es sich bei diesen Vorschlägen um ausgelagerte Dienste handelt, können wir eine Implementierung nicht in Betracht ziehen. In einem Test beschrieb ein Nutzer eine Funktion, die vor dem Senden einer Nachricht fragt, ob diese wirklich gesendet werden soll. Eine solche Implementierung halten wir für sinnvoll und kann in einer erneuten Design-Iteration eingebracht werden.

Insgesamt sind wir mit den Testergebnissen sehr zufrieden. Der Umgang mit den neuen Funktionen wurde schnell verstanden und korrekt angewandt.

SkillsInnerhalb dieses Projekts wurde der Ablauf von iterativen Design-Prozessen an einem interessanten Beispiel erprobt. Die Skills, die ich mir dabei aneignen konnte, habe ich zusammenfassend aufgeführt.

Recherche und Identifikation von Usability ProblememSinnvolle Konzeption von Nutzerumfragen und deren AuswertungLösungsorientiertes Wireframing und PrototypingEntwickeln von Apps mit Android StudioPrototyping mit Adobe XD CCSinnvolle Konzeption von Nutzertests und deren AuswertungIteratives Designen und Arbeiten im Team