© WZL/Fraunhofer IPT Benutzerführung auf Weboberflächen Intuitive Bedienung auch für unerfahrene Benutzer Vortrag zur Seminararbeit Benjamin Horsten

Seite 2© WZL/Fraunhofer IPT Gliederung 10 häufige Fehler in Webprojekten Beispiele aus dem Internet Beispiele aus dem Dispotool Verbesserungsmöglichkeiten Ausblick

Seite 3© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 1Element sieht aus als wäre es klickbar, ist es aber nicht Eye-Tracking / Attention Tracking(Mausklicks) Bilder sind immer auch als Link zu implementieren  Größere Ansicht  Link auf Produkt oder Anzeige etc.

Seite 4© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 2Usability-Tests durch Entwickler / Keine Tests Bei häufiger Bedienung Gewöhnung an die Schwächen der eigenen Oberfläche  Fehler schwierig zu finden  Gefahr, dass Fehler nicht behoben wird, da er niemandem auffällt Keine Tests der Oberfläche:  Benutzer findet sich ohne Einweisung nicht zurecht  Demotivation/Verlassen der Seite

Seite 5© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 3Keine Hilfeseite / Anleitung Benutzer findet sich ohne Einweisung eines Entwicklers oder eines Kollegen nicht zurecht und kann das Tool nicht verwenden  Mehraufwand für alle, die das Tool verwenden  Schlechtes Image für den Entwickler

Seite 6© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 4Keine oder schlechte Suchfunktion Gerade bei umfangreichen Webseiten  Benutzer ist orientierungslos  Benutzer findet nicht den Inhalt, den er auf der Website erwartet Beispiel aus dem Webtool PS-Formeln  Suche mit Zusatzoptionen  Sortierung der Ergebnisse nach verschiedenen Kriterien  Einschränkung der Suche nach Abteilungen

Seite 7© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 5Zu viel Funktionalität Die Website bietet in ihrem Bereich viele Funktionen, aber schlecht angeordnet  Unübersichtlich  nicht selbsterklärend  nur für erfahrene Internetuser nutzbar

Seite 8© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 6Abweichung von etablierten Standards Sehr bekannte Websites haben Funktionalitäten und Anordnungen von Elementen gut vorgemacht und es sind Standards geworden Amazon  Warenkorb oben rechts YouTube  Gute Suchfunktion, Suchleiste oben zentral  Logo oben links(führt wieder auf Hauptseite)

Seite 9© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 7Zu wenig Fehlerbehandlung Benutzer weiß nicht, ob er etwas bzw. was er falsch gemacht hat  Aussagekräftige Fehlertexte auch für unerfahrene Benutzer sind ein Muss Schlechte Fehlermeldungen  Helfen Benutzer nicht weiter

Seite 10© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 8Sprache Der Benutzer muss die Anwendung verstehen können Das ist nur möglich bei:  Ordentlicher Übersetzung(Falls Programm in mehreren Ländern verfügbar ist)  Einwandfreier Grammatik/Rechtschreibung

Seite 11© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 9Erwartungskonformität Mit dem was passiert, muss der Benutzer gerechnet haben  Download-Button  FileChooser geht auf(Pfadauswahl)  Download startet mit Statusanzeige(%) ISO 9241 „Ein Dialog ist erwartungskonform, wenn er konsistent ist und den Merkmalen des Benutzers entspricht, z.B. den Kenntnissen aus dem Arbeitsgebiet, der Ausbildung und der Erfahrung des Benutzers sowie den allgemein anerkannten Konventionen.“

Seite 12© WZL/Fraunhofer IPT 10 häufige Fehler in Webprojekten 10Zu wenig selbsterklärend Der Benutzer sollte das Programm „ohne zu lesen“ bedienen können  Das einfache Überfliegen von Anzeigetexten oder Fehlermeldungen sollte ausreichen, um dem Benutzer zu signalisieren, was gemeint ist Gut: Schlecht:

Seite 13© WZL/Fraunhofer IPT Beispiele aus dem Internet Verkäufer von Arbeitskleidung  Fehler bei der Anzeige der Preise

Seite 14© WZL/Fraunhofer IPT Beispiele aus dem Internet Amazon Onlineshop  Übersichtlich  Gut sortiert  Empfehlungen  Zuletzt angesehene Artikel  Mit Benutzerspezifi- schen Profilen

Seite 15© WZL/Fraunhofer IPT Beispiele aus dem Dispotool Gemeinschaftsprojekt mehrerer Entwickler vom WZL Auf HTML, JavaScript, CSS und Java aufgebautes Webprojekt Daten werden mithilfe des Frameworks Hibernate objekt-relational in einer Datenbank gespeichert. Produktionsdaten mit verschiedenen Produktionsverfahren durchlaufen

Seite 16© WZL/Fraunhofer IPT Beispiele aus dem Dispotool – Uploadseite vorher Alles sehr nah beieinander  welcher Text gehört zu welchem Element Benutzer weiß nicht, wie die Daten formatiert sein müssen  Einweisung erforderlich

Seite 17© WZL/Fraunhofer IPT Beispiele aus dem Dispotool – Uploadseite nachher Schriftzug Upload ist durch Formatierung und Abstände als Überschrift zu erkennen Klare Trennung von Buchungs- und Materialdaten Anzeige einer Hilfe beim überfahren der Fragezeichen mit der Maus

Seite 18© WZL/Fraunhofer IPT Beispiele aus dem Dispotool – Uploadseite nachher Format der Eingangsdaten

Seite 19© WZL/Fraunhofer IPT Beispiele aus dem Dispotool – Hauptseite

Seite 20© WZL/Fraunhofer IPT Beispiele aus dem Dispotool – Hauptseite Verbesserungswürdig: 1.Drag & Drop für Zugänge und Abgänge nicht intuitiv  Der Satz „Ziehen sie die Buchungsnummern aus der Box ‚Ungenutzte Buchungsnummern‘ in die Boxen Zugänge/Abgänge/Stornozugänge/Stornoabgänge“ an der richtigen Stelle würde vielen Benutzern schon weiterhelfen 2.Der Button, welches Dispoverfahren im Moment benutzt wird, ist zu unauffällig  Ganzes Verfahren farbig markieren, und den Button weglassen 3.Materialnummernauswahl hervorheben, da dies die erste Aktion sein muss  Restlichen Inhalt erst nach erfolgreicher Auswahl anzeigen

Seite 21© WZL/Fraunhofer IPT Verbesserungsmöglichkeiten Planung  Format der hochgeladenen Daten bestimmen(intern und extern)  UML-Diagramme der Abläufe  Weg der Daten über die HTML-Seite, das Java-Servlet, den Server und wieder zurück übersichtlich visualisieren

Seite 22© WZL/Fraunhofer IPT Verbesserungsmöglichkeiten Usability-Tests mit Benutzern, die das Tool noch nicht kennen  Am WZL zum Beispiel Hiwis  Dem Benutzer ohne Hilfestellung über die Schulter schauen

Seite 23© WZL/Fraunhofer IPT Verbesserungsmöglichkeiten Ein-Klick-Aktionen  Es werden selten Doppelklicks verwendet  Wichtige Funktionen, die auf andere Seiten weiterleiten oder eine Aktion ausführen, werden mit einem einzigen Klick ausgeführt  Website wirkt interaktiver und dynamischer, ähnlich einer Handy-App

Seite 24© WZL/Fraunhofer IPT Fazit Planung Häufige Fehler vermeiden Usability-Tests durch neutrale Personen

Seite 25© WZL/Fraunhofer IPT Vielen Dank für die Aufmerksamkeit, noch Fragen?