Issuu on Google+

Praxisprojekt Einleitung / Medium / Informationsarchitektur & Daten / Gestalterische Recherche / Erster Prototyp / Finaler Prototyp / Interaktions-Patterns & Interaktions-Elemente / Usecases / Online-Version

179


Praxisprojekt / Einleitung

Einleitung Nachdem in den ersten Schritten, im Kontext der steigenden Konkurrenz unterhalb der Hochschulen, die Kommunikation und Gestaltungskriterien für erfolgreiches, digitales Hoschulmarketing untersucht wurden, widmet sich der letzten Teil der Thesis, der praktischen Teil dieser Arbeit, dem Bemühen der Hochschulen hin zu internationalen Standards. Diese Standards, die eines der Hauptbestreben im Bologna-Prozess darstellen, sollen vergleichbare Studiengänge schaffen, Studentenaustausch fördern und die Zusammenarbeit von Hochschulen unterstützen. Doch die Ideen werden nicht überall mit Begeisterung aufgenommen. Dies ist auch nicht verwunderlich wenn man sich die Veränderungen durch Bologna, zum Beispiel in den neuen Bachelor Studiengängen, anschaut. Dort findet sich ein verschulischter Lernprozess, in dem es nur noch darum geht in möglichst kurzer Zeit, möglichst viele Leistungsnachweise zu erwerben. Das eigentliche Studieren im humanistischen Sinne, wie es einmal gedacht war, gerät in den Hintergrund. Dabei könnte man diese Standards vielleicht auch erreichen ohne alles zu Modularisieren und Standardisieren. Denn verschiedene Hochschulen und Studiengänge, die sich zwar im Namen unterscheiden, haben schon jetzt mehr gemeinsam als sie denken. Wenn wir uns dem Problem der Überschaubarkeit und der klareren Strukturen von der Daten-Ebene aus nähern, wird deutlich, dass alle Hochschulen und Studiengänge auf den selben Prozessen und den selben fundamentalen Inhalten aufbauen. Um die Möglichkeiten von strukturierten Meta-Daten aufzuzeigen, soll im letzten Teil der Thesis eine visuelle Suchmaschine entwickelt werden, die es Benutzern erlaubt, die Inhalte der Hochschulen zu durchsuchen, um Studiengänge, die passende Hochschule oder Partner für Projekte zu finden; Alles an Hand der bereits vorhandenen Daten.

180


Praxisprojekt / Medium

Medium Als Basis für die praktische Umsetzung dieser Thesis soll das Internet dienen. Das Internet ist unabhängig von Zeit und Raum. Es ist überall und zu jeder Zeit verfügbar. Über das Internet ist ein Datenaustausch in Echtzeit möglich, über das entsprechende Backend, dadurch haben Benutzer immer Zugriff auf die aktuellsten Daten. Das eigentliche Medium für die Visualisierung der Daten stellt Flash dar. Flash gibt uns im Gegensatz zu HTML die Möglichkeit besser die Vorteile von Animationen nutzen zu können. Außerdem lassen sich über Flash viele Grafiken programmatisch erzeugen, was die zu übertragenden Daten niedrig hält. Zusätzlich erlaubt Flash uns, bei der Entwicklung des Prototypen, die Konzentration auf Gestaltung, Interaktionen und Animationen zu legen und nicht auf die programmiertechnischen Probleme die bei der Produktion einer HTML-Webseite auftreten (Cross-Browser-Kompatibilität, Cross-OS-Kompatibilität, usw.)

181


Praxisprojekt / Informationsarchitektur & Daten

Informationsarchitektur & Daten Um die Daten bestmöglich aufzubereiten wurden vorweg mehrere Daten-Diagramme erstell um Verknüpfungen innerhalb der Datenstruktur erkennen zu können.

Event

Alumni

Student Project Course

Course-Credits

Knowledge Lecturer

Location

182

Degree


Praxisprojekt / Informationsarchitektur & Daten

Area

Department

University

Country

183


Praxisprojekt / Informationsarchitektur & Daten

