Die Blogs der ATE-Experten

Informations-Mosaik – Wie Kacheldarstellung die Business-UI verändern kann

18. Februar 2014 von Torsten Schneyer

„Business-UI? Was soll das denn sein?“

Der Begriff „Business-UI“, also die knappe Verschmelzung von  „Business“ mit der Abkürzung von „User-Interface“, ist relativ jung und noch längst nicht in aller Munde. In manchen Kreisen könnte man sogar den Eindruck gewinnen, diese Wortschöpfung habe etwas Anrüchiges! Denn die Reaktion mancher Entscheider, Entwickler und gar Anwender auf das Thema „Oberflächen-Design in Business-Software“ lautet oft und zynisch: „Design von Oberflächen spielt doch bei uns im B2B-Sektor gar keine Rolle, schaut Euch nur mal die ganzen hässlichen und langweiligen Oberflächen der Konkurrenz an!“ Und genau da liegt das Problem.

Das Interface der Business-Software – ein ungeliebtes Kind

Ein erschreckender Großteil jeder Business-Software „glänzt“ mit User-Interfaces aus der IT-Steinzeit. Die typische Geschäftsapplikation begrüßt uns in grauer Windows-Forms-Optik, frustriert uns mit Treeview-Orgien, Dialog-Feuerwerken, barock ineinander verschachtelte Tab-Reiter und winzigen 3D-Buttonleisten. Und wenn man richtiges Pech hat, sind diese Anwendungen auch noch langsam und/oder instabil oder nur unter komplexen, nur für den Eingeweihten zum Laufen zu bringen. Seien wir ehrlich: die meisten von uns kennen solch eine Anwendung. In jeder größeren Firma fristet ein solcher Dinosaurier sein trauriges Lizenz–Dasein und manch größerer Mittelständler hat sogar selbst einen solchen entwickelt und liebevoll gehegt und gepflegt.

Das User-Interface wurde bei solchen Anwendungen niemals einem Prozess unterworfen, der mit Design auch nur das Geringste zu tun hat. Vielmehr sind diese Oberflächen natürlich gewachsen: Wurde ein neues Feature implementiert, musste halt irgendwo noch ein neuer Button, ein neuer Dialog reingequetscht werden. Zwanzig Jahre lang sind Entwickler gut damit gefahren; mit immer den gleichen Argumenten: „Die Software muss fehlerfrei funktionieren, das Pflichtenheft ist lang und in zwei Monaten ist die Auslieferung. UI-Design ist Agentur-Gedöhns und hat hier nichts verloren.“
Das war „Business-UI“ früher, und damit kommt man heutzutage nicht mehr durch.

Entscheider, hört die Signale!

War Anwender von Business-Software der Jahrtausendwende noch ein Spezialist, für den Computerprogramme lediglich ebenso spezialisierte Arbeitswerkzeuge waren, sind die heutigen User digital völlig anders sozialisiert! Die Ingenieure, Controller, Operatoren, Geschäftsführer, Verwaltungsangestellten von heute sind allesamt mit Computern aufgewachsen. Dabei spielt der klassische Desktop-PC als „Home-Workstation“ eine immer geringere Rolle, mobile Note- oder Ultrabooks sind gefragt. Nahezu Jeder besitzt ein- oder mehrere Smartphones und die meisten von Ihnen gehen auch selbstverständlich mit Tablets und Multimedia-Fernsehgeräten um. Man kann diese Feststellung gar nicht wichtig genug nehmen: Alle Anwender von Business-Software sind privat inzwischen Konsumenten und benutzen Consumer-Geräte, auf denen Consumer-Software läuft! Diese Consumer-Programme  haben nun aber Oberflächen, die nicht nur schick aussehen und emotionalisieren, sondern die auch Usability-mäßig bis an die Grenze des machbaren „durchdesignd“ sind. Oberflächen, für die man kein dickes Handbuch benötigt, die selbsterklärend funktionieren und den Anwender zur Interkation motivieren.

