Designkompetenzen für vernetzte Systeme
•Download as KEY, PDF•
0 likes•588 views
Vorlesung vom 27. Juli 2011 am Fachbereich Mediendesign der Hochschule Hof, Campus Münchberg
Recommended
Recommended
More Related Content
Similar to Designkompetenzen für vernetzte Systeme
Similar to Designkompetenzen für vernetzte Systeme (20)
Designkompetenzen für vernetzte Systeme
- 1. Designkompetenzen für vernetzte Systeme (im Jahr 2011) Tilman Zitzmann Probevorlesung 2. Teil am 27. Juli 2011 an der Hochschule Hof, Campus Münchberg
- 2. Interactiondesign Interaktion: Gegenseitige Beeinussung zweier Parteien
- 4. Interactiondesign Digitale Medien Digitale Medien:: Text, Bild, Video, Audio – Multimedia
- 6. Interactiondesign Digitale Medien Vernetzung Vernetzung: lokale Netzwerke, Wireless, Internet
- 7. Interactiondesign Digitale Medien Vernetzung
- 8. Vernetzung — Austausch digitaler Information und Medien — Das Internet: 1.100.000.000 Nutzer — Verfügbarkeit aktueller Informationen — Geschwindigkeit der Kommunikation — Umgang mit dem Computer
- 9. Designkompetenzen für vernetzte Systeme (im Jahr 2011)
- 10. Ziel Was heißt diese Vernetzung für das Design? Was macht einen guten Designer vernetzter Systeme aus?
- 11. boingboing.net – Beispiel für eine moderne Website
- 12. Statische Veränderliche Struktur Inhalte boingboing.net – Beispiel für eine moderne Website
- 15. Responsive Webdesign – Anpassung des Layouts für verschiedene Displaygrößen
- 16. Beispiel: Artikel auf der Website der „Zeit“
- 17. „Reader“-Funktion des Webbrowsers Safari
- 18. Artikel im RSS-Feed in Google Reader
- 19. Artikel im RSS-Feed in Google Reader
- 20. Artikel auf der Facebook-Pinnwand
- 21. Artikel auf der Facebook-Pinnwand
- 25. 2. Kenntnis der Netzkultur Übereinkünfte, Sprache, Symbole, technische und soziale Regeln
- 26. Sprache im Netz — „Log-in“ — „Registrierung“ — „Kommentare“ — „Suche“ — „Tags“
- 27. Symbole im Netz
- 28. Symbole im Netz
- 29. Symbole im Netz
- 30. Symbole im Netz
- 31. Symbole im Netz
- 32. Symbole im Netz
- 33. Symbole im Netz
- 34. Symbole im Netz
- 35. Symbole im Netz
- 36. Netzkultur — ist ständigem Wandel unterworfen — ist lebendig und menschlich — besteht aus Mainstream & Subkulturen
- 37. Netzkultur – Technik — Modem, ISDN, DSL, Flatrate — aktuelle Rechnerperformance — minimale Displayauösung 1024 x 768 Pixeln
- 38. Netzkultur – Soziale Regeln — Mitmachen — Soziale Interaktion — Sensibilität gegenüber persönlicher Daten
- 39. eEtiquette.de
- 40. eEtiquette.de
- 41. 2. Kenntnis der Netzkultur
- 42. Auswirkungen der Vernetzung — Überangebot — Reizüberutung — Zeitnot — Überforderung — Desinteresse
- 43. 3. Gestaltung für Geschwindigkeit
- 44. Augenbewegungen beim Lesen eines Textes
- 45. Augenbewegung bei Betrachten einer Website
- 47. With App Pulse App
- 48. 3. Gestaltung für Geschwindigkeit — Situation des Nutzers beachten — niederschwelliger Einstieg — etablierte Standards — Wünsche und Fragen vorhersehen
- 49. 3. Gestaltung für Geschwindigkeit
- 50. 4. Motivation des Nutzers
- 51. Flickr Foto-Detailseite: Gleichzeitige Vermittlung von Nutzen, Inhalt & Funktionen
- 52. Das wolltest du sehen, lieber Nutzer. Flickr Foto-Detailseite: Gleichzeitige Vermittlung von Nutzen, Inhalt & Funktionen
- 53. Schau doch Das wolltest du mal, was es hier sehen, lieber Nutzer. noch alles gibt! Möchtest du das Foto kommentieren? Flickr Foto-Detailseite: Gleichzeitige Vermittlung von Nutzen, Inhalt & Funktionen
- 54. Gamication beim ortsbezogenen Netzwerk Foursquare: Rangliste und „Badges“
- 55. Twitter Überlastungshinweis: Überraschung, Charme & Witz
- 56. Designkompetenzen für vernetzte Systeme 1. Flexibles Design 2. Kenntnis der Netzkultur 3. Gestaltung für Geschwindigkeit 4. Motivation der Nutzer
- 57. Vielen Dank für die Aufmerksamkeit. Fragen? Ergänzungen? 1. Flexibles Design 2. Kenntnis der Netzkultur 3. Gestaltung für Geschwindigkeit 4. Motivation der Nutzer
Editor's Notes
- Als Thema für den zweiten Teil habe ich mir folgendes Thema ausgesucht:\n
- Interaktion: Gegenseitige Beeinflussung zweier Parteien \nWarum überhaupt jemand über Interactiondesign spricht, liegt an 2 Neuerungen:\n
- \n
- \n
- \n
- Vernetzung: Also Verbindung interaktiver Systeme\n
- Vernetzung: Also Verbindung interaktiver Systeme\n
- Vernetzung: Also Verbindung interaktiver Systeme\n
- \n
- Vernetzung ermöglicht es uns, digitale Informationen und Medien auszutauschen.\nDas Internet\n1,1 Milliarden Menschen nutzen das Internet regelmäßig, 22% der Weltbevölkerung\nBesonderheit dieses vernetzten Mediums: Jeder dieser 1,1 Milliarden Menschen ist potentieller Autor.\nDie Vernetzung hat uns alle verändert:\nVerfügbarkeit von aktuellen Informationen\nGeschwindigkeit der Kommunikation\nUmgang mit dem Computer und digitalen Medien\nGanze Industriezweige wurden aus dem Boden gestampft\nMusik- und Filmindustrie und Verlagswesen muss sich radikal umorientieren\nUmstürze beispielsweise in Tunesien und im Iran, organisiert über Facebook und Twitter.\nDaran wird deutlich, wie weitreichend vernetzte Medien unser Leben beeinflussen.\n\n
- Deswegen habe ich mich dafür entschieden, im 2. Teil meiner Vorlesung auf diese Vernetzung einzugehen.\n
- Was heißt Vernetzung für das Design?\nWas macht einen guten Designer aus, der vernetzte Systeme gestaltet?\nWas muss ein Designer im Jahr 2011 können? Websites, Applikationen, Interfaces\neinige Beispiele\n
- boingboing.net, Beispiel für moderne Website, genauer: Weblog, Blog\nstatische Struktur, ständig neue Inhalte\nHerausforderung, für Gestalter oft ungewohnt:\nWeb Design, ohne die endgültigen Inhalte zu kennen\nDesigner muss Struktur, Funktionen, Interaktion und visuelles Erscheinungsbild gestalten\nZusammenarbeit mit den Autoren\nTrennung von Design und Inhalt\n
- boingboing.net, Beispiel für moderne Website, genauer: Weblog, Blog\nstatische Struktur, ständig neue Inhalte\nHerausforderung, für Gestalter oft ungewohnt:\nWeb Design, ohne die endgültigen Inhalte zu kennen\nDesigner muss Struktur, Funktionen, Interaktion und visuelles Erscheinungsbild gestalten\nZusammenarbeit mit den Autoren\nTrennung von Design und Inhalt\n
- boingboing.net, Beispiel für moderne Website, genauer: Weblog, Blog\nstatische Struktur, ständig neue Inhalte\nHerausforderung, für Gestalter oft ungewohnt:\nWeb Design, ohne die endgültigen Inhalte zu kennen\nDesigner muss Struktur, Funktionen, Interaktion und visuelles Erscheinungsbild gestalten\nZusammenarbeit mit den Autoren\nTrennung von Design und Inhalt\n
- boingboing.net, Beispiel für moderne Website, genauer: Weblog, Blog\nstatische Struktur, ständig neue Inhalte\nHerausforderung, für Gestalter oft ungewohnt:\nWeb Design, ohne die endgültigen Inhalte zu kennen\nDesigner muss Struktur, Funktionen, Interaktion und visuelles Erscheinungsbild gestalten\nZusammenarbeit mit den Autoren\nTrennung von Design und Inhalt\n
- Erster Punkt: Die Vernetzung verlangt nach Flexiblem Design.\nDesign muss fähig sein, veränderbare Inhalte aufzunehmen.\nAuch flexibel anpassen auf verschiedene technische Voraussetzungen, z.B. Displaygrößen\n
- Im Web ist nicht vorherzusehen, mit welchem Gerät der Nutzer das Angebot konsumiert\nviele Displaygrößen sind möglich, von riesig bis winzig\ndie relative neuen Tablet PCs und Smartphones haben das Spektrum nach unten erweitert\nUm darauf z.B. im Web flexibel einzugehen ändern moderne Websites oft ihr Layout: Responsive Webdesign\nTrend im Web Design\n
- Designer entwirft ein flexibles Layout\neigentlich: mehrere Layoutvarianten\n
- Heutzutage sollte sich ein Interaktionsdesigner auch Gedanken machen, wie vernetzt angebotene Inhalte konsumiert werden. Ich möchte das am Beispiel eines Artikels aus der Zeit Website zeigen:\nNormalfall: Der Artikel auf der Zeit online aufgerufen: Relativ viel Kontrolle, alle Möglichkeiten des Webdesigns.\nEs kann aber auch gut sein, dass der Nutzer den Artikel ganz anders liest…\n
- Moderne Webbrowsern bieten die Möglichkeit, einen Artikel aus der Website herauszuholen, um ihn in Ruhe auf einer einzigen Seite und ohne störende Werbung zu lesen.\nAußer der Überschrift und dem Bild bleibt vom Webdesign nichts mehr übrig.\n
- Den ersten Kontakt hat der Nutzer heutzutage vielleicht gar nicht über die Website.\nVielleicht hat er z.B. den RSS-Feed abonniert.\nIn einem Feed-Reader, hier der Google Reader, sieht der Erste Kontakt z.B. dann so aus.\nÜberschrift, die ersten Zeilen und das erste Bild des Artikels sind hier sehr wichtig.\nDas sollte ein Webdesigner bedenken.\n
- Vielleicht liest der Nutzer das erste Mal über den Artikel auf Facebook.\n
- oder auf Twitter.\nPraktisch keine Gestaltung mehr möglich, bis auf die ersten Zeichen der Webadresse.\nZumindest die wichtigsten dieser Kommunikationskanäle sollte ein Interaktionsdesigner kennen.\nSie spielen eine immer wichtigere Rolle.\n
- Zu guterletzt: Design muss sich auch flexibel anpassen an die Bedürfnisse der Nutzer.\nUm das gestalten zu können, muss der Interaktionsdesigner seine Nutzer kennen.\nIn vernetzten System, wie überall, wo viele Menschen zusammenkommen und kommunizieren, entwickeln sich ganz automatisch Regeln und Übereinkünfte, die das Zusammenleben steuern, eine Netzkultur.\nIm Internet hat sich das so weit entwickelt, dass man von einer echten Kultur sprechen kann.\nDarüber sollte ein Interaktionsdesigner bescheid wissen:\n
- Wie jede Kultur basiert auch die Kultur in der Vernetzung auf Übereinkünfte, Sprache, Symbole, technische und soziale Regeln\n
- Begriffe, die man nicht mehr zu erklären braucht\nMan kann davon ausgehen, dass der Nutzer weiß, wie eine Suche funktioniert\nGelernt, nicht in Büchern, nicht in der Schule, nur durch Erfahrung\n
- Abspielfunktion mit Vorwärts- und Rückwärtssprung\n
- \n
- Fenster schliessen\nBei den nächsten 5 Beispielen möchte ich Sie einladen, mitzuraten. Der Schwierigkeitsgrad steigt.\n
- Fenster schliessen\nBei den nächsten 5 Beispielen möchte ich Sie einladen, mitzuraten. Der Schwierigkeitsgrad steigt.\n
- Fenster schliessen\nBei den nächsten 5 Beispielen möchte ich Sie einladen, mitzuraten. Der Schwierigkeitsgrad steigt.\n
- Fenster schliessen\nBei den nächsten 5 Beispielen möchte ich Sie einladen, mitzuraten. Der Schwierigkeitsgrad steigt.\n
- Fenster schliessen\nBei den nächsten 5 Beispielen möchte ich Sie einladen, mitzuraten. Der Schwierigkeitsgrad steigt.\n
- Übereinkünfte in Sprache und Symbolik sind ständigem Wandel unterworfen.\nNetzkultur ist wie jede Kultur etwas lebendig und sehr menschlich.\nMan kann unterscheiden zwischen Mainstream & Subkulturen.\n
- Auch in der Technik gibt es ungeschriebene Übereinkünfte:\nSchnelle Verbindung z.B. per DSL kann man voraussetzen. Wenn im Netz Videos angeboten werden, schreibt niemand mehr die Datenmengen dazu, weil die meisten Nutzer einen Flatratevertrag haben.\nIm Webdesign setzt man inzwischen eine Displayauflösung von 1024 x 768 Pixeln voraus.\n
- Auch auf der sozialen Ebene haben sich Regeln etabliert:\nKaum jemand mehr scheut, mitzumachen: Kommentare, Fragen in einem Forum, Profil bei Facebook, Verkaufen bei eBay.\nSoziale Interaktion über vernetzte Systeme: inzwischen üblich.\nAuch das persönliche Daten schützenswert sind, hat sich inzwischen bei allen herumgesprochen. Niemand wird ernsthaft unbekannte im Netz nach Adressen, Passwörter fragen.\n
- Schöne Website mit wertvollen Ratschlägen.\nInteressant ist, dass sich solche Regeln entwickeln, ohne dass man sie wirklich diskutieren müsste. Entstehen stillschweigend nebenbei.\n
- Ebenfalls prägend für die Kultur im Netz …\n\n
- … die oft negativen Auswirkungen der Vernetzung:\nViel zu viele interessante Angebote.\nSchwierig, die passenden Angebote auszuwählen.\nNiemand wartet heute auf noch ein Angebot.\nInteraktionsdesigner muss sich dessen bewusst sein.\n
- Das bringt uns zu Punkt 3:\nHeute kommen wir nicht mehr umhin, unsere Designs für schnellen Zugriff zu optimieren.\nGut demonstrieren lässt sich das am Vorgang des Lesens:\n
- Der Fokuspunkt der Augen bewegt sich beim normalen Lesen eines Textes ungefähr so.\nVergleichen wir das mit der Augenbewegung bei einer Website:\n
- Augen springen auf der Seite umher. Beispiel: Wikipedia-Artikel.\nNutzer sucht gewünschte Information oder die vielversprechendste Weiterleitung.\nDabei kann das Design dem Nutzer helfen, indem es die Seite klar strukturiert und wichtige Fragen beantwortet:\nWas gehört zusammen, was nicht?\nWorum geht es in den einzelnen Bereichen? Zusammenfassungen, Überschriften.\nWas ist wichtig, was unwichtiger?\nWohin kann ich von hier aus gelangen?\n\n\n\n
- Gestaltung für Geschwindigkeit heißt auch:\nNutzen muss sofort klar werden.\nSonst ist der Nutzer vielleicht gleich wieder weg.\nDas wichtigste muss zuerst ins Auge fallen.\n
- Gute Beispiele für Gestaltung für Geschwindigkeit findet man in Mobilen Applikationen.\nHier sind die Nutzer oft noch weniger bereit, komplizierte Funktionen zu lernen.\nHandbücher und digitale Hilfesysteme sind nicht mehr gefragt.\nStattdessen integrierte Hilfen, genau dann und dort, wo sie gebraucht wird.\n2 Beispiele: With und Pulse App. Beim ersten Start des Programms:\nWith App fasst Nutzen zusammen und führt mich den Weg, den ich höchstwahrscheinlich gehen werde.\nPulse App erklärt mir kurz die wichtigsten Knöpfe und Gesten.\n
- Gestaltung für Geschwindigkeit heisst also:\nDesign muss die Situation des Nutzers beachten:\nwenig Zeit, kaum bereit, erst neues zu lernen.\nEinstieg in ein System muss möglichst niederschwellig sein: Gerade beim Einstieg besteht Gefahr, dass der Nutzer aufgibt und sich nach anderen Angeboten umsieht. Ein Effekt, den man übrigens gut in Ausstellungen von Designhochschulen beobachten kann.\nGestaltung sollte möglichst etablierte Standards einsetzen: Das Rad nicht neu erfinden.\nDesigner sollte Wünsche und Fragen der Nutzer vorhersehen: Sie oder er sollte sich in die Zielgruppe in der speziellen Situation hineinversetzen.\n
- Noch etwas spielt im Umgang mit dem Nutzer eine immer größere Rolle: \n
- \n
- Ein Beispiel: Ich folge einem Link, den mir ein Freund geschickt hat. Der Freund möchte mir ein Foto zeigen.\nDer Link führt mich direkt auf eine Detailseite der Fotoplattform Flickr.\nDer Grund, warum ich gekommen bin, springt mir als erstes ins Auge, das Foto.\nFlickr möchte mich aber zum Bleiben motivieren, deswegen bietet es mir eine auf mich zugeschnittene Auswahl anderer Inhalte an.\nUnd ich werde höflich nach einem Kommentar gefragt.\nMir wird also mehr oder weniger gleichzeitig der Nutzen der Website, Inhalte und Funktionen vermittelt. Das auch noch sehr schnell, auf das wesentliche beschränkt und gut strukturiert.\n
- Ein Beispiel: Ich folge einem Link, den mir ein Freund geschickt hat. Der Freund möchte mir ein Foto zeigen.\nDer Link führt mich direkt auf eine Detailseite der Fotoplattform Flickr.\nDer Grund, warum ich gekommen bin, springt mir als erstes ins Auge, das Foto.\nFlickr möchte mich aber zum Bleiben motivieren, deswegen bietet es mir eine auf mich zugeschnittene Auswahl anderer Inhalte an.\nUnd ich werde höflich nach einem Kommentar gefragt.\nMir wird also mehr oder weniger gleichzeitig der Nutzen der Website, Inhalte und Funktionen vermittelt. Das auch noch sehr schnell, auf das wesentliche beschränkt und gut strukturiert.\n
- Ein Beispiel: Ich folge einem Link, den mir ein Freund geschickt hat. Der Freund möchte mir ein Foto zeigen.\nDer Link führt mich direkt auf eine Detailseite der Fotoplattform Flickr.\nDer Grund, warum ich gekommen bin, springt mir als erstes ins Auge, das Foto.\nFlickr möchte mich aber zum Bleiben motivieren, deswegen bietet es mir eine auf mich zugeschnittene Auswahl anderer Inhalte an.\nUnd ich werde höflich nach einem Kommentar gefragt.\nMir wird also mehr oder weniger gleichzeitig der Nutzen der Website, Inhalte und Funktionen vermittelt. Das auch noch sehr schnell, auf das wesentliche beschränkt und gut strukturiert.\n
- Ein Beispiel: Ich folge einem Link, den mir ein Freund geschickt hat. Der Freund möchte mir ein Foto zeigen.\nDer Link führt mich direkt auf eine Detailseite der Fotoplattform Flickr.\nDer Grund, warum ich gekommen bin, springt mir als erstes ins Auge, das Foto.\nFlickr möchte mich aber zum Bleiben motivieren, deswegen bietet es mir eine auf mich zugeschnittene Auswahl anderer Inhalte an.\nUnd ich werde höflich nach einem Kommentar gefragt.\nMir wird also mehr oder weniger gleichzeitig der Nutzen der Website, Inhalte und Funktionen vermittelt. Das auch noch sehr schnell, auf das wesentliche beschränkt und gut strukturiert.\n
- Zum Thema Nutzermotivation macht gerade ein Zauberwort die Runde: Gamification.\nMeint das Integrieren von Mechaniken, die man aus der Welt der Spiele kennt, um Nutzer zu motivieren.\nDas ortsbezogene Netzwerk Foursquare tut das z.B.\nMit der mobilen Foursquare App kann man sich an verschiedenen Orten einchecken, also seinen Aufenthalt registrieren.\nMeine Freunde sehen dann, in welchen Geschäften, Lokalen oder Orte ich mich befinde.\nUm mich zu motivieren, stellt die Foursquare App eine Rangliste von mir und meinen Freunden dar. Damit trete ich automatisch in einen Konkurrenzkampf. Motivierend.\nAußerdem verteilt Foursquare Orden, sogenannte Badges für bestimmte Aufgaben, die ich erfüllt habe. z.B. bekomme ich den Local-Badge, wenn ich mich innerhalb einer Woche dreimal am gleichen Ort eingecheckt habe.\nIch werde belohnt und meine Sammelwut wird wachgekitzelt.\n
- Zuguterletzt ist ein Nutzer immer auch nur ein Mensch.\nMenschen motiviert es, wenn sie auch mal überrascht werden. Oder wenn man mit einem Augenzwinkern mit ihnen kommuniziert.\nBestes Beispiel ist die Seite, die das soziale Netzwerk Twitter einblendet, wenn ihre Server überlastet sind. Zu dieser eher ärgerlichen Gelegenheit sieht man auf der Seite diese Illustration eines Wales. Das ist zugegebenermassen eher merkwürdig, aber eben auch überraschend und irgendwie sympathisch. Dieser Wal kam sehr gut bei den Nutzern an. Das ging tatsächlich soweit, dass man sich freute, wenn man ihn sah. Er wurde Fail Whale getauft und ist inzwischen Teil der Netzkultur geworden. Solche netten Details sin sicher ein Grund, warum Twitter bei vielen Nutzern große Sympathie genießt. Sympathie ist ein wichtiger Faktor, Nutzer zu motivieren.\n
- Das waren vier wichtige Fähigkeiten, die ein Designer von vernetzten Systemen heute braucht.\nIch sprach dabei natürlich nur aus meiner Sicht der Dinge.\nZudem muss ich erwähnen: die Vernetzung ständig im Wandel.\nEs kann für Interaktionsdesigner anstrengend sein, den Neuerungen zu folgen und auf dem neuesten Stand zu bleiben.\nDas macht aber das IA-Design sehr interessant und spannend.\nGestaltung von Interaktion bewegt sich eigentlich ständig auf Neuland. Ich hoffe, Sie können mir beipflichte, wenn ich sage: Das macht die Sache sehr aufregend.\n\n
- \n