Der Kurs Basic Interface teilte sich in 4 Aufgaben: 1. Digitales Buch (mit Partner) 2. Klangbild 3. GUI (mit Partner) 4. 1000 Worte

Pro Aufgabe gab es etwa 4 Wochen (mal auch 6 Wochen) Zeit. Zwei Projekte in Partnerarbeit und zwei Projekte in Einzelarbeit.

Zwischen den Aufgaben gab es von Prof. Boris Müller Vorlesungen zu den zu bearbeitenden Themen.

Aufgabe: Es soll eine digitale Fassung ihres Lieblingsbuches gestaltet werden. Das Buch kann ein Roman, ein Sach-, Koch-, oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!) Die digitale Fassung des Buches soll exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024×768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240×320 Pixeln (QVGA). Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe.

Bearbeitung Dieses Projekt entstand in Zusammenarbeit mit I Hong Cheng.

Unsere Buchwahl für diese Aufgabe blieb bei einem kleinen Taschenbuch mit dem Titel „Verblüffende Zaubertricks und Kniffe“ im Nachdruck von 1989 vom Verlag Edition Aktuell. Es war ein kleines Zauberbuch für Kinder ab 8 Jahren.

Aufbau des Zauberbuches Bei der Analyse unseres „Zauberbuches“ wurde klar das hier eine typografische Überarbeitung notwendig war. Die Struktur des Buches konnte dagegen beibehalten werden. Die einzelnen Kapitel gliederten sich in 6 Abschnitte: Einleitung, Hellsehen leicht gemacht (Zahlenspiele), Simsalabim – jetzt wird gezaubert (leichte Zaubertricks mit Schaubildern), Tricks mit Karten, Noch mehr Zauberkunststücke (fortgeschrittene Zaubertricks), Register mit einer Übersicht.

Ein wichtige Aspekt in diesem Buch war, das schnelle Nachschlagen von Zaubertricks und das verstehen wie diese funktionierten.

Die durchlaufende Textgestaltung im Buch war Blocksatz für den Lesetextext. Alles ohne Weißraum und sehr platzsparend gesetzt. Die Schriftart war Serifenbetont und ähnelte stark der Georgia. Das Buch war schon älter und hatte sonnengebleichte Seiten. Die Überschriften für die Zeuabertricks waren leicht größer und in Bold. Jedes neue Kapitel eröffnete mit eine Illustration den nächsten Abschnitt. Die Grafik zeigte immer ein Kind als Zauberer verkleidet. Neben oder Über dem Bild stand der Kapitel Titel.

Auffällig und charakteristisch am Buch waren die detaillierten Illustrationen der Zaubertricks, die verrieten wie dieser funktionierte und vorzubereiten ist.

Wegen des vielen Blocksatzes hatte die Typografie stark gelitten.

Erste Skizzen zum neuen Layout und wo das Menu platziert wird. Eine Herausvorderung war die vielen Zaubertricks im Menü unter zu bringen.

Im Buch war durch einen Schriftauszeichnung in Italic markiert ab wann die Erklärung für den ZAubertrick begann. Dies wollten wir in der Digitalen version mit übernehemen.

Wir verwendeten „Merriweather“ von Google Fonts für das überarbeitete Zauberbuch. Diese hatte ein ähnliches charakteristisches Schriftbild wie im grdruckten Zauberbuch. Hinzu kam noch die große Auswahl an Schriftschnitten für weitere Webtypografie.

Die Navigation wird komplet über das Hamburger-menü gesteuert. Die vielen Zaubertricks sind in ihren Themen zugehörigen Kapitelen versteckt, die sich wie in einer Ziehharmonika aufklappen können. Ein Klick auf die Kapitelüberschrift öffnet die Auswahl zu den Zaubertricks. Nicht ausgewählte Menüpunkte haben eine schwächere Deckkraft.

Die aktuelle Position des Lesers wird durch eine farbige Markierung im Menü angezeigt. Somit erkennt der Leser in welchem Kapitel er aktuell sich befindet. Dies ist auch in der kleinen Variante zu sehen.

In der mobilen Ansicht ist das Menü oben platziert und lässt sich auch von oben nach unten öffnen. Die einzelnen Menüpunkte öffnen sich wie gehabt mit der Ziehharmonika-Funktion. Die Inhalte lassen sich in der mobilen variante vertikal scrollen.

Magischer Text