Auf den Ergebnissen dieser Modelle wurden die Datenbanken und Daten-Objekte des Prototypen entwickelt. Die Daten, die vom Prototypen ausgewertet und visualisiert werden, sind in mehreren Datenbank (SQL) abgelegt. Ein Skript (PHP) verknüpft die Datenbanken mit einander und erstellt einen großen Datensatz, der dann an den Prototypen geschickt wird. Um die Wartezeit für den User zu minimieren, wird von dem Script eine statische Datei erzeugt, die den Datensatz enthält. Wenn dieses System live ginge, würde man es so einrichten, das in einem bestimmten Zeitinterval ein Cron-Job auf dem Server ausgeführt wird, der überprüft ob Veränderungen vorliegen und daraufhin die statische Datei anpasst. Nachdem die Daten vom Prototypen eingelesen wurden, werden sie aufbereitet. Hierzu werden die Daten in verschiedene Objekt-Klassen zerlegt. Diese Objektklassen enthalten alle vererbten Eigenschaften des Objektes und seiner Eltern. Im Gegensatz zu einem klassischen Datenbank-Modell besitzen aber auch die Eltern die Eigenschaften der Kinder und nicht nur Verknüpfungen zu diesen.

184

Country

Tags

+

University

Tags

+

Department

Tags

+

Area

Tags

+

Lecturer

Tags

+

Project

Tag


Praxisprojekt / Informationsarchitektur & Daten

Dies erlaubt es uns die Daten schneller durchsuchen zu können und dem User so in nicht merkbarer Zeit Veränderungen anzuzeigen. So kann der User seine Suchkriterien besser an die ihm gelieferten Ergebnisse anpassen. Als interne Vergleichskriterien haben sich folgende Eigenschaften aus der Daten Aggregation und dem Kurs „Interaction Design Exhibition“ entwickelt: Die Geo-Position des Studiengangs in Form des Landes; Die Universität selbst; Der universitätsübergreifende Typ des Fachbereichs; Das Lehrgebiet als Unterkategorie des Fachbereiches; Methoden und Kompetenzen. Da die Inhalte an den einzelnen Universitäten stark variieren, soll der Vergleich auf der Ebene von Kompetenzen und Methoden stattfinden und nicht auf der der Inhalte. Die Jobs die Absolventen nach ihrem Studium annehmen, sind oft greifbarer für Studieninteressierte. Die Rückwärtsverknüpfung dieser Personen mit ihrem alten Studiengang, kann zu neuen Suchmöglichkeiten führen; Tags müssen nur den einzelnen Projekten zugeordnet werden, so lassen sie sich auf die Teilnehmer, Dozenten, das Lehrgebiet, den Fachbereich, die Universität bis hin zum Land vererben.

185


Praxisprojekt / Gestalterische Recherche

Gestalterische Recherche Um herauszufinden welche Systeme für die Massendaten-Visualisierung bereits existieren und Inspiration für den Prototypen zu sammeln, wurden mehrere Systeme untersucht.

Wikipedia Die Seiten der Wikipedia sind eher zurückhaltend gestaltet, der Text steht im Vordergrund. Dafür besticht die Wikipedia durch die Konsistenz der benutzten Elemente. Dies vereinfacht dem Besucher das Benutzen der Seite. Die Navigation innerhalb der Wikipedia findet über die Suche, Links in Texten oder Listen, wie zum Beispiel Kategorieseiten, statt. Da es sich bei der Wikipedia um ein Lexikon handelt, in dem man zielgerichtet nach Informationen sucht, ist dies für die Informationssuche und -aufnahme förderlich. Ein Blick auf das „Große Ganze“ wird dem Benutzer allerdings nicht geboten. Bilder werden in der Wikipedia, ähnlich wie in einem Lexikon an entsprechenden Stellen im Text angezeigt. Dies erlaubt es dem Leser einen Bezug herzustellen. Großversionen der Bilder werden nicht direkt auf der selben Seite sondern auf einer neuen Seite angezeigt. Auf dieser Bilder-Detail-Seite besteht kein direkter Bezug mehr zum inhaltlichen Zusammenhang. Die Editierung der Inhalte ist für Personen die mit dem System vertraut sind einfach. Für Personen die das System nicht kennen allerdings sehr schwierig, da kein WYSIWG Editor benutzt wird, sondern ein Editor der bestimmte Sonderzeichen als Ersatz für sonst genutzte HTML Tags benutzt. Doppelte Anführungsstriche vor und nach einem Wort, sorgen zum Beispiel dafür, dass dieses fett abgebildet wird. Ein Raster im klassischen Sinn ist nicht vorhanden. Die Seite wird in einen Inhalts und einen kleinen Navigationsbereich unterteilt. Diese lassen sich aber wegen fehlender markanter visueller Unterschiede kaum voneinander trennen. Wenn das Browserfenster extrem breit gezogen wird, werden auch die Textzeilen immer länger, was die Lesbarkeit verschlechtert.

