Sie sind auf Seite 1von 18

Dokumentation

ZHdK IAD
3. Semester
HS 10
Design Studio I
Graphical User Interfaces
Daniel Schmider
Sebastian Homberger
Riccardo Lardi

Prof. Jürgen Späth


Dipl. Inform. Magnus Rembold
ZHdK | IAD
Graphical User Interfaces

INHALT 1 Problemstellung
2 Recherche
3 Konzeption
4 Umsetzung
5 Produkt
6 Zukunft
ZHdK | IAD
Graphical User Interfaces

PROBLEMSTELLUNG Als Ausgangslage diente die aktuelle eMuseum


Such-Webapplikation der ZHdK für Plakate
http://sammlungen-archive.zhdk.ch

Diese technisch sowie ästhetisch sehr grundle-


gend gehaltene Suchmaschine diente uns als
Grundlage - nun sollte eine interessante Mög-
lichkeit geschaffen werden, sich auf eine alter-
native Art und Weise durch das Archiv dieser ca.
10‘000 Plakate hindurchzubewegen.

Als Endprodukt soll ein gut veranschaulichbarer


Prototyp der Anwendung entstehen. Dieser
soll dem Betrachter und Benutzer die zentra-
len Kernpunkte des Konzepts präsentieren und
begreiflich machen. Als Technologie zur Reali-
sierung wurde Adobe Flash bzw. ActionScript 3
festgelegt.
ZHdK | IAD
Graphical User Interfaces

RECHERCHE Zu Beginn und als Einstieg in das Projekt


erhielten wir eine Führung durch die Plakat-
sammlung der ZHdK. Schnell wurde uns die
Menge der dort archivierten Plakate bewusst und
sogleich auch als zu fokussierenden Punkt für
unser Konzept festgelegt.

Als Weiteres durchstöberten wir das Internet


breitflächig nach uns inspirierenden Applikati-
onen und Beispielen. Schnell aufgefallen sind
uns Anwendungen, bei welchen die Inhalte
durch „Tags“ sortiert und verwaltet werden.
Viele Visualisierungen solcher Daten wurden als
sogenannte „Tag-Cloud“ realisiert. Dieses Prinzip
des sofortigen Feedbacks über die Anzahl der
mit den verschiedenen Tags getaggten Inhalte
überzeugte uns.

Ebenfalls fielen uns Beispiele auf, in welchen In-


halte durch dynamisch generierte Verbindungen
miteinander verknüpft werden. So führt ein In-
halt über ein bestimmtes Thema zu anderen, mit
diesem Thema verwandten Inhalten. Ein freies
Browsen durch die contents wird ermöglicht.
ZHdK | IAD
Graphical User Interfaces

RECHERCHE Danach beschäftigten wir uns mit der bestehenden eMuseum Suchapplikation. Uns sind
einige Punkte aufgefallen, die Verbesserung benötigen:

Suchseite und Ergebnisseite sind getrennt


Der User verliert viel Zeit indem er von der Suchseite auf die Ergebnisseite wechselt -
geht er zurück und will seine Suchkriterien anpassen, sind tatsächlich alle bereits einge-
gebenen Kriterien wieder zurückgesetzt. Dies ist in unseren Augen eine offensichtliche
Misskonzeption und rührt wahrscheinlich daher, dass professionelle User alle Kriterien
gewünschten Suchschlüssel bereits im Vornherein kennen, und sich nicht von den Sucher-
gebnissen leiten lassen wollen.

Suchschlüssel und Wert sind voneinander abhängig


Der Benutzer kann keinen allgemeinen Suchwert eingeben, er muss immer zuerst einen
Schlüssel wählen und dann entweder einen Wert aus einem Dropdown-Menü auswählen,
oder diesen selbst durch Texteingabe bestimmen. Ihm wird nicht die Möglichkeit ange-
boten in allen Suchschlüsseln nach einem Wert zu suchen. Darüber hinaus haben einige
Suchschlüssel eine ähnliche Bedeutung, führen aber zu verschiedenen Ergebnissen.

Keine statistische Rückmeldung


Der Benutzer erhält keine Rückmeldung darüber, wieviele Ergebnisse die von ihm ein-
gegebene Suche enthalten wird. Dies verschlimmert sich vorallem durch den Fakt, dass
seine Suchkriterien gelöscht werden, wenn er diese wiederholen will, falls seine Suche zu
keinen oder zu vielen Ergebnissen führt.

Diese Punkte notierten wir uns und nahmen uns vor, unser Konzept diesen Erkenntnissen
anzupassen bzw. eine Lösung zu finden, die diesen Punkten gerecht wird.
ZHdK | IAD
Graphical User Interfaces

