Abb. 1. Online Lieferservices für portioniere Lebensmittelboxen

Heutzutage ist die Zeit für die Nahrungsmittelzubereitung knapp bemessen. Neben Arbeit, Freunden und Hobbys bleibt nur noch selten Zeit selbst zu kochen. Auch bei Familien wird die Zeit für den alltäglichen Einkauf immer knapper, obwohl der Stellenwert einer ausgewogenen und gesunden Ernährung zunimmt. Denn es zählt laut der einer Nestle Studie gut ein Viertel der Deutschen zu den so genannten „Quality Eaters“, denen ein guter Geschmack sowie Aspekte wie Qualität, Sicherheit, Gesundheit und Nachhaltigkeit wichtiger sind als ein günstiger Preis.

Online-Lebensmittelhändler bieten eine gute Qualität sowie Service und könnte den täglichen Einkaufstress ersparen. Das Interesse daran, im Internet Lebensmittel und Getränke zu bestellen, besteht bei fast 67% der deutschen Internetnutzer, so die AGOF-Studie internet facts. Jedoch kaufen nur erstaunliche 10,5% die Waren des täglichen Bedarfes auch tatsächlich online.

Abb. 2: Die Biokiste nur weitergedacht...

Doch verschiedene neuartige Verkaufskonzepte versuchen diesen Markt zu erobern. Eines davon brachte die Schwedin Lisa Rentrop nach Deutschland: Lebensmittelkisten mit portionierten Zutaten und passenden Rezeptvorschlägen, die direkt an die Tür geliefert werden. Die Inhalte sollen eine ausgewogene und abwechslungsreiche Ernährung ohne Einkaufstress garantieren. Die wöchentlich neu zusammengestellten Pakete enthalten -je nach Wunsch- drei bis fünf Mahlzeiten. Nur gekocht werden muss dann noch selbst.

Persönliche Gestaltung und Ehrfahrungsberichte schaffen Vertrauen

Seit 2010 kann man auf ihrer Webseite kommtessen.de unter anderem biologisches Gemüse und nachhaltig gefangenen Fisch in vorportionierten Lebensmittelboxen bestellen. Die Seite fällt durch ihre herzliche und persönliche Gestaltung auf, die gleich Vertrauen in einen guten Service fassen lässt. Die enthusiastischen Kundenkommentare wirken überzeugt davon, dass man auf die Qualität der Ware vertrauen kann und sind so begeistert geschrieben, dass ich gleich Lust bekommt selbst zu kochen.

Abb. 3: Zielgruppenspezifische Produktangebote

Einfache Produktauswahl durch Personas

Auf kochzauber.de wird das Konzept auf der Homepage durch ein niedliches Video verdeutlicht. Die Auswahl des passenden Produktes wird durch Mittel von Personas erleichtert. Diese stellen bestimmte Lebenssituationen dar, und die Produkte sind genau auf die speziellen Bedürfnisse dieser Nutzergruppen abgestimmt.

Außerdem hat man die Möglichkeit die Box weiter zu konfigurieren (laktose oder glutenfreie Varianten) und die Möglichkeit den Lieferrhythmus sehr flexibel zu bestimmen.

Gelungene Produktinszenierung und übersichtliche Gestaltung

Auf der Seite kochabo.de werden die Inhalte der Boxen detailliert und dennoch übersichtlich präsentiert. Neben den hochwertigen Fotos der Gerichte, werden alle Zutaten und die benötigte Kochzeit angegeben. Die vorausgesetzten Basisprodukte sind angegeben und Besonderheiten (z.B. vegan) durch Icons visualisiert.

Abb. 4: Gelungene Produktinszenierung und elegante Reiterlösungen mit integrierten Filtermöglichkeiten

Die Box kann noch auf derselben Maske angepasst und konfiguriert werden, bis sie den individuellen und wechselnden Ansprüchen des Kunden gerecht wird.

Durch die elegante Reiterlösung, sind die Gerichte der aktuellen und sogar der kommenden Woche einzusehen. So weiß man ganz genau, was in der nächsten Woche auf dem Speiseplan steht.

Statt einem kompletten Speiseplan, kann man auf tasybox.de einzelne exklusive Gerichte bestellen. Die Qualität, sowie der Preis sind entsprechend gehoben. Hierfür bekommt der Kunde aber nicht nur Nahrungsmittel, sondern gleich ein ganzes Koch – und Esserlebnis geliefert. Mit Hintergrundinformationen und Geschichte zu den speziellen Gerichten wird das zubereitete Essen zu etwas Besonderem. Außerdem können so auch Hobbyköche einfach mit ihren Werken und ihrem Wissen glänzen.

Unter Berücksichtigung des Marktes, der Zielgruppe und den „Good Practices“ habe ich einige erste Richtlinien und Tipps für Gestaltung und Funktionalität dieser Webseiten abgeleitet.

1. Hochwertige visuelle Produktinszenierung
   Gerade beim Kauf von Lebensmitteln ist das „Look and Feel“ und die eigenhändige Kontrolle sehr wichtig um sich von Qualität und Frische überzeugen zu können. Da online viele sensorische Informationskanäle nicht genutzt werden können, ist die visuelle Produktinszenierung besonders wichtig. Um sich von der Ware -im wahrsten Sinne des Wortes- ein Bild machen zu können. Es können hochwertige Produktabbildungen und detaillierte Produktbeschreibungen dazu genutzt werden der Qualität der angebotenen Ware zu überzeugen.
2. Transparenz und Kontrolle ermöglichen
   Bei einem vorbestimmten Speiseplan ist eine detaillierte Einsicht in die Inhalte der Boxen in den kommenden Wochen wünschenswert. Liebevoll gestaltete Produktdetailseiten mit Fotos , Auflistung der Zutaten sowie Produktinformationen, bieten einen guten Einblick in die bestellte Ware. Auch Transparenz über Herkunft und Lieferbedingungen ist von großer Bedeutung. So können die möglichen Zweifel der Kunden genommen und Vorfreude auf die Boxen der kommenden Woche geweckt werden.
3. Vertrauen kreieren durch Reputation
   Um die vorhandene Skepsis gegenüber der Bestellung von Lebensmitteln entgegen zu wirken, muss das Vertrauen der Kunden gewonnen werden. Die Kundenzitate und Presseberichte fördern die Glaubhaftigkeit des Anbieters. Auch guter Kundenservice und Kontaktmöglichkeiten können das Vertrauen in den Anbieter fördern.
4. Flexibilität bieten
   Die Boxen sollten einfach den eigenen und schnell wechselnden Bedürfnissen der Kunden anpassbar sein. Kurze Laufzeiten, deutschlandweite Lieferung und flexible Lieferzeiten sowie einzeln buchbare Extras gewährleisten Flexibilität und geben die Kontrolle über seinen Speiseplan zurück.
5. Niedrige Einstieghürde schaffen
   Durch kurzweilige Videos auf der Homepage kann das Konzept verdeutlicht werden.
   Mit Hilfe von zielgruppenspezifischen Angeboten (siehe Personas), kann die Auswahl der richtigen Produktvariante vereinfacht werden. Zur Gewinnung von Neukunden können auch zwanglose Probierangebot und Geschenkgutscheine helfen.
6. Konfigurationsmöglichkeiten anbieten
   Es ist wichtig verschieden Produktvariationen und logische Filtermöglichkeiten anzubieten, um die Boxen einfach verschiedenen Bedürfnissen anpassen zu können. Denn gerade Zielgruppen, die Aufgrund von Gesundheits-, Lebensanschauung- oder Religionsaspekten z.B. gluten frei, vegan oder koscher und somit einen Mehraufwand beim Lebensmitteleinkauf haben, könnten einen solchen Service sehr zu schätzen wissen.
7. Positive User Experience gewährleisten
   User Experience ist bei Lebensmitteln besonders wichtig, da Essen so viel mehr ist als pure Nahrungsaufnahme. Es spielen nicht nur der Geschmack und die Inhaltsstoffe, sondern auch die vielen sozialen Faktoren bei der Nahrungsmittelbeschaffung und -zubereitung eine Rolle. Da die Erfahrung des Offline Einkaufes fehlt, sollte bei der Gestaltung besonders auf den „Joy of Use“ Wert gelegt werden.

Das neuartige Konzept und die untersuchten Webseiten bieten interessante Ansätze und Perspektiven. Der Markt ist schwierig, aber gerade deshalb noch sehr chancenreich. Die möglichen Zielgruppen sind neben Berufstätigen, Alleinerziehenden und Familien auch Silver Surfer.

Durch das Bieten echten Mehrwertes, eine gute Usability und ein ganzheitliches User Experience Design sollte versucht werden, die Nutzer nicht nur satt -sondern auch rundum glücklich zu machen.

Hat ein neuer Kunde den Weg auf die Site oder den Online-Shop gefunden, ist die erste Hürde genommen. Ob durch teure Marketing-Maßnahmen oder schlichte Weiterempfehlung, Social Media-Kanäle oder Offline-Präsenz – auf irgendeine Weise ist der Nutzer auf die Site aufmerksam geworden und schaut sich interessiert um. Doch auch beeindruckende Besucherzahlen nützen nichts, wenn der Nutzer zur „Eintagsfliege“ wird: Um die Site positiv in Erinnerung zu behalten und im besten Falle wiederzukommen oder etwas zu kaufen, müssen Erlebnisse geschaffen werden. Der Nutzer muss positiv überrascht, begeistert oder durch irgendetwas gefesselt werden. Doch wie kann dies erreicht werden? Welche aktuellen Ideen und Trends lassen sich hier identifizieren?

Insgesamt ist zu beobachten, dass bereits klassische Seitentypen wie beispielsweise eine Produktübersicht im Online-Shop ansprechender und inspirierender geworden sind. Eine schlichte und starre Auflistung von Produkten ist meist nicht mehr zeitgemäß. Immer mehr Shops ermöglichen es den Nutzern, Ansichten individuell zu verändern, heben Bilder stärker hervor als Merkmale und gestalten Übersichtsseiten interaktiver. Dies kommt vor allem jüngeren Zielgruppen entgegen, die sich meist länger auf diesen Seiten aufhalten und hier ihre Entscheidung treffen.

Ein nicht mehr ganz neues aber dennoch gutes Beispiel für Interaktivität findet sich zum Beispiel bei Marc O‘Polo. Hier sind zum einen die Abbildungen recht groß und zusätzlich können innerhalb des Bildes weitere Ansichten durch Pfeilsymbole aufgerufen werden. Im Gegensatz zu den klassischen Vorderansicht/Rückansicht-Wechseln können hier mehrere Abbildungen integriert werden:

Übersichtsseiten sind interaktiver geworden und ermöglichen z.B. das Betrachten mehrerer Ansicht wie hier über Pfeilsymbole, die bei Mausberührung erscheinen.

Gelingt die Suche nach Produkten oder Inhalten leicht und sind die angebotenen Funktionen intuitiv bedienbar, ist ein erster großer Schritt in Richtung „Verweilen“ getan. Denn gerade bei Erstnutzern ist die Toleranzschwelle oft sehr gering: Funktioniert etwas nicht wie erwartet, finden sie sich nicht zurecht oder lädt die Seite zu lang, verlassen sie das Angebot auch schnell wieder.

Noch stärker in den Vordergrund rücken die Produkte in der Kollektionsansicht von Barts. Eine Abbildung erstreckt sich fast über den gesamten Screen. Die Navigation wird nur bei Bedarf über das Logo angezeigt, die Auswahl der Produkte erfolgt über ein Laufband am unteren Seitenrand. Die Artikelmerkmale treten also zunächst komplett in den Hintergrund, der Nutzer soll vor allem zum Stöbern und Ausprobieren angeregt werden und sich dadurch intensiv mit der Seite beschäftigen.

Die Produkte bzw. deren Abbildungen treten stark in den Vordergrund, wie hier bei Barts. Ein interaktives Laufband ermöglich das Erkunden der Kollektion und direkte Anwählen eines Produktes.

Einen ähnlichen Weg zu einer emotionaleren Produktpräsentation hat das Label Strellson eingeschlagen: In einer separaten Kategorie „Brand Experience“ werden die Kollektionen großflächig inszeniert. Die Bilder ordnen sich quasi erst beim Scrollen im Sichtfeld des Nutzers an, wodurch ein sehr dynamischer Eindruck entsteht, der zum Weiterscrollen animiert, weil bei jeder Mausbewegung sofort eine Reaktion erfolgt:

Besonders individuell und interaktiv sind die ebenfalls nicht selten anzutreffenden Produktkonfiguratoren. Im Bereich Mode oder gar Schuhe gibt es jedoch bisher recht wenig positiv Beispiele. Gelungen ist der Creator von Converse. Der Schuhe kann in jedem Detail individuell verändert werden. Eine Vorschau des Ergebnisses ist jederzeit sichtbar, was den Spaß-Faktor definitiv erhöht. Zudem ist für den Nutzer jederzeit erkennbar, wie weit seine Kreation fortgeschritten ist und er muss nicht zwingend sofort kaufen, sondern kann den Status auch speichern oder mit anderen teilen. Diese Transparenz gepaart mit einer einfachen Bedienung und ansprechendem Layout animieren dazu, immer neue Kreationen auszuprobieren. Da der Schuh quasi die ganze Zeit „zum Greifen nah“ ist und das ganze dazu noch Spaß macht, bleibt die Nutzung im Gedächtnis.

