Entwicklung digitaler Prototypen

Visualisierung der Produktvision: Methodik und Tools

Erstellung von Prototypen - die wichtigkeit des Visuellen inputs

Bei den diversen Projekten, die wir bei eggs unimedia zusammen mit unseren Kunden umsetzen, arbeiten wir oft sehr eng mit den zuständigen Design Teams zusammen. Insbesondere in den Abstimmungsphasen ist es sehr wichtig, die Visionen visuell darzustellen, um sowohl den Kunden als auch den Entwickler-Teams früh eine Vorstellung zu geben, wie das Endprodukt aussehen könnte. Begriffe wie Wireframes, Layouts und Prototypen werden in diesem Kontext häufig verwendet. Was sie jedoch bedeuten und welchen Zweck sie erfüllen, ist vielen Entwicklern und Kunden nicht immer bekannt.

Dieser Artikel beschäftigt sich im ersten Teil mit dem konzeptionellen Gestalten digitaler Produkte und insbesondere mit dem iterativen Design Prozess aus der Sicht eines User Experience (UX) - Designers. Im zweiten Abschnitt werden zwei mächtige Tools zur Erstellung von Prototypen vorgestellt, die bei den Visualisierungen von Konzepten unterstützen. Zudem ist dieser Blogeintrag eine Ergänzung zu dem Techtalk Beitrag im Juni 2022 –nähere Infos  hier.

Iterativer Design Prozess

Iterativer Design Prozess

Quelle: https://public-images.interaction-design.org/literature/articles/materials/HCh58dNyAJ7WNIOajGzgQlNfEcOpGhAkAb7c7v5J.jpg

Der iterative Design Thinking Prozess ist eine beliebte Methodik, die viele UX Designer anwenden, um die Visualisierung eines Produkts anhand von Feedback immer weiter zu verfeinern. Konkret geht es darum, Anforderungen zu sammeln, zu definieren, kreative Lösungen zu finden, einen Prototyp zu gestalten und über Tests Feedback einzuholen. Bei Änderungswünschen wird die jeweilige Phase wiederholt, um die Anforderungen anzupassen und den Prototypen zu verändern. Auf dieser Weise werden Fehlerkorrekturen im frühen Stadium wahrgenommen und es kann für die Entwicklung eines Produkts immer wieder Feedback eingesammelt und verarbeitet werden. Verschiedene Auflösungen von Prototypen sind hierbei auch von großer Bedeutung, die im folgenden Abschnitt beschrieben werden.

Fidelities

Designvorlagen in verschiedenen „Fidelities“ (kann man sich wie unterschiedliche Auflösungen vorstellen) ermöglichen die Auswahl und ggf. auch Anpassung eines Detailgrads. Dadurch ist es einfacher, auf Änderungsvorschläge einzugehen und die Produktentwicklung weiterzuführen. Aus der Perspektive von Entwicklern, die zur Umsetzung die Vorlagen erhalten, fallen oft Fachbegriffe, die im Folgenden erläutert werden:

Fidelities

Quelle: https://miro.medium.com/v2/resize:fit:700/1*g81y9N-L0rdRTaljIX_ZYw.png

Low-Fidelity

Designvorlagen in verschiedenen „Fidelities“ (kann man sich wie unterschiedliche Auflösungen vorstellen) ermöglichen die Auswahl und ggf. auch Anpassung eines Detailgrads. Dadurch ist es einfacher, auf Änderungsvorschläge einzugehen und die Produktentwicklung weiterzuführen. Aus der Perspektive von Entwicklern, die zur Umsetzung die Vorlagen erhalten, fallen oft Fachbegriffe, die im Folgenden erläutert werden:in Low-Fidelity Prototyp hat eine niedrige Auflösung. Oft werden schnelle Skizzen zu Papier gebracht, um die Wünsche darzustellen. Auf diese Art und Weise kann man schnell und einfach die Ideen sammeln und festhalten. Auch ist es möglich, verschiedene Seiten miteinander zu kombinieren und so einen ersten Eindruck für den Kunden zu vermitteln.

 

Medium-Fidelity

In dieser Stufe gibt es schon konkrete Anforderungen und Ideen für das Endprodukt. Hier werden Anordnungen visualisiert und konkrete Platzierungen verschiedener Komponenten ausgearbeitet. Man spricht dabei von Wireframes, also Blaupausen des Systems, die mit einfachen Mitteln die Vision in mittlerer Auflösung darstellen sollen.

 

High-Fidelity

In der hochauflösenden Variante nennt man die Ergebnisse Designvorlagen. Sie bilden eine konkrete, nicht-funktionale Kopie dessen ab, was der Benutzer im fertigen Produkt zu sehen bekommt. In dieser späten Phase sind Kriterien und Styles fertig definiert und werden in fast fertigem Zustand geliefert. Aus technischer Sicht wird anhand dieser Vorlage das Produkt entwickelt und fertiggestellt. Insbesondere ist es wichtig, das Verhalten auf verschiedenen Endgeräten zu berücksichtigen. Dabei unterstützen Richtlinien, die Abstände, Farbzuweisungen, Anordnungen, etc. definieren.

