You are on page 1of 27

ZHDKREPO

Zürcher Hochschule der Künste


Interaction Design
2. Semester
Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
Dozent: Stefano Vannotti

09.06.2010

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
ABSTRACT

In einem interdisziplinären Team galt es ein umfassendes Interaktionskonzept für ein digitales Repositorium im Hochschulkontext (inkl. digitalem
HTML/CSS/jQuery Prototyp und selbsterklärendem Screencast) zu erarbeiten.

Das Hauptmerk beruht auf schnellem Auffinden verschiener Arbeiten, welche an der ZHdK entstanden oder am entstehen sind.

Prioriät wurde auf die Einfachheit und Verständlichkeit des Repositoriums gelegt.
Die herkömmliche Suchfilter wurde durch den Arbeitenmixer ersetzt, welcher jeder Zeit aufrufbar ist und somit sämtliche angezeigten Arbeiten
nach Interessen gefiltert werden können.

Als eingeloggter Benuter können bevorzugte Arbeiten und Studenten/Künstler auf dem eigenen Profil per drag&drop verknüpft werden.
Somit werden die verschiedenen Interessengebiete miteinander verbunden, auch um dem Besucher permanent neue Arbeiten zu präsentieren,
sodass er nie den „Zurück-Button„ benötigt.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INHALTSVERZEICHNIS

Einleitung und Projekthintergrund


Aspekte des Konzeptes und Problemstellung
Interface-Konzept
Fazit und Ausblick
Recherche

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
EINLEITUNG UND PROJEKTHINTERGRUND

Die Problemstellung bestand darin, ein online Repositorium für die ZHdK zu entwerfen, über welches Studenten ihre Arbeiten online stellen, an-
deren zugänglich machen und auch archivieren können sollten. Mit dieser Aufgabe vor Augen versuchten wir, unserem Konzept einen Fokus zu
geben, indem wir einen spezifischen Teilaspekt einer solchen Webapplikation näher betrachten und später speziell gewichten sollten.

Wir wählten dazu die Filtriermöglichkeit der Inhalte aus. Diese sollte nicht wie gewohnt durch ‚faceted search filter‘ geschehen, sondern durch
einen ‚Mixer‘, mit welchem die Informationen über eine ‚haptischere‘, benutzernahere Art ausgewählt werden können sollten. Durch das Ziehen
und Draggen von Sildern sollten die Daten auf eine interessantere Art und Weise filtriert, sortiert und angezeigt werden können.

Zu den technischen Aspekten der Umsetzung:


Anfangs bestand der technische Lösungsansatz darin, ein bestehendes CMS à la Drupal oder Wordpress zu verwenden, da uns dies einen Vor-
sprung bezogen auf Funktion und bereits verwendbare Features verschafft hätte. Nach weiterem Überlegen jedoch entschieden wir uns, unter
anderem auch deswegen weil beim Endprodukt eher die Veranschaulichung der Idee und des Konzepts statt dem Funktionieren im Vordergrund
stehen sollte, die Umsetzung über ‚statische‘ Seiten zu entwickeln. Zum Einsatz kamen die üblichen Standards XHTML, CSS, JavaScript/JQue-
ry, etc. Durch dieses Vorgehen konnte das geplante Design rasch und zweckmässig umgesetzt werden.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
ASPEKTE DES KONZEPTES, PROBLEMSTELLUNG

Problemstellungen, Thema und spez. Aspekte des Konzeptes (Positionierung und Abgrenzung)

Der Projektmixer ersetzt die übliche Suchfunktion

Basierend auf dem Checkbox-System kann eine oder mehrere Vertiefungsrichtungen, wie auch die Arbeitstypen ausgewählt, nach denen die
Arbeiten gefiltert werden.
Anhand der Regler in den Medientypen können spezifische Interessepunkte, nach welchen gefilter werden soll, genau reguliert werden.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
1. Screenkonzept
Nach dem Skizzieren begannen
wir damit, die einzelnen Screens im
Illustror zu entwerfen. Wir verwen-
deten für Bilder, Icons und sonstige
Elemente Platzhalter und versuchten
erst mal rauszufinden, welche Ele-
mente nötig sind und wo sie auf der
Seite hingehören.

Wir einigten uns darauf, den Mixer


oben auf der Seite zu Platzieren und
daneben eine Login-Möglichkeit.
Darunter eine einfach Suchfunktion
und die Möglichkeit, die Anzeige um-
zuschalten. Ganz unten auf der Seite
ist die Leiste mit den Vorgemerkten
Arbeiten. Diese Elemente bleiben auf
allen Seiten gleich. Unter der Um-
schaltfunktion beginnt der Contentbe-
reich.

