it-swarm.com.de

Wie kann ich monochrome Symbole zum Laufen bringen?

Mein Unternehmen hat gerade ein monochromes Symbolthema implementiert, um zu einer "moderneren" Benutzeroberfläche überzugehen.

Die Rückmeldungen aus der ersten Runde der Benutzertests waren gemischt:

  • Fast alle sind sich einig, dass das Thema gut aussieht
  • Personen unter 25 Jahren haben kaum Probleme, die Benutzeroberfläche zu manipulieren
  • Ältere Personen haben Probleme zu erkennen, ob Symbole aktiviert, deaktiviert oder ausgewählt sind
  • Benutzer melden Probleme beim Auffinden von Elementen in der Navigationsstruktur, da sie zur Unterscheidung der Symbole keine Farbe mehr verwenden können

Die meisten unserer Benutzer sind ältere Personen und verwenden die Software seit Jahren. Wie können wir den auffälligen visuellen Effekt eines monochromen Themas beibehalten und gleichzeitig die Verwendung der Benutzeroberfläche vereinfachen? Ich bin bereit, eine begrenzte Menge Farbe wieder einzuführen.

51
hash_collision
  1. Ausgewählt - Erstellen Sie einen invertierten Auswahlstatus, der diese Funktion hervorhebt. Viele Möglichkeiten zu erreichen, aber als Beispiel; Machen Sie den Schaltflächenhintergrund schwarz mit einem weißen oder hellgrauen Stiftsymbol.
  2. Aktiviert - Kontrast erhöhen. Unsere Augen werden weniger lichtempfindlich und sehen mit zunehmendem Alter einen engeren Bereich des Farbspektrums. Das Erhöhen des Unterschieds zwischen aktivierten und deaktivierten Grautönen hilft bei der Differenzierung.
  3. Distinguish - Sie können auch viele andere Mechanismen verwenden, um diese beiden Zustände zu unterscheiden. Zum Beispiel; Ein subtiler Schatten unter den aktiven Zuständen hilft dabei, sie von ihren behinderten Gegenstücken zu unterscheiden.
  4. Größe - Das angehängte Bild ist möglicherweise verkleinert. Wenn jedoch ein großer Teil Ihrer Bevölkerungsgruppe älter ist, sollten Sie in Betracht ziehen, größere Symbole zu erstellen. Dies hilft älteren Augen, die Unterschiede zwischen den Symbolen zu erkennen und letztendlich das Verständnis zu verbessern.

Die Antwort ist keine einzige Änderung. Ich vermute, dass eine Kombination von Anpassungen erforderlich ist, um Ihr Ziel eines besseren Verständnisses zu erreichen.

60
nkcedwards

Kontrast

Ihren Symbolen fehlt ein erkennbarer Kontrast - sowohl zwischen dem Symbol und dem Hintergrund als auch zwischen den aktiven und inaktiven Symbolen.

Erhöhen Sie den Kontrast.

46
DA01

Ich hasse es, ein Verfechter der Tradition zu sein, aber ich denke, in diesem Fall klingt es so, als ob der Geschmack des Managements in der Benutzeroberfläche die Benutzererfahrung überfordert hat.

In UX-Begriffen ist nichts falsch an dem, was Sie hatten. Tatsächlich klingt es so, als wäre es besser gewesen - vorausgesetzt, jeder hat es verstanden. Farben können auch bei Ihren Kontrastverhältnissen hilfreich sein.

Es könnte sich lohnen, sich dem Design erneut zu nähern und die Spezifikation nicht so festzulegen, dass Farben entfernt werden. Überlegen Sie, wie die Farben verwendet werden, und prüfen Sie, ob es eine Möglichkeit gibt, sie zu "modernisieren", ohne sie zu verlieren. Wie Sie dies tun, liegt sowohl bei Ihnen als UI-Designer als auch als UX-Designer.

Vertrautheit spielt in UX eine große Rolle, auch wenn Sie die Art und Weise, wie sie Ihre Hand zwingt, nicht mögen!

Hoffe es klappt alles! :) :)

22
TJH

Etwas zu verstehen in Bezug auf menschliches Sehvermögen und Alter - es wird mit zunehmendem Alter schlimmer, weil die Linsen der Augen mit zunehmendem Alter steifer und weniger flexibel werden.

Aus diesem Grund treten Augenerkrankungen wie Astigmatismus (Doppelsehen, Probleme mit der Fokussierung) mit zunehmendem Alter häufiger auf.

