Design-Phase: Gestaltung und Architektur von Design Direction bis zur finalen Ausarbeitung
Design-Phase
In der Phase der Gestaltung werden basierend auf den strategischen Vorgaben und gegebenenfalls dem resultierenden Creative Brief die gestalterische und konzeptionelle Ausrichtung sowie die Informationsarchitektur festgelegt. Das Ergebnis dieser Phase kann, abhängig vom gewählten Vorgehensmodell, entweder eine umfassende Design- und Konzeptdokumentation sein, die als Vorlage für die Produktion dient, oder ein funktionaler Prototyp in fertigem Zustand.
Diese Phase gliedert sich in zwei Teile: Zuerst wird die Gestaltungsrichtung, die Design Direction, entwickelt und dem Kunden zur Freigabe präsentiert. Im zweiten Schritt erfolgt eine detaillierte Ausarbeitung und Dokumentation des Designs.
Agile Designsprints
Die Unterteilung der Design-Phase in Design Direction und Detailed Design bietet uns vor allem strategische Sicherheit und markiert mit der Design-Direction-Präsentation einen bedeutenden Meilenstein in der Projektzusammenarbeit mit dem Kunden. Die Strukturierung der gesamten Designaufgaben in Design-Sprints hilft auch bei der Bewältigung hochkomplexer Aufgaben. Dabei stehen Design-Sprints nicht im Widerspruch zu Design Direction und Detailed Design.
Bsp. für Designsprints:
• MONTAG - Planung und erste Lösungsansätze für das vorliegende Designproblem ー DIENSTAG - Skizzen, Layout
• MITTWOCH: Skizzen-Layout, Entscheidung für die Richtung
• DONNERSTAG - Layout, falls erforderlich Prototyp 一 DONNERSTAG NACHMITTAG oder FREITAG VORMITTAG - Testing und / oder Review mit externen Experten; Auswertung im Team - FREITAG - Feedback einarbeiten, Retrospektive
Am Ende eines jeden Design-Sprints findet die Retrospektive statt, ein etwa 1-1,5-stündiges Meeting, in dem das Team den abgeschlossenen Sprint bespricht und festhält, was am Vorgehen verbessert werden kann. Während im Testing und Review darauf geachtet wird, WAS das Team macht, liegt der Fokus in der Retrospektive darauf, WIE es dabei vorgeht. In der Retrospektive werden drei Fragen gestellt, die im Team diskutiert werden:
Was ist gut gelaufen in diesem Sprint? Was ist nicht gut gelaufen? Was sollten wir anders machen, damit es besser läuft?
Nutzererlebnis
Beim Kick-off-Workshop werden alle maßgeblichen Stakeholder eingeladen, die einen bedeutenden Einfluss auf das Projekt haben. Vor dem Workshop erhalten die Teilnehmer eine Agenda und sollten sich im Voraus vorbereiten. Die Bezeichnungen für Berufe wie Informationsarchitekten, Interaktionsdesigner, User Experience Designer und Service-Designer können verwirrend sein. Genau genommen bezieht sich Informationsarchitektur auf die Struktur und Hierarchie von Inhalten, während Interaction Design Aspekte der Benutzerinteraktion wie Navigation oder das Zugangskonzept einer Website betrifft. In den frühen Jahren dieser Disziplin wurde allgemein von Informationsarchitektur gesprochen, um die funktionale und inhaltliche Konzeption interaktiver Systeme zu beschreiben. In den letzten Jahren hat sich der übergeordnete Begriff des User Experience Design etabliert.
Service Design hingegen bezieht sich auf die Konzeption komplexer Dienstleistungen über verschiedene Touchpoints hinweg. Bei den im Folgenden vorgestellten Methoden ist es wichtig, die Zielsetzung und mögliche Muster - oder bewusste Abweichungen davon - im Hinterkopf zu behalten. Wireframes können unerfahrene Informationsarchitekten dazu verleiten, einfach Kästchen und Pfeile zu verschieben. Im schlimmsten Fall könnten sogar inhaltliche Elemente erfunden werden, um eine Lücke zu füllen, ohne eine strategische Begründung dafür zu haben. Alles, was wir tun, sollte entweder in der Markenidentität, im Geschäftsmodell oder im Nutzerverhalten verwurzelt sein.
Wireframes
Wireframes sind vereinfachte Skizzen für Anwendungen, die auf Bildschirmen dargestellt werden. Sie zeigen die Struktur, den Inhalt und die Funktionalität einer Seite oder eines Templates sowie die hierarchische Beziehung zwischen Modulen und Elementen. Wireframes können in unterschiedlichem Maße komplex sein und entweder skizziert oder mit spezieller Software erstellt werden. In der frühen Konzeptphase bevorzugen wir es, grobe Skizzen auf Papier im A3-Format anzufertigen. Die Verwendung von Post-its, die auf die Skizzen geklebt werden, ermöglicht es, mit verschiedenen Content-Modulen zu experimentieren - sozusagen ein sehr frühes Prototyping. Für Smartphone- und Tablet-Anwendungen sind vorgefertigte Schablonen erhältlich, da viele Interface-Elemente standardisiert sind, was es ermöglicht, auf Papier direkt die richtigen Größenverhältnisse zu verwenden.
Die Gestaltung von Header, Logo und Navigation in screenbasierten Anwendungen hängt vom Bildschirmformat, der Interaktionsform und dem Nutzungskontext der Anwendung ab. Auf den meisten Websites dient das Logo im Header (im oberen Bereich der Seite) der schnellen Identifikation beim flüchtigen Durchsurfen oder beim Durchklicken von offenen Browser-Tabs. In Software-Anwendungen oder mobilen Apps ist dies nicht notwendig, da der Nutzer die Anwendung bewusst öffnet. Die Identifikation erfolgt hier über das App-Icon und einen Start- oder Lade-Screen. Ein wichtiger Schritt im Designprozess ist die Festlegung des Navigationsprinzips. Für Websites und mobile Apps haben sich hier Standardbedienungen etabliert, wie zum Beispiel das »Hamburger«-Menü (durch drei Striche gekennzeichnet und öffnet das Hauptmenü) oder die Off-Canvas-Navigation (die Navigation ist am Bildschirmrand verborgen und kann durch Klick eingeblendet werden). Diese funktionieren gut, sind aber nicht unbedingt differenzierend. Das Ziel der Gestaltung geht über die einfache Auffindbarkeit von Inhalten hinaus. Farbe, Form, Animation und Interaktivität verstärken das Markenerlebnis. Die markenstrategische Ausrichtung hat einen entscheidenden Einfluss auf das Aussehen und die Funktionalität der Navigation.
Für die Erkundung neuer Navigationsmöglichkeiten ist Teamarbeit entscheidend. Unsere Erfahrung zeigt, dass es wichtig ist, dass UX Designer, Visual Designer und Webentwickler gemeinsam daran arbeiten und innovative (und idealerweise markenprägende) Navigationsprinzipien direkt im Code testen, da das Verhalten der Website oder Anwendung beim Wechseln von Inhalten entscheidend zur Akzeptanz neuer, nicht standardisierter Navigation beiträgt.
Atomic Design
Wireflows sind hilfreich, um die vielfältigen möglichen Zustände komplexer und dynamischer Webanwendungen zu visualisieren. Bei solchen Projekten ist es ratsam, dass Designer und Entwickler eng zusammenarbeiten und gemeinsam den Entwurf von der kleinsten Einheit, dem Element oder Modul, aus entwickeln. Anders ausgedrückt, beginnt man mit den Atomen einer Seite. In seinem Atomic-Design-Modell vergleicht Brad Frost die Bestandteile eines bildschirmbasierten Designsystems mit den chemischen Elementen. Demnach gibt es:
Atome - die funktionalen Bausteine einer Benutzeroberfläche. Diese beinhalten einfache HTML-Elemente wie Labels, Eingabefelder, Buttons usw. Atome können nicht weiter zerlegt werden, ohne ihre Funktion zu verlieren. Atome entsprechen den Elementen in einem klassischen Wireframe.
Moleküle - sie verbinden in der Regel mehrere Atome zu einer Einheit (ähnlich den zuvor genannten Modulen). So kann beispielsweise aus einem Label, einem Eingabefeld und einem Button ein Suchformular erstellt werden.
Organismen - sind komplexere UI-Komponenten, die aus Gruppen von Molekülen, Atomen oder anderen Organismen bestehen. Organismen bilden meist klar definierte Bereiche im Interface, wie zum Beispiel den Seiten-Header, der sowohl die Hauptnavigation (ein Molekül/Modul) als auch das zuvor genannte Suchformular (ein weiteres Molekül/Modul) umfasst.
Templates - helfen nun dabei, die Atome, Moleküle und Organismen in Layouts zu platzieren.
Wie man den Beschreibungen entnehmen kann, unterscheidet sich dieser Ansatz nicht stark von dem weiter vorne dargestellten Prinzip der Aufteilung in Elemente, Module und Templates. Allerdings ist er konsequenter aus der technischen Entwicklungsperspektive gedacht, da den Atomen reale HTML-Elemente zugrunde liegen. Atomic Design trägt so dazu bei, eine gemeinsame Sprache zwischen Designern und Entwicklern zu finden. Tools wie Pattern Lab unterstützen außerdem bei der Dokumentation der definierten Bausteine.
Designsprints
Detailed Design bietet uns vor allem strategische Sicherheit und markiert mit der Design-Direction-Präsentation einen bedeutenden Meilenstein in der Projektzusammenarbeit mit dem Kunden. Die Strukturierung der gesamten Designaufgaben in Design-Sprints hilft auch bei der Bewältigung hochkomplexer Aufgaben. Dabei stehen Design-Sprints nicht im Widerspruch zu Design Direction und Detailed Design.
Bsp. für Designsprints:
MONTAG - Planung und erste Lösungsansätze für das vorliegende Designproblem ー DIENSTAG - Skizzen, Layout
MITTWOCH: Skizzen-Layout, Entscheidung für die Richtung
DONNERSTAG - Layout, falls erforderlich Prototyp 一 DONNERSTAG NACHMITTAG oder FREITAG VORMITTAG - Testing und / oder Review mit externen Experten; Auswertung im Team - FREITAG - Feedback einarbeiten, Retrospektive
Am Ende eines jeden Design-Sprints findet die Retrospektive statt, ein etwa 1-1,5-stündiges Meeting, in dem das Team den abgeschlossenen Sprint bespricht und festhält, was am Vorgehen verbessert werden kann. Während im Testing und Review darauf geachtet wird, WAS das Team macht, liegt der Fokus in der Retrospektive darauf, WIE es dabei vorgeht. In der Retrospektive werden drei Fragen gestellt, die im Team diskutiert werden:
Was ist gut gelaufen in diesem Sprint? Was ist nicht gut gelaufen? Was sollten wir anders machen, damit es besser läuft?
Komposition einer Seite
Das Look & Feel nimmt konkrete Formen an, wenn das Layout der ersten Seite erstellt wird, zunächst basierend auf dem Wireframe im Seitenraster. Zu diesem Zeitpunkt ist die Informationsarchitektur noch nicht endgültig festgelegt, sodass der Visual Designer experimentieren und Module sowie Elemente innerhalb eines bestimmten Rahmens verschieben und in Zusammenarbeit mit dem UX Designer auch neu priorisieren kann. Aspekte des Layouts, wie Leserichtung, Proportionen und Anordnung der Module, können erwartungsgemäß gestaltet werden - aber es ist auch möglich, bewusst von diesen Erwartungen abzuweichen. In einigen Fällen ist es sinnvoll, ästhetischen Überlegungen Vorrang vor bekannten Usability-Prinzipien zu geben.
Websites, die 1:1 nach Wireframes gestaltet wurden, wirken oft mechanisch und skizzenhaft und sind visuell nicht stimmig. In der Regel werden Wireframes nach dem ersten visuellen Prozess noch angepasst. Es ist entscheidend, dass dem Visual Designer die strategischen Ziele bekannt sind. Die Übertragung der Zielmatrix auf einzelne zentrale Vorlagen kann dabei helfen. Nur wenn der Visual Designer sich an den Projektzielen orientiert, kann er seine Gestaltungsideen dem Team und dem Kunden überzeugend präsentieren.
User-Experience-testing
Es werden qualitative Methoden eingesetzt, um beim User-Experience Testing die gesamte Bandbreite der Erfahrungen zu erfassen, die ein Nutzer während der Interaktion mit einer digitalen Anwendung erlebt. Auf diese Weise entsteht ein umfassendes Bild, das alle wesentlichen Aspekte der Nutzererfahrung sowie des Markenerlebnisses berücksichtigt. Dabei liegt der Fokus nicht nur auf der effektiven und effizienten Nutzung des digitalen Produkts oder Dienstes.
Es werden auch Faktoren wie Emotionen, der Spaß bei der Anwendung und das Vertrauen in die Marke berücksichtigt.