KONZEPTION 1 Fokussierung auf Tags bzw. meta data


2 Dynamisches Ändern der Suchfilter
3 Statistisches feedback
4 Suchfilter Vorschläge
5 Freies Browsen durch Plakatsammlung

1 Es sollten die Inhalte über dessen meta data sortiert, verwaltet und verlinkt werden. Die
Navigation beim „Stöbern“ sollte über gemeinsame Tags geschehen. Inhalte sind dann
verwandt, wenn sie in mindestens einem Schlüssel den selben Wert besitzen. So sind z.B.
alle Bilder eines Künstlers durch dessen Schlüssel „GestlaterIn“ verwandt. Sehr interessant
ist natürlich der Schlüssel „Stichwort Bildinhalt“, da dieser Aufschluss über gemeinsame
Themen der Plakate gibt.

2 Der User soll zu jedem Zeitpunkt die aktiven Suchkriterien anpassen können, d.h. löschen
der aktiven Filter oder hinzufügen neuer Filter, entweder über ein Eingabefeld für eigene
Filter oder über vorgefertigte Filter (meta data oder suggestions).

3 Jedes Tag soll Aufschluss über dessen „Gewicht“ geben, d.h. es soll ersichtlich sein, wie-
viel Suchresultate ein einzelnes Tag liefert. Zusätzlich soll dem benutzer nach jeder Interakti-
on ein feedback über die aktuelle Menge der Suchresultate gegeben werden.

4 Zudem sollten dem User zu jedem Zeitpunkt weitere Filter, welche zu verwandten Inhal-
ten führen, angeboten werden. Diese sollten jeweils aus den zurzeit angezeigten Such-
resultaten extrahiert werden. Wenn z.B. die Filter „Schweiz“ und „Winter“ eingegeben sein
würden, könnte womöglich unter den Filtervorschlägen vielleicht der Begriff „Schlitten“
oder „Skifahren“ auftauchen.

5 Zusätzlich zur Bewegungsfreiheit über das Blättern der Suchresultate sollte man über die
Verlinkung der Inhalte durch dessen Tags zu verwandten Inhalten gelangen.
ZHdK | IAD
Graphical User Interfaces

KONZEPTION Wir orientierten uns bezüglich Form und Funktion sehr an google.com - Suchbegriffe wan-
delten wir in Filter um, Metadaten der Plakate fungieren als Suchvorschläge. Zudem erhält
jeder suggerierte und hinzugefügte Filter eine eigene Ergebnisanzahl, welche dem User
Einblick auf die Gewichtung des jeweiligen Filters gibt: Er kann dadurch besser abschätzen,
welchen Filter er möglicherweise entfernen oder eher als Hauptbegriff (von welchem die
Ergebnisse weggefiltert werden) verwenden sollte. Dies passiert auf einer Seitenleiste, die
sich auf dem gleichen Screen befindet wie die Ergebnisse, und verdeckt diese zu keinem
Zeitpunkt. Jedes mal wenn sich Filter ändern, wird die Anzahl der Suchergebnisse aktua-
lisiert. Somit erhält der User eine Rückmeldung darauf, wann sich die Suchergebnisse in
einem Bereich befinden, der sich auch in realisitischer Zeit durchsuchen lässt. Je mehr Filter
vorhanden sind, desto weniger Suchresultate wird die Suche erhalten.

Der Startscreen war uns ebenfalls ein grossen Anliegen: wir waren anfangs nicht so sehr
davon überzeugt dem User eine zufällige Auswahl an Plakaten anzuzeigen, da dies nicht die
Aufgabe einer Suchmachine ist. Wir hielten es lange Zeit für sinnvoller, dem User zuerst ein
leeres Suchfeld als Begrüssung zu präsentieren - wie dies google tut. Dies machte auf uns
einen seriöseren Eindruck, statt den User gleich mit einer Zusammenstellung von Zufalls-
bildern zu bombardieren, welche ihn höchst wahrscheinlich nicht interessieren. Da wir in
der Recherche jedoch Beispiele zu beiden Angehensweisen gefunden haben (z.B. Youtube,
welche dem User „zufällige“ Videos auch auf dem Startscreen präsentiert), legten wir uns
an diesem Punkt nicht fest - zumal sich diese beiden Konzepte nicht konkurrenzieren; wir
können dem User gleichzeitig ein leeres Suchfeld als auch eine Zufallssuche präsentieren.
ZHdK | IAD
Graphical User Interfaces

KONZEPTION Es folgen Bilder aus der Konzeptphase (Feinkonzept)