Der Converse Schuh-Konfigurator ist intuitiv und transparent gestaltet. Durch das sofortige Erfolgserlebnis (Sichtbarkeit der Einstellungen) wird der Nutzer motiviert, viele Farben und Styles auszuprobieren und sich somit intensiv mit dem Schuh zu beschäftigen.

Ein weiteres Beispiel wie die Verweildauer auf einer Site gesteigert werden kann, sind Artikel oder Informationen, die nur marginal mit dem eigentlichen Thema zu tun haben, die Zielgruppe aber potenziell trotzdem interessieren. So unterstellt Marc O’Polo seinen Nutzern, dass Kreatives und Schönes aus aller Welt sie anspricht. In den so genannten „Stories“ geht es deshalb nicht nur um Mode, sondern um Architektur, Technik, Möbel, Wein oder Personen. Durch ansprechende Fotos soll der Nutzer aufmerksam gemacht werden und die Artikel lesen. Diese Rubrik ist vielleicht vergleichbar mit Blogs oder Magazinen, die man auf anderen Sites findet, aber weniger interaktiv, sondern eher inspirierend.

Bei Marc O’Polo sollen Artikel zu verwandten Themen oder Hintergrundinformationen zum Lesen und damit Verweilen anregen.

Auf die Spitze treibt es das Label Lacoste, welches neben dem Shop das Lacoste Universe sowie die Website Lacoste Live! eingerichtet hat. Hier finden sich zahlreiche Hintergrundinformationen, Videos, Events, Kampagnen, Städte-Tipps sowie ein Blog. Auch Spiele hat Lacoste im Angebot, um den Nutzer zu unterhalten und spielerisch immer wieder die Produkte vor Augen zu führen.

Über die Lacoste World sind Spiele wie der „Polo-Zauberwürfel“, das „Polo-Kaleidoskop“ und ein interaktiver Zeitstrahl durch die „Polo-Vergangenheit“ aufrufbar.

Lacoste Live! Bietet zahlreiche Hintergrundinformationen und Markeninformationen losgelöst vom Online-Shop. Die abgebildete Navigation soll einen Überblick über die Inhalte geben. Die Darstellung verschiedener Looks ist nur eins von vielen Beispielen zur Erkundung der Marke.

Zusammenfassend lässt dich festhalten, dass eine intuitive Bedienung und eine optisch sowie funktional erwartungskonforme Website die Basis für verweilende und wiederkehrende Nutzer darstellen. Je nach Zielgruppe können zudem spielerische Elemente, Hintergrundinformationen, große Bilder und dynamische Darstellungen den Nutzer positiv überraschen und binden. Gelingt es Interaktivität, Zusatzinformation und Spaß mit den angebotenen Produkten sinnvoll zu verknüpfen, bleibt das Nutzungserlebnis im Gedächtnis und die Wahrscheinlichkeit einer Wiederkehr oder Weiterempfehlung steigt.

Haben Sie Interesse an weiteren “Good Practices”? Auch zu anderen Themen und Anwendungen?

Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

In gedruckter Form findet man Listen noch häufiger als im Web, da es auf Papier keine Suchfunktion gibt.

Listen sind das Getreide von Websites – wenig spannend, aber dennoch unverzichtbare Zutat für praktisch jede Site. Listen können langweilig sein, ihre Benutzung frustrierend. Und doch kann man selten auf sie verzichten, viele Ergebnisse lassen sich kaum anders darstellen.

Der Witz ist meistens das Drumherum, die Würze. Mit den richtigen weiteren Zutaten wird aus einer langweiligen Liste ein effizientes Instrument für Ihre Benutzer, dessen Gebrauch sogar Spaß macht.

Um Ihnen die Umsetzung solcher Listen zu ermöglichen, habe ich mir für diesen Beitrag Listen über Listen auf Sites verschiedenster Kategorien, Größen und Branchen angesehen und deren Gemeinsamkeiten sowie ihre Vor- und Nachteile untersucht.

Wofür Listen eingesetzt werden

Navigation

Listen sind noch häufiger, als man zunächst denkt. Es beginnt bei der Navigation: Das Menü ist eine Liste. Diese ist heute meist horizontal angeordnet und führt die Hauptkategorien der Site auf. Menü bedeutet übrigens ursprünglich die Speisefolge. Für die schriftliche Auflistung der Speisefolge wurde der Begriff Menü übernommen, und schließlich ist er für Speisekarten üblich geworden. Das Menü einer Site zeigt dem Benutzer also die gebotene Auswahl als ordentliche Liste.

Aufzählungen im Text

Als Gestaltungselement sind Listen im Text sehr wertvoll. Sie

• gliedern die Inhalte,
• machen sie leichter überfliegbar und
• lockern das Erscheinungsbild der Seite auf.

Bei jedem Text, der länger als drei, vier Absätze ist, sollten Sie überlegen, ob sich nicht zumindest ein Absatz als Liste darstellen lässt.

Einfache Listen

In manchen Fällen ist die Liste selbst die Information. So zum Beispiel bei einer Liste, welche die Pflanzenarten aufzählt, die in einem bestimmten Botanischen Garten wachsen. Für den botanisch Interessierten ist diese Liste alles, was er braucht.

Telefonlisten sind wunderbar einfach – sie bieten auf einen Blick die gesamten Informationen, die der Nutzer sucht.

Eindimensionale Listen

Bei einem Verzeichnis von Telefonnummern oder einer Liste von Ansprechpartnern kann man nicht viel falsch machen. Die Sortierung ist hier meist klar: Alphabetisch nach Nachname, dann nach Vorname. Es folgt die Telefonnummer oder auch die Mailadresse. Über eine fehlende Sortierungsmöglichkeit nach Telefonnummern wird sich kein Nutzer beklagen.

Auch bei solchen Listen sollte kein Klick nötig sein, um das gewünschte Ergebnis (die Telefonnummer) zu erreichen.

Listen gleichartiger Elemente

Eine Liste mit Druckertreibern im Support-Bereich einer Website zum Beispiel enthält ähnlich wie eine Liste mit Ansprechpartnern nur gleichartige Elemente. Alle haben die gleichen Metatdaten und lassen sich nach diesen sinnvoll sortieren. Wichtig ist hier, dem Nutzer möglichst schnell klarzumachen, welches Element das ist, was er sucht. Daher müssen alle relevanten Informationen für jeden einzelnen Listeneintrag direkt angezeigt werden. Nicht relevante sollten nicht zu sehen sein, sie erschweren sonst die Suche unnötig.

Druckertreiber, Datenblätter, Updates - solche Listen sind am besten so kurz wie möglich (www.epson.com).

Bei solchen Listen sucht der Nutzer nur ein bestimmtes Element, an allen anderen hat er kein Interesse. Sie sollten also versuchen, Suche wie auch Anzeige so fokussiert wie möglich zu gestalten.

Ein weiteres Beispiel für solche Listen gleichartiger Elemente sind Veröffentlichungen. Diese haben etwa folgende Metadaten:

• Autor
• Titel
• Veröffentlichungsdatum
• Publikation

Trefferlisten von Suchmaschinen

Im Gegensatz zu Telefonlisten beispielsweise sind Trefferlisten immer nur ein Zwischenschritt, nicht das Ziel. Der Suchende klickt schließlich auf einen der Treffer in der Liste und kommt so – hoffentlich – zu dem, was er sucht.

Ob eine Suchmaschine wie Google oder die interne Suche einer Site – die Ergebnisse werden praktisch immer in Form einer Liste ausgegeben.

Ein großes Problem hierbei ist, dass die gefundenen Elemente sehr unterschiedlich sind. Auf den Listen finden sich Infos über Orte, Personen, Telefonnummern, Druckertreiber, Bücher, Elektrogeräte und vieles mehr. Die große Kunst ist hier, dem Nutzer die Metainformationen zu präsentieren, anhand derer er beurteilen kann, hinter welchem Treffer sich das verbirgt, was er sucht.

Produktlisten

Produktlisten können auch das Ergebnis einer Suche sein. Genauso erreicht man sie bei den meisten Sites über die Navigation nach Kategorien.

Ganz anders als etwa bei einer Liste von Druckertreibern müssen Sie bei Produktlisten davon ausgehen, dass die meisten Benutzer noch nicht genau wissen, was sie suchen. Sie wollen sich oft zunächst nur ansehen, welche Produkte in Frage kommen für sie. Die Anzahl der Informationen zu jedem einzelnen Eintrag muss daher relativ hoch sein. Als Mindestes:

• Foto
• Name
• Kurzbeschreibung
• Preis

Allein die Forderung einer Abbildung macht es unmöglich, solche Listen einzeilig anzulegen. Es gilt, so viele Elemente wie möglich unterzubringen, wobei immer die Übersichtlichkeit sichergestellt sein muss.

So kompakt wie möglich, so detailliert wie nötig – so sollten Trefferlisten von Produktsuchen sein (wexcameras.de).

Auf keiner Produkttrefferliste fehlen sollte ein Link zum Bestellen bei jedem einzelnen Listeneintrag. Wer schnell entschlossen ist und schon genau weiß, was er sucht, kommt so direkt zum Ziel.

Eine ganz besondere Darstellung der Suchergebnisse hat Elske Ludewig vor einiger Zeit hier vorgestellt: Eine Seite, vier Spalten, voller Bilder – die etwas andere Produktsuchmaschine

Sonderfall Veranstaltungslisten

Veranstaltungen sind vom Prinzip her ebenfalls Produkte, nur sind sie durch wenige Metadaten kategorisiert:

• Name der Veranstaltung
• Ort
• Termin
• Dauer
• Preis

Hinzu kommen natürlich je nach Veranstaltungstyp noch Künstlername, gespielte Werke und einige wenige Angaben mehr.

Veranstaltungslisten lassen sich wegen dieser überschaubaren Anzahl an Merkmalen ihrer Elemente sehr gut zusammenfassen und übersichtlich darstellen. Abbildungen ließen sich hier auch einsetzen, das habe ich aber bei keinem Beispiel gefunden. Ich vermute, dass das nur praktische Gründe hat – anders als bei Produkten sind viele Veranstaltungen nur einmalig im Angebot, und dafür ist der Aufwand, Bilder einzupflegen, relativ hoch.

Veranstaltungslisten lassen sich gut kompakt darstellen, weil die Einträge so gleichartig sind (hamburg.de).

Den Überblick behalten

Ein ganz wichtiger Aspekt langer Listen ist, wie der Benutzer mit ihnen umgehen kann. Eine Telefon- oder Pflanzenart-Liste braucht normalerweise keine Sortierfunktionen, bei Produktlisten ist das aber fast unverzichtbar – zumindest, wenn es mehr als eine Handvoll Produkte sind.

Sehr schön sind die unterschiedlichen Möglichkeiten beschrieben im Beitrag Ordnung ins Chaos bringen.

Und die verschiedenen Möglichkeiten zur Sortierung finden Sie hier dargestellt: Sortierfunktionen bei Online-Shops

Was ich darüber hinaus noch gefunden habe an Ordnungs- Interaktionsmöglichkeiten:

• Sprungmarken am Anfang der Liste zu Bereichen (wie z. B. Anfangsbuchstaben); jeweils am Ende der Bereiche Link zum Seitenanfang
• Aufklapper (für Produktdetails oder untergeordnete Listeneinträge)
• Reiter (um die Treffer in Kategorien einzuteilen oder verschiedene Ansichten anzubieten)

Was sich bei längeren Produktlisten ebenfalls bewährt:

• Eingrenzung durch Filter (Facetten)
• Layer, die bei Rollover erscheinen und einige weitere Infos zum Produkt (bzw. auch zu Sortierkriterien etc.) anzeigen
• Popups, die zusätzlich zur angezeigten Seite aufgehen und wichtige/umfangreiche Hintergrundinfos zeigen

Zum Abschluss noch eine letzte Listendarstellung, die selten eingesetzt wird, aber manchmal gut für einen Überblick geeignet ist: Hierarchische Listen. Am häufigsten findet man sie bei Sitemaps. Aber auch für eine Darstellung von nach Kategorien von Waren ist so eine hierarchische Liste denkbar.

Sind Ihnen noch weitere, vielleicht sogar innovative Listendarstellungen aufgefallen in letzter Zeit?

Warum?

Weil ich einmal wieder schlechte Nachrichten überbringen musste. Dem neuen Kunden mitteilen musste, dass er das geplante Release in ein paar Wochen tunlichst nicht durchführen sollte aufgrund erheblicher, im abschließenden Usability-Test identifizierter Nutzungsprobleme.

Ok, wir UXler werden nun einmal für Forschung und konstruktive Kritik bezahlt. Aber manchmal schlägt es mir dann doch aufs Gemüt. Besonders dann, wenn ich schon beim ersten Telefonat merke, dass es so kommen muss.