186


Praxisprojekt / Gestalterische Recherche / Wikipedia

Links: Detailseite, Rechts: Listenansicht http://www.wikipedia.org

187


Praxisprojekt / Gestalterische Recherche / Space Collective

Space Collective Bei der Space Collective Webseite stehen nicht nur die Inhalte sondern auch die Gestaltung selbiger im Zentrum, bzw. die Gestaltung des Rahmenkonstruktes. Denn die Informationen selbst sind nicht direkt gestaltet, da diese nur über normale Eingabetechniken von den Benutzern generiert werden. Anders als bei der Wikipedia versucht man hier jedoch die Verknüpfungen der Inhalte zu zeigen, indem dem User zum Beispiel Artikel zu ähnliche Themen vorgeschlagen werden oder Tag Clouds die Inhalte auf einer anderen Ebene visualisieren. Leider ist die Seite nicht 100% konsistent. Es gibt zum Einen Hauptseiten, die ein einheitliches Raster in verschiedenen Ausführungen haben und dann gibt es noch Personen-DetailSeiten. Diese unterscheiden sich im Raster von den Hauptseiten. Während die Hauptseiten durch die verschiedene Navigationselemente und Zusammenstellungen von Medien und gut arrangierten Text auffallen, sehen die Unterseiten nur wie gewöhnliche Blogs aus und verlieren im Kontrast zu den Hauptseiten an Wert und Qualität. Die Hauptnavigation setzt sich klar vom Rest der Seite ab und ist auf allen Seiten im oberen Bereich zu finden. Auch alle anderen Navigationselemente lassen sich durch Schrift und Farbe schnell identifizieren. Die Navigation innerhalb des Systems läuft über Tags und Kategorien sowie über die Verknüpfungen die das System aus den Meta-Informatioen der Artikel und Benutzer generiert.

188


Praxisprojekt / Gestalterische Recherche / Space Collective

Oben: Startseite, Von links nach rechts: Ăœbersichtsseite, Kategoriedarstellung, Detailseite http://www.spacecollective.com

189


Praxisprojekt / Gestalterische Recherche / Delicious

Delicious Bei Delicious geht es nur um Daten und das Sortieren von Daten. Dies zeigt auch das schlichte Interface der Webseite. Während die letzte Version nach Daten pur aussah, zeigt das neue Layout viele visuelle Elemente, die das Navigieren und Finden von Informationen vereinfachen. Bei Typographie und den Formen der Navigationselemente ist eine klare Linie zu erkennen, die konsistent fortgeführt wird. Zur Navigation der Inhalte bietet die Seite verschiedenste Visualisierungen von Datenübersichten, wie zum Beispiel Tag-Clouds oder Listen, sowie verschiedene Verknüpfungen der Inhalte. Diese Verknüpfungen werden über die Tags der User hergestellt. Die Seite baut sich in einem dynamischen Raster auf. Der Haupt-Inhaltsbereich passt sich, ähnlich wie bei der Wikipedia, auf die Breite des Fensters an. Was jedoch das Lesen langer Textzeilen erschwert.Die verschiedenen Spalten und Navigationsbereichen sind zu Weilen, wegen ähnliche Schriftgrößen, Farben und keiner klaren Differenzierung, auch nur schwer auseinander zuhalten.

190


Praxisprojekt / Gestalterische Recherche / Delicious

Oben: Ăœbersichtsseite, Unten: Tagcloud http://www.delicious.com

