Utility-Navigation Einfluss auf das User Experience Design

Um eine effektive und benutzerfreundliche Navigation zu entwerfen, müssen wir nicht nur darüber nachdenken gruppieren Sie unsere Inhalte in übersichtliche Menüs Damit Benutzer leicht finden können, was sie wollen, aber auch, wie Entwerfen Sie die Tools, die sie für die Interaktion mit der Website benötigen

Eine Navigation, die sich nicht streng auf den Inhalt bezieht und die Benutzer bei der Durchführung verschiedener Aktionen unterstützt, wird aufgerufen Dienstprogrammnavigation, Dies ist ein weniger verbreiteter, aber äußerst wichtiger Aspekt des User Experience-Designs. Suchleisten, Anmelde- und Anmeldeformulare, Schaltflächen zum Abonnieren, Freigeben und Drucken, Einkaufswagen, Kontextmenüs und Tools, mit denen Benutzer die Sprache oder die Schriftgröße ändern können, sind typische Beispiele für die Navigation von Hilfsprogrammen.

Sie zu entwerfen ist nicht so einfach, wie es auf den ersten Blick scheint Es bedarf einer Überlegung, um herauszufinden, welche Elemente wir benötigen, wo wir sie platzieren und wie sie angezeigt werden sollen um sicherzustellen, dass unsere Besucher sie schnell finden und verstehen können, wie sie arbeiten.

Wie sich die Utility-Navigation auf UX auswirkt

Bei der Entwicklung der Utility-Navigation müssen wir entscheiden, wie unsere Benutzer mit unserer Website interagieren sollen. Wir müssen ihnen eine geben Interaktionsstruktur Dies passt zu unseren Geschäftszielen, führt die Benutzer durch die Kundenreise, gibt ihnen leicht verständliche Optionen und eine angenehme Benutzererfahrung.

Zuerst, Sie müssen in der Lage sein, die gewünschten Aktionen schnell auszuführen. Wenn wir sie dazu befähigen, wird die Kundenzufriedenheit steigen, und zufriedene Benutzer geben tendenziell mehr Zeit und Geld für Websites aus.

Die Homepage von AirBnB folgt diesem UX-Prinzip und das obere Menü enthält nur Hilfsprogramme. Dies ist keine gewöhnliche Lösung, aber wenn wir uns die unglaubliche Wachstumsrate von AirBnB ansehen, ist dies die perfekte Wahl für sie.

Die 4 Hauptmenüpunkte richten sich an die 4 Hauptpersonen, die normalerweise die AirBnB-Website besuchen: Personen, die daran interessiert sind, Gastgeber zu werden (“Gastgeber werden”), Personen, die ein Problem lösen möchten, das während der Nutzung des Dienstes aufgetreten ist (“Hilfe”), neue und wiederkehrende Benutzer (“Anmelden” und “Einloggen”). Die nützliche Homepage von AirBnB enthält auch eine Schnellsuchleiste, die ein wichtiges Werkzeug auf einer Mietwebsite ist.

Zweitens, Benutzer brauchen keine überflüssigen Hilfsprogramme, da zu viel Unordnung die Aufmerksamkeit ablenkt und den Fokus reduziert. Welche Tools für die Navigation von Werkzeugen erforderlich sind und welche nicht von der Art unserer Website abhängen. Beispielsweise kann es nützlich sein, eine Druckansicht in einen Blog oder eine News-Site aufzunehmen. Die gleiche Funktion kann jedoch eine unnötige Ablenkung auf einem Forum oder einer Social-Media-Website sein.

Die Washington Post beispielsweise zeigt die Dienstprogrammnavigation auf ihren einzelnen Postseiten anders an als auf der Startseite. Auf diese Weise treffen Benutzer nur auf Dienstprogramme, die relevant sind und nicht mit Optionen belästigt werden, die sie sowieso nicht verwenden möchten.

Es gibt drei Hilfsprogramm-Navigationselemente, die Besucher Site-weit verwenden möchten. Diese sind intelligent in der festen oberen Leiste (Suchwerkzeug) enthalten, “Einloggen”, und “Abonnieren”), aber Benutzer müssen nicht über Optionen nachdenken, die sich auf einzelne Beiträge beziehen, wie z “Lese liste” wenn sie die Homepage oder eine der Kategorieseiten durchsuchen.

Drittens, Benutzer müssen schnell verstehen, was sie auf unserer Website tun können. Besucher wissen nicht unbedingt, was sie wollen, daher müssen wir ihnen immer Informationen über die Möglichkeiten geben, die sie haben.

Wenn Sie sich den Screenshot unten ansehen, können Sie feststellen, dass die New York Times Benutzer über die Verfügbarkeit von 3 verschiedenen Editionen informiert: amerikanisch, International, und Chinesisch, und ermöglicht es ihnen auch schnell zwischen den dreien wechseln. Dieses großartige Beispiel intelligenter Hilfsprogrammnavigation zeigt Anwendern weniger offensichtliche Optionen, die sie wahrscheinlich allein nicht aufdringlich und elegant finden würden.

Finden Sie den besten Ort

