it-swarm-eu.dev

Kdy použít ikony vs ikony s textem vs. jen textové odkazy?

Existují nějaká pravidla pro použití ikon vs ikon s textem vs. jen textových odkazů ve webové aplikaci?

Například:

disk icon

vs.

disk icon ložit

vs.

ložit


Extra otázka: Je disk icon ložit - nebo ložit disk icon nejlépe?

172
jmb

Ikony jsou notoricky neúčinné jako štítky, je velmi obtížné správně interpretovat bez tréninku nebo zkušeností. Ve většině situací se uživatelé učí správné interpretace lépe s textem samotným než s ikonami samotnými. Viz: Wiedenbeck, S (1999). Použití ikon a štítků v aplikačním programu koncového uživatele: Empirické studium učení a uchovávání. Behavior & Information Technology, 18 (2), str. 68-82.

Ikony jsou obzvláště špatné pro cokoli abstraktní, jako je Faktura nebo Nabídka, protože abstraktní věci obecně nemají žádný silný vizuální obraz (Fakturu i Bid lze reprezentovat jako papírové dokumenty, ale jak byste je rozlišovali?). Podobně jsou ikony obzvláště špatné pro akce (např. Uložit, Publikovat); je těžké jasně ukázat proces s obrázkem. Ano, ikony se používají po celou dobu v nástrojových lištách pro akce, ale panely nástrojů byly určeny pro odborníky a přesto je uživatelé často zmatení (v průměru živatelé znají pouze šest položek panelu nástrojů Word po pravidelném používání aplikace Word na dva roky ).

Ikony mohou ušetřit místo nad textem, ale za cenu rozpoznávání. U malých ikon, jako je 16x16 pixelů, je pro uživatele velmi obtížné poznat, o čem mají být fotografie, natož co to má znamenat. Jeden uživatel, kterého znám, si myslel, že ikona „disku“ pro uložení je obrázek televizoru. (Byla dost stará na to, aby věděla, co je disketa.) Já osobně jsem používal Word celé roky, když jsem si myslel, že ikona Sledování změn je nějaký stylizovaný Rosetta Stone. Pro zkušené uživatele je jednodušší spoléhat se na zapamatovanou fyzickou poloh z ovládacích prvků panelu nástrojů, spíše než popisky ikon pro výběr ovládacího prvku. Rozpoznávání mohou pomoci větší ikony (např. Alespoň 32 x 32 pixelů), ale pomocí místa pro čistý text můžete zabrat tolik místa, kolik vám je lépe. Pokud je místo omezené, často je lepší používat zkrácený text než ikony.

Je mimořádně obtížné získat správné ikony. Nepokoušejte se vyvinout novou ikonu bez rozsáhlých iterací testování uživatelů. I poté můžete selhat. Návrháři Microsoftu vyzkoušeli vše pro vytvoření interpretovatelných ikon pro panel nástrojů aplikace Outlook před vzdát se a jít s textovými štítky na klíčových ovládacích prvcích.

Štítky s ikonami také ztěžují technickou podporu (např. „Klikněte na žlutý list s modrým zaškrtnutím“ nebo „Klikněte na„ Přijmout “).

Obecně by ikony měly být povoleny pouze tehdy, pokud platí alespoň dvě z následujících tří podmínek:

  1. Prostor je velmi omezený (tj. Příliš malý pro samotný text).

  2. Ikony jsou standardizovány (např. Obrázek diskety pro uložení)

  3. Ikona představuje objekt se silným fyzickým analogem nebo vizuálním atributem (např. Ikona tiskárny pro přístup k atributům tiskárny, nebo červený obdélník pro nastavení pozadí stránky červeně).

Popisky jsou vyžadovány pro ikony, pokud se používají samostatně, ale jsou špatnou náhradou za textové štítky. Vaši uživatelé by nemuseli používat vaši aplikaci tím, že by se snažili o věci. Skutečnost, že textové štítky nikdy nepotřebují grafické popisy, je docela dobrá stopa, že text je lepší než ikony.

Pokud to prostor dovoluje, je nejlepší kombinovat ikony s textem. (Myslím, že se objevil výzkum z konce 80. let, ale nemůžu to najít.) Selektivní použití ikon s textem způsobuje, že určité položky vynikají více nebo zvyšují vizuální zájem. Může to také zlepšit skenovatelnost položek, ale dobré textové štítky to mohou také udělat. Je známo, že uživatelé si subjektivně myslí, že je aplikace jednodušší, pokud má ikony, i když ve skutečnosti výkon nezlepší (viz výše uvedený Wiedenbeck, 1999), což je další důvod, proč kombinovat ikony a text.