191


Praxisprojekt / Gestalterische Recherche / Facebook

Facebook Facebook hat zwar ein klares Raster, Bereiche und Interaktionselemente, doch bringt all dies nichts, wenn der Benutzer von einem visuellen Überangebot überfordert wird und die klaren Strukturen in den Unterstrukturen verloren gehen. Auf der Navigationsebene bietet Facebook den Benutzer die verschiedensten Möglichkeiten die eigenen Daten und die Daten anderer User zu durchsuchen. Neben den Funktionen, die mir ein eigenständiges Suchen erlauben, präsentiert Facebook dem User zusätzlich aktuelle Informationen zu Veränderungen von Personen die bereits mit mir verknüpft sind.

192


Praxisprojekt / Gestalterische Recherche / Facebook

Oben: Ăœbersichtsseite, Unten: Einstellungsseite http://www.facebook.com

193


Praxisprojekt / Gestalterische Recherche / Zusammenfassung

Zusammenfassung Die bisher betrachteten Webseiten unterscheiden sich zwar in vielen Punkt von einander, doch gehören sie zu den klassischen Internetseiten mit festen Menüleiste, Fussleiste, Seitenleiste und Inhaltsbereich, bzw. zu den Seiten die über Listen, Tags und Links benutzt werden. Textlastige Seiten, bei denen die einzelnen Informationen und das dort hin gelangen im Vordergrund steht und nicht die eigentlichen Verknüpfungen und Zusammenhänge. Beispielseiten für solche Zusammenhänge gibt es einige, doch leider zeigt sich, dass diese Webseiten oft nur visuell ansprechend aussehen, aber schwer verständlich und für einen normalen Nutzer, kaum zu gebrauchen sind. Bei Systemen die mehr bieten wird dann schnell deutlich, dass es einen visuellen aufbereiteten Einstieg in die Daten gibt und danach folgen wiederum Texte und Tabellen. Dieser Ansatz scheint sinnvoll, wenn der Prozess für den Benutzer verständlich ist. Denn so bekommt der Benutzer einen aufbereiteten und vereinfachten Einstieg in die Datenwelt und kann sich von dort aus weiter vor arbeiten.

194


Praxisprojekt / Erster Prototyp

Erster Prototyp Im Zuge der Entwicklung entstand ein Erster Prototyp. Der Aktuelle hat visuell nicht mehr viel mit diesem zu tun, trotzdem wurden Klassen und Skripte aus diesem weiterentwickelt und in den aktuellen Prototypen implementiert.

195


Praxisprojekt / Finaler Prototyp

Finaler Prototyp Raster Der Seite liegt ein 20px Raster zu Grunde, alle weiteren Aufteilungen bauen darauf auf. Es gibt zwei Haupt-Inhaltsspalten mit jeweils 400px, eine Trennspalte in der Mitte, mit 100px Breite. Rechts und links von den Inhaltsspalten jeweils eine weitere Trennspalte a 100px. Am äußersten Rand kommt ein Rahmen von 40px hinzu. Über dem Inhalt kommt zu erst eine Kopfzeile für Logo und Navigationselemente mit 40px Höhe und einem Abstand von 40px zum oberen Rand. Darunter eine 40px Trennzeile, danach die Überschriften und Navigationszeile mit 20px und darunter der eigentliche Inhalt, welcher bis zum Ende des Anzeigebereichs weitergeht. Das Grundlinienraster, auf dem jegliche Typographie des Systems steht, ist ebenfalls 20px. Um bei der Umsetzung das Raster besser beachten zu können, wurde extra ein Skript programmiert, welches zu jederzeit das Raster mit allen Spalten und Zeilen Ein- und Ausblenden kann. Hierfür muss nur die Taste „G“ gedrückt werden.

196


Praxisprojekt / Finaler Prototyp / Raster

197


Praxisprojekt / Finaler Prototyp / Raster

198


Praxisprojekt / Finaler Prototyp / Raster

199


Praxisprojekt / Finaler Prototyp / Typographie

