Archiv für den Monat Juli 2013

Fazit & Ausblick

Ziel unserer Infografik war es, das Thema Responsive Webdesign möglichst prägnant, anschaulich und einfach zu erklären. Wie im Blogpost zur Didaktik bereits angedeutet, spielte hierbei die Berücksichtigung bestimmter Erkenntnisse aus der Lernpsychologie eine wichtige Rolle. Das Ergebnis ist unter diesem Link zu finden:

Interaktive Infografik – Responsive Webdesign
(Navigiert wird durch Scrollen oder per Pfeil-Tasten, interagiert wird mit der Maus)

Bildschirmfoto 2013-07-22 um 15.57.18

Im Rahmen der Lehrveranstaltung war es uns leider nicht mehr möglich, die Interaktive Infografik mit Nutzern zu testen. Hier würden wir bei weiterer Bearbeitung des Themas ansetzen um zu evaluieren, ob die gewünschten Interaktionen durchgeführt werden und ob wir mit der Infografik unser genanntes Ziel erreichen konnten.

Einblicke in die Programmierung

Die Infografik ist nun schon weit fortgeschritten, deshalb möchten wie an dieser Stelle ein paar kleine Einblicke in die Programmierung geben.
Die Wahl HTML5/CSS3/JavaScript als Technologie einzusetzen hat sich als sehr gute Wahl herausgestellt.

CSS Transitions, Transformations und Animations:

Von vornherein war uns klar, dass wir einen großen Wert auf Transitions legen werden. Neben dem statischen Interface machen die Transitions, gerade bei einer interaktive Infografik, einen großen Teil der User-Experience aus. CSS3 bietet dafür eine sehr mächtige, aber auch sehr simple Lösung. Wenn man einem Objekt im Hover-Zustand einen anderen Wert gibt, kann man diesen per Transition animieren. Diese Befehl hat sehr viele Einstellungsmöglichkeiten. Die Vielfältigste ist es, ihnen durch Cubic-Bezier ein individuelles Timing und einen eigenen Ablauf zu geben.

Bildschirmfoto 2013-07-19 um 17.26.16

 

 

 

 

 

 

Diagramme programmieren:

Eine Herausforderung, der wir uns stellen wollten war es, die beiden Diagramme nicht als Grafik einzufügen, sondern sie vom Browser rendern zu lassen. Diese Vorgehensweise hat mehrere Vorteile. Die Ladezeiten der gesamten Infografik wird verkürzt, die Diagramme sind leichter änder- und erweiterbar und dadurch bestehen viel mehr Interaktionsmöglichkeiten (Hover-Funktion über jeden der 250 Punkte). Nach längerer Recherche sind wir auf das jQuery Plugin Flot gestoßen. Es bietet eine API, die alle gewünschten Funktionen ermöglicht. Ein kleiner Nachteil war, dass das Diagramm optisch nicht 1:1, wie im Visual Design vorgesehen, umgesetzt werden konnte. Da es sich aber nur um Kleinigkeiten handelte, sind wir die Kompromisse eingegangen. Außerdem hatten wir so den Vorteil, dass wir für das zweite Diagramm einfach den Code des Diagramms kopieren und andere Daten einfügen konnten. So konnten wir die 250 verschiedenen Auflösungen in einem Array speichern und mussten nicht jeden einzelnen Punkt in Photoshop pixelgenau einfügen.

Bildschirmfoto 2013-07-21 um 11.38.20Bildschirmfoto 2013-07-22 um 14.32.56

 

 

 

 

 

 

 

 

 

 

„Unterschiedliche Layouts“ Grafik