Die jetzige Einsicht des Kunden, dass er es von Anfang an besser hätte machen können und zukünftig eine frühzeitigere, nutzerzentriertere Vorgehensweise wählen wird, ist toll (Einsicht ist der beste Weg …) Dennoch muss er sich nun gegenüber dem Lenkungsausschuss rechtfertigen. Und dies wird auch auf uns als Berater abfärben, unabhängig davon, zu welchem Zeitpunkt wir hinzugezogen wurden. Prekär, da es doch der Erfolg unserer Kunden und deren Zufriedenheit sind an denen wir uns stetig messen.

Dabei könnte vieles doch so einfach sein…

Die gute alte DIN-Norm hilft beim Sparen

…denn seit 2000 existiert die DIN EN ISO 13407 ‚Benutzer-orientierte Gestaltung interaktiver Systeme‘, die einen prototypischen, benutzerorientierten Softwareentwicklungsprozess in folgenden Teilaktivitäten beschreibt:

1. Nutzungskontext verstehen
2. Anforderungen spezifizieren
3. Lösungen produzieren (Prototyping, Mockups)
4. Lösungen bewerten (z.B. per Usability-Test)

Erst ganz am Ende steht die tatsächliche, programmiertechnische Umsetzung! (Hinweis: Ab Januar 2011 ist als Ersatz für diese Norm die EN ISO 9241-210 ‚Prozess zur Gestaltung gebrauchstauglicher Systeme‘ gültig.)

Nun gut, unsere Projekterfahrungen zeigen, dass  diese Vorgehensweise besonders im B2B / Industrie-Umfeld immer noch nicht gänzlich angekommen zu sein scheint. Deswegen wiederhole ich mich gerne auch immer wieder und missioniere; eben weil mir dieses Thema so wichtig ist.

Denn: je frühzeitiger man sich bei der Produktentwicklung (ganz gleich, ob Website, Mobile, Intranet, Software, etc.) mit den Anforderungen seiner Nutzer beschäftigt, diese in bedingt-funktionale Prototypen umsetzt, etc., desto mehr kann man sparen: ZEIT, GELD und vor allem NERVEN. Ganz nebenbei bekommt man am Ende noch eine bessere, nutzerfreundlichere Anwendung heraus.

Zurück zur Geschichte…

Vor 2 Monaten klingelt wie so oft am späten Freitagnachmittag das Telefon: Ein potentieller Neukunde möchte einen abschließenden Usability-Test durchführen; möglichst zeitnah, da sie bereits mitten in der Programmierung der neuen Version Ihrer Webapplikation sind. In 2 Monaten ist Releasetermin. Da muss dann alles stehen.

Zielgruppe: Klein-/Großkunden bzw. (Normal- und Power-User) im B2B-Bereich.

Meine Frage, inwiefern die Kundenforderungen erhoben und in die neue Version eingeflossen sind, wird wie folgt beantwortet: „Wir haben unsere Großkundenbetreuer gefragt, die sind ganz nah dran am Kunden und unseren Support.“

Meine Gegenfrage: „Haben sie zwischenzeitlich im Projektverlauf immer mal wieder Kundenfeedback eingeholt – sowohl von den Normal- als auch Power-Usern?“ Antwort vom Kunden: „Nein, das wollen wir ja nun mit Ihnen tun, wenn unsere Betaversion voll funktionstüchtig und stabil ist.“

Ich verzog meine bislang gut gelaunte Miene und hätte am liebsten folgendes Geräusch gemacht: “Plumps!“, um dem Kunden zu signalisieren, dass das Kind bereits in den Brunnen gefallen war.
Stattdessen erwähnte ich meine Bedenken höchst diplomatisch und schritt zur Tat: „Natürlich unterstützen wir Sie gerne bei diesem Projekt: erstellen gemeinsam mit Ihnen ein Studienkonzept, rekrutieren in Absprache mit Ihnen die passenden Probanden, führen die Interviews, werten die Beobachtungen und Aussagen aus und liefern Ihnen einen managementorientierten Bericht mit konkreten Handlungsempfehlungen.

Gesagt getan… Während der Erhebung und deren Beobachtung durch eine Handvoll Kunden bot sich dann das befürchtete Szenario (kommt leider öfters vor, wenn erst am Ende eines Projektes ein Usability-Test gemacht wird): alle Beobachter, schreien mehr oder weniger laut auf, wenn die Probanden Probleme haben/nicht weiterkommen. Die einen, weil sie nicht den Grund dafür nicht („das liegt doch klar auf der Hand/guck doch nur hin.“); die anderen, weil „sie es ja schon immer gesagt haben, dass das nicht funktioniert.“

Den Rest der Geschichte bis hin zur heutigen Ergebnispräsentation kennen Sie ja bereits…

Was lernen wir aus dieser Geschichte?

Anforderungsanalysen und frühzeitiges Prototyping mit bedingt-funktionalen(!) Prototypen sind das A&O und der Garant dafür, Projektzeitpläne & Budget besser einhalten zu können und im gesamten Team für bessere Laune zu sorgen.

Meine Kollegin Frau Struckmeier hat einen vertiefenden Artikel zum Thema „Iterativ testen – Warum eigentlich?“ verfasst, auf den ich gerne verweise.

Sofern jedoch nicht nur der Bedarf an iterativem Testing (Rapid Prototyping) besteht, sondern der gesamte Entwicklungsprozess (Anforderungsanalyse, Konzeption, Testing und Design) in die Hände einer erfahrenen UX-Agentur gelegt werden soll, kann ich folgenden Link empfehlen: User Experience Konzeption (hier finden Sie erfolgreiche Projektbeispiele).

Ihre Meinung

Gerne können Sie mir auch Ihre Projekterfahrungen mitteilen. Ging es Ihnen bereits auch schon einmal so wie mir? Haben Sie andere Erfahrungen sammeln können – ganz gleich, ob auf Kunden- oder Agenturseite?
Ich freue mich auf Ihre Kommentare zu diesem Thema.

Dann ist mein Seminarangebot „Shop-Clinic @ eResult“ für Sie genau das Richtige.

Ziel: Sicherung und Ausbau des Erfolgs Ihres Online-Shops.

Inhalt & Ablauf der eResult Shop-Clinic

Ich stelle zu Beginn neueste Erkenntnisse und Erfahrungen aus Usability-Tests und Beratungsprojekten für Online-Shops dar.

• Mit welchen Verfahren werden Online-Shops analysiert,
  getestet und optimiert?
• Welche Erkenntnisse schaffen Usability-Tests?
• Welche Good Practices gibt es bei der
  Gestaltung und Nutzerführung auf Online-Shops?

Die Erkenntnisse werden in Form von Projekt- und Fallstudienberichten veranschaulicht. Im Fokus steht dabei die Verdeutlich des Nutzens einer systematischen, am Kunden & Nutzer ausgerichteten Shop-Optimierung.

Bei der Vorstellung von Good Practices greife ich auf einen Pool mit mehr als 3.000 Fundstücken zur Gestaltung von Online-Shops zurück:
Von der Startseite, über die Produktdetailseite bis hin zum Bestellprozess liefert dieser Pool wertvolle Anregungen für die Optimierung Ihres Online-Shops.

Danach wird es noch konkreter!

Gemeinsam analysieren wir Ihren Online-Shop und auch die Online-Shops der anderen Teilnehmer/-innen– in einer moderierten, quasi expertenbasierten Gruppenexploration.

So wird das zuvor vermittelte Wissen angewendet, vertieft und im Team werden für jeden Online-Shop Optimierungsmaßnahmen erarbeitet.

Dabei wird auch verdeutlicht in welcher Form Erkenntnisse aus Usability-Analysen aufbereitet und dokumentiert werden sollten.

Ich stelle dazu einen pragmatischen User Centered Design Ansatz vor, beschreibe Möglichkeiten zur toolbasierten Erstellung von Scribbles, Wireframes und Prototypen bzw. Dummys.

Ihre Vorteile, Ihr Nutzen …

Sie werden am Ende des Tages ganz konkrete Optimierungen für Ihren Online-Shop mitnehmen, Optimierungen die zu mehr Umsatz und höherer Konversionsrate führen.
Zugleich lernen Sie die unterschiedlichen Usability-Methoden und Verfahren kennen, und können damit ausgestattet sowohl eigene Tests besser durchführen als auch entsprechenden Leistungen bei UX-Agenturen anfragen und deren Angebote besser vergleichen.

Das Seminar findet am 15.10.2013 in Kassel statt (pentahotel) – im Rahmen der plentymarkets Academy.

Teilnahmebeitrag/Kosten: Verpflegungspauschale in Höhe von 34,90 € (zzgl. MwSt.).

Anmeldung direkt an:Thorsten Wilhelm

Bitte beachten Sie:
Die Teilnehmerzahl ist begrenzt!

Die Zusage zur Teilnahme erfolgt in Reihenfolge der per Mail eingehenden Anmeldung.

Interesse an weitergehenden Informationen?
Schreiben Sie mir, für Ihre Fragen und Wünsche bin ich gern für Sie da.

1. 

   Die Zeit für Couch-Commerce ist (über)reif – mehr Umsatz und Conversion durch Tablet-optimierte Webshops
   Autor: Martin Beschnitt (eResult GmbH)

   Warum sind Nutzer die über Tablets surfen so kauffreudig? Wie hoch sollten Konversionsraten sein, wenn Nutzer mit einem Tablet auf Ihren Shop zugreifen? Und schließlich: Wer bietet schon heute kundengerechte, für den Zugriff über Tablets optimierte Webshops?
   Martin Beschnitt bieten Ihnen Antworten auf genau diese Fragen. Sein Beitrag wartet mit zahlreichen Studienergebnissen auf, begründet die Notwendigkeit eines Tablet-optimierten Shops und stellt Good Practices – touch.ebay.com, t.bonprix.de und t.staples.com – vor.
   9 konkrete Tipps zum Gestalten von Tablet-optimierten Web-Shops geben Ihnen wertvolle Anregungen und Hinweise für aktuelle oder zukünftige Projekte. Zum Beitrag »

2. 

   Design im Wandel: Online-Shops für Unterhaltungselektronik setzen auf schlichtere Farben
   Autor: Nadine Wolfframm (eResult GmbH)

   Wissen Sie noch, wie der Online-Shop von Conrad im Jahr 2007 aussah?
   Oder Vobis.de, Hoh.de, Cyberport.de: Wie haben sich diese Online-Shops im Zeitraum 2007-2013 gewandelt?
   Nadine Wolfframm hat diesen Wandlungsprozess von Jahr zu Jahr dokumentiert und beobachtet; im Rahmen ihres Projekts „Design im Wandel“ unter anderem für Online-Shops als dem Bereich der Unterhaltungselektronik.
   Ihr Ziel: Identifikation von Design-Trends.
   Ihre Ergebnisse: Farben werden deutlich sparsamer eingesetzt, Produkte rücken bereits auf der Startseite in den Vordergrund und …
   Schauen Sie selbst nach. Es lohnt sich. Die Bildergalerien zu den Shops mit Startseitenscreens von 2007-2012 werden Ihnen jede Menge Inspiration bieten – und Erinnerungen wecken. Zum Beitrag »

3. 

   Produktdetailseiten chinesischer Online-Shops – Fundstücke
   Autor: Anna Metzger (eResult GmbH)

   Festhalten – und Vieles über Bord werfen, was Sie über die Erfolgsfaktoren guter Produktdetailseiten gelernt haben!
   Ausgestattet mit diesen Hinweisen sollten Sie sich den Beitrag von Anna Metzger ansehen. Es lohnt sich – auch für diejenigen, die bisher noch gar nicht daran dachten einen Online-Shop für Chinesen aufzubauen. Auch sie werden Anregungen und Ideen mitnehmen.
   Aber Vorsicht: Die Ideen nicht einfach so auf Deutschland übertragen. Deutsche Online-Shopper haben garantiert in einigen Bereichen andere Erwartungen und Vorstellungen an gute Produktbeschreibungen auf Online-Shops. Zum Beitrag »

Wir begrüßen neu in den Reihen der Blogautorinnen & -Autoren:

Ulrich Kaleta ist seit 2008 Direktor Marketing bei notebooksbilliger.de. In dieser Funktion arbeitet er auch an der Optimierung des Online-Shops und erzielt dabei durch viele vermeintliche Kleinigkeiten große, den Erfolg steigernde Wirkungen. Zuvor war er bei den Unternehmen BRITA GmbH und BBDO InterOne GmbH im Management tätig. In seinem ersten Beitrag auf Uabilityblog.de bietet er Einblicke in die Erfolgsfaktoren von notebooksbilliger.de und verdeutlicht, weshalb „Liebe zum Detail“ für Online-Shops immer wichtiger wird.

Ulrich Kaleta Direktor Marketing (notebooksbilliger.de AG)

Kommen wir noch zu den Zahlen und Fakten aus dem April 2013:

• 638.380 Seitenaufrufe (+ 93 % gegenüber März 2013)
• 152.762 Besucher (+ 21 %)
• 1.680 Twitter Follower (+ 1 %)
• 2.560 RSS-Feedabrufe pro Tag

Besten Dank an alle Autoren und Leser.

