Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

RE: UX/UI – Team Kindle

Um ein besseres Verständnis für die Qualität einer guten Benutzeroberfläche zu bekommen, kann es hilfreich sein, sich einfach mal die Arbeit anderer anzuschauen und auf Unzulänglichkeiten abzuklopfen. Noch tiefer geht der Lernprozess, wenn man sich die Fehler nicht nur besieht, sondern auch ausklügelt, wie man diese vermeiden kann. Dieses Konzept anzuwenden war Aufgabe innerhalb des »RE: UX/UI«-Kurses bei Frank Rausch und Timm Kekeritz. Vertieft wurde das Ganze noch dadurch, dass alle Arbeitsschritte anhand der Sprint-Methode durchgeführt wurden. Dabei handelt es sich um einen in feste Abschnitte gegliederten Arbeitsablauf, der auf die schnelle Erstellung präsentabler Prototypen ausgelegt ist. Das in diesem Konzept vorgeschriebene Zeitziel von fünf Tagen wurde dabei auf fünf Workshop-Tage innerhalb des Semesters verteilt. Aufgabe an diesen Tagen war es, Schritt für Schritt ein Redesign einer beliebigen iOS-App zu erstellen.

Workshop Tag 1: »Fokus & Konzept«

Der Anfang des ersten Tages bestand naturgemäß darin, sich in Gruppen zusammen zu finden und danach die zu verbessernde App auszuwählen. In unserem Fall fiel die Wahl auf Amazons Kindle-App. Hier war im Zuge einer plattformübergreifenden App-Entwicklung einiges an iOS-Designstandards vernachlässigt worden und auch abseits dessen, fand sich einiges, an dem wir gerne Hand anlegen wollten.

Um den Sinn für die Probleme der App zu schärfen, war es nun Aufgabe, die Wege des Nutzers durch die App zu kartografieren d. h. zu schauen, wie man in ihr von A nach B gelangt. Mit einer groben Vorstellung dessen vor Augen, was wir an diesem Weg zu verbessern gedachten, schrieb nun jeder einen Pseudo-SZ-Artikel, in dem die bevorstehende Lobpreisung nach unseren angedachten Verbesserungen schon einmal vorweggenommen wurde. Mit nun geschärften Sinnen formulierten wir für unser Vorhaben noch einen OneSentence, in dem wir unsere Pläne prägnant in einem Satz verpackten. Die Ergebnisse des ersten Tages bereiteten wir in Heimarbeit noch auf und ergänzten sie mit WKW-Fragen (»Wie können wir …«), um noch näher an eine Lösung zu gelangen.

Kartografie des Problems

kartographie-1.jpgkartographie-1.jpg

kartographie-2.jpgkartographie-2.jpg

WKW-Fragen – Wie können wir …

Notizfunktion • Notizen aus dem Buch lösen? • Notizen für die Nachbereitung umfangreicher bereitstellen • die Anmerkungsfunktion vereinfachen? • kann man den Zugriff auf gemachte Notizen global lösen

Interface • unansehnliche Cover kaschieren? • komfortabler und zielgerichteter in einem Buch navigieren • die Fragen, die der Leser an das Buch hat besser in den Rechercheprozess einbeziehen • Wie kann man den Zugriff auf Bibliothek-Inhalte (Android: Burger-Button: Alle Elemente, Auf Gerät, Sammlung, Bücher, Dokumente, Zeitungen) eleganter lösen? • Wie kann man andere Apps, wie Evernote, besser einbinden.

Lesen • einen zielgerichteteren Einstieg in ein (Sach-)Buch ermöglichen? • allgemein die Lesbarkeit verbessern? • den Wiedereinstieg in ein Buch beschleunigen?

»SZ-Artikel«

zeitungsartikel.jpgzeitungsartikel.jpg

Kindle erfindet Recherche neu! Die neuste Version von Amazons Lese-App dürfte Wissensdurstigen weltweit die Arbeit erleichtern.

Nach dem in den letzten Erneuerungen von Amazons E-Read-Lösung bereits grobe Patzer der frühen Versionen beseitigt wurden, ist der weltweit größte Onlinehändler nun dazu übergegangen auch in den Hinterzimmern seiner App aufzuräumen.

Besonders Menschen, die sich bei der Verwendung der Software zu Recherchezwecken stets nach einem sinnvollen Management der herausgesuchten Informationen gesehnt hatten, wurden nach langem Warten für ihre Geduld belohnt. Notizen liegen jetzt nicht mehr ungeordnet im Klappentext der Lektüre rum, sondern können sinnvoll verschlagwortet, sortiert oder sogar aus dem Buch herausgelöst werden. Das auch die Anmutung der gesamten Oberfläche nun viel harmonischer daherkommt und auch die letzten Schnitzer in Punkto Lesekomfort beseitigt wurden, erscheint da fast zweitrangig. Bravo Amazon!

2017_02_22_Incom_Abgabe_Skizzen.png2017_02_22_Incom_Abgabe_Skizzen.png

OneSentence™

»Kindle ist eine Bücher-App, mit der Menschen, die lesen und mit Texten arbeiten, komfortabel Bücher konsumieren und mit Hilfe der Notizfunktion den Inhalt bequem nachbereiten können.«

Interviews

Anpassung an die eigenen Bedürfnisse, z. B. Schriftgröße, ZAB, Schriftart etc. sollte global geregelt werden können, und gut sichtbar sein, so dass meine Nutzer die Funktion sofort finden. – Justin, Architekt, 5. Sem. FH;P

Buchliebhaber, präferiert Bücher. Toll, dass man die Bücher in der Tasche hat und sich Bücher nach Stimmung aussuchen kann. Lesezeichenfunktion ist super. Automatische Wikipedia-Suche und Übersetzung ist super. Notizbuch habe ich nicht gefunden, Vielleicht beliebte Markierungen?. Prozentanzeige ist toll. – Julia Ullrich, Urbane Zukunft, Master Studentin FH;P


