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

Präsentation zum Thema: "© WZL/Fraunhofer IPT Benutzerführung auf Weboberflächen Intuitive Bedienung auch für unerfahrene Benutzer Vortrag zur Seminararbeit Benjamin Horsten."—  Präsentation transkript:

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

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

3 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.

4 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

5 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

6 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

7 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

8 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)

9 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

10 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

11 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.“

12 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:

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

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

15 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

16 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

17 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

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

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

20 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

21 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

22 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

23 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

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

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