Consumer-UI von ATE: Shared Impressions

Halten wir also fest: Anwender von Business-Software sind aus ihrem sonstigen Umfeld die Vorteile von Consumer-UI gewohnt und erst wenn sie sich an den Arbeitsplatz setzen, erwartet sie eine schlecht benutzbare, unkomfortable UI ohne jedes Design. An diesem Widerspruch stoßen sich immer mehr Fachkräfte zu Recht und auch die Entwickler von Business-Software wachen langsam auf. Und hier kommt der von uns popagierte, moderne Business-UI-Begriff ins Spiel.

Business-UI, wie sie sein sollte

Business-UI bedeutet, das User-Interface von Business-Software mit der gleichen Sorgfalt zu planen, zu entwerfen und umzusetzen, wie es im Consumer-Bereich schon lange selbstverständlich ist. Die Vorteile einer solchen Investition sind mannigfaltig: Ein modernes, schlankes intuitives –und nicht zuletzt auch: ästhetisch ansprechendes- User-Interface kann dabei helfen, Arbeitsprozesse besser abzubilden, redundante Arbeit und Fehler zu vermeiden und generell Kosten zu sparen. Aufwände für Einarbeitung und Schulungen werden geringer, die Anwender sind motivierter und fühlen sich in ihrer Professionalität ernst genommen.

Und nicht zuletzt sorgt eine sauber designte UI dafür, dass sich ein Software-Produkt durch all diese Punkte von der Konkurrenz abhebt und auf Screenshots, an Messeständen, bei Vorträgen und Präsentationen einen ganz anderen Eindruck macht.

Schön und gut, aber wie macht man das?

Ein Blogeintrag wie dieser kann natürlich kein umfassendes Kompendium darüber sein, was eine gute Business-UI ausmacht. Was wir aber tun können, ist, anhand eines konkreten Beispiels aufzuzeigen, welche Ansätze es geben kann. Wie unter einem Brennglas wollen wir uns einen einzelnen, typischen Business-Anwendungsfall herauspicken und die Frage beleuchten, wie uns die Errungenschaften der Consumer-UI bei der Verbesserung der Darstellung von Business-Content helfen kann.

Lust auf Liste?

Ein typischer Anwendungsfall von UI in einer Business-Anwendung ist die gelistete Aufstellung einer größeren Menge gleichartigem Content. In vielen Fällen, vor allem wenn es darum geht, große Mengen an Textdaten anzuzeigen, geschieht das mit Hilfe einer Tabelle. Tabellen sind –gerade im Business-Umfeld- natürlich in Ordnung und haben ihre Berechtigung. Daran wird sich auch so schnell nichts ändern, denn Tabellen haben einige unschlagbare Vorteile: Texteinträge lassen sich platzsparend anzeigen und die vertikale Anordnung der Kategorien sorgt dafür, dass man die einzelnen Posten schnell miteinander vergleichen kann.

Es gibt aber auch Anwendungsfälle, da können Tabellen an ihre Grenzen stoßen oder sogar regelrecht nerven. Diesen Fall haben wir immer dann, wenn der dargestellte Content entweder nicht umfangreich genug für eine Tabelle ist oder aber in sich komplexer Natur ist und z.B. Elemente wie Bilder, Grafiken oder gar interaktive Elemente enthält. Kleine bis mittellange Listen und vor allem komplexe Aufzählungszusammenhänge lassen sich inzwischen anders als in einer Tabelle darstellen. Hier hat die Consumer-Software in den letzten Jahren spannende Lösungsansätze entwickelt

Vom Programmierer zum Fließenleger