Eine Erweiterung kam während des design Prozesses hinzu. Im Buch war es leicht, durch einfaches umblättern der Seite hinter das Geheimnis des Tricks zu kommen. Zaubertricks sind aber ein Geheimnis und sollten nicht so einfach gelüftet werden.

Jeder Trick wird mit einer kurzen Einleitung beschrieben, wie er beim Publikum aussieht. Danach kommt die Beschreibung wie er durchzuführen ist. Dieser Abschnitt ist mit einem Buchstabenzauber belegt. Der Text ist solang verzaubert bis der Leser ihn mit dem Zauberstab Icon entzaubert. Das gleiche gilt für die Illustrationen. Ein Bild mit einem Zauberhut verdeckt die Ansicht bis er mit dem Augen Symbol gelüftet wird.

(Den Zauberhut haben ich und I Hong entworfen.)

Aufgaben: Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, etc.) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger als eine Minute sein.

Während der Suche nach einer interessanten akustische Begebenheit, probierte ich verschiedene Möglichkeiten aus, wie Klang visuell aussehen könnte.

Klänge hatten verschiedene Eigenschaften die visuell gezeigt werden konnten: - laut & leise - hoch & tief - lang & kurz - hart & weich - hell & dunkel - harmonisch & dissonant - Vordergrund & Hintergrund

Copyright

©Jens Ove Drößiger

Die akustische Begebenheit fand mich eines morgens auf dem Weg zur Fachhochschule. Dieser Klang war diesmal keine schöne Melodie, sondern war schrill, laut und hatte Ecken und Kanten. Das machte ihn interessant zu analysieren.

Während der visuellen Umsetzung entdeckte ich, das hinter diesem Lärm auch eine Melodie stecken konnte.

Ein Werkzeug das zur akustischen Analyse sehr half war Adobe Audition. Hier konnten kleine akustische Bereiche ausgewählt und in dauerschleife angehört werden. Zur Detalierten akustischen Analyse sehr praktisch.

Die Zeitachse verläuft von links nach rechts und zeigt einzelne Striche die die akustische Begebenheit oben und unten einrahmen. Die Striche sind die einzelnen Sekunden die vergehen und in 10er Schritten Nummeriert.

Es gibt 8 Geräusche in der Legende: - Hintergrundrauschen vom Mikrofon - Motorbrummen - hohes Quitschen - intensives Quitschen - Gong der Sprachdurchsage - Klopfen - Klappern und Scheppern - Klicken

Die tiefen Töne befinden sich unten und die hellen weiter oben. Intensive oder laute Töne haben eine dickere Strichstärke.

Das Hauptthema (Klappern und Scheppern) befindet sich permanent in der Mitte von hohen und tiefen Tönen. Je dicker und länger der Strich, um so intensiver und lauter war der Ton.

Aufgabe: Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / Entwicklern bei der Generierung von Ideen und Entwürfen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens entwickelt werden - gerne auch mehr. Das Ziel ist, einen iOS-8-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Es soll die standardisierte iOS-8-GUI eingesetzt werden - das App soll aber auch eine eigene Note bekommen. Die Entwürfe sollen 375x667 Pixel groß sein (für den Entwurf setze ich Punkt=Pixel). Zusätzlich zur GUI soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden. Die Aufgabe soll in Zweierteams bearbeitet werden.

Bearbeitung

Dieses Projekt entstand in Zusammenarbeit mit Miriam Zanzinger.

Mit der GUI Aufgabe begann der Kurs 2 Wochen früher als geplant und hatte gesamt 6 Wochen Zeit. Diese extra 2 Wochen waren im Rückblick eine gute Entscheidung, da es gegen Ende der Fertigstellung sehr knapp wurde.

Das Werkzeug mit dem wir die UI zusammenbauten war InDesign. Es war möglich, aber auch anstregend.

Google Material Design Bei der Umsetzung der App entschieden wir beide uns mit Material Design zu arbeiten. Wir hatte zuvor noch keine Erfahrungen gemacht wie man mit GUI Dokumentationen arbeitete. Die Dokumentation von Google Material Design war im vergleich zur Appel GUI aufgeräumter und schneller zu lesen. Dies war auch ein Grund weshalb wir dabei blieben.

Das schöne an Material Design von Google war auch, das es in der Doku Videos gab und viele weitere hilfreiche Design Anleitungen von Google zur verfügung standen.