Diesen Teil zu programmieren hat am meisten Spaß gemacht. Der Kasten um die Wireframes hat eine feste Größe. Die Breite der einzelnen Wireframe-Kästen wurde in Prozent angegeben. Anschließend wurde der Slider mit der Pixel-Zahl des Kastens um die Wireframes verknüpft. Dadurch ist das Layout fluid. Jetzt fehlten noch die Breakpoints. Die drei verschiedenen Layouts der Wireframes wurden alle in CSS gelayoutet. Wenn der Slider nun einen bestimmten Wert unterschreitet, wird die aktuelle Klasse an den Wireframes per jQuery entfernt und die Klasse mit dem passenden Layout hinzugefügt. Die Transitions wurden durch Cubic-Bezier-Werte („-webkit-transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.1);“) bei jedem einzelnen Kasten hinzugefügt, und unterschiedlich getimet.
Bildschirmfoto 2013-07-22 um 14.12.44Bildschirmfoto 2013-07-22 um 16.23.19

Getaggt mit , ,

Didaktischer Hintergrund: Relevante Lerntheorien

Da es für unsere Infografik von großer Bedeutung ist, ob der Nutzer das dargebotene Wissen versteht und behalten kann, haben wir uns mit verschiedenen Lerntheorien befasst und diese als Grundlage für unsere Infografik angesehen. Im Folgenden werden, ausgehend von der Geschichte der Lerntheorien, über Gedächtnismodelle, einige wichtige Erkenntnisse der Psychologischen Forschung dargestellt.

Rückblick in die Geschichte der Lerntheorie 

In der ersten Hälfte des 20. Jahrhunderts herrschte in der psychologischen Forschung der Behaviorismus vor. Der Begriff leitet sich von dem englischen Wort behavior (engl. Verhalten) ab, denn die Behavioristen beschränkten sich streng auf Beobachtungen des Verhaltens von Tier und Mensch. Sie sahen das Verhalten und somit auch das Lernen als Reaktionen auf Reize aus der Umwelt an, so Jank (1991, S. 176).

Zur Zeit des Behaviorismus stand die Theorie der Klassischen Konditionierung im Vordergrund der Forschung. Man ging davon aus, dass sich alle komplexen Lernvorgänge durch diese Theorie erklären ließen. Die Konditionierung lässt sich am besten am Experiment mit dem Pawlowʼschen Hund erklären: Wird einem Hund Futter vorgesetzt, so löst dies bei ihm als natürliche Reaktion Speichelfluss aus. Man spricht beim Futter von einem unkonditionierten Reiz, weil er angeboren ist und ohne weitere Bedingungen die spezifische Reaktion hervorruft. Wird zeitgleich mit der Fütterung wiederholt eine Glocke geläutet, so löst nach einer gewissen Zeit auch das Glockenläuten die spezifische Reaktion aus. Da das Läuten der Glocke erst nach dieser Konditionierung die Reaktion bewirkt, spricht man hierbei von einem konditionierten Reiz.

Die Behavioristen nahmen an, dass mehrere dieser Konditionierungsvorgänge zu umfangreichen Ketten verknüpft würden. Jank (1991, S. 176) beurteilt diese Annahme: „Die Behavioristen beschrieben also einen Teilaspekt des Lernens zutreffend, dachten aber fälschlicherweise, dass sie damit schon Lernen insgesamt vollständig beschrieben hätten.“

Da man zunehmend erkannte, dass Menschen nicht ausschließlich auf Reize reagieren, sondern sich aktiv ihrer Welt zuwenden, kam es in der Zeit zwischen 1950 und 1960 zur so genannten Kognitiven Wende: Man beschränkte sich nicht weiter auf die Beobachtung des Verhaltens sondern konzentrierte sich mehr und mehr auf die inneren Vorgänge. So beschäftigte man sich ab 1960 hauptsächlich mit den kognitiven Vorgängen des Wahrnehmens, Verarbeitens, Denkens, Handelns und Lernens des Menschen.

Bei diesen kognitiven Prozessen, vor allem beim Lernen, spielt das Gedächtnis eine übergeordnete Rolle.

Gedächtnismodelle als Grundlage des Lernens

