Eine Designübergabe mit Zuständen und Verhalten vorbereiten
Eine ausgefüllte Spezifikation für eine Projektsuche zeigt, welche Texte, Zustände und Prüfschritte zur Designübergabe gehören.
Eine Designübergabe soll der Entwicklung sagen, welche Oberfläche zu bauen ist und wie sie sich im vereinbarten Ablauf verhält. Wählen Sie dafür eine konkrete Aufgabe. Die folgende Vorlage beschreibt eine Projektsuche in einem fiktiven Kundenportal; sie ist eine Planung, keine bereits implementierte Oberfläche.
Aufgabe und Entwurfsstand festhalten
Die Person gibt im Beispiel „Portal“ ein und löst die Suche aus. Das Portal lädt passende Projekte, für die ihre vorhandene Berechtigung gilt. Der Entwurf ändert diese Berechtigung nicht. Halten Sie fest, welche Quelldatei und welcher freigegebene Stand gelten. Benennen Sie verwendete Komponenten mit ihrer Version; ein älterer Bildexport soll nicht unbemerkt zur Implementierungsvorlage werden.
Zustände mit Text und Bedienung verbinden
Zustand der Beispielspezifikation | Vorgesehene Rückmeldung | Vereinbartes Verhalten |
|---|---|---|
Suche kann gestartet werden | Feld „Projekte suchen“, Aktion „Suchen“ | Der eingegebene Begriff bleibt sichtbar; die Aktion startet das Laden. |
Suche läuft | „Projekte werden geladen.“ | Die laufende Suche ist erkennbar; alte Ergebnisse werden nicht als neue Treffer ausgegeben. |
Suche abgeschlossen, Treffer vorhanden | „2 Projekte gefunden.“ mit den Projektlinks „Portalumbau“ und „Portalhilfe“ | Die passenden Projekte sind erreichbar; der Suchbegriff bleibt erhalten. |
Suche abgeschlossen, keine Treffer | „Keine Projekte für diese Suche gefunden.“ | Der Begriff bleibt erhalten und kann geändert werden. Das ist kein Verbindungsfehler. |
Abruf fehlgeschlagen | „Projektliste konnte nicht geladen werden. Versuchen Sie es erneut.“ | Der Begriff bleibt erhalten; eine erneute Suche ist möglich. Der Fehler wird nicht als leere Trefferliste dargestellt. |
Die beiden Projektbezeichnungen sind angenommene Beispieltreffer. Klären Sie außerdem, was bei einer neuen Suche geschieht, während eine frühere Antwort noch aussteht. Nur die zum aktuellen Begriff gehörenden Ergebnisse dürfen als aktueller Stand erscheinen.
Technische Benennung und Rückmeldung übergeben
W3C empfiehlt passende sichtbare Beschriftungen und überprüfte zugängliche Namen. Verknüpfen Sie deshalb Feld, Aktion und vorgesehene Benennung eindeutig im Entwurf. Statusmeldungen können assistiver Technik Informationen geben, ohne selbst Fokus zu erhalten. Die Ergebnisliste selbst ist dabei nicht mit ihrer kurzen Statusmeldung gleichzusetzen.
Vereinbaren Sie, wo der Fokus nach dem Suchen bleibt und wie die Ergebnisliste per Tastatur erreicht wird. Geben Sie offene Fragen als offen weiter; ein fehlender Entwurf ist keine Zustimmung zu einem beliebigen Verhalten.
Anhand derselben Aufgabe abnehmen
Prüfen Sie in der umgesetzten Variante Suche, leeres Ergebnis und fehlgeschlagenen Abruf mit passenden Testdaten. Kontrollieren Sie längere Übersetzungen, Tastaturweg und Rückmeldungen mit der vorgesehenen assistiven Technik. Vergleichen Sie das Ergebnis mit dem vereinbarten Entwurfsstand. Korrigierte Regeln gehören zurück in die gemeinsame Dokumentation, damit spätere Änderungen auf demselben Stand aufbauen.
Quellen
Geschrieben von
- Julia HoffmannRedakteurin für Design und UXJulia Hoffmann ist bei ASES für die redaktionellen Inhalte zu Design und User Experience zuständig. Ihre Beiträge behandeln die Nutzung von Websites und Anwendungen, die Gestaltung von Benutzeroberflächen und digitale Barrierefreiheit.
Weiterlesen
Alle Beiträge
Ihr Vorhaben mit ASES
Beschreiben Sie uns Ihr Vorhaben. Wir melden uns mit einer ersten Einschätzung.