ZUSTAND 01
1.1. Startseite
Der Contentbereich ist gefüllt mit
Thumbnails verschiedenster Arbei-
ten, die zufällig geladen werden. Je
nach dem über welcher Arbeit sich
der Mauszeiger befindet, erschei-
nen Infos dazu. Oben rechts lässt
sich zwischen Coverflowansicht und
Thumbnailansicht hin- und her schal-
ten.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 01
1.2 Profilseite - Arbeiten
Klickt man auf der Startseite auf ein
Thumbnail, kommt man auf die Pro-
filseite des Studenten. Diese ist in
zwei Untermenus aufgeteilt: ‚Arbei-
ten‘ und ‚Profilinformationen‘. Man
befindet sich direkt auf der Seite der
Arbeit, die man auf der Startseite
angeklickt hat, die Bilder erscheinen
als Coverflow. Die restlichen Arbeiten
sind darüber Chronologisch als kleine
Platzhalter aufgelistet. Unter der
Arbeit erscheinen Metainformationen
wie Datum, Dozent, Autor, Medium
und daneben eine Beschreibung des
Projekts.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
1.3 Profilseite - Profilinformationen
Unter „Profilinformationen“ werden
alle Informationen zum Inhaber des
Profils augelistet & ein Bild angezeigt.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
1.4 Arbeiten mixen
Am schwierigsten war das Konzipie-
ren der Filterfunktion. Wir waren der
Meinung, dass es weniger wichtig ist,
nach bestimmten Arbeiten zu suchen,
sondern eher zu denjenigen Arbeiten
zu gelangen, die von Interesse sind.
Ausserdem gefiel uns der Gedanke,
dass jede Suche andere Resultate
liefert, was das Erforschen der Seite
spannend hält.
Deshalb erstellten wir keine Navigati-
on im herkömmlichen Sinn, sondern
einen „Arbeiten-Mixer“, mit dem die
relevanten Arbeiten herausgefiltert
werden können.
Wir entschieden uns dafür, dass nach
dem Medium, in dem die Arbeit ge-
macht ist, nach der Studienrichtung
und nach der Art der Arbeit (Bache-
lor-, Masterarbeit, etc.) gefiltert wer-
den kann.
Die Studienrichtungen & Arbeitstypen
sind in einer Art Baumstruktur nach
Departementen geordnet, in er man
auch mehrfachauswahlen treffen
kann. Die Relevanz der Medien lässt
sich mit Schiebereglern bestimmen.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.1 Startseite
Beim zweiten Entwurf erstellten wir
ein sorgfältigeres Layout der Screens
im Photoshop. Neu hinzugekommen
sind Icons für die Umschaltfunktion
zwischen Thumbnails und Coverflow.
Ausserdem hatten wir die Idee, auf
der Startseite eine „Arbeit des Tages“
zu zeigen, welche jeden Tag unter
den neuen Uploads zufällig bestimmt
wird. Damit wollten wir einen „Eye-
catcher“ schaffen, da uns nur Thumb-
nails zu langweilig vorkamen. Auf
der rechten Seite wird eine Auswahl
von neuen Arbeiten präsentiert. Fährt
man mit der Maus über eine Arbeit,
erscheinen darunter Informationen.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.1 Startseite
Die Ansicht als Coverflow: Mit den
Pfeilen rechts und links kann Hori-
zontal durch die Aktuellen Arbeiten
gescrollt werden. Die Info erscheint
jeweils zur mittleren Arbeit.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.2 Resultateliste
Wir fügten zum ersten Entwurf der
Resultateliste eine Sortiermöglichkeit
hinzu, mit der die gefilterten Arbeiten
nach Studiengang, Datum oder Me-
dium sortiert werden können. Rechts:
die Info zur ausgewählten Arbeit.
Auch hier besteht die Möglichkeit, die
Resultate als Coverflow anzuzeigen.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.3 Profilseite - Arbeiten
Statt den Platzhaltern fügten wir hier
einen schmalen Coverflow ein, über
den unterschiedliche Arbeiten ausge-
wählt werden können.
Unten: Die Bilder der ausgewählten
Arbeit als Coverflow, darunter die Info
zum Projekt.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.4 Profilseite - Profilinfos
Auf der rechten Seite werden neu
„Favourites“ und „Bevorzugte Profi-
le“ angezeigt. Diese werden zufällig
durch das Surf-Verhalten des Studen-
ten bestimmt. Die Favourites sind die-
jenigen Arbeiten, welche der Student
als „Vorgemerkte Arbeit“ markiert hat.
Die Bevorzugten Profile sind die Pro-
file, auf denen er sich am häufigsten
aufgehalten hat.
Diese Thumnails sind alle mit den
entsprechenden Arbeiten / Profilen
verlinkt und ermöglichen ein weiter-
surfen, ohne neu filtern zu müssen.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 02
2.5 Mixer
Im Vergleich zum ersten Entwurf
stellten wir die Auswahl der Arbeitsty-
pen nicht als Baumstruktur, sondern
als Checkboxen dar. Die Auswahl der
Studiengängen versuchten wir weni-
ger schwerfällig zu gestalten.
Neu hinzugekommen ist ausserdem
die Möglichkeit, nach Jahren bzw.
Zeitspannen zu filtern.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.1 Startseite
Das End-Konzept, diesmal mit rich-
tiger Formatierung und Farben. Wir
hatten noch die Idee, für die Filter-
funktionen wie Studiengang, Arbeits-
typ, etc. Icons auf die Thumbnails
zu setzen, damit diese besser un-
terschieden werden können (kleine
Icons rechts). Dies haben wir wieder
verworfen, weil die Icons die Bilder
gestört hätten.
Die Info zu den aktuellen Arbeiten
erscheint nicht darunter, sondern als
Tooltip über der markierten Arbeit.
Unten an der Seite befindet sich eine
Sekundärnavi mit Impressum, Kon-
takt und dem Logo.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.2 Mixer
Wenn man auf der Startseite ist,
klappt man den Mixer runter und trifft
eine Auswahl von Studiengängen,
Arbeitstypen und bestimmt, welche
Medien relevant sind und welche
nicht (Standart: alles auf 100%). In er
Leiste „Filter“ wird angezeigt, welche
Filter aktiviert sind.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.3 Resulateliste
Nachdem man fertig gemixt hat, klickt
man auf die Seite, der Filter klappt
hoch und die Reslultate werden an-
gezeigt. Es besteht die Möglichkeit,
nach Studienvertiefung, Datum, Medi-
um oder Arbeitstyp zu sortieren. Auch
hier wird die Info zu den Arbeiten bei
Roll-over als Tooltip angezeigt.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.4 Projektseite
Klickt man in der Resultateliste auf
eine Arbeit, kommt man auf de-
ren Projektseite. Hier werden alle
Bilder des Projekts gezeigt ( in der
Thumbnails-Ansicht eines Gross, die
restlichen klein, in der Coverflowan-
sicht alle gleich gross als Coverflow).
Unten erscheint die Projektbeschrei-
bung, Link zum Profil des Autors,
Metainformationen und Links auf
Projektwebsite, Projektdoku, etc.
Darunter erscheint eine Auswahl
verwandter Arbeiten, über die man zu
weiteren Projektseiten gelangt.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.5 Profilseite - Arbeiten
Klickt man sich weiter zum Profil
des Autoren, kommt man zu dessen
Arbeiten. Es gibt zweit Menupunkte:
Arbeiten und Profilinformationen. Im
Content wird jeweils die neuste Arbeit
angezeigt (Bei Thumbnailansicht:
Ein Bild gross, Restliche klein, bei
Coverflowansicht: alle Bilder gleich
gross). Darunter erscheint eine Liste
mit allen Arbeiten des Studenten. Die
angezeigte Arbeit ist gehighlightet.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.5 Profilseite - Coverflow
Ansicht als Coverflow.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
ZUSTAND 03
3.6 Profilseite - Profilinfos
Wie im vorhergehenden Enwurf:
Links die Informationen zum Student,
rechts Favourites und Bevorzugte
Profile.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
INTERFACE-KONZEPT
FARBKONZEPT
Wir bestimmten mehrere Farben, die
wir an verschiedenen Orten der Page
einsetzten. Alle Links sind in einem
leuchtenden Blau gehalten, der Mixer
hat ein Dunkles Blau, die Mixerschrift
ist ein helles grau-blau. Für Fliesstex-
te verwendeten wir ein 60%iges
Grau, für Hintergründe ein helleres
Grau.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
FAZIT UND AUSBLICK

