Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Nutzer-zentrierte Konzeption

Nutzer-zentrierte Konzeption

Insbesondere Kunden möchten oft schnell »was sehen« – und so beginnen neue Webprojekte viel zu oft mit einem Design statt mit der Konzeption. Holger Könemann stellt heute die Vorteile von Personas und Storyboards vor.

Das Kundenbriefing ist überstanden, offene Fragen wurden durch ein ergänzendes Interview oder einen Projektfragebogen geklärt. Das Angebot wurde prompt vom Kunden unterschrieben. Also kann mit dem Design der neuen Internetseite begonnen werden, oder?

Auch wenn Webdesigner – schon auf Grund ihrer Berufsbezeichnung – generell viel Wert auf das Layout und die Gestaltung legen, beginnt ihre Arbeit doch stets mit der Konzeption und nicht mit dem Design. Idealerweise werden gestalterische Fragen in diesem frühen Stadium möglichst gänzlich ausgeklammert, um zu vermeiden, dass diese bewusst oder unbewusst Einfluss auf die Konzeption nehmen. So schwer es dem ein oder anderen Kreativen auch fallen mag, die Hauptrolle bei der Konzeption spielt der Nutzer und nicht Formen, Farben und Typographie.

Erste Skizzen

Erste Skizzen

Der Nutzer als Ausgangspunkt

Es ist häufig eine Herausforderung, dem zahlenden Auftraggeber klar zu machen, dass seine eigenen Wünsche und Vorstellungen bestenfalls zweitrangig sind. Denn der grundsätzliche Ausgangspunkt bei der Konzeption ist immer der Nutzer des Webangebotes. Diese Fokussierung sollte strikt durchgehalten werden, um ein möglichst optimales Ergebnis zu erzielen. Insbesondere da Fehler in der Konzeption in späteren Entwicklungsphasen wesentlich zeitaufwändiger zu beheben sind.

Der Nutzer hat eine bestimmte Erwartung, diese Erwartung sollte die Funktion bzw. den Nutzungszweck der Internetseite bestimmen. Der Nutzungszweck wiederum bestimmt die äußere Form. Kurz gesagt: Die alte Designer-Weisheit »form follows function« besitzt auch im Webdesign uneingeschränkte Gültigkeit, sollte jedoch um »…and function follows users« ergänzt werden.

Vom Nutzer zur Funktion

Wird der Nutzer in den Mittelpunkt gerückt, stellt sich eingangs zwangsweise die Frage: »Wer besucht die Internetseite typischerweise und was erwartet er dort?«

Um diese Frage beantworten zu können, sollten fiktive Persönlichkeiten (Personas) erstellt werden, mit denen reale Nutzungsfälle (Use Cases) durchgespielt werden. Die »Personas« sollten sich dabei an der tatsächlichen und/oder der gewünschten Zielgruppe orientieren.

Als Beispiel:

Der 57-jährige, stets skeptische Beamte Hans Müller geht komplett anders an die Bestellung eines Produktes in einem Onlineshop heran als die 19-jährige, webaffine Auszubildende Anna. Hans will sich beispielsweise zunächst über Sicherheitsaspekte und Bezahlmethoden informieren, Anna hingegen möchte schnell das Sonderangebot bestellen.

Beide Nutzer haben die gleiche Intention bei dem Besuch der Internetseite, sie möchten ein Produkt bestellen. Dennoch gehen beide unterschiedlich an diesen Vorgang heran und erwarten unterschiedliche Informationen. Nur wenn sie diese bekommen, werden sie auch ihr ursprüngliches Ziel nicht aus den Augen verlieren und den Bestellprozess abschließen.

Das Ergebnis der Kombination verschiedener Persönlichkeiten mit unterschiedlichen Nutzungsfällen sollte dabei schriftlich und visuell in »Storyboards« festgehalten werden. Diese »Storyboards« ergeben zwangsläufig die Elemente, Informationen, Funktionen und Inhalte, die von den Besuchern erwartet werden und damit die optimale Seiten- und Inhaltsstruktur (Informationsarchitektur) widerspiegeln.
Je mehr dieser Kombinationen durchgespielt werden, desto präziser kristallisiert sich heraus, welche Elemente benötigt werden.

Diese Elemente können nun ihrer Wichtigkeit nach logisch in eine Navigations- und Seitenstruktur (Sitemap) eingegliedert werden und in einen klickbaren Prototypen umgewandelt werden. Dieser kann dann im letzen Schritt von realen Personen verschiedenen Nutzungstests unterzogen werden.
Erst jetzt, am Ende der Konzeptionsphase, wenn der Prototyp auf Herz und Nieren getestet ist, ist es an dem Webdesigner, diesen in ein grafisches Gewand zu verpacken und die Priorisierung der Inhaltselemente durch Farben, Formen, Bilder und Typographie zu unterstreichen.

Kommentare

