Update 03/2012: Folien zur 1. Sitzung der "Einführung ins Lehrgebiet Hypermedia: Interaktive & vernetzte Systeme" im Studiengang Intermedia Design der FH Trier im Sommersemester 2012

1. Einführung in das Lehrgebiet Hypermedia:
Interaktive und vernetzte Systeme
Marcus Haberkorn | Intermedia Design | 2012
Seminar | Hypermedia | für das 2. Semester

2. Veranstaltungen im Lehrgebiet
S2: Seminar Hypermedia (Haberkorn)
S2: Entwurf Hypermedia (Lorek)
S2: Interaction- und Interfacedesign (Becker)
S2: Multimediaprogrammierung (Klober)
S3-5: Webdesign & Webentwicklung (Lorek/Klober)
S3-5: User Experience Design (Haberkorn)
S3-5: Hauptprojekt (Haberkorn)

3. Veranstaltungsrahmen
Themen
Aufgaben
hyperlabs.de

4. Die große Klammer:
User Experience Design (UX)

5. UX Design
Designe eine Vase.
Designe eine bessere Art
und Weise, wie Menschen
zuhause Blumen genießen
können.
5

6. UX Design
Designe eine Trefferliste Fokus auf Produkt
für Suchmaschinen. oder Aufgaben
Designe eine bessere Art Fokus auf Erlebnis
und Weise, wie sich
Menschen zu einem Thema
informieren können.
6

7. Beispiel: Suchmaschinen-Interface von Yippy

8. Beispiel: Suchmaschinen-Interface von Spezify

9. Beispiel: Suchmaschinen-Interface von Cooliris

10. Beispiel: Cooliris

11. S.P. Anderson: Bedürfnishierarchie im UX Design

16. Designdisziplinen im UX Design

17. Jesse James Garrett: Elements of UX
Oberfläche bringt alles visuell zusammen:
Wie sieht das fertige Produkt aus?
Gerüst konkretisiert die Struktur:
Mit welchen Interface-Komponenten können User
die Site nutzen?
Struktur gibt dem Aufgabenbereich eine Form:
Wie verhalten sich die Teile der Seite und passen
wie zusammen?
Aufgabenbereich überführt Strategie in
Anforderungen:
Welche Features wird die Site beinhalten?
Strategie ist der Anfang:
Was will der User von der Site? Was wollen wir?

18. Jesse James Garrett: Web als Hypertextsystem
Jesse James Garrett: The Elements of User
Experience
http://www.jjg.net/elements/translations/

19. Jesse James Garrett: Web als Hypertextsystem
Die folgenden Folien beziehen
sich auf das
Web als Hypertextsytem
(informationsorientiert, rechte
Hälfte der Grafik).
Nutzt das zu entwickelnde
System das
Web als Software-Schnittstelle
(aufgabenorientiert, linke Hälfte
der Grafik), kommen andere
Ansätze hinzu.

20. Jesse James Garrett: Web als Hypertextsystem
Benutzer-Bedürfnisse:
Von Außen abgeleitete Site-
Zielsetzungen, welche durch
Benutzerforschung erhoben
werden (ethno-, techno-,
psychografisch etc.)
Inhaltsziele: Interne
Zielsetzungen der Site, wie
etwa geschäftliche,
künstlerische o.a.

21. Jesse James Garrett: Web als Hypertextsystem
Inhaltliche Anforderungen:
Definition der notwendigen
Inhaltselemente der Site zur
Befriedigung der
Benutzerbedürfnisse

22. Jesse James Garrett: Web als Hypertextsystem
Informations-Architektur:
Strukturierte Gestaltung des
Informationsraumes zur
Vereinfachung des intuitiven
Zugangs der Benutzer zu den
Inhalten

23. Jesse James Garrett: Web als Hypertextsystem
Navigations-Gestaltung:
Gestaltung der Schnittstellen-
Elemente zur Erleichterung der
Navigation durch die
Informations-Architektur
Informationsgestaltung:
Informationsgestaltung zur
Erleichterung
des Verständnisses

24. Jesse James Garrett: Web als Hypertextsystem
Visuelle Gestaltung:
Grafische Bearbeitung von Text,
grafischen Elementen und
Navigationskomponenten

25. Hypermediale Systeme:
Grundbegriffe und Historie

26. Hypermedia & Hypertext
Hypertext als Form von Hypermedia als Form von
Hypermedia (beschränkt auf Hypertext (enthält viele non-
textuelle Informationen) Text-Informationen)

27. Eigenschaften von Hypermedia / Hypertext
Wir fragen zunächst nach drei Aspekten:
- Struktur (wie ist es aufgebaut?)
- Prozess / Operationen (was macht man damit?)
- Inhalt / Medium (was stellt es dar?)

28. Hypertextcharakteristika: Medium
Hypertexte sind nur computerbasiert sinnvoll
vorwiegend statische Medien repräsentieren
die Inhalte textuell, bildhaft oder symbolisch.
auch dynamische Medien (Animationen, Video,
Audio …) erfüllen diese Funktion in zunehmendem Maß