Gemeint ist natürlich die Kachel, diese geradezu geniale Erfindung, welche im Zusammenhang mit dem Trend des Flat-Designs entwickelt wurde. Erstmals medial bekannt wurde Kacheldesign durch Windows Phone 7, inzwischen ist es durch Windows 8 für Desktop- und mobile Touch-Geräte in aller Munde. Doch was viele nicht wissen: Auch im klassischen Desktop-Bereich und vor allem bei Web-Applikationen hat man die Vorteile von Kacheln erkannt und setzt sie gerne ein.

In einer Listendarstellung können uns Kacheln völlig neue Möglichkeiten eröffnen, Content nicht nur darzustellen, sondern regelrecht lebendig werden zu lassen. Hier nur einige dieser Vorteile in Kürze:

  • Kacheln sind Touchfähig
    Auch im Business-Sektor finden Handys und Tablets immer breitere Anwendung. Und was ist für einen Bereichsleiter anstrengender, als wenn er sich mit seinen Fingern immer wieder in einer Tabelle „verdrückt“ und die falsche Statistik auf die Projektorleinwand wirft? Kacheln sind groß und lassen sich mit dem Finger leicht treffen. Dennoch sind sie durch ihre rechteckige Form gut „stapelbar“ und lassen sich halbwegs kompakt zu Listen zusammenfügen.
  • Kacheln können vertikal UND horizontal gelistet werden.
    Die klassische Liste ist eine vertikale Angelegenheit: Content wird normalerweise untereinander aufgelistet. Das ist ok wenn es sich um Text handelt, den man sowieso nur schlecht horizontal listen kann. Aber Kacheln können viel mehr als nur Text enthalten. Außerdem ergeben sich auf den neuen Touch-Geräten ganz neue Möglichkeiten (und oft auch Notwendigkeiten!) der Listung, die es auszunutzen gilt. Hier ist eine horizontale Liste manchmal die bessere Wahl und die funktioniert nur mit Kacheln.
    Eine horizontal angeordnete –und somit auch horizontal scrollbare- Kachelliste kann sich dennoch auf einer Seite befinden, welche selbst vertikal gescrollt wird.
  • Kacheln sind groß, aber dennoch platzsparend
    Auch wenn Kacheln –gerade in der Vertikalen, oft etwas raumgreifender sind als die gewohnten Textlisten, gehen sie dennoch mit dem zur Verfügung stehenden Platz wirtschaftlich um. Sie können in alle Richtungen skalieren, passen gut aneinander und nehmen nahezu den gesamten Bereich des Bildschirms ein, den man ihnen zur Verfügung stellt. Dies ist vor allem im adaptiven Design (z.B. bei einer Umsetzung für Mobiles) von Belang.
  • Kacheln können gruppiert werden.
    Normale Textlisten –wie die Aufzählung dieses Absatzes- kann man zwar durch zwischengelagerte Einrückungen gruppieren, bestenfalls kann man die Textlisten noch zu Absätzen zusammenfassen. Aber bei Content, der nicht (nur) aus Text besteht, wird das schnell unübersichtlich. Kacheln lassen sich wunderbar zu räumlichen Gruppen zusammenfassen. Außerdem sind solche Gruppen bei horizontaler Anordnung von Vorteil.
  • Kacheln können mehr als nur Texte beinhalten.
    Auch wenn das nicht jedem sofort auffallen mag: Business-Software muss nicht nur mit Listeneinträgen und Zahlen jonglieren: In vielen Berufsfeldern sind Fotos und Diagramme jeder denkbaren Art von großer Wichtigkeit. Gegensatz zu einer normalen Tabelle eignet sich eine Kachel auch wunderbar dafür, Bildinhalte aufzunehmen. Und mindestens genauso wichtig: Grafiken und Texte lassen sich zu einer Informationseinheit kombinieren.
  • Kacheln können ihr eigenes Layout haben.
    Normale, textbasierte Listen sind alle mehr oder weniger gleich. Sie unterscheiden sich im Wesentlichen nur vom Inhalt und der Anordnung her. Kacheln hingehen lassen sich völlig frei gestalten: Fotos, Grafiken, typografisch klug gestaltete Textinhalte, Trennlinien oder gar eigene Header-Leisten gehen eine Synthese ein und können zusammengenommen Information aufbereiten und besser transportieren.
  • Kacheln können dynamisch und „smart“ sein.
    Eine Kacheln muss kein statisches List-Item sein sondern kann dynamische Komponenten beinhalten, welche sich –abhängig von vielerlei Kriterien- ändern und anpassen können. So können Diagramme z.B. mit Echtzeit-Daten verknüpft sein und sich selbst aktualisieren. Es ist sogar möglich, dass eine Listen-Kacheln selbst noch einmal kleine dynamische Listen enthält. Das ganze kann durchaus auch animiert präsentiert werden.
  • Kacheln müssen nicht nur Listen sein, sondern können sich als verbindendes UI-Element durch die ganze Anwendung ziehen.
    Dieser wichtige Punkt soll hier nicht vergessen werden. Auch wenn wir Kacheln hier anhand einer Liste beschreiben wollen, sollte erwähnt werden, dass sie eigentlich noch viel mehr können. Kacheln sind wahre Anwendungswunder. Wie Windows 8 eindrucksvoll bewiesen hat, sind Kacheln auch für eigenständige Layout-Strukturen, ordnende Hintergrund-Elemente oder sogar für Haupt- und Untermenüs einsetzbar!

