it-swarm-eu.dev

Wann sollten Symbole oder Symbole mit Text oder nur Textlinks verwendet werden?

Gibt es Regeln, wann Symbole oder Symbole mit Text oder nur Textlinks in einer Webanwendung verwendet werden sollen?

Zum Beispiel:

disk icon

vs.

disk icon speichern

vs.

speichern


Zusätzliche Frage: Ist disk icon speichern -oder- speichern disk icon bevorzugt?

172
jmb

Symbole sind als Bezeichnungen notorisch unwirksam, da sie ohne Schulung oder Erfahrung nur sehr schwer richtig zu interpretieren sind. In den meisten Situationen lernen Benutzer korrekte Interpretationen besser nur mit Text als mit Symbolen. Siehe: Wiedenbeck, S. (1999). Die Verwendung von Symbolen und Beschriftungen in einem Endbenutzer-Anwendungsprogramm: Eine empirische Studie zum Lernen und zur Beibehaltung. Behavior & Information Technology, 18 (2), S. 68-82.

Symbole sind besonders schlecht für abstrakte Objekte wie Rechnung oder Gebot, da abstrakte Dinge im Allgemeinen kein starkes visuelles Bild haben (sowohl Rechnung als auch Gebot könnten als Papierdokumente dargestellt werden, aber wie würden Sie sie unterscheiden?). In ähnlicher Weise sind Symbole besonders schlecht für Aktionen (z. B. Speichern, Veröffentlichen); Es ist schwierig, einen Prozess mit einem Bild klar darzustellen. Ja, Symbole werden in Symbolleisten ständig für Aktionen verwendet, aber Symbolleisten waren für Experten gedacht, und dennoch werden Benutzer häufig von ihnen verwirrt (im Durchschnitt Benutzer kennen nur sechs Word-Symbolleistenelemente nach regelmäßiger Verwendung von Word für zwei Jahre ).

Symbole können Platz über Text sparen, jedoch zum Preis der Erkennung. Bei kleinen Symbolen wie 16 x 16 Pixel ist es für Benutzer sehr schwierig, überhaupt zu erkennen, wovon sie ein Bild sein sollen, geschweige denn, wofür das Bild stehen soll. Ein Benutzer, den ich kenne, dachte, das "Festplatten" -Symbol zum Speichern sei ein Bild eines Fernsehgeräts. (Sie war alt genug, um zu wissen, was eine Diskette ist.) Ich persönlich habe Word jahrelang verwendet und dachte, das Track Changes-Symbol sei eine Art stilisierter Rosetta Stone. Erfahrene Benutzer finden es einfacher, sich auf die gespeicherte physische Position zu verlassen der Steuerelemente der Symbolleiste als die Symbolbezeichnungen, um ein Steuerelement auszuwählen. Größere Symbole (z. B. mindestens 32 x 32 Pixel) können die Erkennung erleichtern. Nehmen Sie jedoch so viel Platz ein, dass Sie den Platz für eine Klartextbeschriftung besser nutzen sollten. Wenn der Platz begrenzt ist, ist es oft besser, abgekürzten Text als Symbole zu verwenden.

Es ist außerordentlich schwierig, Symbole richtig zu machen. Versuchen Sie nicht, ein neues Symbol ohne umfangreiche Iterationen von Benutzertests zu entwickeln. Selbst dann können Sie scheitern. Microsoft-Designer haben alles versucht, um interpretierbare Symbole für die Outlook-Symbolleiste zu erstellen, bevor Aufgeben und Verwenden von Textbeschriftungen auf Tastensteuerelementen.

