1 von 1 Lesern fand diesen Artikel hilfreich.
Die Erkenntnis ist: Wer seine Nutzer, ihr Umfeld und ihre Aufgaben genau kennt, wird automatisch nutzerfreundliche Anwendungen entwickeln. Lernen Sie hier, wie Sie nutzerfreundliche Layouts so weit planen, dass Ihre Anwendungen auf Grundlage eines Graphical User Interface-Frameworks umgesetzt werden können.
Nehmen Sie sich eine halbe Stunde Zeit und schauen Sie Ihrem Nutzer über die Schulter. Lernen Sie seine Arbeitsweisen und Abläufe kennen.
1. Verstehen Sie Ihren Nutzer
Sein mentales Modell und sein Umfeld
Gute Anwendungen sollten Aufgaben vereinfachen. Damit diese tatsächlich nutzerfreundlich sind, sollten Sie berücksichtigen, wie Ihr Nutzer tickt und sein mentales Modell kennenlernen.
Das mentale Modell
Sie lernen Ihren Nutzer kennen, indem Sie ihn bei der Arbeit beobachten und Fragen dazu stellen. Ein Beispiel mit 3 Arbeitsschritten: Daten sollen von einem Mitarbeiter erfasst, bearbeitet und an einen anderen Mitarbeiter übermittelt werden. Stellen Sie zu jedem dieser Arbeitsschritte fest:
- Über welche Kenntnisse und Erfahrungen verfügt er?
- Erfassen Sie seine Teilaufgaben und die jeweils daraus folgenden Intentionen und Erwartungen.
- Lernen Sie seine (Fach-)Sprache und Begrifflichkeiten kennen.
- Und vor allem überprüfen Sie seine Motivation! Macht ihm die Aufgabe Spaß oder ist sie ein notwendiges Übel?
Während Sie sein mentales Modell kennenlernen, achten Sie auch auf sein Arbeitsumfeld.
Das Umfeld Ihres Nutzers
Stellen Sie hier fest:
- Ist die Aufgabe eine von vielen?
- Arbeitet Ihr Nutzer vorwiegend am PC oder eher nicht?
- Im Team oder allein?
- Ist das Umfeld laut und stressig? Oder hat er Ruhe und Zeit?
- Muss er zur Erfüllung der Aufgabe mit anderen kommunizieren? Und wie?
Der Effekt: Mit dieser Denkweise versetzen Sie sich in Ihren Nutzer und lernen so, was für ihn wichtig ist. Das ist die Basis für nutzerfreundliches Design.
Nehmen Sie sich viel Platz und füllen Sie dann nach und nach die Details aus. Und schauen Sie, wo Sie Schritte vereinfachen/abkürzen können.
2. Ablauf visualisieren
Vom großen Überblick zum kleinen Detail
Sobald Sie Ihren Nutzer besser verstehen, widmen Sie sich dem konkreten Ablauf seiner Aufgabe. Fragen Sie sich und den Nutzer: Wie würde er ohne Computer vorgehen? Aus der Antwort ergibt sich ein Ablauf, den eine nutzerfreundliche Anwendung widerspiegeln sollte.
Skizzieren Sie diesen Ablauf auf einem großen Stück Papier und arbeiten Sie dann gemeinsam mit dem Nutzer Schritt für Schritt die Details aus:
- Welche Daten liest Ihr Nutzer wo ab und muss sie wo in welcher Form eingeben?
- Welche Reihenfolgen gilt es zu beachten?
- Welche Besonderheiten gibt es?
Erinnern Sie sich bei jedem Schritt an das mentale Modell Ihres Nutzers und stellen Sie sich bei jedem Schritt sein jeweiliges Umfeld vor.
Daraus ergibt sich die Liste der benötigten Eingaben, Informationen, Aktionen und Arbeitsschritte.
Wichtig: Bleiben Sie in dieser Phase noch fern vom Computer.
Schreiben Sie die einzelnen Elemente pro Arbeitsschritt auf Karten und bringen Sie sie in eine sinnvolle Reihenfolge. Daraus ergibt sich automatisch ein praktikables Layout.
3. Layout planen
Und testen Sie es so oft wie möglich
Sie sollten nun eine genaue Vorstellung von Ihrem Nutzer, seinen Arbeitsschritten und den benötigten Elementen pro Schritt haben. Ordnen Sie die Elemente nun wie im Bild gezeigt pro Arbeitsschritt sinnvoll an. Daraus ergibt sich automatisch ein Layout der einzelnen Arbeitsschritt-Ansichten. Skizzieren Sie das Layout auf Papier.
Testen Sie das Layout
Legen Sie diese Layout-Skizzen jemandem vor und fragen Sie ohne Erklärungen, was die Skizzen seiner Meinung nach darstellen und was er glaubt, dort machen zu können. Sie werden schnell sehen, ob und wie es Ihnen gelungen ist, das mentale Modell Ihres Nutzers abzubilden.
Tipp: Überlegen Sie, wie Sie mit fehlerhaften Eingaben umgehen. Erstellen Sie interaktive Prototypen, um komplexere Abläufe zu testen.
GUI-Frameworks (hier im Bild: Vaadin) bieten meist fertige Layout-Lösungen, die Sie nur noch integrieren müssen.
4. Umsetzung auf Basis von GUI-Frameworks
Setzen Sie auf Skins, Themes und Templates
Die fertigen, nutzerfreundlich konzipierten Layout-Skizzen können Sie nun in GUI-Frameworks wie z.B den JavaScript-Frameworks Cappuccino, Dojo, Ext JS, jQuery UI oder Vaadin umsetzen. Dort werden Ihnen fertige Design-Lösungen für Layouts und Elemente kostenlos geboten.
Lassen Sie sich von uns schulen
Wir bieten Ihnen einen 4tägigen Workshop, in dem wir Ihnen diese Arbeitsweise anhand eines konkreten Projekts Ihrer Wahl näherbringen. Sprechen Sie uns an!
Literatur (englisch):
Fazit: Sobald Sie ein gutes Verständnis für Ihren Nutzer haben, werden Sie Abläufe und Layouts automatisch nutzerfreundlich planen. Und auf Basis fertiger Lösungen für Elemente in GUI-Frameworks können Sie Ihre erstellten Layouts ansprechend umsetzen.
