Ich bin mir sicher, dass du entweder aus deinen Kursen zum Produktmanagement oder von Kollegen und Weggefährten von den Vorteilen der Erstellung von Grobentwürfen gehört hast. Ich gehe außerdem davon aus, dass du bereits versucht hast, irgendeine Form eines Prozesses zur Erstellung von Grobentwürfen in deinem Produkt einzuführen.
Aber funktioniert dein Prozess gut? Holst du mit der Art und Weise, wie du sie derzeit erstellst, das Beste aus deinen Grobentwürfen heraus? Nun, das hängt wirklich von dem Prozess ab, den du verwendest.
Damit du die Wirksamkeit deiner Erstellung von Grobentwürfen steigern kannst, möchte ich meine Erfahrung mit dir teilen und dir von einem Prozess zur Erstellung von Grobentwürfen erzählen, den ich als den besten überhaupt kennengelernt habe.
Die Erstellung von Grobentwürfen ist ein wesentlicher Bestandteil des UX-Designprozesses
Grobentwürfe sind visuelle Darstellungen auf hoher Ebene deines Produkts, mit denen du veranschaulichen kannst, wie das Produkt aussehen und funktionieren soll. Mithilfe dieser Darstellungen kannst du deine Idee testen und weiterentwickeln, bevor du deine Entwickler bittest, einzusteigen und mit dem Entwicklungsprozess zu beginnen – so sparst du Zeit und Geld.
Mir gefällt die Definition der Erstellung von Grobentwürfen durch die Experten für Nutzererfahrung bei NN/g sehr gut, da sie den entscheidenden Vorteil hervorhebt, den du daraus ziehst.
Schnelle und kostengünstige Methode, um mithilfe von Skizzen und Papier frühzeitig grundlegende Probleme bei der Benutzerfreundlichkeit zu erkennen. Perfekt geeignet für agile und schlanke Prozesse.
Unabhängig davon, für welche Methode zur Erstellung von Grobentwürfen du dich entscheidest (Zeichnungen auf Papier sind völlig in Ordnung!) oder welches Werkzeug für Grobentwürfe du verwenden möchtest (sieh dir dazu unsere Liste der besten Werkzeuge für Grobentwürfe an), würde ich dir empfehlen, diesen Prozess zu befolgen, den ich nach dem Ausprobieren so ziemlich jedes existierenden Prozesses zur Erstellung von Grobentwürfen gefunden habe.
Schritt 1: Stelle sicher, dass du deine Nutzer gut genug kennst
Gutes Design beginnt mit einem Team, das seine Nutzer gut kennt. Denn wer braucht dein Design und das Produkt, das es darstellt, wenn es nicht in der Lage ist, die Bedürfnisse der Menschen, für die es bestimmt ist, angemessen zu erfüllen? Daher ist der wichtigste Schritt, den du vor Beginn der Erstellung deiner Grobentwürfe unternehmen solltest, die Nutzerforschung.
In Wirklichkeit sollte die Nutzerforschung während des gesamten Lebenszyklus deines Prozesses zur Erstellung von Grobentwürfen (und auch danach) fortgesetzt werden. Konzentrieren wir uns jedoch auf die Anfangsphase, in der du versuchst, die Bedürfnisse und den Alltag deiner zukünftigen Kunden zu verstehen.
Hier sind einige der wichtigen Aktivitäten, die ich dir in dieser Phase empfehle:
Sondierende Interviews: Möchtest du wissen, was deine Nutzer wollen? Wie wäre es, sie direkt zu fragen? Du kannst damit beginnen, eine Liste von Fragen zu erstellen, die deinen Nutzern helfen, über die Probleme zu sprechen, mit denen sie konfrontiert sind, und über die Lösungen, die sie zur Bewältigung dieser Probleme verwenden.
Anschließend kannst du über soziale Medien und spezialisierte Plattformen wie Userinterviews oder Respondent potenzielle Nutzer kontaktieren und gewinnen oder sie sogar auf Fachmessen treffen.
Zum Schluss führst du das Interview entweder mit einem Aufnahmegerät (damit du es später analysieren kannst) oder mit einem Interviewpartner durch, der neben dir sitzt und sich Notizen macht.
Hinweis: Idealerweise machst du beides.
Umfragen: Während Interviews eine großartige Quelle für qualitative Daten sind, die dabei helfen, die Gründe hinter den Bedürfnissen und dem Verhalten der Nutzer aufzudecken, liefern dir Umfragen eine Mischung aus qualitativen und quantitativen Daten, sodass du Erkenntnisse mit statistischer Signifikanz überprüfen kannst.
Ich werde hier nicht zu sehr ins Detail gehen, da wir einen vollständigen Leitfaden zu Fragen für Umfragen haben, den du dir ansehen kannst.
Feldstudien: In diesem Fall beobachtest du deine Nutzer in ihrer „natürlichen Umgebung“. Das bedeutet, dass du entweder virtuell oder physisch in der Umgebung anwesend bist, in der deine Zielnutzer die Probleme erleben, die du lösen möchtest.
Angenommen, du entwickelst beispielsweise ein Werkzeug, mit dem sich Videos für soziale Medien einfach bearbeiten lassen. Bei deiner Feldstudie würdest du beobachten, wie ein Influencer in den sozialen Medien ein TikTok-Video aufnimmt, es bearbeitet und auf seinem Kanal hochlädt.
Obwohl Feldstudien relativ schwer zu organisieren sind (nicht alle Nutzer fühlen sich wohl dabei, wenn du ihre täglichen Aktivitäten beobachtest), liefern sie dir den umfassendsten Kontext und die wertvollsten Erkenntnisse über deine Nutzer.
Entdeckungsworkshops mit Stakeholdern: Ja, ein großartiges Design der Nutzererfahrung orientiert sich an den Bedürfnissen der Nutzer, aber wir sollten auch deine wichtigsten Stakeholder nicht vergessen. Obwohl deine Nutzer ebenfalls Stakeholder sind, verwende ich diesen Begriff hier für deine Gründer und die Führungsebene, deine Investoren, alle rechtlichen oder regulatorischen Stellen, mit denen du zusammenarbeiten musst, usw.
Manchmal triffst du Designentscheidungen nicht auf Grundlage der Bedürfnisse deiner Nutzer, sondern berücksichtigst dabei:
- Deine Vision und Strategie: Die Nutzer von Apple lieben Kabel und kabelgebundene Verbindungen, aber die Vision von Apple ist kabellos – deshalb entfernen sie immer mehr Anschlüsse. (Jetzt weißt du es!)
- Dein rechtliches Umfeld: Eine riesige Auswahl an Cookie-Einstellungen ist nicht die benutzerfreundlichste Oberfläche, aber möglicherweise bist du gesetzlich dazu verpflichtet, sie anzuzeigen.
Auch für Intuition gibt es einen Anwendungsfall – obwohl du deine Nutzer gut kennst, könntest du deine eigene Intuition heranziehen, um eine bestimmte Designentscheidung zu treffen.
Da das Konzept und die Arten von Research nun klar sind, wollen wir anhand eines Beispiels veranschaulichen, wie das im wirklichen Leben aussieht.
Have an account? Log In
Beispiel 1: Erstellung eines Werkzeugs zur Erstellung von Drahtmodellen für einen UI-Experten
Stell dir vor, du bist für die Erstellung eines Werkzeugs zur Erstellung von Drahtmodellen (etwas Ähnliches wie Balsamiq) verantwortlich und möchtest genau wissen, wie deine Zielnutzer (in diesem Fall Designteams) es verwenden werden und welche Probleme sie damit lösen möchten.
Um das herauszufinden, können wir einen Fragebogen erstellen, den wir unseren Nutzern während eines Interviews stellen möchten. Folgendes können wir aufnehmen:
Stellen wir uns nun vor, dass wir herausfinden, dass das Feedback größtenteils in Form eines Kommentars zu einem bestimmten Teil des Produkt-Drahtmodells erfolgt und der Produktmanager das Design des Drahtmodells genehmigen muss. Dies sind zwei Erkenntnisse, die sich direkt auf unser Design auswirken werden, da wir einen Workflow und eine Benutzeroberfläche für das Kommentieren und Genehmigen des Drahtmodells entwerfen müssen.
Zusammenfassend lässt sich sagen, dass die Durchführung einer explorativen Recherche der wichtigste Teil deines Prozesses zur Erstellung von Drahtmodellen ist und ich dir nicht empfehlen würde, darauf zu verzichten. Nachdem du nun alle Erkenntnisse zur Hand hast, gehen wir zum nächsten Schritt unseres Prozesses zur Erstellung von Drahtmodellen über.
Schritt 2: Erstelle deine Nutzerabläufe
Bevor du die Bildschirme/Seiten selbst erstellst und deine Komponenten wie Formulare, Karten, Bilder, Schaltflächen usw. darauf platzierst, musst du die Abfolge der Schritte verstehen, die deine Nutzer deiner Vorstellung nach ausführen werden.
Diese Abfolgen werden auch als Nutzerabläufe bezeichnet und stellen alle möglichen Wege dar, die deine Nutzer einschlagen können, um ihre Ziele zu erreichen. Bei diesen Zielen kann es sich entweder um etwas Alltägliches und „Administratives“ handeln, wie etwa die Registrierung oder das Ändern des Passworts, oder um deine Kernfunktionen, beispielsweise das Suchen und Streamen von Musik bei Spotify.
In jedem Fall ist das Erstellen von Nutzerabläufen wichtig, da du dadurch alle Bildschirme/Seiten, die du gestalten möchtest, sowie die jeweils benötigten Inhalte besser visualisieren kannst.
Um die Abläufe besser zu verstehen, möchte ich dir anhand des Werkzeugs für Flussdiagramme Flowmapp einen davon zeigen.
Beispiel 2: Visualisierung eines Nutzerablaufs für ein Webdesign-Werkzeug mit Flowmapp
Nehmen wir an, du entwickelst ein Webdesign-Werkzeug mit Ziehen-und-Ablegen-Funktion wie Webflow. Deine Nutzer sind Webdesigner ohne Programmierkenntnisse und du möchtest die Schritte visualisieren, die sie ausführen werden, um ein Hintergrundbild zu ihrer Webseite hinzuzufügen.
So sieht ein Nutzerablauf für diese Funktion in Flowmapp aus:
Wie wir sehen können, liegt der Schwerpunkt eines Nutzerablaufs eher auf den Aktionen, die der Nutzer ausführt, und auf der Abfolge bzw. dem Ursache-Wirkungs-Zusammenhang zwischen ihnen als auf den Seiten und deren Design.
In diesem Beispiel möchten wir dem Nutzer ermöglichen, ein Bild aus der Galerie auszuwählen oder eines in die Galerie hochzuladen bzw. hinzuzufügen. Außerdem möchten wir, dass der Nutzer eine Vorschau des Bildes anzeigen kann, bevor unser Werkzeug es als Hintergrund der Webseite unseres Nutzers verwendet.
Wenn wir uns den Ablauf hier ansehen, verstehen wir, dass der Nutzer auf derselben Seite bleiben wird – dem Webseiten-Editor – und möglicherweise einen weiteren Bildschirm sieht, auf dem die Bildergalerie in Form eines Einblendfensters angezeigt wird.
Daher gibt es eine Seite und ein Einblendfenster, die mit relevanten Designelementen und Funktionen gestaltet werden müssen.
Da wir nun einen Überblick über die Schritte haben, die Nutzer ausführen, um ihre Ziele in unserem Produkt zu erreichen, können wir endlich mit der eigentlichen Erstellung von Drahtmodellen beginnen.
Schritt 3: Beginne mit einem Drahtmodell mit niedriger Detailtreue
Ja, die Erstellung eines Drahtmodells ist der dritte Schritt in diesem Prozess zur Erstellung von Drahtmodellen. Aber glaub mir: Wenn du die beiden vorherigen Schritte durchführst, wird die Qualität deines Drahtmodells auf ein völlig neues Niveau gehoben, und es lohnt sich definitiv, Zeit dafür aufzuwenden.
Was das Drahtmodell selbst betrifft, empfehle ich Ihnen, mit einem Drahtmodell mit geringer Detailtreue zu beginnen. Ein Drahtmodell mit geringer Detailtreue enthält keine spezifischen Details wie die richtigen Farben und Größen oder andere Designeigenschaften Ihrer Seiten und Bildschirme. Es enthält auch keine echten Bilder und Texte. Stattdessen verwenden Sie für beides Platzhalter.
Und es gibt einen guten Grund dafür, dass ein Drahtmodell mit geringer Detailtreue so gestaltet ist und Sie damit beginnen sollten – Drahtmodelle mit geringer Detailtreue lassen sich schnell erstellen und bearbeiten.
Die Wahrscheinlichkeit ist hoch, dass Sie etwas Wichtiges in Ihrem Design übersehen haben. Wenn Sie Rückmeldungen dazu einholen (wir werden im nächsten Schritt ausführlich darauf eingehen), stellen Sie möglicherweise fest, dass viele Elemente und Abläufe geändert werden müssen.
Wenn Sie ein vollständiges Design erstellt hätten, hätten diese Änderungen mehrere Tage in Anspruch genommen. Mit einem Drahtmodell mit geringer Detailtreue können Sie Ihre Änderungen jedoch vornehmen und Ihr Design innerhalb weniger Stunden oder sogar schneller einer weiteren Rückmeldungsrunde unterziehen.
Nachdem wir Drahtmodelle mit geringer Detailtreue nun so ausführlich gelobt haben, sehen wir uns mithilfe eines beliebten Werkzeugs zur Erstellung von Drahtmodellen – Balsamiq – an, wie sie aussehen.
Beispiel 3: Erstellen eines Website-Drahtmodells
Der Vorteil von Designwerkzeugen, die speziell für die Erstellung von Drahtmodellen entwickelt wurden, insbesondere von Drahtmodellen mit geringer Detailtreue, besteht darin, dass Sie nicht jedes Element von Grund auf zeichnen müssen.
Stattdessen enthalten sie normalerweise eine Vielzahl vorgefertigter grundlegender Benutzeroberflächenelemente (z. B. Bilder, Menüs, Brotkrümelnavigationen, Schaltflächen usw.) sowie Ziehen-und-Ablegen-Steuerelemente, mit denen Sie besonders schnell gestalten können. Hier ist ein Beispiel, das ich mit Balsamiq erstellt habe.
Aufgrund der besonderen Eigenschaften von Drahtmodellen mit geringer Detailtreue sind diese normalerweise in Graustufen gehalten oder enthalten nur wenige Farben und visuelle Designelemente. Stattdessen sehen Sie lediglich das allgemeine Erscheinungsbild der Benutzeroberflächenelemente in Ihrem Design sowie deren Platzierung und Informationsarchitektur.
Wenn Ihr Drahtmodell mit geringer Detailtreue nun fertig ist, ist es Zeit, es Ihrer ersten Überprüfungsrunde zu unterziehen.
Schritt 4: Überarbeiten Sie Ihr Design mit geringer Detailtreue intern
Bevor Sie Zeit und Mühe in die Erstellung Ihres endgültigen Produktdesigns investieren, sollten wir realistischerweise davon ausgehen, dass wir viele Dinge falsch gemacht oder bei der Gestaltung nicht berücksichtigt haben. Beginnen Sie daher damit, unser Drahtmodell mit geringer Detailtreue Ihren Kollegen und Anspruchsgruppen zu zeigen.
Natürlich könnten Sie dieses Design auch Ihren Benutzern zeigen. Angesichts der Schwierigkeit, Benutzer zu finden, die bereit wären, Ihr Design zu überprüfen oder einem Test der Gebrauchstauglichkeit zu unterziehen, empfehle ich Ihnen jedoch, ihre wertvolle Zeit für die Prüfung von Designs mit höherem Detaillierungsgrad zu nutzen und sie nicht damit zu verschwenden, auf Probleme hinzuweisen, die Ihre Kollegen leicht hätten finden können.
Ich empfehle jedoch, Ihre Anspruchsgruppen in dieser Phase einzubeziehen. Zwei der wichtigsten Gründe dafür sind:
- Die „Distanz“ zwischen ihnen und den Teammitgliedern, die das Produkt entwickeln, wird verringert, indem sie bereits in den frühen Phasen einbezogen werden.
- Designprobleme im Zusammenhang mit der strategischen Ausrichtung werden frühzeitig behoben, sodass Sie später Zeit sparen.
Sobald Sie schließlich Rückmeldungen von Ihren Kollegen und Anspruchsgruppen gesammelt haben, können Sie Ihr Drahtmodell mit geringer Detailtreue auf dieser Grundlage überarbeiten, die Änderungen gemeinsam mit ihnen validieren und mit der Erstellung des eigentlichen visuellen Designs für Ihr Produkt fortfahren.
Schritt 5: Erstellen Sie ein Drahtmodell mit hoher Detailtreue und einen klickbaren Prototyp
Da Sie nun eine klare Vorstellung davon haben, wie Ihr Design auf hoher Ebene aussehen wird, können Sie bedenkenlos in die Erstellung der visuellen Bestandteile Ihres Designs investieren und es in einen Zustand versetzen, der Ihrer geplanten Umsetzung möglichst nahekommt.
In dieser Designphase enthält Ihr digitales Drahtmodell:
- Ihr UI-Design: einschließlich der richtigen Farben, Schatten, Typografie und Schriftarten, Abstände usw.
- Ihre visuellen Inhalte: Wenn Sie Bilder, Illustrationen, Videos oder andere grafische Elemente auf Ihren Seiten verwenden möchten, fügen Sie diese nun hinzu.
- Ihre Seitentexte: Damit sind die Texte auf Ihren Benutzeroberflächenelementen, Schaltflächen, Überschriften usw. gemeint.
- Ein Beispiel für Ihre Inhalte: Wenn Ihr Design nutzergenerierte Inhalte oder eigene Inhalte umfasst, sollten Sie auch eine Beispielversion davon hinzufügen. (Zum Beispiel das Design eines Kommentars unter einem Beitrag, der die typische Größe und den typischen Inhalt eines Kommentars hat, den Ihre tatsächlichen Benutzer verfassen würden.)
Das Drahtmodell mit hoher Detailtreue dient nicht nur als wichtigstes Ergebnis für Ihr Entwicklungsteam, das Ihr Produkt auf Grundlage des Designs erstellen wird, sondern kann auch als hervorragendes Werkzeug für Tests der Gebrauchstauglichkeit mit Ihren tatsächlichen Benutzern dienen.
Sie können entweder das Drahtmodell mit hoher Detailtreue selbst für den Test verwenden oder es auf die nächste Ebene bringen, indem Sie Interaktionsdesign hinzufügen und es in einen klickbaren Prototyp umwandeln.
Es ist wirklich leicht, die hier besprochenen Begriffe (Drahtmodelle mit hoher Detailtreue, interaktive Prototypen usw.) zu verwechseln. Deshalb möchte ich sie für Sie klären und Ihnen außerdem einige Beispiele zeigen.
Arten von Drahtmodellen unterscheiden: Darstellungsmodelle vs. Drahtmodelle mit hoher Detailtreue vs. klickbare Prototypen
Diese drei Konzepte ähneln sich sehr, und leider werden sie oft synonym verwendet – was bei Personen, die noch relativ neu im Produkt- und Designbereich sind, für Verwirrung sorgt.
Hier erfahren Sie, was die einzelnen Begriffe bedeuten:
Drahtmodell mit hoher Detailtreue: Darauf sind wir weiter oben bereits eingegangen. Stattdessen möchte ich Ihnen zeigen, wie es aussieht.
Dieses überzeugende Design ist für einen Dienst gedacht, über den Sie private Köche engagieren können, die hochwertige Gerichte für Sie zubereiten. Wie wir sehen können, umfasst dieses Design alles – von den endgültigen Bildern bis hin zu Farben und Positionen. Außerdem enthält es etwas „Lorem ipsum“-Text, der das Testimonial eines Profikochs auf der Seite darstellt.
Darstellungsmodell: Im Gegensatz zu seinem Gegenstück umfasst das Darstellungsmodell nicht nur das endgültige Design, sondern zeigt auch die Umgebung, in der dieses Design erscheint. Generatoren für Produkt-Darstellungsmodelle können dabei helfen, diese kontextbezogenen visuellen Darstellungen zu erstellen. Wenn Sie beispielsweise einen Briefkopf entwerfen, würde ein Darstellungsmodell ein Blatt Papier auf einem Tisch zeigen, auf dem Ihr Design zu sehen ist.
Im Fall einer mobilen App würde Ihr Darstellungsmodell die Silhouette eines iPhones oder eines Android-Geräts zeigen, auf dessen Bildschirm Ihr Design erscheint.
Prototyp: Der Prototyp sieht wie ein Drahtmodell mit hoher Detailtreue aus, versucht aber zusätzlich zum endgültigen Erscheinungsbild auch, die Funktionalität des Produkts nachzubilden.
Mit klickbaren Prototypen oder 3D-Prototyping-Tools können Sie grundlegende Interaktionen wie Scrollen, Animationen, das Klicken auf Schaltflächen, die Navigation innerhalb der App usw. hinzufügen.
Indem Prototypen die Interaktivität Ihres Produkts nachbilden, können Sie testen, wie Ihre Funktionen funktionieren sollen, bevor Sie sie entwickeln.
Darüber hinaus können Sie Nutzertests durchführen, indem Sie Ihren Nutzern Ihre Prototypen mit hoher Detailtreue geben und beobachten, wie sie mit Ihrem Produkt interagieren, ihre Probleme lösen oder versuchen, sich in Ihrem Design zurechtzufinden.
Die Erstellung von Drahtmodellen ist ein Spiel aus Tests und Iterationen
Die iterative Natur von Drahtmodellen erspart Ihnen großen Aufwand bei der Korrektur Ihrer Fehler. Außerdem stellen Sie durch einen solchen Prozess zur Erstellung von Drahtmodellen sicher, dass Ihre Nutzer ein Produkt erhalten, das ihre Bedürfnisse bestmöglich erfüllt.
Verwenden Sie in Ihrem Unternehmen einen anderen Prozess zur Erstellung von Drahtmodellen? Ich bin neugierig und freue mich auf Ihre Erfahrungen. Hinterlassen Sie unten einen Kommentar und erzählen Sie uns, wie Sie dabei vorgehen!
Ich hoffe, dieser Leitfaden hat Ihnen gefallen und war für Sie nützlich. Sehen Sie sich auch die anderen Leitfäden zum Produktmanagement an, die von einigen der besten Fachleute auf diesem Gebiet verfasst wurden, zum Beispiel:
- Der Unterschied zwischen Produktvision und Produktstrategie von Kerstin Exner.
- Die 3 Ps des Produkts von Benoit des Ligneris.
- Produktanforderungsdokumente von Sarah Tolle.
Schließlich können Sie unseren Newsletter abonnieren, und wir senden Ihnen ebenfalls überzeugende Inhalte direkt in Ihren Posteingang.