Kacheln als Hauptmenü in der T-Online-App für Windows 8

Was können Listen-Kacheln nicht?

Contentzentriertes Flat-Design und das Kachelbeispiel sind also zweifelsohne eine tolle Sache. Doch wer sich mit dem Thema Business-UI ernsthaft auseinandersetzt, muss dem Design-Paradigma „Form follows function“ folgen und darf nicht blind jeden neuen Design-Trend hypen. Die Nützlichkeit der Listenkachel hat selbstverständlich auch ihre (oben bereits angedeuteten) Grenze und dies soll hier nicht verschwiegen werden:

Kacheln sind unpraktisch, wenn es um sehr viele Listeneinträge geht.
Alle oben beschriebenen Vorteile von Kacheln werden durch einen größeren Flächenverbrauch des grafischen Objekts erkauft. Kacheln sind meistens größer und ein bisschen dominanter als klassische Listenzeilen. Man bekommt als UI-Designer weniger davon gleichzeitig auf einen Screen und somit muss der Anwender rein theoretisch länger scrollen, um alle Einträge zu sehen. Daher eignen sich Kachellisten nur für Aufzählungen im ungefähr mittleren zweistelligen Bereich. Diesen Nachteil kann man –je nach Anwendungsfall- durch gescheite Filter- und sonstige Ordnungssysteme etwas abfedern, aber wenn es definitiv erwünscht ist, sehr viel sehr kleinen Listen-Inhalt auf dem Screen zu sehen, stoßen Kacheln klar an ihre Grenzen.

Listen-Kacheln in der Anwendung

Um zu erklären, wie Kacheln eine Liste übersichtlicher und attraktiver darstellen können als ein herkömmliches PC-Interface, fallen mir jeden Tag etliche Beispiele ein. Ein sehr typischer Anwendungsfall, den fast jeder Leser sicher schon selbst erlebt hat, ist die Arbeit mit Geschäftskontakten. Professionelle Vertriebsfachleute arbeiten hierbei längst nicht mehr alleine mit ihrem Mailprogramm, sondern verwenden sogenannte „Costumer Relationship Management“-Systeme, kurz „CRMs“ genannt.

Ein typisches Beispiel für ein CRM ist der folgende Screenshot. Es handelt sich um eine bekannte Open-Source-Software, die so manches mittelständische Unternehmen verwendet. Es enthält eigentlich alles, was ein zeitgemäßes CRM ausmacht und kann eine ganze Menge. So sieht es aus:

