it-swarm.com.de

Breadcrumbs: OK für mobile Websites?

Ich frage mich, ob jemand darüber nachdenkt, Breadcrumbs als Navigationsmethode auf einer mobilen Website (für eine Content-Site) zu verwenden.

Die Semmelbrösel würden die Hierarchie des Ortes als solchen zeigen:

Site> Kategorie> Unterkategorie> Gruppe> Element

Ich vermute, dass die Brotkrumen (wenn sie gut gestaltet sind) dem Benutzer helfen würden, die Site-Struktur schnell zu verstehen. Gleichzeitig bevorzugen mobile Benutzer große Schaltflächen und Balken gegenüber Links.

Gibt es ein Breadcrumb-Design, das das Beste aus Breadcrumbs und Schaltflächen/Balken/Standardkomponenten der mobilen Benutzeroberfläche kombiniert?

50
Rohan

Wenn Sie mobil sind und das Gefühl haben, dass Sie für die Navigation Brotkrumen im traditionellen Stil benötigen, ist wahrscheinlich ein Fehler beim Entwerfen Ihrer Website für den mobilen Einsatz aufgetreten - dh sie ist zu komplex (zu tief verschachtelt) für die Art der Nutzung und die Umgebung, die das Handy bietet.

Jared Spool schrieb auf ixda als Antwort auf eine ähnliche Frage

Ich kann nicht speziell mit Mobilgeräten sprechen, aber ich würde vorschlagen, dass Sie nicht in Brotkrumen denken. Stattdessen sollten Sie sich die lokale Navigation "Was möchte ich als nächstes erreichen?" Überlegen.

Ich glaube, dass Semmelbrösel nur das Symptom eines größeren Problems beheben (der Benutzer war anfangs am falschen Ort). Ich denke, Sie sollten Ihre Energie besser darauf konzentrieren, den Benutzer an den richtigen Ort zu bringen, als eine Lösung zu finden.

Ich habe darüber in einem Artikel namens Design Copout # 2: Breadcrumbs geschrieben. (Design Copout Nr. 1 sind Sitemaps.)

Wie Luke Wrobleski in seinem Buch Mobile First erläutert, haben Sie nur die halbe Aufmerksamkeit eines mobilen Benutzers - er hat nur "ein Auge und einen Daumen" für die Situation.

Mobile Benutzer möchten nicht verwickelt auf Ihrer Website haben. Wenn Sie also versuchen, Benutzer dazu zu bringen, eine Website zu verwenden, die so komplex ist, dass Brotkrumen erforderlich sind, um zu versuchen, das Problem zu beheben. In dieser Situation überlegen Sie bitte noch einmal, wie Sie zuerst weniger komplex machen können, damit nicht einmal Brotkrumen auf den Karten sind .

Mobile UX:

Weitere Informationen zu Überlegungen für die mobile Benutzererfahrung - insbesondere beim Übergang von Inhalten vom Desktop zum mobilen - finden Sie unter meine Notizen und Folien zu Mobile UX , was die Notwendigkeit einer einfachen Gestaltung mobiler Inhalte und Navigation unterstreicht . Das Hauptbeispiel, das ich zitiere, ist rei.com , das eine reichhaltige Hierarchie von Inhalten auf dem Desktop aufweist, aber das Fett für Mobilgeräte ( m.rei.com ) reduziert, während immer noch a voll funktionsfähige Erfahrung - und ich könnte hinzufügen - ohne die Notwendigkeit von Brotkrumen auf dem Handy.

38
Roger Attrill

Ich würde sagen, dass es von der Website abhängt. Sie können mobile Websites in zwei Kategorien einteilen:

  1. Eine maßgeschneiderte mobile Website/App, bei der es sich um eine abgespeckte Version der vollständigen Website handelt, die nur den für mobile Benutzer am besten geeigneten Inhalt bietet
  2. Eine reaktionsfähige Website oder eine Desktop-Website, die in einer separaten mobilen "Vorlage" gerendert wird.

Mit der ersten Art von Website haben Sie wahrscheinlich eine viel zu komplexe Website für einen mobilen Benutzer erstellt, wenn Brotkrumen benötigt werden. Als XMatters.com angegeben:

brotkrumen erscheinen selten auf mobilen Websites ... Der Hauptfaktor ist, dass das Design mobiler Websites verhindert, dass Benutzer zu tief in eine Hierarchie vordringen müssen, um das zu finden, wonach sie suchen.

Für die zweite Art von Website - insbesondere eine E-Commerce-Website - kann der Breadcrumb nützlicher sein, da die vollständige Navigation von Produkten/Kategorien usw. überwältigender ist als nur der Breadcrumb als Methode zum Navigieren in den Ergebnissen. Wenn der Benutzer über Suchmaschinen zu einem Produkt gelangt ist, gibt ihm der Breadcrumb einen mentalen Anker darüber, wo er sich auf der Website befindet.