Symbolbeschriftungen erschweren auch den technischen Support (z. B. "Klicken Sie auf das gelbe Blatt mit einem blauen Häkchen" im Vergleich zu "Klicken Sie auf" Akzeptieren ").

Als Faustregel gilt, dass Symbole allein nur zulässig sein sollten, wenn mindestens zwei der folgenden drei Bedingungen zutreffen:

  1. Der Platz ist sehr begrenzt (d. H. Zu klein für Text allein).

  2. Die Symbole sind standardisiert (z. B. das Diskettenabbild zum Speichern).

  3. Das Symbol repräsentiert ein Objekt mit einem starken physischen analogen oder visuellen Attribut (z. B. ein Druckersymbol für den Zugriff auf Druckerattribute oder ein rotes Rechteck zum Festlegen eines Seitenhintergrunds für Rot).

Tooltips sind für Symbole erforderlich, wenn sie alleine verwendet werden. Sie sind jedoch ein schlechter Ersatz für Textbeschriftungen. Ihre Benutzer sollten Ihre App nicht verwenden müssen, indem Sie nach Dingen suchen. Die Tatsache, dass Textbeschriftungen niemals grafische QuickInfos benötigen, ist ein ziemlich guter Hinweis darauf, dass Text besser ist als Symbole.

Wenn der Platz es zulässt, sind Symbole in Kombination mit Text am besten geeignet. (Ich glaube, es gab Untersuchungen, die dies aus den späten 1980er Jahren zeigten, aber ich kann es nicht finden.) Durch die selektive Verwendung von Symbolen mit Text fallen bestimmte Elemente stärker auf oder sorgen für visuelles Interesse. Dies kann auch die Scanbarkeit der Elemente verbessern, aber auch gute Textbeschriftungen können dies tun. Es ist bekannt, dass Benutzer subjektiv denken, dass eine App einfacher ist, wenn sie Symbole enthält, auch wenn sie die Leistung nicht verbessern (siehe Wiedenbeck, 1999, oben zitiert). Dies ist ein weiterer Grund, Symbole und Text zu kombinieren.

Normalerweise sehe ich das Symbol entweder über oder links von der Textbeschriftung. Ich denke nicht, dass es von Natur aus besser ist als die Alternativen, aber es ist eine Konvention, die Sie auch befolgen sollten, wenn Sie Steuerelemente nebeneinander haben, damit der Benutzer auf Erfahrung zurückgreifen kann, um festzustellen, welche Textbezeichnung zu welchem ​​Symbol gehört.

232

Aus der Neilson/Norman-Gruppe auf Symbolen :

Zusammenfassung: Das Verständnis eines Benutzers für ein Symbol basiert auf früheren Erfahrungen. Aufgrund des Fehlens einer Standardverwendung für die meisten Symbole sind Textbeschriftungen erforderlich, um die Bedeutung zu kommunizieren und Mehrdeutigkeiten zu verringern.

Symbole benötigen eine Textbeschriftung

Um die Mehrdeutigkeit zu überwinden, mit der fast alle Symbole konfrontiert sind, muss neben einem Symbol ein Textetikett vorhanden sein, um die Bedeutung in diesem bestimmten Kontext zu verdeutlichen. (Selbst wenn Sie ein Standardsymbol verwenden, ist es oft sicherer, ein Etikett einzufügen, insbesondere wenn Sie das Symbol geringfügig geändert haben, um es Ihren ästhetischen Vorlieben oder Einschränkungen anzupassen.)

Symbolbezeichnungen sollten jederzeit sichtbar sein, ohne dass der Benutzer etwas unternehmen muss. Für Navigationssymbole sind Beschriftungen besonders wichtig. Verlassen Sie sich nicht auf den Schwebeflug, um Textbeschriftungen anzuzeigen: Dies erhöht nicht nur die Interaktionskosten , sondern lässt sich auch auf Touch-Geräten nicht gut übersetzen.

Die Website sability.gov verwendet Navigationssymbole für Methoden, Vorlagen und Dokumente sowie Richtlinien auf jeder Seite der Website [ Beispiel mit Text & ohne) Text ]. Wenn ich jede Person, die diesen Artikel liest, bitten würde, mir ein Symbol zu senden, das Methoden darstellt, würde ich sicher eine Vielzahl von Designs erhalten. Wie wir im Rahmen unserer Gestaltungsrichtlinien für die Benutzerfreundlichkeit von Homepages vor Jahren festgestellt haben: „Wenn Sie darüber nachdenken müssen, ein Symbol für die Navigation zu erstellen, ist es wahrscheinlich nicht leicht erkennbar oder intuitiv für Benutzer. " Während die mobile Version der Website erkennt, dass Textbeschriftungen die Symbole begleiten müssen, um eine Bedeutung zu verleihen, werden diese Beschriftungen in der Desktop-Version ausgeblendet, bis der neugierige Benutzer sich entscheidet, mit der Maus darüber zu fahren. Wenn Sie diese Navigationselemente auf der linken Seite der Seite korrigieren, um den Benutzern beim Scrollen zur Verfügung zu bleiben, bedeutet dies, dass die Organisation sie für wichtig und nützlich hält. Das Entfernen dieser Symbole von Textbeschriftungen macht sie jedoch völlig bedeutungslos und ist kontraproduktiv für das Ziel, einen einfachen Zugriff auf Inhalte zu ermöglichen.

