Content Konzeption
High-Fi Mockup
Erstellung der relevanten Contentpages // App Screens als ausgearbeitete Design-Mockups. Zusätzlich mit Beigelung der verwendeten Contentelemente und unter Verwendung von echtem oder realistischem Inhalt für eine belastbare inhaltliche und formale Beschreibung von Seiten für die technische Konzeption bzw. als Contentpflegevorlagen.
Beschreibung der Methode
Worum geht es?
Unter “Content Konzepte” verstehen wir visuelle Darstellungen von beispielhaften Contentseiten des geplanten Projekts (Webportal oder App). Dabei wird mit verschiedenen grafischen Mitteln der Inhalt und die Funktionsweise der zu erarbeitenden Contentpage dargestellt und mit dem Kunden und dem Projektteam abgestimmt.
Die Ausbaustufe “High-Fi” ist die in Projekten aufwändigste aber auch überzeugendste Methode um dem Kunden einen Eindruck für das geplante Projektergebnis zu vermitteln. Hier werden vollständige Design Mockups in einem oder mehreren MediaQueries erstellt und mit echtem oder realistischem Bild- und Textinhalt bestückt. Das Ergebnis sind realistische Designs, die auch hier in der Dokumentation mit Benennung der vorgesehenen Module und einer inhaltlichen Beschreibung des einzupflegenden Content versehen werden sollten.
Worin liegt der Nutzen für das Projekt?
Das Ziel dieser Content Konzepte kann unterschiedlich sein, auch je nach dem ob diese schon in der Visionsphase zu Beginn erstellt werden (Klassisches Grundkonzept per Wireframing z.B. zur Identifizierung von sinnvollen Seiteninhalten) oder nach Entwicklung der Contentmodule zum Ende der Umsetzungsphase bzw. Beginn der Contentpflegephase unterstützend (Contentpflegevorlagen).
Da vollausgestaltete Design Mockups aufwändiger als Wireframes sind, empfehlen sich diese eher bei ausgewählten Schlüsselsituationen im Projekt, z.B. zur Freigabe eines Designkonzepts oder eben im Pitch oder wenn das Kreationsbudget (und der verfügbare Inhalt) es erlauben, den anfallenden Arbeitsaufwand (im Durchschnitt 1PT pro uniquem Mockup) zu betreiben.
Achtung, die Ausbaustufe “High-Fi Mockups” ist immer sinnvoll um eine Designidee überzeugend zu präsentieren oder um konkrete überzeugende User-Tests durchzuführen, also in Projektsituationen wo eine Abstrahierung nicht sinnvoll ist. Mockups sollten dabei immer mit realistischem Inhalt aufgebaut sein (also auch realistische Texte).
Gibt es Abhängigkeiten?
Idealerweise werden je Seitentyp, der zu konzipieren ist, der Inhalt mit dem Kunden abgestimmt und dieser liefert die verfügbaren oder gewünschten Inhalte in grober Form vor. Alternativ kann vor allem in Projektfrühphasen oder in Pitchsituationen mit vorhandenen, verfügbaren Inhalten gearbeitet werden, diese müssen dann auch nicht immer explizit die des Kunden sein.
Es bedarf einer grundlegenden Design-Herleitung und die Verwendung des ggf. gegebenen Corporate Design Guides. Auch ist es sinnvoll, eine abgestimmte Informationsarchitektur zu haben (oder die bisherige zu verwenden) und die Hauptanforderungen und Zielgruppeneinblicke mit in die Entwicklung von Seitenkonzepten einfließen zu lassen.
Zielbeschreibung
Was soll an Erkenntnis erarbeitet werden?
in der Ausbaustufe “High-Fi” wird in einer ausgearbeiteten Feinlayout Form gearbeitet, um ein realistisches kreatives und ausdesigntes Bild des angestrebten Produkts zu visualisieren. Dabei wird der Augenmerk auf ein überzeugendes visuelles Design gelegt – mit realistischem Inhalt.
Ziel ist es, die Design-Idee des Produkts schon vor der technischen Umsetzung hochwertig darzustellen um nicht nur Stakeholder damit zu überzeugen, sondern auch diese im reellen Einsatz mit dem zu entwickelnden Design System prüfen zu können. Dabei muß auch abgewogen werden, inwieweit Mockups optisch überzeugen aber auch technisch umsetzbar sein müssen.
Typischerweise wird hier immer der Desktop-MediaQuery genutzt (aus Kundensicht besser bewertbar), es kann aber auch durchaus Mobile-first gearbeitet werden. Eine Content Konzeption über mehrere Mediaqueries hinweg ist möglich und ggf sinnvoll, aber auch aufwändiger.
Vorvisualisierung der gestalterischen Grundidee als auch ihrer Durchdeklinierung durch die Seitenbereiche und Bediensituationen hinweg. → Gefällt das Design, stützt es den Inhalt und die Conversionziele, ohne konträr zum Atomic Design Prinzip zu sein?
Kreative Klärung der für das Projekt sinnvollen Inhalte und Funktionen auf schon sehr reifer Designbasis und wie Design und Inhalt zusammenspielen → sind Inhalte vorhanden, wo fehlen die, die wichtig sind und woher können diese kommen? Trägt das Designkonzept diese Inhalte?
Definition der auch technischen Funktionsweisen und Anforderungen an die entwickelten Seitenkomponenten (auch Pflegemechanik, Komplexitäten, Inhalte) → wie werden Module im CMS gepflegt? Wo redaktionell, wo automatisiert, wo kommen Schnittstellen zum Einsatz? Wie verhalten sich Bilder und andere Medien?
Klärung ob alle identifizierten Seitenkomponenten sinnvoll sind oder ob manche für einen schlanken MVP weggelassen werden können oder noch fehlen → werden alle gewünschten Features und Module wirklich gebraucht? Gibt es Einsparungspotenzial? Wie oft werden komplexe Unique Module wirklich gebraucht und lohnt sich der Entwicklungsaufwand oder kann auf Standards zurückgegriffen werden?
Zur Erstellung sinnvoller und didaktisch gut funktionierender (und convertierender) Contentpages als Contentpflegevorlage und unter Verwendung der im Projekt vorgesehenen Contentelemente (Pflegevorlagen), auch zur Vorgabe für die Entwicklung von Pflegecontent und -assets. → Support der Contentpfleger bei der Auswahl der richtigen Module für den zu pflegenden Inhalt, sinnvolle Strukturierung in Sections, Einbettung von Cross- und UpContents
Wofür ist dies wichtig?
Vorgehensweise
Welche Vorarbeiten sind notwendig?
Idealerweise ist die Informationsarchitektur in einer ersten validen Form ausgearbeitet und kann als “Spielplan” für die Inhaltsentwicklung genutzt werden. Auch sind die Zielgruppen bekannt und es wurde auch schon über Bestandsinhalte, neue Inhalte und die Möglichkeiten hinsichtlich von Medienformaten gesprochen.
Auch sind anzubindende externe Inhalte oder Datenschnittstellen zumindest bekannt und können berücksichtigt werden.
Zusätzlich sind realistische Inhalte wie Texte und Bildmaterialien verfügbar – entweder direkt vom Kunden oder beispielhaft/vorschlagend aus den einschlägigen Stockbibliotheken.
Ein Einblick in die gegebenen und geplanten Inhalte ist vorhanden und kann auch mit den Standard-Modulen großteils abgeglichen werden. Ein Scope für Unique neue Module ist grob machbar und im MVP Rahmen abbildbar.
Für die Ausbaustufe “High-Fi” kann ggenauso wie bei “Mid-Fi” auf die Modul Standards zurückgegriffen werden, Unique neue Module wie auch Globals müssen auf Basis des gegebenen Corporate Designs und der angedachten Navigationsstruktur vorschlagend ausgearbeitet werden. Dies ist auch hier sinnvoll, da diese sowieso hochgradig individuell sind und sich aus Informationsarchitektur bzw. Anforderungen neu ergeben.
Inspiration aus anderen Projekten ist hier ausdrücklich erwünscht.
Wie wird der Inhalt erarbeitet?
High-Fi Mockups mit realistischem/echten Textelementen und einem Vorschlag zur neuen Anwendung des Corporate Design. zusätzlich zum inhaltlichen Eindruck wird auch ein klarer Gestaltungsvorschlag vermittelt, der idealerweise auf dem Atomic Design Prinzip beruht und die gegebenen Rahmenbedingungen einfängt und berücksichtigt.
Im Ticketshaping kann auch hier direkt auf die verwendeten Contentmodule, Headlines und Sections eingegangen werden und als konkrete Contentpflegevorlage genutzt werden (zu ergänzen um ECHTEN Inhalt durch den Kunden). In der Projekt Frühphase kann hieraus durch die sinnvolle Schneidung der Seiten in technische Modulkomponenten ein Beitrag zur Erstellung des Projekt-Backlogs geleistet werden.
Ausnahme:
Falls im Projekt bereits visuelle Umsetzungs-Konzepte für Module vorliegen, können diese direkt mit echten Inhalten bestückt werden.
Module werden als ausgearbeitete Designs eingebunden, auf Basis eines BRP. Zur Konkretisierung des Responsivverhaltens kann ein XL und ein XS Breakpoint realisiert werden. Positionierungen und Inhalte sind so realistisch wie möglich.
Module werden benannt und fließen in den Projektscope ein
Absprünge werden erwähnt
Inhalte können in der Dokumentation mitbeschrieben werden
Erstellbar im Grafiktool (Sketch/Figma)
Erweiterbar zum Hi-Fi Klickdummy
Das Hi-Fi Mockup integriert neben Seitenstrukturen, Modulfunktionen auch komplett Text und Bildelemente und klärt so z.B. Designfeinheiten wie Lesbarkeit von Text auf Bild, Bildbeschnitte oder Textlängen im realistischen Szenario.
Wann macht ein Kundenworkshop Sinn?
Allenfalls als Schulterblick- oder Designkonzept-Vorstellungsworkshop. Das Kreationsteam erstellt beispielhafte Designs mit realstischem Inhalt und bespricht diese mit PO und Stakeholdern mit dem ziel, eine grundlegende Designfreigabe zu erhalten oder Anpassungen festzulegen.
Aus freigegebenen Mockups können dann die notwendigen Definitionen für alle Basics sowie die schon abgebildeten Globals und Module gezogen werden. Je nach Sprintplanung ist es sinnvoll, also diejenigen Mockups zu erstellen die hierzu für die ersten Sprints maximal Vorgaben beisteuern können.
Ist diese Methode ein Pflichtinhalt für Projekt-Visionsphasen?
Eine der hier behandelten drei Ausbaustufen muß zumindest für die wichtigsten Seiten (aus technischer, didaktischer, conversions- oder kreativer Sicht) durchgeführt werden. Die Erfahrung zeigt, dass ein Grundstück schon in der frühen Konzeptphase (Visionsphase) geschehen sollte, um auch dem Dev-Team ein besseres Gefühl für die Anforderungen der im Backlog gesammelten Module und Seitenfunktionen zu liefern - nicht zuletzt auch um sinnvolle Akzeptanzkriterien für das Front- und Backend entwickeln zu können.
Für die Abstimmung der visuellen Designidee ist es praktisch immer sinnvoll, eine gewisse Anzahl ausgestalteter Mockups zu erstellen und abzustimmen. Alle relevanten Seitentemplates als Mockups zu realisieren ist bei umfangreichen Informationsarchitekturen eher selten im Budget. Hier hilft eine Mischung aus Hi-Fi und Mid-Fi Content Konzepten.