it-swarm.com.de

Warum wird dieses Design als überladen oder überwältigend angesehen?

Ich entwickle eine Web-App für Desktop- und Tablet-Browser. Alle meine UX-Kenntnisse stammen aus persönlicher Erfahrung und Iteration - ich wurde nie offiziell geschult. Ich habe die Informationen auf dieser Website mit größter Sorgfalt präsentiert, um sie so gut wie möglich zu organisieren, aber viele Leute, die mir Feedback gegeben haben, beschreiben sie als "überladen" und "überwältigend". Ich habe Mühe herauszufinden, wie ich dieselben Informationen präsentieren und gleichzeitig verbessern kann.

(my website

Welche Elemente dieses kartenbasierten Designs mit zwei Menüs und Seitenleisten lösen diese Reaktion aus?

167
Jack Guy

Hier wird UX hart

An Ihrer Benutzeroberfläche ist an sich nichts auszusetzen. Es scheint eine große Menge an Informationen auf eine einigermaßen klare und standardisierte Weise zu behandeln.
Aber mit Ihrer Benutzeroberfläche stimmt etwas nicht: Die Benutzer fühlen sich darin nicht wohl.

Das ist ein kompliziertes Problem, aber es ist das Herzstück jedes UX-Designprojekts. Es hängt völlig von der Zielgruppe ab, der Sie dienen, und vom Kontext, in dem Ihre App verwendet wird.

Wo soll man anfangen

  1. Stellen Sie sicher, dass Sie die Meinungen einer kleinen Teilmenge von Benutzern nicht überbewerten. Das ist das ganze "quietschende Rad" -Problem. Sie haben möglicherweise berechtigte Bedenken, aber Sie müssen sicher sein, dass sie für die größere Anzahl von Benutzern repräsentativ sind.
  2. Setzen Sie sich mit echten Benutzern zusammen, die mit Ihrer App echte Dinge tun. Sehen Sie, was passiert, welche Aufgaben sie zu erledigen versuchen, wo sie stecken bleiben, verwirrt oder frustriert sind.
  3. Testen Sie jeweils eine Lösung. Je atomarer Ihre Änderungen sein können, desto genauer können Sie den Test entfernen.
  4. Kehren Sie zu Ihren Benutzern zurück, wenn Sie glauben, etwas behoben zu haben. Sammeln Sie viele Rückmeldungen und stellen Sie sicher, dass Sie das gelöst haben, was Sie für gelöst gehalten haben.

tl; dr

  1. Verstehe genau was dein Benutzer erreichen will.
  2. Beseitigen Sie alle
    [Aktion, Wort, Bild, Symbol, Farbe, Form, Pixel]
    dass das sie auf # 1 nicht besser macht.

Allgemeine Beobachtungen

Haftungsausschluss: Ich bin nicht Ihr Benutzer und werde es möglicherweise nie sein. Nehmen Sie meine Beobachtungen für die uneingeschränkten Vermutungen, dass sie sind.

Hierarchie

Die Schlagzeilen der Karte ziehen dank des kleinen Eckdreiecks definitiv zuerst mein Auge auf sich. Das scheint ein wichtiges Element zu sein. Wohin gehe ich als nächstes?

Das Create Game Taste klingt wichtig, sobald ich sie finde. Das Auffinden scheint zu viel Arbeit zu sein, da es sich am Rand des Bildschirms versteckt und die einzige hervorgehobene Hervorhebungsfarbe verwendet, die bereits an anderer Stelle verwendet wird.

Wie wäre es mit den Dingen Games und Users nach oben, die wie nav aussehen? Derzeit bin ich mir nicht sicher, welches aktiv ist oder was sie tun würden.

Generell wird viel um meine Aufmerksamkeit gebeten. Das führt mich zu ...

Visuelles Rauschen

Versuchen Sie, die Anzahl der diskreten Dinge zu verringern, indem Sie die vorhandenen Dinge verfeinern. Könnte beispielsweise Ihr Indikator Online den Kreis verlieren und wie folgt vereinfacht werden:
Online indicator in text only.

Eine weitere Möglichkeit ist die in den Kartendetails. Wie viel dieser Informationen wird auf der Übersichtsebene benötigt? Könnten Sie etwas davon beim Hover/Tap erweitern? Und die Detailsymbole fügen keine nützlichen Informationen hinzu, fügen der Seite jedoch aufgrund ihrer Häufigkeit viel visuelles Rauschen hinzu. Warum nicht einfach Textbeschriftungen:
Details table without icons.

Auch in den Spielkarten habe ich keinen Kontext für die gelb-orange Linie. Auf den ersten Blick sieht es aus wie eine Registerkartenanzeige unter dem Personensymbol, und möglicherweise gibt es eine andere Registerkarte für Private. Sobald ich das denke, merke ich, dass das keinen Sinn ergibt. Mehr verschwendete Aufmerksamkeit.

Monotonie

Trotz der Komplexität könnte es Raum geben, etwas hinzuzufügen, um die Monotonie aufzubrechen. Wäre es sinnvoll, Titelbilder für Spiele zuzulassen? Oder verwenden Sie möglicherweise diese blaue L -Ecke als vollständige Kopffarbe (vorausgesetzt, sie wären nicht wirklich alle gleich)?

165
plainclothes

Das Wiederholen dieser Tabellenzeilenbeschriftungen für jede Spielbox trägt viel zur wahrgenommenen Unordnung IMO bei. Sind all diese Informationen auch notwendig? Sie könnten vielleicht versuchen, zu vereinfachen, aber bei Bedarf die Möglichkeit zur Erweiterung hinzufügen.

(enter image description here

72
Paul LeBeau

Sie haben eine gute Benutzeroberfläche, aber ein paar Dinge fallen mir auf, die vielleicht verbessert werden können:

  • Zu viele Zeilen (Sie können die meisten entfernen, glaube ich)
  • Zu wenig Kontrast zwischen den verschiedenen Teilen Ihres Designs (versuchen Sie, Ihre Augen zu verwischen und prüfen Sie, ob Sie die verschiedenen Teile Ihres Designs noch erkennen können). Die Karten sind besonders problematisch. Lass sie knallen.

Ich habe einige Linien entfernt und die Karten ein bisschen mehr hervorgehoben, und ich denke, dies macht Ihr Design ein bisschen weniger überladen. Urteile selbst.

(enter image description here

33
filip

Die Daten, die von den Karten angezeigt werden, wären in einer Liste oder Tabelle viel sinnvoller. Jede Karte hat dieselben exakten Felder mit unterschiedlichen Werten, und Sie zeigen jedes Mal die Beschriftungen für die Felder an. In einer Tabelle mit Überschriften werden die Bezeichnungen "Zeit", "Sprache" usw. nur einmal angezeigt.

Als Hinweis auf Karten scheinen sie eher für gemischte oder Freiform-Inhalte geeignet zu sein, bei denen jede Karte eine einzigartige Benutzeroberfläche bietet, die auf ihren einzigartigen Inhalt zugeschnitten ist. Ihr Inhalt ist eine Liste der verfügbaren Spiele, daher ist es sinnvoll, diese in der Benutzeroberfläche mit einer Liste darzustellen.

17
Harrison Paine

ich persönlich glaube nicht, dass es überladen ist, aber ja, es ist ein bisschen überwältigend.

Grundsätzlich sehe ich Ihren Bildschirm und habe keine Ahnung, wo ich suchen und was ich tun soll. Die wichtigsten Aspekte scheinen ein L in einer Ecke und die Tatsache zu sein, dass jemand online ist (dies liegt an Ihrer Verwendung von Farben). Dann mischen Sie Informationen, wobei alles die gleiche Hierarchieebene hat. CTA s sind grau (!!!!), Ihr Breadcrumb ist auf der Grundlage des angegebenen Bildschirms seltsam (Sie zeigen Spiele an, aber Ihr Breadcrumb-Display Benutzer) und dies ist ein Level unter Games, was auch komisch ist, es sei denn du meinst Players), du hast eine Nachrichten-/Chat-Seitenleiste das scheint irgendwie mit dem Hauptinhalt zu tun zu haben, aber es ist wirklich schwer, eine Verbindung zu finden ... nun, es ist ein bisschen verwirrend. Die gute Nachricht ist, dass all diese Aspekte leicht geändert werden können. Ihr Hauptproblem scheint darin zu liegen, sich auf Hierarchien zu konzentrieren, was wichtig ist und was nicht. Ändern Sie einfach ein paar Farben (hauptsächlich die CTA) und testen Sie. Ich bin sicher, Sie werden sofort Ergebnisse sehen

Wie auch immer, ich denke, Sie sollten einige umfangreiche Tests durchführen, Verhaltensweisen und Interaktionen untersuchen und Fragen an echte Benutzer stellen, nicht an Freunde, nicht an Kollegen

11
Devin

Die Antworten hier sind großartig, aber ein paar Beobachtungen:

  1. Platzieren Sie den Avatar des Benutzers in einem grauen Kreis (mehrere graue Kreise sehen überladen aus), und fügen Sie auf die gleiche Weise aussagekräftige Informationen in alle Spielkarten ein.

  2. Behalten Sie nur den grünen Kreis als Begriff für Online-Benutzer bei, entfernen Sie Text, dh 'Online', aus der Liste der Freunde, aber behalten Sie den Text im Status der angemeldeten Benutzer bei, da dies ihnen hilft, die Bedeutung verschiedener farbiger Kreise wie grün = online zu verstehen , rot = offline, orange = inaktiv usw.

  3. Entfernen Sie das Mail-Symbol aus 'Freunde | Alle 'Header, wie sie bereits in Ihrem App-Header platziert sind. Beziehen Sie sich für diese 3 Punkte auf das folgende Bild.

    (

  4. Fügen Sie Ihr Menü Spiele und Benutzer wie folgt in die Registerkarte Navigation ein.

    (

  5. Erhöhen Sie die Größe der oberen rechten Ecke und des Buchstabens wie folgt.

    (

8
IT ppl

Ich habe einige grundlegende Anleitungen zu bieten, die für alle UX gelten sollten und hier besonders wichtig sind:

Convenience muss nicht mit Klarheit konkurrieren.

Ein Designer soll den Platz auf dem Bildschirm optimal nutzen und gleichzeitig Informationen präsentieren, die den Benutzer nicht verwirren oder überfordern. Aber das nicht bedeutet, dass wir Designer die Menge der verfügbaren Informationen für die Klarheit, in der sie präsentiert werden, handeln müssen. Nutzen Sie das dynamische Design mit Benutzerinteraktion.

Indem Sie sich mit einem flüssigen Designmedium vertraut machen ...

Wir Designer finden es normalerweise natürlich, Schnittstellen in einem Vektorlayout-Editor zu entwerfen, in dem wir keine Reihe von Animationen, Übergängen und Transformationen verkabeln. Dies schränkt viele von uns in ihrer Fähigkeit ein, innovative Layouts zu entwerfen, die Informationen durch Benutzerinteraktion offenlegen (und verbergen). Lernen Sie also zunächst, in einer Umgebung zu entwerfen, in der Sie sich bewegende, animierte und transformierende Schnittstellen erstellen können. Ich persönlich entwerfe meine Schnittstellen nur mit HTML, JS und CSS - nach einer Weile wird es zu einem natürlichen Designmedium.

... können wir Umgebungen erstellen, in denen Informationen angezeigt und ausgeblendet werden, während die Aufmerksamkeit des Benutzers auf sich gezogen wird.

Nutzen Sie dann die flüssige Freiheit, die Sie beim Entwerfen Ihrer Benutzeroberfläche haben, um Hinweise auf Informationen anzuzeigen, die den Fokus des Benutzers von Element zu Element in der gewünschten Reihenfolge oder der gewünschten Reihenfolge "ziehen", und interagieren Sie mit der Benutzeroberfläche um auf verschiedene Informationsgruppen zuzugreifen.

Indem wir uns auf die dynamische Benutzerinteraktion konzentrieren, können wir eine einfache Schnittstellenhierarchie verwenden, um den Benutzer zu den Informationen zu führen, die er benötigt, wenn er dies wünscht.

Sie möchten dem Benutzer viele Informationen zur Verfügung stellen, aber es gibt eine Grenze für die Menge, mit der sich die Benutzer gleichzeitig wohl fühlen. Begrenzen Sie die Anzahl der offengelegten Details, indem Sie sich auf Benutzerinteraktionen verlassen, die mit einer reibungslosen und einfachen Animation verbunden sind, insbesondere wenn Sie mit doppelten Informationstabellen wie diesem Fall arbeiten.

Versuchen Sie beispielsweise in Ihrem Fall, anstatt alle diese Spielblöcke mit doppelten Informationen anzuzeigen, Blöcke mit nur einer Bezeichnung anzuzeigen, die das Spiel identifiziert, und zeigen Sie dann die Details an, wenn der Benutzer mit ihm interagiert (z. B. durch Tippen oder Bewegen des Mauszeigers) des Spiels. Diese Änderung allein würde Ihre Benutzeroberfläche drastisch vereinfachen und den Benutzer weniger unter Druck setzen, so viele exponierte Informationen gleichzeitig aufzunehmen.

7
Viziionary

Nun, gute Antworten, aber nicht hilfreich bei der Sache außer "Monotonie" - was kein guter Begriff ist, aber nah.

Tolles Design in Zeitschriften, Postern und Benutzeroberflächen ist das Produkt von Schriftart, Schriftgröße und Leerzeichen, das weiter verbessert wurde mit Farbe und nicht geschädigt mit Linie.

Diese Eigenschaften: Schriftart, Schriftgröße, Leerzeichen und Farbe train Der Benutzer muss verstehen, (a) was wichtig ist, (b) wie nach Informationen gesucht wird und (c) wie Muster angezeigt werden die Daten auf einen Blick, anstatt direkt darüber nachzudenken.

Das Lesen ist für die Menschen eine sehr kostspielige Aufgabe. Das Scannen, um festzustellen, "welches dieser Dinge nicht wie das andere aussieht" oder eine Variante des Prinzips ist das, was Sie finden möchten.

Der räumliche Standort entwickelt sich im Laufe der Zeit mit Fachwissen, sobald der Benutzer die Benutzeroberfläche unbewusst auswendig gelernt hat. (Erfahrene Benutzer mögen eine Excel-Oberfläche und neue Benutzer nicht.)

Mit anderen Worten Sie können sich beim Entwerfen einer Benutzeroberfläche nicht auf Selbstbeobachtung verlassen, es sei denn, Sie wissen, ob Sie das Design für einen Einsteiger oder einen erfahrenen Benutzer testen.

Sie trainieren den Benutzer, wie er die Informationen mithilfe der Schriftgröße (Priorität) und des Schriftstils (Schriftarten vermitteln relative Bedeutung) durchsehen kann. Verwenden Sie nach dem Schreiben von Schriftarten Formen (z. B. die Eckregisterkarte, die von einer anderen Person empfohlen wurde). Verwenden Sie nach Formen Farbe. Farbe sollte zuletzt sein.

Die Farbe sollte entweder Typ anzeigen oder "dieses Ding ist wie die anderen" anzeigen. Wenn Sie mit Farbe "dekorieren" müssen (ein farbiger Balken oder Hintergrund), stellt dies normalerweise einen Fehler dar, da es keine "Bedeutung" hat.

Testen Sie Ihr Design, indem Sie separate Elemente in "Ebenen" erstellen und die Ebenen dann ein- und ausschalten. Dein Auge sollte es dir sagen.

Kartenschnittstelle

Jetzt haben Sie 'Karten' (räumliches Layout) kombiniert, verwenden jedoch 'Tabelle'-Schriftarten und -Farben.

Es scheint sicher nicht, dass Karten ein gutes UI-Modell für Ihre Lösung sind. Stellen Sie daher zunächst sicher, dass Sie dem Benutzer helfen. Karten funktionieren hauptsächlich, wenn sie Bilder enthalten und ständig neu angeordnet werden müssen. Ansonsten sind Tabellen normalerweise besser, weil sie einfacher zu scannen sind.

Wenn Sie beispielsweise ein Kartenspiel nehmen und es auf den Boden werfen, können Sie es trotzdem unterscheiden, unabhängig von ihrer Richtung. Wenn Sie Ihre "Karten" auf den Boden werfen, sehen sie alle gleich aus.

Wenn Sie sich also auf die Positionsindizierung durch Ihren Benutzer verlassen, verwenden Sie entweder das falsche Modell oder müssen die Spielkarten-Metapher lösen.

hilfreiche Hinweise

Ich versuche den Leuten zu raten, ein Magazin-Seitenlayout zu finden, von dem aus sie arbeiten können. Der Goldstandard ist natürlich das NYT-Papier und die Website. Alle Arten und Leerzeichen.

Wenn Sie jedoch mit einem visuellen Modell beginnen (z. B. dem Monopol-Brettspiel), können Designer normalerweise das „Box-Problem“ vermeiden, das Amateure plagt.

6
Curt Doolittle

Wenn wir Menschen etwas Strukturiertes betrachten, wie eine Benutzeroberfläche, neigen wir dazu, ein mentales Modell zu erstellen.
Um dieses Ziel zu erreichen, scannen wir die Benutzeroberfläche sofort und unbewusst und nehmen jedes einzelne Element in dieser Benutzeroberfläche zur Kenntnis.
In diesem Prozess verbrauchen wir "mentale Kraft", eine Menge, die von der Anzahl der Elemente in der Benutzeroberfläche abhängt. Dies hängt mit kognitive Belastung zusammen.
Danach werden wir mehrmals "müde", abhängig von der verbrauchten kognitiven Belastung.

Nun, Ihre Benutzeroberfläche enthält eine ganze Reihe von Elementen, und Ihre Benutzer beklagen die Menge an kognitiver Belastung, die für jeden Scan erforderlich ist.
Die Anzahl der Elemente ist nicht die "Hey Leute" -Panels, sondern die Anzahl der Symbole, Textstücke, Linien, alles!
Das sind gute Nachrichten, denn es gibt viel Spielraum für Verbesserungen.

Ich werde einige Beispiele aufzählen, damit Sie meinen Vorschlag verstehen:

  • jedes "Hey Leute ..." hat eine Reihe von internen Zeilen, die, wenn sie entfernt werden, die kognitive Belastung verringern würden, ohne das Verständnis des Benutzers zu beeinträchtigen
  • die Zeile unter "Erstellt von Jack"
  • die Zellgrenzen der Tabelle unter "DETAILS"
  • das "DETAILS" -Wort selbst
  • die Artefaktlinien "Freunde | Alle | ✉5" (beim Schweben wie eine Schaltfläche anzeigen)
  • die Zebrastreifen unter dem Artefakt Friends | All
  • das "Online ●" könnte nur der Farbteil sein, aber stattdessen mit einem grünen ✓ und einem roten Kreuz
  • versuchen Sie unter Sortieren/Filter/Alle Spiele, den Dropdown-Pfeil näher am Text zu platzieren, damit sie zu einer einzigen Sache werden
  • verwenden Sie anstelle von runden Bildern quadratische Bilder, die alle drei Ränder erreichen
  • usw ...

Versuchen Sie als ersten Test, die Tabelle "DETAILS" so zu erweitern, dass sie alle vier Grenzen berührt (wobei die schönen runden Ecken und die Überschrift "DETAILS" verloren gehen), und Sie werden sehen.
Es wird einfacher und damit leichter zu groken.
Dann könnten Sie glauben und sich in einen Wahnsinn der visuellen Elementlöschung begeben.

5
Juan Lanus

Ideen:

Spiel erstellen

Vielleicht könnte die erste Karte Ihr großer Erstellungsspielknopf sein! Ich hätte wirklich gerne solche Eingaben, bei denen Sie einfach auf den Text klicken können, den Sie bearbeiten möchten, und ihn genau dort ausfüllen können. Ich würde darüber nachdenken, es auch reaktionsschnell zu machen. Wenn Sie es also sehen, ist es sehr einfach. Es hat nur ein "+" und ein "Spiel erstellen" und wird dann beim Klicken reibungslos in diesen automatischen Eingabefeldern animiert. (Angenommen, die Karte macht einen Flip in 3D. Hier gibt es endlose Möglichkeiten für Kreativität!)

Spielkarten

Ähnliche Idee für die Reaktionsfähigkeit: Entfernen Sie die Schaltfläche zum Verbinden des Spiels und lassen Sie sie beim Schweben als einen dieser halbtransparenten Overlay-Effekte erscheinen. Ich mag die Idee von Screenshots/Game-Art als Hintergrundbild.

Folgendes habe ich jedoch gerade bei diesen Karten festgestellt: Es ist eigentlich nicht unbedingt der beste Ansatz für diese Art von Daten. Jede Karte enthält die gleichen Details und Informationen. Warum nicht einfach irgendein Tisch? Dann könnten die Spieler sie nach Feldern sortieren.

Sie könnten kreativ werden und die Feldbeschriftungen links oder rechts haben und dann immer noch eine breite kartenartige Ausrichtung mit Hintergrundbild haben. Auch hier endlose Ideen! Vielleicht können sie dann von links nach rechts scrollen, UND das Scrollen nach oben und unten könnte die Kartengruppe nach Klassifizierung verschieben, vielleicht nach Spieltyp. (Pfeiltasten können jetzt mitmachen!)

Spielerliste

Dies (und vielleicht der Header) ist der Teil, der ein wenig überladen zu sein scheint. Ich denke, was es ist, sind nur viele visuelle Informationen in der Peripherie. Wie können wir das beheben? Auch hier gibt es viele Möglichkeiten, wir müssen nur kreativ werden! Beginnen wir wieder mit Hintergrundbildern. Und dann vielleicht eine Akkordeon-Schnittstelle? Vielleicht könnten Sie anstelle von "online o" einen ausgefüllten Kreis gegen einen halb vollen oder leeren Kreis haben. Oder irgendein anderer thematischer Indikator, wie ein Band! (Oder verwenden Sie einen halbtransparenten Farbverlauf mit einem ausgehöhlten Symbol.)

Eine Idee ist, vielleicht sogar nur Online-Leute darin einzubeziehen, während die Offline-Leute unten nur als durch Kommas getrennte Links aufgeführt sind, ähnlich wie in den Foren:

Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , Ferd 3rd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug

(Übrigens, meine Mutter und ich haben uns diese Namen ausgedacht, als wir ein Spiel gespielt haben, um zu sehen, was wir mit Regionen der Tastatur machen können.)


Diese Vorschläge dienen nur dem Einstieg. Ich hoffe es hilft!

4
HTDE
  • Fügen Sie mehr Kontrast hinzu, um den wichtigen Inhalt besser hervorzuheben (die Kartenspiele), indem Sie beispielsweise eine dunklere Hintergrundfarbe hinzufügen.

  • Machen Sie den gelben Strich aussagekräftiger, indem Sie die Größe um den Prozentsatz der Spieler erhöhen, die sich derzeit im Raum befinden. Ein voller Raum würde zum Beispiel einen roten Strich bekommen.

  • Die Schriftart des blauen "L" scheint eine andere Schriftart zu sein, was sie wirklich seltsam macht.

  • Wohl : Entfernen Sie die Symbole vor "Rund", "Zeit", "Sprache" und "Wörter". Sie machen Spaß, lenken aber auch ab und scheinen keine Logik hinzuzufügen, da der Text selbst ausreicht.


Beachten Sie, dass ich nur die ersten 2 Felder zu 100% geändert habe (das zweite Feld hat jedoch immer noch das alte L, es sollte nur als Hinweis angezeigt werden).

(New design

3
Daan

Laut Jonathan Ive von Apple enthält eine gute Benutzeroberfläche nur Informationen, die für den Benutzer SOFORT relevant sind . Check out https://www.youtube.com/watch?v=3q6ULOT9Q4M

Dies mag ein kleiner Punkt sein, ich hatte das gleiche Problem. Bei meinem Client liegt das Problem darin, dass die Benutzeroberfläche zu viel WEISSEN RAUM enthält. Für ein CARD-basiertes Layout wie Ihres versuchen Sie:

  1. Hinzufügen einer Hintergrundfarbe wie #EEE zum Hauptinhaltsbereich

  2. Entfernen Sie für den Seitenleisten-Chat die zusätzliche graue Zeile

  3. Haben Sie die Möglichkeit, die Karten zusammenklappbar zu machen. Wenn Sie numerische Daten als Vergleich präsentieren müssen, versuchen Sie es mit Diagrammen/Grafiken

2
William

Das Fehlen von Hierarchien und Definitionen von Elementen auf der Seite ist das Hauptproblem. Die Verwendung von Hervorhebungsfarben, Skalierung und das Verständnis, wie der Benutzer die Informationen, die Sie ihm präsentieren, interpretieren und verarbeiten soll, hilft dabei

2
David Sheridan