18
KyleMit

Laut einer von Don Norman zitierten Studie funktionieren Ikonen allein am wenigsten gut. Solo-Text funktioniert besser als Symbole. Und Text + Symbole funktionieren am besten.

8
Hisham

Zusätzlich zu den obigen Antworten habe ich einen Punkt zu machen.

Was für eine Website ist das?

Wenn die Website nur selten verwendet wird, müssen Sie Ihre Symbole kennzeichnen. Andernfalls finden neue Benutzer die Benutzeroberfläche möglicherweise umständlich.

Wenn die Website verwendet werden soll häufig, wie Google Mail, sind gute Symbole mit gut platzierten QuickInfos besser als mit Ein Nur-Text- oder Nur-Symbol-Ansatz. Ich bin mir ziemlich sicher, dass Google diese Frage beantwortet hat, da in der Vergangenheit nur Textschaltflächen verwendet wurden, jetzt jedoch Symbole und QuickInfos in Google Mail verwendet werden. Dieser neue Ansatz bietet eine saubere Oberfläche, ohne die Benutzerfreundlichkeit zu beeinträchtigen. Sogar Photoshop und Notepad ++ verwenden einen ähnlichen Ansatz.

7
jackandjill

Lassen Sie den Benutzer wählen, standardmäßig Beide.

Text + Symbol hilft Erstbenutzern beim Erlernen der Symbole. Wenn er die Anwendung jedoch häufiger verwendet, gewöhnt sich der Benutzer an das Symbol und benötigt den Text nicht mehr. Sobald er gelernt hat, was die Symbole bedeuten, würde er einen größeren Arbeitsbereich dem redundanten Text vorziehen.

5
Lie Ryan

Erstens müssen Sie beim Entwerfen einer Benutzeroberfläche die Prinzipien der Benutzerfreundlichkeit (Konsistenz, Erschwinglichkeit usw.) berücksichtigen. Affordance ist eines der Hauptkonzepte und bedeutet, dass Ihre Benutzeroberfläche intuitiv sein sollte. Zum Beispiel sollten Ihre Symbole mit der Bedeutung der folgenden Aktion verknüpft sein, wie im obigen Beispiel für das Speichern des Symbols von Michael. Einige Symbole sind auch standardisiert und Sie können die Bedeutung wiederverwenden. Der Punkt ist, dass Sie, wenn Sie nur Symbole für Symbolleisten usw. verwenden, den Tooltip verwenden müssen, falls das Symbol nicht gut genug ist, um die Bedeutung auszudrücken, aber wenn Ihre Symbole zulässig genug sind, benötigen sie keine Beschriftung und Der Tooltip könnte ausreichen.

In jedem Fall ist es schwierig, Symbole speziell zu entwerfen, wenn Ihr System für ein bestimmtes System bestimmt ist und Sie Symbole entwerfen müssen. In diesem Fall können Sie einige Entwürfe vorschlagen und mit den Benutzern bewerten. Es kann hilfreich sein zu wissen, was der Benutzer über Ihr System, visuelle Schnittstellen und Symbole denkt. Sie können auch einen Tag nach Ihrem eigentlichen Test einen unvergesslichen Test durchführen, um zu bewerten, ob sich die Benutzer an Ihre Symbole, die Bedeutung oder Ihre Symbole oder die möglichen Bereiche erinnern können, in denen sie die von Ihnen angeforderte Aktion finden können. Auch ein Fragebogen kann hilfreich sein, wenn Sie mehr als ein Design für Symbole haben.

Wenn Sie andererseits das Etikett anbringen müssen, denke ich, dass es besser ist, das Etikett unter dem Symbol zu platzieren: [Symbol] [Etikett]

Denken Sie daran: „Ein Vorteil ist ein Aspekt eines Objekts, der deutlich macht, wie das Objekt verwendet werden soll. In Benutzeroberflächenanzeigen sind die Funktionen, die Vorteile schaffen, normalerweise visuell. .. "Rosson, M. B. & Carroll, J. M. (2002) Usability Engineering, Morgan Kaufmann.

Oder wenn Sie Zeit haben ... können Sie diese lesen: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Wenn Sie während des Entwurfsprozesses die Erschwinglichkeit berücksichtigt haben, sind die Beschriftungen möglicherweise nicht erforderlich, und Sie verwenden nur den Tooltip. Andernfalls können Sie die Beschriftungen unter den Symbolen berücksichtigen und weitere Entwürfe bewerten oder vorschlagen, die mit Benutzern bewertet werden sollen (nicht so viele) Seien Sie am Anfang Kollegen bis zu der Version, die mit Endbenutzern getestet werden konnte.