Bei Outfittery wird in einzelnen Schritten der Typ abgefragt. Welche Haarfarbe man hat, welches Auto einem gehören könnte, welche Farbe man mag usw.
Zum Schluss gibt man an, welche Kleidungstücke man momentan am ehesten gebrauchen kann und wie viel Geld man dafür grundsätzlich ausgeben würde. Abschließend wird die persönliche Stilberaterin mit Namen, Foto und Beschreibung vorgestellt. Nach der Anmeldung tritt die Stilberaterin mit einem in Kontakt und eine Kleiderauswahl wird besprochen und versandkostenfrei nach Hause geschickt.

Abb. 1 Fragebogen auf outfittery.de

Das Vorgehen ist bei 8select etwas anders als bei Outfittery. Es wird auch an Hand eines Fragebogens der jeweilige Stil ermittelt und nach der Notwendigkeit von bestimmten Kleidungsstücken und deren Passform gefragt.

Abb.2 Fragebogen auf 8select.de

Anschließend gibt es noch einen weiteren Fragebogen zur jeweiligen Produktkategorie z.B. Hemden. Dort wird abgefragt welche Marke man gern trägt, welche Farbe man bevorzugt, den Preis den man bereit ist zu zahlen und welche Menge im Showroom berücksichtigt werden soll.

Abb.3 Katgorie-Fragebogen auf 8select.de

Auf 8select wird dem Nutzer eine Auswahl verschiedener Kleidungsstücke von einem Modeberater in einem Showroom zur Verfügung gestellt. Das hat den Vorteil, dass schon vor Versenden des Kleidungspaketes eine Auswahl getroffen wird und somit Retourkosten gespart werden können.
Der Showroom lässt sich vergleichen mit einem Warenkorb. Es wird zu den jeweiligen Wunschartikeln ein Vorschlag gemacht und andere Vorschläge leicht ausgegraut angeboten. So wird klar, dass diese noch nicht mit in der Auswahl sind. Durch die Änderung der Menge kann der jeweilige Artikel „aktiviert“ und zum Kleiderpaket hinzugefügt werden.

Abb. 4 Showroom auf 8select.de

Auf Modomoto meldet man sich auch zunächst an und bekommt dann ebenso einen Fragebogen.
Dieser fällt weniger umfangreich aus. Es wird kaum auf den Stil des Interessenten eingegangen, sondern eher auf die bevorzugten Eigenschaften in einer Produktkategorie. Am Ende des Fragebogens kann man sofort eine Bestellung losschicken. Durch die Auswahl der Artikel die gefallen und der Wünsche die man selbst hat, wird auch hier durch Berater ein Kleiderpaket zusammengestellt.

Abb.5 Fragebogen auf Modomoto.de

Die Fragebögen sind bei allen drei Anbietern sehr intuitiv und durch die bebilderten Fragen auch schnell zu beantworten.

Bei Modomto hat ein Nutzer auch die Möglichkeit über eine App Kleidung zu bestellen. Entweder man hat einen Account und die Daten des Fragebogens sind hinterlegt oder man kann sich als Nutzer auch ganz neu in der APP registrieren und benötigt die Website gar nicht dazu eine Beratung zu erhalten. Die App ist sehr übersichtlich aufgebaut. Auch wird mit Hilfe desselben Fragebogens Geschmack und Kleidungswunsch abgefragt. Sehr gut umgesetzt ist die Möglichkeit in den einzelnen Kleidungskategorien seine Auswahl einfach per Touch auf ein Bild zu treffen und zu speichern.

Abb. 6 Screenshot Modomoto App

Bei der Umsetzung einer solchen App sollte darauf geachtet werden, dass sie auf einem Smartphone oder Tablet auch gut genutzt werden kann. Hier muss man teilweise zoomen, um alle Informationen im Fragebogen erkennen zu können.

Ein wichtiges Stichwort ist hier Responsive Design. Das heißt, das Design ist autonom und reagiert auf den Nutzer und dessen Anforderungen. Man fördert das Besuchererlebnis auf seine Internetseiten unabhängig vom Endgerät. Mein Kollege Martin Beschnitt hat sich dem Thema im Beitrag „Die Zeit für Couch-Commerce ist (über)reif – mehr Umsatz und Conversion durch Tablet-optimierte Webshops“ gewidmet.

Sind derartige Beratungsservices für Männer und Frauen gleichermaßen interessant?

Diese Frage habe ich mal aus meiner Sicht beantwortet. Frauen shoppen emotionaler und daher sind Dienste die Kleidungspakete zusammenstellen eher für Männer geeignet. Dennoch sind Beratungsservices im Bereich Figur und Farbe meist sehr interessant für Frauen. Dazu möchte ich gerne zwei kleine Fundstücke vorstellen.
Der Figurberater auf sheego.de führt durch einen Fragebogen der zunächst die Köpermaße abfragt. Diese gibt man sehr einfach durch Schieberegler an. Anschließend bekommt man seinen Figurtyp mit entsprechenden Tipps dazu angezeigt und im darauf folgenden Schritt eine Auswahl der Kleidungsstücke die diesen Figurtyp optimal in Szene setzen. Eine sehr schnelle und hilfreiche Beratung.

Abb.7 Figurberater auf sheego.de

Sheego bietet außerdem einen Outfitberater. In diesem hat der Nutzer die Möglichkeit ein Model mit der neuen Kollektion anzukleiden und verschiedene Outfits zu probiere. Diese virtuellen Anproben werden ja schon vielfach eingesetzt, aber ich möchte hier ein paar besondere Punkte hervorheben. Es wird ein menschliche Model für den „Umkleidebereich“ verwendet. Die Oberteile, Unterteile und Schuhe könne gleichzeitig auf der selben Höhe des jeweiligen Körperteiles ausgewählt werden. Das ermöglicht ein schnelleres kombinieren des Outfits. Besonders positiv ist mir die realistische Trageweise von Kleidungsstücken aufgefallen. Es besteht die Möglichkeit die Kleidung in mehreren Lagen zu probieren und sogar Jacken auf und zu zumachen. Alle Artikel die das Model trägt werden in einer Liste gespeichert und man hat die Möglichkeit dieses Outfit zu bestellen.

Abb.8 Outfitberater auf sheego.de

Hat schon jemand Erfahrungen mit solchen Diensten oder Beratungsservices gemacht und kann darüber berichten?

Nutzerorientierter Inhalt: weg vom Laufsteg

Die Präsentation auf dem Laufsteg ist gut für Modenschauen, für den Online-Shop sind die Laufstegvideos jedoch viel zu hektisch. Viele Nutzer beschweren sich in Usability-Tests, dass solche Videos zu schnell sind, so dass das Produkt nicht im Detail betrachtet werden kann. Sie sehen entsprechend keinen Mehrwert darin. In der aktuellen Umfrage zu Videos bewertetet die Befragten ein Produktvideo, bei dem auf den Laufsteg verzichtet wurde besser. Als Begründung gaben einige an, dass sie das Produkt besser rundum betrachten können. Ein Laufstegvideo wirke dagegen hektisch, abgehoben, realitätsfern.

Eine Alternative zu Laufstegvideos ist die Präsentation wie auf einem Podest. Auf amazon.com z. B. bewegt sich das Model ganz leicht auf einer Stelle und dreht sich anschließend um sich selbst. Dies verursacht keine Hektik bei dem Nutzer und reicht aus um zu erkennen wie der Stoff fällt.

Ein anderes gutes Beispiel für ein dezentes, ruhiges Video habe ich beim britischen Online-Shop Marks & Spencer (M&S) gefunden. Hier ist das Video zweigeteilt, um auch eine vergrößerte Videoaufnahme des Produkts anzuzeigen. Der Videoausschnitt bewegt sich ganz langsam über das Produkt von oben nach unten. Daneben ist eine Volldarstellung des Models zu sehen.

Marks & Spencer: zweigeteiltes Video

Während im Modebereich das Video überwiegend, dazu genutzt wird die Wirkung des Produkts zu transportieren, ist bei Funktionskleidung mehr der Expertenrat gefragt. Für diesen Bedarf erwarten Nutzer, dass das Produkt im Detail vorgeführt wird und sind auch bereit das Video länger anzuschauen. Der britischen Anbieter von Ski-Kleidung SimplyPiste wird diesen Nutzererwartungen gerecht. Hier wird das Produkt im Video erklärt. Es werden Eigenschaften und Vorteile des Produkts aufgezeigt. Die Situation im Video gleicht der Beratungssituation im Geschäft vor Ort. Durch fast persönliche Beratung wird beim Nutzer Vertrauen geschaffen und Unsicherheit beseitigt.

SimplyPiste: Beratung im Video & Cross-Selling

Aufmerksamkeitsstarke Einbindung: automatischer Start

Auch wenn der Inhalt des Videos stimmt, nutzt es wenig, wenn der Nutzer es übersieht. Mehr Aufmerksamkeit kann auf das Video durch einen automatischen Start gelenkt werden. Damit muss man jedoch sehr vorsichtig sein. Automatisch startende Videos erinnern an Werbung, überfordern und können beim Nutzer den Weg-Klicken-Reflex auslösen. Das Video muss also sehr dezent und langsam sein und nicht wie ein Fremdkörper wirken. Auch das macht amazon.com sehr gut (siehe oben). Das Video startet hier automatisch, wenn die Produktdetailseite aufgerufen wird. Dies wirkt jedoch weder aufdringlich noch überfordernd, denn es wird ein nahtloser Übergang von der Produktabbildung zum Video geschaffen. Das Video startet nämlich mit einer eingefrorenen Sequenz, die etwa 5 Sekunden andauert. Man hat das Gefühl eine Produktabbildung zu betrachten. Danach erwacht die Produktabbildung zum Leben: das Model dreht sich und präsentiert das Produkt. Die letzte Sequenz gleicht dann wieder der Produktabbildung, die darauf folgt.

Kontaktwahrscheinlichkeit erhöhen: schon vor der Produktdetailseite anbieten

Videos können auch an frühere Stationen auf der costumer journey eingebunden werden. Z. b. werden im Online-Shop KIOMI Videos bereits auf der Kategorieeinstiegsseite eingebunden. Hier werden dem Nutzer neben den Kategorieeinstiegen im linken Bereich verschiedene Looks präsentiert. Über den im Video integrierten Link „Shop the Style“ gelangt der Nutzer zum Look und kann sich die einzelnen Bestandteile im Detail ansehen. Auch hier starten die Videos automatisch nach einer kurzen Verzögerung sind jedoch langsam und dezent, so dass der Nutzer damit nicht überfordert wird.

KIOMI: Video auf der Kategorieeinstiegsseite

Bei dem Online-Shop Saks Fifth Avanue sind Produktvideos bereits von der Produktübersichtseite abrufbar. Auf diese Weise kann der Nutzer sich das Produkt bereits in der Übersicht in action ansehen. Hierdurch wird bestimmt der eine oder andere unnötige Wechsel auf die Produktdetailseite eingespart.

Saks Fifth Avanue: Video auf der Produktübersichtsseite

Und darüber hinaus…

Ist der Inhalt und die Einbindung geglückt, können Videos noch weiteren Mehrwert bieten. Z. B. kann über Videos Cross-Selling betreiben werden. Hat der Nutzer nämlich ein gutes Produktvideo gesehen und für seine Entscheidungsfindung als relevant eingestuft, möchte er ggf. weiterhin nur Produkte ansehen, bei denen ebenfalls ein Video verfügbar ist. Ein Verweis auf andere Produkte mit Videos aus der gleichen Kategorie wäre an dieser Stelle sinnvoll. SimplyPiste (siehe oben) verweist auf den Produktdetailseiten auf weitere Produktvideos.

Weiterhin können Videos stärker zur Produktbindung beitragen, indem sie die Individualität der Produkte unterstreichen und Stimmung schaffen. Ein gutes Beispiel ist bei asos anzutreffen. Hier spielt zu verschiedenen Produkten unterschiedliche Musik. Im Anschluss an das Video wird der Nutzer auch über die Band und den Songtitel informiert. Zusätzlich zu der Verstärkung der Produktbindung entsteht auf diese Weise der Eindruck, dass die Produktdetailseiten mit Sorgfalt und Detailliebe zusammengestellt werden.

asos: individuelle Musik für die Produkte

Auch die Verbreitung der Bekanntschaft des Online-Shops über soziale Netzwerke könnte durch Videos gesteigert werden. Laut einer Studie der e-tailing group und invodo würden 41% der Online-Käufer ein Video eher als andere Medien (Bild, Text) über soziale Netzwerke teilen. Der amerikanische Online-Shop für Schmuck Ross-Simons bietet daher den Share-Link direkt im Video an. Bewegt der Nutzer die Maus über das Video wird zusätzlich zu der Kontrollleiste ein Share-Link angeboten. Empfehlungen sind über Facebook oder Twitter möglich.

Ross-Simons: Share-Link im Video

Tipps für Videos mit Mehrwert zusammengefasst:

• Nutzerorientierter Inhalt: Laufsteg ist für die Modenschau gut, für den Online-Shop aber nicht die beste Lösung – wichtiger ist, je nach Produkt,
• dass es im Detail betrachtet werden kann (dafür muss das Video langsam sein und/oder Details anzeigen) oder
• dass es erklärt wird.

