Einführung in das Lehrgebiet Hypermedia:Interaktive und vernetzte SystemeMarcus Haberkorn | Intermedia Design | 2012Semina...
Veranstaltungen im LehrgebietS2: Seminar Hypermedia (Haberkorn)S2: Entwurf Hypermedia (Lorek)S2: Interaction- und Interfac...
VeranstaltungsrahmenThemenAufgabenhyperlabs.de
Die große Klammer:User Experience Design (UX)
UX Design            Designe eine Vase.            Designe eine bessere Art            und Weise, wie Menschen            ...
UX DesignDesigne eine Trefferliste   Fokus auf Produktfür Suchmaschinen.          oder AufgabenDesigne eine bessere Art Fo...
Beispiel: Suchmaschinen-Interface von Yippy
Beispiel: Suchmaschinen-Interface von Spezify
Beispiel: Suchmaschinen-Interface von Cooliris
Beispiel: Cooliris
S.P. Anderson: Bedürfnishierarchie im UX Design
Designdisziplinen im UX Design
Jesse James Garrett: Elements of UX                            Oberfläche bringt alles visuell zusammen:                  ...
Jesse James Garrett: Web als Hypertextsystem                           Jesse James Garrett: The Elements of User          ...
Jesse James Garrett: Web als Hypertextsystem                           Die folgenden Folien beziehen                      ...
Jesse James Garrett: Web als Hypertextsystem                           Benutzer-Bedürfnisse:                           Von...
Jesse James Garrett: Web als Hypertextsystem                           Inhaltliche Anforderungen:                         ...
Jesse James Garrett: Web als Hypertextsystem                           Informations-Architektur:                          ...
Jesse James Garrett: Web als Hypertextsystem                           Navigations-Gestaltung:                           G...
Jesse James Garrett: Web als Hypertextsystem                           Visuelle Gestaltung:                           Graf...
Hypermediale Systeme:Grundbegriffe und Historie
Hypermedia & HypertextHypertext als Form von       Hypermedia als Form vonHypermedia (beschränkt auf   Hypertext (enthält ...
Eigenschaften von Hypermedia / HypertextWir fragen zunächst nach drei Aspekten:- Struktur (wie ist es aufgebaut?)- Prozess...
Hypertextcharakteristika: MediumHypertexte sind nur computerbasiert sinnvollvorwiegend statische Medien repräsentierendie ...
Hypertextcharakteristika: OperationenProduktion / Autoren:  Erstellen eines Hypertexts durch Autoren ist in der  Regel ein...
Hypertextcharakteristika: Operation - InteraktionAuf Hypertexte wird über eine direktmanipulierbare grafische Benutzerober...
Hypertext: StrukturHypertext besteht ausKnoten & VerknüpfungenKnotenbeinhalten oder repräsentierenInformationenVerknüpfung...
Der HyperlinkAufpassen!Das Konzept des Linksscheint trivial zu sein –ist es aber nicht
AufgabeStellt nur mit Knoten und Verknüpfungen die Strukturdieser Websites dar (ausschnittsweise):- mongoliad.com/contents...
Jesse James Garrett: Web als Hypertextsystem                           Informations-Architektur:                          ...
Hypertext-StrukturenDie Struktur eines Hypertexts kann sein:- linear- hierarchisch- netzwerkartig
Hypertext-StrukturenLinearer Hypertext
Linearer Hypertext- Seitenlogik- vorgegebene Sequenz der Knoten- Navigation beschränkt auf „vor- und zurück“
Beispiel: Ebook
Beispiel: Lernpfad
Hypertext-StrukturenHierarchischer Hypertext
Hierarchischer Hypertext- Kapitellogik- keine strikt vorgegebene Sequenz,  aber klare thematische Ordnung- Navigation über...
Beispiel: Kulturstiftung Trier
Hypertext-StrukturenVernetzter Hypertext
Beispiel: Wikipedia
Beispiel: Das Web als Hypertextsystem
Vernetzter Hypertext- Netzlogik- keine vorgegebene Sequenz- innerhalb des Systems: Navigation primär über  Binnenlinks
Hypertext-Strukturen – Ein neuer Typus?vernetzt-integrierter Hypertext
Vernetzt-integrierter Hypertext- alte Hypertexttheorien gingen implizit davon aus, dass  ein Inhalt exklusiv an einem Knot...
Beispiel: Paper.li
Beispiel: Rivva
Sharing-Visualisierung: Google Ripples                                         Quelle
ÜbungsaufgabeWelche versch. Navigationsstrukturen stellt die Websiteintermedia-design.de bereit?
Jesse James Garrett: Web als Hypertextsystem                           Navigations-Gestaltung:                           G...
Multiple Navigationsstrukturen
Multiple Navigationsstrukturen: Globale Navigation                           Home    News         Studium          Projekt...
Multiple Navigationsstrukturen: Lokale Navigation                                   Studium                         Studie...
Multiple Navigationsstrukturen: Ergänzende Navi.                                               Betreuer XYLehrgebiet XY   ...
Intermedialität & Hypermedia?
Intermedialität & HypermediaIntermedia Design befasst sich mit ...Beziehungen zwischen Medienneuen Formen durch Digitalitä...
FragenWas unterscheidet das HypermediumYouTube vom klassischen Fernsehen?Welche Unterschiede sind inHypermedia-Charakteris...
Medienkonvergenz: Web-TV auf TV-GerätenWas ändert sich beim Weg zurück auf´s TV-Gerät?
Medienkonvergenz: Games as a Service
Bild- und Quellennachweise nach FoliennummernBILDER3    www.vasen.net/files/vasen.jpg15 http://www.jjg.net/elements/transl...
Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fac...
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Nächste SlideShare
Wird geladen in …5
×

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

1.807 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.807
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

×