Best Practices für die Navigation im mobilen Web
Die Art und Weise, wie Menschen online auf Informationen zugreifen, entwickelt sich weiter. Google berichtet, dass bis zum nächsten Jahr (2013) mehr als die Hälfte der Website-Besuche von mobilen Geräten und nicht von Desktops oder Laptops stammen.
Es verändert sich nicht nur das Medium für den Zugriff auf das Internet, auch die Bedürfnisse der meisten mobilen Nutzer, die mit ihrem Smartphone oder Handheld-Gerät online gehen, ändert sich; fokussierter und aufgabenorientiert werden.
Die Smartphone-Besitzer von heute verwenden ihre Telefone, um bestimmte Aufgaben auszuführen, z. B. die Überprüfung von Standorten von Zielen, Fahrplänen für öffentliche Verkehrsmittel und Bankguthaben. Während Internet-Browsing auf Handheld-Geräten auftritt (vor allem wenn Sie in langen Schlangen stehen oder auf einen Bus warten), bevorzugen viele Leute das Surfen im Internet zu Hause oder im Büro.
Der Platz auf dem Bildschirm ist auf Handheld-Geräten begrenzt, und mobile Benutzer sind beschäftigt, oft Multitasking, da sie online mit einem Daumen oder Finger nach Informationen suchen.
Aus diesen Gründen ist die Navigation auf mobilen Websites noch wichtiger als die Navigation auf einer herkömmlichen Website. Das Verständnis für die Fragen und Bedürfnisse eines typischen Website-Besuchers, die Einschränkungen seines Geräts und die Frage, was sie frustrieren wird, ist entscheidend für ein effektives Navigationsdesign auf einer mobilen Website.
Was fragen mobile Nutzer, wenn sie online gehen?
Compuware Die Studie von 2011, die Nutzer aus dem mobilen Bereich finden, ergab, dass 95% der Nutzer mit ihren Smartphones oder Handheld-Geräten nach lokalen Informationen suchten. Es wäre daher eine gute Praxis für den stationären Handel, die Navigation zu ihrem Standort, die Öffnungszeiten und Kontaktinformationen auf mobilen Websites gut sichtbar zu machen.
Versetzen Sie sich in die Lage des typischen Site-Benutzers. Sehen Sie sich die Analyse für den mobilen Datenverkehr an. Wählen Sie die obersten drei oder vier Kategorien aus, nach denen Nutzer suchen, und wählen Sie Kategorienamen aus, die die häufigsten Suchanfragen widerspiegeln.
Wenn es sich um eine mobile Website für ein stationäres Geschäft handelt, zeigen Sie eine Schaltfläche für den Standort und Kontaktinformationen an.
Sie können jederzeit einen Link zu "besuchen Sie unsere Website" hinzufügen und die wirklich Interessierten können eine ausgefeiltere Version der mobilen Website bequem von zu Hause oder von zu Hause aus mit ihrem Laptop ansehen.
7 For All Mankind kennen ihre Benutzer.
Entwerfen für eine andere Umgebung
Zusätzlich zu den Parametern und Ablenkungen der externen Umgebung müssen Webdesigner auch die Geräte selbst bewerten, wenn sie Navigationselemente entwerfen.
Ein Architekt würde nicht genau das gleiche Gebäudedesign für die Mitte der Stadt, der Wüste oder des Waldes befürworten, ein guter Webdesigner betrachtet die Möglichkeiten und Grenzen der mobilen Umgebung, um die bestmögliche Navigation für Mobilität zu schaffen.
Das Problem besteht natürlich darin, dass der Designer nicht weiß, welches Gerät der Endbenutzer beim Besuch der Website hält, eine Situation, die mithilfe von Responsive-Design-Tools wie CSS-Medienabfragen angegangen werden kann, um Probleme bezüglich Ort, Größe und anpassungsfähiger Inhalt. Egal, ob Sie eine brandneue mobile Website mit Responsive Design entwerfen oder eine bestehende Website für Mobilgeräte anpassen, es gibt immer noch einige Best Practices, die für die Navigation gelten.
Navigationsmenüs für den kleinen Bildschirm
Webdesigner wissen, dass sich mobile Benutzer beim Zugriff auf das Internet auf ihren Smartphones und Handheld-Geräten anders verhalten als auf ihren Desktop- oder Laptop-Computern. Platz für die Navigation auf einem kleinen Bildschirm zu finden, kann schwierig sein, aber mit ein wenig sorgfältiger Planung ist ein mobiles Navigationsdesign möglich.
Mit nur vier Navigationstasten und der prominenten Anzeige der gebührenfreien Reservierungsnummer ist die mobile Website von Loews Hotels benutzerfreundlich und einfach zu navigieren.
Best Practice 1: Verringern Sie die Anzahl der Menütasten
Dies kann schwierig sein, wenn Sie eine für Mobilgeräte optimierte Version einer vorhandenen Website entwerfen, insbesondere eine mit vielen Links im Desktop-Design. Beschränken Sie die Hauptnavigationsschaltflächen auf fünf oder weniger und fügen Sie ggf. verschachtelte Menüs hinzu.
Best Practice 2: Verringern Sie die Anzahl der Taps
Halten Sie die Anzahl der Aktionen auf einem mobilen Gerät auf ein Minimum beschränkt. Je weniger Tippen und Klicken, um herauszufinden, wonach der Benutzer sucht, desto besser. Es ist zu einfach, einen Fehler zu machen. Fügen Sie immer einen leicht zu findenden Zurück-Button hinzu: Sie möchten den Benutzer nicht weiter frustrieren.
Best Practice 3: Scroll-Navigation
Halten Sie die wichtigsten Navigationselemente an der Spitze. Mobile Geräte haben unterschiedliche Bildschirmgrößen. Denken Sie also sorgfältig über die Bedeutung der einzelnen Kategorien nach, da die weiter unten in der Liste aufgeführten Funktionen möglicherweise ein Scrollen auf Smartphones mit weniger Bildschirmfläche erfordern.
Best Practice 4: Stapelbare Schaltflächen
Mobile Nutzer sehen Ihre Website im Hochformat statt im Querformat, wie auf einem Desktop. Passen Sie Ihre Navigation für das mobile Web an, indem Sie sie vertikal präsentieren. Lies runter statt quer. Dies funktioniert am besten für Websites mit nicht mehr als fünf Kategorien im Menü, und wenn es unwahrscheinlich ist, dass mehr Kategorien hinzugefügt werden.
Best Practice 5: geschachteltes Menü
Manchmal auch bekannt als reduzierbare Navigation, ist dies eine gute Option für Websites, die sowohl Inhalte auf dem Bildschirm als auch ein Menü benötigen, und solche, die Kategorien und Menüelemente hinzufügen möchten.
Mobilitätsnavigation für Touchscreen und kleine Tasten optimieren
Touchscreens und kleine Schaltflächen bedeuten neue Überlegungen für Webdesigner. Mobile Nutzer haben nicht den Luxus einer anklickbaren Maus, um einen winzigen Menü-Button oder Link zu finden. Sie sind ihren Fingern und Daumen ausgeliefert, was bedeutet, dass sie mit viel weniger Präzision auf Bereiche auf dem Bildschirm zeigen, als wenn sie eine Maus benutzen würden, und sie können leicht frustriert werden, wenn ihr Tippen nicht sofort Ergebnisse bringt.
Webdesigner können die Navigation für mobile Benutzer vereinfachen, indem sie mehr Platz um Menüverknüpfungen herum hinzufügen oder die Verknüpfungen durch Schaltflächen für Menükategorien ersetzen.
Wenn Sie es vergrößern, ist es einfacher, einen Bereich schnell zu finden und mit einer kleinen Telefontaste darauf zu klicken oder mit einem Finger oder einem Daumen darauf zu tippen. Da der durchschnittliche Finger einen anklickbaren Bereich von mindestens 44 x 44 Pixel benötigt, kann dies dazu führen, dass die Schaltflächen und Navigationsbereiche den Rest des Inhalts auf dem Bildschirm überschatten. Dies kann jedoch dem Zweck der Website und des Nutzers entsprechen, insbesondere wenn der Inhalt der Startseite gegenüber den Hauptelementen des Menüs untergeordnet ist.
Im Idealfall sollte das Design dem Touchscreen-Benutzer ermöglichen, die Navigationsschaltfläche bei Bedarf größer zu machen.
Tipps zur Optimierung
- Stellen Sie das Menü am oberen oder unteren Bildschirmrand ein, abhängig vom Hauptzweck der Site-Benutzer. Wenn sie nach Inhalt suchen und wahrscheinlich scrollen, bietet das Menü am unteren Rand einen anderen Ort für Ihre Website, anstatt die Website für eine Suchmaschine oder eine konkurrierende Website zu verlassen.
- Verdecken Sie das Menü teilweise, um andere Inhalte auf dem Bildschirm anzuzeigen und das vollständige Menü anzuzeigen, wenn Benutzer darauf tippen. Dies hält das Menü in der Mitte und in der Mitte, ohne nützliche Inhalte auszublenden.
- Platzieren Sie einen Menülink am oberen Bildschirmrand und fügen Sie am unteren Rand eine Navigationsschaltfläche hinzu.
- Groß und dünn mag super für Supermodels sein, aber im mobilen Web ist die Navigation kurz und breit schön. Die breite Kurznavigation hilft auch, wenn Sie längere Kategorietitel haben - Text passt besser.
- Reduzieren Sie die Höhe der Header-Bilder oder ersetzen Sie sie durch ein kleineres Logo, um mehr Platz für die Navigation zu schaffen.
- Sorgen Sie dafür, dass Marken- und Designprobleme konsistent bleiben, indem Sie auf Typografie, Farbe und den Stil der Navigationsschaltflächen achten, anstatt wertvollen Platz mit großen Grafiken und Bildern zu belegen.
- Verkürzen Sie den Text, insbesondere bei Menüschaltflächen und Kategorientiteln. In einigen Fällen ist dies extrem schwierig, und ein stapelbares Menü mit Platz für mehr Text in jeder Zeile ist eine bevorzugte Alternative.
- Vereinfachen Sie so viel wie möglich. Entfernen Sie so viel von der Homepage wie möglich, um sich darauf zu konzentrieren, nur die Top-Elemente bereitzustellen, die die meisten Benutzer wünschen.
Mobile Navigation no-nos
Mobile Benutzer sind beschäftigt, abgelenkt und unterwegs. Sie möchten nicht, dass die Auswahl der Schaltflächen variiert und Sie nicht frustriert werden und die Website aufgrund von Analyseparalyse verlassen.
Gib ihnen nicht viel Auswahl.
Vermeiden Sie horizontales Scrollen und kein Schweben! Schiebermenüs können auch für mobile Benutzer frustrierend sein. Wenn Sie versuchen, die Navigation zu vereinfachen und zu rationalisieren, denken Sie nicht, dass Sie langweilig sein müssen. Kreative Navigation ist keine schlechte Sache, aber sie muss intuitiv sein. Der Benutzer sollte in der Lage sein, leicht zu sehen, wo er die gewünschten Informationen schnell finden kann.
Fazit
Die relative Neuheit von Mobilgeräten als Methode für den Zugriff auf das Internet bedeutet, dass die mobile Navigation sich ständig weiterentwickelt, wenn verschiedene Designs ausprobiert, optimiert oder ganz weggelassen werden.
Was für eine Gruppe von Benutzern an einer Site funktioniert, kann ein Desaster mit einer anderen Site sein, da die Informationen, nach denen der Benutzer sucht, völlig anders sind. Darüber hinaus nähert sich derselbe Benutzer verschiedenen Websites mit unterschiedlichen Zwecken an: Ein mobiler Benutzer, der eine Nachrichtenwebsite auf seinem Telefon betrachtet, möchte höchstwahrscheinlich Schlagzeilen, keine Kontaktinformationen; Genau das möchte sie, wenn sie die mobile Seite für ihren Zahnarzt oder Friseur besucht.
Während Navigationselemente für eine mobile Website von einer traditionellen Website abweichen können, ist der Zweck der gleiche: Web-Besucher haben eine Frage, wenn sie online gehen. Wo ist der Laden? Was passiert in der Welt? Was ist mein Kontostand? Große Navigation führt Benutzer zu den Antworten schnell und einfach.
Erfüllen Sie ihre unmittelbaren Bedürfnisse und sie werden zurückkehren, erhöhen den Verkehr auf der Website, machen Ihre Kunden glücklich und führt zu Empfehlungen und mehr mobile Web-Design-Geschäft für Sie.
Welche Ansätze zur mobilen Navigation bevorzugen Sie als Designer? Wie wäre es mit einem Benutzer? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, mobiles Internetbild über Shutterstock.