• Aufmerksamkeitsstarke Einbindung durch automatischen Start, aber um den Nutzer Nutzer nicht zu überfordern…
• mit Verzögerung starten,
• dezentes Tempo wählen,
• nur einmal abspielen,
• bestenfalls einen Übergang zwischen Produktabbildungen und -video schaffen.

• Frühe Einbindung damit Videos bereits bei der Vorauswahl wirksam werden können:
• auch auf Kategorieeinstiegen und
• Ergebnisseiten möglich.

• Wozu man Videos noch nutzen kann:
• Cross-Selling über Verweis auf andere Produkte mit Videos
• Bessere Verankerung im Gedächtnis durch individuelle Musik
• Bekanntschaft erhöhen durch eingebundene Share-Links

Teil zwei? Ganz genau! Wer den ersten Teil verpasst hat und nicht weiß, was es mit Digital Natives auf sich hat, oder mehr Informationen über ihr Verhalten im Netz haben möchte, ist herzlich dazu eingeladen das nachzuholen; dazu hier entlang.

Für alle anderen und diejenigen, die gelegentlich auch gern einmal mit dem zweiten Teil beginnen, gibt es nun weitere, sehr interessante Erkenntnisse aus unserer großen Usability-Studie zum Shoppingverhalten auf Onlineshops. eResult hat Digital Natives (Generation Facebook) und vergleichend Digital Immigrants (Generation Golf) über die Schulter geschaut, ihr Blickverhalten auf Onlineshops erfasst und sie zu ihren Wünschen, Anforderungen und Ideen bezüglich Onlineshops, Nachrichtenportalen oder sozialen Netzwerken befragt.

Im ersten Teil des Blogbeitrages habe ich bereits einige Ergebnisse dargestellt, die wir beobachtet haben, wenn sich die jungen Erwachsenen ganz frei und ohne Vorgabe von konkreten Aufgaben im Web bewegen durften. Im heutigen zweiten Teil präsentiere ich einige andere Beobachtungsergebnisse, und zwar diejenigen, die auf dem Verhalten der Testpersonen beruhen, wenn sie sich eben nicht mehr völlig frei entfalten konnten,
sondern durch die Vorgabe von gewissen Websites und Aufgaben etwas eingeschränkt waren.

Und eines steht mal fest: Digital Natives haben ein anderes Shoppingverhalten als Digital Immigrants! Wie anders? Weiterlesen.

Vielleicht denken Sie sich jetzt „Was nützt mir das Shoppingverhalten, ich habe keinen Onlineshop.“ Mag sein. Eventuell denken Sie dann aber noch einen Schritt weiter: „Vielleicht möchte ich mit meiner Website aber trotzdem diese Nutzergruppe ansprechen und für meine Produkte begeistern.“ Korrekt! Denn es können ja auch Reisen, Versicherungen oder ein Forum über die besten Arten eines Spickzettels sein, ganz egal: Sie sollten Ihre Zielgruppe(n) genau kennen – denn es besteht ungeheures, oftmals völlig unterschätztes Potenzial um Websites noch besser an das Surfverhalten der User anzupassen.

Also, liebe Betreiber von Websites aller Art: Greift Euren Digital Natives unter die virtuellen Arme und unterstützt sie, indem Ihr ihre Wünsche und Bedürfnisse kennt.

Erkenntnisse und Unterschiede zum Shoppingverhalten zwischen Digital Natives und Digital Immigrants:

• Erstere entschieden sich insgesamt schneller für einen Artikel (Dabei spielte es keine Rolle, ob die Produktübersichtseite kurz oder lang oder der Onlineshop bekannt oder unbekannt war. Besonders die 12 – 17-Jährigen sind wahre Meister im Blitzkaufen.).
• Die jüngere Generation hielt sich gegenüber der Älteren fast doppelt so lange auf einer Produktübersichtseite auf, bevor sie sich einen Artikel auf der Produktdetailseite genauer ansah (Diese wurde häufig nur noch aufgerufen, um Größe und Farbe auszuwählen und den Artikel schlussendlich in den Warenkorb zu verbannen.).
• Die eigentliche Entscheidung für einen Artikel erfolgte bei den Digital Natives häufig bereits auf der Produktübersichtsseite (Oft waren die Produktbilder eines Artikels ausschlaggebend und reichten aus um das Gehirn zum Zuschlagen zu überreden. Die Digital Immigrants hingegen unterzogen die Produktbeschreibungen auf der Produktdetailseite einer genaueren Prüfung, bevor sie sich für einen Artikel entschieden.).
• Insgesamt lesen die Jüngeren die Produktinformationen und –beschreibungen flüchtiger und weniger ausführlich (Trotzdem: Sie möchten möglichst umfassend über ein Produkt informiert werden. Es war ihnen lediglich wichtig, dass sie unnötige Informationen umgehen. Daher sollten zunächst nur einige, wenige angezeigt werden.).
• Digital Natives scrollen auf einer Produktdetailseite weniger in den unteren Seitenbereich. Das führte in manchen Fällen dazu, dass Kundenrezensionen gesucht aber nicht gefunden wurden (Eventuell ist hier die Seitenaufteilung noch nicht so in Fleisch und Blut übergegangen wie bei den Älteren.).

Was bedeuten diese Entdeckungen nun für die Praxis?

Bleiben Sie im Dialog mit Ihren Usern! Befragen und beobachten Sie Ihre Zielgruppe(n),
denn nur so können Sie deren Wünsche und Anforderungen erfüllen und Websites an
ihre Ansprüche anpassen.

Denn es macht durchaus Sinn:

• Produktübersichtsseiten für Digital Natives anders zu gestalten, indem man
  beispielsweise größere Produktbilder oder eine direkte Möglichkeit, Artikel von dort aus in den Warenkorb zu legen, anbietet.
• Produktinformationen für Digital Natives zwar umfassend anzubieten, aber
  stärker auf deren Strukturierung zu achten (Stichwort – Aufklappfunktion).
• Erwartungshaltungen bzgl. Position und Gestaltung von Informationen/Elementen nicht generell vorauszusetzen, denn für Digital Natives sind diese zum Teil nicht intuitiv.

Aber wenn man über Digital Natives redet, dann nicht nur im Web, denn gerade
Generation Facebook ist heutzutage mobil unterwegs. Moment mal, werden demzufolge
jetzt auch anders gestaltete Apps benötigt? Oh je, ich höre jetzt auf… Es gibt viel zu tun!:-)

Unsere Methodik

Zu unserer qualitativen eResult Usability-Studie luden wir insgesamt 48 TPen ein; 24 davon zwischen 35 und 45 Jahren und die anderen 24 zwischen 12 und 25 Jahren (auch diese wieder halbiert: 12 zwischen 12 und 17 Jahren und 12 zwischen 18 und 25 Jahren). Im ersten Teil des Usability-Tests gab es keine Vorgabe von szenariobasierten Aufgaben und Internetangeboten, die TPen konnten in einer freien Nutzungsphase im
Web tun und lassen was sie wollten (Wer den ersten Teil an dieser Stelle immer noch nicht gelesen hat: Der Link befindet sich oben).

Erst im zweiten Teil des Usability-Tests gab es konkrete, typische Aufgabenstellungen
für bestimmte Internetangebote und zum Shoppingverhalten auf Onlineshops. Dazu habe ich Ihnen heute einige Erkenntnisse vorgestellt.

Haben Sie Interesse an weiteren, interessanten Informationen aus der von eResult durchgeführten Studie?

Hier geht es zu unserer kostenlosen Digital Natives Studie.

Wie wird sich der Handel insgesamt ändern?

Auf der US-Plattform practical ecommerce findet sich dazu ein schöner Artikel. Insbesondere das Online-Shopping an jedem beliebigen Ort, genau dann, wenn ich den Bedarf verspüre, wird den Online-Handel verändern.

Die Möglichkeit Preisvergleiche jederzeit durchführen zu können und Kundenbewertungen abzurufen – insbesondere wenn ich direkt im stationären Handel (am früheren einzigen Point of Sale) stehe, zwingt die Händler zum Umdenken und Reagieren.

Spannend, wo das in den nächsten Jahren noch hinführen wird.

Machen Sie Ihren Shop bereit für das Mobile-Zeitalter

Um eine Aussage zu treffen, ob Sie bereits bereit und gut gerüstet sind, stehen zahlreiche nützliche Programme (teilweise umsonst) zur Verfügung. Eine nützliche Liste von Tools stellt Sig Ueland bereit. Besonders hilfreich sicherlich die Emulatoren, die ein Smartphone simulieren – so dass das Testing ausschließlich am PC erfolgen kann.

Anregungen für gelungene Produktdetailseiten liefert David Moth und stellt seine 5 Highlights vor. Die wichtigsten Informationen auf dem kleinen Bildschirm unterzubringen, ist die Herausforderung. Ohne Frage muss auch ein eindeutiger Call-to-Action-Button vorhanden sein. Dazu sollte man alle speziellen Bedien-Features der Touch-Geräte ausnutzen.

Generell bin ich ein Fan der Regel, dass der Nutzer auf alle Informationen zugreifen können sollte, die er auch am Desktop bekommt, er hat schließlich dieselbe Intention, lediglich ein anderes Endgerät zur Hand. Die Aufbereitung ist der Clou und die Herausforderung.

Smartphone war gestern – nun kommt die Smartwatch

Google Glasses läuft ja schon eine Weile durch die Medien, nun arbeitet Microsoft an einer Touchdisplay-Uhr und auch Sony nimmt eine Computerbrille mit gleich 2 Displays in Angriff, weiß die Internet World Business. Ich hab das Gefühl, da müsste auch der menschliche Körper bald als 2.0 Version existieren. Aber die Überlegung, Gegenstände, die man eh schon dabei hat, noch mit weiteren Funktionen zu versehen, ist ja eigentlich genial. Wobei bei mir das Handy seit über 12 Jahren die Armbanduhr abgelöst hat… andererseits wär vielleicht Zeit für etwas Neues? Back to the roots?

Haben Sie noch weitere Vorschläge, welche Alltagsgegenstände doch noch vielfältiger eingesetzt werden können? Der Schlüsselbund oder das Portemonnaie vielleicht?

Immer wieder begegnen mir spannende Konzepte für digitale, interaktive Systeme in der Wildnis, die mein UX-Herz höher schlagen lassen. Aber zur Berufskrankheit gehört auch, dass ich diese natürlich gleich analysieren muss: Was funktioniert gut, was nicht? Was hätte ich vielleicht anders gemacht? Diese Gedanken möchte ich gerne mit Ihnen teilen.

Heute geht es um die Speisekarte im Restaurant La Baracca in Hamburg. Diese wird mir als Gast direkt am Eingang in Form eines Tablets ausgehändigt. Eine Bedienung braucht es zum Bestellen nicht mehr. Naja, zumindest in der Theorie. Denn ganz problemlos ist die Handhabung der Speisekarte nicht, was das eigentlich spannende Bestellerlebnis leider etwas schmälert.

Von Schlüsseln und Backöfen – aller Anfang ist schwer

Ich muss ja zugeben: Die interaktive Tablet-Speisekarte war der Hauptgrund für mich, das La Baracca zu besuchen. Bei welchem UX-Geek lässt diese Aussicht schließlich nicht das Herz schneller schlagen? Das Tablet behält man während des gesamten Aufenthalts, denn es speichert gleichzeitig alle eigenen Bestellungen des Besuchs, die man dann bei Rückgabe am Ausgang bezahlt.

Abb. 1: Die Anleitung für die Anmeldung ist komplizierter als nötig

Am Tisch angekommen öffne ich das Cover des Tablets und werde von einer Anleitung mit vier Schritten begrüßt (siehe Abb. 1). Puh, so kompliziert ist schon das Anmelden? Eigentlich nicht, man versucht scheinbar nur, es kompliziert aussehen zu lassen:

• Schritt 1 ist bereits erledigt – wie würde ich sonst den Bildschirm sehen?
• Schritt 2 und 3 sind eigentlich ein Schritt.
• Schritt 4 ist noch gar nicht relevant und bedarf auch eigentlich keiner Erklärung.

Abb. 2: Der Schlüssel mit RFID-Chip für die Anmeldung war leider defekt

Das hätte man also auch einfacher lösen können. Aber gut, das Anmelden erscheint mir machbar. Tablet auf den Schlüssel (siehe Abb. 2) legen… nichts passiert. Etwas höher… etwas tiefer… umherschieben… immer noch nichts. Schon kommt der Kellner herbeigeeilt, der das Szenario schon zu kennen scheint. Der Schlüssel funktioniere leider nicht, ich müsse das Tablet an die an der Tischkante angebrachte weiße Karte halten (siehe Abb. 3). Natürlich kann die Technik immer einmal kaputt gehen (auch wenn das bei RFID-Chips relativ unwahrscheinlich ist). Leider werde ich das Gefühl nicht los, dass der Schlüssel nicht erst gestern den Geist aufgegeben hat.

Abb. 3: Der Ersatz-Chip für die Anmeldung war gut versteckt

