← Zurück zur Werkschau

Apps & Details

Ich lernte nicht nur die Human-Interface-Guidelines von Apple kennen. Frank lehrte auch viel über Typografie, insbesondere wie sich Schrift auf Bildschirmen verhält und wie man damit umgeht. Auch dachte ich nach den Kursen das erste Mal über Navigations-Pattern nach. Wie eine App aufgebaut sein muss, damit sie für Nutzende, allein durch die familirärität mit dem System, bedienbar ist ohne Dinge lernen zu müssen.

Im Kurs Apps & Details war das Kursziel eine Appneugestaltung.

Before and After
Panasonic Image App: Links vorher, rechts nachher

Der Fokus war es, das komplexe und unverständliche Interface der existierenen Panasonic Image App möglichst Systemnah zu überarbeiten. Dabei war es wichtig, dass die App nicht nur schöner aussieht, sondern auch einfacher zu bedienen ist. Wir sollten uns dabei an den Human Interface Guidelines von Apple orientieren, um eine konsistente Nutzererfahrung zu gewährleisten.

Sobald ich die Kamera kontrollieren möchte, sehe ich oben eine gespiegelte Ansicht des Kamera-Viewports. Mit ganz vielen Icons und Statusanzeigen — allesamt sind nicht interagierbar, da einfach der Kamera-Screen inklusive der Interface-Elemente gespiegelt wird. Unter diesem Viewport befinden sich dann diverse Buttons, teilweise mit seltsamen Platzierungen, teilweise aus unerklärlichen Gründen deaktivierte Buttons. Einige von diesen sind aber wirklich interaktiv und nutzbar, um Kameraeinstellungen zu ändern.

Einfacher wäre, wie auch in der Apple eigenen Camera App, einfach das Bild der Kamera zu sehen, mit einer Quick-Access Leiste alle Settings ändern zu können, und dann auf den Auslöser zu drücken.

Diese Strukturierung des Interfaces macht dann jegliche Kamera-Modi obsolet.

Es gibt sowohl Auslöser für Foto- als auch für Videoaufnahmen. Video/Foto-Modus: gestrichen. Dadurch, dass man ISO, Blende etc. Manuell einstellen kann, jede Einstellung aber einen „Auto“ Modus hat, fallen auch alle Programmautomatiken, wie z.B. „Blendenautomatik“ weg.

Viewport der Panasonic Image App
Neugestalteter Viewport mit diversen Interaktionsmöglichkeiten
Detailansicht der Quick-Access Leiste
Viewport beforeViewport afterViewport detail

Auch die Galerie passte ich an das Systeminterface an, mit einem zusätzlichen Indikator dafür, wo das Bild gespeichert ist—auf der Kamera, auf dem Handy oder beides.

Die Gallerie der Panasonic Image App
Die neugestaltete Galerie
Detailansicht eines einzelnen Bildes der Galerie
Viewport beforeViewport afterViewport detail

Dieser Kurs war kein politisches Mittel für mich. Er brachte mir aber Handwerkliche Skills, welche ich in bisher jedem Projekt seitdem anwendete.

Web Text Input Output

Politischer wurde es dann in meinem zweiten Kurs bei Frank, Web Text Input Output. Hier ging es neben einem Entwurfsteil viel um Leseverhalten, Unicode Formate wie UTF-8 und Opentype. Dies stellte den Output Teil des Kurses dar. Auch sprachen wir über banal erscheinende Dinge wie Cursorverhalten und generelle User-Experience Theorie.

Ich entwarf ein Schadensmeldungsformular für die Potsdamer Wohnungsgenossenschaft ProPotsdam.

Den Status Quo der Schadensmeldung ist denke ich am besten mit einem Video zu beschreiben.

Screenrecording von der aktuellen ProPotsdam Schadensmeldung

Diese habe ich radikal vereinfacht, indem ich passende Benutzerinneneingaben für jede Fragestellung wählte. Eine Schadensmeldung für Wohnungen sollte so einfach wie möglich erstellbar sein, damit auch Menschen die technisch unversiert sind, nicht gut Deutsch sprechen oder schreiben können oder schlicht keine Zeit haben diese erstellen können.

Auch habe ich direkt von Anfang an alle Eingaben den Benutzenden gezeigt. Da in der echten Schadensmeldung immer nur die nächste Schadensmeldung gezeigt wird, kann dies ein sehr frustrierender Prozess sein, in welchem man nie weiß, wann das Formular fertig ist.

Überblick des neugestalteten Schadenmeldungsformular
Detailansicht des Schadensort Input-Feldes als Combobox
Genauere Schadensbeschreibung mit Möglichkeit, ein Bild hinzuzufügen
Viewport beforeViewport afterViewport detail

Weitere Kurse

In darauffolgenden Semester nahm ich auch an Kursen von Frank Rausch teil, jedoch nur als Zaungast. In diesen erstellte ich keine Entwürfe. Disskussionen zu Monopolistischen Tech-Konzernen, Open-Source und der Rolle von Design in der Gesellschaft hörte ich aber dennoch zu und beteiligte mich an diesen.

Weiter zur Werkschau →