Obvykle vidím ikonu buď nad nebo vlevo od textového štítku. Nemyslím si, že je to nevyhnutelně lepší než alternativy, ale je to konvence, kterou byste měli také dodržovat, pokud máte vedle sebe ovládací prvky, takže se uživatel může spolehnout na zkušenost a říct, který textový štítek jde s kterou ikonou.

232
Michael Zuschlag

Ze skupiny Neilson/Norman na ikonách :

Souhrn: Pochopení ikony uživatelem je založeno na předchozí zkušenosti. Vzhledem k absenci standardního použití pro většinu ikon jsou textové štítky nezbytné ke sdělování významu a snížení nejednoznačnosti.

Ikony vyžadují textový štítek

Abychom pomohli překonat nejednoznačnost, kterou čelí téměř všechny ikony, musí být textový štítek vedle ikony, aby se objasnil její význam v tomto konkrétním kontextu. (A i když používáte standardní ikonu, je často bezpečnější zahrnout štítek, zejména pokud jste ikonu mírně změnili, aby odpovídala vašim estetickým preferencím nebo omezením.)

Štítky ikon by měly být viditelné vždy, bez zásahu uživatele. U navigačních ikon jsou zvláště důležité štítky. Nespoléhejte se na odhalení textových štítků, protože se nejen zvýší náklady na interakci , ale také se nedaří dobře překládat na dotykových zařízeních.

Web sability.gov používá navigační ikony pro metody, šablony a dokumenty a pokyny na každé stránce v rámci webu [ příklad bez text & bez použití) text ]. Pokud bych požádal každou osobu, která si přečte tento článek, aby mi poslal ikonu představující metody, jsem si jistý, že dostanu širokou škálu návrhů. Jak jsme uvedli v rámci našich pokyny pro návrh použitelnosti domovské stránky před lety, „pokud zjistíte, že musíte přemýšlet, abyste přišli s ikonou pro navigaci, je pravděpodobné, že to nebude snadno rozpoznatelné nebo intuitivní. pro uživatele. “ Zatímco mobilní verze webu uznává, že textové štítky musí doprovázet ikony, aby udělily nějaký význam, verze pro počítače tyto štítky skryje, dokud se zvědavý uživatel nerozhodne nad nimi umístit. Oprava těchto navigačních položek na levé straně stránky, aby uživatelé zůstali k dispozici, když se posouvají, naznačuje, že organizace je považuje za důležité a užitečné. Odstranění těchto ikon textových štítků je však zcela zbytečné a je kontraproduktivní s cílem zajistit snadný přístup k obsahu.

18
KyleMit

Podle výzkumu citovaného Donem Normanem fungují samotné ikony nejméně dobře. Samostatný text funguje lépe než ikony. A text + ikony fungují nejlépe.

8
Hisham

Kromě výše uvedených odpovědí mám ještě co říci.

Jaký je to web?

Pokud se web bude používat jen zřídka, musíte označit své ikony. Nebo jinak mohou uživatelé považovat uživatelské rozhraní za těžkopádné.

Pokud se web bude používat často, jako je Gmail, jsou dobré ikony s dobře umístěnými tipy na nástroje lepší než jít s přístup pouze pro text nebo pouze pro ikonu. Jsem si jistý, že Google přešel na tuto otázku, protože v minulosti používali pouze textová tlačítka, ale nyní v Gmailu používají ikony + tipy nástrojů. Tento nový přístup poskytuje čisté rozhraní bez obětování použitelnosti. Dokonce i Photoshop a Notepad ++ používají podobný přístup.

7
jackandjill

Nechte uživatele zvolit si výchozí, obojí.

Text + Icon pomáhá prvním uživatelům naučit se ikony; ale když tuto aplikaci používá více, uživatel si na ikonu zvykne a text již nebude potřebovat. Jakmile se dozvěděl, co ikony znamenají, upřednostnil by větší pracovní prostor než redundantní text.

5
Lie Ryan

Za prvé, když se chystáte navrhnout uživatelské rozhraní, musíte vzít v úvahu zásady použitelnosti (konzistence, dotace atd.). Cenová dostupnost je jedním z hlavních konceptů a znamená, že vaše rozhraní by mělo být intuitivní. Vaše ikony by například měly souviset s významem následující akce, jako je výše uvedený příklad pro ikonu uložení Michael. Některé ikony jsou také standardizované a můžete význam znovu použít. Jde o to, že pokud používáte pouze ikony pro lišty nástrojů atd., Musíte použít popisek v případě, že ikona není dostatečně dobrá pro vyjádření významu, ale pokud jsou vaše ikony dostatečně tolerantní, nepotřebují štítek a nápověda by mohla stačit.

