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

Gute Formulare Gestalten

Die Gestaltung eines User Interface zur strukturierten Informationsabfrage mit vorgegebenen Format und definierten Umfang, kurz einem Formular, klinkt genauso trocken wie das Ausfüllen eines solchen — muss es aber nicht sein! Typografische Details, viel Sensibilität gegenüber dem »Ausfüllenden«, barrierefreihe Gestaltung und vieles mehr sind von entscheidender Relevanz, um sowohl das Ausfüllen des Formulars zu einer Freude zu machen als auch die Qualität der erfassten Daten hoch zu halten.

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!

photo_2018-02-01_15-13-56 copy.jpgphoto_2018-02-01_15-13-56 copy.jpg
photo_2018-02-01_15-13-51.jpgphoto_2018-02-01_15-13-51.jpg

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.

photo_2018-01-14_14-58-39.jpgphoto_2018-01-14_14-58-39.jpg
photo_2018-01-14_14-58-55.jpgphoto_2018-01-14_14-58-55.jpg
photo_2018-01-14_14-58-49.jpgphoto_2018-01-14_14-58-49.jpg
photo_2018-01-14_14-58-30.jpgphoto_2018-01-14_14-58-30.jpg
photo_2018-01-14_14-58-05.jpgphoto_2018-01-14_14-58-05.jpg
photo_2018-01-14_14-58-53.jpgphoto_2018-01-14_14-58-53.jpg
photo_2018-01-14_14-58-28.jpgphoto_2018-01-14_14-58-28.jpg

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.

Brita Filter einige da.pngBrita Filter einige da.png
Brita Filter empty 1.pngBrita Filter empty 1.png
Brita Planer empty Copy.pngBrita Planer empty Copy.png
Brita Planer empty.pngBrita Planer empty.png
Brita Filter eins da.pngBrita Filter eins da.png
Brita Filter Hinzufügen_neu.pngBrita Filter Hinzufügen_neu.png
Brita myBrit.pngBrita myBrit.png

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 …

4.jpg4.jpg
5.jpg5.jpg
1.jpg1.jpg
2.jpg2.jpg
3.jpg3.jpg
6.jpg6.jpg

Wischi-Waschi

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

Mac folder Icon X@2x.pngMac folder Icon X@2x.png
Mac folder Icon Y@2x.pngMac folder Icon Y@2x.png
Mac folder Icon x@2x copy_detail.pngMac folder Icon x@2x copy_detail.png
Mac folder Icon Y@2x copy_detail.pngMac folder Icon Y@2x copy_detail.png
noise_detail.jpgnoise_detail.jpg
Screen Shot 2018-01-07 at 16.22.41.pngScreen Shot 2018-01-07 at 16.22.41.png

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.

Screen Shot 2018-01-08 at 00.59.59.pngScreen Shot 2018-01-08 at 00.59.59.png

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.

Quittung_BioNord_01 small.pngQuittung_BioNord_01 small.png
Quittung .pngQuittung .png
Praesi task02.pngPraesi task02.png

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.

amazon_neuerEintrag_01_04-2.jpgamazon_neuerEintrag_01_04-2.jpg
amazon_neuerEintrag_01_06.pngamazon_neuerEintrag_01_06.png
Amazon 01 Daten_02.pngAmazon 01 Daten_02.png
Amazon 02 Zusammenfassung.pngAmazon 02 Zusammenfassung.png
amazon_neuerEintrag_01_10_NEWjpg.pngamazon_neuerEintrag_01_10_NEWjpg.png
Amazon 03 Complete!.pngAmazon 03 Complete!.png

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

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.

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Gute Formulare gestalten

Entstehungszeitraum

Wintersemester 2017 / 2018