In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Für die Projektwochen belegte ich den an uns Interface-Erstis empfohlenen Kurs „Figma: Eine Einführung“ bei Malte Völkner. Ziel des Kurses war uns an das Programm heranzuführen und dessen Arbeitsweisen & Möglichkeiten kennen zu lernen. In den 2 Wochen trafen wir uns jeweils 3 mal in Präsenz und behandelten jedes Treffen ein anderes Themengebiet.
Malte machte uns zuerst mit der Benutzeroberfläche vertraut und wie wir ganz grundlegende Objekte wie Frames, Rectangles oder Texte anlegen.
Es wurde schnell klar, dass das Nachbauen und Ändern einzelner Elemente recht zeitintensiv sein kann und weswegen wir als nächstes Components, Instances und Variants kennen lernten.
Der Component stellt hierbei einen Grundbaustein mit Instances als dessen Kopien dar. Bei Änderungen am Component werden diese automatisch auf alle Instances übertragen. Erweitert wird dieses Prinzip mit Variants, wodurch schnell zwischen Variationen eines Objekts gewechselt werden kann. Um das ganze abzurunden sorgt die Anwendung von Autolayouts für eine einheitliche Struktur zwischen den einzelnen Objekten.
Das gleiche Prinzip lässt sich auch auf wiederkehrende Farben, Fonts und Schriftgrößen übertragen. Dabei legt man für jede Farbe und jeden Font einen Style an, welcher sich mit geeigneter Benennung schnell wiederfinden und bearbeiten lässt.
Das Prototyping ist der letzte Schritt, um das eigene Design in eine bedienbare und animierte Simulation umzuwandeln.
Die letzte Aufgabe des Kurses bestand darin, ein Redesign einer Website oder App in Figma zu erstellen und dabei UI/UX-Flaws eines typischen User-Flows zu lösen.
Für das Abschlussprojekt wählte ich die App „eBay Kleinanzeigen“. Ich suche und verkaufe gerne Gegenstände auf dieser Plattform, jedoch fällt mir immer wieder die komplizierte Benutzung und das veraltete Interface auf wodurch bestimmt viele UserInnen scheitern. Da ich das Prinzip der App jedoch als sehr wichtig erachte war es mir deswegen umso wichtiger die vielen Hindernisse eines eigentlich so einfachen Prozesses zu beseitigen.
Als User Flow wählte ich das Suchen und Rumstöbern in Anzeigen.
Mein Erster Arbeitsschritt bestand darin, jeden Einzelnen Screen aber auch den Flow als Ganzes zu analysieren und nach Problemen zu zerlegen. Dabei markierte ich diese ganz grob und fügte Notizen und schon mögliche Lösungsansätze bei. Dies erleichterte es mir im späteren Redesign einen Überblick zu behalten.
Nachdem ich mich für das Design einzelner Elemente entschieden habe, legte ich diese als Components mit Nested Components an. Aus den jeweiligen Components erstellte ich dann wiederum Variants um wie zum Beispiel bei der Navbar problemlos zwischen dem ausgewähltem Menü wechseln zu können.
Meine Components und Variants gruppierte ich letztendlich in verschiedene Kategorien, um diese schnell wieder zu finden.
Eine gleiche Ordnung versuchte ich bei den Farb- und Fontstyles ebenfalls. Jedoch mit zurückblickend mäßigem Erfolg, aber dazu mehr im Fazit
Verwirrendes & unpassendes Hamburgersymbol für Alle Kategorien in ein einfaches „ALLE KATEGORIEN“ geändert
Filter als einfliegendes Overlay mit Dropdown Menu statt ewigem reinklicken in unterschiedliche Optionen
Optimierungen in der Nutzerführung
In den folgenden Anhängen sind die Screens und der Prototyp zu sehen. (Leider ist der Clickcursor bei dem Video aus irgendeinem Grund „verrutscht“ und klickt deswegen immer ein bisschen daneben)
Obwohl ich Figma in der Vergangenheit schon für eigene Projekte und meine Bewerbungsmappe genutzt habe, konnte ich mir durch Maltes Einführungskurs sehr viel hilfreiches Wissen aneignen. Speziell Variants, Autolayout und SmartAnimate waren mir vorher fremd.
Jede Funktion wurde durch Malte verständlich erklärt und immer durch die direkte Anwendung im Anschluss vertieft. Ausserdem fande ich Maltes kleine Ausflüge in Themen wie zum Beispiel Human Interface Guidelines sehr spannend und habe dadurch Lust auf mein bevorstehendes Studium und letztendlich auch Berufsleben bekommen.
Wie schon vorher angedeutet bin ich zurückblickend jedoch nicht mit meiner Benennung und Organisation einzelner Styles zufrieden. Ich freue mich aber darauf mich in die Thematik der Benennung von Color- und Fontstyles einzulesen und dieses Problem in Zukunft möglichst zu vermeiden.
Alles in allem bin ich sehr froh diesen Kurs gewählt zu haben, da die Arbeit mit Figma und die Unterrichtseinheiten bei Malte sehr viel Spaß gemacht haben und ich viel Wichtiges gelernt habe.