5. Oktober 2013

Multitasking in einer Web App

5. Oktober 2013 - Geschrieben von Martin - 2 Kommentare

Momentan spiele ich mit der Idee eine Art CRM Web App zu entwickeln in der Kunden, Aktivitäten, Projekte, etc. verwaltet werden können. Bei den ersten Entwürfen der GUI stellt sich mir allerdings die Frage wie man am besten Multitasking in einer Web App abbildet.

Sieht man sich bekannte Web Anwendungen an so wird man feststellen, dass alle folgendem alt bekannten Schema folgen:

  • Dokument suchen
  • Dokument öffnen
  • Dokument bearbeiten
  • Dokument schließen
  • … und wieder von vorn

Das ganze läuft in einem Browserfenster ab und es ist lediglich der momentane Arbeitsschritt durchführbar.

Beobachte ich nun aber meine Arbeitsweise so bearbeite ich allerdings meist mehrere Dokumente oder lese diese zumindest, denn den Idealfall dass man sequenziell die Arbeit verrichtet habe ich noch nie erlebt. Immer wieder kommt eine Kundenabfrage die bearbeitet werden will oder der Kollege der zwischen Tür und Angel steht benötigt jetzt eine Auskunft. Und wenn man noch tiefer geht gibt es meist auch zwischen den Akten Abhängigkeiten, zum Beispiel muss in einem älteren Dokument ein Detail nachgesehen werden um das jetzige fertigstellen zu können.

Diese Fälle sind eben in jenen klassischen Anwendungen nicht berücksichtigt, hier muss man ständig den Bearbeitungsmodus verlassen und später wiederkehren. Sehr produktiv.

Als „Workaround“ können natürlich mehrere Browserfenster oder Tabs geöffnet werden, allerdings hat dies bei vielen Anwendungen markante Nachteile, zum Beispiel bleibt ein Tab der seit Stunden offen ist unaktualisiert was den unerfahrenen Nutzer verwirren kann – „dieses Ticket habe ich doch bereits geschlossen?“, diese Benutzerschicht wird auch oft verwirrt durch immer gleiche Fenster die sich nur im Detail unterscheiden – so sind Navigationselemente, Listen und Formulare über all die selben, die Seiten unterscheiden sich nur in den angezeigten Daten.
Doppelte Elemente haben auch zur Folge, dass sie Bildschirmplatz verschwenden wenn mehrere Browser Fenster nebeneinander gestellt werden um eine Mail zu auf Basis von Ticket Inhalten zu verfassen.

Auch bei WordPress wird sichtbar wie Platz verschwendet wird. Rot doppelte Elemente, Grün die der eigentliche Inhalt.Auch bei WordPress wird sichtbar wie Platz verschwendet wird. Rot doppelte Elemente, Grün die der eigentliche Inhalt.

Doch wie löst man das Problem?
Ehrlich gesagt habe ich hierfür noch keine perfekte Lösung gefunden, allerdings ziemlich gute, doch später mehr. In letzter Zeit gehen viele Anwendungen den weg, dass sie im Browserfenster weitere Fenster emulieren (emulieren soll hier ausdrücken, dass es keine nativen Fenster sind wie z.B. Popups). In diesem Bezug haben sich viele Frameworks wie z.B. ExtJS und jQuery UI etabliert die sich großer Beliebtheit erfreuen. Ich will hier aber nicht über Frameworks berichten sondern über Usability.

Fenster im Browser zu emulieren finde ich ist eine ziemlich bescheidene Idee, denn so wirft man einen ziemlich wichtigen Punkt über Bord, der sich im Web über die Jahre gehalten hat. Die Führung des Nutzers durch einen unter umständen komplexen Prozess indem man einen Weg vorgibt. Der obige sequenzielle Ansatz der von vielen Web Apps benutzt wird, hat den Charm, dass man sich stets auf eine Aktion konzentriert und diese nicht aus den Augen verliert. Fenster sorgen wieder dafür, das man wichtiges aus den Augen verliert und abgelenkt wird. Auch gestaltet sich die Führung eines Users durch verkettete Fenster schwer. Viele behelfen sich hier mit aufpoppenden Dialogen die andere Fenster blockieren um den User zu einer Aktion zu zwingen. Hier haben wir also wieder die Situtation in der der Nutzer ledigliche eine Aktion ausführen kann und diese beenden muss bevor er weitere in Angriff nehmen kann.

ExtJS Multitasking

Und was ist mit Tabs? Tabs sind in der Tat die bessere Wahl, sie zeigen immer nur eine Aktion, der Benutzer weiß aber das er zwischen mehreren wechseln kann ohne Daten zu verlieren (sehr wichtig!). Beispielsweise kann eine Email in einem Tab verfasst werden und per klick auf einen Menüpunkt öffnet sich ein weiterer mit einer Kundenliste um Informationen für die aktuelle Email zu suchen. Natürlich können viele Tabs auch sehr verwirrend werden, deshalb sollte eine durchdachte Tab Verwaltung auch Gruppierung nach Aktion oder Kunde ermöglichen.

Ein meines Erachtens nach sehr gutes Beispiel für solch eine Oberfläche ist die vom OpenExchange Projekt entwickelte OX App Suite um in diesem Artikel auch noch ein Beispiel für Experementierfreudige zu liefern. Hier dient ein einfaches Menü zur Navigation durch die verschiedenen Anwendungen und die aktuellen Aktionen werden durch Tabs abgebildet.
OX AppSuite 1

Wichtige Informationen wie Benachrichtigungen können ohne Verlassen eines Menüpunktes oder Tabs durch ein Overlay eingeblendet werden:
OX AppSuite 2

Und viele Anwendungen sind weit verschachtelt ohne auch nur einen Tab zu öffnen, das nervt den Nutzer nicht mit vielen unnötigen Tabs die er wieder schließen muss.
OX App Suite 3

Re­sü­mee
Kurz um – versucht nicht alt bewährte Window Manager im Web nachzubauen. Auch wenn es Frameworks einfach machen, denkt daran was eure Nutzer wollen – eine Übersichtliche Anwendung die einfach zu bedienen ist und Spaß macht! Diese Punkte haben dem Web zu dem verholfen was es heute ist und nicht RIAs die seit jeher versuchen den Browser als plattformunabhängige Runtime zu missbrauchen.