Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)

1.843 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.843
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
293
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)

  1. 1. Einführung in das Lehrgebiet Hypermedia:Interaktive und vernetzte SystemeMarcus Haberkorn | Intermedia Design | 2012Seminar | Hypermedia | für das 2. Semester
  2. 2. Veranstaltungen im LehrgebietS2: 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. 3. VeranstaltungsrahmenThemenAufgabenhyperlabs.de
  4. 4. Die große Klammer:User Experience Design (UX)
  5. 5. UX Design Designe eine Vase. Designe eine bessere Art und Weise, wie Menschen zuhause Blumen genießen können. 5
  6. 6. UX DesignDesigne eine Trefferliste Fokus auf Produktfür Suchmaschinen. oder AufgabenDesigne eine bessere Art Fokus auf Erlebnisund Weise, wie sichMenschen zu einem Themainformieren können. 6
  7. 7. Beispiel: Suchmaschinen-Interface von Yippy
  8. 8. Beispiel: Suchmaschinen-Interface von Spezify
  9. 9. Beispiel: Suchmaschinen-Interface von Cooliris
  10. 10. Beispiel: Cooliris
  11. 11. S.P. Anderson: Bedürfnishierarchie im UX Design
  12. 12. Designdisziplinen im UX Design
  13. 13. 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?
  14. 14. Jesse James Garrett: Web als Hypertextsystem Jesse James Garrett: The Elements of User Experience http://www.jjg.net/elements/translations/
  15. 15. 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.
  16. 16. 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.
  17. 17. Jesse James Garrett: Web als Hypertextsystem Inhaltliche Anforderungen: Definition der notwendigen Inhaltselemente der Site zur Befriedigung der Benutzerbedürfnisse
  18. 18. Jesse James Garrett: Web als Hypertextsystem Informations-Architektur: Strukturierte Gestaltung des Informationsraumes zur Vereinfachung des intuitiven Zugangs der Benutzer zu den Inhalten
  19. 19. 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
  20. 20. Jesse James Garrett: Web als Hypertextsystem Visuelle Gestaltung: Grafische Bearbeitung von Text, grafischen Elementen und Navigationskomponenten
  21. 21. Hypermediale Systeme:Grundbegriffe und Historie
  22. 22. Hypermedia & HypertextHypertext als Form von Hypermedia als Form vonHypermedia (beschränkt auf Hypertext (enthält viele non-textuelle Informationen) Text-Informationen)
  23. 23. Eigenschaften von Hypermedia / HypertextWir fragen zunächst nach drei Aspekten:- Struktur (wie ist es aufgebaut?)- Prozess / Operationen (was macht man damit?)- Inhalt / Medium (was stellt es dar?)
  24. 24. Hypertextcharakteristika: MediumHypertexte sind nur computerbasiert sinnvollvorwiegend statische Medien repräsentierendie Inhalte textuell, bildhaft oder symbolisch.auch dynamische Medien (Animationen, Video,Audio …) erfüllen diese Funktion in zunehmendem Maß
  25. 25. Hypertextcharakteristika: OperationenProduktion / 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
  26. 26. Hypertextcharakteristika: Operation - InteraktionAuf Hypertexte wird über eine direktmanipulierbare grafische Benutzeroberflächeinteraktiv zugegriffen.
  27. 27. Hypertext: StrukturHypertext besteht ausKnoten & VerknüpfungenKnotenbeinhalten oder repräsentierenInformationenVerknüpfungen (Hyperlinks)verbinden diese Knoten
  28. 28. Der HyperlinkAufpassen!Das Konzept des Linksscheint trivial zu sein –ist es aber nicht
  29. 29. AufgabeStellt nur mit Knoten und Verknüpfungen die Strukturdieser Websites dar (ausschnittsweise):- mongoliad.com/contents/38- kulturstiftung-trier.de- de.wikipedia.org
  30. 30. Jesse James Garrett: Web als Hypertextsystem Informations-Architektur: Strukturierte Gestaltung des Informationsraumes zur Vereinfachung des intuitiven Zugangs der Benutzer zu den Inhalten
  31. 31. Hypertext-StrukturenDie Struktur eines Hypertexts kann sein:- linear- hierarchisch- netzwerkartig
  32. 32. Hypertext-StrukturenLinearer Hypertext
  33. 33. Linearer Hypertext- Seitenlogik- vorgegebene Sequenz der Knoten- Navigation beschränkt auf „vor- und zurück“
  34. 34. Beispiel: Ebook
  35. 35. Beispiel: Lernpfad
  36. 36. Hypertext-StrukturenHierarchischer Hypertext
  37. 37. Hierarchischer Hypertext- Kapitellogik- keine strikt vorgegebene Sequenz, aber klare thematische Ordnung- Navigation über Hierarchieebenen
  38. 38. Beispiel: Kulturstiftung Trier
  39. 39. Hypertext-StrukturenVernetzter Hypertext
  40. 40. Beispiel: Wikipedia
  41. 41. Beispiel: Das Web als Hypertextsystem
  42. 42. Vernetzter Hypertext- Netzlogik- keine vorgegebene Sequenz- innerhalb des Systems: Navigation primär über Binnenlinks
  43. 43. Hypertext-Strukturen – Ein neuer Typus?vernetzt-integrierter Hypertext
  44. 44. 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)
  45. 45. Beispiel: Paper.li
  46. 46. Beispiel: Rivva
  47. 47. Sharing-Visualisierung: Google Ripples Quelle
  48. 48. ÜbungsaufgabeWelche versch. Navigationsstrukturen stellt die Websiteintermedia-design.de bereit?
  49. 49. 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
  50. 50. Multiple Navigationsstrukturen
  51. 51. Multiple Navigationsstrukturen: Globale Navigation Home News Studium Projekte Team
  52. 52. Multiple Navigationsstrukturen: Lokale Navigation Studium Studieninhalte Lehrgebiete 1-n
  53. 53. Multiple Navigationsstrukturen: Ergänzende Navi. Betreuer XYLehrgebiet XY Projekt XY Schlagwort XY
  54. 54. Intermedialität & Hypermedia?
  55. 55. Intermedialität & HypermediaIntermedia Design befasst sich mit ...Beziehungen zwischen Medienneuen Formen durch DigitalitätGrenzüberschreitungen
  56. 56. FragenWas unterscheidet das HypermediumYouTube vom klassischen Fernsehen?Welche Unterschiede sind inHypermedia-Charakteristikabegründet?
  57. 57. Medienkonvergenz: Web-TV auf TV-GerätenWas ändert sich beim Weg zurück auf´s TV-Gerät?
  58. 58. Medienkonvergenz: Games as a Service
  59. 59. Bild- und Quellennachweise nach FoliennummernBILDER3 www.vasen.net/files/vasen.jpg15 http://www.jjg.net/elements/translations/elements_de.pdfLITERATUR14 Anderson, Stephen P. (2011): Seductive Interaction Design15ff Garrett, Jesse James (2010): The Elements of User Experience
  60. 60. Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 69

×