Mein erster allgemeiner Eindruck von dieser Oberfläche war:

  • Das User-Interface ist, wie man sieht, unübersichtlich, verwirrend und altbacken.
  • Die Elemente der Oberfläche sind wild auf dem Screen verteilt.
  • Wie man sehen kann, wird viel Platz verschwendet: Es gibt große, leere Flächen die keinerlei Funktion erfüllen und nicht einmal die Übersicht erhöhen.
  • Die Oberfläche ist mit Trennleisten, Headern und Farbflächen überfrachtet, welche eigentlich für Übersicht sorgen sollen, jedoch die Verwirrung eher noch steigern.
  • Der eigentliche Content (Die Kontaktliste) steht im Aufmerksamkeitswettbewerb mit den Bedienelementen. Es gibt keinen klaren Aufmerksamkeitsfokus für die Wahrnehmung des Anwenders.

Die Liste ist eine klassische Tabelle, was soweit erst einmal nicht stört, Und doch:

  • Durch die sehr breiten Zeilen werden die Informationen innerhalb der Kontakte sehr „auseinandergerissen. Mailadresse und Name z.B. sind über eine Entfernung von zwei Dritteln des kompletten Bildschirms voneinander entfernt.
  • Die Einträge wirken sehr gleichförmig. Man muss genau hinschauen, um sich nicht in der Zeile zu vertun (was nach einem langen Arbeitstag nicht immer leicht fällt).

Ganz anders dagegen das folgende CRM, welches auch einem Kachel-Design basiert. Schon auf den ersten Blick sieht man, dass hier alles anders ist:

  • Die Oberfläche wirkt modern, frisch und aufgeräumt.
  • Controls wie Buttons und Menüs sind hier gar nicht sichtbar, sondern tauchen Kontext-bezogen (und Prozessgetrieben!) auf, wenn sie gebraucht werden. Sie nehmen keinen Platz weg.
  • Das komplette Screendesign ist Content-zentriert. Die eigentlichen Hauptdarsteller eines CRMs, nämlich die Kontakte, spielen auch optisch die Hauptrolle.
  • Die Kacheln erinnern an Visitenkarten und präsentieren die Kontakt-Infos komprimiert und zueinander gruppiert.
  • Die Kacheln ordnen sich, je nach Anwendungsfall, immer wieder neu und sind damit fast so flexibel wie eine tabellarische Liste.
  • Jede Kachel ist eine kleine Welt für sich und enthält neben dem Text auch Bild- und dynamische Informationen.
  • Auf Trenner und Leisten wird weitgehend verzichtet. Stattdessen funktioniert die Abgrenzung von Informationen weitgehend über räumliche Nähe und natürlich die Kacheln.
  • Fotos und sprechende Farben werden als „Wiedererkenner“ und Signalgeber verwendet.
  • Die Oberfläche ist Touch-basiert und die Liste kann mit dem Finger gescrollt werden.

Wie man an diesem kleinen Beispiel sieht, müssen sich hartes Business und gutes User-Interface-Design nicht ausschließen. Zusammenfassung: Kachel-basierte Listen erfüllen Anforderungen mobiler Lösungen, die von klassischen Listen nicht erfüllt werden konnten. Die Synergie von Design-Knowhow und Geschäftsprozessen bietet neue Marktchancen für jeden Software-Entwickler und wird eines der großen Entwicklungs- und Design-Themen 2014 sein.

Haben Sie Fragen, Anregungen und weitere interessante Aspekte zum Thema? Dann nehmen Sie mit uns Kontakt über unser Webformular auf.

Share it:

Weitere Einträge zu den Themen: , , , , ,

Einen Kommentar abgeben (Sie müssen dazu registriert und angemeldet sein!)

Bitte beachte: Die Kommentare werden moderiert. Dies kann zu Verzögerungen bei Deinem Kommentar führen. Es besteht kein Grund den Kommentar erneut abzuschicken.