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

Kursdokumentation: Grundlagen Visual Interfacedesign

Kursdokumentation: Grundlagen Visual Interfacedesign

12FOId-VI Visual Interfacedesign Alicia Finkbeiner WS 2015/2016 Prof. Constanze Langer

Kursbeschreibung

Kursbeschreibung Incom »Nach wie vor spielt der visuelle Sinn eine zentrale Rolle im Interfacedesign. Denn trotz vielfacher Innovation im Bereich multimodaler Interaktion ist die zentrale Schnittstelle zwischen Mensch und Computer nach wie vor der Screen – in allen Größen und Ausprägungen. Das Fach Visual Interfacedesign stellt grafische und semiotische sowie zeit- und interaktionsbasierte Fragen im Bereich interaktiver visueller Systeme formal-ästhetisch in den Mittelpunkt.«

Eigene Zusammenfassung Der Kurs Grundlagen Visual Interfacedesign von Constanze Langer beschäftigte sich mit den Grundlagen der visuellen Gestaltung von Benutzeroberflächen. Dabei wurden uns anhand theoretischer Vorlesungen Themen wie Designprozesse, Ordnungssysteme oder Wahrnehmungspsychologie nährgebracht. Anhand von zwei Semesteraufgaben konnte das theoretisch Gelernte praktisch angewandt werden. Ausgangspunkt dafür war ein beliebiges, aber einigermaßen komplexes Geräte, welches sich die Kursteilnehmer selbst aussuchen durften. Ich entschied mich für mein schnurlose Telefon »PANASONIC KX–TG 6511G«. Im Folgenden werden meine Ergebnisse zu den beiden Teilaufgaben (1. Application Structure; 2. Redesign) kurz vorgestellt.

1. Teilaufgabe: Application Structure

Alicia_Finkbeiner_Telefon.pdf PDF Alicia_Finkbeiner_Telefon.pdf
Poster_V5.pdf PDF Poster_V5.pdf

Für die erste Teilaufgabe »Application Structure« sollte die Menüstruktur des ausgewählten Gerätes bis ins kleinste Detail dokumentiert und anschließend in einer Infografik visualisiert werden. Ich entschied mich zunächst alle Funktionen meines Telefons durch aktive Anwendung, d.h. händisches Durchklicken aller Menüpunkte, handschriftlich festzuhalten. (s. Bild 1) Bei Verständnisproblemen zog ich die Bedienungsanleitung zur Rate. Da das »PANASONIC KX–TG 6511G« lediglich über ein pixelbasiertes, neonoranges Display verfügt, entschied ich mich bei der Darstellung der Application Structure für die Hauptfarben Schwarz und Orange. An das Pixelbild angelehnt, wurden die einzelnen Menüpunkte in orangenen Kästchen dargestellt und die Piktogramme mit einzelnen »Pixeln« nachgebaut. (s. Bild 2)

2. Teilaufgabe: Redesign

Redesign.pdf PDF Redesign.pdf
Redesign_V2.pdf PDF Redesign_V2.pdf

Auf der Basis der bisher entstandenen Ergebnisse sollte nun ein Redesign eines Aspektes des von uns ausgewählten Gerätes vorgenommen werden. Auch hier waren wir wieder völlig frei und konnten selbst entscheiden was wir an unserem Gerät gerne verbessern würden. Bei der eingehenden Betrachtung der Navigationsstruktur meines Telefons während der ersten Teilaufgabe, ist mir bereits aufgefallen, dass diese teilweise sehr kompliziert aufgebaut ist. Meiner Ansicht nach, ist die Struktur an vielen Stellen sehr unübersichtlich und darüber hinaus sind einige Verlinkungen völlig unnötig. Ich hielt daher die Zusammenlegung mancher Menüpunkte für sinnvoll, um die Struktur im Ganzen viel übersichtlicher und einfacher zu gestalten. Des Weiteren ist mir aufgefallen, dass in dem Untermenü »Einstellungen« immer die selben Piktogramme verwendet wurden. Auch diese Tatsache erschien mir im ersten Moment unverständlich und ich wollte diesem Thema näher auf den Grund gehen.

Diese Überlegungen führten dazu, dass ich mich im Rahmen der zweiten Teilaufgabe »Redesign« mit folgenden zwei Aspekten auseinandersetzte:

  1. Konzeptionelle Überarbeitung der Navigationsstruktur
  2. Entwurf fehlender Piktogramme im Menüpunkt »Einstellungen«

Gestaltung des Posters

Poster_final.pdf PDF Poster_final.pdf

Für die Gestaltung des Posters entschied ich mich meine handschriftlich skizzierten Überlegungen des Redesigns zusätzlich digital umzusetzen. Da es bei meinem Redesign vor allem auf den Vergleich zum momentanen Stand der Navigationsstruktur ankommt, habe ich mich entschieden sowohl die aktuelle, als auch die vorgeschlagene Struktur auf dem Plakat darzustellen. Um eine eindeutige Unterscheidung der beiden Navigationsstrukturen zu ermöglichen, entschied ich mich für das Redesign mit einer anderen Hauptfarbe zu arbeiten. Hierbei viel die Wahl auf ein helles Grün, welches – genau wie bereits die orange Farbe – an ein pixelbasiertes Display erinnern soll. Auch die neu entstandenen Piktogramme des Redesigns wurden wieder an das Pixelbild angelehnt und mit einzelnen »Pixeln« nachgebaut.

Fazit

Rückblickend kann ich sagen, dass ich in dem Kurs »Grundlagen Visual Interfacedesign« sehr viel gelernt habe. Den Mix aus theoretischem Input und praktischer Anwendung fand ich sehr gelungen.

Obwohl der Kurs wahnsinnig viele Teilnehmer hatte, kamen Feedbackrunden, aus denen man sehr viele hilfreiche und nützliche Tipps mitnehmen konnte, nicht zu kurz. Als blutige Design-Anfängerin, fand ich diesen Aspekt des Kurses am förderlichsten.

Zu Beginn des Kurses tat ich mich noch recht schwer mit Adobe Illustrerer. Daher entschied ich mich auch, beide Teilaufgaben mithilfe des Programms zu lösen. Am besten hat mir dabei die Arbeit am Redesign gefallen. Da ich mich zum Zeitpunkt des Redesigns bereits durch die Navigationsstruktur des Telefons gekämpft hatte, fiel mir dessen Umsetzung deutlich leichter und ich empfand es überraschenderweise relativ leicht mir eine neue und für mich sinnvollere Struktur zu überlegen und passende Piktogramme zu finde.

Im theoretischen Teil des Kurses, empfand ich vor allem den Input rund um das Thema Piktogramme sehr interessant. Für die Visualisierung der Application Structure waren für mich vor allem die »Prinzipien der perzeptuellen Organisation« hilfreich.

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