Je reduzierter die Suchfunktion ausgearbeitet wurde, desto strukturierter musste das ganze System angedacht werden.

Etliche Ideen konnten aufgrund des Zeitmangels nicht ausgearbeitet und umgesetzt werden.

Der Working-Process, online an gemeinsamen Projekten arbeiten. Upload Seite, wie werden sämtliche Medien dargestellt.
Die Möglichkeit besteht, ein eigenes Bild innert kürzester Zeit zu
gestalten.

Vorteilhaft wäre gewesen, wenn wir dieses Modul in zwei Wochen am Stück absolviert hätten und wir uns nur auf dieses Modul hätten fokusieren
können.

Faken ist praktisch, jedoch ermöglicht es nicht den gesamten Einblick in die Struktur und Komplexität der Seite.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
RECHERCHE

Analyse der Vimeo Webseite. Verschiedene Szenarien werden erarbeitet. Gruppiert


Diese verfügt über keine linieare Navigation. Der User bewegt sich wurden Rollennamen, welche spezifische Aktivitäten und
von Video zu Video, da permanent eine neue Auswahl an verwan- Ziele beschreiben.
ten Themen vorhanden ist.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
Als Grundlage diente uns der Eventmixer der ZHdK Webseite.
Dieser wurde unseren Bedürfnissen angepasst und erweitert, sodass er die komplette Suchfunktion des Repositoriums übernehmen kann.

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid
Recherche und Analyse Erste Entwürfe des Startscreens Erste Entwurf des Arbeitenmixers

Evolutionsstufe II Weiterentwicklung des Mixers Momentaner Stand der Webseite

ZHdK | 2. Semester | IAD | WUI 10 | Dozent: Stefano Vannotti | Studenten: Riccardo Lardi, Lisa Müller, Gian Gadient, Tobi Schmid