Design ist Funktion: Verbesserte Benutzeroberfläche

17.02.2010

Simon

Das Des­gin von Bil­lo­mat war bis auf klei­nere Anpas­sun­gen immer noch das Glei­che wie beim Start Ende 2007 vor über 2 Jah­ren. Und das, obwohl in der Zwi­schen­zeit viele neue Funk­tio­nen und Mög­lich­kei­ten hin­zu­ge­kom­men sind. Das Pro­blem: Für die glei­che Funk­tion wur­den oft unter­schied­li­che Inter­ak­ti­ons­ele­mente benutzt. Und umge­kehrt. Zeit für eine Ände­rung? Defi­ni­tiv!

“Form fol­lows func­tion” – ein Gestal­tungs­leit­satz, den nicht nur Archi­tek­ten und Desi­gner in– und aus­wen­dig ken­nen (soll­ten). Dass dabei aber das Design nicht auf der Stre­cke blei­ben darf, son­dern ein wesent­li­cher Teil der Funk­tio­na­li­tät selbst ist, zeigt die aktu­elle Über­ar­bei­tung der Benut­zer­ober­flä­che von Bil­lo­mat, in wel­che wir unsere Erfah­run­gen und die Wün­sche unse­rer Kun­den aus über 2 Jah­ren Bil­lo­mat haben ein­flie­ßen lassen.

Der Hin­ter­grund gehört in den Hintergrund

Der Hin­ter­grund ist dafür da, dem Inhalt einen Rah­men zu geben. Wenn er sich aller­dings zu sehr in den Vor­der­grund drängt, ist es kein Hin­ter­grund mehr.

Obwohl wir natür­lich Grün-Fans sind, war der bis­he­rige Farb-Verlauf um den Inhalts­be­reich nicht das Gelbe vom Ei. Er hat zu sehr abge­lenkt und die Auf­merk­sam­keit des Auges auf sich gezo­gen. Des­halb musste er zuguns­ten einem dezen­ten Grau wei­chen. Die geringe Hel­lig­keit lenkt das Auge dabei auto­ma­tisch auf den hel­le­ren Inhaltsbereich.

Das Glei­che gilt für die alter­nie­ren­den Hin­ter­grund­far­ben bei diver­sen tabel­la­ri­schen Auf­lis­tun­gen. Ein­zige Auf­gabe der abwech­seln­den Zei­len­far­ben war, die Zei­len schnell und ein­fach aus­ein­an­der hal­ten zu kön­nen. Tat­säch­lich haben sie durch ihre auf­fäl­li­gen Kon­traste aber fast schon Unruhe mit­ge­bracht und wirk­ten sich nicht unter­stüt­zend auf die Les­bar­keit der Tabel­len­in­halte aus. Die jetzt gewähl­ten hel­len Grau-Töne mit nur sehr gerin­gen, aber trotz­dem schnell wahr­nehm­ba­ren Kon­tras­ten erfül­len diese Funk­tion nun sehr viel besser.

Menü oder But­ton, das ist hier die Frage

Bis­lang war es nicht immer ganz ein­fach, am rech­ten Sei­ten­rand Menü­punkte zur Navi­ga­tion von But­tons zum Aus­lö­sen von Aktio­nen zu unter­schei­den. Beide Ele­mente waren, obwohl für unter­schied­li­che Zwe­cke vor­ge­se­hen, exakt im glei­chen Stil gehalten.

Wir haben uns also vor allem die But­tons vor­ge­nom­men und sie so gestal­tet, dass sie sehr intui­tiv und ver­ständ­lich bedien­bar sind:

• Alle But­tons erhal­ten nun eine gemein­same Form, die sie zwei­fels­frei als But­tons iden­ti­fi­zier­bar machen.
• But­tons mit glei­chen Funk­tio­nen wer­den farb­lich gekenn­zeich­net: Grün steht für Neu­an­lage oder Spei­chern, Orange für Bear­bei­ten, Rot für Löschen oder Abbre­chen. Alle ande­ren But­tons wer­den in einem neu­tra­len Grau gehalten.
• But­tons bekom­men ein Sym­bol zuge­wie­sen, mit dem man sehr schnell die Funk­tion erfas­sen kann, ohne die Beschrif­tung lesen zu müssen.