Der weiße Ersatz-Chip funktioniert immerhin tadellos. Aber was ist das? Mein Tablet mutiert zum Backofen und zeigt mir einen Temperaturregler (siehe Abb. 4). Soll ich jetzt die Bräune meiner Pizza bestimmen? Ach nein, nach zwei Sekunden wird mir klar: Das ist die Ladeanzeige. Mag ja ganz witzig aussehen, aber ein Drehknopf könnte konzeptionell kaum weiter von einer Ladeanzeige entfernt sein. Hier war wohl ein übermotivierter Designer am Werk.

Abb. 4: Die Ladeanzeige nach der Anmeldung ist dem Temperaturregler eines Backofens nachempfunden

Von Warenkörben im Restaurant – identische Buttons verwirren

Als ich es durch den Anmeldevorgang geschafft habe verbessert sich der Eindruck: Die Navigation durch die Speisekarte geht gut von der Hand, die Strukturierung ist klar und alle Bedienelemente groß genug (siehe Abb. 5). Jedes Gericht oder Getränk kann man sowohl direkt von der Übersicht bestellen als auch aus der Detailseite. Die zusätzlichen Informationen zu jedem Gericht sind sicherlich ein Vorteil gegenüber herkömmlichen Speisekarten. Ich kann die Zutaten genauer begutachten und sehe ein schönes Bild von dem, was mich erwartet (siehe Abb. 6).

Abb. 5: Die Menüs sind übersichtlich und gut bedienbar

Leider sind die beiden Warenkorb-Buttons auf der Detailseite verwirrend und machen das Bestellen unnötig schwer. Der obere legt das Gericht in den Warenkorb, das untere wechselt zur Warekorb-Ansicht. Durch das identische Icon und die räumliche Nähe kann hier schnell eine Verwechslung passieren. Und tatsächlich: Obwohl ich meiner Begleitung das Problem erklärt habe, tappt sie zwei Minuten später in genau diese Falle. Mit einem kleinen Usability-Test, am besten schon ganz zu Beginn der Konzeption in Form von Paper Prototyping, wäre das sicher nicht passiert.

Abb. 6: Die Detailseite ist schön gestaltet, birgt aber Verwirrungspotenzial durch mehrere Warenkorb-Buttons

Von aufdringlichen Beilagen – geht das auch ohne?

Direkt im Anschluss zeigt sich ein weiteres Problem: Bei jedem Gericht werde ich nach dem Hinzufügen zum Warenkorb auf eine Seite mit den möglichen Beilagen geleitet (siehe Abb. 7). Abgesehen von der Frage, wer wohl zum Risotto gegrilltes Gemüse bestellt, ist mein erster Gedanke: Muss ich jetzt eine Beilage bestellen? Wie ich diesen Schritt überspringen kann ist nicht ganz offensichtlich. Und auch der Mini-Usability-Test mit meiner Begleitung bringt erst nach kurzem Überlegen die Lösung zu Tage: Oben rechts auf „Weiter“ klicken, ohne eine Beilage anzuhaken. Eine weniger versteckte und klar formulierte Option für „keine Beilage“ im Inhaltsbereich würde solchen Unsicherheiten vorbeugen.

Abb. 7: Das Überspringen der Beilagenauswahl ist nicht offensichtlich

Von kalt gewordenem Essen – nicht alles kommt zur richtigen Zeit

Das Abschicken der Bestellung geht schnell von der Hand, offenbart aber auch eine Tücke des kellnerlosen Bestellens (siehe Abb. 9). Das Essen wird sofort an unabhängigen Stationen zubereitet und schnellstmöglich zum Tisch gebracht. Ob das Essen für mehrere Personen gleichzeitig fertig wird ist reine Glückssache. Auch Vorspeise und Hauptgericht darf man nicht gleichzeitig bestellen, wenn der Restaurantbesuch nicht in Stress ausarten soll. Darauf wurde ich hingewiesen, doch so recht zufriedenstellend ist es nicht. Ganz egal wie einfach und spaßig das bestellen per Tablet ist – das eigentliche, gemeinsame Erlebnis sollte dadurch nicht geschmälert werden.

Abb. 8: Die Bestellung wird immer schnellstmöglich zubereitet, ohne Rücksicht auf Verluste

Hier geraten wir so langsam in den Bereich Service Design, aber bei User Experience geht es schließlich um mehr als nur um Usability und das Interface. Das gesamte Nutzungserlebnis sollte im Rahmen der UX Konzeption gestaltet und optimiert werden. Dabei ist es wichtig, auch nach links und rechts zu schauen, auf die anderen Teile des Gesamtsystems.

Bei der Flugbuchung ist es schon lange Standard, den eigenen Sitzplatz in einem grafischen Interface genau auswählen zu können. Bei einigen Bahnunternehmen gab es auch bereits eine solche Funktion. Inzwischen ist auch die Deutsche Bahn nachgezogen und bietet als Pilotprojekt in vielen ICEs eine exakte Sitzplatzreservierung über einen Wagenplan.

Diese Entwicklung habe ich als Anlass genommen, mich einmal umzusehen und solche grafischen Sitzplatzreservierungen zu analysieren. Was sollten Sie bei der Konzeption einer solchen Funktion beachten? Es zeigte sich, dass der grundsätzliche Aufbau immer demselben Prinzip folgt, sich die Details aber je nach spezifischen Besonderheiten unterscheiden.

Zur Navigation eine grafische Übersicht verwenden

Häufig ist es nicht praktikabel, alle verfügbaren Sitzplätze auf einmal darzustellen. Dies ist insbesondere bei Zügen der Fall, die immer aus mehreren Wagen bestehen, aber auch bei größeren Flugzeugen. Zur Navigation zwischen den unterschiedlichen Bereichen wird bei British Airways eine kleine Übersichtsdarstellung des Flugzeuges verwendet (siehe Abb. 1). Der in der Detailansicht gezeigte Ausschnitt ist markiert und kann per Klick oder durch Ziehen verschoben werden. Auf diese Weise können sich die Nutzer immer vorstellen, wo ihr Platz im Verhältnis zum Gesamtflugzeug liegt.

Abb. 1: British Airways zeigt rechts eine Übersichtsgrafik mit verschiebbarem Ausschnitt

Der Hamburg-Köln-Express nutzt ebenfalls eine grafische Übersicht zur Navigation zwischen den Wagen, die oberhalb der Detailansicht platziert wurde (siehe Abb. 2). Sie funktioniert anders als bei British Airways nicht kontinuierlich, d.h. der Ausschnitt kann nicht frei verschoben werden, sondern es wird jeweils ein Wagen ausgewählt. Zu jedem Wagen gibt es schon in der Übersicht die wichtigsten Infos in Stichpunkten, insbesondere die noch freien Sitzplätze, um die Auswahl zu erleichtern. Der aktuell gezeigte Wagen wird zudem hervorgehoben, was den Zusammenhang zwischen Übersichts- und Detailansicht für die Nutzer gut verdeutlicht.

Abb. 2: Der HKX gestaltet die Wagenauswahl grafisch und zeigt die wichtigsten Infos zu jedem auf einen Blick

Den genauen Aufbau der Kabine verdeutlichen

Für die Auswahl eines Sitzplatzes ist nicht nur die allgemeine Position, etwa hinten oder vorne, relevant, sondern auch das direkte Umfeld. Um den Nutzern dieses in einer abstrakten, grafischen Ansicht verständlich zu machen, ist es nötig, die wichtigsten Details klar darzustellen. In einem Flugzeug gehören dazu insbesondere die Ausgänge, WCs und Küchenbereiche. Delta Air Lines verdeutlicht die Position dieser Einrichtungen über leicht verständliche Symbole, die zudem in einer Legende erklärt werden (siehe Abb. 3).

Abb. 3: Delta Air Lines zeigt Symbole für Ausgänge, WCs und Küchen und erklärt diese in einer Legende

Die Deutsche Bahn bringt den Nutzern das reale Layout der Wagen ebenfalls sehr gut näher (siehe Abb. 4). Die Ausrichtung der Sitzplätze ist klar erkennbar und Besonderheiten wie Tische und Gepäckabteile werden dargestellt. Die Abteile im rechten Bereich sind eindeutig vom Großraumbereich links zu unterscheiden. Einzig die Fahrtrichtung geht leider etwas unter, da sie nur durch ein kleines Symbol oberhalb des Wagens angezeigt wird.

Abb. 4: Die Deutsche Bahn verdeutlicht das Layout der Wagen durch eine klare, reduzierte Darstellung wichtiger Details

Verschiedene Arten von Sitzplätzen visuell unterscheiden

Essentiell ist für die Nutzer die Unterscheidung zwischen schon belegten Sitzplätzen und den noch freien. Es sollte klar erkennbar sein, welche Plätze noch reserviert werden können, und diese sollten stärker ins Auge fallen. Irish Rail löst dies über eine Farbcodierung mit zusätzlichem X bei belegten Plätzen (siehe Abb. 5). Diese Variante ist auch für farbenblinde Menschen eindeutig, quasi selbsterklärend und hebt die noch freien Sitze hervor. Auch die bereits vom Nutzer ausgewählten Sitze werden über eine gelbe Färbung markiert. Eine Legende gibt den Nutzern Sicherheit, falls die Markierungen jemandem doch nicht klar sind.

Abb. 5: Die Kombination aus Farbcodierung und X-Symbol für belegte Plätze ist eindeutig und auch für farbenblinde Menschen erkennbar

Zusätzlich zu belegten, freien und bereits ausgewählten Plätzen gibt es in einigen Fällen auch unterschiedliche Sitzplatzkategorien oder Besonderheiten, die sich auf den Preis auswirken. Dies ist insbesondere bei Billigfliegern häufig der Fall. Jetstar zeigt, wie sich Symbole für diese Zwecke sinnvoll einsetzen lassen (siehe Abb. 6). Plätze mit mehr Beinfreiheit und im vorderen Kabinenbereich sind markiert, wobei die Symbole sehr auffällig links erklärt werden. Zudem öffnet sich bei Mouseover eines Platzes ein Tooltip, der Details aufführt und gleichzeitig die Funktionalität erklärt („Click to move“). Interessant ist hier auch die farbliche Unterscheidung zwischen dem eigenen Platz und dem eines Mitreisenden. Da bei Flügen alle Plätze einer konkreten Person zugeordnet werden müssen (anders als bei Bahnreisen), hilft diese Markierung bei der korrekten Reservierung für jeden einzelnen Reisenden.

Abb. 6: Bei Jetstar werden aufpreispflichtige Sitzplätze durch Symbole gekennzeichnet

Die Auswahl mehrerer Sitzplätze verständlich gestalten

Sitzplätze für gleich mehrere Personen zu reservieren ist eine interessante Design-Herausforderung, für die es unterschiedliche Lösungen gibt. Wenn die Plätze nicht je einer genauen Person zugeordnet werden müssen, wie etwa bei der Deutschen Bahn, so kann die Auswahl einfach über das Anklicken mehrerer Plätze funktionieren. Ein erneuter Klick auf einen Sitzplatz entfernt diesen dann meist aus der Auswahl.
Spannender wird es, wenn eine eindeutige Zuordnung nötig ist. In diesem Fall muss der Nutzer diese steuern und insbesondere auch nachträglich noch ändern können. Eine Übersicht über alle Reisenden hilft dabei sehr, so wie es auch East Coast Main Line umsetzt (siehe Abb. 7). Zu jedem Passagier ist der bereits ausgewählte Platz aufgeführt und der aktuell zu platzierende Passagier ist hervorgehoben. Eine interessante Funktionalität ist das Drag&Drop bei dieser Seite. Anstatt auf einen Sitz zu klicken können die Nutzer auch den Passagier aus der Übersicht auf einen Platz ziehen. Genauso lässt sich auch ein schon platzierter Reisender umsetzen.

Abb. 7: East Coast Main Line zeigte alle Reisenden in einer Übersicht und erlaubt Drag&Drop

Auch bei Virgin Australia sehen die Nutzer eine Passagierübersicht mit den aktuell ausgewählten Plätzen auf der linken Seite (siehe Abb. 8). Die Hervorhebung des aktuell zu platzierenden Reisenden ist hier sehr schön eindeutig über eine kräftige farbliche Hinterlegung. Der Pfeil macht den Zusammenhang zur Detailansicht, in der der Sitz ausgewählt wird, klar. In der Passagierübersicht lässt sich die Platzwahl zudem über einen kleinen Button (x) entfernen. Gelungen ist auch die Nummerierung der Passagiere, die den Zusammenhang zwischen Passagierliste und grafischer Detailansicht noch besser herstellt. So lässt es sich für die Nutzer leicht nachvollziehen, wer wo sitzt. Ohne Nummerierung lässt sich dies nur mit etwas mehr Aufwand über die Platznummer erkennen.

Abb. 8: Virgin Australia nummeriert alle Reisenden, um die Zuordnung zu den Sitzplätzen zu vereinfachen

Grundregeln beachten und Details mit Nutzern testen

