![Page 1: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/1.jpg)
Folie: 1SOFTWAREERGONOMIE
- Ergonomie für Informatiker –
Vorlesung
Dipl. Päd. Marcel Zimmermann
![Page 2: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/2.jpg)
Folie: 2SOFTWAREERGONOMIE
Inhalte des Seminars:
Termine– 28.10.2006 Einführung in die Thematik
– 11.11.2006 Theoretische Grundlagen
– 18.11.2006 Aspekte bei der praktischen Umsetzung
– 02.12.2006 Verschiedene Anwendungsfälle
– Beginn: 10h Ende: ca. 15.30h
Organisatorisches– Dozent: Marcel Zimmermann
– Tel: 0511 / 627032
– Mobil: 0177 / 8388551
– Email: [email protected]
– Web: www.marcel-zimmermann.de
– Web2: www.ponton-lab.de
![Page 3: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/3.jpg)
Folie: 3SOFTWAREERGONOMIE
:: Tag 2 ::
ErkenntnistheorieUsability
![Page 4: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/4.jpg)
Folie: 4SOFTWAREERGONOMIE
:: Erkenntnistheorie
![Page 5: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/5.jpg)
Folie: 5SOFTWAREERGONOMIE
Konstruktion von Wirklichkeit:Doppelte Kontingenz
![Page 6: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/6.jpg)
Folie: 6SOFTWAREERGONOMIE
Kommunikation:
Psychisch
• Kognitive Determinanten
•Aufmerksamkeitsprozesse
• Motivation
Sozial
• Kommunikation
• Symbolisch generalisierte Medien
Psychisch
• Kognitive Determinanten
• Aufmerksamkeitsprozesse
• Motivation
Das systemtheoretische Kommunikationsmodell
![Page 7: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/7.jpg)
Folie: 7SOFTWAREERGONOMIE
Konstruktion von Wirklichkeit:
Zu viele Filterfunktionen
![Page 8: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/8.jpg)
Folie: 8SOFTWAREERGONOMIE
Konstruktion von Wirklichkeit:
Weniger Filterfunktionen
![Page 9: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/9.jpg)
Folie: 9SOFTWAREERGONOMIE
Implikationen für das Software-Design:
� Kontrollierbarkeit maximieren
� Komplexität optimieren
� Kompliziertheit minimieren
Quelle: M. Hufschmitt nach Nach Frese (1987)
![Page 10: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/10.jpg)
Folie: 10SOFTWAREERGONOMIE
:: Psychologische Komponenten
![Page 11: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/11.jpg)
Folie: 11SOFTWAREERGONOMIE
Gedächtnispsychologie:
Modell der Informationsverarbeitung
SensorischesGedächtnis
Kurzzeit-gedächtnis
Langzeit-gedächtnis
Reiz
![Page 12: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/12.jpg)
Folie: 12SOFTWAREERGONOMIE
Gedächtnispsychologie:
Zeitdauer Aspekt menschlichen Verhaltens
Im Umgang mit einem Computerrelevant
0,1 s • Wahrnehmung sequenzieller Ereignisse
• Wahrnehmung einer Ursache
• Wahrnehmung eines Übergangs oder einer Fusion, z.B. bei Animationen
• Rückkopplung bei erfolgreichem Einsatz der Maus, z.B. Verstellen des Zeigers, Verschiebung eines Windows oder seiner Vergrößerung, Zeichenoperationen
• Rückkopplung beim Drücken eines Knopfes
• Anzeige der Sanduhr
• Intervall zwischen Bildern bei einer Animation
![Page 13: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/13.jpg)
Folie: 13SOFTWAREERGONOMIE
Gedächtnispsychologie:
Zeitdauer Aspekt menschlichen Verhaltens Im Umgang mit einem Computerrelevant
1 s • Pause, wenn ein anderer im Gespräch das Wort ergreift, selbst wenn er sich nur räuspert
• Minimale Reaktionszeit bei einem unerwarteten Ereignis; wenn z.B. ein Kind vor ein fahrendes Auto läuft
• Anzeige zum Fortschritt einer Operation am PC
• Abschluss der meisten Reaktionen des Benutzers im Dialog mit dem Computer
• Dauer der meisten nicht explizit angeforderten Operationen, z.B. Autoformat oder sichern
eines Dokuments
![Page 14: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/14.jpg)
Folie: 14SOFTWAREERGONOMIE
Gedächtnispsychologie:
Zeitdauer Aspekt menschlichen Verhaltens Im Umgang mit einem Computerrelevant
10 s • Nicht unterbrochene Arbeitszeit bei der Ausführung einer Aufgabe
• Ausführen einer Teilaufgabe, z.B. ein Zug beim Schach
• Erledigen einer Teilaufgabe, z.B. ein Wort mit einem Editor ändern
• Eine Operation mit Input versorgen
![Page 15: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/15.jpg)
Folie: 15SOFTWAREERGONOMIE
Reaktionszeiten am Computer:
Zeitdauer Tätigkeit
0,2 s Eine Taste an der Tastatur drücken.
1,1 s Die Zeit, um mit dem Mauszeiger auf ein Objekt auf dem Bildschirm zu deuten.
0,4 s Homing: Die Zeit, die ein Anwender benötigt, um mit der rechten Hand von der Tastatur zur Maus zu kommen und umgekehrt.
1,35 s Die Zeit, die ein Mensch braucht, um sich geistig auf den nächsten Schritt bei einer Tätigkeit oder Aufgabe einzustellen.
![Page 16: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/16.jpg)
Folie: 16SOFTWAREERGONOMIE
PerformanzAkquisition
Aufmerksamkeit
Modell:attraktivdeutlicherfolgreich
Beobachter:
FertigkeitenErregungsniveauErwartungen
Behalten
Kodierung:sensorischsymbolisch
Wiederholung
aktionalkognitiv
Reproduktion
FähigkeitenTeilkomponenten
Einübung
Feedback Korrektur
Motivation
Verstärkung
externalstellvertretendselbsterzeugt
ModellierteEreignisse
Nachbildungs-leistung
Subkomponenten des Modellernens
Sozial-kognitive Lerntheorie:
Quelle: Albert Bandura
![Page 17: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/17.jpg)
Folie: 17SOFTWAREERGONOMIE
Aufmerksamkeit erregen:
Neun Parameter für Dialoge
1. Intensität
2. Markierung
3. Größe
4. Schriftauswahl
5. Invertierte Anzeige
6. Blinken
7. Farbe
8. Blinkende Farben
9. Klänge
![Page 18: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/18.jpg)
Folie: 18SOFTWAREERGONOMIE
:: Web Usability
![Page 19: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/19.jpg)
Folie: 19SOFTWAREERGONOMIE
Welche Leute sollte man kennen?
http://www.useit.com„You always have to design a great default.There's no excuse for not having a good
Design“
� "usability lead" für design und redesign bei SUN
� Technical University of Denmark
� IBM User Interface Institute at the T.J. Watson Research Center
� Autor des Buches „Designing Web Usability“
Jacob Nielsen
![Page 20: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/20.jpg)
Folie: 20SOFTWAREERGONOMIE
Welche Leute sollte man kennen?
Autor des Buches „Don‘t make me think!“
- Praktischer Leitfaden für Usabilitytests
- Wie User mit Sites umgehen
-Navigation und Layout
Steve Krug
"Die Leute mögen es nicht, darüber nachzugrübeln, wie man etwas macht."
![Page 21: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/21.jpg)
Folie: 21SOFTWAREERGONOMIE
Web Usability
Quelle: S. Krug
![Page 22: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/22.jpg)
Folie: 22SOFTWAREERGONOMIE
Antwortzeiten im Internet
� 0,1 Sek. unmittelbare Reaktion, das Gefühl „echter“ Interaktion
� 0,1 Sek. – Konzentration und Aufmerksamkeit 1,0 Sek. bleiben erhalten
� Ab 10 Sek. das Interesse sinkt, der Frust steigt!
![Page 23: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/23.jpg)
Folie: 23SOFTWAREERGONOMIE
Antwortzeiten im Internet
Die Reaktionskette
� Der Datendurchsatz des Servers
� Die Anbindung des Servers an das Internet
� Das Internet selbst
� Die Verbindung des Benutzers zum Internet
� Die Darstellungsgeschwindigkeit von Browser und Rechner des Anwenders
![Page 24: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/24.jpg)
Folie: 24SOFTWAREERGONOMIE
Gliederung Web Usability
Die drei zentralen Bereiche der Benutzerführung
Bildschirm-fläche
NavigationContent
![Page 25: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/25.jpg)
Folie: 25SOFTWAREERGONOMIE
Die Bildschirmfläche - Elemente
Quelle: S. Krug
![Page 26: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/26.jpg)
Folie: 26SOFTWAREERGONOMIE
Der Kofferraumtest
1. Site Kennung
2. Seitenname
3. Sektionen und Untersektionen
4. Lokale Navigation
5. Anzeiger für „Sie befinden sich hier“
6. Suche
![Page 27: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/27.jpg)
Folie: 27SOFTWAREERGONOMIE
Die Bildschirmfläche:
Screens werden in der Aufteilung nach Prozenten analysiert
![Page 28: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/28.jpg)
Folie: 28SOFTWAREERGONOMIE
Die Bildschirmfläche:
Screens werden in der Aufteilung nach Prozenten analysiert
![Page 29: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/29.jpg)
Folie: 29SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 30: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/30.jpg)
Folie: 30SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 31: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/31.jpg)
Folie: 31SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 32: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/32.jpg)
Folie: 32SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 33: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/33.jpg)
Folie: 33SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 34: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/34.jpg)
Folie: 34SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 35: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/35.jpg)
Folie: 35SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 36: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/36.jpg)
Folie: 36SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 37: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/37.jpg)
Folie: 37SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 38: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/38.jpg)
Folie: 38SOFTWAREERGONOMIE
Die Bildschirmfläche:
![Page 39: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/39.jpg)
Folie: 39SOFTWAREERGONOMIE
Die Navigation:
Navigationsoberflächen müssen die drei wesentlichen
Fragen beantworten können:
1. Wo bin ich?
2. Wo bin ich gewesen?
3. Wohin kann ich gehen?
![Page 40: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/40.jpg)
Folie: 40SOFTWAREERGONOMIE
Die Navigation:
Wo bin ich?
� Relativ zum Internet als Ganzem– Identität der Site bewahren
– Logo auf jeder Seite platzieren
– Durchgängiger Interaktionsstil
– Erwartungskonformität
� Relativ zur Struktur der Website – Hervorhebung des aktuellen Bereiches in der Struktur der Site
– Aussagekräftige Überschriften
– Sinnvolle Seitennamen
![Page 41: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/41.jpg)
Folie: 41SOFTWAREERGONOMIE
![Page 42: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/42.jpg)
Folie: 42SOFTWAREERGONOMIE
![Page 43: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/43.jpg)
Folie: 43SOFTWAREERGONOMIE
Wo bin ich?
![Page 44: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/44.jpg)
Folie: 44SOFTWAREERGONOMIE
Visuelle Hierarchie
Computer Bücher
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum odiodapibus tortor. Suspendisseeuismod dictum sapien. Praesent non tellus nec miiaculis dictum. Nam nunc. Aliquam erat volutpat. Vestibulum ante ipsum primisin faucibus orci luctus et
Ein bestimmtes Buch
Quelle: S. Krug
![Page 45: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/45.jpg)
Folie: 45SOFTWAREERGONOMIE
Visuelle Hierarchie - Schlecht
ComputerBooks
Books
Music
Sports
Travel
Hobbies
Fun
Animals
Quelle: S. Krug
![Page 46: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/46.jpg)
Folie: 46SOFTWAREERGONOMIE
![Page 47: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/47.jpg)
Folie: 47SOFTWAREERGONOMIE
![Page 48: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/48.jpg)
Folie: 48SOFTWAREERGONOMIE
![Page 49: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/49.jpg)
Folie: 49SOFTWAREERGONOMIE
![Page 50: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/50.jpg)
Folie: 50SOFTWAREERGONOMIE
![Page 51: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/51.jpg)
Folie: 51SOFTWAREERGONOMIE
Visuelle Hierarchie - Möglichkeiten
Quelle: S. Krug
![Page 52: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/52.jpg)
Folie: 52SOFTWAREERGONOMIE
Position von Seitennamen
Seitenname
Inhalt
dieser
Seite
Quelle: S. Krug
![Page 53: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/53.jpg)
Folie: 53SOFTWAREERGONOMIE
Position von Seitennamen
Seitenname
Inhalt
dieser
Seite
Quelle: S. Krug
![Page 54: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/54.jpg)
Folie: 54SOFTWAREERGONOMIE
Position von Seitennamen
Seitenname
Inhalt
dieser
Seite
Quelle: S. Krug
![Page 55: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/55.jpg)
Folie: 55SOFTWAREERGONOMIE
Der Seitenname
� Jede Seite braucht einen Namen
� Der Name muss an der richtigen Stelle sitzen
� Der Name muss auffällig sein
� Der Name muss zu dem Passen was ich grade angeklickt habe
Quelle: S. Krug
![Page 56: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/56.jpg)
Folie: 56SOFTWAREERGONOMIE
Die Navigation:
Wo bin ich gewesen?
� History-Back Funktion
� Verlaufsliste
� Codierung der Linkfarben– Anwender wissen welche Seiten sie aufgerufen haben
– Anwender rufen die Seite nicht zweimal auf
– Anwender lernen die Struktur der Site kennen
Quelle: Nielsen
![Page 57: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/57.jpg)
Folie: 57SOFTWAREERGONOMIE
Verlaufsliste
![Page 58: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/58.jpg)
Folie: 58SOFTWAREERGONOMIE
Codierung der Linkfarben
![Page 59: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/59.jpg)
Folie: 59SOFTWAREERGONOMIE
Die Navigation:
Wohin kann ich gehen?
-> Sichtbare Navigationselemente
� Drei Arten von Hyperlinks
– Eingebettete Links
– Strukturelle Links
– Assoziative Links
richtig falsch
Quelle: S. Krug
![Page 60: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/60.jpg)
Folie: 60SOFTWAREERGONOMIE
Breadcrumb-Navigationsleiste
![Page 61: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/61.jpg)
Folie: 61SOFTWAREERGONOMIE
Fischaugen-Ansicht
![Page 62: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/62.jpg)
Folie: 62SOFTWAREERGONOMIE
Fischaugen-Ansicht
![Page 63: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/63.jpg)
Folie: 63SOFTWAREERGONOMIE
Navigationsmodelle I:
![Page 64: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/64.jpg)
Folie: 64SOFTWAREERGONOMIE
Navigationsmodelle II:
![Page 65: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/65.jpg)
Folie: 65SOFTWAREERGONOMIE
Worst Practise Beispiel: „Neuartige“ Navigation
![Page 66: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/66.jpg)
Folie: 66SOFTWAREERGONOMIE
Navigation - Spielerei
![Page 67: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/67.jpg)
Folie: 67SOFTWAREERGONOMIE
Navigation – mit Hürde
![Page 68: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/68.jpg)
Folie: 68SOFTWAREERGONOMIE
Internet Links
barierefreies flashnav:: http://www.microsoft.com/mscorp/innovation/yourpotential/main.html
navigation ::� http://demo.fb.se/s/jc/thestore/site.html
video:: � http://www.boulaburton.com/
3D:: � http://www.ingreme.com/
Zoom::� http://leoburnett.ca/
Art::� www.yippieyeah.co.uk
![Page 69: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/69.jpg)
Folie: 69SOFTWAREERGONOMIE
Plattformenübergreifendes Design:
Faustregeln:
� Gängige Schriften definieren
� Frames nur wenn sie Sinn machen
� Stylesheets für alle Browser erstellen
� Auch der Bildschirm ist eine Messgröße
� Unterschiedliche Technologien beachten (Aktive X)
Quelle: J. Nielsen
![Page 70: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/70.jpg)
Folie: 70SOFTWAREERGONOMIE
Inhalte Gestalten:
Promotion-Text
(zur Kontrolle)
Verwendet das Marketing Chinesisch, das in vielen kommerziellen Websites zu finden ist.
Nebraska hat international anerkannte Anziehungspunkte, die zweifellos jedes Jahr große Menschenmengen anziehen. Einige der populärsten Plätze waren 1996 der Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166), Arbor Lodge State Historical Park Ls; Museum (100.000), Carhenge(86.598), Stuhr Museum of die PrairiePionecr (60.002) und Buffalo Ranch State Historical Park (28.446).
Quelle: J. Nielsen
![Page 71: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/71.jpg)
Folie: 71SOFTWAREERGONOMIE
Inhalte Gestalten:
Präziser Text
Nur ungefähr halb so viele Wörter wie im Kontrolltext
1996 waren die sechs bestbesuchten Attraktionen 5$ Prozent in Nebraska Fort Robinson Statc Park, besser Scotts Bluff National Monument, Arbor LodgeState Historical Park & Museum, Carhenge, Stuhr Museum of thePrairic Pioneer und Buffalo Ranch State Historical Park.
Nebraska hat international anerkannte Anziehungspunkte, die zweifellos jedes Jahr große Menschenmengen anziehen. Einige der populärsten Plätze waren 1996 der Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166), Arbor Lodge State Historical Park Ls; Museum (100.000), Carhenge (86.598), Stuhr Museum of die Prairie Pioneer (60.002) und Buffalo Ranch State HistoricalPark (28.446). Quelle: J. Nielsen
![Page 72: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/72.jpg)
Folie: 72SOFTWAREERGONOMIE
Inhalte Gestalten:
Das lesbare Layout
verwendet den gleichen Wortlaut wie der Kontrolltext, aber in einem Layout, welches das Lesen erleichtert.
Nebraska hat international anerkannte Anziehungspunkte, die jedes Jahr unzweifelhaft große Menschenmengen anziehen. 1996 waren einige der populärsten Orte:
• Fort Robinson Stace Park (355.000 Besucher)
• Scotts Bluff National Monument (132.166)
• Arbor Lodge State Historical Park & Museum (100.000)
• Carhenge (86.598)
• Stuhr Museum of the Yrairic Pioneer (60.002)
Nebraska hat international anerkannte Anziehungspunkte, die zweifellos jedes Jahr große Menschenmengen anziehen. Einige der populärsten Plätze waren 1996 der Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166), Arbor Lodge State Historical Park Ls; Museum (100.000), Carhenge (86.598), Stuhr Museum of die Prairie Pioneer (60.002) und Buffalo Ranch State HistoricalPark (28.446). Quelle: J. Nielsen
![Page 73: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/73.jpg)
Folie: 73SOFTWAREERGONOMIE
Inhalte Gestalten:
Die objektive Sprache
verwendet neutrale statt subjektiver, prahlerischer oder übertriebener Sprache (ansonsten gleich wie der Kontrolltext).
Nebraska hat mehrere Attraktionen. 1996 waren einige der meistbesuchten Plätze Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166),Arbor Lodge State Historical Park & Museum (700.000), Carhcnge (86.98), Stuhr Museum of thePrairie Pioneer (60.002) und Buffalo Ranch State Hiscorical Park (28.446).
Nebraska hat international anerkannte Anziehungspunkte, die zweifellos jedes Jahr große Menschenmengen anziehen. Einige der populärsten Plätze waren 1996 der Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166), Arbor Lodge State Historical Park Ls; Museum (100.000), Carhenge (86.598), Stuhr Museum of die Prairie Pioneer (60.002) und Buffalo Ranch State HistoricalPark (28.446). Quelle: J. Nielsen
![Page 74: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/74.jpg)
Folie: 74SOFTWAREERGONOMIE
Inhalte Gestalten:
Kombinierte Version
verwendet alle drei Verbesserungen im Schreibstil: präziser Text, lesbares Layout und objektive Sprache.
1996 waren die sechs meistbesuchten Orte in
Nebraska:
• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park & Museum
• Carhenge
• Stuhr Museum of the Prairie Pioneer
• Buffalo Ranch State Historical Park
Nebraska hat international anerkannte Anziehungspunkte, die zweifellos jedes Jahr große Menschenmengen anziehen. Einige der populärsten Plätze waren 1996 der Fort Robinson State Park (355.000 Besucher), Scotts Bluff National Monument (132.166), Arbor Lodge State Historical Park Ls; Museum (100.000), Carhenge (86.598), Stuhr Museum of die Prairie Pioneer (60.002) und Buffalo Ranch State HistoricalPark (28.446). Quelle: J. Nielsen
![Page 75: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/75.jpg)
Folie: 75SOFTWAREERGONOMIE
Die umgekehrte Pyramide
Schlagzeile
Sub-Titel
Überschriften Informationskapseln
Schlüsselwörter
Details
Was, wie, wann, wo, warum
Quelle: J. Nielsen
![Page 76: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/76.jpg)
Folie: 76SOFTWAREERGONOMIE
Inhalte Gestalten:
� Anchortags– führen zur Verwirrung, da der Nutzer denkt, er sein auf einer anderen Seite
� Lesbarkeit herstellen durch– starken Kontrast von Hintergrund und Text– einfarbigen oder dezenten Hintergrund– eine angemessene Größe des Textes– statischen Text (= nicht animiert)– serifenlose Schrift– Einheitliche, dezente (!!!) Formatierungen
� Warum Inhalte nicht gelesen werden– Das Lesen am Monitor ist zu 25% Langsamer als auf Papier– Das Internet ist ein vom Nutzer gesteuertes Medium:
Der Nutzer hat das Gefühl Dinge anklicken zu müssen– Die Konkurrenz sind Millionen von anderen Sites– Das Moderne Leben ist hektisch
Quelle: J. Nielsen
![Page 77: -Ergonomie für Informatiker – Vorlesung · SOFTWARE ERGONOMIE Folie: 74 Inhalte Gestalten : Kombinierte Version verwendet alle drei Verbesserungen im Schreibstil: präziser Text,](https://reader030.vdocuments.pub/reader030/viewer/2022040623/5d4bfd2588c99342768b995c/html5/thumbnails/77.jpg)
Folie: 77SOFTWAREERGONOMIE
Usability im Sonderangebot
Quelle: S. Krug