– Wie kann man die Basis- und Notizfunktion verständlich machen (Erklärung zu den Basisfunktionen. Film?)

– Wie kann man den Text intuitiv vergrößern, verkleinern? (User benutzte Pinch to Zoom).

– Wie kann man den Weg zur »Notiz-Erstellen-Funktion« vereinfachen?

– Wie kann man die Icons allgemein verständlicher machen? (User konnte Icon der erstellten Notizen nicht »entschlüsseln«)

– Wie kann man die Notizen global einsehen? (Gemachte Notizen liegen nur im jeweiligen Buch vor)

– Wie kann man den Zugang und die Bearbeitung der Lesezeichen lokal und global vereinfachen.

– Wie kann man die Notizfunktion Lektoren-gerecht erweitern (Durchstreichen, Bemerkungen etc.) und die Korrekturen in externe Programme wie »InDesign« oder »Word« übernehmen?

– Wie kann man den Vorgang der Notizen-Bearbeitung eindeutiger gestalten? (User benutzt einen Finger um die Notiz direkt zu bearbeiten und zu öffnen, anstatt das Bearbeiten Icon zu benutzen.)

Workshop Tag 2: »Wireframes«

An Tag zwei sollten die bisher nur als Konzept vorhandenen Ideen, nun erstmal visualisiert d. h. gewireframed werden. Wir legten also, basierend auf unserem User-Journey, erste grobe Designs auf Papier an. So bekamen wir langsam ein Gespür dafür, was wo, auf welchem Screen zu sein hatte.

Die in der Session erarbeiteten Ergebnisse setzten wir dann zum nächsten Termin in digitaler Form um.

Buch öffnen

wireframes-open-book.jpgwireframes-open-book.jpg

Notizen erstellen

wireframes-taking-notes.jpgwireframes-taking-notes.jpg

Workshop Tag 3: »Sketch«

Die nun ausgereiften Wireframes mussten als nächstes in echtes Screendesign verwandelt werden. Um dabei Chancengleichheit zu schaffen, bestand der dritte Tag aus einem allgemeinen Sketch-Einführungskurs in dem die Grundlagen und nützliche Kniffe im Umgang mit dem Tool vermittelt wurden.

In den Wochen zwischen den Workshops wandten wir unsere frisch erworbenen Sketch-Kenntnisse an und erstellten zu unseren Wireframes die passenden Screendesigns.

Workshop Tag 4 & 5: »Prototyping»

Da ein wirkliches Urteil über die Nutzbarkeit irgendeiner Sache nur dann gefällt werden kann, wenn man diese Sache tatsächlich benutzt, war es nun an der Zeit einen Prototypen zu bauen. Nur wie? Um dieser Frage vorweg zu begegnen gab es an Tag Vier erstmal einen Crash-Kurs in Sachen Prototypung-Tools. Die ausführlichste Demonstration bekam dabei Invision. Naheliegend, dass auch wir für unseren Prototypen auf diese Anwendung setzten. Bevor wir uns aber daran machen konnten, mussten zunächst die letzten Fehler aus unseren Screens verschwinden. Diesem Ziel widmeten wir die restliche Zeit des Tages.

Da es sich bei dem nächsten Termin um eine Einzelkonsultation in Berlin handeln würde zu der wir ein nahezu fertig ausgearbeitetes Konzept und Prototypen demonstrieren wollten, war nun Eile geboten. Innerhalb der nächsten Woche waren die Screens aufgearbeitet und ein Testfähiger Dummy unserer App stand zum Testing bereit. Bei der Konsultation wurden wir noch auf einige Kleinigkeiten aufmerksam gemacht die wir in der Folgewoche ebenfalls ausmerzten.

Endergebnis

Öffnet man die Kindle-App so wie man sie derzeit aus dem App-Store laden kann, fühlt sich alles irgendwie angestaubt und behäbig an. Das Hauptmenü ist bemüht den Look der Amazon-Website zu transportieren und im Buch blättert man unnötiger Weise durch nicht wirklich vorhandene Seiten. Typografisch hat die App – ebenso wie der Reader, zwar in der letzten Zeit enorm zugelegt. Das Potential, welches nicht zuletzt durch die Entwicklung und Einführung des Bookerly Fonts, aber möglich wäre, schöpft Amazon nicht aus. Wir haben im Zuge unseres Redesigns das Hauptmenü ordentlich entschlackt und aufgehübscht. Vor allem indem wir den faulen Burgerbutton verbannt und seine notwendigen Unterpunkte sinnvoll in der Oberfläche verteilt haben. Die Leseansicht haben wir um ein praktisches Swipe-Out-Menü erweitert, das in Kombination mit unserem ebenfalls neuen Fortschrittsbalken, eine komfortable Navigation in dem nun komplett von oben nach unten durchscrollbaren Buch ermöglicht. Nebenbei haben wir die Möglichkeiten der Schriftkonfiguration auf ein sinnvolles Maß eingedämmt und schützen den Leser so vor etwaigen Verschlimmbesserungen seinerseits. Und bei all dem haben wir es des Weiteren noch geschafft, eine visuelle Verbindung zu der Amazon-CI aufrecht zu erhalten.

screen-shelf.jpgscreen-shelf.jpg

screen-cover.jpgscreen-cover.jpg

screen-font-size.jpgscreen-font-size.jpg

screen-notes Kopie.jpgscreen-notes Kopie.jpg

Kennwort: Kindle

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Timm Kekeritz foto: Frank Rausch

Zugehöriger Workspace

RE: UX/UI

Entstehungszeitraum

Wintersemester 2016 / 2017