Vereinfachen Sie die komplexe Website-Navigation
|
<br />Das Navigationsdesign stellt eine der Hauptaufgaben des Strukturdesigns dar. Bei Software hängt die Qualität des Navigationsdesigns direkt davon ab, ob Benutzer es reibungslos verwenden können. Wenn wir mit einer komplexeren Navigation konfrontiert werden, besteht unsere erste Reaktion darin, sie zu vereinfachen. Aus diesem Grund ermöglichen einige komplexe Verwaltungssoftwareprogramme auf Unternehmensebene (wie etwa SAP, Kingdee ERP, Inspur ERP usw.) den Benutzern den schnellen Zugriff auf bestimmte Standorte. Andere Programme bieten Favoriten, mit denen Benutzer häufig verwendete Adressen sammeln können. Wieder andere suchen nach Lösungen aus der Perspektive der Navigationsinteraktion. 1. Bieten Sie eine Zusatznavigation auf Pfadebene an. <br />Wenn es um Zusatznavigation geht, denken wir sofort an Suchfelder, Schnelleinstiegspunkte, Favoriten usw. Der Grund, warum wir sofort daran denken, ist, dass diese Formen unsere Nutzung komfortabler machen.  Abbildung 1-1 Schneller Einstieg in die SAP-Oberfläche Der Schnellzugriff auf SAP bietet erfahreneren Benutzern einen bequemen Zugriff, da SAP eine sehr komplexe Unternehmensverwaltungssoftware ist, die Finanzmanagement, Personalmanagement, Produktionsmanagement usw. umfasst und verschiedene Branchen im Unternehmen abdeckt, von denen ein einzelner Benutzer jedoch normalerweise nur eine davon verwendet. Wenn Sie beispielsweise Buchhalter sind, verwenden Sie normalerweise nur das Finanzverwaltungsmodul. Zu diesem Zeitpunkt möchten Sie beim Öffnen der Software nur das Finanzmodul aufrufen. Der Schnellzugriff wird Ihnen zweifellos die Mühe ersparen, den Navigationsbaum zu verwenden.  Abbildung 1-2 Suchfeld auf Joyo.com (E-Commerce-Einkaufszentrum) Websites von E-Commerce-Einkaufszentren sind Websites mit mehr Inhalt. Wenn wir einfach die Navigation verwenden, um ein Produkt zu finden, wird das viel Zeit in Anspruch nehmen. Das Suchfeld kann für die bequeme Suche nach Schlüsselwörtern verwendet werden. Ich glaube, jeder hat seine Bequemlichkeit schon erlebt. Aus den obigen Beispielen können wir ersehen, dass Neulinge über die Formen „Kategorieseiten, Navigationsbäume und Suchen“ finden können, was sie suchen. Da sie sich jedoch nicht mit dem „Gelände“ auskennen, ist es für sie unmöglich, schnell etwas zu finden. Die meisten Benutzer bevorzugen immer noch Formen wie „einfache Navigation und Favoriten“, damit ich auswählen kann, was ich möchte. Wenn ich ein gewisses Maß an Autonomie habe, kann ich direkt das „Suchfeld und die Schnelleingabe“ verwenden und direkt dorthin springen, wo ich hin möchte. Ich bin sehr dringend und möchte nicht mehr Zeit verschwenden. 2. Auch die Organisationsform wird uns eine gute Erfahrung bringen . Es gibt viele Organisationsformen der Navigation. In der Software hat mir die Pfadleiste des Vista-Systems einmal ein tolles Gefühl gegeben. Wir sind normalerweise an die traditionellen Praktiken des Systems gebunden. Das Vista-System durchbricht dieses Denken und verdient unsere Referenz, nicht nur in Bezug auf die Organisationsform, sondern auch in Bezug auf das Denken. Das Bild unten ist ein Beispiel, das ich aufgenommen habe.  Abbildung 1-3 Vista-Systempfadleiste 3. Was mir das Fisheye-Menü zum Nachdenken gab <br />Um in einem Wörterbuch zu navigieren, suchen wir normalerweise und finden dann die Bedeutung eines Wortes anhand der Suche. Wenn wir uns jedoch nur an die ersten ein oder zwei Buchstaben erinnern und das Wort überhaupt nicht, ist die Suche sehr mühsam, egal ob wir ein Buchwörterbuch oder ein elektronisches Wörterbuch durchblättern. Es gibt so viele suchbasierte Navigationen, wie die folgende Präsentation von Kingsoft PowerWord zeigt.  Abbildung 1–4 Das Ziehen der Bildlaufleiste auf der Kingsoft PowerWord-Oberfläche oder das Umblättern von Seiten kostet viel Zeit. Fisheye-Menüs sind eines der Forschungsergebnisse von HCIL (Human-Computer Interaction Laboratory, einem der untergeordneten Labore von UMIACS). Es handelt sich um eine Lösung, die den Betrachtern die Verwendung von Menüs mit mehr Inhalt einfacher und schneller machen soll. Bis zu einem gewissen Grad kann es jedoch als Referenz für die Gestaltung von Wörterbuchnavigationen dienen. Das Bild unten zeigt ihr Fisheye-Menü:  Abbildung 1-5 Das Fischaugenmenü ermöglicht eine großflächige Navigation mit einem Mausklick, und das Dreieck ist ein Werkzeug zur Feinabstimmung. Ich glaube, dass ein solches Design die Verwendung wesentlich reibungsloser macht und es nicht mehr nötig ist, die schwer zu bedienende Bildlaufleiste zu ziehen. Ich glaube, dass wir durch die Suchnavigation mit mehr Inhalt etwas gewinnen werden. Stellen Sie sich vor, Sie entwerfen ein solches Suchformular für Ihr elektronisches Wörterbuch. Dann können Sie problemlos in einem kleinen Bereich nach einem Wort suchen und es auch in Verbindung mit dem Suchfeld verwenden. Ich glaube, dass eine einfache Idee die schmerzhafte Erfahrung des Benutzers ändern wird. 4. Zusammenfassung: Kognitive Einschränkungen und Navigationsdesign <br />Die menschliche Wahrnehmung ist äußerst eingeschränkt und kann nur einfache Probleme leicht lösen. Auch bei der Gestaltung der Navigation orientieren wir uns an den Gesetzen der menschlichen Wahrnehmung und versuchen, diese für den Nutzer auf einen Blick verständlich zu machen. Wenn die von Ihnen entworfene Navigation es den Benutzern schwer macht oder lange braucht, um sich zurechtzufinden, handelt es sich zweifellos um ein Fehlschlag-Erlebnis (es sei denn, das ist der Entwurfszweck). Das stimmt! „Konzentrieren Sie sich einfach auf Ihre Benutzer.“ Bei der Gestaltung der Navigation gilt es, den jeweiligen Nutzervorstellungen Rechnung zu tragen. |
<<: CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln
>>: Zusammenfassung der MySQL InnoDB-Architektur
Artikel empfehlen
Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern
Dank unserer umfassenden CSS-Erfahrung als Webdesi...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
Anmeldevorgang für das Python Flask WeChat-Applet und Implementierungscode der Anmelde-API
1. Schauen wir uns zunächst die Wirkung an Von de...
Detaillierte Erklärung des JavaScript-Statuscontainers Redux
Inhaltsverzeichnis 1. Warum Redux 2. Redux-Datenf...
Detaillierte Erklärung zum Erstellen einer Phalcon-Umgebung unter einem Nginx-Server auf einem CentOS7-System
Dieser Artikel beschreibt, wie man eine Phalcon-U...
Die Magie des tbody-Tags beschleunigt die Anzeige von Tabelleninhalten
Sie haben sicher schon einmal die Webseiten andere...
Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8
Das Datenbankverwaltungssystem MariaDB ist ein Zw...
JavaScript implementiert eine Eingabefeldkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung des Garbage Collection-Mechanismus von JavaScript
Inhaltsverzeichnis Warum brauchen wir Garbage Col...
Tipps zur MySql-SQL-Optimierung teilen
Eines Tages stellte ich fest, dass die Ausführung...
Was ist JavaScript Anti-Shake und Throttling
Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...
So lösen Sie das jQuery-Konfliktproblem
In der Frontend-Entwicklung ist $ eine Funktion i...
Datenbankübergreifende Assoziationsabfragemethode in MySQL
Geschäftsszenario: Abfragen von Tabellen in versc...
Docker-Umgebung in Linux-Umgebung installieren (keine Fallstricke)
Inhaltsverzeichnis Installationsvoraussetzungen S...
Vue implementiert einen einfachen Laufschrifteffekt
In diesem Artikel wird der spezifische Code von V...