Der Brita FilaterManager bzw. HiBrit

Dies war die so called Semesterarbeit, also eine dreiwöchige Projektarbeit, statt dem Wochen-Arbeitsturnus in dem unten stehende Projekte ausgearbeitet wurden.

Das Wasserfilter-System Brita bietet Wasserkaraffen sowie die dazugehörigen Wasserfilter zum Einsetzen an, die i.d.R. monatlich durch neue ersetzt werden müssen.

Während des Kurses kam es zu einer kleinen Diskussion zu der Frage, weshalb die Filter-Zustands-LED die in der Brita-Karaffe verbaut ist, selbst beim »Alles-in-Ordnung«-Zustand grünes Licht geben muss und nicht nur, wenn ein Filterwechsel ansteht.

Dies sei besonders beim nächtlichen Wassergenuss problematisch.

Dies führte mich zu der Erkenntnis, dass Brita keine Hardware-Gimmicks brauche, sondern gute Formulare!

Nachdem man sich also der nervigen Hardware entledigt hat, kann man sich um die softwareseitige Lösung kümmern.

Nun gibt es bereits eine Brita-App namens Professional FilterManager, diese ist jedoch nicht zu gebrauchen.

Nutzer sind Kunden, in der Tap-Bar wird zum Video-Tutorial-Gucken eingeladen (wer guckt Video Tutorials über die Brita App?) und gleich zu Beginn wird man aufgefordert der App Zugriff auf Kamera, Kalender usw. zu genehmigen.

Hier bot sich mir die Möglichkeit mittels guten Formularen und User Centered Mobile Design á là Luke Wroblewski (sieh unten) mich dieser Brita-UX-Problematik anzunehmen.

Zunächst jedoch der unwichtige Teil.

Nachdem ich nun endlich einmal die Chance genutzt hatte, Kite Compositor ausprobieren zu können und die App ihren Splash-Screen bekommen hatte, ging es mit Papier-Skizzen und anschließend mit der Umsetzung in Sketch weiter.

Wozu benutzt jemand die Brita-App? Definitiv nicht zum Video-Tutorial gucken. Am wichtigsten erschienen mir die Punkte Plan (Wann ist der Filter auszuwechseln) & Supply (Nachschub an Filtern). Die Tab-Bar wurde auf diese beiden wesentlichen Punkte, sowie den des Nutzerprofils eingekocht.

Um private Datenangaben wie die der Telefonnummer nicht datenkrakig erscheinen zu lassen, sondern stattdessen den Nutzer-Nutzen bzw. Grund der Abfrage zu kommunizieren — hier die Benachrichtigung per SMS —, sind die jeweiligen Einstellungen direkt nach den entsprechenden Datenangaben angeordnet.

Statt wie bisher gleich zu Beginn ein Tutorial zur Bedienung der App anschauen zu sollen, habe ich kleine Tipps in den entsprechenden App-Screen-Zustände eingebaut. Falls z.B. noch kein Brita-Gerät hinzugefügt wurde, wird auf das große Pluszeichen verwiesen usw. Ebenso wird der Nutzer erst dann zur Zugriffsgenehmigung, beispielsweise dem Kalenderzugriff, aufgefordert, wenn dieser auf Kalender tippt und nicht bereits beim ersten Start der App. Andernfalls wäre man wohl nach dem aller ersten App-Start bereits von dieser entnervt, da man sofort zahlreiche Berechtigungen verteilen darf (oder die App andernfalls teils unbrauchbar machen würde). Vor allem aber wäre es dem Nutzer zunächst absolut undurchsichtig, wozu diese Genehmigungen erforderlich sein sollten, was die Verweigerungs-Rate unter Brita-App-Nutzern mit Sicherheit hoch halten würde. Siehe Luke Wroblewski (unten).

Kritik

Abgesehen von der Form des Brita-B, habe ich den Wiedererkennungswert von der neuen zur bestehenden App sehr gering gehalten. Die bisherige CI erschien mir visuell keine ausreichend gute Grundlage zu bieten. In Zukunft werde ich jedoch versuchen, mich auch bei weniger ansprechenden Designs mehr an bestehenden Form-, Farb und UI-Mustern zu orientieren.

