¨Patrick Federi

Verheiratet, Vater, Bergler, Mountainbiker, Jogger, Wanderer, Skater, Skifahrer, Fotograf, Comic-Liebhaber, Möchtegernbündner, Steinmanndli-Erbauer, Legomaniac, Frühaufsteher, Kaltduscher. Lebt in Zürich, arbeitet als Interaction Designer bei Escapenet in Winterthur und studiert Human Computer Interaction Design.

¨Artikel

Wie wir Webprojekte an die
Benutzerbedürfnisse anpassen.

Die Technik wird in Webprojekten oft zu stark in den Vordergrund gestellt: Bevor die Anforderungen an eine Webseite bekannt sind, wird bestimmt, welche Plattform eingesetzt werden soll. Oder das Design steht bereits fest, obwohl noch nicht definiert wurde, was die geplante Webseite ihren Benutzern überhaupt vermitteln soll.

Kürzlich an einem Kundenmeeting hat mich der CEO der Firma gefragt, ob wir als Webagentur eher für die Programmierung oder das Design einer Webseite zuständig sind. Da wurde mir bewusst, dass viele Auftraggeber noch immer der Meinung sind, das Erstellen einer Webseite sei mit Design und der technischen Umsetzung getan. Selten wird überlegt, wie Besucher auf der Webseite agieren, was sie von der Webseite erwarten.

User Centered Design (benutzerzentriertes Design)

Um eine an den Benutzer angepasste Webseite zu entwickeln, bedienen wir uns der User Centered Design-Methode. Benutzerzentriertes Design hat das Ziel, eine Webseite so zu entwickeln, dass sie dem Besucher einen möglichst grossen Nutzen bietet und dabei über eine gute Usability verfügt. Die Grundidee ist, dass die Benutzer im Zentrum stehen. Sie gehören deshalb zu den wichtigsten Stakeholder (Anspruchsgruppe) in einem Webprojekt.

Das 5-S Modell

Es gibt verschiedene Vorgehensmodelle, wie ein User Centered Design-Projekt umgesetzt werden kann. Um Kunden auf einfache Weise das Vorgehen in einem Webseiten-Projekt zu zeigen, eignet sich meiner Meinung nach das 5-S Modell von Garrett.

In seinem Buch «The Elements of User Experience» empfiehlt J.J. Garrett, die Konzeption und Umsetzung einer Webseite in Schichten vorzunehmen. Die fünf S stehen für jeweils eine Schicht: Strategy, Scope, Structure, Skeleton und Surface.

Strategy (Strategie)

Die Ziele des Unternehmens für die Webseite und die grundlegenden Bedürfnisse der Benutzer werden analysiert. Beispiel: Nach welchen Informationen sucht der Benutzer auf der Webseite?

Scope (Umfang)

Die Anforderungen an die Webseite werden spezifiziert und die funktionalen Spezifikationen erstellt. Es wird also bestimmt, welche Funktionen auf der Seite die Strategie unterstützen. Beispiel: Soll die Webseite mobile-tauglich sein?

Structure (Struktur)

Die Struktur der Webseite definiert, wie sich Benutzer durch die verschiedenen Seiten bewegen. In der Fachsprache reden wir von Informations-Architektur und Interaction Design.

Skeleton (Gerüst)

Die Gerüstebene definiert, wie die einzelnen Screens (Seitenansichten) und die Navigation einer Webseite aufgebaut sind und wie die Informationen zu den Benutzern kommen. Beispiel: Definition der Positionen von Bild und Text.

Surface (Oberfläche)

Mit Oberfläche ist das visuelle Design der Seite gemeint. Wie soll die grafische Gestaltung aussehen? Erst jetzt werden Farben, Icons, Schriften etc. definiert.

Wie Garrett beschreibt, haben Entscheidungen in den tieferen Schichten einen Einfluss darauf, wieviel Spielraum in den darüber liegenden Schichten bleibt. Die einzelnen Phasen beschreibt Garrett in seinem Buch nur oberflächlich, er bietet aber einen sehr guten Überblick über die Grundprinzipien des User Centered Design.

Das Garrett / Eisberg-Modell

Im Eingangs erwähnten Meeting habe ich dem Kunden das Modell kurz skizziert und ihm in einer einfachen Darstellung gezeigt, wie ein Webprojekt optimal durchgeführt wird. Design und Programmierung sind heute nur noch zwei kleine Teilbereiche. Beim visuellen Design sprechen wir von etwa 10% des Gesamtvolumens. Deshalb verwendete ich in der Skizze auch die Metapher des Eisberges.

Garrett/Eisberg Modell

Der Kunde war begeistert von Garretts Modell und entschied sich für einen eintägigen Workshop mit uns. In diesem Workshop haben wir die unteren drei Schichten (Strategie, Umfang, Struktur) zusammen erarbeitet.

Meine Eisberg-Skizze habe ich später noch verfeinert und benutze sie nun, um Kunden den Ablauf eines Webprojektes aufzuzeigen.

Das Bild darf mit Namensnennung angepasst und weiterverwendet werden und kann hier heruntergeladen werden (Zip-File mit PDF- und Illustrator-Datei): http://db.tt/yDgjEvvK

Mehr Informationen über User Centered Design:

Garrett, J.J. (2002) The Elements of User Experience.
Mayhew, D. (1999) The Usability Engineering Lifecycle.
Cooper, A., Reimann, R., & Cronin, D. (2007) About Face.
Goodwin, K. (2009) Designing for the Digital Age.
Cooper, A. (1999) The Inmates Are Running the Asylum.

Dieser Text erschien am 23. April 2013 im Blogwerk Blog. Lektorat: Brigitte Federi.