V každém případě je obtížné navrhnout ikony speciálně, když je váš systém pro konkrétní systém a musíte navrhnout ikony. V tomto případě můžete navrhnout některé návrhy a vyhodnotit je s uživateli. Může být užitečné vědět, co si uživatel myslí o vašem systému, vizuálních rozhraních a ikonách. Jeden den po skutečném testu můžete také provést znovu zapamatovatelný test a pokusit se posoudit, zda si uživatelé mohou pamatovat vaše ikony, význam nebo vaše ikony nebo možné oblasti, kde mohou najít požadovanou akci. Také dotazník může pomoci, pokud máte více než jeden design pro ikony.

Na druhou stranu, pokud potřebujete umístit štítek, myslím, že je lepší štítek pod ikonou: [ikona] [štítek]

Pamatujte, že „Avenance je aspektem objektu, který jasně ukazuje, jak se má objekt použít. Na obrazovkách uživatelského rozhraní jsou funkce, které vytvářejí provize, obvykle vizuální. .. "Rosson, M. B. & Carroll, J. M. (2002) Usability Engineering, Morgan Kaufmann.

Nebo možná, pokud máte čas ... můžete si přečíst tento: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Pokud jste během procesu navrhování zvážili možnost, možná štítky nejsou nutné a používáte pouze popis, jinak můžete zvážit štítky pod ikonami a vyhodnotit nebo navrhnout další návrhy, které mají být vyhodnoceny u uživatelů (ne tolik), které mohou být kolegy na začátku až do verze, která by mohla být testována s konečnými uživateli.

5
user1982

V současném trendu Systém by měl mluvit jazykem uživatele spíše slovy, frázemi a koncepty, které jsou uživateli dobře známy, než výrazy orientované na systém. Postupujte podle konvencí skutečného světa, díky nimž se informace zobrazují v přirozeném a logickém pořadí. a pokud používáte angličtinu, vždy mějte písmena na pravé straně. protože ikonou bude samozřejmě hlavní atrakce. Uživatelé proto mohou ignorovat písmena na přední straně.

například iTunes - organizovaná jako knihovna, která obsahuje vaši mediální knihovnu: hudba, filmy, pořady, audibooky. Pod knihovnou je obchod, kde si můžete zakoupit další média, která můžete vložit do své knihovny.

enter image description here

a pro nejnovější trendy jako design palety Google a okna 2D dlaždice navrhují ikony. ale lepší mít ikony s rychlý tip pro najetí myší. Hodně štěstí.

4
Miller

Po přečtení všech otázek a souhlasu se vším bych chtěl přidat další hledisko.

Než se rozhodnete zobrazovat ikony, nezobrazovat ikony, přidávat text kolem textu, nepřidávat žádný text, měli byste odpovědět na některé otázky:

  • Kam chcete přidat ikony?
  • Proč potřebujete ikony?
  • Kdo bude používat tyto ikony?
  • Jaké jsou znalosti o ikonách/obsahu/akci uživatelů?
  • Je běžné používat pro něj ikony?
  • Usnadníte interakci uživatele?

A k zodpovězení těchto otázek musíte vzít v úvahu některé body:

  • Lidé používají smartphone každý den, pokaždé a nejslavnější ikony, jako je Facebook, Youtube, Google, Co je aplikace, Instagram a další, musí ukazovat štítek, aby lidé věděli, že to budou vědět.

enter image description here

  • Word/Google Docs úspěšně používá ikony bez textu, protože jsou stejné roky a každý už ví, co to je, ale i tak na myši nad textem zobrazují text vysvětlující ikonu.

enter image description here

  • Různé zeměpisné oblasti mohly vaši ikonu pochopit odlišně. Například ve Velké Británii je běžnější používat košík na elektronický obchod a na jiném v USA je košík. Děje se to kvůli vlivu regionálního jazyka.

  • Složité ikony mohou zastavit vaši konverzi kvůli nedorozumění.

enter image description here

A můžete se podívat na dobré srovnání, které jsem si půjčil od Smashing Magazine .

enter image description here

S ohledem na všechny odpovědi budu používat text s ikonou na 90% případů a poloha textu závisí na vašem konceptu návrhu a zda je pro uživatele snadné je spojit.

A jako vždy říkám ve svých komentářích, nic zde není absolutně pravda, měli byste otestovat, porovnat pro své uživatele na svém webu/aplikaci.

2
Rafael Perozin

To bude záležet na uživatelích. Z hlediska použitelnosti má mít ikona i text lepší výsledky, protože to následuje po rozpoznání po stažení, za předpokladu, že ikony jsou akceptovány rozumnou populací. Mít pouze ikonu je použitelné pro symbolické glyfy - ty, které jsou globálně srozumitelné. Pouze text je nejvhodnější, pokud jsou položky libovolné a nemají žádné rozpoznatelné glyfy, které by je reprezentovaly. Pro takové položky je snad nejlepší mít pouze text. Použitá nomenklatura by však měla být testována na vhodné použití.

2
Kernan Kobaya