it-swarm.com.de

Bestes Layout für eine Einstellungsseite

Ich habe eine Einstellungsseite mit einer ganzen Reihe von Optionen. Siehe Screenshot

Original Settings

Jeder der Links führt den Benutzer direkt zu einem Formular, in dem er die Details ändern kann (z. B. Geschäftseinstellungen), oder zu einer Suche/Liste, in der er nach den Details suchen und diese dann bearbeiten kann (z. B. Produkte).

Es ist ein sehr effektives und benutzerfreundliches Layout?

Ich denke darüber nach, jeden Abschnitt als Option in einem vertikalen Navigationssystem auf der linken Seite zu ändern, und dann wird jeder Link zu einer Registerkarte in einem Tabset, wenn die Option auf das Navigationssystem geklickt wird.

21
Craig

Ich sehe zwei alternative Lösungen für Ihre Frage:

1) Behalten Sie das aktuelle Design bei.

Es ist gut da Sie alle Einstellungen offenlegen auf einmal. Da Sie so viele Linkgruppen haben, kann es länger dauern, bis der Benutzer den Unterschied zwischen beispielsweise Servicemanagement und Produktmanagement herausfindet. Amazon verwendet derzeit diesen Ansatz und da sie von der Benutzerfreundlichkeit ziemlich besessen sind, würde ich diese Lösung als eine gute Lösung betrachten.

Amazon uses a menu page pattern

Wenn Sie diese Lösung wählen, würde ich mehr am visuellen Design arbeiten. Machen Sie es ein bisschen strukturierter und kompakt. Die verschiedenen Einrückungen und die Verwendung von schwarzen Symbolen fühlen sich chaotisch an. Vielleicht könnte ein von einem Yahoo-Verzeichnis inspiriertes Layout die Verwendung vereinfachen?

2) Teilen Sie es in Unterseiten auf