„Das Gedächtnis ist unser wichtigstes Sinnesorgan“ (Roth 1997, S. 261).
Ohne unser Gedächtnis wären wir nicht zum Lernen befähigt. Damit also Lerntheorien erklärt werden können, müssen zunächst die Arbeitsweise und die Eigenschaften des Gedächtnisses verstanden werden.
Neurobiologen gliedern das Gedächtnis in drei Arten: Das sensorische oder Ultrakurzzeitgedächt- nis, das Arbeits- oder Kurzzeitgedächtnis und das Langzeitgedächtnis. Diese drei Gedächtnisarten weisen unterschiedliche Eigenschaften auf:
Die Informationen unserer Sinnesorgane gelangen ins sensorische oder Ultrakurzzeitgedächtnis. Wie der Name schon andeutet, werden diese Wahrnehmungen nur etwa zwei bis fünf Zehntelse- kunden lang aufbewahrt. Diese kurze Zeitspanne genügt, um die sensorischen Reize zu bewerten und weiterzuverarbeiten. Die Reize können nach dem Ultrakurzzeitgedächtnis drei Wege gehen: sie werden entweder vergessen, gelangen ins Arbeits- bzw. Kurzzeitgedächtnis oder sie gelangen unmittelbar ins Langzeitgedächtnis. Damit Informationen vom Ultrakurzzeit- ins Kurzzeitgedächtnis gelangen können, muss eine Aufmerksamkeitszuwendung stattfinden.
Das Arbeits- oder Kurzzeitgedächtnis kann als „Vermittler“ betrachtet werden. Es bildet die Brücke zwischen der Wahrnehmung und der im Langzeitgedächtnis gespeicherten Erfahrungen.
Hier findet das Verstehen statt: Informationen aus der Umwelt (aus dem Ultrakurzzeitgedächtnis) werden im Kontext mit den Informationen aus dem Langzeitgedächtnis verarbeitet. Außerdem fungiert dieser Teil des Gedächtnisses als Speicher, mit einer Speicherdauer im Minutenbereich, so Mangold (2007, S. 190).
Das Langzeitgedächtnis hat eine unbekannte Speicherkapazität, so Jank (1991, S. 182). Mangold (2007, 195) gibt an, dass die Speicherkapazität unbegrenzt und die Speicherdauer lebenslänglich sei. Ein tatsächliches Vergessen, im Sinne von Informationsverlust, findet im Langzeitgedächtnis nicht statt. In der Regel ist ein Verlust des Zugangs Schuld für das Scheitern beim Abruf aus dem Langzeitgedächtnis.
Es stellt sich also die Frage, wie die Information aus dem Kurzzeitgedächtnis in das Langzeitgedächtnis gelangt, wo sie dann lebenslänglich gespeichert wird. Für den Übergang von Information ins Langzeitgedächtnis gibt es verschiedene Möglichkeiten, wobei die Art der Aufnahme ins Langzeitgedächtnis für die Effektivität des Lernens ausschlaggebend ist.
Die schwächste Form bildet das Wiederholen. „Dem Prinzip der Wiederholung folgt beim Routinelernen die Strategie, sinnfreie Inhalte so lange durchzugehen, bis sie fest im Langzeitgedächtnis verankert sind.“ (Mangold, 2007, 193) Die Behaltensleistung wird jedoch erheblich verbessert, wenn mehr Verknüpfungen zwischen den Informationen aus der Wahrnehmung, dem Arbeitsgedächtnis und dem Langzeitgedächtnis hergestellt werden. Beim passiven Verstehen werden mehr solcher Verknüpfungen aufgebaut als beim Elaborieren durch Wiederholung. Die Anzahl der Verknüpfungen wird maximal, wenn die Inhalte aktiv im Arbeitsgedächtnis bearbeitet werden.

Diese Erkenntnisse bilden die Grundlage für eines der wichtigsten Lernmodelle, dem Konstruktivistischem Modell vom Lernen.

Konstruktivistisches Modell vom Lernen

