Ist das folgende Navigationsdesign lesbar?

Ich habe die D3-JavaScript-Bibliothek verwendet, um einen zeitbasierten linearen Beitragsnavigator für meinen persönlichen Blog zu erstellen, der sich erheblich von der "traditionellen" Art der Verknüpfung von Beiträgen unterscheidet. Ich wollte etwas Feedback dazu sammeln, ob dieses Design funktioniert oder nicht: und genauer gesagt, ob es visuelle Elemente gibt, die ich hinzufügen kann, um die "Offensichtlichkeit" der Navigationsleiste zu verstärken.

Hier ist es deaktiviert:

Geben Sie hier die Bildbeschreibung ein

Die Knoten werden aktiviert, wenn Sie mit der Maus darüber fahren:

Geben Sie hier die Bildbeschreibung ein

Meine große Frage ist: Ist dieses Design funktional offensichtlich?
und was kann getan werden, um es noch besser zu machen?

Eine Zeitleiste sollte wirklich eine Zeitleiste sein , um es klar zu machen. Wenn Sie eine horizontale Linie hinter die Kreise setzen, mit kleinen vertikalen Stümpfen an jedem Ende und den Start- und Endmonaten / -jahren darunter, wird deutlicher, dass es sich um eine Zeitleiste handelt. Vielleicht würde es sogar noch mehr helfen, den Monat und das Jahr unter jedem Postkreis hinzuzufügen.

Antworten (1)

Hier gibt es ziemlich große Probleme .

Ich habe die Navigation nicht gesehen, selbst wenn ich danach gesucht habe . Ich brauchte dreimal, um die Seite zu überfliegen, um sie zu finden. Wenn das stimmt, würde ich es auf keinen Fall sehen, wenn ich nicht danach suche. Dies liegt wahrscheinlich daran, dass es

  1. Befindet sich an einem ungünstigen Ort für eine Navigation - die meisten befinden sich oben. Dies ist eher eine Art "andere Post-Vorschau"-Funktionalität, nicht wirklich eine klassische Navigation. Ich denke, die Position ist in Ordnung, wenn das Ihr Ziel ist.
  2. Es ist wirklich klein in der Höhe - es sieht fast aus wie eine seltsam aussehende Grenze, nicht etwas, über das man schweben kann.
  3. Die Farben sind fad - es zieht überhaupt nicht mein Auge an.

Es gibt keinen Hinweis darauf, was das Bewegen der Maus darüber bewirkt, bis ein Benutzer es tut . Daher haben Benutzer keine Ahnung, ob sie darüber schweben sollen oder nicht. Es sieht nicht wie etwas aus, an das ich gewöhnt bin, also werde ich wahrscheinlich normalerweise nicht versuchen, es zu schweben; Ich kann aus Versehen.

Es ist nicht immer einfach, mit der Maus über einzelne Kreise zu fahren . Wenn Sie einige direkt nebeneinander gepostet haben, überschneiden sie sich. Ich nehme an, wenn Sie zwei gleichzeitig posten würden, wären sie genau übereinander. Das ist nicht sehr brauchbar. Dies wird umso schlimmer, je mehr Abstand zwischen den Posts vorhanden ist. Wenn Sie also eine Weile nicht gepostet haben, dann wäre die Skala mit einem ganzen Haufen zusammengeballt, dann eine von selbst, weil der Ort auf der Zeit basiert.

Das wäre auf dem Handy schrecklich . Es wäre so schwierig, den richtigen Kreis zu berühren, besonders wenn sie sich überlappen. Außerdem würden sie blind zu einem anderen Beitrag wechseln, da die Vorschau nur beim Hover angezeigt wird. Das ist nicht akzeptabel!

Die Pfeile machen nichts (und sind von vornherein zu klein) . Ich nehme an, das ist, wenn es links oder rechts mehr Beiträge gibt? Ich bin mir nicht sicher. Aber da es keine Grenze um den Container gibt, weiß ich sowieso nicht, wo er beginnt oder endet, also könnten sie mit etwas ganz anderem zusammenhängen.


Daher hier einige Verbesserungen:

Zeige nicht alle deine anderen Posts . Benutzer möchten keine ganze Liste aller Posts sehen, insbesondere in Punktform, die ihnen keine Informationen über die Posts gibt. Zeigen Sie ihnen stattdessen relevante und lassen Sie eine Option, um mehr anzuzeigen oder eine ganze Liste anzuzeigen.

Machen Sie es so, dass Überlappungen kein Problem darstellen . Es ist mühsam, es zu verhindern – vermeiden Sie es einfach von vornherein.

Zeigen Sie jederzeit eine Vorschau bestimmter Beiträge an . Sie könnten dies auf viele Arten tun, aber ich stelle mir vor, einen großen über die gesamte Breite des Inhalts und vielleicht ein paar (3 oder so) darunter zu zeigen. Auf diese Weise sehen die Benutzer sichtbar „Hey, hier ist noch ein Bild, das auf den Beitrag verlinkt“ statt nur ein paar zufällige Kreise.

Wenn Sie wirklich viele Posts anzeigen möchten, können Sie eine weitere kleinere Zeile hinzufügen und sie den Slot der Hauptvorschau ersetzen lassen, wenn Sie darauf klicken oder den Mauszeiger darüber bewegen.

Folgendes stelle ich mir vor:

Geben Sie hier die Bildbeschreibung ein

Ok --- du gewinnst einige, du verlierst einige. Unter Berücksichtigung dessen, was Sie gesagt haben, zusammen mit meinem eigenen Wunsch, mich nicht mit der Kategorisierung und Verlinkung von Beiträgen befassen (und den Code dafür schreiben) zu müssen, habe ich ein System zusammengestellt, das Seiten nach dem Zufallsprinzip mit einem Box-Design wie (2) ( 3) (4) in Ihrem Wireframe. Schau mal . Es dient manchmal der Seite, auf der Sie sich bereits befinden (das Schreiben eines Checkers ist technisch ziemlich einfach, aber bleh), aber ansonsten sollte es gut funktionieren. Gedanken?
@ResMar Ich habe mir Ihren Link in Firefox angesehen und er hat das neue Box-Design überhaupt nicht angezeigt, also habe ich Firefox geschlossen und ihn mit demselben Link erneut geöffnet, und er hat ihn auch diesmal nicht angezeigt. Ich hatte keine Probleme, es in Chrome anzuzeigen, aber das letzte Navigationsbild rechts wird immer wieder halb "aus dem Bildschirm" abgeschnitten. Wenn es so etwas wie einen Pfeil gäbe, könnte ich damit das letzte Bild nach links verschieben, damit ich alles sehen könnte. Firefox und Chrome sind auf dem neusten Stand.
@ResMar Das ist viel brauchbarer! Damit wir so etwas kritisieren können, sollten Sie eine neue Frage stellen, da diese Frage beantwortet wurde