Häufig wird bei der Konzeption einer Website zuerst an die Homepage gedacht. Das eigentliche Ziel der Website, das Produkt oder die Dienstleistung, gerät in den Hintergrund der Überlegungen. Die Methode „Cores and Paths“ stellt dieses Vorgehen auf den Kopf: Beginnen Sie mit dem Kern Ihrer Website und konzipieren Sie erst dann Homepage sowie Navigation.
Eine Rasenfläche, rundherum ein gepflasterter Weg, und Sie wollen zur Bushaltestelle genau auf der gegenüberliegenden Seite: Bleiben Sie auf dem Weg und nehmen den Umweg in Kauf oder überqueren Sie kurzerhand den Rasen? Häufig sieht man an solchen Orten Trampelpfade, weil immer wieder Menschen die Abkürzung bevorzugen. Diese „natürlichen“ Pfade verbinden auf kürzeste Weise zwei voneinander entfernt liegende Punkte miteinander.
Dass dies ein natürliches Verhalten des Menschen ist, hat schon der Architekt Christopher Alexander in seinem Werk „A Pattern Language“ (1976) festgestellt. Er empfiehlt Städteplanern daher: „To lay out paths, first place goals at natural points of interest. Then connect the goals to one another to form the paths.“ Zu Beginn sollen die Ziele identifiziert werden, für die sich Menschen interessieren. Erst danach werden diese Ziele durch sinnvolle Wege miteinander verbunden.
Diese Erkenntnis lässt sich auch auf die Architektur von Websites übertragen. Häufig genug ist in Usability-Tests zu beobachten, dass Nutzer auf eine Website kommen und sich für die Produkte des Unternehmens interessieren, die Auffindbarkeit dieser Produkte jedoch mit erheblichen Problemen verbunden ist. Das Angebot des Unternehmens, um das es eigentlich geht – für Kunden wie für das Business –, ist durch eine tiefe Informationsstruktur und „verwinkelte“ Navigationspfade nur schwer zu finden.
Mit dem Ziel zu beginnen, ist auch eine der Botschaften von Are Halland, einem norwegischen Informationsarchitekten. In seiner Präsentation „Cores and Paths: Designing for Findability“ (http://slidesha.re/dnwrLX), die er 2007 auf der internationalen Konferenz für Informationsarchitektur hielt, geht es genau um dieses Thema: Den Kern bzw. das Ziel der Website identifizieren und dann die Pfade, die zum Kern hinführen und die vom Kern abgehen, gestalten. Mit der einfachen Empfehlung „arbeite von innen nach außen“ stellt er das häufig übliche Vorgehen im Webdesign – erst mit der Startseite sowie Navigation zu beginnen und dann alles Übrige folgen zu lassen – auf den Kopf.
Der Kern ist für den Nutzer das, weshalb er auf die Website kommt und wonach er sucht. Aus Sicht des Anbieters ist der Kern das Angebot, das er verkaufen oder kommunizieren möchte. Im E-Commerce ist der Kern normalerweise das Produkt – repräsentiert durch Abbildung und Beschreibung. Bei Websites, die hauptsächlich der Unternehmensdarstellung dienen, kann der Kern die Beschreibung der Dienstleistung sein bzw. die Darstellung des Mehrwerts, den das Unternehmen seinem Kunden verspricht. Auf einer Website wie z. B. YouTube, auf der Nutzer Videos hochladen, damit sie von anderen Menschen angesehen oder heruntergeladen werden können, ist das Video der Kern.
Der Kern ist nicht immer die gesamte Page. Im Beispiel von YouTube besteht der Kern nur aus dem Video. Auch ist es möglich, dass der Kern verteilbar ist: So können Videos von YouTube auf anderen Websites veröffentlich werden. Gleichzeitig sind sie durch das Design immer noch als Content von YouTube erkenntlich. Ein Kern kann auch aus einem Prozess bestehen. So gehören bei einem Vergleichs-Portal die interne Suche sowie die Suchergebnisse zum Kern der Website. Wichtig ist auch zu wissen, dass es häufig zum eigentlichen Kern noch zusätzliche Hilfsinformationen gibt wie z. B. detaillierte Spezifikationen des Produktes.
Haben Sie den Kern definiert, dann ist die nächste Frage: Wie kommen die Nutzer zum Kern? Einer der Pfade kann die Hauptnavigation sein. Doch geht es darum, sämtliche Pfade zu identifizieren. So gelangen Nutzer häufig direkt über eine externe Suchmaschine auf die Seite mit dem Kern. Aber auch andere Wege sind möglich, wie zum Beispiel die interne Suche, Links von anderen Websites, Links auf der eigenen Site, gezieltes Eintippen der URL, RSS Feeds, Newsletter etc.
Bei der Gestaltung des Kerns müssen diese verschiedenen „Einstiege“ berücksichtigt werden. So sollte der Flow des Nutzers nicht unterbrochen werden. Gleichzeitig wird die Seite mit dem Kern häufig zur Landingpage und muss entsprechend gestaltet sein – hierfür gibt es in anderen Artikeln wertvolle Tipps. Wichtig ist auch, dass das Potenzial dieser „Einstiege“ optimal genutzt wird, wie zum Beispiel durch SEO, SEM oder eine Abstimmung von Offline- und Online-Marketing.
Angenommen, der Nutzer hat gefunden, was er sucht. Wie geht es weiter? Grundsätzlich sollte jede weitere Interaktion des Nutzers mit der Website einen Wert für das Business sowie auch für den Nutzer generieren. Für das Unternehmen kann dies ein Verkaufsabschluss sein, die Weiterempfehlung eines Produktes oder die Gewinnung von Adressen potenzieller Kunden.
Dementsprechend kann dies für den Nutzer der Kauf des Produktes sein, das Setzen des Produktes auf die Merkliste oder die Weiterempfehlung per Mail. Vielleicht lässt er sich durch den Link „Personen, die diesen Artikel gekauft haben, kauften folgende Artikel“ inspirieren und sieht sich weitere Produkte an, die er von selbst nicht gefunden hätte.
Wenn man das Modell von „Cores and Paths“ auf die Website von Amazon anwendet, so besteht der Kern für die Produktkategorie „Bücher“ aus folgenden Elementen: Abbildung des Buchs, Buchtitel, Autor, Kundenrezensionen, Preis und voraussichtliche Lieferzeit (s. Abbildung 1, rot gestrichelte Linie).
Auf der linken Seite des Screenshots sind einige der „Pfade nach innen“ aufgelistet. Rechts vom Screenshot sehen Sie einige der „Pfade nach außen“. „Pfade nach außen“ bedeuten jedoch nicht, dass der Nutzer die Website verlassen muss – im Gegenteil. Ziel ist es, das Angebot und die Experience so zu gestalten, dass der Nutzer zur intensiven Interaktion mit der Website animiert wird. Verlässt er schließlich die Site, dann sollten verschiedene Mechanismen wie z. B. Newsletter-Abonnement oder Merkliste sicherstellen, dass er gern wieder zurückkommt und dem Unternehmen der Kunde nicht verloren geht.
Wie Sie diese Methode in der Praxis anwenden können, möchten wir Ihnen anhand eines imaginären Projekts demonstrieren. Hierfür haben wir, die Autoren, uns folgendes Szenario vorgestellt:
Wir arbeiten in einer kleinen Agentur und wurden mit der Website eines Fahrradhandels beauftragt. Das Unternehmen besitzt noch keine Online-Präsenz und möchte jetzt ins E-Commerce-Geschäft einsteigen. Folgendes sind die Rahmenbedingungen: Das Sortiment ist auf High-End-Produkte spezialisiert – Rennräder, Mountainbikes sowie das jeweilige Zubehör. Die zwei Hauptzielgruppen sind Profi-Radfahrer sowie ambitionierte Amateure. Das Sortiment, das online angeboten werden soll, wird ca. 500 Produkte umfassen. Das Unternehmen vertreibt überwiegend Premiummarken. Das Design der Website soll die hochwertige Positionierung unterstreichen.
Was ist unser Kern? Als Erstes schreiben wir eine Liste: Fahrräder, Zubehör ... wir brainstormen. Wir sehen uns Websites von verschiedenen Fahrradshops an. Doch wir lassen uns auch von Websites branchenfremder Unternehmen, die hochwertige Produkte vertreiben, inspirieren. So sehen wir uns unter anderem www.dell.de, www.bose.de und www.rei.com an. Dabei überlegen wir, was für unseren Kern wichtig ist. Wir fangen an zu zeichnen, machen verschiedene Sketches.
Ein wesentlicher Teil des Kerns ist die Abbildung des Fahrrads. Das Foto soll auf der Page dominant sein und es soll möglich sein, sich einzelne Details des Fahrrads ganz nah anzusehen. Die Zielgruppe sind Sportler, die eine Leidenschaft für gute Fahrräder haben und die wir vom hochwertigen Angebot des Shops überzeugen wollen. Dazu gehört auch, dass wir die Marke des Fahrrads deutlich herausstellen. Weiterhin gehören zum Kern die Produktlinie die genaue Produktbezeichnung sowie die Artikelnummer zur eindeutigen Identifikation des Artikels – dies auch deshalb, weil das Unternehmen zusätzlich einen Offline-Katalog an seine Kunden verschickt.
Auf die textliche Produktbeschreibung könnten wir eigentlich verzichten, denn beide Zielgruppen wissen genau, was sie wollen, und müssen nicht durch werbliche Texte motiviert werden. Doch Keywords sind für die Auffindbarkeit der Website durch Suchmaschinen wichtig. Also entscheiden wir uns für einen Kurztext.
Für beide Zielgruppen ist die technische Ausstattung der Fahrräder von großer Bedeutung: Ein Liste mit den wichtigsten Features soll daher zum Kern gehören. Unterhalb der Featureliste gibt es einen Link „mehr“, damit kann sich der Nutzer das detaillierte Datenblatt des Fahrrads ansehen. Dieses Datenblatt ist auch über den linken Reiter unterhalb der Abbildung aufrufbar. Über weitere Reiter können „Kundenbewertungen“ und „Zusatzprodukte“ angezeigt werden. Diese ausführlichen Informationen gehören nicht mehr zum Kern – es sind Hilfsinformationen. Als Letztes fügen wir zum Kern noch den Preis hinzu. Da unser Verkaufsargument hohe Qualität ist, soll der Preis gut sichtbar, aber nicht zu prominent sein.
Immer wieder dreht sich unser Gespräch um die Frage: Was genau gehört alles zum Kern und in welcher Priorität stehen die einzelnen Elemente des Kerns zueinander? Diese Frage muss man für jedes neue Projekt immer wieder klären. Generell handelt es sich beim Kern um Informationen, die das Wesen des Angebots ausmachen. Durch diese Reduktion auf das Wesentliche wird die Aufmerksamkeit des Designers wie auch später die des Nutzers auf das Angebot fokussiert. Vom Angebot ablenkende Elemente können so vermieden werden.
Da heutzutage eine multimediale Präsenz wichtig ist, soll es auch eine mobile Version des Online-Shops geben. Wir konzipieren nicht nur isoliert eine Website, sondern überlegen uns von Beginn an ein ganzheitliches Konzept – auch hierbei hilft der eindeutig definierte Kern. Außerdem möchten wir, dass der Nutzer unsere Fahrräder auf Facebook posten kann und entwerfen noch das Design für einen „verteilbaren“ Kern (s. Abbildung 3).
Während wir die Elemente des Kerns definieren, orientieren wir uns immer wieder an der Positionierung des Shops sowie den möglichen Zielen und Bedürfnissen der Nutzer. Durch das Scribbeln visualisieren wir unsere Ideen und können anhand der Entwürfe konkret verschiedene Details durchdenken sowie alternative Vorschläge entwickeln. Gleichzeitig werden auch mögliche Lücken des Briefings deutlich. In einem realen Projekt müssen dann zusätzliche Informationen eingeholt und Entscheidungen getroffen werden. Doch auch bei einem noch so guten Briefing können von vornherein nicht alle Details bedacht werden. Manche Fragestellungen entstehen erst im Prozess des Machens. Und das ist auch gut so, denn nur so sind kreative Entwicklungen möglich.
Was können die möglichen Wege nach innen sein? Wieder fangen wir mit einer Liste an: Google, interne Suche, Navigation, Links von anderen Websites, Links von Vergleichsportalen, Offlinemedien wie z. B. unseren Katalog. Nach und nach fügen wir weitere Wege hinzu. Was deutlich wird – es gibt die unterschiedlichsten Wege, wie der Nutzer zum Kern gelangen kann. Die Homepage ist nur eine von vielen Möglichkeiten. Zu jedem der identifizierten Pfade notieren wir in unserer Liste die entsprechenden Anforderungen, die fürs Design sowie für Aktivitäten wie SEO, Marketing etc. daraus resultieren (s. Abbildung 4).
Im nächsten Schritt bestimmen wir die Pfade nach außen. Hier gehen wir ähnlich wie bei Step 2 vor, nur dass wir bei den Anforderungen die entsprechenden Interaktionselemente hinzufügen. Zusätzlich bewerten wir die Pfade auf unserer Liste (Abbildung 5) nach ihrer Wichtigkeit für das Business: 1 für hoch, 2 für mittel und 3 für niedrig. Nachdem sich der Nutzer mit dem Kern befasst hat, muss eindeutig kommuniziert werden, was er als Nächstes tun soll. Hier müssen wir durch Priorisierungen im Design die Aufmerksamkeit des Nutzers bewusst lenken. Ein deutlich sichtbarer Call-to-Action-Button führt den Nutzer zum Checkout-Prozess. Kann er sich für den Kaufabschluss nicht sofort entscheiden, versuchen wir, ihn mit anderen Angeboten an unsere Website zu binden, wie z. B. mit einer Merkliste, Empfehlungen, Reviews etc.
Bis zu diesem Zeitpunkt haben wir uns weder mit der Homepage befasst noch haben wir uns eine Navigation überlegt. Doch bereits in diesem Stadium setzen wir uns mit wichtigen Entscheidungen auseinander wie z. B., ob wir eine Vergleichsfunktion auf unserer Website anbieten wollen oder ob es auch eine mobile Version unserer Website geben soll. Verschiedene Konzepte können schon jetzt anhand der Sketches mit Nutzern getestet werden. Zu Beginn der Entwicklung einer Website sind Änderungen noch unkritisch. Je weiter man jedoch in der Konzeption fortschreitet, desto schwieriger wird es, nicht vorher bedachte Aspekte zu integrieren.
Im letzten Part geht es darum, die Homepage und die gesamte Informationsarchitektur sowie das Navigationsdesign für die Website zu entwerfen. Ziel ist hierbei, dass der Nutzer auf möglichst einfache Weise zum Kern findet. Gleichzeitig präsentieren wir das Unternehmen unseres Kunden und wollen dessen Markenwerte überzeugend kommunizieren.
Um den Nutzer emotional anzusprechen, entscheiden wir uns für eine Bilderwelt, die den Fun-Faktor des Radsports transportiert. Außerdem überlegen wir, Videos auf die Homepage zu stellen. Da wir Ihnen in diesem Artikel nur den Prozess der Konzeption zeigen möchten und unser Ziel nicht das Erstellen einer fertigen Website ist, belassen wir es bei diesem einen Entwurf (Abbildung 6) und vertiefen uns nicht in weitere Details.
Um den Nutzer von der Homepage auf möglichst einfachem Weg zum Kern zu führen, stellen wir unsere drei Produktlinien in der Hauptnavigation dar: Rennräder, Mountainbikes und Zubehör. Auch eine Übersicht nach „Marken“ kann der Nutzer direkt über die Hauptnavigation ansteuern. Auf der Übersichtsseite (Abbildung 7) werden Filter- sowie Sortiermöglichkeiten angeboten, sodass der Nutzer bereits beim nächsten Klick auf das ihn interessierende Produkt – unseren Kern – gelangen kann. Die Kategorien der Hauptnavigation sowie die Facetten ergeben sich fast automatisch durch die intensive Beschäftigung mit dem Kern.
Damit Sie selbst die Methode von „Cores and Paths“ ausprobieren können, haben wir für Sie ein Template erstellt (Abbildung 8), das Sie auch auf www.netflow-lindemann.de downloaden können.
Der Unterschied scheint unbedeutend zu sein – ob Sie nun bei der Konzeption Ihrer Website mit der Homepage oder dem Produkt beginnen. Doch die Auswirkungen sind immens: Der Fokus wird durch die Konzentration auf den Kern vollkommen anders gesetzt. Das Angebot steht klar im Mittelpunkt. Alle Informationen, Design- sowie Interaktionselemente dienen nur dem einen Zweck – Business und Nutzer zu ihrem Ziel zu bringen. Die Methode von „Cores and Paths“ ist dafür ideal. Probieren Sie es aus!