Falls Sie sich fragen, mit welcher Software oder auf welcher Webseite das einfach und schnell gemacht werden kann, gibt es hier ein paar Vorschläge:

Prototyping Software

Es gibt verschiedene Software-Lösungen, die im professionellen Umfeld verwendet werden. Dazu gehören weit verbreitete Tools wie etwa Sketch oder Axure RP. Doch welche Alternativen könnte man verwenden, wenn man unabhängig von Betriebssystemen sein möchte? Aus eigener positiver Erfahrung möchte ich nun genauer auf zwei Systeme eingehen:

Adobe XD

Adobe XD ist eine vektorbasierte Grafiksoftware zum Entwurf grafischer Benutzeroberflächen für Web-Apps und Mobile Apps. Es ist Bestandteil der Creative Cloud von Adobe. Nach einer langen Betaphase seit 2015 hat es seine Marktfähigkeit bewiesen und wird im professionellen Umfeld von UX und UI-Designern zur Erstellung von high-fidelity Prototypen und funktionellen Prototypen verwendet.

Fidelities

Quelle: https://www.adobe.com/products/xd.html

Aufgrund der offenen Schnittstellen und Creative Cloud Anbindung ist es einfach, bspw. mit Adobe Illustrator, Photoshop und direkt mit Adobe Experience Manager Designs direkt grafisch zu bearbeiten und in Webseiten umzuwandeln. Zudem ist der ebenen- und komponentenbasierte Aufbau eines Prototyps von Vorteil, um die Wiederverwendbarkeit der Bibliothek zu gewährleisten. Somit können in kurzer Zeit diverse Screens entworfen und bearbeitet werden. Mithilfe der Vorschaufunktion ist es zudem möglich, eine funktionelle Version im Browserfenster mit einem Link zu teilen und so Feedback einzuholen. Grafische Lösungen lassen sich in allen möglichen Auflösungen entwerfen und teilen. Als kleinen Nachteil kann man aufführen, dass im Vorfeld die Software installiert werden muss.

Figma

Figma ist ein kollaboratives Design-Tool zur Erstellung von Designs (für Web, Mobil, UI und UX). Mithilfe dieses Tools können sowohl klassische Designfunktionen und Designsysteme entwickelt als auch digitale Prototypen erstellt werden. Es handelt sich um ein plattformunabhängiges System, das sowohl als Browser-, Desktop- und Mobile-Application verfügbar ist. Die eigene Collaboration-Cloud ermöglicht die Echtzeitbearbeitung im Team, als auch in der privaten Nutzung.

Figma

Die Ursprünge dieser Software reichen ins Jahr 2012 zurück. Informatik-Studenten der Brown University hatten die Idee, eine Software unter dem Motto "anyone be creative by creating free, simple, creative tools in a browser." zu entwickeln. Sie wollten die Kreativität der Nutzer steigern, indem sie eine Plattform zur Verfügung stellen, mit der sich Kreativität in einem Browser Fenster entfalten lässt. Heute, also 10 Jahre später, ist die Software bereits in der Lage, Font-Systeme, Designsysteme und Analytics-Bibliotheken einzubinden. Eine weitreichende Community liefert zudem eine Reihe an vorgefertigte Module, die zur gemeinsamen Nutzung freigegeben sind. Zudem wird auch ein Whiteboard mitgeliefert, das man für Brainstorming und Ideensammlungen verwenden kann. Figma ist sowohl im kommerziellen Bereich als kostenpflichtige Version mit mehr Funktionalität, als auch im privaten Bereich als kostenlose Version mit Grundfunktionalitäten einsetzbar.

Fazit

Eine breitgefächerte Auswahl an Software und Tools gewährleistet maximale Flexibilität im Arbeitsumfeld. Unter diesem Aspekt wollte ich mit diesem Blogeintrag einen kurzen Einblick in die Welt der Grafikverarbeitung und Design-Systeme geben. Ich bin der Meinung, dass man kreative Gedanken nicht nur schnell als analoge Skizze auf einem Blatt Papier erfassen können sollte. Es sollte auch mit digitalen Werkzeugen möglich sein, schnelle Skizzen gleich digital anzufertigen. Die Erfahrungen mit den vorgestellten Tools waren in der Vergangenheit sehr zufriedenstellend. Die weiteren Entwicklungen und ständigen Verbesserungen der Applikationen sind mit Spannung weiterzuverfolgen und werden in Zukunft noch interessanter. Auch wir bei eggs unimedia sind nah an diesen Themen dran, um weiterhin auf dem neusten Stand zu blieben.