Im psychologischen Konstruktivismus wird angenommen, dass Informationsverarbeitungsvorgänge wie Wahrnehmen, Verstehen und Lernen von den individuellen Gegebenheiten einer Person abhängen. Der Wissenserwerb führt demnach zu subjektiven Wissenskonstruktionen. Das bedeutet: Wenn verschiedene Personen die gleiche Information erhalten, wird diese dennoch personenspezifisch interpretiert, so dass jede Person eine andere Wissensrepräsentation konstruiert. Es kann ferner angenommen werden, dass nicht nur das Wahrnehmen und Verstehen, sondern auch das Lernen individuell und bei jedem anders beschaffen ist.

Diese Erkenntnisse finden auch in unserer interaktiven Infografik Anwendung: Die Nutzer haben die Möglichkeit einen individuellen Weg zu beschreiten. Sie interagieren mit dem System und wählen dabei selber Inhalte und Geschwindigkeit aus. Die Nutzer können also individuell bestimmen wann und wie lange sie eine Grafik ansehen bzw. benutzen möchten und in welcher Reihenfolge sie die Interaktive Infografik durchlaufen. Deswegen war es uns wichtig, bei der Grafik nicht auf eine Navigation zu verzichten, obwohl die Interaktive Infografik nur aus einer Seite besteht.

Aus den Erkenntnissen des Konstruktivismus ergeben sich nach Mangold (2007, S. 180f) folgende Konsequenzen:

  • Das Lernen sollte aus aktivem Entdecken von Zusammenhängen bestehen. Dies bedeutet, dass Nutzer Inhalte selbständig erörtern, austesten und benutzen sollten. Ziel unserer Infografik war es, den Nutzer zum „selbstständigen Entdecken“ anzuregen. Aus diesem Grund wurden Inhalte und Visualisierungen so gewählt, dass sie zur Benutzung einladen.
  • Da die Informationsverarbeitung weitestgehend situationsgebunden erfolgt, sollte das Lernen im Kontext stattfinden. Vor allem die Vermittlung mit Hilfe von Beispielen aus dem Alltag weißt eine hohe Effizienz auf, da ein Bezug zum Erfahrungswissen hergestellt wird. Praxisorientiertes und methodisches Lernen ist in diesem Zusammenhang ebenfalls zu nennen. Auch mit diesen Erkenntnissen haben wir bei der Infografik angesetzt. Durch praktische Beispiele und konkrete Darstellung der Geräte und der Auswirkungen des Responsive Webdesigns auf die Darstellung einer Website haben wir stets einen Bezug zur Realität geschaffen.

Spaß beim Lernen ist der Motor des Erfolges

„Menschen lernen besser wenn sie mit Freude lernen“ sagt Manfred Spitzer. Die Erkenntnis, dass Spaß den Lernerfolg fördert ist längst kein Geheimnis mehr. So findet man auch unter den 13 Regeln aus der Lernbiologie von Frederic Vester Eine zum Thema Lernspaß: „Spaß und Erfolgserlebnisse sorgen für eine lernpositive Hormonlage und damit für ein reibungsloses Funktionieren der Synapsen und des Kontaktes zwischen den Gehirnzellen. Daher werden mit positiven Erlebnissen verknüpfte Informationen besonders gut verarbeitet und verstanden und ebenfalls wieder vielseitig (und somit »anwendungsbereiter«) im Gedächtnis verankert.“

Bei der Gestaltung unserer Infografik nahmen wir uns diese Empfehlung zu Herzen. Ausgewirkt hat sich das auf die Illustrationen, Farben, Animationen und die Wahl der Typografie sowie auf das Zusammenspiel von Text und Grafik und auf Struktur bzw. Aufbau der gesamten Grafik. Die Illustrationen wirken freundlich und nicht zu dominant, die Infografik ist bunt aber nicht schrill, die Animationen sind „fluffig“ und die Typografie wirkt einladend. Der Spaß an der Nutzung wird natürlich nicht nur durch die Gestaltung sondern insbesondere auch durch die Interaktionen mit den Grafiken gefördert.

Vom Groben zum Detail

