Usability von bekannten Applikationen: PhpStorm
Beispiel für praktische Anwendung der Grundsätze der Dialoggestaltung anhand von PhpStorm (IDE).
Aufgabenangemessenheit (ISO 9241:10, Grundsätze der Dialoggestaltung)
 |
|
Lernförderlichkeit (ISO 9241:10, Grundsätze der Dialoggestaltung)
 |
|
Fehlertoleranz (ISO 9241:10, Grundsätze der Dialoggestaltung)
 |
|
Referenzen
https://de.wikipedia.org/wiki/ISO_9241
Usability in der Praxis - Fehlertoleranz in Formularen
Fehlertoleranz ist ein Grundsatz der Dialoggestaltung. Wie wird dieser in einem Formular angewendet?
Fehlertoleranz ist ein Grundsatz der Dialoggestaltung (siehe ISO 9241:10). Mit Fehlertoleranz ist gemeint, dass die Applikation dem Benutzer klare Rückmeldungen für die Korrektur gibt. Ausserdem sollen mögliche Fehler erkennbar und dadurch vermieden werden können.
In Formularen kann das wie folgt umgesetzt werden.
- Pflichtfelder als solche kennzeichnen, üblicherweise wird dies mit einem Stern (*) gemacht.
- Wenn eine Eingabe in einem bestimmten Format erfolgen muss, soll das erforderliche Format angegeben werden.
- Fehlermeldungen direkt beim Eingabefeld anzeigen.
- Fehlermeldungen enhalten was der Fehler ist und wie dieser behoben werden kann.
Umsetzung in HTML
<fieldset>
<legend>Anmeldeinformationen</legend>
<label for="username">Benutzername:*</label>
<input type="text" name="username" value="" maxlength="255">
<div class="input-error-message">Benutzername darf nicht leer sein</div><br>
<div id="neuesPasswort">
<label for="passwort_neu">Neues Passwort:*</label>
<input type="password" name="passwort_neu" value="" maxlength="255">
<div class="input-error-message">Das Passwort muss mindestens 8 Zeichen lang sein<br>Das Passwort muss Grossbuchstaben enhalten<br>Das Passwort muss Sonderzeichen enhalten</div><br>
<label for="passwort_neu2">Neues Passwort wiederholen:*</label>
<input type="password" name="passwort_neu2" value="" maxlength="255" "><div class="input-error-message">Das Passwort muss mindestens 8 Zeichen lang sein</div><br>
</div>
</fieldset>
Referenzen
https://www.nngroup.com/articles/web-form-design/
https://www.nngroup.com/articles/error-message-guidelines/
https://www.w3schools.com/html/html_forms.asp
Usability in der Praxis - Feldgrösse in Webformulare
Feldgrösse? Was soll daran wichtig sein?
Der Mensch orientiert sich im Alltag unbewusst an verschiedenen Merkmale. Bei der Benutzung eines Webformulars ist das beispielsweise die Feldgrösse.
Ist ein Feld eher klein, verbindet der Mensch dies unbewussst mit einer kurzen Eingabe. Beispielweise die Postleitzahl.
Praktische Tipps
- Feld so gross machen, dass die gängigen Eingaben erfasst werden können ohne dass der Wert dabei teilweise verschwindet.
- Feldgrösse der erwarteten Eingabe anpassen
Umsetzung in HTML
<fieldset>
<legend>Schlecht</legend>
<label for="plz">PLZ:</label><br>
<input type="text" id="plz" name="plz"><br><br>
<label for="ort">Ort:</label><br>
<input type="text" id="ort" name="ort">
</fieldset>
<br><br>
<fieldset>
<legend>Besser</legend>
<label for="plz">PLZ:</label><br>
<input type="text" id="plz" name="plz" size="2"><br><br>
<label for="ort">Ort:</label><br>
<input type="text" id="ort" name="ort">
</fieldset>
Referenzen
https://www.nngroup.com/articles/web-form-design/
https://www.w3schools.com/html/html_forms.asp
Usability in der Praxis - Felder und Label anordnen
Worauf ist bei der Strukturierung von Webformulare zu achten? Mit wenig Aufwand kann die Usability verbessert werden.
Anordnung von Label und Feld
Studien haben gezeigt, dass die Labels und Felder untereinander angeordnet werden sollen. Dies ist für das menschliche Auge ruhiger lesbar, ausserdem auch klarer in der Darstellung.
Der Abstand zwischen den zusammengehörenden Labels und Felder soll klein sein. (Gesetz der Näher: Elemente mit geringen Abständen zueinander nehmen wir als zusammengehörig wahr.)
Zusammengehörende Elemente sollen gruppiert und beschriftet werden.
Umsetzung in HTML
<fieldset>
<legend>Person</legend>
<label for="vorname">Vorname:</label><br>
<input type="text" id="vorname" name="vorname"><br><br>
<label for="nachname">Nachname:</label><br>
<input type="text" id="nachname" name="nachname">
</fieldset>
<br><br>
<fieldset>
<legend>Interessen</legend>
<label for="hobby">Hobby:</label><br>
<input type="text" id="hobby" name="hobby"><br><br>
<label for="lieblingsfarbe">Lieblingsfarbe:</label>
<input type="text" id="lieblingsfarbe" name="lieblingsfarbe"><br><br>
<label for="lieblingsfilm">Lieblingsfilm:</label><br>
<input type="text" id="lieblingsfilm" name="lieblingsfilm">
</fieldset>Referenzen
Lichtschalter Memory
Wenn bei jedem Licht an-/abschalten überlegt werden muss, stimmt was nicht. #FixEverydayThings #EverydayUserExperience
Für einen grossen Wohnraum gibt es vier Lichtschalter. Alle vier Schalter sind genau identisch, steuern jedoch unterschiedliche Bereiche im Wohnraum. Für jemanden, der diese Lichtschalter nicht täglich benutzt, ist völlig unklar, welcher Schalter zu welchem Teil des Raums gehört. "Don't make me think" klappt hier nicht, Usability ist eher mässig.
| Ausgangslage: | Einfache Verbesserung: |
 Lichtschalter Memory |  Mit User bereits erfolgreich getestet... |
Besser wäre bspw. die Schalter ähnlich zu gestalten wie der Raum unterteilt ist. Einfacher Prototyp:
Hier spielt die "Affordance" ein wichtige Rolle. Der Grundgedanke davon ist, dass durch Formen, Anordnungen etc. gleich klar ist, wie etwas funktioniert.
Hosting
Sicheres, zuverlässiges Hosting aus Graubünden
Für ein zuverlässiges und sicheres Hosting arbeitet simpel.digital zusammen mit dem Hosting-Provider Exigo. Dieser bietet zuverlässige und sichere Hostings aus Graubünden. Ihr Ansprechpartner ist aber immer simpel.digital. So ist ein persönlicher und einfacher Support gewährleistet.