Der Startscreen wie ursprünglich geplant


ZHdK | IAD
Graphical User Interfaces

KONZEPTION

Die Suchansicht mit den Resultaten, aktiven Suchfiltern (oben links) und suggestions (unten links)
ZHdK | IAD
Graphical User Interfaces

KONZEPTION

Die Einzelansicht eines Plakats


ZHdK | IAD
Graphical User Interfaces

KONZEPTION

Die meta Daten eines ausgewählten Plakats mit buttons für Aufnahme als Filter oder neue Suche
ZHdK | IAD
Graphical User Interfaces

UMSETZUNG Bei der Realisierung des Konzepts in Flash


wurde uns rasch die grosse Komplexität einer
solchen Anwendung bewusst - eine solche
Applikation bedarf einer sorgfältig vorbereiteten
Programmarchitektur.

Wir gingen den direkteren Weg und program-


mierten mehr oder weniger einfach drauf los.
Die Probleme die sich stellten zwangen uns
mehrere Male wieder von vorn zu beginnen, da
sich laufend herausstellte, dass die gewählte
Organisation der erstellten Klassen kein konsi-
stentes und zufriedenstellendes Programmieren
ermöglichte.

Eine grosse Hürde für die Umsetzung unseres


Konzepts war die Beschränkung der Program-
miersprache auf Flash. Eine Applikation wie wir
sie entworfen hatten hätte um ein Vielfaches
praktischer in PHP in Kombination mit den
Standards von HTML/CSS und JavaScript erstellt
werden können. Andere Projekte jedoch konnten
sicherlich von Flash profitieren, da sie mehr auf
visuelles/grafisches fokussierten.
ZHdK | IAD
Graphical User Interfaces

PRODUKT Unser Produkt ist eine Suchmaschine welche


die Plakate über Tags, also dessen meta Daten,
verwaltet, anzeigt, miteinander verknüpft und
somit die Möglichkeit schafft, gezielt nach einem
Resultat zu suchen oder aber auch einfach durch
die Sammlung zu stöbern.

Hauptmerkmal ist jedoch die bewusst geschaf-


fene Suchtechnik über Tags. Die Haptik der
Interaktion mit den Tags kommt bei deren Ver-
wendung zur Geltung, wenn man durch ein Tag
einen neuen Filter erzeugt, einen eigenen schafft
indem man ihn im dazu vorgesehenen Textfeld
eingibt oder bestehende Filter löscht.

Das Resultat ist sehr anwendungsorientiert und


bezieht sich in seiner Konzeption hauptsächlich
auf seine Benutzung als seriöses und funktio-
nelles Werkzeug zu einem bestimmten Zweck.
Gleichzeitig schafft es durch den spielerischen
Umgang mit den Tags/Filtern eine einfaches und
simples Image.

Zeitliche Einschränkungen liessen es uns nicht


zu, das Projekt vollumfänglich abzuschliessen
bzw. alle Funktionalitäten in das Endprodukt
einzubauen. Das Endresultat ist ein Prototyp.
ZHdK | IAD
Graphical User Interfaces

PRODUKT Es folgen Bilder vom erstellten Prototypen

Der Startscreen zeigt eine zufällige Auswahl von 12 Plakaten an


ZHdK | IAD
Graphical User Interfaces

PRODUKT

Die Einzelansicht eines Plakates


ZHdK | IAD
Graphical User Interfaces

PRODUKT

Die meta Daten des ausgewählten Plakates


ZHdK | IAD
Graphical User Interfaces

PRODUKT

Ein Filter wurde hinzugefügt


ZHdK | IAD
Graphical User Interfaces

ZUKUNFT Dem von uns erstellten Prototypen fehlen noch folgende Funktionalitäten:

1 Statistisches feedback von suggestions und meta Daten (gefaked, random)


2 Beim Zurückgehen von meta Ansicht zur Übersicht bleiben meta Daten sichtbar
3 Weitere kleine bugs
4 Intensivere Auseinandersetzung mit visueller/ästhetischer Qualität des Tools
5 Logo/Name der Applikation

Abschliessend bleibt zu sagen, dass es sehr motivierend war, an einem Projekt zu arbeiten
das schlussendlich auch funktioniert. So konnten wir unsere „Skills“ im Planen, Konzi-
pieren, Entwerfen und Umsetzen/Programmieren trainieren, während wir an einem am
Schluss real existierenden und funktionierenden Tool arbeiteten.

Die Zusammenarbeit mit einem Betreuer jeweils für Konzeption/Gestaltung und einem
anderen Betreuer für die technische Seite stellte sich ebenfalls als förderlich heraus.