Typografie Fließtext und kleine Navigationselemente sind in der Arial gesetzt. Die Arial ist besonders im Bereich kleiner Schriftgrößen am Bildschirm optimal einsetzbar. Zusätzlich handelt es sich bei der Arial um eine Internet- und System-Schrift, die auf allen Rechner vorinstalliert ist. Dies mindert weiterhin die Speichergröße des Prototypen. Die Arial wird immer in Schriftgröße 11 gesetzt. Die Überschriften und großen Navigationselemente sind in der Neuen Helvetica Light abgesetzt. Die Helvetica ist der Arial sehr ähnlich, zeichnet sich doch in der Abbildung in Flash, gerade im Light Schnitt, durch filigrane und ausdefiniertere Formen aus. Die Helvetica wird, ausgenommen vom Logo-Schriftzug, immer in Schriftgröße 21 gesetzt. Beide Schriften sollten möglichst schlicht sein um nicht von den eigentlichen Inhalten abzulenken, da bei dem System die Inhalte und Interaktionen und nicht die Schrift im Vordergrund stehen.

200


Praxisprojekt / Finaler Prototyp / Farben

Farben Abgesehen von den „visuellen Suchfunktionen“, ist der Hintergrund der Seite in einem dunklen Grau mit einem leichten Rot-Blau-Stich und die Elemente darauf in verschiedenen Weiß-Abstufungen gehalten. Der Grund dafür, das der Hintergrund nicht schwarz ist, liegt in der Optimierung der Lesbarkeit, bei der Wahl der Schrift und Hintergrundfarbe, wurden Tests bezüglich dieser gemacht. Das Ergebnis war das dunkle Grau in Verbindung mit weißer Schrift. Die Suchfunktionen sind sehr komplex und benötigen deshalb zusätzliche Strukturen. Deshalb liegt ihnen ein Farbsystem zu Grunde, das es dem User erleichtern soll die Kriterien für seine Suche festzulegen. Die Hierarchie der Suchkriterien wird in der Hierarchie der Farben widergespiegelt.

201


Praxisprojekt / Finaler Prototyp / Visuelle Elemente

Visuelle Elemente In der Gestaltungen der visuellen Elemente gibt es eine Spannung zwischen runden und eckigen Formen. Die eckigen Formen geben der Gestaltung halt und spiegeln zusätzlich das Raster der Seite wieder. Außerdem stellen die eckigen Formen in der Regel Inhalte dar. Ausnahme sind die visuellen Suchfunktionen. Dort liegt es aber auch an den technischen Möglichkeiten bzw. Fähigkeiten diese runder zu machen. Alle anderen Interaktiven Elemente haben ein rundes Beielement, zum Beispiel einen Abgerundetes Dreieck das die Richtung anzeigt oder ein Kreis mit einem Icon.

202


Praxisprojekt / Finaler Prototyp / Navigation & Inhalte

Navigation & Inhalte Grundsätzlich gibt es eine übergeordnete Navigation, die es dem Benutzer erlaubt zum Anfang zurück zukehren und den Hilfe-Modus zu aktivieren, sowie eine Hauptnavigation die das Vor und Zurück innerhalb der bereits besuchten Seiten erlaubt und zusätzliche Navigationselemente innerhalb der Inhaltsseiten, die das erschließen neuer Inhalte erlauben. Interaktions- und Navigationselemente haben, wenn möglich, drei Zustände, die sich in ihrer Transparenz zeigen. Ein inaktives Objekt hat die höchste Transparenz, ein Objekt auf dem der Fokus liegt hat eine geringe Transparenz und ein aktiviertes, ausgewähltes Objekt hat keine Transparenz. Zusätzlich wird bei allen interaktiven Elementen der Hand-Cursor beim Darüberfahren angezeigt.

Von oben nach unten Normal Zustand, Mouse-Over, Active

203


Praxisprojekt / Finaler Prototyp / Navigation & Inhalte

