Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Grundlagen Visual Interfacedesign WS15/16

Grundlagen Visual Interfacedesign WS15/16

Ziel des Kurses war es, ein Interface aus dem Alltag zu wählen und dazu eine Informationsarchitektur zu bauen. Diese sollte dann Visuel ansprechend auf ein DIN A1 Poster abgebildet werden. Hinzu kam noch ein Interface redesignt zum untersuchten Gerät.

Das Interface, das in dieser Aufgabe untersucht wurde, ist die Sigma BC. 8.12, ein kleiner Fahrradcomputer aus dem Hause SIGMA-ELEKTRO GmbH.

1. Application Structure

Application Structure_01.jpgApplication Structure_01.jpg
Application Structure_03.jpgApplication Structure_03.jpg

Visualisierung der Komplexität

In diesem Teil geht es um die Untersuchung der Informationsarchitektur. Hierbei ist mir besonders die Vielfalt an Menüebenen für so einen kleinen Computer aufgefallen. Getestet wurde unter anderem die Orientierung im Gesamtmenü, die Menüführung, die Erreichbarkeit von Menüs, die Hardkeys und ihre Funktionen, sowie wie viele Menüs es gibt und wie tief sie gehen.

Die ersten Ergebnisse der Strukturuntersuchung habe wurden in [Mind42
](http://mind42.com/ „Mine42“) und danach auf Papier festgehalten, um die Funktion der jeweiligen Tasten festzuhalten. Hier war es mir wichtig zu beobachten welche Funktion sie hatten und zu ergründen falls sie ihre Funktion ändern sollten.

2. Untersuchung der Informationsarchitektur

Zu beginn der Analyse wurde schnell klar, dass der Sigma BC. 8.12 Fahrradcomputer sehr gut durchdacht war. Im Interfacedesign wie auch in der Informationsstruktur gab es keine überflüssigen Elemente. Der Benutzer konnte alle wichtigen Menüpunkte schnell mit nur zwei Tasten Erreichen.

Beschreibung der Umgebung

Der Benutzer bewegt sich, da es jeweils nur zwei Tasten gibt, zyklisch durch die Menüs. Diese Variante der Fortbewegung ist sinnvoll, da so Platz für eine „Back“ Taste gespart werden kann und das Menü noch klein genug ist, um den Überblick zu behalten. Die Menüs sind in zwei Untermenüs aufgeteilt. Ein Hauptmenü, über das alle wichtigen Funktionen während der Fahrt zu erreichen sind, sowie zweitens ein Einstellungsmenü, wo alle Einstellungen vor der Fahrt geändert werden können. Die Einstellungstaste ist auf der Rückseite und muss kräftig 4 Sekunden gedrückt werden, um die Einstellungen zu öffnen. 
Mit der großen Haupttaste auf der Vorderseite erreicht der Benutzer den nächsten Menüpunkt. Befindet er sich in den Einstellungen, variieren die Funktionen der beiden Tasten leicht. Mit der großen Haupttaste kann man den nächsten Menüpunkt erreichen und mit der Taste auf der Rückseite den jeweiligen Menüpunkt öffnen und somit eine Menüebene tiefer gelangen. Hier werden mit der großen Haupttaste die Zahlen oder Namen gewechselt und anschließend mit der kleinen Taste bestätigen. Hierbei braucht man die kleine runde Taste nur einmal kurz betätigen.

3. Erste Application Structure

Siegma PlakatV1_klein.pngSiegma PlakatV1_klein.png

Die Informationsarchitektur „Application Structure“ mit ihren Menüs und Untermenüs war klein und somit überschaubar. Komplex wurde es durch die wechselnden Funktionen der zwei Tasten, die durch die Menüs navigierten.

In der ersten Darstellung der Informationsarchitektur sollte die Komplexität der Tasten mit ihren Funktionen mit abgebildet werden. Auch sollte nachvollziehbar sein, wo die Menüwechsel in die Einstellungen hinführten und endeten.

Das erste Feedback im Kurs zeigte, das der erste Entwurf leider noch sehr viele Konflikte mit der Darstellung der Struktur hatte. Der zyklische Kreislauf der Menüführung war nicht einheitlich. Auch gab es noch keinen genauen roten Faden in der Gestaltung. 
Es gab Konflikte in der Gewichtung der Elemente im Titelbereich. Hier war das farbige Logo der Firma Sigma, das sehr dominant wegen der roten Farbe hervortrat zuschwer. 
Ein entscheidender Tipp von Prof. Constanze Langer war, mit einer isometrischen Darstellung den Sigma Computer darzustellen. Dabei sollte das Gerät so räumlich gedreht werden, dass die hinteren Taste zu sehen waren. Auch sollte die Informationsmenge deutlich reduziert werden.

Aus den Vorschlägen mit der isometrischen Darstellung entstand der rote Faden für die Entwicklung einer durchgehenden isometrischen Darstellung der Menüstruktur für das finale Plakat.

4. Finale Application Structure

PlakatV2_klein.pngPlakatV2_klein.png
PlakatV2-1.pngPlakatV2-1.png
PlakatV2-2.pngPlakatV2-2.png
PlakatV2-3.pngPlakatV2-3.png
PlakatV2-4.pngPlakatV2-4.png

Die vorherige Informationsarchitektur wurde mit einer isometrischen Variante der Informationsdarstellung umgestaltet und überarbeitet. Diese Variante der Darstellung ermöglicht komplexe Informationsstrukturen übersichtlich, verständlich und optisch ansprechend darzustellen. 
Gut positioniert war jetzt die Sigma BC 8.12, die durch ihre räumliche Drehung, nun die hintere Taste für die Einstellungen zeigen konnte.
 Es war nun auch möglich die verschiedenen zyklischen Verbindungen und Führungen im Menü vollständig zu zeigen. Die einzige Herausforderung war nur, genug Platz für alle Menüpunkte zu schaffen. Mit dem einzelnen verschieben der Menüpunkte auf der Zeichenfläche konnten aber alle Punkte genug Platz finden.

5. Redesign

redesign-Titel-07.pngredesign-Titel-07.png
redesignVorlage-09 Kopie.pngredesignVorlage-09 Kopie.png
profilA-aktive.jpgprofilA-aktive.jpg
profilA-open.jpgprofilA-open.jpg
profilB-open.jpgprofilB-open.jpg
profilC-open.jpgprofilC-open.jpg
gesStreck.jpggesStreck.jpg
strecke.jpgstrecke.jpg

Es gab verschiedene Ideen für ein Redesign, wovon zwei in die engere Auswahl kamen und hier nun vorgestellt werden. 
Für das Redesign gab es nicht viel Spielraum, da einmal der Platz auf wenige cm begrenzt war und die Sigma BC 8.12 schon von beginn sehr gut im Design durchdacht war. Da wurde es eine Herausforderung, ein passendes Design zu finden, welches mit dem alten kooperiert.

Beschreibung

Konzept 1 Der erste Redesign Ansatz war, seinen Fahrrad Computer ausleihen oder an ein zweites, anderes Fahrrad anbringen zu können, ohne sämtliche Einstellungen erneut eingeben zu müssen. Diese Voreinstellungen sollten über „Profile“ im Computer abgerufen werden können. Gesamt sollte es erstmal nur drei Profile zum Speichern geben. A,B, und C.

Konzept 2 Der zweite Ansatz war, die Anzeige für „gesamt Strecke“ zu überarbeiten, da hier ein Icon fehlte. Dieses Icon sollte die Zähleinheit für „km“ aufzeigen mit der die gesamt Strecke gemessen werden könnte.
 Im Screen gab es zwar ein Texticon, aber nur für die aktuelle Geschwindigkeit. Ein Icon das neben oder vor der Kilometer Zahl stehen könnte fehlte und ein Benutzer könnte mit dem aktuellen Design irritiert werden, da nicht ersichtlich ist, in welcher Einheiten oder große diese Zahlen sich bewegen.

Funktion

Konzept 1 Der Fahrradnutzer betritt die Einstellungen über die hintere Taste und gibt wie gewohnt seine Einstellungen ein. Das wären: Sprache, Radumfang, Einheit und Gesamtstrecke. Danach gelangt er zum Menüpunkt „Profil“. Hier sieht er welches Profil in diesem Moment aktiv ist. Er betritt das neue Menü wie gewohnt mit der kleinen runden Tasten auf der Rückseite. Die Anzeige beginnt zu blicken, und kann nun zwischen den drei Profilen „A“, „B“ oder „C“ wählen. Das Wechseln des Menüpunktes betätigt man über die Haupttaste. Unter den Anzeigen ist zu erkennen, ob der Speicher bereits „aktiv“ oder noch „leer“ ist. Zum bestätigen wieder die hintere Taste kurz drücken. Die Anzeige hört auf zu blinken und der Benutzer kann die Einstellungen wieder verlassen. Ein Ablauf ist im Demo–Video nochmal zusammengefasst.

Konzept 2 Beim Menüpunkt gesamte Strecke (gesStreck) und Strecke, wird das neue „km“ Icon aktiv. Es befindet sich links neben der Anzeige, in der linken unteren Ecke des Bildschirms der Sigma BC 8.12.
Somit ist klar gezeigt, dass hier die Kilometer gemessen werden. Der Rahmen, um das Icon, gibt spielerisch zusätzlich den Effekt von räumlicher Tiefe hinzu, welches auch zu Entfernungen Thematisch passt. 
Die beiden Screens sind in den Beispielbildern aufgeführt.

Design Prozess

Um das Display mit den Profilen zu erstellen musste ein zusätzlicher Buchstabe eingefügt werden. Interessant war, das bereits die restlichen schon vorhanden waren und nur ein kleiner Strich ergänzt werden musste um das „K“ und „T“ zu erschaffen. Wegen des geringen Platzes, wurde die Geschwindigkeitsanzeige, die während des Modus „Einstellungen“ inaktiv war, umfunktioniert. Hier würden die einzelnen Profilpunkte „A“, „B“ und „C“ stehen. Zusätzlich damit das „B“ als solches erkennbar blieb und nicht als acht verwechselt werden könnte, ist in der rechten unteren Ecke ein kleiner Pixel entfernt.

Für das „km“ Icon musste der Bildschirm etwas im Unteren Bereich angepasst werden. Hier wurde aus Platzgründen die 5 Ziffern verkleinert. So das links das Icon reinpasste. Ein reguläres Fahrrad sollte nach Angeben des Herstellers nach 30.000km wie in die Inspektion.

Fazit

Es hat Spass gemacht, ohne Farben und nur in Schwarzweis zu arbeiten. Besonders befriedigend war es, doch etwas zu finden, dass in diesem gut durchdachten Computer fehlte und ergänzt werden konnte.

Gesamtfazit

Meine Interface Wahl Zu der Wahl des Interfaces Sigma BC 8.12 kam es, das ich mich überhaupt nicht mit Interfaces auskannte (jetzt gegen Ende des Semester ein bisschen mehr) und deshalb nach einem Gerät suchte das klein, handlich und überschaubar war in seiner Komplexität.

Während des Projektes war ich überrascht festzustellen, dass der Sigma BC 8.12 Fahrradcomputer ein gut durchdachtes Interfacedesign hatte. Das war schön, aber auch blöd, da ich zuvor davon ausging ein verbesserungswürdiges Gerät gewählt zu haben, welches man leicht verbessern konne. 
Nach langem Untersuchen zeigte sich, dass ein kleines „km“ Icon fehlte.
 Somit hatte ich etwas gefunden das doch verbessert werden konnte.

Über den Kurs Die Wöchentlichen Treffen im Kurs „Grundlagen Visual Interfacedesign“ bei Professorin Constanze Langer waren trotz des Platzmangels sehr lehrreich. Die Vorlesungen waren spannend und leicht zu folgen. Die Grundlagen für diesen Kurs wurde aus meiner Sicht gut vermittelt. Aber ohne Notizen machen, ging es dann doch nicht. „Wer schreibt, der bleibt.“

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Zugehöriger Workspace

Grundlagen Visual Interfacedesign

Entstehungszeitraum

Wintersemester 2015 / 2016

Keywords