29. Hypertextcharakteristika: Operationen
Produktion / Autoren:
Erstellen eines Hypertexts durch Autoren ist in der
Regel eine nichtsequentielle Tätigkeit.
Konsumption / Leser/Rezipienten:
Reihenfolge des Zugriffs auf die Knoten bestimmt der
Leser, indem er seinem Wissen und seiner Motivation
entsprechend Links benutzt

30. Hypertextcharakteristika: Operation - Interaktion
Auf Hypertexte wird über eine direkt
manipulierbare grafische Benutzeroberfläche
interaktiv zugegriffen.

31. Hypertext: Struktur
Hypertext besteht aus
Knoten & Verknüpfungen
Knoten
beinhalten oder repräsentieren
Informationen
Verknüpfungen (Hyperlinks)
verbinden diese Knoten

32. Der Hyperlink
Aufpassen!
Das Konzept des Links
scheint trivial zu sein –
ist es aber nicht

33. Aufgabe
Stellt nur mit Knoten und Verknüpfungen die Struktur
dieser Websites dar (ausschnittsweise):
- mongoliad.com/contents/38
- kulturstiftung-trier.de
- de.wikipedia.org

34. Jesse James Garrett: Web als Hypertextsystem
Informations-Architektur:
Strukturierte Gestaltung des
Informationsraumes zur
Vereinfachung des intuitiven
Zugangs der Benutzer zu den
Inhalten

35. Hypertext-Strukturen
Die Struktur eines Hypertexts kann sein:
- linear
- hierarchisch
- netzwerkartig

36. Hypertext-Strukturen
Linearer Hypertext

37. Linearer Hypertext
- Seitenlogik
- vorgegebene Sequenz der Knoten
- Navigation beschränkt auf „vor- und zurück“

38. Beispiel: Ebook

39. Beispiel: Lernpfad

40. Hypertext-Strukturen
Hierarchischer Hypertext

41. Hierarchischer Hypertext
- Kapitellogik
- keine strikt vorgegebene Sequenz,
aber klare thematische Ordnung
- Navigation über Hierarchieebenen

42. Beispiel: Kulturstiftung Trier

43. Hypertext-Strukturen
Vernetzter Hypertext

44. Beispiel: Wikipedia

45. Beispiel: Das Web als Hypertextsystem

46. Vernetzter Hypertext
- Netzlogik
- keine vorgegebene Sequenz
- innerhalb des Systems: Navigation primär über
Binnenlinks

47. Hypertext-Strukturen – Ein neuer Typus?
vernetzt-integrierter Hypertext

48. Vernetzt-integrierter Hypertext
- alte Hypertexttheorien gingen implizit davon aus, dass
ein Inhalt exklusiv an einem Knoten zu finden ist
- heute: siteübergreifende Netzlogik
Aggregation von Inhalten mehrerer Sites in einem
Knoten
- d.h. der Inhalt einer Seite stammt direkt von einer /
mehrerer anderer Sites (Einbettung, Shares,
Aggregation o.a. Verbreitung)

49. Beispiel: Paper.li

50. Beispiel: Rivva

51. Sharing-Visualisierung: Google Ripples
Quelle

52. Übungsaufgabe
Welche versch. Navigationsstrukturen stellt die Website
intermedia-design.de bereit?

53. Jesse James Garrett: Web als Hypertextsystem
Navigations-Gestaltung:
Gestaltung der Schnittstellen-
Elemente zur Erleichterung der
Navigation durch die
Informations-Architektur
Informationsgestaltung:
Informationsgestaltung zur
Erleichterung
des Verständnisses

54. Multiple Navigationsstrukturen

55. Multiple Navigationsstrukturen: Globale Navigation
Home
News Studium Projekte Team

56. Multiple Navigationsstrukturen: Lokale Navigation
Studium
Studieninhalte
Lehrgebiete 1-n

57. Multiple Navigationsstrukturen: Ergänzende Navi.
Betreuer XY
Lehrgebiet XY Projekt XY
Schlagwort XY

58. Intermedialität & Hypermedia?

59. Intermedialität & Hypermedia
Intermedia Design befasst sich mit ...
Beziehungen zwischen Medien
neuen Formen durch Digitalität
Grenzüberschreitungen

60. Fragen
Was unterscheidet das Hypermedium
YouTube vom klassischen Fernsehen?
Welche Unterschiede sind in
Hypermedia-Charakteristika
begründet?

61. Medienkonvergenz: Web-TV auf TV-Geräten
Was ändert sich beim Weg zurück auf´s TV-Gerät?

62. Medienkonvergenz: Games as a Service

63. Bild- und Quellennachweise nach Foliennummern
BILDER
3 www.vasen.net/files/vasen.jpg
15 http://www.jjg.net/elements/translations/elements_de.pdf
LITERATUR
14 Anderson, Stephen P. (2011): Seductive Interaction Design
15ff Garrett, Jesse James (2010): The Elements of User Experience

64. Marcus Haberkorn
Akademischer Rat
Lehrgebiet Hypermedia: Interaktive & vernetzte Systeme
Studiengang Intermedia Design im Fachbereich Gestaltung
Fachhochschule Trier
Irminenfreihof 8
Postfach 1826
D-54208 Trier
Tel. +49 651 8103-839
Mail: m.haberkorn@fh-trier.de
69