Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 16 - Die Benutzerschnittstelle des World Wide Web. Mensch-Maschine-Interaktion

Transkript

1 Folie 1 Mensch-Maschine-Interaktion

2 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 2

3 Folie 3 Die erste Webseite des WWW

4 Folie 4 Der Erfinder des WWW Robert Caillau (left) and Timer Berners-Lee (right) Quelle:Wikipedia,

5 Folie 5 Die ersten Web Browser Mosaic 1993 Netscape 1994 Quelle:Wikipedia

6 Folie 6 Der Uniform Resource Locator Protokoll Servername Verzeichnis Dateiname Anker

7 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 7

8 Folie 8 Statisches Layout Optimale Fensterbreite Zu große Fensterbreite Zu geringe Fensterbreite

9 Folie 9 Responsive Layout Plattform PC Plattform Mobiles Gerät

10 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 10

11 Folie 11 Dynamische Erzeugung von Webseiten Benutzer Webserver Abfrage Abfrage Ausführung starten Darstellung Webbrowser Antwort HTML Antwort HTML Software erzeugt Webseite

12 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 12

13 Die Entwicklung des WWW Web 1.0 = statisches WWW Web 2.0 = dynamisches WWW Web 3.0 = semantisches WWW oder semantic Web!! Im Web 3.0 verwendetet Formalismen Resource Description Framework (RDF) Web Ontology Language (OWL) SPARQL Protocol and RDF Query Language (SPARQL) Folie 13

14 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 14

15 Charakteristika von Webseiten Rahmenbedingungen beim Lesen: wenige Sekunden zum Lesen der Webseite stehen zur Verfügung Lange Texte werden nur überflogen Navigation ist stark strukturiert (siehe nächste Folie) Konsequenzen für das Design: Inhalte müssen kurz und prägnant sein Texte gut lesbar (großer Font und großer Kontrast) entwerfen Möglichst nicht auf Scrollbar zurückgreifen Gute Navigationsführung ermöglichen Folie 15

16 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 16

17 Folie 17 Navigationselemente einer Webseite URL der Seite Breadcrumb Trail Hauptnavigation Unterkategorie Aktuelle Seite

18 Kapitel 16 - Die Benutzerschnittstelle des World Wide Web Technische Grundkonzepte des Web Layout: fließend, statisch, adaptiv, responsiv Inhalte: statisch oder dynamisch Nutzungsarten: Web x.0 (x = 1,2,3,...) Wie Webseiten gelesen werden Orientierung und Navigation Die sozialen Spielregeln: Netiquette im Web Folie 18

19 Folie 19 Do s and dont s im WWW Den Menschen im Blick behalten Gleiche Verhaltensregeln im Web wie im richtigen Leben Zeit und Bandbreite anderer respektieren Gut aussehen online und offline Privatsphäre respektieren