Wie Sie sehen kommt es bei den Details einer Sitzplatzreservierung immer auf den genauen Kontext an. Deshalb sollte solch ein komplexes Feature auch nie ohne eine vorherige Evaluation mit Nutzern, etwa durch einen Usability-Test, in die freie Wildbahn entlassen werden. Wenn Sie aber die folgenden Grundsätze beachten, sind Sie auf jeden Fall auf dem richtigen Weg:

• Verwenden Sie eine grafische Übersicht zur Navigation für die Nutzer, wenn nicht alle Plätze auf einmal dargestellt werden können.
• Vermitteln Sie den Nutzern ein Gefühl für die Umgebung, indem Sie Besonderheiten kennzeichnen und das Layout der Kabine oder des Wagens darstellen.
• Kennzeichnen Sie belegte, freie und bereits ausgewählte Sitze sowie unterschiedliche Kategorien durch für die Nutzer einfach verständliche Farben und Symbole.
• Bieten Sie den Nutzern eine Passagierübersicht, wenn mehrere Plätze ausgewählt werden können, um die genaue Zuordnung zu vereinfachen.

Welche Erfahrungen haben Sie bereits mit Sitzplatzreservierungen gemacht? Gibt es noch andere Aspekte, die Sie für wichtig halten? Ich freue mich über Ihre Berichte und Anregungen in den Kommentaren.

Haben Sie Interesse an weiteren “Good Practices”? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

Unternehmen, die international agieren, bieten zumeist auch Websites für verschiedene Länder, Kulturen und Sprachen an. In der Regel steht am Anfang eine „Globale“ oder „Internationale“ Seite, die dann für einzelne Länder oder Kulturen im Detail angepasst wird. Dies geht bei scheinbar „banalen“ Dingen wie verschiedenen Sprachversionen los – aber auch Seitenaufteilungen, Content oder bestimmte Abläufe müssen oft für den internationalen Markt angepasst werden.

Ich habe einmal verschiedene Beispiele nationaler Startseiten zusammengetragen und möchte in diesem Beitrag verdeutlichen, was man daraus über „Internationale Usability“ lernen kann – und welche Fragestellungen sich aus meiner Sicht jeweils für einen Usability-Test oder eine Befragung ergeben würden.

Landes- und Sprachauswahl

Websites, die für mehr als ein Land zugeschnitten sind, sollten dem Nutzer direkt auf der Startseite die Option bieten, verschiedene Sprachversionen auszuwählen. Aber auch die Auswahl des jeweiligen Landes ist zentral, wie das folgende Beispiel von Top Shop zeigt:

Landes- und Sprachauswahl bei Top Shop

Was man daraus lernen kann:

• Wer seine Produkte international über das Internet vertreibt, der muss allein schon deshalb eine Länderauswahl anbieten, um dem Nutzer im Anschluss Informationen über Versandbedingungen liefern zu können.
• Sprache und Land sollten dabei separat ausgewählt werden können. So umgeht man auch die Problematik, dass nicht für alle Länder eine separate Sprache bereitsteht. Was direkt zum nächsten Punkt führt…
• Es ist keine Voraussetzung, eine Seite in alle möglichen Sprachen zu übersetzen (Top Shop bietet Deutsch, Englisch und Französisch an)– die wichtigsten sollten jedoch dabei sein. Dies können zum einen die am weitesten verbreiteten Sprachen sein; zum anderen aber auch die Sprachen aus den Ländern mit den meisten Zugriffen.

Was man hinterfragen sollte:

• Wie gut kommen die Nutzer mit dem sehr langen Dropdown-Menü für die Länderauswahl zurecht? Finden Sie problemlos ihr jeweiliges Land?
• Wie gut funktioniert die Hilfe unter „Can’t find your country?“ Ist es wirklich so sinnvoll, den Nutzer dafür auf eine neue Seite zu leiten?

Im nächsten Beispiel der Fluggesellschaft Emirates sieht die Länderauswahl etwas umfangreicher aus:

Landes- und Sprachauswahl bei Emirates

Hier die Darstellung der deutschen und der ägyptischen Startseite im Vergleich:

Startseite Emirates für Deutschland und Ägypten

Was man daraus lernen kann:

• Eine Sprachauswahl bringt (wie in diesem Fall) auch manchmal einen geänderten Seitenaufbau mit sich, da sich in manchen Sprachen die Lesrichtung ändert. Dies stellt noch einmal spezielle Anforderungen an den Aufbau der Seiten – denn sie muss idealerweise „in beide Richtungen“ funktionieren.
• Die Verwendung von Grafiken und Icons sieht hier  nicht nur ansprechend aus, sondern hat auch einen praktischen Nutzern: Auch bei einer Anzeige der Seite in Arabisch, Griechisch oder Chinesisch finden die Nutzer so schnell den Zugang zur Ihrem jeweiligen Land bzw. Ihrer Sprache.

Was man hinterfragen sollte:

• Da die Seite wirklich für fast alle Länder verschiedene Sprachversionen anbietet, fände ich es interessant zu prüfen, wie gut die einzelnen Übersetzungen in einzelnen Ländern wirklich verstanden werden.
• Funktioniert die Seite tatsächlich „in beide Lesrichtungen“ gleich gut? Oder ergeben sich ggf. an manchen Stellen Seitenaufteilungen, die z. B. für Westeuropäer irritierend sind und die Orientierung erschweren?

Startseitengestaltung und Prozessabläufe

Nachdem die Nutzer ihr Land und Ihre Sprache ausgewählt haben, beginnen sie i.d.R. damit, die Seite zu erkunden. Ich habe mir einmal zum Vergleich die Startseiten 3 verschiedener Länder und Sprachen bei Top Shop angeschaut.

Die Startseiten von Topshop für England, Deutschland und Frankreich

Was man daraus lernen kann:

• Manche Sprachen nehmen mehr „Raum“ ein als andere (sieht man sehr schön an der Größe des runden schwarzen Störers unten in der Mitte). Dementsprechend gilt es, schon bei der Konzeption der Seite genügend Raum einzuplanen – z. B. auf Buttons, in der Navigation etc.
• Es ist gut, von wörtlichen Übersetzungen Abstand zu nehmen und Dinge sinngemäß zu übersetzen (man beachte den Teaser in der Bildbühne). Dennoch funktionieren manche Slogans eben einfach in der „Urspungssprache“ der Seite am besten.

Was man hinterfragen sollte:

• Die Seite von Top-Shop ist – wie es die Startseite schon erahnen lässt – für alle Sprachversionen fast identisch aufgebaut. In diesem Zusammenhang fände ich es interessant, einmal in einem Usability-Test zu evaluieren, wie Nutzer auf der Seite mit den zentralen Prozessen zurechtkommen. Wie gut funktionieren Produktsuche, Filterung und natürlich der Bestellprozess? Welche Abläufe muss man ggf. länder- oder kulturspezifisch anpassen?

Content und Zielgruppenansprache

Während bei Top Shop kaum ein Unterschied zwischen den Startseiten für verschiedene Länder zu sehen ist, sieht dies bei der Lufthansa schon ganz anders aus:

Die Startseiten von Lufthansa für Deutschland, England und Ägypten

Was man daraus lernen kann:

• Je nach Branche und Ausrichtung muss für einzelne Länder auch schon einmal fast der komplette Content angepasst werden. Im Beispiel von Lufthansa zunächst aus einem völlig banalen Grund: Jemand, der in Ägypten wohnt, wird nicht dorthin fliegen wollen. Entsprechend müssen sich Angebote entsprechend anpassen. Und auch für bestimmte Auswahloptionen (z. B. Auswahl des Abflughafens aus einem Dropdown) ist es sehr sinnvoll, nur die Flughäfen des jeweiligen Landes anzuzeigen.
• Zielgruppen in unterschiedlichen Ländern können stark voneinander abweichen. Während die deutsche Seite der Lufthansa recht stark Privatreisende anspricht, ist die Website für Ägypten eher auf Geschäftskunden ausgerichtet.

Was man hinterfragen sollte:

• Entsprechen die Inhalte auf den jeweiligen Startseiten wirklich den Anforderungen der Nutzer in den einzelnen Ländern?

Es gibt viel zu beachten…

… damit ein Webauftritt für verschiedene Länder oder Kulturen gleichermaßen funktioniert. Dabei stellen die Beispiele nur einen Ausschnitt der Dinge dar, die dabei in Betracht gezogen werden müssen. Neben den bereits genannten Aspekten gibt es zahlreiche weitere Anforderungen an Design, Content, Farbwahl etc. Diese alle aufzuführen, würde an dieser Stelle zu weit führen.
Dennoch gilt:

• Für nationale oder kulturspezifische Websites muss man das Rad nicht komplett neu erfinden. Dennoch sind es oft die Detailanpassungen, die für manche Länder und Kulturen den Unterschied machen.
• Ziel sollte und kann es grundsätzlich nicht sein, für jedes Land und jede Eventualität eine Website parat zu haben. Internationale Unternehmen tun aber gut daran, internationale Studien in ausgewählten Ländern durchzuführen – z. B. Befragungen oder Usability-Tests. Auf diese Weise kann geklärt werden, welche Aspekte der Seite international verständlich sind und an welchen Stellen die Seite für bestimmte (nationale oder kulturelle) Märkte angepasst werden muss.
• Auf welche Länder man sich (auch in den Anpassungen und Studien) fokussiert, ist eine strategische Entscheidung und hängt stark davon ab, welche Länder und Kulturen man als Kernzielgruppe ins Auge gefasst hat. Aber auch zwischen europäischen Ländern kann es schon große Unterschiede geben, wie ich selbst aus internationalen Studien weiß.

Explorativer, Mobile Usability-Test bei eResult

Zahlreiche Studien wie auch Händler bestätigen, dass Tablets im Durchschnitt höhere Conversion Rates und auch größere Warenkörbe haben als Smartphones (und teilweise Desktop-Computer). Grund genug, um sich einmal im Rahmen des vorliegenden Artikels vertieft mit relevanten Kennzahlen, Guidelines und best practices von Tablet-optimierten Webshops zu beschäftigen.

Fakten, Fakten, Fakten …

• Laut der amerikanischen Längschnittuntersuchung Studie von Affiliatewindow lag die durchschnittliche Conversion Rate für Tablets Ende 2011 bereits bei 3.82% im Vergleich zu 1,9% über Desktop-Computer. Der Durchschnittseinkaufswert über ein Tablet übersteigt den von Desktop-Computern dabei um ca. 20%.
• Warenkörbe mit dem Tablet sind rund 50 Prozent größer als mit dem Smartphone. Der durchschnittliche Smartphone-Warenkorb liegt bei circa 46 Euro, während der durchschnittliche Tablet-Warenkorb circa 81 Euro beträgt. Die größten Bestellungen werden jedoch mit dem stationären PC oder Laptop aufgegeben (113 Euro). Diese Ergebnisse liefert die umfangreiche Studie “Mobile Commerce in Deutschland – Die Rolle des Smartphones im Kaufprozess” des ECC-Handel (2012).

Siehe Aktuelle Nutzung von Tablet und Smartphone zum Kauf von Produkten in: Mobile Commerce in Deutschland – Die Rolle des Smartphones im Kaufprozess, Seite 24, ECC-Handel, 2012

• Die Befragung “Engaging the Tablet User: What They Expect From Web Sites” des Marktforschungsunternehmens Equation Research Anfang 2012 ergab, dass 46% aller Websites mangels Funktionalität, Usability und fehlerhafter Darstellung kein zweites Mal mit dem Tablet angesteuert werden. -> Wenn da mal kein Potential liegt!

Optimierte Websites, App oder beides

Die Frage aller Fragen („Brauchen wir einen Tablet-optimierten Online-Shop?) ist leicht beantwortet. Jedoch: trotz täglicher Meldungen über stetig steigende Zugriffe von iPads & Co. auf Online-Shops, bieten bislang nur wenige Händler Tablet-optimierte Webshops an. Dabei sind doch gerade die Tablet-Shopper Kunden wie man sich sie wünscht: generell höhere Einkommensgruppen mit weniger Preis-Sensitivität, gemütliche und entspannte Nutzungssituation (die Lustkäufe fördert).

Wer nun als Online-Händler darüber nachdenkt einen für Tablets optimierten Shop anzubieten, muss sich folgende Frage stellen: Native App oder optimierte Website? Aufgrund des hohen (finanziellen) Aufwands dürfte für die meisten eine native App eher unattraktiv sein. Vielmehr macht es Sinn, den bestehenden Tablet-Traffic besser konvertieren zu lassen, wie z. B. bonprix es mit seinem Tablet-optimierten Shop unter.t.bonprix.de macht.

Tablet-optimierter Webshop t.bonprix.de

Auch amazon.com zeigt sich seit einiger Zeit nun Tablet-freundlicher. Das aufgeräumtere Design, die größeren Interaktionselemente und Schriften sind nicht beim Zugriff per Tablet hilfreich und intuitiver nutzbar. Die Amazon WindowShop-App ist immer noch ein best practice hinsichtlich der entspannten, emotionalen Anwendersituation.

Letztendlich gibt es aber nicht die „eine Lösung“ für alle Arten von Shops, Kunden bzw. Sortimenten (von Responsive Design, Tablet-optimierte Shops, hybride/native Apps).

Anforderungen an die Tablet-User Experience

