Webbased Application to go

moodboard

Ein User Interface Design fällt vom Himmel?

Das a-team aus Berlin wollte ihre Anwendungen komplett überarbeiten. Das bisherige Framework hatte ausgedient, ein neues Framework „Bootstrap“ stand bereits in den Startlöchern, jetzt mussten „nur“ noch Usability und Design die Sache abrunden. Eine hochmotivierte Mannschaft von Entwicklern hatte bisher „so nebenbei“ auch die Usability und das Design mitbedacht, jedoch durch nachträglich eingeflochtene Kundenwünsche wurde die Usability oft genug strapaziert. Etwas Neues musste her!

Die Anwendungen sind an sich im Tourismusbereich zu Hause, können jedoch für alle Branchen angepasst werden. Wichtige Bestandteile sind der Vertragsabschluss, Mediendatenbank, Objektmanager, Preisteilmanager und eine fähige Suchfunktion. Das Design sollte u.a. berücksichtigen, dass die Anwendungen online und auf Tablets funktioniert.

 

Wollen wir eine kunterbunte Kinderwelt?

Nach einer fundierten Recherche bzgl. Farbwelt, Icons, Trends kristallisierte sich heraus, dass wir nicht bunt arbeiten werden, sondern innerhalb einer Graupalette bleiben. Es gibt ausreichend Beispiele bei denen eine kunterbunte Kinderwelt dem User suggerieren soll: Alles ist hier ganz einfach.

 

Skype

SKYPE: Schöne, bunte Kinderwelt. Man möchte uns vermitteln: Alles ist hier ganz einfach.

 

Aber je bunter und je doller, desto unübersichtlicher kann es auch werden. Nicht jede Funktion möchte mit einer Farbe belegt werden und die Feststellung, dass wir uns hier innerhalb einer komplexen Anwendung befinden, legt nahe, doch einfach auf Farbe zu verzichten. Lediglich die Icons für die Anwendungen im aktiven Zustand sind rot.

 

Widgets bringen nach vorne, was uns wirklich interessiert

Der Startscreen kann vom User via Widgets selbst angepasst werden. Widgets sind kleine Anwendungen, die es ermöglichen aktuelle Informationen sinnvoll zusammenzufassen und auf dem Startscrreen anzubieten. So gibt es z.B. ein Widget das den User auf veraltete Dateien hinweist. Gerade für eine Mediendatenbank ist es besonders wichtig, stets aktuell zu sein.

Mediabox_Widgets

 

Was muss eine Mediendatenbank können?

Viele Überlegungen mussten von uns angestellt werden, wie denn eine gut funktionierende Mediendatenbank aufgebaut sein muss. Das Beispiel anbei soll lediglich einen der vielen Gedankengänge illustrieren:

Media_Box

 

Die Darstellung von verschiedenen Ansichten

Es gibt so umfangreiche Medienverwaltungen wie Lightroom und Bridge (inkl. Mini Bridge). Wie soll eine Mediendatenbank aussehen, die sehr fähig und  mächtig, aber dennoch intuitiv zu bedienen ist? Ich habe einige Zeit über diese Fragestellung nachgedacht. Vor allem die verschiedenen Ansichten sollten nicht einfach nur verschiedene Größen derselben Darstellung anbieten, sondern ja nach Größe sollten auch andere Informationen an die Oberfläche gebracht werden. Vor allem Tabletuser profitieren von dieser optimierten Darstellung von Inhalten. Schlussendlich entschied ich mich für drei mal drei Ansichten, hier ein kleiner Einblick:

Mediabox_Ansichten

Die Durchlässigkeit innerhalb der Anwendungen, wie kann das aussehen?

Beim Beispiel anbei befinden wir uns innerhalb einer anderen Anwendung: „Verträge“. Da teilweise Daten auch von anderen Anwendungen in die Verträge einfließen, überlegte ich mir eine augenfällige Möglichkeit diese „Mini-Anwendungen“ kompakt anzubieten. Gerade die roten Icons haben sich im grauen Umfeld bestens bewährt, da es die einzige Schmuckfarbe ist.

Vertraege_Media

 

Umfangreiche Tabellen und die Schwierigkeit eines horizontalen Akkordeons

Besonders bei komplexen Anwendungen musste unbedingt eine Lösung gefunden werden, um verschachtelte Tabellen kompakt darzustellen. Ein vertikales Akkordeon ist an sich üblich, allerdings ein horizontales Akkorden, bei dem Spalten je nach Belieben geöffnet oder geschlossen werden können, stellt ein programmiertechnisches Novum dar. Aber natürlich (fast) kein Problem für das a-team.

Akkordeon_horizontal

 

Danksagung

Noch nie habe ich mit einer Agentur so einen komplizierten Job so unkompliziert umgesetzt, obgleich wir eine Ecke voneinander entfernt sind. Das Projekt wurde offen begonnen, es gab keinen vorgefertigten „Schlachtplan“, kein schriftliches 20-seitiges Briefing, was uns Grafiker bisweilen irritiert, aber hier war es genau richtig. Eigentlich gab es nichts, außer die Anwendungen, wie sie bis dato verwendet wurden und die redliche Absicht, das neu und besser zu machen. Die Arbeitsweise war sehr, sehr angenehm, wohlwollend und kooperativ. Ja, es ist eine Danksagung wert!

 

> > gesamtes Portfolio anzeigen