Während bei klassischen Webseiten die Darstellung der verschiedenen Inhalte auf jeweils einzelnen Seiten stattfindet, bedient sich unser System eines anderen Verfahrens. Der Mensch ist eigentlich dazu ausgelegt linear zu denken und zu arbeiten. Er ist weder für Multitasking noch für das Wirrwarr von Verknüpfungen im Internet ausgelegt. Deshalb soll das Navigationssystem dieses Prototypen diese Form des Denkens und des Informationen auf- und wahrnehmens fördern. Es wird eine Art visueller Verlauf erstellt, der dem Benutzer zeigt welche Inhalte er ausgewählt hat und ihn zu welchen neuen Inhalten geführt haben. Der Benutzer kann so die Zusammenhänge schnell erkennen, seine Auswahl ändern und an jeden Punkt seines Verlaufes schnell zurückkehren um einen neuen Weg einzuschlagen.

204


Praxisprojekt / Finaler Prototyp / Animationen

Animationen Animationen werden an mehreren Stellen genutzt um dem Benutzer zu verdeutlichen was gerade passiert. Wenn der Benutzer zum Beispiel eine Auswahl trifft und eine neue Seite angezeigt wird, rutsch der „visuelle Verlauf“ nach links. Dem Benutzer wird so klar gemacht, das die Inhalte, die nicht mehr sichtbar sind, sich im linken äußeren Bereich des Bildschirms befinden. Wenn er seine Aufmerksamkeit an den link Rand lenkt, wird er dort einen Button finden, der es ihm ermöglicht diese Inhalte wieder hervorzubringen, indem er in der Verlaufsleiste zurück navigiert.

Einstiegselemente Zum Einstieg in das System werden dem Benutzer zwei visuelle Möglichkeiten geboten. Der Benutzer wird so nicht gleich durch eine große Menge an Informationen überfordert, sonder kann einen spielerischen Einstieg in das System finden. In der ersten visuellen Suche hat der Benutzer die Möglichkeit alle Daten des System zu filtern, indem er Filterkriterien mit der Maus auf den Filterkreis zieht. Dort kann er des weiteren den einzelnen Kriterien verschieden starke Bedeutung geben um das Suchergebniss zu verfeinern. In der zweiten visuellen Suche kann der Benutzer ebenfalls Filter auswählen, als Ergebnisse werden ihm allerdings nicht alle Daten präsentiert, sondern nur die Tags die im ausgewählten Zeitraum am meisten genutzt wurden. Der Zeitraum kann in dieser Ansicht vom User selbst verändert werden. Wenn die Filter gesetzt sind, kann der User sich die zeitliche Entwicklung der jeweiligen Tags anzeigen lassen, sowie verknüpfte Inhalte durchsuchen, was in dann wieder zur selben Auswahl an Objekten, wie bei der ersten Suchfunktion bringt.

205


Praxisprojekt / Finaler Prototyp / Einstiegselemente

206


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente

Interaktions-Patterns & Interaktions-Elemente Echtzeit-Feedback Um dem User die Suche zu erleichtern, bekommt er auf seine Aktionen immer ein sofortiges Feedback ohne Ladezeiten oder lange Berechnungszeiten. Dies wird über im Voraus durchgeführte Skripte ermöglicht, die die Daten aufbereiten. Der User kann so Veränderungen, die er über seine Eingaben generiert, schnell erkennen und beeinflussen. Beispiele hierfür sind das Hinzufügen von Filtern bei der visuellen Suche, bei der die Ergebnisse im Moment des Hinzufügens angezeigt werden oder die Suchfunktionen bei Tabellen, die die Inhalte der Tabelle schon während der Eingabe filtern.

Suchfeld Wenn eine einzelne Inhaltsseite sehr viele Daten enthält, wird eine zusätzliche Suche angezeigt, die es dem Benutzer ermöglicht die Einzelseite spezifisch zu filtern. Das Filtern findet daraufhin in Echtzeit statt. Das Suchfeld selbst wird über ein Icon initiiert. Das Icon ist das gebräuchliche Lupen-Icon, das zum Standard für Suchfelder geworden ist. Sobald das Feld aktiviert ist, deutet ein blinkender Cursor auf das aktivierte Eingabefeld hin und zeigt dem Benutzer, dass dieser nun etwas eintippen kann.

207


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente / Tooltips

