E-Learning, Blended Learning
HU Berlin
Meine Aufgaben:
PIXTURA
3 Point of View:
5 Prototyping / Minimum Viable
7 Überarbeitung
UI Design
Das E-Learning Projekt Pixtura war
User
Product
Die Überarbeitung der Software
Corporate-Design
für einen Zeitraum von 2 Jahren ge-
Die User (Studenten) sollen durch
JavaScript Prototypes
plant. Das Team bestand aus
eine Software auf eine spannende,
Content:
Content:
Dauer:
Kunstwissenschaftlern, Studenten,
spielerische Art ihr Wissen
Ein Prototyp mit ein paar Beispiel-
- Text, Fragestellung, Anzahl von
18 Months
Medien-Pädagogen, Program-
erweitern.
Kapiteln wurde umgesetzt.
Zwischenschritten der Übungen
2007-2008
mierern und Interface-Designern.
Dieser enthielt Beispiel-Aufgaben
wurden überarbeitet.
Angelehnt an den “Design Thinking”
4 Ideenfindung:
aus dem Lehrplan mit Multiple
Ansatz, wurden folgende Arbeits-
Content:
Multiple Choice und Listenauswahl
Interface Überarbeitung:
schritte umgesetzt:
Es wurden die Struktur der Wissens-
Das Interface wurde optimiert: Statt
kapitel erarbeitet. Die Übungen
Interface:
der mobilen Container wurden feste
1 Verstehen
wurden entworfen.
Gestalterische Umsetzung eines
Text- und Bild-Layouts umgesetzt.
Das Ziel war, für Stundenten der Bild-
Corporate Design
Für einzelne Übungen wurden skalier-
wissenschaften eine Software zu
Interface:
bare Elemente gestaltet:
schaffen, die es ermöglicht, zu den
Für das Interface wurde ein Konzept
Programmierung:
Navigierbares “Fadenkreuz” und eine
Veranstaltungen wissenschaft-
gewählt, bei dem die User den Work
Die Programierung bestand aus ein-
zoombare Fullscreen Option.
liche Methoden am Computer zu
Space wie auf einem Desktop mit
fachen HTML Seiten, zunächst ohne
Entwicklung eines Gestaltungsrasters,
erlernen und praktisch zu üben.
Paletten frei navigieren können.
Datenbank Anbindung.
das sich durch die Seiten zieht.
Bilder, Texte und Formulare waren
ähnlich einer Grafik-Software.
6 Evaluation/Test
Programmierung:
2 Beobachten
Es wurden 20 Studenten eingeladen,
- Ausarbeitung, Erarbeitung von
Es wurden Studenten nach ihren Lerner-
den Prototyp 2 Stunden zu testen.
- Backend / Bilddatenbanken
fahrungen befragt und die bestehenden
Hierzu wurde ein Fragebogen mit ca.
- Frontend
Lehrkonzepte der Dozenten untersucht:
20 Fragen verteilt. Diese bezogen
Die verwenden Medien, der Aufbau des
sich sowohl auf die Struktur der
8 Implementierung:
Unterrichts und Vorlesung.
Übungskapitel als auch auf die User
Die Software und Bilddatenbanken
Da die Software auch von den Dozenten
Experience.
wurden implementiert.
später mit Inhalten befüllt wurden,
Die Autoren setzen erste Texte um.
mussten auch deren Arbeitsweisen ver-
Dabei gab es auch Anpassungen an
standen werden.
Strukturen und Interface Elementen.
Auch technische Fragen wurden dis-
kutiert, wie ist der Kenntnisstand der
9 Anpassungen, Pflege, technische
Dozenten und Studenten bezüglich
Wartung
Computer, CMS und Medientechnik.
Für die nachfolgenden Jahren wurde ein
Kunstwissenschaftler mit der Wartung
Design Thinking
und Redaktion beauftragt.
E-Learning
HU Berlin
Meine Aufgaben:
Persona
Persona
Personas
UI Design
Ralf Stutenbach
Meike Hellwig
Personas veranschaulichen typische
Corporate-Design
Vertreter Ihrer Zielgruppe. Vielfältige
JavaScript Prototypes
Informationen zu ihrer Lebenswelt
Dauer:
machen sie als Menschen verstehbar
18 Months
und ermöglichen es den Beteiligten
2007-2008
sich mit ihnen zu identifizieren.
Alter
Alter
19 Jahre
21 Jahre
Ziele und Bedüfnisse
Ziele und Bedüfnisse
- Studiert im 1. Sem. Kunstwissenscha en
- Studiert im 3. Sem. Kunstwissenscha en
- Möchte sich schnell zurecht nden im
neuen Studiengang
Geplanter Studienabschluss
Geplanter Studienabschluss
Bachelor oder Master
Bachelor oder Master
Frustrationspunkte im Studienalltag
Frustrationspunkte im Studienalltag
Zeitveschwendung bei Jobsuche, Woh-
Langer Fahrweg zur Uni (1 Stunde)
nungssuche in der neuen Stadt Berlin
Persönlichkeit
Persönlichkeit
geduldig
lebendig
Interessen, Technik:
Computerkenntnisse: 2 (1-6 Schulnoten)
Interessen, Technik:
Laptop: PC Windows zum Arbeiten
Computerkenntnisse: 2 (1-6 Schulnoten)
Gaming PC zum Spielen
Laptop: Apple zum Arbeiten
E-Learning
HU Berlin
Browser Test am PC und Mac
Bei einem Skalierungstool wollen wir
Bilder prozentual flexibel anzeigen
lassen. Es zeigte sich,daß nicht alle
Browser das gleich gut können.
Prototyp Skalierungstool: magn. Einrasten am Rand
Der Test links zeigt im Vergleich,
in welcher Qualität die Browser
(Firefox, Internet Explorer, Safari)
es schaffen, Bilder mit unterschiedl.
Skalierungsgrößen darzustellen;
also wie gut die Interpolation der
Pixel ist.(weniger gut, als eine Soft-
ware wie Photoshop)
Man kann davon ausgehen, daß
in dem geplanten Tool Bilder nicht
> 100% der nativen Bildauflösung
skaliert werden.
http://targetx.de/hu/skalierung-magnetisch.html
Es zeigte sich, daß der Internet
(nur die Mitte im Navigationkreuz ist interaktiv)
Explorer bei Zwischenstufen am
schlechtesten Abschnitt, wobei der
Safari, gefolgt Firefox auf dem Mac
die besten Ergebniss zeigen.
Kleine Irritation entstehen manch-
mal, wenn beim skalieren mit dem
Navigations-Tool ein Flimmern an
den Bildpixeln entsteht.
E-Learning HU Berlin
Projekt-Team
Pixtura
1 Projektwebsite: Eine Projekt
Website stellt den Coach vor.
Backup: www.targetx.de/pixtura
2 Coach: Das webbasierte Tool
bietet alle Lern-inhalte an.
3 Informationsmedien: Faltblätter,
Plakate informieren über Pixtura.
Projektwebsite,
Faltblatt
E-Learning HU Berlin
Das E-Learning-Tool ermöglicht eine
Reihe von Herangehensweisen, Text und
Bildmaterialien als Übungen für Studier-
ende zu nutzen.
Listenansicht
Hier wird über eine zufällige Struktur die
Lerninhalte angeboten. Neben den eher
digaktischen Teil der Bildansicht gibt es
hier die Möglichkeit frei zu forschen und
nach neuen Bildbeispieln zu suchen.
Fallbeispiel
In dem Kapitel Fallbeispiele können
gezielt Standard Bild-Bestimmungs Tech-
niken geübt werden. Da hier die gleichen
Tools (Textauswahl, Bildmotive bestimen)
auf unterschiedliche Kunst-Epochen an-
gewendet werden können, gibt es durch
die Datenbank der HU Berlin ein sehr
großes vielseitiges Übungsmaterial.
E-Learning HU Berlin
Das Layout ermöglicht flexible Bild-
Ansichten.
Bei den Übungen werden diverse
JavaScript Anwendungen zur Interaktion
eingesetzt:
· Drag & Drop Funktionen
· skalierbare Bildgrößen
· Checkbox
· beschreibbare Text-Felder
Das Ziehbare Skalierungs-Tool lässt die
Bilder in der gewünschten Größe leicht
darstellen, auch eine Fullscreen
Darstellung ist möglich.
E-Learning HU Berlin
Autorentool
Das Autorentool ermöglich weitere
Bearbeitungen. Hier können Übungen
angelegt werden und Medien hochge-
laden werden.
Möglich wird dies über eine weitere
Menü-Leiste, die unter der Hauptnaviga-
tion eingeblendet wird.