Matthias Edler-Golla

Matthias Edler-Golla
am 03.12.2009 - 10:19

Für alle, die es noch nicht kennen: es gibt ein fantastisches tool zum erstellen von wireframes/mockups: http://www.balsamiq.com/

damit kommt man bequem von den ersten skizzen/konzepten bis hin zu groben layouts...

Permanenter Link

Suzan Gronemeier
am 03.12.2009 - 10:47

Dickes Dankeschön!
Versuche gerade Anstöße für Websites von Kirchengemeinden und kirchlichen Institutionen zu geben, die mittelalterlichen Gefilde doch mutig zu verlassen. Der Artikel war der erste, der mir als WEB-Laie -komme als Texterin vom Content- hilft, konzeptionell zu argumentieren.

Permanenter Link

Julia
am 03.12.2009 - 11:57

Ein schöner Artikel. Leider oft in der Praxis viel zu wenig eingesetzt. Dabei ist es gerade bei dynamischen Seiten oft weniger Arbeit, als man auf den ersten Blick meinen möchte - hier reicht es oftmals aus, die Startseite, eine Kategorieseite (z. B. bei Shops) und eine Produktseite zu planen.

@matthias: Balsamiq kannte ich noch nicht, bisher habe ich immer Omnigraffle genutzt. Die Online-Demo von Balsamiq bedient sich allerdings um einiges schneller. Jetzt geh ich mich ärgern, dass ich Omni gekauft habe *lach*

Permanenter Link

Julia
am 03.12.2009 - 12:50

Sorry für den Doppelpost, aber Pencil für Firefox habe ich gerade noch gefunden und das sieht wirklich nett aus.

Permanenter Link

Andy Pillip
am 03.12.2009 - 18:05

wenn der Prototyp auf Herz und Nieren getestet ist, ist es an dem Webdesigner, diesen in ein grafisches Gewand zu verpacken und die Priorisierung der Inhaltselemente durch Farben, Formen, Bilder und Typographie zu unterstreichen

Ist nicht gerade auch der Test von Farben und Formen wichtig?

Permanenter Link

Björn
am 04.12.2009 - 00:28

@Andy Pillip

Ist nicht gerade auch der Test von Farben und Formen wichtig?

Kommt auf die Art bzw. den Detailgrad an. In den meisten Fällen wird das noch nicht unbedingt am Prototyp getestet. Aber bei HIFIs, mit hoher Darstellungstreue, schon.

Permanenter Link
Holger Könemann

Holger Könemann (Autor)
am 04.12.2009 - 07:35

@Andy Pillip

Ist nicht gerade auch der Test von Farben und Formen wichtig?

Klar, aber in den meisten Fällen liegen die generellen Farben und Formen durch eine CI schon fest. Die Zusammenstellung des Ganzen durch den Designer richtet sich dann nach der Funktionsweise und des Aufbaues. Und das wird erst beim Prototpen entgültig festgelegt. Die Gefahr viel Zeit in ein komplettes Design zu investieren, dass dann eh wieder stark abgeändert werden muss, ist zu gross.
Dass spricht aber natürlich nicht dagegen nach der "Hochzeit" von Funktion und Design das Ganze nocheinmal durch zu testen. Das ist dann aber nicht mehr Teil der eigentlichen Konzeptionsphase und war daher auch nicht mehr Teil meines kleinen Artikels hier...

Schöne Grüße aus Hamburg!

Permanenter Link

Chris
am 04.12.2009 - 12:47

Feiner Artikel.

Kann der Atikel noch in die Kategorie "Adventskalender 2009" geschoben werden? Da ich mir extra einen Link zu der Kategorie eingespeichert habe habe ich mich gerade gefragt, wo denn die 3 ist ... ;-)
Danke.

Grüße,
Chris

Permanenter Link

Gunnar Bittersmann
am 09.12.2009 - 11:39

Erstmal: Daumen hoch für den Beitrag.

Völlig richtig, dass „[e]s häufig eine Herausforderung [ist], dem zahlenden Auftraggeber klar zu machen, dass seine eigenen Wünsche und Vorstellungen bestenfalls zweitrangig sind.“ Schade, dass nicht weiter in die Tiefe gegangen wurde, wie man diese Herausforderung angehen kann. Aber das wäre vielleicht auch eher ein weiteres Türchen im Adventskalender.

Gestutzt hatte ich kurz bei „beginnt ihre Arbeit doch stets mit der Konzeption und nicht mit dem Design“, was wohl der (IMHO falschen) Verwendung des Begriffs „Design“ im Deutschen geschuldet ist, wo er von manchen im Sinne von „Layout“ verwendet wird, während er im Englischen weit mehr umfasst.

Aber was muss man auf dem Bild sehen: ein in Pixel festgemeißeltes statt eines flexiblen Layouts? Das können wir doch besser!

Permanenter Link

Die Kommentare sind geschlossen.