Tooltips Gute Software erlaubt dem User, wenn er zum Beispiel einen Button nicht versteht, sich einen so genannten Tooltip zu holen. Dieser wird aktiviert indem der Benutzer kurz mit der Maus über dem Button verweilt. Diese Tooltips sind für interaktive Inhalte ebenfalls in unserem Prototypen vorhanden. Der Benutzer kann sich so schnell über die Funktionalität eines Elements informieren ohne die Hilfefunktion aktivieren zu müssen.

208


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente / Tabellen

Tabellen Die im Prototypen benutzten Tabellen sind in zwei Bereiche eingeteilt, die visuell von einander getrennt sind. Der Kopfbereich mit den Titeln der Spalten, sowie dem eigentlichen Inhalt. Die Zeilen des Inhaltes sind abwechselnd mit hellen und dunklen Hintergründen hinterlegt, dies erleichtert dem Benutzer das Lesen einer Zeile. Des weiteren gibt es für jede Inhaltszeile einen Roll-Over-Effekt der anzeigt über welcher Zeile sich die Maus gerade befindet. Wenn eine Zeile dann ausgewählt wird, wird diese farblich hervorgehoben. Über einen Klick auf eine der Spalten in der Kopfzeile, werden die Inhalte auf diese Spalte hin sortiert.

209


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente / Scrollen

Scrollen Bei den Inhalten, die nicht in den Anzeigebreich passen, wird eine Scrollfunktion hinzugef체gt. Diese erlaubt es den Inhalt auf verschiedene Art zu scrollen. Zum einen kann der Benutzer die klassische Scrollbar benutzen, die die selbe Funktionalit채t wie eine 체bliche Scrollbar ausweist. Zus채tzlich reicht es aber auch schon wenn der User mit der Maus den unteren bzw. oberen Bereich des zu scrollenden Bereiches erreicht; Dann wird der Inhalt ebenfalls in die entsprechende Richtung bewegt.

210


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente / Ladevorgänge

Ladevorgänge Um dem User Ladevorgänge zu visualisieren wird das Kreiselement aufgegriffen und ein Kreisförmiger Ladebalken erzeugt. Dem User wird so deutlich gemacht, das etwas geladen wird und er sich gedulden muss bis die Inhalte angezeigt werden.

211


Praxisprojekt / Interaktions-Patterns & Interaktions-Elemente / Drag‘n‘Drop

Drag‘n‘Drop Bei den visuellen Suchen werden dem Benutzer mehrere Möglichkeiten geboten die Filter zu aktivieren. Der User kann die Filter einfach anklicken und das System positioniert diese auf dem Filterkreis oder erfahrene Nutzer können die Filter per Drag & Drop selbst auf dem Kreis verteilen. Dem Benutzer werden dabei durch hervorgehobene Drop-Zones mögliche Ziele des Drag & Drops verdeutlicht.

212


Praxisprojekt / Usecases

Usecases Für die User-Tests und die eigentliche Entwicklung des Systems wurden mehrere Usecases entwickelt die das System lösen sollte. Zum einen Bestanden die Usescases in dem Auffinden von Daten, hin auf die Kriterien des Benutzers. Dies reicht von einem Studiengang, der den Ansprüchen des Users gerecht wird, bis hin zum Zusammenstellen einer Liste möglicher neuer Mitarbeiter, die eine Firma über das System sucht. Zum Anderen sollen Trends in bestimmten Fachgebieten ausfindig gemacht werden und die damit zusammenhängenden Projekte durchsucht werden. In den User-Tests der Usecases hat sich gezeigt, dass die visuelle Suche zu Beginn sehr ungewohnt ist. Sobald der User diese durch Probieren aber verstanden hat, wird diese neue Form der Suche reibungslos genutzt. Für die User-Test wurden möglichst Technik non-affine Personen ausgewählt.

213


Praxisprojekt / Online-Version

Online-Version des Prototypen Da eine vollst채ndige Abbildung aller Ansichten und Daten den Rahmen dieser Druck-Version sprengt, liegt eine Online-Version des System vor. Diese kann unter folgender URL abgerufen werden: http://www.universityfinder.de

214



Die Hochschule im Zeitalter digitaler Medien - 7/8 - Prototype