5
user1982

Im aktuellen Trend Das System sollte die Sprache des Benutzers mit Wörtern, Phrasen und Konzepten sprechen, die dem Benutzer vertraut sind, und nicht mit systemorientierten Begriffen. Befolgen Sie die Konventionen der realen Welt und lassen Sie Informationen in einer natürlichen und logischen Reihenfolge erscheinen. und wenn Sie Englisch verwenden, halten Sie die Buchstaben immer auf der rechten Seite. denn offensichtlich werden Symbole die Hauptattraktion sein. Daher können Benutzer die Buchstaben auf der Vorderseite ignorieren.

beispiel: iTunes - Organisiert als Bibliothek, die Ihre Medienbibliothek enthält: Musik, Filme, Shows, Hörbücher. Unter der Bibliothek befindet sich der Store, in dem Sie weitere Medien kaufen können, um sie in Ihre Bibliothek aufzunehmen.

enter image description here

und für die jüngsten Trends wie Google Palettendesign und Windows 2D-Kacheln schlagen Symbole vor. aber besser Symbole mit einem schneller Maus-Hover-Tooltip. Viel Glück.

4
Miller

Nachdem ich alle Fragen gelesen und allen zugestimmt habe, möchte ich einen zusätzlichen Standpunkt hinzufügen.

Bevor Sie sich entscheiden, Symbole anzuzeigen, zeigen Sie keine Symbole an, fügen Sie Text um den Text hinzu, fügen Sie keinen Text hinzu, den Sie beantworten sollten:

  • Wo möchten Sie die Symbole hinzufügen?
  • Warum brauchst du Symbole?
  • Wer wird diese Symbole verwenden?
  • Was ist das Wissen über die Symbole/Inhalte/Aktionen der Benutzer?
  • Ist es üblich, Symbole dafür zu verwenden?
  • Sie erleichtern die Benutzerinteraktion?

Und um diese Fragen zu beantworten, müssen Sie einige Punkte berücksichtigen:

  • Die Menschen benutzen das Smartphone jeden Tag und zu jeder Zeit und die bekanntesten Symbole wie Facebook, Youtube, Google, What's App, Instagram und andere müssen ein Etikett zeigen, um sicherzustellen, dass die Menschen es wissen.

(enter image description here

  • Word/Google Text & Tabellen verwendet erfolgreich Symbole ohne Text, da diese seit Jahren gleich sind und jeder bereits weiß, was ist, aber trotzdem wird mit der Maus ein Text angezeigt, um das Symbol zu erklären.

(enter image description here

  • Verschiedene geografische Regionen können Ihr Symbol unterschiedlich verstehen. In Großbritannien ist es beispielsweise üblicher, den Warenkorb im E-Commerce zu verwenden, und in den USA ist der Warenkorb. Es geschieht aufgrund des regionalen Spracheinflusses.

  • Komplexe Symbole können Ihre Konvertierung aufgrund von Missverständnissen stoppen.

(enter image description here

Und Sie können sich einen guten Vergleich ansehen, den ich mir von Smashing Magazine geliehen habe.

(enter image description here

In Anbetracht aller Antworten werde ich in 90% der Fälle Text mit einem Symbol verwenden. Die Position des Textes hängt von Ihrem Designkonzept ab und davon, ob es für den Benutzer einfach ist, sie zu verbinden.

Und wie ich in meinen Kommentaren immer sage, nichts hier ist absolut wahr, sollten Sie testen, für IHRE Benutzer auf IHRER Website/Anwendung vergleichen.

2
Rafael Perozin

Dies hängt von den Benutzern ab. Unter dem Gesichtspunkt der Benutzerfreundlichkeit liefert das Vorhandensein von Symbolen und Text bessere Ergebnisse, da dies auf die Erkennung über den Rückruf folgt, vorausgesetzt, die Symbole werden von einer angemessenen Grundgesamtheit akzeptiert. Nur das Symbol zu haben, gilt für symbolische Glyphen - solche, die global verständlich sind. Nur Text ist am besten geeignet, wenn die Elemente beliebig sind und keine erkennbaren Glyphen zur Darstellung haben. Für solche Elemente ist es vielleicht am besten, nur Text zu haben. Die verwendete Nomenklatur sollte jedoch auf ihre angemessene Verwendung geprüft werden.

2
Kernan Kobaya