und vielleicht ein paar Gruppen zu breiteren zusammenführen. Dies ist der beliebteste Ansatz, den große Websites wie Facebook, Twitter und Betriebssysteme wie Windows und MacOs verwenden. Normalerweise unterteilen sie die Abschnitte "Einstellungen" in folgende Bereiche:

  • Profil (Dinge, die für andere Mitglieder sichtbar sind),
  • Design (Wie Ihre Seite aussieht, z. B. Hintergrundfarben, Kontodetails (vom System verwendete Daten wie E-Mail, Adresse, Telefonnummer, Land)
  • Site-spezifische Einstellungen (dies kann beispielsweise Ihre Dienstverwaltung sein)
  • Passwort ändern
  • Entfernen Sie Ihr Konto

Twitter uses a sub page approach

16
Tony Bolero

Ich denke, das Design im Screenshot ist nahezu ideal. Ein Großteil der Bewertung bezieht sich auf die Vor- und Nachteile des Mega-Menü-Musters. Gestatten Sie mir Folgendes:

Das Mega Design

Der gute:

  • Alle Optionen sind für den Benutzer sichtbar. Dies fördert:

    • Auffindbarkeit - Benutzer können die entsprechende Option leichter finden.
    • Lernfähigkeit - Benutzer können die verfügbaren Optionen schneller erlernen.
    • Serendipity - Benutzer finden möglicherweise zufällig eine interessante Option.
  • Obwohl es eine Vielzahl von Optionen gibt, sind sie schön gruppiert und das Design ist einladend.

Das Schlechte:

  • Die Vielzahl der Optionen erhöht sich visuelle und kognitive Belastung.

Dinge, die man beachten muss:

  • Sind die Unterüberschriften erforderlich? Sind die Erklärungen nicht im Inhalt enthalten? Müssen Sie den Leuten wirklich sagen, was sie auf einer Einstellungsseite tun können? Im Idealfall sind die Beschriftungen selbsterklärend, sodass die Unterüberschriften entfernt werden können. Dies verringert die visuelle Belastung. Wenn sie bleiben sollen, würde ich ihren Kontrast reduzieren (hellgraue Farbe verwenden).
  • Verwendung von Symbolen. Die Symbole erhöhen die visuelle Belastung. Die meisten Benutzer lesen die Überschriften, anstatt zu versuchen, die Symbole zu verstehen. Nur erfahrene Benutzer können das relevante Element möglicherweise mithilfe von Symbolen finden. Sie tragen zwar wenig zur Benutzerfreundlichkeit bei, können jedoch die Ästhetik verbessern. Vielleicht sollten Sie auch hier den Kontrast reduzieren.
  • Unterstreichungen Unterstreichungen sind soooo 70er Jahre. Reduzieren Sie das visuelle Rauschen, indem Sie diese entfernen. Viele Systeme verwenden heutzutage Farben, um ein anklickbares Element zu kennzeichnen.

Der Nav-Vorschlag

Der Vorteil des Nav-Vorschlags besteht darin, dass er die visuelle Belastung verringert, gleichzeitig aber auch die Sichtbarkeit verringert. Wenn Unterelemente nicht sofort sichtbar sind, raten Benutzer manchmal (fälschlicherweise), wo sich ein Unterelement befindet. Die Lernfähigkeit und Serendipity werden ebenfalls reduziert.

Eine weitere Gefahr des Nav-Vorschlags besteht darin, dass er Interaktionslast erhöht - auf einem Desktop-Benutzer sind 2 Klicks von der gesuchten Option entfernt. Mit dem Mega-Design - nur 1.

Möglicherweise möchten Sie eine schnelle Untersuchung der Paginierung durchführen. Es gibt zunehmend Hinweise darauf, dass Benutzer in der Lage sind, große Datenmengen zu verarbeiten (die zuvor als verwendbar angesehen wurden), und dass die Paginierung die Benutzerfreundlichkeit verringert. Obwohl es hauptsächlich für Suchergebnisse gilt, kann es meiner Meinung nach verwendet werden, um das oben Gesagte zu unterstützen.

7
Izhaki

Hier gibt es einige wirklich gute Antworten. Ich bevorzuge aus den oben genannten Gründen eher das "Mega-Design". Pinterest hat eine wirklich gute Mischung aus "Mega" - und "Unterseiten" -Designs. Beim Scrollen wird zwischen den Unterseiten gewechselt. Dies hat den Vorteil, dass die visuelle Belastung auf die Unterseiten beschränkt wird, hilft den Benutzern jedoch auch dabei, alle verfügbaren Optionen leicht zu finden . enter image description here

5
Andrew

Es ist nicht "freundlich" in der Art, wie das Design mir morgens Kaffee bringt, nein. Aber es ist nützlich, da es eine "Gib mir alle meine Optionen" -Seite ist. Dies könnte gegen die allgemeine Konvention verstoßen, Benutzern nur die Optionen zu geben, von denen wir wissen, dass sie am häufigsten verwendet werden. Dies ist jedoch eine Einstellungsseite, und als solche können Sie eine überladenere Benutzeroberfläche haben, da die Verwendung schneller ist, sobald Sie sie gelernt haben.

Ja, die Lernkurve ist steiler, aber Sie haben eine All-in-One-Seite, die gut in verständliche Informationsblöcke gruppiert ist.

3
Benny Skogberg

Es ist nicht unbedingt ein ineffektives Layout wie es ist. Um zu verstehen, ob es für Ihre Benutzer effektiv ist, können Sie eine Reihe von Benutzertests durchführen. Zum Beispiel - ein Kartensortierung , wenn Sie sehen möchten, wie die Kategorienamen lauten sollen, oder eine umgekehrte Kartensortierung, wenn Sie Ihre vorhandene Struktur überprüfen möchten.

Wenn Sie es in eine vertikale Navigation auf der linken Seite aufteilen, können Sie dem Benutzer eine kleinere Anzahl von Optionen zur Verfügung stellen, die er pro Bildschirm verarbeiten kann. Er muss jedoch zuerst die richtige Kategorie finden! Ein Benutzer kann 2-3 verschiedene Kategorien besuchen, bevor er die richtige findet. Das ist nur frustrierend. (Ich mache das jedes Mal in der Windows-Systemsteuerung.)

Wichtig ist auch, wie die Informationen in diesen Kategorien dargestellt werden. Wenn Sie jede der Unterkategorien auf der Registerkarte anzeigen, muss der Benutzer möglicherweise erneut suchen und picken, um die richtige zu finden. Sie sollten "Registerkarten in Registerkarten" vermeiden - ein vertikales Navigationssystem ist nur eine andere Art von Registerkarte.

In einem Layout mit Registerkarten (im Vergleich zu Ihrem vorhandenen "flachen" Layout) erhöhen Sie auch die Anzahl der Aktionen, die erforderlich sind, um die entsprechende Einstellung zu erreichen. Die Erhöhung der Anzahl der Aktionen ist zwar nicht unbedingt schlecht, aber im Namen der Organisation nicht gerade gut.

So wie es ist, werden einem Benutzer viele Informationen präsentiert, aber sie können leicht analysiert werden (zumindest so, wie ich es aus dem Bild interpretiere). Die Informationen sind visuell gut aufgeteilt (siehe Kartensortierung, um "mental gut organisiert" zu antworten), und nach einigen Anwendungen ist ein Benutzer wahrscheinlich vertraut genug (wenn nicht sofort), um schnell zu finden, wonach er sucht.

Kurze Antwort: Ich würde das vorhandene "flache" Design vorschlagen.

1

Ich denke, Ihre Seite ist in Ordnung, weil: 1) mir klar ist, welche Optionen ich habe 2) Untertitel unter dem Titel sagen mir, was ich tun kann 3) Symbole, soweit ich sie sehen kann, sehen angemessen aus.

Alternative Vorschläge, wenn Sie der Meinung sind, dass sie zu überladen sind, sind der reguläre Titel und die Beschriftung selbst. Der Benutzer kann darauf klicken, um die Optionen zu erweitern.

Ich denke, die Seite sieht gut aus, aber vielleicht würde ich versuchen, Ihre Optionen in einem quadratischen Raster wie folgt zu "gruppieren": http://mathforum.org/alejandre/magic.square/ adler/adler.3x3grid.gif (Vergessen Sie nicht, auch zwischen den einzelnen Feldern zu platzieren.)

Auf diese Weise wird der Text aus Ihren Beschriftungen umbrochen, anstatt auf die doppelte Länge Ihrer Optionen erweitert zu werden, und die Seite selbst sieht viel sauberer aus. Hoffe das hilft einigen!

1
Ochre