Reise in den Daxbau - WS 09/10 - Christian Groß

Reise in den Daxbau - WS 09/10 - Christian Groß

1.126 Digitale Medien - Interactive Explanations: Grundlagen der digitalen Informationsgestaltung

Übersicht

  • Ziel
  • Idee
  • Inhaltsstruktur
  • Szenarieren & Task Lists
  • Sketches
  • Wireframes
  • Layout
  • Prototyp
  • Fazit

Ziel

Ziel des Kurses ist die Entwicklung einer interaktiven Applikation, die ein komplexes Sachgebiet mit visuellen Mitteln und unter Einbeziehung von Nutzerinteraktion vermittelt.

Konzept

Thema

Der Dax.

Es wird ein Einblick über die Strukturen, Verbindungen und Wirtschaftskraft der 30 Top Aktiengesellschaften in Deutschland gegeben.

Zielgruppe

  • Schüler/Studenten Altersgruppe zwischen 16-30 Jahren
  • Museumsbesucher im Rahmen einer Ausstellung zum Thema Wirtschaft in Deutschland

Medium

Interaktiveapplikation

Datenquelle

Wikipedia

Umsetzungsform

Flash Prototyp / Processing Applikation

Umsetzung

Die Anwendung ist für den Ausstellungsrahmen konzipiert und soll von vielen Besuchern verwendet werden können. Der Spass und Experimentierfaktor steht dabei ein vorderer Stelle, um dem Anwender den Einstieg in dies komplexe Themengebiet zu erleichtern. Die Benutzer können sich selbst auf die Reise begeben und so in die Welt der Daxkonzerne reisen.
Aus den oben genannten Vorüberlegungen, habe ich mich für eine Multitouchtisch Lösung entschieden, da diese eben meine Vorstellung von Verwendbarkeit und Spassfaktor vereint. Auf diesem Multitouch kann der Besucher Spielkarten auflegen, die die einzelnen Daxkonzerne darstellen. Mit diesen Karten kann der Nutzer nun seine Reise beginnen und durch hinzufügen weiterer Konzernkarten sich immer tiefer in die Strukturen der deutschen Wirtschaft gelangen.

Inhaltsstruktur

Szenarieren & Task Lists

Szenario 1

Michael möchte wissen, zu welcher Aktiengesellschaft die Firma Media Markt gehört. Er gib über die Suchfunktion Mediamarkt ein und erhält nach erfolgreicher Suche die Informationen. Die Darstellung gibt Michael die Möglichkeit zu sehen, dass Mediamark zum Metrokonzern gehört und durch einblenden der anderen Verbindungen sieht er auch das Saturn eine Tochter ist.

Szenario 2

Hans sucht die Allianz aus und möchte die AG gegen alle anderen vergleichen. Er wählt die Vergleichsfunktion aus und es werden ihm die Allianz und alle Anderen angezeigt um sie gegeneinander zu vergleichen

Szenario 3

Martin möchte weiter Informationen zur RWE AG haben. Er nutzt die Detailfunktion und erhält dort Informationen zur Gründung, Vorstand, Unternehmenssitz und Branche.

Szenario 4

Heinz aktiviert drei Aktiengesellschaften und möchte diese drei untereinander vergleichen. Er wählt die Vergleichenfunktion aus und erhält eine Reihe von Möglichkeiten.

Sketches

Die ersten Skizzen sollten uns einen Überblick über die Darstellungmöglichkeiten unser Anwendung geben. Diese Skizzen bildeteten die Grundlage für eiine Wireframes Konzept.

Wireframes

Die Wireframes legten Seitenaufteilung, die Art und Positionierung der Bildschirmelemente sowie die Logik der wichtigsten Interaktionsabläufe für die nächsten Schritte fest.

Layout

Aus den Skizzen und Wireframes entstanden die Layouts der Anwendung. Sie visualisieren wie ein Arbeiten auf dem Multitouch Table funktioniert und welche Elemente genutzt werden.

Abbildung 1

Hier sieht man den Multitouch mit 2 Karten. Nach dem eine Karte auf den Tisch gelegt wurde, werden ihre Tochterkonzerne, Beteiligungen, Anteilhaber und Managment um sie dargestellt. Diese lässt sofort einen ersten Vergleich zwischen den beiden Karten / Konzernen zu.

Abbildung 2 & 3

Beide Abbildungen zeigen Detailansichten der Karten und Tochterunternehmen der Konzerne.

Abbildung 4

Auf dieser Abbildung sieht man wie zwei Karten mit einander verglichen werden können. Der Nutzer sieht auf einem Blick, welches der Unternehmen Wirtschaftstärker ist und kann sich die genauen Werten im Detail betrachten.

Prototyp

Vor der Entwicklung des Prototyps stand die Recherche. Für die gesammelten Daten habe ich eine XML Struktur entwickelt, die die benötigten Informationen handlen kann.

XML Struktur

Hier sieht man einen Ausschnitt der XML Datei, die für den Prototyp die Daten von drei Aktiengesellschaften beinhaltet.

Flash Entwicklung

Ich habe Flash als Entwicklungsplatform verwendet, weil ich es lernen wolte und wenn man es kann, es schnell Fortschritte zulässt. Weiterhin habe ich mich mit Design Pattern auseinander gesetzt, da es für spätere Erweiterungen des Projekt eine bessere Programmierung ermöglicht.

Anwendung

Die entstandene Anwendung wurde genutzt, um die Hauptfunktionen der Applikation zuzeigen und für spätere Entwicklungen eine Basis zu schaffen.

Fazit

Der Kurs war ein guter Start in das Studium. Christian Behrens hat mit seiner strukturierten Art zu lehren, uns Kursteilnehmer viel auf den Weg geben können. Ich habe durch ihn erfahren, wie die herangehensweise an solch eine Applikation ist und er hat dies von Anfang bis Ende tatekräftig begleitet.