Das Niveau der technischen Kenntnisse, die zum Lesen des Artikels erforderlich sind: ⭐⭐⭐⭐⭐ (niedrig)

Unabhängig davon, ob Sie Ihre ersten Schritte in der Welt der IT machen oder ob sie zu Ihrem Alltag gehört, ist eine enge Zusammenarbeit zwischen dem Kunden und dem Entwicklungsteam der Grundstein für ein erfolgreiches Ergebnis. Und ein besseres Engagement und eine bessere Zusammenarbeit werden durch das Verständnis der Prozesse gefördert.

Obwohl die UI/UX-Entwicklung oft als der „lustige“ Teil und Nachtisch eines IT-Projekts angesehen wird, lohnt es sich, sich mit dem detaillierten Designprozess vertraut zu machen. Denn so können wichtige Fragen zur gewünschten Funktionalität frühzeitig identifiziert und geklärt werden, noch bevor mit der Programmieren begonnen wird, was sowohl Zeit als auch Budget spart.

Obwohl jedes Projekt seinen eigenen Charakter und seine eigenen Merkmale hat,werden die in diesem Artikel zusammengefassten Informationen einen Einblick in den Designprozess, seine Phasen und die wichtigsten Stichworte geben.

Was ist UI/UX-Design und warum ist es notwendig?

Das Hauptziel des UX/UI-Designs ist es, ein erfolgreiches Benutzererlebnis für eine Weblösung oder eine mobile Anwendung zu schaffen, das klar, logisch und visuell ansprechend ist und den Benutzer mühelos durch alle Schritte führt, die er unternehmen muss. Eine gut gestaltete UX und UI vermittelt den Eindruck eines vertrauenswürdigen, authentischen und hochwertigen digitalen Produkts, das Ihnen hilft, Ihre Geschäftsziele leichter zu erreichen.

UX (User Experience) und UI (User Interface) sind die ersten Begriffe, mit denen man sich vertraut machen sollte, wenn ein Webdesign-Projekt in Angriff genommen wird. UX-Design konzentriert sich auf die Interaktion des Benutzers mit einem System, einer Website oder einer Anwendung und zielt darauf ab, die Lösung einfach, logisch und benutzerfreundlich zu gestalten. Das UI-Design ist für den visuellen Teil der Lösung, ihre Übereinstimmung mit der Marke und den aktuellen Trends verantwortlich.

Schritte eines Webdesign-Projekts

Der Prozess des Webdesigns kann in sechs Hauptschritte unterteilt werden. Der Umfang und die Reihenfolge der Schritte können je nach Projekt und dessen Anforderungen variieren.

1. Projektdefinition und -planung
2. Recherche und Analyse
3. Technische Gestaltung (Wireframing)
4. Grafische visuelle Gestaltung
5. Usability-Test
6. Qualitätskontrolle (auch nach Fertigstellung)

Projektdefinition und -planung

Ein Projekt zu definieren und zu planen und wiederum zu planen und zu definieren, ist wie die Vorbereitung eines gesunden Bodens, bevor man mit der Gestaltung beginnt. Die geleistete Vorarbeit wird dazu beitragen, dass das Projekt erfolgreich zu Ende geführt werden kann.

• Entwicklungskosten: Der Kostenvoranschlag für die Entwicklung eines UI/UX-Designs basiert auf den Anforderungen des Kunden, die in einer technischen Spezifikation oder einem Arbeitsauftrag beschrieben oder in einem Meeting besprochen werden können. Das Ergebnis ist ein mit dem Kunden abgestimmter Kostenvoranschlag. Beispiel eines Kostenvoranschlags.
• Entwicklungsaufwand (Umfang): Zusammen mit dem Kostenvoranschlag wird der Arbeitsaufwand für das Projekt festgelegt. Unter Berücksichtigung der Kosten und der durchzuführenden Arbeiten werden die Projektaktivitäten, die zu erbringenden Leistungen und ein genauer Zeitplan festgelegt.
• Projektziele, Rollen und Verantwortlichkeiten: Zu Beginn des Projekts werden die Projektziele, das gewünschte Endergebnis sowie die Rollen und Verantwortlichkeiten vereinbart. Verschiedene Management-Tools wie JIRA, Confluence und andere vereinbarte Tools werden verwendet, um die getroffenen Entscheidungen und die auszuführenden Aufgaben festzuhalten.

Recherche und Analyse

Die Recherche- und Analysephase ist notwendig, um die geschäftlichen Anforderungen des Projekts genau zu verstehen, damit das Designteam geeignete Lösungen vorschlagen kann.

• Benutzer- und Kundeninterviews: Zu Beginn des Projekts werden Interviews mit bestehenden und/oder potenziellen Benutzern der Lösung/des Dienstes/des Produkts geführt. Gemeinsam mit dem Kunden wird die Zielgruppe der Lösung definiert und es werden primäre und sekundäre Nutzungsszenarien ermittelt.
• Recherche und Analyse bestehender (und konkurrierender) Lösungen: Prüfung bestehender Lösungen (falls vorhanden), Recherche über Wettbewerber, gute und schlechte Beispiele aus der Branche.
• Datenanalyse anhand von Google analytics/Hotjar und/oder anderen Tools/Daten: Datenanalysen werden durchgeführt, sofern verfügbar. Wenn ein Projekt weit im Voraus geplant wird, empfiehlt es sich bei einer bestehenden Lösung, die Analysetools mindestens 3 Monate vor der Designphase zu implementieren, damit der gesammelte Datensatz groß genug ist, um objektive Schlussfolgerungen zu ziehen.