Sie werden jedoch möglicherweise viel Platz beanspruchen. Das Hauptmenü für Mobilgeräte sollte sich am Ende der Seite befinden. Brotkrumen sind jedoch nur dann wirklich nützlich, wenn sie offensichtlich sind und daher weiter oben auf der Seite angezeigt werden müssen. Ich würde vorschlagen, den Breadcrumb auf drei Ebenen zu beschränken. Je höher die Hierarchie, desto mehr können Sie navigieren, indem Sie zur Startseite zurückkehren oder das Hauptnavigationsmenü verwenden.

Also zusammenfassend; Maßgeschneiderte mobile Websites sollten nicht wirklich über genügend Inhalte verfügen, um einen Breadcrumb zu gewährleisten. Wenn Sie jedoch eine vorhandene inhaltsintensive Website in eine mobile Version konvertieren und eine vollständige Navigation benötigen, kann ein begrenzter Breadcrumb hilfreich sein.

Einige andere nützliche Lektüre dazu:

Mobile-UI-and-Usability-Guide

Mobile Homepage Navigation

18
JonW

Ich würde argumentieren, dass Brotkrumen, die auf einer mobilen Website verwendet werden, tatsächlich eine bessere Benutzerfreundlichkeit bieten und einen Mehrzweck teilen könnten.

Eines der Dinge, die heutzutage bei reaktionsschnellen (mobilen) Websites am häufigsten zu sehen sind, ist das Reduzieren der Navigation, die sich oben in ein Schubladen-/Hamburger-Symbol verwandelt. Sobald diese Navigation ausgeblendet ist, können Sie dem Benutzer nur visuell helfen, auf welcher Seite sie sich befinden Titelüberschriften auf jeder Seite einfügen. Zu diesem Zeitpunkt habe ich beschlossen, diese Titel funktionsfähig zu machen (auch bekannt als Breadcrumbs):

Home > My Account > Security Home > My Account > Notifications

So kann der Benutzer jetzt schnell erkennen, welche Seite er gerade anzeigt, und auch zurück navigieren, ohne die reduzierte mobile Navigation verwenden zu müssen.

Ich denke, die beste Faustregel ist, wenn Sie nicht tiefer als drei gehen, kann dies die Benutzerfreundlichkeit verbessern, aber eine größere Tiefe würde die Verwendung für Mobilgeräte ruinieren.

9
bfritz

Ich glaube, Semmelbrösel sind nützlich. Dafür gibt es einen Grund: Die meisten UX-Designer sind der Meinung, dass Design einfach und verständlich sein sollte, aber ... Vergessen Sie nicht, dass jeder Seiten gerne zufällig verwendet. Sie verlassen eine Seite und gehen zu einer anderen, dann kehren sie zurück. Diese Mikropausen sind sehr häufig, daher sind sie nach einer Weile sehr nützlich, wenn wir zu bestimmten Seitenbrotkrumen zurückkehren (es kann auch andere großartige Lösungen geben). In dem Projekt, an dem ich arbeite, verwenden wir abgeschnittene Semmelbrösel.

Beispiel: Wenn wir uns in: Start> Autos> Audi> Audi A2 statt vollem Pfad befinden, zeigen wir nur: Audi> Audi A2. Dies ist informativ genug + ermöglicht es Benutzern, eine Ebene höher zu kommen.

Wo wollen Sie die Semmelbrösel platzieren?

Wenn es sich irgendwo in der Nähe der Spitze befindet, würde dies eine Menge wertvoller Bildschirmflächen beanspruchen, insbesondere wenn Sie sie wie gesagt zu Schaltflächen machen möchten.

Alternativ können Sie Ihre Navigation so gestalten, dass sie wie ein Brotkrumen aussieht - aber auch dies würde für mobile Benutzer viel Platz auf dem Bildschirm über der Falte beanspruchen.

Wenn sich die Semmelbrösel in der Nähe des Bodens befinden sollen, sollten Sie eine footer -Navigation als ul mit Einrückungen verwenden. Viele Websites haben das, und die Leute neigen dazu, die Seite entweder zu verlassen, sobald sie sie sehen, wenn sie alles haben, was sie brauchen, oder wenn sie irgendwohin gehen wollen, würden sie es überprüfen (anstatt zu den Brotkrumen zurückzuscrollen/nav) oben auf der Seite.

Wenn Sie reaktionsschnell skalieren und Breadcrumbs für breitere Ansichtsfenster benötigen, würde ich sie einfach in den HTML-Code aufnehmen und mit CSS ausblenden - sie werden auch für mobile Benutzer geladen, aber Text ist nicht so bandbreitenintensiv. Es gibt auch Platz für JS-Lösungen, aber ich würde mich an einfacheres CSS halten.

2
Baumr