[Material Design Properties](https://material.google.com/material-design/material-properties.html „Material Design properties“)

Das GUIs in ihren Details sehr aufwendig sind wurde während des lesens und bearbeitens mehr bewusst. Der Teufel steckt hier im Detail.

Für das Interfacedesign bestehen GUIs aus standardisierte Steuerelemente wie zum Beispiel Buttons oder Scrollbalken. Diese haben den Vorteil nicht das Rad neu zu erfinden und den User reibungslos und fehlerfrei eine gewohnte Umgebung in seinem Interface zu bieten. Natürlich darf in einem eigenen Prototype auch eine eigene gestalterische Note mit einfließen. Die sollte aber die GUI Regeln nicht zu sehr missachten.

Erste Skizzen

In der von uns erdachten App können Gruppen anhand eines Votings Ideen generieren.

Zu beginn erstellt ein Admin eine Gruppe und lädt seine Kontakte für das kurze Brainstorming ein. Jeder Nutzer bekommt ein begrenztes Zeitfenster pro Phase zum Bearbeiten. Uns war auch wichtig, das jeder Nutzer selbst entscheiden kann wann er sein Zeitfenster bearbeitet. Solang dies nicht abgeschlossen ist, ist die top Liste auch noch nicht fertig.

Die erste Phase ist einfaches Begriffe eintippen und sammeln. In der zweiten Phase werden diese dann mit einem Voting jeweils positiv oder negativ bewertet. Inspiriert von Tinder. Bei positiv bewertet gelangt der Begriff in der Liste weiter nach oben. Es entsteht eine Rangliste bei der die am höchsten bewerteten Begriffe in einer separaten Favoritenliste der top 5 zusammengefasst werden. Die einzelnen Schritte der Ideenfindung sind bewusste zeitlich begrenzt, damit schneller ein Ergebnis erzielt werden kann.

In unserem Beispiel suchten wir die top 5 der verrückt klingenden Namen und Worte. Das Sieger Wort war „Potsblitz“.

Aufgabe: Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden. Bei der Auswahl eines Themas sollte darauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens.

Copyright

©Jens Ove Drößiger

Die Letzte Aufgabe war meine persönliche Lieblingsaufgabe. Hier war es möglich die Themen zu bearbeiten die ich schon länger im Blick hatte.

Die spannende Herausforderung in dieser Aufgabe war es kein Wort zu benutzen, sondern nur über Icons, Piktogramme und Symbole zu sprechen

Für diese Infografik wählte ich das Thema „Weltraum“. Die aktuellste und faszinierenste Space Mission zu dem Zeitpunkt war die „Juno Space Mission“ von der Nasa.

Um was geht es in der Mission?

Mit der Juno Space Mission möchte die Nasa Jupiter gründlicher erforschen und untersuchen. Die Mission soll auch dabei helfen die Entstehungsgeschichte unseres Sonnensystems näher zu ergründen.

Der Jupiter ist im Sonnensystem unser großter Planet. Von der Sonne aus gesehen ist er auf der fünften Position. Er ist so groß, das er am Nachthimmer mit dem einfachen Auge zu sehen ist. Die Babyloner nannten ihn, wegen seiner goldenen Färbung auch Königsstern.

Der Mathematiker und Naturwissenschaftler Galileo Galilei war der erste Mensch der Jupiter mithilfe eines Fernglases näher untersuchte. Dabei entdeckte er seine Monde: Io, Europa, Ganymed und Kallisto.

Im 16.Jahrhundert galt noch das geozentrischen Weltbild, jedoch durch die Entdeckungen und Bewegungen der fremden Himmelskörper (Venus, Mars, Jupiter, Saturn) geriet dies ins wanken.

Jupiter gehört zu der Klasse der Gasriesen in unserem Planetensystem und hat die größte Masse von allen. Hinzu kommt auch das größte Magnetfeld abgesehen von unserem Hauptstern im Sonnensystem. Dieses Magnetfeld hat eine Reichweite von him bis zum Saturn.

Bis heute (2016) ist unbekannt was dieses Magnetfeld wirklich erzeugt. Die Annahme ist, das es durch die Bewegung der Gasstürme auf Jupiter entsteht oder es von einem schweren Metallkern kommt.

Fakten über die Juno Space Mission

• Der Launch der Juno Space Mission und Start war am 5 August 2011. Die Entfernung von Erde bis zum Jupiter betrug 716 millionen Kilometer.

• Das Flyby Manöver mit der Erde war am 9 Oktober 2013. Bei diesem Flyby Manöver erlangte Juno eine Geschwindigkeit von über 250.000 km pro Stunde. Es ist damit das schnellste von Menschenhand gebaute Flugobjekt.

• Die Ankunft Juno bei Jupiter war am 4. Juli 2016 mit einem polarem Orbit eintritt. Dieser Orbit wird 33 mal den Jupiter umrunden und bis auf 5000 km Distanz kommen. Dies ist so nah, das Juno fast die Gaswolken berührt könnte.

• Die Mission endet dramatisch am 20 Februar 2018 mit dem kontrollierten Absturz in die Jupiter Atmosphäre.

• Die Juno Space Mission ist die erste Space Mission die vollständig auf Solarenergie zugreift. Die Solarflächen mussten wegen der größeren Entfernung zur Sonne auch 8mal größer sein, als auf der Erde.

• In der Nähe von Jupiter ist die radioaktive Strahlung extrem hoch, das die Elektronik durchbrennen würde. Juno hat deshalb ein Bleigehäuse um alle wichtigen Instrumente zu schützen.

• Mit dem polaren Orbit Flug ist die Gamma Strahlung für Juno auch am schwächsten.

• „Juno“ war eine Griechische Göttin und die Ehefrau vom Gott Jupiter.

Das Schaubild besteht aus mehreren grafischen Elementen: einem Maßstab für die Entfernungen, der Planet Erde mit Raketen Phasen, die Orbitflugbahn der Juno Sonde, der Jupiter mit polarischer Umlaufbahn und einer Infotafel.

Das Schaubild ist von unten nach oben zu lesen.

Die Schubraketen starten von der Erde und bringen die Sonde Juno in ihre Flugbahn. Beim Raketenstart sind die verschiedenen Phasen zu erkennen. Nach einer Distanz von mehreren milionen Kilometern fällt die Sonde zur Erde zurück. An der Erde erneut bekommt Juno mit dem Flyby Manöver eine geschwindigkeits Zuwachs von 250.000 km pro Stunde. Nach mehreren milionen Kilometern erreicht sie Jupiter. Juno stürzt richtung Jupiter, der sie mit seiner Gravitationskraft einfängt. Hier beginnt sie ihrer polaren Orbitbahn um Jupiter. Beim ersten Kontakt musste Juno 35min mit Bremsraketen abgebremst werden, da sie ansonsten weiter geflogen wäre. Die Orbitbahn ist nach zwei Umrundungen konstant im 2 Wochen Takt Rhythmus. Hierbei sei noch zu erwähnen, das die ersten 4 Umrundungen nur zum Abbremsen von Juno dienen, deshalb sind in der Infografik auch 37 Striche zu finden.

In der Infotafel rechts neben Jupiter lassen sind die Umrundungen in Form von Strichen abzählen. Nach 33 Umrundungen wird Juno in den Jupiter kontrolliert stürzen und verglühen.

Copyright

©Jens Ove Drößiger

Das Poster ist für Incom leider zu groß, deshalb hier ein paar ausgewählte Einblicke ins Schaubild.

Ein Aufwendiger, Spannender und Lehrreicher Kurs. Wer einen Einstieg ins Interfacedesign sucht ist hier richtig. Die Aufgaben waren in einem vernünftigen Zeitfenster eingeteilt. Das Feedback in den vereinbarten Präsentationen war konstruktive und verständlich erklärt. Es war nachvollziehbar wo noch verbesserungen nötig waren.

Die Vorträge von Prof. Boris Müller waren alle sehr spannend und gaben einen Rundumblick ins Interface Design.

Ich habe viel an Wissen mitnehmen können und gelernt mit einer GUI zu arbeiten. Yay! ^^ Für GTAs also unbedingt zu empfehlen.

(Meine Auflösung zur akustische Begebenheit. Es war ein Fahrkartenautomat im Bus der so laut schepperte, während der Bus über die kaputte Straße fuhr.)

Quellen zur Juno Space Mission

[Quick Facts](http://www.jpl.nasa.gov/news/press_kits/juno/facts/ „Quick Facts“)

[Wikipedia - Jupiter](https://de.wikipedia.org/wiki/Jupiter_(Planet) „Wikipedia“)

[Nasa - Juno Peers Inside a Giant](https://www.nasa.gov/feature/goddard/2016/nasas-juno-peers-inside-a-giant „Nasa“)

Nasa's Eyes App

JunoCam

UPDATE: NASA Re-planes Juno's Jupiter Missione

SPACE-IMAGES

Planetenkunde.de

BfS - Strahlenschutz Dosis