Für die Benutzererfahrung bedeutet dies, dass jüngere Menschen zwar nette kleine Symbole genießen können, die subtil sind, ältere Menschen sich jedoch schielen lassen, um zu versuchen, ihre nicht so flexiblen Objektive dazu zu zwingen, die Benutzeroberfläche auf die gleiche Weise wie die zu sehen junge Leute tun.

Das heißt, hier sind einige potenzielle Problembereiche:

GRÖSSE - Symbolgrößen müssen erhöht werden

Wenn Ihr Publikum ein älteres Publikum ist, berücksichtigen Sie bitte die Größe. Das hat mit dem ganzen Schielgeschäft zu tun, das ich erwähnt habe. Sie möchten, dass Ihre Benutzeroberfläche augenschonend ist und nicht dazu, dass sich die Leute nach vorne beugen und sagen: "Warten Sie, was ist was?"

Eine größere Oberfläche mit größeren Symbolen hilft auch dabei, das Ganze anzusprechen: "Ich kann nichts im Navigationsbaum finden!" Problem auch.

FARBKONTRAST UND MUSTER - Der Kontrast muss erhöht werden und die Muster müssen konsistent sein.

Vergleichen Sie das ausgewählte Bleistift-Werkzeugsymbol mit dem Ordnersymbol und dem Haussymbol oder einem anderen Symbol mit einer dunkleren Füllfarbe.

Beachten Sie, wie ähnlich sie in Bezug auf Farbe sind? Beachten Sie auch die Feinheit des Farbunterschieds zwischen aktiviert und deaktiviert (ich nehme an, die Zwischenablage ist deaktiviert)/sehr hell gefärbten Symbolen (die zur rechten Hälfte hin).

Dies ist verwirrend, da das Bleistiftwerkzeug, obwohl es mit einem dunkleren, quadratischen, farbigen Feld ausgewählt ist, dennoch eine sehr ähnliche Farbe wie andere nicht ausgewählte Symbole wie das Haussymbol und das Ordnersymbol aufweist. Ebenso ist die Subtilität des Farbunterschieds zwischen aktiviert und deaktiviert zu subtil.

Darüber hinaus haben Sie eine Sammlung von Symbolen, deren Farbmuster/Schemata/Stile nicht alle einheitlich sind (was nicht unbedingt eine schlechte Sache ist oder etwas, das Sie ansprechen können, aber ich sage dies nur sachlich), da einige nur Umrisse sind. .. wie das i-Symbol und einige sind mit der dunkleren Farbe wie die Ordner- und Haus- und Kamerasymbole ausgefüllt.

Aufgrund der mangelnden Einheitlichkeit der Farbgebung (Schema/Stil) (einige ausgefüllt, andere umrissen) fügt es der Benutzeroberfläche ein Gefühl natürlicher Variation hinzu, was möglicherweise zu Verwirrung führt, um Wurzeln zu finden. Denn wenn jemand nach einem ausgewählten Symbol sucht und nach einem gefüllten Symbol sucht, könnte er auf den ersten Blick so etwas wie das Ordnersymbol sehen und denken, dass es das ausgewählte Symbol ist, wenn es nicht visuell vorhanden ist 'gefüllte' Symbole.

Aus diesen Gründen habe ich das Gefühl, dass die Erhöhung des Farbkontrasts und - wenn möglich - die Beibehaltung des gleichen Musters/Schemas/Stils beim Färben der Symbole (alle nur Umrisse oder nur Füllungen oder eine Kombination aus beiden oder, wenn Sie dies tun) verbessert werden Wenn Sie die Variation beibehalten möchten, stellen Sie sicher, dass zwischen den nicht ausgewählten Symbolen und den ausgewählten Symbolen genügend Variationen vorhanden sind. Dies wäre hilfreich.

Eine spezielle Möglichkeit, die Tatsache hervorzuheben, dass das ausgewählte Symbol ausgewählt ist, besteht darin, die Hintergrundfüllfarbe für das Quadrat als eindeutige Farbe für die Benutzeroberfläche festzulegen. Fügen Sie außerdem einen 1-Pixel-Rand hinzu, indem Sie eine etwas dunklere (und wiederum eindeutige) Version der Füllfarbe verwenden. So etwas würde dazu führen, dass das ausgewählte Symbol stärker hervorsticht, aber nicht wie ein schmerzender Daumen.

Zusammenfassend lässt sich sagen, dass ein besserer Kontrast in den Farben (in Bezug auf einzelne Symbole und in Bezug auf schnittstellenweite Symbole) und eine bessere Gleichmäßigkeit zwischen Symbolen mit ähnlichen Zuständen (oberflächenweite Symbole, neu ausgewählte Symbole, deaktiviert usw.) hilfreich sind um das visuelle Erlebnis für die Augen zu erleichtern. Dies wiederum trägt auch dazu bei, die Benutzerfreundlichkeit der benötigten Symbole zu verbessern.

