In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Basics Interface ❯ WS 2011|12
Dokumentation der Projektergebnisse aus dem Kurs »Basics Interface« Wintersemester 2011/2012
Aufgabe
Gestalte eine digitale Fassung Deines Lieblingsbuches. 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 vier Screens in zwei verschiedenen Formaten vorgestellt werden - zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln. 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. Die Aufgabe soll in Zweierteams bearbeitet werden.
Umsetzung
In gemeinsamer Arbeit mit Sebastian Prein fiel die Wahl des zu digitalisierenden Buches auf „Körpersprache“ von Samy Molcho. Dabei handelt es sich um ein eher nüchternes Taschenbuch, was jedoch genug Spielraum für die Auseinandersetzung mit der Hauptaufgabe ließ: Die Optimierung von Typographie auf dem Bildschirm.
Die Qual der Wahl bot sich bei der Auswahl der perfekten Schrift. In der engeren Auswahl waren dabei PT Sans, Ubuntu, Azuro, Aller Sans und Droid Sans, wobei Azuro nicht zuletzt durch die vielen Empfehlungen im Internet (Klick!, Klick!) überzeugte.
Bei dem größeren Screen von 1024 x 786 Pixeln haben wir uns für ein Doppelseiten-Layout entschieden, welches an ein klassisches Buch erinnert und besser lesbar ist, als ein einziger, großer Textblock. Inspiriert vom Navigationskonzept der Facebook-App war schnell klar, dass eine von links eingeblendete Kapitel-Auswahl als Navigation dienen soll. Diese wird durch tippen auf das blaue Lesezeichen aufgerufen, während der Fließtext des Buches nach rechts geschoben wird.
©Constantin Eichstaedt
Das zwischen den Textblöcken positionierte, rote Lesezeichen erlaubt dem Leser, wenn er darauf tippt, eine Seitenpositionen in einem Kapitel zu markieren, sodass er zwischen verschiedenen Kapiteln wechseln kann und trotzdem zu seinem Ausgangspunkt zurück findet. Dabei wird zusätzlich ein kleines Lesezeichen-Symbol in der Kapitelauswahl angezeigt.
Ähnlich funktioniert dieses System auf dem kleineren Screen von 240 x 320 Pixeln. Jedoch füllt die Kapitelauswahl aufgrund der geringen Auflösung den gesamten Bildschirm aus. Statt einem Doppelseiten-Layout wird hier nur eine Seite nach der anderen angezeigt.
Bei der Präsentation unserer Ergebnisse ernteten wir Kritik an der Navigation. Die logische Anordnung der einzelnen Kapitel in der Kapitelauswahl sowie die Hervorhebung des aktuell angezeigten Kapitels waren unklar. Die blau hervorgehobenen Überschriften zu den einzelnen Kapitelgruppen hätte man beispielsweise bold statt in blau hervorheben können.
Trotz der Kritik sind wir mit dem Ergebnis zufrieden. Durch die Aufgabe wurde uns klar, dass ein klares Navigationskonzept und insbesondere die Auseinandersetzung mit der richtigen Screen-Typographie bei jedem Screen-Designprojekt extrem wichtig sind.
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 unterstützen. Die genauen Funktionalitäten können in der Kon- zeptphase entwickelt werden. Die Applikation kann unter Umständen über das technisch Machbare hi- nausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt wer- den. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmab- laufplan (Flowchart) skizziert werden.
Umsetzung
Bei einem realen Brainstorming werden Ideen von einzelnen Teilnehmern vorgeschlagen, besprochen und letztendlich gesammelt und schriftlich festgehalten. Diese gesammelten Ideen und Vorschläge werden wiederum kontinuierlich weiterentwickelt, um am Ende möglichst zu einem gemeinsamen Ergebnis zu kommen.
Dieser Prozess lässt sich in zwei grundlegende Komponenten aufteilen: Die Kommunikation zwischen den verschiedenen Teilnehmern und die Sammlung und Organisation von Vorschlägen und Ergebnissen.
Meine Grundidee bestand folglich darin, die App in zwei Hauptfunktionen zu teilen: Whiteboard und Chat.
Funktionsweise
Beim Starten der App öffnet sich zunächst eine Liste von aktiven und abgeschlossenen Projekten. Angelehnt an die E-Mail App von Apple werden Neuerungen in Projekten durch einen blauen Kreis dargestellt. Über den Button Bearbeiten können Projekte gelöscht werden, wobei auch hier darauf geachtet wurde, möglichst HIG und iOS-konform zu sein. Zusätzlich lassen sich über das Plus-Symbol in der Toolbar am unteren Bildschirmrand Projekte hinzufügen, sowie über das Zahnrad-Symbol Einstellungen an der App vornehmen.
Wird ein neues Projekt angelegt, müssen Projekttitel und die Teilnehmer festgelegt werden. Dabei können auch die Push-Benachrichtigungen des Projektes deaktiviert werden. Den einzelnen Teilnehmern kann entweder die Rolle als Mitglied oder als Projektleiter zugeteilt werden. Dabei können nur Projektleiter ein Projekt abschließen oder Mitglieder hinzufügen oder entfernen.
Wurde ein neues Projekt angelegt oder wird ein bereits vorhandenes Projekt aus der Projektliste ausgewählt, gelangt man zum Whiteboard.
©Constantin Eichstaedt
Das Whiteboard sammelt, ähnlich wie ein echtes Whiteboard, alle Informationen, Inhalte und Dateien zu einem Projekt zentral in einem Diagramm. Icons und Thumbnails zeigen den Inhaltstyp an und geben beispielsweise bei Text Auskunft darüber, um wie viel Text es sich handelt. Alle Inhalte lassen dich durch drag and drop neu anordnen. Dazu zieht der Nutzer einfach ein Inhalts-Symbol auf ein anderes, sodass eine neue Verbindung hergestellt wird. Die App ordnet das Diagramm automatisch, sodass sich keine Symbole überlagern.
Über das Plus-Symbol in der Navigationsbar lassen sich neue Inhalte hinzufügen. Dazu gehören Stichpunkte, Text, Audio-Aufnahmen, Weblinks, Skribbles, die angefertigt werden können (diese Funktion müsste noch gesondert ausgearbeitet werden), sowie Fotos und Videos. Ist ein Inhalt ausgewählt oder eingegeben worden, muss er im Diagramm positioniert werden. Auch hier gilt das drag and drop-Prinzip.
Der Chat dagegen zeigt Nachrichten von Benutzern in einer Timeline an, sodass auch ältere Nachrichten mit Hilfe der Suchfunktion schnell gefunden werden können. Zusätzlich kann ein Audio-Chat gestartet werden, sodass alle Teilnehmer über ein Headset oder über Mikrofon und Lautsprecher in einer Konferenzschaltung zusammenarbeiten können. Die Liste der Anrufteilnehmer lässt sich über den Button mit dem Gruppen-Symbol aufrufen, sofern ein Anruf aktiv ist. Aufgrund von Platzmangel auf dem kleinen Bildschirm und auch um die App nicht zu überladen wird in der Chat-Ansicht die schwarze Tabbar ausgeblendet. Um zurück zum Whiteboard zu gelangen, gibt es einen Whiteboard/Zurück-Button oben links in der Navigationsbar.
©Constantin Eichstaedt
Um festzustellen, welcher Teilnehmer welchen Inhalt wann hinzugefügt oder bearbeitet hat, kann man eine Verlaufsliste anzeigen. Über den blauen Pfeil rechts neben den Einträgen gelangt man zum dazugehörigen Inhalt.
Bei diesem Projekt war es besonders interessant, sich mit den Human Interface Guidelines von Apple auseinanderzusetzen. Um bei allen Apps eine möglichst einfache Bedienbarkeit zu gewährleisten, ist es naheliegend, dass sich alle Entwickler an vorgegebene GUI-Strukturen halten, sodass der Nutzer auch bei neuen Apps sich schnell zurechtfindet.
Aufgabe
Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitra- ster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirm- orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.
Umsetzung
Für das Klangbild habe ich den Halt einer S-Bahn in einem S-Bahnhof in Berlin ausgewählt. Nachdem ich in Illustrator ein Sekunden-Raster passend zur Länge des Klangs angelegt habe, wurde der Klang erst einmal mit der Freeware Sonic Visualizer analysiert. Aus der Software wurden zwei Grafiken exportiert, die bereits grobe Klang-Muster aufwiesen. Besonders das Ein- und Ausfahren der S-Bahn war hier bereits deutlich zu erkennen. Auch die Schritte der Fahrgäste auf dem nassen Untergrund zeichneten sich hier bereits deutlich ab.
©Constantin Eichstaedt
©Constantin Eichstaedt
Für das eigentliche Klangbild wählte ich Pastell-Farben und habe versucht, ähnliche Klänge auch möglichst ähnlich darzustellen. Die Lautsprecher-Durchsagen sind orange bis gelb, der Signalton bevor die Türen schließen rot markiert. Durch die einzelnen Schritte der Fahrgäste entstand ein interessantes Muster im Mittelteil des Klangbildes, welches von dem Ein- und Ausfahren des Zuges eingeschlossen wird.
©Constantin Eichstaedt
Aufgrund der Farb- und Formgebung gab es jedoch den Kritikpunkt, dass das Klangbild auch an eine Tal-Landschaft mit Bäumen in der Mitte erinnern könnte. Eine andere Farbpalette und eine andere Darstellung der Fahrgast-Schritte wäre hier besser gewesen.
Dennoch bin ich mit meinem Ergebnis zufrieden. Besonders die Abstraktion der Visualisierungen hat mit bei dieser Aufgabe gefallen.
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 kommu- niziert werden. Bei der Auswahl eines Themas sollte drauf 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. Die Aufgabe soll in Zweierteams bearbeitet werden.
Umsetzung
Diese Aufgabe wurde in Zusammenarbeit mit Thomas Petrach gelöst. Aufgrund der Komplexität des Themas entschieden wir uns für die Weltwirtschaftskrise 2009. Das Ziel dabei war es, die wichtigsten Hauptakteure und Zusammenhänge so herauszufiltern und darzustellen, dass der Sachverhalt der Weltwirtschaftskrise mit möglichst wenigen Icons auskommt, aber dennoch verstanden wird. Zunächst wurden die Ereignisse der Weltwirtschaftskrise in einzelne Sätze zerlegt und geordnet. Auf dieser Basis wurde entschieden, welche Icons benötigt werden (z. B. Geld, Bank, Arbeiter, Hypothek, etc.) und wie diese in Beziehung zu setzen sind.
©Constantin Eichstaedt
Zusätzlich zeigt das Schaubild auf einfache Weise den Sachverhalt aus drei Perspektiven: Die des Arbeiters, aus Sicht der Bank, und aus der Perspektive des Investmentbankers. Zur besseren Präsentation wurde außerdem eine Webseite erstellt, die die horizontale Navigation erleichtert.
Fazit Im ersten Semester hat mir dieser Kurs den meisten Spaß bereitet. Durch die kontinuierliche, konstruktive Kritik in der Gruppe kann sich jeder Teilnehmer verbessern. Daher ist er auch für Studenten im Kommunikationsdesign zu empfehlen.
Ein Projekt von
Constantin Eichstaedt
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Boris Müller
Entstehungszeitraum
Wintersemester 2011 / 2012