Nahezu alle Web- und mobilen Anwendungen werden immer detailliertere Gesamterlebnisse. Lange vorbei sind die Zeiten, in denen Webseiten eine Folge von verknüpften Webseiten waren. Wohlüberlegte Animationen und Übergänge sowie ein schlüssiges Interaktionsdesign sind die Grundlage für moderne Benutzererfahrungen. Apples Design Director Jony Ive pflegte zu sagen:
Der Design-Prozess dreht sich immer um designen, Prototypen erstellen und das eigentliche Umsetzen in seiner Gesamtheit. Trennt man die Schritte, so leidet das Ergebnis.
Wendet man diese Regel auf modernes App- und Webdesign an, so muss man die Interaktionen auf dem Bildschirm sehen und fühlen können, um zu wissen, ob die Nutzer-Erfahrung stimmt. Ein Prototyp hilft dabei, viel schneller und eher im Entwicklungszyklus dorthin zu kommen.
Was ist aber ein Prototyp überhaupt? Wikipedia sagt zum Thema Prototyp:
Ein Prototyp ist ein frühes Modell, Beispiel oder Veröffentlichung eines Produktes, welches mit dem Zweck erstellt wurde, ein Konzept oder einen Prozess zu testen oder als ein Gegenstand zu agieren, von dem gelernt werden kann.
Ein Prototyp gibt jedem im Team eine geteilte Vision, eine einzige Grundlage, auf welcher viel effektiver die Absicht und Ideen der Designer abgebildet werden können als nur über statische Bilder. Ein gut erstellter Prototyp kann dem gesamten Team genau zeigen, wie das Mouseover-Event eines Designs auszusehen hat, ohne Raum für Interpretation zu lassen.
Es gibt viele Möglichkeiten, einen Prototypen in unterschiedlichen Detailgraden zu erstellen, abhängig vom derzeitigen Fortschritt im Projekt. Hier sind einige Beispiele:
| Prototyp-Art | Was genau? | Eignet sich für |
|---|---|---|
| Papier | Eine grobe Skizze der Screens, die getestet werden sollen. Diese dem Kunden zeigen, und was der Kunde antippt oder klickt, mit der nächsten Skizze tauschen. | Sehr frühe, grobe Validierung eines Konzepts. |
| Wireframe | Diverse Wireframe-Modelle zusammengestöpselt, die mit Transitionen zwischen den Bildschirmen verlinkt sind. Dafür reichen Werkzeuge wie Sketch, Keynote oder Powerpoint. | Frühe Validierung von Informations-Architekturen oder gängige Interaktionspfade in Webseiten oder Apps. |
| Visual Design | Gleicht Wireframes, ist aber besser ausdefiniert. Sobald man näher der eigentlichen Auslieferung eines Designs kommt, desto mehr sehen die Kunden das tatsächliche Design. Dafür gibt es auch diverse Prototyping-Werkzeuge, z. B. InVision. | Konkretes Feedback für finale Design-Entwürfe von Kunden sammeln. |
| Code | Falls Sie programmieren oder mit entsprechenden Werkzeugen wie Framer oder Principal umgehen können, erstellen Sie das eigentliche Ding. | Die richtige App. Falls Sie schnell Prototypen in Code erstellen können, sind diese so nahe wie möglich an der eigentlichen Erfahrung. |
Wie geht man agil beim Prototyping vor?
Das Agile Manifesto wirbt dafür, „working software over comprehensive documentation“ auszuliefern, also funktionierende Software geht vor ausführlicher Dokumentation.
Aber genau wie ein Bild mehr als tausend Worte sagt, so sagt auch ein Prototyp mehr aus als tausend User Stories.
Prototypen helfen dabei, real funktionierende Software viel eher im Entwicklungszyklus zu simulieren. Sie müssen nicht den zeitlichen Aufwand und die Kosten stemmen, bevor Sie die Erfahrung einer Software testen und Feedback einsammeln können. Dies reduziert ebenfalls den Bedarf an Dokumentation.
Sie können Zeit sparen, unnötige Aufwände minimieren und Frustration im Entwicklungsprozess unterbinden, da über mehrere Abteilungen verteilt arbeitende Teams weniger Hin und Her benötigen, um eine konkrete Validierung der Interaktionsabläufe umzusetzen.
Mit einem Prototypen, der echte funktionierende Software simuliert, werden Sie feststellen, dass das restliche Team nicht nur die Designabsichten besser versteht, sondern auch viel engagierter wird. Das Team wird sich über das zu bauende Produkt austauschen und die Begeisterung teilen.
Agile Teams schätzen das Feedback von Kunden so früh wie möglich im Entwicklungsprozess. Das ist einer der weiteren vorteilhaften Aspekte eines Prototypen: Sie sehen Kunden mit Ihrem fertigen Design interagieren – bevor Sie überhaupt nur eine Zeile Code geschrieben haben.
Wohl strukturierte Benutzer-Validierungen mit einem Prototypen sind eine sehr günstige und einfache Methode, selbst wenn Sie keinen Zugriff auf eine Vollzeitressource zur Recherche haben. Atlassian hat beispielsweise ein eigenes Usability Testing-Lab (AtLab) mit wenig Zeit und Aufwand auf die Beine gestellt. Atlassian stellt auch einen simplen Schritt für Schritt-Leitfaden zur Verfügung, wie auch Sie dies bewerkstelligen können.
Wenn Sie einen gut strukturierten Prototypen mit effizient organisiertem Usability-Testing kombinieren, sparen Sie sich unzählige Stunden verschwendeter Energie von Software-Teams. Teams, die im Endeffekt ein Produkt bauen, welches Ihre Kunden gar nicht möchten oder nur eine unzureichende Nutzererfahrung liefert. Es ist viel sinnvoller, diese Dinge eher früher anstatt später zu bemerken, bevor man dem Kunden eine lausige Erfahrung bietet.
Design in Ihren agilen Entwicklungsprozess einbinden
Es gibt einige gängige Herausforderungen, die besonders dann auftreten, wenn ein Projekt in die Designphase eintritt:
- Produkt-Manager befürchten, dass die Designs nicht zum Beginn eines Sprints fertig werden.
- Manche Designs schaffen es vielleicht in einen Sprint, aber ohne Zeit für die Validierung durch Kunden oder Feedback von Software-Teams eingeplant zu haben.
- Entwickler möchten Stories umsetzen, verschwenden aber unglaublich viel Zeit, eine Designdatei aufzufinden. Wo finde ich den Link zum Design? Wo ist der Anhang? Ist das die aktuellste Version?
Jedoch lassen sich viele der Probleme vermeiden, indem man die Designphase direkt in den agilen Workflow einbindet. Hier sind einige Tipps, wie man das tun kann:
- Einen „In Design“-Status in den Workflow integrieren und diesen ins Teamboard integrieren.
- Falls Ihr Team der SCRUM-Methode folgt, sollten Designer allen Planungsmeetings und Standups beiwohnen .
- Viele SCRUM-Teams bei Atlassian haben ein spezifisches „Design Debt“-Projekt/Board oder Komponente innerhalb des Workflows. Dieses dient dazu, zum Produkt gehörende bekannte Design-Bugs zu verfolgen. Das Team wird üblicherweise versuchen, mindestens einen dieser Vorgänge in jedem Sprint anzugehen, damit die User-Erfahrung sich von Sprint zu Sprint bessert.
- Für länger laufende Arbeiten wird die Design-Arbeit einfach eine Story innerhalb eines Epics. Oder ein Subtask eines übergeordneten Vorgangs. Dies hilft Teams dabei, zu verstehen, wo Sie vom Design aufgehalten werden.
- Demos sind wichtig, vor allem zu Anfang eines Projekts, damit Senior-Stakeholder mit den Zielen eines Projektes vertraut werden.
- Es ist ebenfalls förderlich, E2E-Demos zu organisieren, damit ein gemeinsames Verständnis innerhalb des Teams gefestigt wird und Diskussionen und ehrliches Feedback angeregt werden.
Designer mögen es nicht, wegen Links auf Assets genervt zu werden und ständig nach Vorgängen zu suchen und dort ihre aktuellen Designentwürfe anzuhängen. Auf der anderen Seite mögen es Entwickler nicht, die aktuellen Designs und alle wichtigen Details von irgendwoher herunterzuladen, damit sie das Design entsprechend umsetzen können. All das Hin und Her verhindert kreatives Arbeiten. Ein gemeinsamer Ort für die Ablage von Daten ist die Lösung.
Mit Integrationen wie InVision for JIRA lassen sich schnell Prototypen erstellen und direkt in JIRA einbinden und die InVision Prototypen mit Vorgängen in JIRA verknüpfen. Damit steigert sich die Sichtbarkeit und Auffindbarkeit von Interaktions-Designs in JIRA und ermutigt Beteiligte, Kommentare und Feedback zum Prototypen abzugeben – ein essenzieller Bestandteil des agilen Entwicklungsprozesses.
Der Prototyp wird immer aktuell gehalten, wenn der Designer Änderungen vornimmt. Damit wird JIRA zur Single Source Of Truth für Ihr Unternehmen. Das erlaubt dem Team, stets im Bilde zu bleiben und weniger Zeit mit dem Auffinden von Design-Files zu verschwenden.
Prototypen erstellen. Das ist die Antwort.
Egal welche Methode Sie einsetzen, Prototyping ist kein Nice-to-Have mehr. Abteilungsübergreifende Teamarbeit stellt sicher, dass alle mit einem klaren Bild des zu erstellenden Designs in die Produktentwicklung gehen und eine Nutzererfahrung schaffen, die Ihre Kunden lieben werden.
Sobald Sie Prototypen in Ihren Designprozess eingebunden haben, werden Sie ein besseres Gefühl dafür bekommen, ob Sie die Probleme Ihrer Kunden auf angemessene Weise lösen. Sie werden ebenfalls merken, dass dieses Vorgehen konstruktives Feedback von internen Teams und Beteiligten provoziert, da sich alles viel realer als ein statisches Mockup anfühlt. Einen agilen Prototyping-Ansatz zu fahren und über mehrere Teams hinweg zu arbeiten bedeutet, schneller elegantere und kreative Lösungen zu finden.
Haben Sie Fragen zur agilen Entwicklung? Addons für JIRA? Wir sind Ihnen gerne dabei behilflich.
Weitere Fragen?
Dann sind wir als Atlassian Platinum Partner für Sie da. Tragen Sie jetzt alle noch offen gebliebenen Fragen und Wünsche zum Thema der neuen JIRA-Produktfamilie an uns heran. Wir freuen uns darauf, gemeinsam mit Ihnen herauszufinden, wie Sie die Werkzeuge von Atlassian optimal nutzen können.- Hier finden Sie ausführlichere Informationen zu unseren Atlassian-Leistungen.
- Sie haben Interesse an einer Demo von JIRA-Produkten, wollen mehr über das Thema erfahren oder ein individuelles Angebot erhalten? Wenden Sie sich dafür über das Kontaktformular an uns.