In diesem Kurs erlernten die Studierenden verschiedene Design-Methoden sowie Layout-Grundlagen am Beispiel einer Interaction Map.
Kursbeschreibung
Die Design-Methoden und Layout-Grundlagen wurden am Beispiel einer Interaction Map vermittelt. Eine Interaction Map visualisiert, wie ein/e BenutzerIn mit einem Produkt interagiert und ermöglicht es DesignerInnen, ein Produkt aus der Sicht der Nutzer*Innen zu sehen. Somit können Probleme und Nutzerbedürfnisse identifiziert und Produkte dadurch verbessert werden.
Zielsetzung
Den Studierenden werden Gestaltungsgrundlagen anhand eines praktischen Beispiels vermittelt, um so einen ersten Einblick in Gestaltungsprozesse und wichtige Methoden sowie erste Layout-Grundlagen zu erhalten.
Aufgabenstellung
Mittels Video- und Audioaufnahmen analysierten die Studierenden eine Situation, in der ein Produkt bedient wird. Im Anschluss wurde diese transkribiert, analysiert sowie visuell aufbereitet. Die daraus entstandenen Interaction Maps sind ein wichtiger Grundstein für die Identifizierung von Verbesserungspotenzialen der Produkte.
In der Brainstormingphase haben wir uns für das Thema “Smartphone Code Ändern” entschieden und haben uns auf das iPhone mit dem iOS-Betriebssystem konzentriert. Durch eigene Tests wurde festgestellt, dass die Änderung des Codes auf dem iPhone im Vergleich zu Android-Geräten etwas komplexer ist. Der Codeänderungsprozess wurde aufgezeichnet und in einzelne Schritte unterteilt. Dadurch entstand eine umfassende Sammlung von Bildern, die den Prozess detailliert darstellen.
Ausarbeitung
In der Ausarbeitungsphase wurden verschiedene Entwürfe erstellt, um die Interaction map zu strukturieren. Ein Wireframe wurde angelegt, um das grobe Layout festzuhalten, gefolgt von einem Low-Fidelity-Entwurf, der die Platzierung von Textblöcken, Bildern und Überschriften skizzierte. Eine Persona wurde entwickelt, um die zu beobachtende Nutzergruppe zu definieren. Ein FigJam-Entwurf half dabei, die Inhalte zu organisieren. Der Mid-Fidelity-Entwurf wurde erstellt, bei dem die Texte formatiert und runde Formen verwendet wurden.
Endergebnis
Das Resultat besteht aus einer detaillierten Interaction map, die den Prozess des Smartphone Codeänderns auf dem iPhone anschaulich darstellt. Die Farb- und Schriftauswahl wurde optimiert, wobei Blau als primäre Farbe gewählt wurde. Verschiedene Prototypen wurden entwickelt, um die Farbwahl, Schriftart und Hintergründe zu optimieren. Der High-Fidelity-Entwurf wurde finalisiert und um Feinheiten ergänzt. Die Interaction map wurde in verschiedene Bereiche unterteilt, wie “Doing, Thinking, Feeling” und “Timeline”. Der Prototyp wurde an die Bildschirmgröße eines MacBook Pro 14 Zoll angepasst.
Das Resultat ist eine detaillierte und ansprechende Interaction map, die den Prozess des Smartphone Codeänderns auf dem iPhone effektiv kommuniziert. Durch die visuelle Aufbereitung, die klare Gliederung und die optimierte Darstellung wird der Prozess für den Betrachter leicht verständlich und nachvollziehbar gemacht.
Hinterlasse einen Kommentar