Fazit

In dieser Semesterarbeit konnte ich einige von Luke's Tipps direkt anwenden, ein paar von Franks zwieblfischigen Typo-Hinweisen einstreuen und einmal den Kite Compositor (im Brita Splash Screen) anwenden. Lernerfolg!

Was zuvor geschah …

Wischi-Waschi

In einer guten Stunde haben Nina und ich unsere Wischi-Waschi-App zur einfachen Bedienung einer digitalen Waschmaschine konzipiert.

Great Artists Steal

Ein grafisches, digitales Element so präzise wie möglich nachzubauen war die Aufgabe.

Als ich versehentlich einmal einen Ordner in Photoshop hinein kopieren wollte (cmd + V) und das MacOS-Ordner-Icon in voller Auflösung als Grafik erschien, war ich stark angetan von dem Icon und nun bot sich die Gelegenheit ebenjenes nachzubauen. Da ich weiter in Sketch einsteigen wollte und Frank Adobe nicht gut leiden kann, wurde Sketch das Mittel der Wahl.

Die _Rausch_en-Textur (was für ein seltsamer Zufall) musste ich allerdings doch in Adobe PS anlegen und einen leichten Normal/Bump Filter anwenden.

Leider hat sich bei Sketch (v47.1) ein Rendering-Bug (nur!) beim Export eingestellt, sichtbar unten in den unteren Knickfalten des Ordners.

Links das Original, rechts meins.

Von Klarinetten und Buletten

Diese kurze Rausch'e-Erzählgeschichte enthält massig viele Rechtschreib- sowie Satzzeichen-Fehler. Vor allem aber bestand der Reiz darin, die unzähligen typografischen Missgeschicke bei weihnachtlichem Gebäck gemeinsam zu korrigieren.

Formular-Redesign Analog …

Bei Papier-Quittungen musste ich schon allzu oft nachschauen, ob denn nun für für den Geldempfängen oder für die Dienstleistung bzw. den Wertgegenstand steht. Auch erschien mir die Aufgliederung des Geldbetrages in Netto und Brutto sowie den MwSt.-Satz in seiner visuellen Verständlichkeit noch potential zu haben. Grund genug, mich in dieser Aufgabe an eine Neugestaltung dieses alten Formulares zu machen.

… und digital!

Für diesen zweiten Abschnitt des Formular-Redesign entschied ich mich für eine iPad-App der Quittung, da mir dies die praxistauglichste Art der Quittungs-Ausstellung auf einer Messe erschien. Bei der Gestaltung musste ich beachten, dass die Tastatur notwendigerweise konstant in »ausgefahrenem« Zustand ist und das Formular möglichst nicht ständig skalieren sollte.

Kurzer Prozess

Als kurze Prozess-Abfolge von Formularen wählte ich das Einstellen eines Buch-Eintrags auf amazon.de

Soviel backend im frontend hätte ich zwar einem Marktgiganten nicht zugetraut, Eingabefelder wie number_of_lithium_ion_cells für meinen neuen Bucheintrag unter dem Punkt Konformitäts, bereitete mir allerdings Freude und erleichterte mir mein Formular-Redesign.

Sonstiges

• Die sehr empfehlenswerte »UX-How-To-Video-Serie« mit Luke Wroblewski.
• Twitter Moment mit Tipps & Tricks zu kleinen Details im UI-Design.

Ansonsten bestand der Kurs aus Sketch-Tutorials, spannenden Workflow-Erläuterungen (z.B. Franks Alfred-Typographizer-Workflow), Einblicken in einige von Franks alten Projekten (Natürlich alles ohne NDA-Überschreitungen) sowie einige seiner eigenen Scripte zur Erleichterung repetitiver Aufgaben, meist im Kontext der Arbeitsverlagerung vom Design/Mockop-Prototyping zur Umsetzung in Code (wie z.B. die Ausgabe aller HSV-Werte ausgewählter Elemente in Sketch).

Für gute Unterhaltung stets im richtigen Moment sorgten die Knurr-Kommentare vom lieben Hund Friedolin.