9
Aith

Der aktuelle Trend ist nicht monochrom, sondern flaches Design. Sie können weiterhin Farben verwenden. Die Verwendung der markantesten Farbe, die zuvor für jedes Symbol verwendet wurde, sollte den Benutzern helfen, sich an das alte Design zu gewöhnen.

4
user50285

Ich denke, es gibt einige Designfragen/Überlegungen, die noch entschieden werden müssen, bevor Sie die Entscheidung treffen können, nämlich:

  1. Versuchen Sie, ältere oder jüngere Benutzer anzusprechen? Wie ist die aktuelle Verteilung des Benutzeralters und wie ist der Trend? Ist es sinnvoll, ausschließlich für sie zu entwerfen oder eine gewisse Anpassung der Software zuzulassen?
  2. Ist der graue Hintergrund als neutrale Farbe gestaltet oder um bestimmte Farbkonflikte mit dem Rest der Benutzeroberfläche zu vermeiden? Grau wird normalerweise für deaktivierte Zustände verwendet, daher sollten Sie den aktivierten Zustand wahrscheinlich nicht zu ähnlich machen, da sonst nicht genügend Kontrast vorhanden ist.
  3. Ist es nicht möglich, andere visuelle Elemente einzuführen, die dazu beitragen, die Navigation in logische Abschnitte zu unterteilen (z. B. vertikale Streifen wie MS Office-Multifunktionsleisten).
  4. Gibt es QuickInfos oder Beschriftungen, mit denen Benutzer überprüfen können, auf welches Symbol sie drücken, bevor sie dies tun, anstatt sich nur auf Symbole zu verlassen, insbesondere wenn es sich um eine wichtige Funktion handelt, die den Status der Daten ändert?

Ich denke, wenn Sie diese Fragen beantworten und sehen können, wie die Benutzertests durchgeführt werden, sollten Sie die Antwort auf die Frage finden.

2
Michael Lai

Ich denke, dass ein Bichrom Farbschema in diesem Fall besser als Monochrom funktionieren könnte.

Alle ausgewählten Symbole können eine einzelne Farbe haben, d. H. Grün, und alle nicht ausgewählten Symbole können grau sein. Achten Sie nur darauf, eine Farbe zu verwenden, die in kontrastarmen Situationen nicht leicht mit Grau verwechselt werden kann, z. B. suboptimal LCD Betrachtungswinkel. Blau wäre ein Beispiel für eine Farbe mit einem solchen Problem.

2
dotancohen

Wenn Symbole monochrom sind, ist der Umriss für einen Benutzer am wichtigsten, um zwischen ihnen zu unterscheiden. Sie müssen den Kontrast verbessern. Ich würde zwei Dinge vorschlagen, um dies zu tun und gleichzeitig das Management bei Laune zu halten:

  • Entfernen Sie den grauen Hintergrund in der Symbolleiste. Grau auf Grau ist niemals eine gute Kombination. Sie können den Hintergrund weiß machen, ohne Ihre Anweisung zu verletzen, die Benutzeroberfläche monochrom zu halten, und ihm einen grauen Rand geben, um sicherzustellen, dass er weiterhin als Symbolleistenfeld hervorsticht.

  • Mit einem weißen Hintergrund können Sie dann den helleren Grauton (zuvor für den Hintergrund verwendet) für die deaktivierten Symbole verwenden.

2
Franchesca

Obwohl es bereits einige gute theoretische Antworten gibt, denke ich, dass es eine praktische Lösung für Ihr Problem gibt.

Das größte Problem, das Sie angeführt haben, ist der Kontrast. Ihre älteren Benutzer können nicht zwischen ausgewählten und deaktivierten Symbolen unterscheiden. Anstatt zu versuchen, Ihre deaktivierten Symbole weniger hervorzuheben, als sie bereits grau auf grau sind. Sie müssen Ihre aktivierten Symbole deutlicher hervorheben.

Sie können dies tun, ohne Ihr Farbschema mit einem scharfkantigen schwarzen Umriss zu beeinträchtigen.

outline

Das obige Beispiel ist ein bisschen beschissen, da ich im Moment nur auf mspaint zugreifen kann, aber Sie können sehen, wie das Hinzufügen einer Gliederung deutlich macht, dass sich dieses Symbol in einem anderen Zustand befindet als die anderen.

2
Racheet