Technische Gestaltung (Wireframes) und Datenstruktur

Die technische Gestaltung (Wireframes) ist ein wesentlicher Schritt im UI/UX-Design. Es umfasst die schematische Visualisierung der Datenstruktur, der Inhaltsblöcke und ihres Layouts einer digitalen Lösung.

• Lösungsinhalt und Sitemap: Die Sitemap enthält Informationen über alle internen Seiten/Bildschirme und die Struktur der jeweiligen Lösung. Visuell wird die Sitemap als Baumdiagramm dargestellt, das die hierarchische Struktur zeigt.
• Technische Entwurfsskizzen: Während des Entwurfsprozesses werden die funktionalen Schnittstellenelemente und -blöcke, die in der endgültigen Lösung benötigt werden, unter Berücksichtigung der Projektanforderungen und der Anmerkungen des Kunden festgelegt.

Technische Entwurfsskizzen (Wireframes) können unterschiedliche Reifegrade haben, Beispiel:

Grafische Gestaltung

Sobald ein klares Verständnis der Funktionalität, der Struktur und des Inhalts der Lösung vorhanden ist, beginnt die Arbeit an der visuellen Gestaltung. Bei der grafischen Gestaltung (UI) wird die in den technischen Entwurfsskizzen definierte Funktionalität visuell dargestellt.

• Identität der Lösung: während des UI-Designprozesses werden das Markenbuch des Kunden, die Corporate Identity und andere Richtlinien für die gewünschte visuelle Darstellung und das Endergebnis berücksichtigt.
• Designskizzen (visuelle Skizzen): Durch die Auswahl geeigneter Werkzeuge – Schriftarten, Farben, Symbole, Illustrationen, Animationen – werden Designskizzen erstellt, die unter Berücksichtigung der in den vorangegangenen Schritten gewonnenen Informationen die endgültige visuelle Lösung des Systems darstellen. Während der grafischen Gestaltung (UI) wird die in den technischen Designskizzen definierte Funktionalität durch die Auswahl geeigneter Werkzeuge – Schriftarten, Farben, Symbole, Illustrationen – visuell dargestellt. Ein Beispiel für eine geeignete Animation wird ausgewählt.
• Prototyp: Der Prototyp bietet Interaktivität und einen einfachen Wechsel zwischen verschiedenen Ansichten und Formen, so dass Benutzer eine Erfahrung machen, die der fertigen Lösung so nahe wie möglich kommt. Es ist wichtig, dass sich Design-Prototypen auf den gleichen Geräten angesehen werden können, auf denen die Lösung verwendet werden soll. So kann man ein realistisches Bild davon machen, wie das System funktionieren wird, zum Beispiel in einer adaptiven (responsiven) oder einer App-Version.

Beispiel:

Usability-Test

Die Usability-Tests zielen darauf ab, die Benutzererfahrung und die Meinung über die UI/UX-Designlösung und ihre Struktur zu analysieren sowie das Verständnis für die Lesbarkeit der Informationen und der verwendeten Begriffe zu testen.

• Nutzungsszenarien und Testteams: Vor dem Usability-Test werden Nutzungsszenarien (allgemeine Aktionen in der Lösung) und Testaufgaben definiert sowie Tester entsprechend der Zielgruppe der Lösung hinzugezogen.
• Testen: Mit geeigneten Testwerkzeugen werden Tests (Einzeltests, Fokusgruppen usw.) durchgeführt und die Testergebnisse festgehalten.
• Analyse der Ergebnisse: Die bei den Usability-Tests gesammelten Daten werden erfasst und analysiert. Auf der Grundlage der Ergebnisse der Datenanalyse werden Vorschläge und Anpassungen vorgenommen.

Qualitätskontrolle

Die Gestaltung muss auch in den späteren Phasen des Projekts und bei der Entwicklung der Lösung bedacht werden, damit sie nicht nur im Entwurf gut aussieht.

• Zusammenarbeit mit dem Softwareentwicklungsteam: Das Ergebnis des UX/UI-Designs wird mit dem Softwareentwicklungsteam besprochen und die Arbeitsdateien werden übergeben. Während des Entwicklungsprozesses beantwortet das Designteam Fragen der Entwickler und überprüft, ob das Ergebnis mit dem Design übereinstimmt.
• Usability- und Design-Audit: Nach einer gewissen Zeit (1–2 Jahre), in der die Lösung in der Praxis verwendet wurde, ist es ratsam, ein Usability-Audit durchzuführen, um mit den Benutzern zu sprechen – wie bequem ist es, die Software zu verwenden, ob es Fragen oder Schwierigkeiten gibt. Anhand dieses Feedbacks können Verbesserungen vorgenommen werden.

Häufig gestellte Fragen

1. Kann der Programmierer das Design nicht selbst zusammenstellen (mein System ist nicht visuell, nur Tabellen)?
2. Was wird von mir (dem Kunden) benötigt?
3. Ob zusätzliche Kosten für den Designentwurf anfallen können?
4. Wie lange dauert es, ein Design zu entwerfen?
5. Kann man gleichzeitig programmieren und das Design entwerfen?
6. Womit ist ein Designer (einzigartiges Design) besser als ein Designsystem, ein UI-Kit?
7. Kann ich mit meinem eigenen Design/Designer kommen?
8. Was sollte bei der Auswahl eines Designteams beachtet werden?