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.

2 Antworten zu “Multitasking in einer Web App”

  1. SiSoSnooP sagt:

    Interessante Überlegungen ;)
    Aber ich glaube hier gibt es einen kleinen Denkfehler, welchen ich seit Beginn des Computerzeitalters für falsch halte.
    Multitasking ist gut und schön.
    Aber das machen wir im täglichen Alltag ja überhaupt nicht.
    Das System Computer bietet uns zwar die Möglichkeiten, dennoch können wir diese überhaupt nicht nutzen.
    Du schreibst Zitat:
    „Beobachte ich nun aber meine Arbeitsweise so bearbeite ich allerdings meist mehrere Dokumente oder lese..“
    Wie darf ich mir das vorstellen?
    Mit jedem Auge ein Dokument ?
    Im Grunde genommen können wir nie mehr als eine Tätigkeit am Computer sinnvoll ausführen.

    Daher stellt sich mir die Frage nach dem Multitasking nicht.
    Vielmehr wünsche ich mir eine intelligente Methode zwischen verschiedenen Programmen zu switchen.
    Und das mit einem sinnvollen Datenaustausch zwischen den Programmen.
    Wenn ich eine Webseite im Browser offen habe, und einen Text markiert habe, warum wird beim switchen zum Word Dokument nicht gleich der Text eingefügt?
    Warum den Weg über „copy“ und „paste“ gehen?
    Was sollte ich sonst mit dem markierten Text machen wollen?

    Ich öffne eine Grafikprogramm, und gehe anschließend in den Browser und google nach einem Apfel.
    Warum erkennt dieser das nicht, das ich doch bitte gleich zur Bildersuche geschickt werde ?

    Wir reden immer von Usability, der Benutzerfreundlichkeit, doch seit Jahren ist es so, das wir als Mensch uns anpassen müssen, und nicht die Systeme an unser verlangen.

    Wir brauchen keine 20 Fenster. Denn wir können uns eh nur einem widmen.

    Wenn ich diesen Text im Notepad fertig geschrieben habe, und auf deine Seite zurück kehre, warum steht er nicht automatisch im Kommentarfeld?
    Auch meine Emailadresse und mein Name ist dem System, vor dem ich sitze, bekannt.
    Lösche ich doch täglich mehrer Spamnachrichten, die an meine Mailadresse kommen.
    Doch halt, warum eigentlich? Sollte das nicht der PC machen?

    Auf einem Handy funktioniert es schon, das App-Switching.
    Dort habe ich auch nur ein Programm zu selben Zeit auf.
    Jetzt bitte noch ein wenig Intelligenz dazu.

    Und, als Bonus oben drauf noch ein intelligentes Speichermanagement, der es mir überlässt welche Programme im Hintergrund weiter laufen dürfen und welche nicht.
    Den Rest dann bitte einfrieren, bis ich das Programm wieder benötige.
    Schaue ich in gerade meine Taskleiste, habe ich noch 8 Programme offen.
    Die machen nichts weiter, als zu warten. Nur, müssen Sie deshalb meinem Speicher belegen?

    Usability sieht für mich, was einen PC betrifft anders aus.

    Viele Grüße ;)

  2. _MBB_ sagt:

    Hallo Martin,

    sehr sehr guter Artikel!
    Ein wunderschönes Beispiel für „Fenster in Fenster“ abseits des Browsers bietet die Microsoft Dynamics AX Entwicklungsumgebung.

    Kann mich dem Vorredner nur anschließen, viele Fenster sind weder schön noch nützlich (z.B. SharePoint Designer 2010).

    Leider wird die Ursache für so etwas sein, dass zu wenig geplant wird(insb. hinsichtlich Benutzerfreundlichkeit). Wie bei Quellcode ist das Erstellen einer guten GUI bzw. einer _sinnvollen_ Benutzerführung nicht mit Copy-Paste zu realisieren.

    Viele Grüße

Schreibe einen Kommentar