Eine weitere Regel nach Vester bezieht sich auf das Zusammenspiel von groben, ganzheitlichen Informationen und Details: „Größere Zusammenhänge hängen selbstredend immer irgendwie mit der alltäglichen Erlebniswelt, also mit Vertrautem zusammen. Eine solche Information ist daher im Gegensatz zu den Details nie allzu fremd. Sie wird sich eher auf vielen Ebenen im Gehirn verankern können und ein empfangsbereites Netz für später angebotene Details bieten, so daß diese »saugend« aufgenommen werden.“

In der Pädagogik pflegt man zu sagen: Fakten sollten stets mit Blick auf das Ganze erarbeitet werden und das Ganze im Licht der Details. Deswegen war es für uns von Anfang an wichtig dem Betrachter zunächst einen groben Überblick über das Thema zu geben. Ziel war es, dass dieser von Anfang an versteht um was es in der Grafik geht um seine Bereitschaft und Aufnahmefähigkeit für folgende Informationen zu erhöhen.

Visual Design

Nach Konzeptüberarbeitung gibt es nun eine inhaltliche Dreiteilung: Die Kapitel Was? (Was ist Responsive Webdesign) Warum? (Warum Responsive Webdesign) und Wie? (Wie funktioniert Responsive Webdesign). Sowohl die Topnavigation, als auch die Kapitelüberschriften weisen auf diese Dreiteilung hin. Über unterschiedliche Farben wollten wir zunächst die Kapitelgliederung auch visuell verdeutlichen. Jedoch mussten wir pro Kapitel mehrere Farben verwenden, um beispielsweise Wireframes darzustellen. So konnten wir pro Kapitel nicht nur eine Farbe einsetzen. Stattdessen beschränkten wir uns darauf für die Highlights in aufeinanderfolgenden Kapiteln unterschiedliche Farben zu verwenden. Um die Übergänge zwischen Kapiteln zu verdeutlichen, bedienen wir uns bestimmter „Transitions“ Mehr dazu folgt.

Es ist schwierig gleichzeitig eine Infografik zu bedienen und Texte durchzulesen. Deswegen ist es nach unserer Meinung zwingend erforderlich, visuell eine Hierarchie zu erreichen. Wir haben uns dafür entschieden, die Grafik hierarchisch über die Texte zu stellen, da der Nutzer bei einer unauffälligen Grafik übersehen könnte, dass er interagieren kann/sollte. Das könnte dazu führen, dass er weiter scrollt und dadurch wichtige Bereiche der Grafik übersieht. Es war uns also sehr wichtig, dass der Fokus stets auf den Visualisierungen liegt, damit sich der Nutzer zunächst mit dem Bedienen der Grafik auseinandersetzt. Erreicht haben wir dies über Größe, Farbigkeit und Detailgrad. Die Texte müssen dennoch leserlich und auffällig genug sein, sodass sie vom Nutzer nicht übersehen werden, da sie wichtige Informationen enthalten. Das Interesse des Nutzers soll durch die Grafik angeregt werden, sodass er nach weiteren Informationen „sucht“.

Durch die gesamte Infografik ziehen sich Visualisierungen von Mobilgeräten, Laptops und Monitoren. Hier wurde versucht eine einheitliche Bildsprache bzw. Anmutung zu kreieren. Der Realismusgrad sollte nicht zu groß sein. Wir bedienten uns, sowie auch in der übrigen Gestaltung, dem „Flat Design“. Den großen Vorteil des „Flat Designs“ sehen wir in der Umsetzung. Elemente wie die Navigation oder Buttons können gänzlich in CSS erstellt werden und sind dadurch in jeder Auflösung scharf, können vergrößert bzw. verkleinert werden und laden schneller als Bilder. Das ist der Hauptgrund für unsere Entscheidung für „Flat Design“. Die Visualisierungen müssen jedoch trotzdem als Images eingebunden werden, sie sollten aber zur Gesamtanmutung der Website passen.

Foto 22.07.13 19 29 43Geräte