IFD:Designing For Action: Difference between revisions

From Medien Wiki
(mozilla logo)
 
(113 intermediate revisions by 18 users not shown)
Line 1: Line 1:
=Design for Action=
==Beschreibung/ Description==
[[File:mozilla-crowdsourcing-logo.png|400px]]
 
'''Deutsch:'''Im [http://de.wikipedia.org/wiki/Interaktionsdesign Interaktionsdesign] fusionieren Design, Psychologie und Technologie zum "next big thing": Eine Disziplin, deren Ziel es ist, die eine Welt voller Komplexität verständlicher und menschlicher zu machen.
 
Wie? Indem wir verstehen lernen wie Menschen denken, fühlen und handeln. Das gibt es natürlich nicht als Patentrezept. Selber forschen gehört dazu. Nicht als trockene Wissenschaft, sondern durch Beobachten und Experimentieren: Nutzer werden interviewt, "Softwaremodelle" erstellt und ausprobiert.
 
Partner für das Werkmodul (und das dazugehörige Projekt) ist [http://www.mozilla.com Mozilla], die Stiftung die den Firefox-Browser erstellt - mit Hilfe von freiwilligen Helfern aus der ganzen Welt. Unsere Übungen werden sich mit neuen Interaktions- und Nutzungsmöglichkeiten für das Web beschäftigen.
 
Der Kurs wird zusammen mit dem [[IFD:Bibliothek_der_Zukunft|Projektmodul Interfacedesign]] empfohlen, die Übungen und Ergebnisse im Rahmen des Werkmoduls können in den Projektablauf integriert werden.
 
''Anmeldung:''
Mail an jan PUNKT dittrich ÄT uni-weimar.de mit kurzem(!) Motivationsschreiben.
 
'''English:''' The aim of interaction design is to make products that meet the needs of the user and are easy to operate - this is what you will learn in this course.
To be able to "Design for Action" you will learn how people think, feel and act.  Your own research will be needed for that as well. Not like in a lab and with a team of scientists: We will just observe and try out ideas.
Our partner is Mozilla, a foundation creating Firefox and promoting the open web - supported by thousands of volunteers from all over the world. The knowledge you gain can help you to design new ways of interacting with web content.
 
It is recommended to do this course in combination with the Interface Design Project module "Bibliothek der Zukunft". Our exercises and research can and should be used for contributing to your practical work and specific topics for the Mozilla-Project will be covered in the course.
 
''Application:''
Mail to jan DOT dittrich ÄT uni-weimar.de including a short (!) letter of motivation.


[[File:mozilla-crowdsourcing-logo.png|400px]]
==Concepts and designs==
{{anchor|concepts}}
[[/Project Presenation Template/]]


Im [http://de.wikipedia.org/wiki/Interaktionsdesign Interaktionsdesign] fusionieren Design, Psychologie und Technologie zum "next big thing": Eine Disziplin, deren Ziel es ist, die eine Welt voller Komplexität verständlicher und menschlicher zu machen.
Link your concepts here!


Der digitale Studentenalltag ist voll von Gegenbeispielen: 3 verschiedene Passwörter für Bibliothek, Computer und Mail? Sieben Klicks bis zur Windows Studentenversion? Der Kurs geht über das einfache Webdesign und Desktopanwendungen hinaus: Mobilgeräte wie das iPhone und Multitouchumgebungen wie Surface werden behandelt, damit ihr auch jenseits von Bildschirm, Tastatur und Maus gestalten könnt .
*[[/Carlo, Johannes, Sven/]]
*Jan Schepanski: [[/Webtop/]]
*Jan Schepanski, Reinhard VdW: [[/BookmarkBookmarklet/]]
*[[/Sophie, Jule, Tristan, Laura, Alex/]]
*[[/Vera, Mischa, Max/]]
*[[/Bastian, Martin/]]


Wie? Indem ihr verstehen lernt wie Menschen denken, fühlen und handeln. Das gibt es natürlich nicht als Patentrezept. Selber forschen gehört dazu. Nicht als trockene Wissenschaft, sondern durch Beobachten und Experimentieren.
==Kursinhalte/Topics covered==
{{anchor|schedule}}


Partner für das Werkmodul (und das dazugehörige Projekt) ist [http://www.mozilla.com Mozilla], die Stiftung die den Firefox-Browser erstellt - mit Hilfe von freiwilligen Helfern aus der ganzen Welt. Unsere Übungen werden sich u.A. mit neuen Funktionen für Firefox beschäftigen und in Zukunft vielleicht 200Mio Nutzern das Leben erleichtern...
Werkmodul immer Mittwochs, 9:15-12:30, ab dem 20.10.2010. [[Marienstraße 7b]] - Seminarraum 103. ([https://www.uni-weimar.de/qisserver/rds?state=verpublish&status=init&vmfile=no&publishid=11122&moduleCall=webInfo&publishConfFile=webInfo&publishSubDir=veranstaltung Im Vorlesungsverzeichnis])


(Jeder Punkt eine Vorlesung)
* Übersicht Interaktionsdesign und Vorstellung der zu bearbeitenden Aufgaben '' ____20.10''
* Designprozess: "Iteratives" Designen /Design Process: Iterative Design '' ____27.10''
* Nutzerforschung und Interviews / User Research and Interviews '' ____03.11''
* Ziele formulieren / Set your goals'' ____10.11''
* Psychologie 1: Metaphern,Standards und Konsistenz / Metaphors, Standards, Consistency '' ____17.11''
* Psychologie 2: Sichbarkeit,Feedback und Modes / Visibility, Feedback and Modes '' ____24.11''
* Ideen testen / Testing '' ____01.12''
* Prototypen / Prototyping'' ____08.12''


Der Kurs wird zusammen mit dem [[IFD:Bibliothek_der_Zukunft|Projektmodul Interfacedesign]] empfohlen, die Übungen und Ergebnisse im Rahmen des Werkmoduls können in den Projektablauf integriert werden.
* Open Design, Übersicht Design-Initiativen@Mozilla


Kursinhalte:
*Was ist Interaktionsdesign?
*Vor dem Start: Analyse und Bedürfnisse
*Überprüfen von Ideen: Skizzen und Prototypen um Ideen zu kommunizieren und zu testen
*Verstehen, wie Menschen Denken: Psychologische Grundlagen
*Do's and Dont's: Lösungesvorschläge und Standards


Das Werkmodul besteht aus Vorträgen und Übungen.
Das Werkmodul besteht aus Vorträgen und Übungen.
This Werkmodul consists of talks and exercices.
==Leistungsnachweis==
t.b.a.
ALT: Vorraussichtlich: 20% Vorlesungsmitschrift/Eigenes "Buch" als Gedächtnisstütze, 20% Teilnahme und Mitarbeit, 60% praktische Aufgaben und Aufgabendokumentaion
NEU:
Vorraussichtlich: 20% Teilnahme und Mitarbeit, 80% praktische Aufgaben und Aufgabendokumentaion (mit Bezug auf die Methodik) im Wiki.
==Ressourcen==
===Wiki===
* [[IFD:Course Interaction Design]]
===Literatur / Readings===
'''In der Limona steht der Semesterapperat mit den Büchern'''
*Interaction design: beyond human-computer interaction ISBN 0-471-49278-7
**Standardlehrbuch und guter Einstieg, deckt als eines der wenigen Bücher praktisch alle Fachgebiete ab. Verständlich geschrieben, manchmal aber etwas akademisch.
*The Design of Everyday Things ISBN 978-0465067107
**Der Klassiker von Don Norman: Wie müssen alltägliche Dinge gestaltet sein? Bietet keine "fertigen" Lösungen, aber gute Denkanstöße.
* The Humane Interface ISBN 978-0201379372
**Jeff Raskins Buch zeigt Prinzipen, wie man Software so gestaltet, das sie praktisch "unbewusst" in Bezug auf das Interface zu bedienen ist.
*Effective Prototyping for Software Makers ISBN 978-0120885688
**Überblick über die Arbeit mit Prototypen und deren Gestaltung.
*About Face 3 ISBN 978-0470084113
**Die Ansätze in der Nutzerforschung gehen einen alternativen Weg, die  Lösungen in den "Design-Patterns" (Teil 2 und 3) sind sehr gut und interessant.
===Links===
[[wikipedia:de:Interaction Design|Wikipedia: Interaktionsdesign]] - Definition für Interaktionsdesign
[http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html Apple Human Interface Guidelines] - Das erste Kapitel ("Part I: Application Design Fundamentals") hat ähnliche Inhalte wie der Kurs.
[http://mozillalabs.com Mozilla Labs] - hier werden neue Interfaceideen und Funktionen erdacht und Getestet - gemeinsam mit der Community
[http://design-challenge.mozillalabs.com/ Design Challenges] sind Wettbewerbe für Interaktionsdesigner zu von Mozilla gestellten Aufgaben
[http://creative.mozilla.org/ Mozilla Creative Collective] ist eine Plattform für (Grafik-) Designer um z.B. Skins für Mozilla-Applikationen zu posten.
[http://www.useit.com/papers/heuristic/heuristic_list.html Heuristiken für Interface-Design]
==Zielgruppe==
Studenten der Mediengestaltung; der Kurs ist offen für Studenten anderer Fachrichtungen.
Die Bücher in der Literaturliste sind in der Bibliothek verfügbar. Wer wissen möchte, ob die Kursinhalte für ihn/sie interessant sind, sollte das erste Kapitel von "The Design Of Everyday Things" lesen und/oder sich ein paar Einträge auf [http://mozillalabs.com Mozilla Labs] anschauen.
By the way: Obwohl in dem Semesterapparat auch JavaScript Bücher stehen, ist keine Programmiererfahrung nötig!
==Aufgaben 1==
{{anchor|homework}}
Hier wie versprochen die Aufgaben. Ich habe formuliert was man machen soll (Ziele) und was man lässt (nicht-ziele)
Zudem gibt es für jede Sektion noch Materialien.
Ich erwarte das jeder der die Aufgabe 1 bearbeitet, das Paper "Information Archiving with Bookmarks" liest und versteht. (Außer etwaige Formeln) Das Dokument ist im Anhang.
Für die Aufgabe 2 sind alle Links Pflicht.
Zur Auswahl der Aufgaben:
Ich halte "Suchen und Finden" für einen geeignetere Aufgabe: Es sind mehr Materialien vorhanden und es gibt potenziell mehr auf dem Weg zu lernen. Nur wer er sich gar nicht damit anfreunden kann, und zudem meint, der finde wohl einen besseren Weg als Microsofts "Accelerators", möge bitte die Aufgabe 2 wählen und mir das schreiben.
Das Problem in Aufgabe 1 erscheint möglicherweise langweilig aber:
Wir werden die besehenden Bookmarks ja nicht ein bisschen aufhübschen, sondern uns grundlegend Gedanken darüber machen:
Wie man das, was das System heute macht auch auf einem besseren Wege erreichen kann
Und: Das momentane Bookmarksystem hat seine Probleme und das wiederfinden von Informationen ist ein Ziel das selbst Gelegenheitsnutzer haben. Nur bookmarken die zumindest aus meiner Erfahrung nach selten. Und manche viel-nutzer ebenso.
Noch etwas zum Arbeitsprozess: Eine Idee müsst ihr noch nicht haben - wir werden erstmal in der Nutzerforschung schauen, woran wir genau arbeiten werden!
Schreibt mir bitte eine Mail, wenn eine Aufgabe als Gruppe gewählt habt, sodass ich mich etwas um die Balance kümmern kann, sodass beide Aufgaben vertreten sind.
===a) Suchen und Finden===
'''Ziele'''
* Das Wiederfinden von Seiten erleichtern, die man informativ/gut fand
* Den "Merkprozess" vereinfachen.
* Verwaltungsaufwand reduzieren.
'''Nicht-Ziele:'''
* Chronikfunktion überarbeiten – zur Chronik gibt es bereits etliche interessante Designs.
'''Szenario:''' Karl hat vor einem Jahr ein tolles Rezept für eine Champagnersuppe gefunden und nachgekocht. Heute kommt Anna zu Besuch und er möchte ein romantisches Dinner für zwei kochen - die Champagnersuppe. Er möchte das Rezept im Netz wiederfinden.
 
'''Materialien:'''
* [http://www.google.com/search?client=ubuntu&channel=fs&q=Dynamic+Queries+for+Visual+Information+Seeking&ie=utf-8&oe=utf-8#hl=en&expIds=17259,17291,17315,22881,23628,23670,23945,25532,25646,25834,25907,26328,26637,26761,26849,26992,27045,27126&sugexp=ldymls&xhr=t&q=Dynamic+Queries+for+Visual+Information+Seeking+type%3Apdf&cp=55&pf=p&sclient=psy&aq=f&aqi=&aql=&oq=Dynamic+Queries+for+Visual+Information+Seeking+type:pdf&gs_rfai=&pbx=1&fp=dbb5a847909cbca1 DynamicQueries-ShneidermanJain-1994]
* [http://www.google.com/search?client=ubuntu&channel=fs&q=finding+and+reminding+reconsidered&ie=utf-8&oe=utf-8#hl=en&expIds=17259,17291,17315,22881,23628,23670,23945,25532,25646,25834,25907,26328,26637,26761,26849,26992,27045,27126&sugexp=ldymls&xhr=t&q=finding+and+reminding+reconsidered+type:pdf&cp=40&pf=p&sclient=psy&aq=f&aqi=&aql=&oq=finding+and+reminding+reconsidered+type:pdf&gs_rfai=&pbx=1&fp=dbb5a847909cbca1 Information Archiving with Bookmarks: Personal Web Space Construction and Organization]
* [http://www.google.com/search?client=ubuntu&channel=fs&q=finding+and+reminding+reconsidered&ie=utf-8&oe=utf-8#hl=en&expIds=17259,17291,17315,22881,23628,23670,23945,25532,25646,25834,25907,26328,26637,26761,26849,26992,27045,27126&sugexp=ldymls&xhr=t&q=finding+and+reminding+reconsidered+type:pdf&cp=40&pf=p&sclient=psy&aq=f&aqi=&aql=&oq=finding+and+reminding+reconsidered+type:pdf&gs_rfai=&pbx=1&fp=dbb5a847909cbca1 findingAndRemindingReconsidered-FertigFreemanGelernter-1996]
===b) Aktionen===
Oft benutzen wir Dienste im Internet, die Eingaben verlagen (Siehe Szenarios). Wie kann man die Nutzung erleichtern, sdass man sich dauerhaftes Kopieren und einfügen spart?
Dabei kann man sich auch nur einen Bereich konzentrieren: z.B. Texte schreiben, Websuchen etc.
Ziele:
*Zeit sparen (z.B. durch weniger Copy and Paste und Seitenwechsel)
*Auch für Gelegenheitsnutzer bedienbar
Nicht-Ziele:
* Ubiquity nachbauen.
* Funktion als Expertentool
Materialien:
* [http://www.youtube.com/watch?v=knNS-5em7xU Ubiquity video]
* [http://www.youtube.com/watch?v=kPfU2mrE7oM&feature=player_embedded Links sharen/mailen]
*[http://www.microsoft.com/windows/internet-explorer/features/faster.aspx Die Accelerator funktion von MS]
Dienste wie: http://www.netspeak.cc/, delicious (taggen), twitter (tweeten), suchanfragen, Wikipediaartikel...
Szenario:
- Ich lese einen Artikel in einem wissenschaftlichen Magazin. Ein Begriff ist mir lediglich vage bekannt, sodass ich ihn in der Wikipedia nachschlagen möchte. Dazu muss ich die Wikipedia Seite aufrufen, indem ich die Adresse in die Adresszeile eingebe, den Begriff kopiere, ihn in das suchfeld auf der Wikipediaseite einfüge und bestätige.
==Aufgaben 2==
Ihr sollt klare Ziele für euer Projekt formulieren. Zur Erinnerung: Ziele sind ein zu erreichender Endzustand nicht der Weg dorthin. Nicht nötig ist also die Technik Hintergründe und Interfaces aufzuschreiben.
schreibt z.B.
* Ich möchte das organisieren von Bookmarks vereinfachen
* Ich möchte es erleichtern, eine bestimmte Seite anhand von dem NUtzer erinnerten Attribute - in der History wiederzufinden.
* Ich möchte Dienste mithilfe eines visuellen Interfaces verbinden und Aktionen ermöglichen und speichern.
Versucht dass, was ihr euch vorstellt, in ein bis zwei Sätze zu fassen, sodass klar wird was ihr für den Nutzer erreichen wollt. Dieses Ziel wird euch durch die Planung euerer Nutzerforschung leiten.
Bitte beachtet, dass es von meiner Seite auch Vorgaben gibt. Siehe dazu die Szenarien und dargestellte Probleme in 1.
=== Eure Ziele für das Begleit-Projekt===
* Beispiel Jan: Ich möchte es dem Nutzer ermöglichen ohne Seitenwechsel und Copy/Paste Daten an oft genutzte Dienste weiterzugeben. (Beispiel von Jan)
* Noch ein Beispiel von Jan: Der Nutzer soll Seiten anhand von impliziten Eigenschaften (e.g) Farbe wiederfinden können.
* Ich möchte es dem User ermöglichen durch unterstützende Automatismen ''(Auslesen von Meta-Descriptions, farbliche [[Visualisierung]] der Aufruf-Häufigkeit, dadurch Vorsortierungen, ...)'' seine Bookmarks schneller und sinnvoller in geordnete Strukturen zu bringen. (von Alex)
* Wir möchten dem User ermöglichen, Bookmarks via Drag&Drop zu speichern und anschließend anhand verschiedenen Kategorien (Date, Tags, Rate, Relevance, Title, Url, Color, ...) zu sortieren/wiederzufinden. -- [[User:Sven|Sven]] - Carlo - Johannes
* Ich möchte dem User eine visuelle Darstellung seiner Bookmarks bieten, die es ihm erleichtert diese zu ordnen und zu finden und das Verwalten der Bookmarks angenehmer und attraktiver gestalten soll. - Tristan
* Ich bin in einer Gruppe mit Tristan, Julia und Laura, wir alle wollen Bookmarks ansprechender visualisieren. Jeder entwirft sein eigenes Design, aber wir arbeiten bei der Grundbearbeitung zusammen. - Sophie
* Ich gehöre auch zur Gruppe und möchte einen eigenen Entwurf zur Idee entwickeln. - Julia
*In der gleichen Gruppe wie Sophie, Jule und Tristan. Gleiche Idee, eigener Entwurf, Gruppenarbeit. (Laura)
* Wir wollen dem Nutzer eine Möglichkeit bieten Links und Zitate, mit Hilfe eines sichtbaren Clipboards, weiter zu benutzen. (Max, Mischa, Vera)
* Lesezeichen besser veranschaulichen, die Listenansicht vermeiden bzw. ansprechender gestalten (ähnlich wie bei TabCandy) und das Wiederfinden durch eigene oder Urheber-Tags erleichtern (Matthias)
* The Browser is dead, long lives the browser! Ziel ist die Symbiose von Bookmarks, History und Tabs unter einer möglichst intuitiv nutzbaren Oberfläche. (Jan Schepanski)
* Webseiten automatisch, mit einem click bookmarken, clustern und in einer cloud thematisch ordnen und darstellen. (Bastian + Marv)
===Ziele-Übung (mit irgendwelchen Ziel/Nichtzielkombinationen)===
...Ein Beispiel für ein Ziel und ein nicht-Ziel.
* Ziel: Einen guten Eindruck bei Freunden, die mich in meiner Wohnung besuchen, hinterlassen. Nicht-Ziel:Staubsaugen und Bad putzen. (von Jan)
* Ziel: Hunger stillen. Nicht-Ziel: Zur Mensa/Einkaufen gehen und Essen aussuchen/kochen (von Alex)
* Ziel: Eine Vorlesung besuchen. Nicht-Ziel: Aus dem Haus gehen und zur Uni gehen/fahren. (von Carlo)
* Ziel: Puenktlich zum Werkmodul zu kommen. Nicht-Ziel: Abends frueh schlafen zu gehen um morgens aus dem Bett zu kommen. (Bastian + Marv)
* Ziel: Erholt sein, damit man in der Uni nicht müde ist. Nicht-Ziel: Zeitig schlafen gehen. (von [[User:Sven|Sven]])
* Ziel: Grünen Strom verkaufen. Nicht-Ziel: dazugehöriges Info-Material erstellen. (von Vera)
* Ziel: Möglichst schnell gesund werden. Nicht-Ziel: Einen Arzt-Termin vereinbaren, mit Fieber zur Praxis fahren, eineinhalb Stunden im Wartezimmer verbringen, total erschöpft die nächste Apotheke aufsuchen, Medikamente zum Teil aus eigener Tasche bezahlen und zu Hause in noch schlechterem Zustand als zuvor ankommen.
* Ziel: Eine Halloweenparty schmeißen. Nicht-Ziel: Einladungskarten verteilen, Deko und Trinken kaufen, Wohnung auf Vordermann bringen, sich gruselig anmalen, auf Gäste warten, Musik anmachen... ( von Sophie + Julia)
* Ziel: Besser als Jimi Hendrix Gitarre spielen zu können. Nicht-Ziel: Gitarre kaufen, neue Saiten aufziehen, Gitarrenlehrer aufsuchen, üben. (von Johannes)
* Ziel: Essen. Nicht-Ziel: Kochen. (von Mischa)
*Ziel: sich und sein Tier gesund und fit halten. Nicht-Ziel: Gassi gehen, gesundes Futter/Essen kaufen (von Laura)
* Ziel: im Moma Fotos ausstellen. Nicht Ziel: Chip lesen, Filme kaufen, in der Dunkelkammer rumprobieren. (Matthias)
* Ziel: Den Bachelor of Arts erhalten. Nicht-Ziel: Fleißig Modulscheine sammeln. (Jan2)
===Zusatzmaterialien zur 2. Sitzung:===
* [http://www.azarask.in/blog/post/tabcandy/ Bookmark/Tab-Desktop von Firefox 4]
* Googles HTML5Rocks-Site ist ein guter Überblick über was kommen wird bzw. teilweise in modernen Browsern schon geht
** [http://slides.html5rocks.com/#slide1 Einführungspräsentation als Slideshow]
** [http://playground.html5rocks.com/ Der Playground zum Ausprobieren]
*** Empfehlungen: JS: Web Storage und Drag from Desktop; HTML: Semantic Markup, Microdata"
* Sollte man zumindest grob wissen was es ist: [http://microformats.org/about microformats]
** Einfaches Beispiel: Die [http://www.uni-weimar.de/mediengang/2009/ Website des Mediengang 2009] kann man sich von von einem [http://h2vx.com/ics/ Webdienst] automatisch in eine Kalender-Datei umwandeln lassen und dann [http://h2vx.com/ics/www.uni-weimar.de/mediengang/2009/ herunterladen] oder abbonieren (webcal://h2vx.com/ics/www.uni-weimar.de/mediengang/2009/)
==Aufgaben 3: Nutzerforschung==
[[/Nutzerforschung|zur Hausaufgabe 3]]
[[Category:Courses]]
[[Category:Design]]
[[Category:Jan Dittrich]]
[[Category:Grundlagen]]
[[Category:Interface-Design]]
[[Category:Interaktion]]
[[Category:Research]]
[[Category:Webdesign]]

Latest revision as of 17:53, 9 June 2011

Beschreibung/ Description

Mozilla-crowdsourcing-logo.png

Deutsch:Im Interaktionsdesign fusionieren Design, Psychologie und Technologie zum "next big thing": Eine Disziplin, deren Ziel es ist, die eine Welt voller Komplexität verständlicher und menschlicher zu machen.

Wie? Indem wir verstehen lernen wie Menschen denken, fühlen und handeln. Das gibt es natürlich nicht als Patentrezept. Selber forschen gehört dazu. Nicht als trockene Wissenschaft, sondern durch Beobachten und Experimentieren: Nutzer werden interviewt, "Softwaremodelle" erstellt und ausprobiert.

Partner für das Werkmodul (und das dazugehörige Projekt) ist Mozilla, die Stiftung die den Firefox-Browser erstellt - mit Hilfe von freiwilligen Helfern aus der ganzen Welt. Unsere Übungen werden sich mit neuen Interaktions- und Nutzungsmöglichkeiten für das Web beschäftigen.

Der Kurs wird zusammen mit dem Projektmodul Interfacedesign empfohlen, die Übungen und Ergebnisse im Rahmen des Werkmoduls können in den Projektablauf integriert werden.

Anmeldung: Mail an jan PUNKT dittrich ÄT uni-weimar.de mit kurzem(!) Motivationsschreiben.

English: The aim of interaction design is to make products that meet the needs of the user and are easy to operate - this is what you will learn in this course. To be able to "Design for Action" you will learn how people think, feel and act. Your own research will be needed for that as well. Not like in a lab and with a team of scientists: We will just observe and try out ideas. Our partner is Mozilla, a foundation creating Firefox and promoting the open web - supported by thousands of volunteers from all over the world. The knowledge you gain can help you to design new ways of interacting with web content.

It is recommended to do this course in combination with the Interface Design Project module "Bibliothek der Zukunft". Our exercises and research can and should be used for contributing to your practical work and specific topics for the Mozilla-Project will be covered in the course.

Application: Mail to jan DOT dittrich ÄT uni-weimar.de including a short (!) letter of motivation.

Concepts and designs


Project Presenation Template

Link your concepts here!

Kursinhalte/Topics covered


Werkmodul immer Mittwochs, 9:15-12:30, ab dem 20.10.2010. Marienstraße 7b - Seminarraum 103. (Im Vorlesungsverzeichnis)

(Jeder Punkt eine Vorlesung)

  • Übersicht Interaktionsdesign und Vorstellung der zu bearbeitenden Aufgaben ____20.10
  • Designprozess: "Iteratives" Designen /Design Process: Iterative Design ____27.10
  • Nutzerforschung und Interviews / User Research and Interviews ____03.11
  • Ziele formulieren / Set your goals ____10.11
  • Psychologie 1: Metaphern,Standards und Konsistenz / Metaphors, Standards, Consistency ____17.11
  • Psychologie 2: Sichbarkeit,Feedback und Modes / Visibility, Feedback and Modes ____24.11
  • Ideen testen / Testing ____01.12
  • Prototypen / Prototyping ____08.12
  • Open Design, Übersicht Design-Initiativen@Mozilla


Das Werkmodul besteht aus Vorträgen und Übungen.

This Werkmodul consists of talks and exercices.

Leistungsnachweis

t.b.a.

ALT: Vorraussichtlich: 20% Vorlesungsmitschrift/Eigenes "Buch" als Gedächtnisstütze, 20% Teilnahme und Mitarbeit, 60% praktische Aufgaben und Aufgabendokumentaion

NEU: Vorraussichtlich: 20% Teilnahme und Mitarbeit, 80% praktische Aufgaben und Aufgabendokumentaion (mit Bezug auf die Methodik) im Wiki.


Ressourcen

Wiki

Literatur / Readings

In der Limona steht der Semesterapperat mit den Büchern

  • Interaction design: beyond human-computer interaction ISBN 0-471-49278-7
    • Standardlehrbuch und guter Einstieg, deckt als eines der wenigen Bücher praktisch alle Fachgebiete ab. Verständlich geschrieben, manchmal aber etwas akademisch.
  • The Design of Everyday Things ISBN 978-0465067107
    • Der Klassiker von Don Norman: Wie müssen alltägliche Dinge gestaltet sein? Bietet keine "fertigen" Lösungen, aber gute Denkanstöße.
  • The Humane Interface ISBN 978-0201379372
    • Jeff Raskins Buch zeigt Prinzipen, wie man Software so gestaltet, das sie praktisch "unbewusst" in Bezug auf das Interface zu bedienen ist.
  • Effective Prototyping for Software Makers ISBN 978-0120885688
    • Überblick über die Arbeit mit Prototypen und deren Gestaltung.
  • About Face 3 ISBN 978-0470084113
    • Die Ansätze in der Nutzerforschung gehen einen alternativen Weg, die Lösungen in den "Design-Patterns" (Teil 2 und 3) sind sehr gut und interessant.

Links

Wikipedia: Interaktionsdesign - Definition für Interaktionsdesign

Apple Human Interface Guidelines - Das erste Kapitel ("Part I: Application Design Fundamentals") hat ähnliche Inhalte wie der Kurs.

Mozilla Labs - hier werden neue Interfaceideen und Funktionen erdacht und Getestet - gemeinsam mit der Community

Design Challenges sind Wettbewerbe für Interaktionsdesigner zu von Mozilla gestellten Aufgaben

Mozilla Creative Collective ist eine Plattform für (Grafik-) Designer um z.B. Skins für Mozilla-Applikationen zu posten.

Heuristiken für Interface-Design

Zielgruppe

Studenten der Mediengestaltung; der Kurs ist offen für Studenten anderer Fachrichtungen.

Die Bücher in der Literaturliste sind in der Bibliothek verfügbar. Wer wissen möchte, ob die Kursinhalte für ihn/sie interessant sind, sollte das erste Kapitel von "The Design Of Everyday Things" lesen und/oder sich ein paar Einträge auf Mozilla Labs anschauen.

By the way: Obwohl in dem Semesterapparat auch JavaScript Bücher stehen, ist keine Programmiererfahrung nötig!

Aufgaben 1


Hier wie versprochen die Aufgaben. Ich habe formuliert was man machen soll (Ziele) und was man lässt (nicht-ziele) Zudem gibt es für jede Sektion noch Materialien. Ich erwarte das jeder der die Aufgabe 1 bearbeitet, das Paper "Information Archiving with Bookmarks" liest und versteht. (Außer etwaige Formeln) Das Dokument ist im Anhang.

Für die Aufgabe 2 sind alle Links Pflicht.

Zur Auswahl der Aufgaben: Ich halte "Suchen und Finden" für einen geeignetere Aufgabe: Es sind mehr Materialien vorhanden und es gibt potenziell mehr auf dem Weg zu lernen. Nur wer er sich gar nicht damit anfreunden kann, und zudem meint, der finde wohl einen besseren Weg als Microsofts "Accelerators", möge bitte die Aufgabe 2 wählen und mir das schreiben. Das Problem in Aufgabe 1 erscheint möglicherweise langweilig aber: Wir werden die besehenden Bookmarks ja nicht ein bisschen aufhübschen, sondern uns grundlegend Gedanken darüber machen: Wie man das, was das System heute macht auch auf einem besseren Wege erreichen kann Und: Das momentane Bookmarksystem hat seine Probleme und das wiederfinden von Informationen ist ein Ziel das selbst Gelegenheitsnutzer haben. Nur bookmarken die zumindest aus meiner Erfahrung nach selten. Und manche viel-nutzer ebenso.

Noch etwas zum Arbeitsprozess: Eine Idee müsst ihr noch nicht haben - wir werden erstmal in der Nutzerforschung schauen, woran wir genau arbeiten werden!

Schreibt mir bitte eine Mail, wenn eine Aufgabe als Gruppe gewählt habt, sodass ich mich etwas um die Balance kümmern kann, sodass beide Aufgaben vertreten sind.


a) Suchen und Finden

Ziele

  • Das Wiederfinden von Seiten erleichtern, die man informativ/gut fand
  • Den "Merkprozess" vereinfachen.
  • Verwaltungsaufwand reduzieren.


Nicht-Ziele:

  • Chronikfunktion überarbeiten – zur Chronik gibt es bereits etliche interessante Designs.

Szenario: Karl hat vor einem Jahr ein tolles Rezept für eine Champagnersuppe gefunden und nachgekocht. Heute kommt Anna zu Besuch und er möchte ein romantisches Dinner für zwei kochen - die Champagnersuppe. Er möchte das Rezept im Netz wiederfinden.


Materialien:


b) Aktionen

Oft benutzen wir Dienste im Internet, die Eingaben verlagen (Siehe Szenarios). Wie kann man die Nutzung erleichtern, sdass man sich dauerhaftes Kopieren und einfügen spart? Dabei kann man sich auch nur einen Bereich konzentrieren: z.B. Texte schreiben, Websuchen etc. Ziele:

  • Zeit sparen (z.B. durch weniger Copy and Paste und Seitenwechsel)
  • Auch für Gelegenheitsnutzer bedienbar

Nicht-Ziele:

  • Ubiquity nachbauen.
  • Funktion als Expertentool

Materialien:

Dienste wie: http://www.netspeak.cc/, delicious (taggen), twitter (tweeten), suchanfragen, Wikipediaartikel...

Szenario: - Ich lese einen Artikel in einem wissenschaftlichen Magazin. Ein Begriff ist mir lediglich vage bekannt, sodass ich ihn in der Wikipedia nachschlagen möchte. Dazu muss ich die Wikipedia Seite aufrufen, indem ich die Adresse in die Adresszeile eingebe, den Begriff kopiere, ihn in das suchfeld auf der Wikipediaseite einfüge und bestätige.

Aufgaben 2

Ihr sollt klare Ziele für euer Projekt formulieren. Zur Erinnerung: Ziele sind ein zu erreichender Endzustand nicht der Weg dorthin. Nicht nötig ist also die Technik Hintergründe und Interfaces aufzuschreiben. schreibt z.B.

  • Ich möchte das organisieren von Bookmarks vereinfachen
  • Ich möchte es erleichtern, eine bestimmte Seite anhand von dem NUtzer erinnerten Attribute - in der History wiederzufinden.
  • Ich möchte Dienste mithilfe eines visuellen Interfaces verbinden und Aktionen ermöglichen und speichern.

Versucht dass, was ihr euch vorstellt, in ein bis zwei Sätze zu fassen, sodass klar wird was ihr für den Nutzer erreichen wollt. Dieses Ziel wird euch durch die Planung euerer Nutzerforschung leiten.

Bitte beachtet, dass es von meiner Seite auch Vorgaben gibt. Siehe dazu die Szenarien und dargestellte Probleme in 1.

Eure Ziele für das Begleit-Projekt

  • Beispiel Jan: Ich möchte es dem Nutzer ermöglichen ohne Seitenwechsel und Copy/Paste Daten an oft genutzte Dienste weiterzugeben. (Beispiel von Jan)
  • Noch ein Beispiel von Jan: Der Nutzer soll Seiten anhand von impliziten Eigenschaften (e.g) Farbe wiederfinden können.
  • Ich möchte es dem User ermöglichen durch unterstützende Automatismen (Auslesen von Meta-Descriptions, farbliche Visualisierung der Aufruf-Häufigkeit, dadurch Vorsortierungen, ...) seine Bookmarks schneller und sinnvoller in geordnete Strukturen zu bringen. (von Alex)
  • Wir möchten dem User ermöglichen, Bookmarks via Drag&Drop zu speichern und anschließend anhand verschiedenen Kategorien (Date, Tags, Rate, Relevance, Title, Url, Color, ...) zu sortieren/wiederzufinden. -- Sven - Carlo - Johannes
  • Ich möchte dem User eine visuelle Darstellung seiner Bookmarks bieten, die es ihm erleichtert diese zu ordnen und zu finden und das Verwalten der Bookmarks angenehmer und attraktiver gestalten soll. - Tristan
  • Ich bin in einer Gruppe mit Tristan, Julia und Laura, wir alle wollen Bookmarks ansprechender visualisieren. Jeder entwirft sein eigenes Design, aber wir arbeiten bei der Grundbearbeitung zusammen. - Sophie
  • Ich gehöre auch zur Gruppe und möchte einen eigenen Entwurf zur Idee entwickeln. - Julia
  • In der gleichen Gruppe wie Sophie, Jule und Tristan. Gleiche Idee, eigener Entwurf, Gruppenarbeit. (Laura)
  • Wir wollen dem Nutzer eine Möglichkeit bieten Links und Zitate, mit Hilfe eines sichtbaren Clipboards, weiter zu benutzen. (Max, Mischa, Vera)
  • Lesezeichen besser veranschaulichen, die Listenansicht vermeiden bzw. ansprechender gestalten (ähnlich wie bei TabCandy) und das Wiederfinden durch eigene oder Urheber-Tags erleichtern (Matthias)
  • The Browser is dead, long lives the browser! Ziel ist die Symbiose von Bookmarks, History und Tabs unter einer möglichst intuitiv nutzbaren Oberfläche. (Jan Schepanski)
  • Webseiten automatisch, mit einem click bookmarken, clustern und in einer cloud thematisch ordnen und darstellen. (Bastian + Marv)

Ziele-Übung (mit irgendwelchen Ziel/Nichtzielkombinationen)

...Ein Beispiel für ein Ziel und ein nicht-Ziel.

  • Ziel: Einen guten Eindruck bei Freunden, die mich in meiner Wohnung besuchen, hinterlassen. Nicht-Ziel:Staubsaugen und Bad putzen. (von Jan)
  • Ziel: Hunger stillen. Nicht-Ziel: Zur Mensa/Einkaufen gehen und Essen aussuchen/kochen (von Alex)
  • Ziel: Eine Vorlesung besuchen. Nicht-Ziel: Aus dem Haus gehen und zur Uni gehen/fahren. (von Carlo)
  • Ziel: Puenktlich zum Werkmodul zu kommen. Nicht-Ziel: Abends frueh schlafen zu gehen um morgens aus dem Bett zu kommen. (Bastian + Marv)
  • Ziel: Erholt sein, damit man in der Uni nicht müde ist. Nicht-Ziel: Zeitig schlafen gehen. (von Sven)
  • Ziel: Grünen Strom verkaufen. Nicht-Ziel: dazugehöriges Info-Material erstellen. (von Vera)
  • Ziel: Möglichst schnell gesund werden. Nicht-Ziel: Einen Arzt-Termin vereinbaren, mit Fieber zur Praxis fahren, eineinhalb Stunden im Wartezimmer verbringen, total erschöpft die nächste Apotheke aufsuchen, Medikamente zum Teil aus eigener Tasche bezahlen und zu Hause in noch schlechterem Zustand als zuvor ankommen.
  • Ziel: Eine Halloweenparty schmeißen. Nicht-Ziel: Einladungskarten verteilen, Deko und Trinken kaufen, Wohnung auf Vordermann bringen, sich gruselig anmalen, auf Gäste warten, Musik anmachen... ( von Sophie + Julia)
  • Ziel: Besser als Jimi Hendrix Gitarre spielen zu können. Nicht-Ziel: Gitarre kaufen, neue Saiten aufziehen, Gitarrenlehrer aufsuchen, üben. (von Johannes)
  • Ziel: Essen. Nicht-Ziel: Kochen. (von Mischa)
  • Ziel: sich und sein Tier gesund und fit halten. Nicht-Ziel: Gassi gehen, gesundes Futter/Essen kaufen (von Laura)
  • Ziel: im Moma Fotos ausstellen. Nicht Ziel: Chip lesen, Filme kaufen, in der Dunkelkammer rumprobieren. (Matthias)
  • Ziel: Den Bachelor of Arts erhalten. Nicht-Ziel: Fleißig Modulscheine sammeln. (Jan2)

Zusatzmaterialien zur 2. Sitzung:


Aufgaben 3: Nutzerforschung

zur Hausaufgabe 3