it-swarm.com.de

Wie kann ich eine Navigation entwerfen, die auch den zeitgesteuerten Fortschritt durch Phasen eines Prozesses darstellt?

Ich entwerfe ein System mit folgenden Eigenschaften:

  • Benutzer sehen Herausforderungen an, bei denen sie eine Antwort senden müssen
  • Die Herausforderungen sind in 4-5 Stufen unterteilt (z. B. Einreichung, Abstimmung, Finalisten, Gewinner).
  • Jede Phase hat eine festgelegte Zeit (z. B. dauert die Abstimmung 7 Tage, bevor die Finalisten ausgewählt werden).
  • Benutzer können zu jeder Phase navigieren und die Einreichung oder Aktivität anzeigen (oder die stattgefunden hat).

Zusätzliche Informationen, die ich mitteilen möchte, sind:

  • Die Anzahl der Einreichungen oder das Aktivitätsniveau in jeder Phase
  • Ein Countdown bis zur nächsten Stufe

Ich habe überlegt, Tabs zu verwenden, aber ich frage mich, ob es einen schöneren Weg gibt. Vielleicht etwas, das die Situation visuell darstellt.

Welchen Navigationsansatz können Sie für dieses Szenario empfehlen?

5
Jay

Update: Nach einigen Experimenten habe ich beschlossen, mit der folgenden Lösung fortzufahren:

Tab timeline version 2 (Oben erscheint eine Zusammenfassung der Herausforderung, unten der Inhalt der Registerkarte.)

Einige der Gründe, aus denen ich denke, dass dies funktioniert, sind:

  • Sie sind als Registerkarten identifizierbar und daher weiß der Benutzer, wie er mit ihnen interagieren soll.
  • Sie geben ein Gefühl des Fortschritts. Die Registerkarten sind eine Sequenz.
  • Der Benutzer kann sich ein Bild davon machen, wann die Gewinner bekannt gegeben werden, ohne mit Informationen überfordert zu sein.
  • Es gibt ein Gefühl von Aktivität.

BEARBEITEN: Nach JonWs umfangreichem Feedback habe ich diese aktualisierte Version bearbeitet. Es ist weiterhin als Registerkarten erkennbar (Sie können sehen, welche ausgewählt ist), während die Position und Beziehung der Zeitachse klarer erscheint. Ich habe (noch) nicht die volle Breite verwendet, da ich der Meinung war, dass dies den Tab-Effekt verdeckt.

3
Jay

Ich gehe davon aus, dass wir hier landen, weil wir von der "Hall of Challenges" aus navigieren:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

2