Die Eroberung der Wohnzimmer dieser Welt durch iPads & Co. verändert das Digitale Business und vor allem das Aussehen und die User Experience von Online-Shops nachhaltig. Haben wir 2011/12 noch von Responsive Webdesign und mobile first gesprochen, möchte ich nun angesichts der Entwicklungen und Zahlen den Trend bzw. die Erfordernis ‚tablet first‘ für alle Online-Händler in 2013 nachträglich ausrufen.

Online-Shops müssen sich folglich an die Gegebenheiten der neuen Zielgruppen als auch der technischen Anforderungen anpassen, um das bestehende Absatzpotential heben zu können. Anbei die wichtigsten Aspekte, die bei der Tablet-Optimierung bedacht werden sollten:

• Seiteninhalte/-funktionen reduzieren
  Trotz hoher Auflösungen steht nur ein Bruchteil der am Desktop-PC verfügbaren Bildschirmfläche zur Verfügung. Nutzen Sie Ihre Web Analyse-Daten, um sich von wenig genutzten Funktionen zu trennen. Beachten Sie zudem, dass die Navigationselemente großzügiger dargestellt werden müssen (siehe nächster Punkt).
• Bedienbarkeit per Touch/Finger sicherstellen
  Die Eingabe per Touch erfordert ein aufgeräumteres, schlichteres Webdesgin als auf dem Desktop. Laut Apple Human Interface Guidelines sollten alle Buttons eine Größe von mind. 44x44px aufweisen. Auch wenn jedermann weiß, dass ein Finger nicht so filigran ist wie ein Mauszeiger, führt die Umsetzung oft zu einem vermeintlichen Platzproblem – sowohl bei den Navigationselemente als auch der Contentgestaltung.
• Touch-Gesten unterstützen
  Das Wischen von Bildlaufleisten als auch das Pinchen für den Zoom spielt eine wichtige (und gelernte!) Rolle für den Tablet-Nutzer. Diese Touch-Events lassen sich Website-übergreifend per Javascript (jQuery toch bzw. mobile) realisieren.
• Den Navigationsflow im Angebot unterstützen
  Beim Couch-Surfing hat der potentielle Kunde tendenziell mehr Zeit und Muße durch die einzelnen Produktgruppen zu stöbern. Unterstützen Sie dies durch geeignete Navigationsmechanismen, die zum einen neugierig machen, zum anderen einen schnelle Einstieg und Wechsel in/zu Produktgruppen ermöglichen.
  Natürlich darf daneben eine gut funktionierende Suchfunktion für den bedarfsdeckenden Einkauf nicht fehlen.

Visueller Navigationslayer Startseite touch.ebay.com

2stufiger Dropdown mit stimmungsvollen Teaser auf t.bonprix.de

• Platzierung der zentralen Navigationselemente bzw. CTAs an die Tablet-Haltung anpassen
  Da Tablets an den Displayrändern gehalten werden, müssen die zentralen Bedienelemente des Shops in von den Daumen leicht erreichbaren Bereichen liegen. Hierzu gibt es auf Basis von Fitts’s Law mehrere Überlegungen (siehe u.a. hier: „Using Fitts’ Law To Streamline Mobile & Tablet UIs“). Aus meiner Sicht macht es Shopbop.com diesbezüglich hervorragend: links und rechts liegen die relevanten Buttons und Bedienelemente. Die Produktabbildung ist mittig platziert.

Produktdetailseite shopbop.com (erreichbare Flächen mit den Daumen orange angedeutet)

Nicht ohne Grund ist die Navigations-/Funktionsleiste bei xing.com plattformübergreifend links angeordnet.

Tablet-freundliche Funktionsleiste (links) auf xing.com

• Gestaltung & Funktion von Formularen überprüfen und optimieren
  Gerade an solche Conversion-kritischen Punkten scheitern viele Tablet-Nutzer, weil die Eingabe per Touch einfach ein Gräuel ist (aufgrund von unangebrachter auto-correct-Funktion, unpassenden Keyboad-Layouts, …). Anbei einige Tipps auf getelastic.com.
• Standards kennen und berücksichtigen
  Die User Interface-Regelwerke von Android, iOs und Windows 8 sind ein Muss für alle Mobile-Webdesigner.
• (Produkt)Bilder in der Vordergrund stellen
  Die hohen Auflösungen der (Retina)Displays sind Fluch und Segen zugleich. Die hochauflösenden und großflächigen Bilder präsentieren das Produkt besser als jeder Text. Große Abbildungen schon auf der Produktübersichtsseite als auch auf der Produktdetailseite (inkl. Fullscreen-Ansicht bzw. –Zoom) sind Pflicht.
• Überinspirieren Sie Ihre Kunden nicht
  Natürlich bietet der Nutzungskontext von Tablets (zuhause, auf dem Sofa, im WLAN) mehr Inspirationsmöglichkeiten und eine emotionaler Ansprache. Zusätzlicher Content (Bilder, Videos, Texte, …) kosten jedoch auch entsprechend. Inspiration ist auch bei Tablet-optimierten Websites nicht alles.

Weitere Beispiele für Tablet-optimierte Onlineshops

Tablet-freundlicher Webshop t.staples.com

…liefert Ihnen der umfangreiche Tablet-Shop Index auf bloombargo.com.
Ob alle der dort aufgelisteten Webshops bzw. Apps auch eine gute User Experience bieten, haben wir aufgrund der Menge nicht testen können. Zumindest bei der Entwicklung / Konzeption einer solchen sollten Sie mind. einmal Ihre (potentiellen) Kunden in Form eine Usability-Test zurate ziehen, um sicherzugehen und das bestmögliche Absatzpotential mit Ihrem Tablet-optimierten Shop zu erreichen.

Im Usabilityblog haben sich Jan Pohlmann (User Experience von Firmenhistorien) und Elske Ludewig (Good Practices für die Darstellung von Daten und Fakten auf Corporate Websites) Timelines näher angesehen, welche die Firmenhistorie von Unternehmen darstellen. Man sieht deutlich, dass diese Darstellung deutlich mehr Spaß macht als eine einfache Tabelle.

Seitdem Facebook seine „Chronik“ eingeführt hat, sieht man solche Zeitleisten vermehrt auch auf anderen Seiten. Und nicht nur für Firmengeschichten. Facebook hat auch gezeigt, dass der Zeitstrahl keineswegs immer horizontal laufen muss. Gerade bei sehr vielen darzustellenden Ereignissen hat die vertikale Anordnung Vorteile.

Die Beiträge auf jedem Profil sind bei Facebook jetzt als vertikale Zeitleiste angeordnet. Besonders viel auf einmal sieht man aber nicht.

Klassische Zeitleisten

Geschichte von Erfindungen

Der Zeitleisten-Klassiker ist sicher die Zeitleiste für geschichtliche Ereignisse. Die Geschichte des Rads zum Beispiel wird mit vielen Bildern erzählt und funktioniert ganz gut: History of the Wheel

Die Gestaltung wirkt auf mich allerdings etwas überladen, viele Elemente konkurrieren hier um die Aufmerksamkeit. Besonders die großen Icons zum Teilen oben rechts stören mich persönlich.

Die Geschichte des Rades interaktiv.

Die Interaktion mit der Anwendung funktioniert aber gut. Nur ist das Plussymbol unten auf der Zeitleiste nicht eindeutig – dass man damit die Zeitleiste weiter aufzieht, merkt man erst, wenn man es ausprobiert. Meine erste Vermutung war eher, dass ich damit eigene Ereignisse eintragen kann.

Biografien

Auf der Hand liegen Zeitleisten auch für Biografien. Die New York Times etwa hat Artikel aus ihrem Archiv über den chinesischen Künstler Ai Weiwei als Timeline aufbereitet.

Die Ai Weiwei-Biografie/Chronologie der New York Times

Die Optik ist ganz ansprechend, die User Experience leider enttäuschend. Warum zum Beispiel manche Ereignisse in winziger Schrift dargestellt werden, andere in sehr großer, ist mir zumindest unklar.

Wenn man auf ein Ereignis klickt, erscheint ein Popup, das viel zu klein ist, um darin einen längeren Text zu lesen. Benutzt man das Scrollrad der Maus, wird der Text anfangs gescrollt, dann aber wird in der Zeitleiste gezoomt, so dass man den aktuell ausgewählten Punkt auf der Leiste verliert.

Die Lupe unten rechts öffnet bei dieser Anwendung ein Suchfenster – das zeigt das Dilemma, dass das Lupen-Icon sowohl für die Suche als auch zum Zoomen üblich ist. Was in diesem Zusammenhang erwartungskonform ist, darüber kann man sich streiten.

Firmengeschichten

Ein weiterer Klassiker ist, wie erwähnt, die Firmengeschichte. Solche interaktive Timelines finden sich auf den Websites vieler Unternehmen, und die Umsetzung reicht von nüchtern bis zu verspielt.

Eindeutig am verspielten Ende der Skala ist die Site des Münchner Nudelfabrikanten
Bernbacher. Visuell spielt die Seite mit der Verwurzelung in der bayerischen Geschichte (die Firma gibt es seit 1898), so hängen die Fotos an der virtuellen holzgetäfelten Wand zwischen Gams-Geweihen. Bei Rollover werden die Bilder mit einem Spot beleuchtet.

Zeitleiste ganz verspielt: Die Bernbacher Nudelchronik

Auf Klick kann man im Bereich unter der Leiste das Foto in groß sehen und einen Info-Text dazu lesen. Die Steuerung der Zeitleiste funktioniert über zwei Pfeile, die in einer Schleife in der Seitenmitte etwas versteckt sind, ist aber ganz gut gelöst. Schade nur, dass am rechten und linken Rand der Zeitleiste kein sensitiver Bereich ist, der das Scrollen auch auslöst – das kennt man von anderen Umsetzungen. Auch ein Verschieben mit der Maus geht nicht.

Realisiert ist diese Variante übrigens mit Flash – alle anderen Zeitleisten, die ich in letzter Zeit gesehen habe, sind mobil-freundlich mit HTML5 umgesetzt.

Ungewöhnliche Zeitleisten

Die Timeline Color Walking dokumentiert einen kreativen Foto-Spaziergang. Auf seinem Weg hat der Fotograf sich von Farben durch New York treiben lassen: Wenn ihm ein buntes Objekt gefallen hat, hat er es fotografiert. Dazu musste er teilweise Passanten hinterherlaufen, weil er etwa ihre Tasche fotografieren wollte.

Die Bilder könnte man auch ganz klassisch in einer Galerie, einer Diaschau oder als Caroussel abbilden. Doch als Zeitleiste macht das Stöbern durch die Bilder mehr Spaß, und vor allem bekommt man so ein Gefühl dafür, wie der Spaziergang des Fotografen aussah, man kann ihn fast nachempfinden.

Zeitleiste als ungewöhnliche Präsentation von Fotos

Was man besser machen könnte: Das Element auf der Seite ist sehr klein – eine Zeitleiste sollte schon die ganze Seitenbreite ausfüllen, damit man sich bequem auf ihr bewegen kann. Außerdem bekommt man so einen besseren Überblick, wie viele Einträge überhaupt vorhanden sind.

Mit der Plus- und Minus-Lupe am linken Rand der Zeitleiste kann man den Zeitrahmen vergrößern bzw. verkleinern. Die Icons der Elemente werden dann neu angeordnet – das Verkleinern ist ordentlich gelöst, man erkennt noch, dass hier etliche Elemente übereinandergestapelt sind. Wichtig ist, dass in der Anfangs-Zoomstufe die Elemente einzeln zu sehen sind – dass jeder Nutzer die kleinen hellgrauen Lupen am Rand wahrnimmt, wage ich zu bezweifeln.

Die Animation beim Wechsel zwischen den Elementen (per Klick darauf in der Zeitleiste) sieht gut aus und vermittelt deutlich die Bewegung auf der Horizontalen – der Benutzer kann also im wahrsten Sinn des Wortes folgen.

Bewegt man den Mauszeiger über den linken oder rechten Rand des Elements, erscheint ein Layer, in dem der nächste Eintrag verlinkt ist. Per Klick kann man sich so schrittweise bequem die ganze Zeitleiste entlanghangeln. Etwas deutlicher könnte man die weißen Pfeilchen auf weißem Grund vielleicht noch gestalten – man erkennt sie nur an ihren recht dezenten hellgrauen Schatten.

Ich hoffe, es war die ein oder andere Anregung dabei für Sie, strukturierte Daten einmal etwas anders aufzubereiten.

Ebenfalls inspirieren lassen können Sie sich von ein-Seiten-Sites. Eine ganz effektvolle Kombination aus Zeitleiste und ein-Seiten-Sites ist übrigens die Technik Lateral On-Scroll Sliding. Dabei fliegen die Elemente von links und rechts auf den Zeitstrahl zu, der von oben nach unten läuft – schwer zu beschreiben, aber simpel und zugleich effektvoll auf der Site: Lateral On-Scroll Sliding.

Wie sind Ihre Erfahrungen mit Zeitleisten? Kommen diese an bei den Nutzern? Lohnt sich der Aufwand Ihrer Meinung nach?