Seite 16: Mock-up-Trainer
Dieser interaktive Trainer gehört zur Theorie-Seite:
Mock-up / Benutzeroberflächen-Entwurf
Hier übst du, aus einer Aufgabenbeschreibung die wichtigsten Elemente einer Benutzeroberfläche abzuleiten.
Im Fokus stehen:
Pflichtfelder
Fehlermeldungen
Validierung
Buttons
Hauptaktion
Nebenaktion
Benutzerführung
Mock-up ≠ UML-Diagramm
Was wird trainiert?
| Bereich | Bedeutung |
|---|---|
| Pflichtfelder erkennen | wichtige Felder mit * markieren |
| Fehlermeldungen platzieren | Fehler direkt am betroffenen Feld anzeigen |
| Validierung verstehen | Eingaben fachlich prüfen |
| Hauptaktion erkennen | wichtigste Aktion, z. B. Speichern oder Anmelden |
| Nebenaktionen erkennen | Abbrechen, Zurück, Zurück zur Liste |
| Benutzerführung bewerten | Oberfläche soll verständlich und logisch sein |
| Mock-up einordnen | Mock-up ist kein UML-Diagramm |
Interaktiver Mock-up-Trainer
Merksatz für den Trainer
Mock-up = geplanter Oberflächenentwurf
Mock-up ist kein UML-Diagramm
Pflichtfelder müssen erkennbar sein
Fehlermeldungen gehören nah an das betroffene Feld
Buttons müssen eindeutig beschriftet sein
Benutzerführung muss logisch und verständlich sein
Beispiel: Produktformular
Aufgabenstellung:
Ein Produkt soll angelegt werden.
Produktname, Kategorie und Preis sind Pflichtfelder.
Der Preis muss größer als 0 sein.
Der Benutzer soll speichern, abbrechen oder zurück zur Liste gehen können.
Mögliche Lösung:
Pflichtfelder:
Produktname
Kategorie
Preis
Fehlermeldung:
Direkt am Preisfeld
Hauptaktion:
Speichern
Sinnvolle Nebenaktionen:
Abbrechen
Zurück zur Liste
Validierung:
Preis muss größer als 0 sein
Einordnung:
Mock-up ist kein UML-Diagramm
Warum ist das fachlich richtig?
Ein Mock-up soll zeigen, wie eine Oberfläche aufgebaut ist und wie der Benutzer sie bedient.
Bei einem Produktformular muss der Benutzer erkennen:
Welche Daten muss ich eingeben?
Welche Felder sind Pflicht?
Was ist falsch, wenn eine Eingabe ungültig ist?
Wie speichere ich?
Wie breche ich ab?
Wie komme ich zurück?
Pflichtfelder
Pflichtfelder sind Felder, die ausgefüllt werden müssen.
Typische Darstellung:
Produktname *
Kategorie *
Preis *
Das Sternchen * zeigt:
Dieses Feld ist erforderlich.
Fehlermeldungen
Fehlermeldungen sollten möglichst direkt beim betroffenen Feld stehen.
Gut:
Preis *
[ 0,00 € ]
Preis muss größer als 0 sein.
Schlecht:
Irgendwo oben steht nur:
Fehler.
Merksatz:
Der Benutzer muss sofort erkennen, was falsch ist und wo er es korrigieren muss.
Validierung
Validierung bedeutet:
Das System prüft, ob die Eingabe gültig ist.
Beispiele:
Preis muss größer als 0 sein
E-Mail-Adresse muss gültig sein
Passwort darf nicht leer sein
Produktname muss ausgefüllt sein
Kategorie muss ausgewählt werden
Hauptaktion
Die Hauptaktion ist die wichtigste Aktion im Formular.
Beispiele:
Speichern
Anmelden
Bestellung abschließen
Absenden
Im Produktformular ist die Hauptaktion:
Speichern
Nebenaktionen
Nebenaktionen helfen dem Benutzer, den Vorgang zu verlassen oder zurückzugehen.
Beispiele:
Abbrechen
Zurück zur Liste
Zurück zum Warenkorb
Schließen
Wichtig:
Der Benutzer soll nicht in der Oberfläche feststecken.
Mock-up ist kein UML-Diagramm
Ein Mock-up zeigt eine Benutzeroberfläche.
Es zeigt nicht:
Klassen
Methoden
Kardinalitäten
Sequenzen
Kontrollflüsse
Datenbankbeziehungen
Dafür gibt es andere Diagramme.
Merksatz:
Mock-up = Oberfläche
UML = Modellierung
Typische Fehler im Mock-up
| Fehler | Warum problematisch? |
|---|---|
| Pflichtfelder fehlen | Benutzer weiß nicht, was zwingend ist |
| Fehlermeldung fehlt | Benutzer versteht den Fehler nicht |
| Fehlermeldung steht zu weit weg | Fehler ist schwer zuzuordnen |
| Button heißt nur „OK“ | Aktion ist nicht eindeutig |
| Kein Abbrechen-Button | Benutzer kann Vorgang schlecht verlassen |
| Kein Rückweg | Benutzerführung ist unvollständig |
| Zu viele Elemente | Oberfläche wird unübersichtlich |
| Technische Begriffe | Benutzer versteht die Oberfläche schlechter |
Mini-Testfragen
1. Was trainiert dieser Mock-up-Trainer?
Er trainiert das Erkennen wichtiger UI-Elemente:
Pflichtfelder
Fehlermeldungen
Validierung
Buttons
Benutzerführung
2. Was bedeutet ein Sternchen `*` an einem Feld?
Das Sternchen bedeutet:
Pflichtfeld
Das Feld muss ausgefüllt werden.
3. Wo sollte eine Fehlermeldung stehen?
Möglichst direkt am betroffenen Feld.
Beispiel:
Preis muss größer als 0 sein.
direkt beim Preisfeld.
4. Was ist die Hauptaktion im Produktformular?
Die Hauptaktion ist:
Speichern
5. Welche Nebenaktionen sind sinnvoll?
Zum Beispiel:
Abbrechen
Zurück zur Liste
6. Was bedeutet Validierung?
Validierung bedeutet:
Das System prüft, ob eine Eingabe gültig ist.
Beispiel:
Preis muss größer als 0 sein.
7. Ist ein Mock-up ein UML-Diagramm?
Nein.
Ein Mock-up ist ein Oberflächenentwurf und kein UML-Diagramm.
8. Was zeigt ein Mock-up nicht?
Ein Mock-up zeigt nicht:
Programmcode
Datenbankbeziehungen
Klassendiagramme
Sequenzdiagramme
Kontrollflüsse
9. Warum sind eindeutige Buttons wichtig?
Weil der Benutzer erkennen muss, welche Aktion passiert.
Besser:
Speichern
Abbrechen
Zurück zur Liste
statt:
OK
Weiter
Button 1
10. Was ist Benutzerführung?
Benutzerführung bedeutet:
Die Oberfläche zeigt dem Benutzer klar, was er tun soll.
Dazu gehören:
verständliche Feldnamen
sichtbare Pflichtfelder
klare Buttons
Fehlermeldungen
Rückwege
Nächste Seite
Danach geht es weiter mit:
UML-Zustandsdiagramm
No Comments