Es gibt typische Platzierungen für die Dienstprogrammnavigation, bei denen Benutzer intuitiv nach diesen Tools suchen, da sie sich an die Mehrzahl der Websites gewöhnt haben. Das Brechen von Webdesign-Konventionen wird als schlechte Benutzererfahrung angesehen. Dies gilt insbesondere für die Navigation von Anwendungen, bei denen es in den meisten Fällen eher um Benutzerfreundlichkeit als um Kreativität geht.

Da die Dienstprogrammnavigation in den meisten Websites sekundär zur inhaltsbasierten Navigation ist, wird sie häufig in weniger prominenten, aber noch sichtbaren Bereichen platziert. Dies bedeutet normalerweise die (1) rechte obere Ecke von Websites und (2) der untere Teil der Fußzeile. Es ist eine gute Idee, diese Konventionen zu befolgen, wie Dies ist der Ort, an dem die meisten Benutzer zuerst nach Hilfsprogrammen suchen.

Wie Sie unten sehen können, hat Reuters die meisten seiner Hilfsprogramme in diesen beiden typischen Bereichen positioniert, in der rechten oberen Ecke der Website und im unteren Teil der Fußzeile unterhalb der inhaltsbasierten Navigation. Die einzigartige Lösung hier ist die feste zusätzliche Fußzeile mit zwei Gebrauchsgegenständen, die von Designern als die wichtigsten angesehen wurden: “Anmelden oder Registrieren” und “Das Neueste von My Wire”.

Es ist interessant festzustellen, dass der zusätzliche Navigationsbereich noch in einer Art Fußzeile platziert ist, in der Benutzer normalerweise nach ähnlichen Werkzeugen suchen würden, so die Designer von Reuters in gewisser Weise kreativ aber Es folgten weiterhin Webdesignkonventionen, um die Benutzerfreundlichkeit zu erhalten.

Erstellen Sie eine logische Struktur

Die Gruppierung von Hilfsprogrammen in einer logischen Struktur ist entscheidend, wenn Sie eine Site mit einer hohen Conversion-Rate erstellen möchten. Dies kann eine Herausforderung sein, auch wenn wir den Benutzern nicht viele Optionen anbieten möchten. Amazon macht jedoch die Komplexität der Werkzeugnavigation auf die nächste Stufe. Amazon hat eine unglaublich komplizierte Utility-Navigation mit vielen Optionen, Wenn wir Amazon regelmäßig verwenden, scheint dies jedoch nicht der Fall zu sein. Dies ist die Magie des intelligenten Designs.

Sie platzierten die Dienstprogrammnavigation nicht nur in der oberen rechten Ecke, wo Benutzer sie erwarten würden, sondern teilte sie auch in drei Hauptgruppen auf: (1) eine Suchleiste, (2) benutzerbezogene Informationen (unter der Suchleiste) ) und (3) Aktionen, die Benutzer auf der Site ausführen können.

Es ist klug, denn dank visueller Hinweise wie dem Einkaufswagen oder dem Suchsymbol können Kunden im Handumdrehen entscheiden, welche Gruppe sie verwenden möchten, und sie können dann die beiden anderen ignorieren. Es gibt nur eine Gruppe (“Ihr Konto”, “Versuchen Sie es mit Prime”, “Korb”, und “Wunschzettel”) das über Untermenüs verfügt, die ebenfalls logisch strukturiert sind, und die verschiedenen Untermenügruppen nach diskreten, aber sichtbaren Trennzeichen unterteilt sind, damit Benutzer schnell finden können, was sie möchten.

Erstellen Sie ein effektives visuelles Design

Das visuelle Design einer effektiven Utility-Navigation muss dem berühmten KISS-Prinzip (Keep It Simple, Stupid) folgen. Es wird empfohlen, Symbole mit Beschriftungen zu versehen, Steuerelemente wie Steuerelemente aussehen zu lassen und die wichtigsten Aktionen visuell hervorzuheben. Es kann auch eine gute Idee sein, die Nutzungs- und inhaltsbasierte Navigation durch ein etwas anderes Design zu unterscheiden.

Zwei großartige Beispiele für effektives visuelles Design finden Sie auf der Website von Walmart und Etsy. Die Designer platzierten die Dienstprogrammnavigation an der obersten Stelle beider Websites und hoben sie mit Farben hervor, die sich vom Rest der Navigation unterscheiden, Walmart mit blauem Hintergrund und Etsy mit blauen Schriftarten.

Beide Standorte Betonen Sie die wichtigsten Benutzeraktionen mit verschiedenen visuellen Designelementen, Walmart verwendet gelb für die Schaltflächen Suchen und Anmelden, während Etsy der Schaltfläche Anmelden einen diskreten blauen Rahmen gibt und über dem Menü Warenkorb ein graues Einkaufswagen-Symbol enthält.

Dies ist der einzige Ort, an dem Etsy ein Symbol in seinem Utility-Menü verwendet, während Walmart ein Symbol neben jedem Element anzeigt, aber nicht vergessen, die erforderlichen Beschriftungen direkt neben den Symbolen einzufügen.