Kon­sitenz erleich­tert die Bedienung

Eine Kun­den­su­che sollte immer nach dem glei­chen Prin­zip ablau­fen. Egal, ob man die Kund­akte auf­ru­fen möchte, oder einen Kun­den für die Erstel­lung einer Rech­nung oder eines Ange­bo­tes aus­wäh­len möchte. Und bei den Arti­kel sollte es auch nicht anders sein.

Trotz­dem waren diese Abläufe in Bil­lo­mat teil­weise recht unter­schied­lich gelöst. Wäh­rend die Kun­den­su­che meh­rere Such­fel­der offe­rierte und die Ergeb­nisse in einer sor­tie­ba­ren Tabelle dar­stellte, stand bei der Kun­den­aus­wahl für neue Doku­mente nur ein Such­feld zur Ver­fü­gung und auch die Dar­stel­lung der gefun­den Kun­den wich stark vom Gewohn­ten ab.

Wir haben also sowohl die Kun­den­aus­wahl für neue Rech­nun­gen und Ange­bote, als auch die Arti­kelasu­wahl zur Über­nahme in Rech­nungs– und Ange­bots­po­si­tio­nen kom­plett über­ar­bei­tet und die bereits bekann­ten und ver­trau­ten Such­me­cha­nis­men ange­passt. So las­sen sich Kun­den und Ange­bote nun noch schnel­ler finden.

Inhalte laden, wenn sie gebraucht wer­den. Nicht früher.

Beson­ders bei den Rech­nun­gen und Ange­bote wur­den viele Inhalte pro­phy­lak­tisch gela­den, auch wenn sie even­tu­ell gar nicht gebraucht wurden.

Dazu zäh­len vor allem die For­mu­lare für das Ver­sen­den und Signie­ren von Doku­men­ten, aber auch die Suche für Zeit­ein­träge aus mite. Das resul­tierte vor allem in grö­ße­ren Daten­men­gen, die der Brow­ser ver­ar­bei­ten musste.

Jetzt wer­den wirk­lich nur noch sol­che Inhalte gela­den, die auch benö­tigt wer­den. Alles andere wird nach­ge­la­den, sobald sie benö­tigt werden.

Ver­zicht auf Hintergrundbilder

Zu guter Letzt noch eine wei­tere Ver­bes­se­rung: Bil­lo­mat kommt nun ganz­lich ohne Hin­ter­grund­bil­der aus. Alle Far­ben, For­men, Rah­men und sons­tige Stile wer­den jetzt kom­plett per CSS defi­niert. Dadurch wird das Laden und Ver­ar­bei­ten von 6 Bil­dern ein­ge­spart, was letzt­lich der Render-Geschwindigkeit des Brow­sers zugute kommt.

Für die abge­run­de­ten Ecken (z.B. bei den Rei­tern) set­zen wir auf aktu­elle CSS3-Technik. Und kann ein Brow­ser diese Eigen­schaft (hier: border-radius) noch nicht ver­ar­bei­ten, bekommt er ein­fach keine abge­run­dete Ecken zu sehen, ohne dass die Funk­tio­na­li­tät leidet.

Ver­gleich: Das hat sich geändert:

Hier ein paar exem­pla­ri­sche Bei­spiele, die zei­gen, wie sich die Ände­run­gen auswirken.

Vor­her: grü­ner Ver­lauf im Hin­ter­grund, grüne Farbe im Kopf­be­reich, But­tons auf rech­ter Seite wie Menü gestaltet

Nach­her: dun­kels Grau im Hin­ter­grund, hel­les Grau im Kopf­be­reich, klar erkenn­bare But­tons auf rech­ter Seite

Vor­her: Aus­wahl der Arti­kel für Rech­nungs­po­si­tio­nen mit einem Such­feld, ohne Sortiermöglichkeiten

Nach­her: Artikel-Auswahl in einer Light­box, mehr Fil­ter­mög­lich­kei­ten, Sortierung

Am Bes­ten las­sen sich die Ände­run­gen und deren Vor­teile in der täg­li­chen Arbeit mit Bil­lo­mat nach­voll­zie­hen. Wir hof­fen dass ihr jetzt noch pro­duk­ti­ver, schnel­ler, ein­fa­cher und mit mehr Freude mit Bil­lo­mat arbei­ten könnt.