Die K-9 Mail App ist ein Open-Source Mail Client für Android.


Themenwahl

Ich habe mich für ein Redesign der K-9 Mail App entschieden, weil ich diese jeden Tag verwende und ich bei ihr noch Verbesserungsbedarf bezüglich UI and UX sehe.


Originale Screens und Beobachtungen

In den Screens unterhalb dieses Textes kann man die aktuelle Listenansicht der App sowie den aktuellen „Verfassen“ Screen für neue Emails sehen.

draft.png list.png
© Simon Lindner
draft.png list.png

„Verfassen“ Screen

Beim „Verfassen“ Screen habe ich folgende Beobachtungen gemacht:

  • Der „Senden“ Button ist schwer zu erreichen und nicht leicht auffindbar
  • Die “Input” Felder sind nicht als solche auf einen Blick zu erkennen

Listenansicht

Bei der Listenansicht habe ich folgende Beobachtungen gemacht:

  • die Übersicht ist aktuell sehr “condensed” und ist nicht sehr übersichtlich
  • aufgrund dessen kommen Trennlinien zum Einsatz
  • der Hintergrund ist grau und bietet einen geringen Kontrast zur sekundäre Textfarbe
  • der Zeitpunkt der Mail ist aktuell nicht schnell erfassbar (zu klein, grau)
  • der Betreff reicht bis in die nächste Zeile, falls zu lang
  • der „Verfassen“ Button ist nicht leicht auffindbar und nicht leicht zu erreichen


Vorstellung des Prototyps und der Verbesserungen

Im unterhalb dieses Textes verlinkten Video stelle ich den Prototypen vor.

Unterhalb dieses Textes kann man Screenshots der beiden überarbeiteten Screens meines Redesigns sehen.

Verfassen.png Listenansicht.png
© Simon Lindner
Verfassen.png Listenansicht.png

Listenansicht

Ich habe die Listenansicht verbessert, indem ich:

  • einzelne Elemente auseinandergezogen und mehr “Whitespace” eingefügt habe
  • durch eine Hervorhebung des Textes die Zeitpunkte besser/schneller ablesbar gemacht habe
  • dafür gesorgt habe, dass der Betreff nicht in die nächste Zeile umbricht
  • den “Verfassen„ Button durch eine farbliche Hervorhebung, klare Bezeichnung und Positionierung unten rechts besser auffindbar und erreichbar gemacht habe

“Verfassen„ Screen

Ich habe den “Verfassen„ Screen verbessert, indem ich:

  • die Input Felder durch eine Umrandung klar als solche erkennbar gemacht habe
  • den “Senden“ Button durch eine farbliche Hervorhebung, klare Bezeichnung und Positionierung unten rechts besser auffindbar und erreichbar gemacht habe


Arbeitsweise mit Components & Co.

Components

Ich habe Elemente, die wiederverwendet wurden, als Komponenten angelegt. Dies umfasst Header, Avatar, List, Popup, Button, Tastatur und Input Komponenten. Der Avatar-Background wurde als Variante angelegt um schnell zwischen den vordefinierten Farben wechseln zu können. Die Input-Felder jedoch nicht, weil ein schneller Wechsel zwischen diesen nicht notwendig ist.

Color Styles

An Color Styles habe ich eine primäre Farbe angelegt, sowie jeweils eine primary und secondary Text-, sowie Hintergrundfarbe.

Sortierung

Ich habe versucht mein Layout übersichtlicher zu machen, indem ich zunächst alle Elemente in meinem Projekt in die folgenden drei Bereiche unterteilt habe: 

  • Projektbeschreibung & originale Screens
  • Komponenten & wiederverwendete Elemente
  • Flow 

Diese habe ich jeweils durch ein farbiges Rechteck schnell erkennbar gemacht. Außerdem sind die Komponenten jeweils passend zueinander angeordnet, z.B. Header und Input Felder.

Benennung

Bei der Benennung habe ich darauf geachtet, gleiche Komponenten/Elemente möglichst so zu benennen, dass sie mit dem gleichen Wort anfangen, gefolgt von einem Schrägstrich und dann die Variante/Namen derjenigen, was die Sortierung verbessert und Übersicht der Elemente in Figma deutlich erhöht.

Text Styles

Text wurde von mir ausschließlich unter Verwendung von Text Styles angelegt. Ich habe für dieses spezifische Projekt 3 Text Styles benötigt: 

  • H1 Roboto 36px, 42px
  • H2 Roboto, 30px, 35px
  • P Roboto, 26px, 30px


Figma Prototyp

Im eingebetteten Figma Projekt unterhalb dieses Textes kann man den Protoypen selbst ausprobieren und erfahren.