it-swarm.it

Quando utilizzare le icone rispetto alle icone con testo rispetto ai soli collegamenti di testo?

Ci sono delle regole su quando utilizzare le icone rispetto alle icone con testo rispetto ai collegamenti di testo in un'applicazione Web?

Per esempio:

disk icon

vs.

disk icon SAVE

vs.

SAVE


Domanda extra: Is disk icon salva -o-- salva disk icon preferibile?

172
jmb

Le icone sono notoriamente inefficaci come etichette, essendo molto difficili da interpretare correttamente senza formazione o esperienza. Per la maggior parte delle situazioni, gli utenti imparano meglio le interpretazioni corrette solo con il testo che con le sole icone. Vedi: Wiedenbeck, S (1999). L'uso di icone ed etichette in un programma applicativo per l'utente finale: uno studio empirico di apprendimento e conservazione. Behavior & Information Technology, 18 (2), p68-82.

Le icone sono particolarmente dannose per qualsiasi cosa astratta, come Invoice o Bid, dal momento che le cose astratte generalmente non hanno alcuna immagine visiva forte (sia Invoice che Bid potrebbero essere rappresentati come documenti cartacei, ma come li distingueresti?). Allo stesso modo, le icone sono particolarmente dannose per le azioni (ad esempio, Salva, Pubblica); è difficile mostrare chiaramente un processo con un'immagine. Sì, le icone sono sempre utilizzate nelle barre degli strumenti per le azioni, ma le barre degli strumenti erano destinate agli esperti, e tuttavia gli utenti sono spesso confusi da loro (in media, gli utenti conoscono solo sei elementi della barra degli strumenti di Word dopo aver usato regolarmente Word per due anni ).

Le icone possono risparmiare spazio sul testo, ma al prezzo del riconoscimento. Per le icone piccole, come 16x16 pixel, è molto difficile per gli utenti persino riconoscere ciò che dovrebbero essere una foto, per non parlare di ciò che l'immagine dovrebbe rappresentare. Un utente che conosco pensava che l'icona del "disco" per il salvataggio fosse una foto di una TV. (Era abbastanza grande da sapere che cos'era un floppy disk.) Ho usato personalmente Word per anni pensando che l'icona Track Changes fosse una specie di Rosetta Stone stilizzata. Gli utenti esperti trovano più facile basarsi sulla posizione fisica memorizzata dei controlli della barra degli strumenti piuttosto che delle etichette delle icone per scegliere un controllo. Le icone più grandi (ad esempio, almeno 32 per 32 pixel) possono aiutare il riconoscimento, ma occupano così tanto spazio che è meglio usare lo spazio per un'etichetta di testo chiara. Se lo spazio è limitato, spesso stai meglio usando un testo abbreviato rispetto alle icone.

È straordinariamente difficile ottenere le icone giuste. Non tentare di sviluppare una nuova icona senza estese iterazioni di test utente. Anche allora, potresti fallire. I designer Microsoft hanno provato di tutto per creare icone interpretabili per la barra degli strumenti di Outlook prima di rinunciare e andare con le etichette di testo sui controlli chiave.

Le etichette delle icone rendono anche difficile il supporto tecnico (ad esempio, "Fai clic sul foglio giallo con un segno di spunta blu", rispetto a "Fai clic su" Accetta "").

Come regola empirica, le icone da sole dovrebbero essere consentite solo quando si applicano almeno due delle seguenti tre condizioni:

  1. Lo spazio è molto limitato (cioè troppo piccolo per il solo testo).

  2. Le icone sono standardizzate (ad es. L'immagine del disco floppy per il salvataggio)

  3. L'icona rappresenta un oggetto con un forte analogo fisico o un attributo visivo (ad es. Un'icona della stampante per accedere agli attributi della stampante o un rettangolo rosso per impostare uno sfondo rosso della pagina).

I tooltip sono necessari per le icone quando sono usati da soli, ma sono un sostituto scadente per le etichette di testo. I tuoi utenti non dovrebbero usare la tua app cercando a tentoni. Il fatto che le etichette di testo non abbiano mai bisogno di suggerimenti grafici è un buon indizio del fatto che il testo sia migliore delle icone.

Se lo spazio lo consente, le icone combinate con il testo sono le migliori. (Penso che ci sia stata una ricerca che lo dimostra dalla fine degli anni '80, ma non riesco a trovarlo.) L'uso selettivo delle icone con il testo fa risaltare maggiormente alcuni elementi o aggiunge interesse visivo. Può anche migliorare la digitalizzazione degli articoli, ma anche buone etichette di testo possono farlo. Si sa che gli utenti pensano soggettivamente che un'app è più semplice se ha icone, anche quando in realtà non migliorano le prestazioni (vedi Wiedenbeck, 1999 citato sopra), quindi questo è un altro motivo per combinare icone e testo.

Di solito vedo l'icona sopra o a sinistra dell'etichetta di testo. Non penso che sia necessariamente intrinsecamente migliore delle alternative, ma è una convenzione che dovresti seguire anche se hai controlli uno accanto all'altro in modo che l'utente possa fare affidamento sull'esperienza per dire quale etichetta di testo va con quale icona.

232

Dal gruppo Neilson/Norman sulle icone :

Riepilogo : la comprensione di un'icona da parte dell'utente si basa sull'esperienza precedente. A causa dell'assenza di un utilizzo standard per la maggior parte delle icone, le etichette di testo sono necessarie per comunicare il significato e ridurre l'ambiguità.

Le icone hanno bisogno di un'etichetta di testo

Per aiutare a superare l'ambiguità che devono affrontare quasi tutte le icone, un'etichetta di testo deve essere presente accanto a un'icona per chiarirne il significato in quel particolare contesto. (E anche se stai usando un'icona standard, spesso è più sicuro includere un'etichetta, soprattutto se hai leggermente modificato l'icona per adattarla alle tue preferenze o vincoli estetici.)

Le etichette delle icone dovrebbero essere sempre visibili, senza alcuna interazione da parte dell'utente. Per le icone di navigazione, le etichette sono particolarmente critiche. Non fare affidamento sul passaggio del mouse per rivelare le etichette di testo: non solo aumenta costo di interazione , ma non riesce anche a tradurre bene sui dispositivi touch.

Il sito Web sability.gov utilizza icone di navigazione per metodi, modelli e documenti e linee guida in ogni pagina del sito [ esempio con testo & senza testo ]. Se avessi chiesto a ogni persona che leggeva questo articolo di inviarmi un'icona che rappresentava i Metodi, sono sicuro che avrei ricevuto un'ampia varietà di disegni. Come abbiamo affermato come parte del nostro linee guida di progettazione per l'usabilità della homepage anni fa, “se trovi che devi meditare per trovare un'icona per la navigazione, è probabile che non sia facilmente riconoscibile o intuitivo per gli utenti ". Mentre la versione mobile del sito riconosce che le etichette di testo devono accompagnare le icone per dare un significato, la versione desktop nasconde queste etichette fino a quando l'utente curioso non decide di passarci sopra con il mouse. La correzione di questi elementi di navigazione sul lato sinistro della pagina per rimanere disponibili agli utenti durante lo scorrimento indica che l'organizzazione li ritiene importanti e utili. Tuttavia, rimuovere queste icone delle etichette di testo le rende completamente prive di significato ed è controproducente per l'obiettivo di fornire un facile accesso ai contenuti.

18
KyleMit

Secondo una ricerca citata da Don Norman, le icone da sole funzionano meno bene. Il testo in solo funziona meglio delle icone. E le icone text + funzionano meglio.

8
Hisham

Oltre alle risposte sopra, ho un punto da sottolineare.

Che tipo di sito web è?

Se il sito Web verrà utilizzato raramente, dovrai etichettare le tue icone. Altrimenti i nuovi utenti potrebbero trovare ingombrante l'interfaccia utente.

Se il sito Web verrà utilizzato frequentemente, come Gmail, buone icone con suggerimenti degli strumenti ben posizionati sono meglio che andare con un approccio di solo testo o solo icona. Sono abbastanza sicuro che Google abbia affrontato questa domanda, perché in passato utilizzavano i pulsanti di solo testo, ma ora utilizzano icone + suggerimenti in Gmail. Questo nuovo approccio offre un'interfaccia pulita senza sacrificare l'usabilità. Anche Photoshop e Notepad ++ usano un approccio simile.

7
jackandjill

Consenti all'utente di scegliere, per impostazione predefinita su Entrambi.

Text + Icon aiuta l'utente che apprende per la prima volta le icone; ma poiché usa di più l'applicazione, l'utente si abituerà all'icona e non avrà più bisogno del testo. Una volta appreso il significato delle icone, preferirebbe un'area di lavoro più ampia piuttosto che il testo ridondante.

5
Lie Ryan

In primo luogo, quando hai intenzione di progettare un'interfaccia utente devi considerare i principi di usabilità (coerenza, convenienza, ecc.). La convenienza è uno dei concetti principali e significa che la tua interfaccia dovrebbe essere intuitiva. Ad esempio, le tue icone dovrebbero essere correlate al significato della seguente azione come nell'esempio sopra citato per l'icona di salvataggio di Michael. Alcune icone sono anche standardizzate e puoi riutilizzarne il significato. Il punto è che se usi solo icone per le barre degli strumenti, ecc. Devi usare la descrizione nel caso in cui l'icona non sia abbastanza buona per esprimere il significato ma se le tue icone sono abbastanza permissive non hanno bisogno di un'etichetta e la descrizione potrebbe essere sufficiente.

In ogni caso, è difficile progettare icone specialmente quando il tuo sistema è per un sistema specifico e devi progettare icone. In questo caso, puoi proporre alcuni progetti e valutarli con gli utenti. Potrebbe essere utile sapere cosa pensa l'utente del tuo sistema, delle interfacce visive e delle icone. Inoltre puoi effettuare un test memorabile un giorno dopo il tuo vero test cercando di valutare se gli utenti possono ricordare le tue icone, il significato o le icone o le possibili aree in cui possono trovare l'azione che stai chiedendo. Anche un questionario potrebbe essere d'aiuto se hai più di un disegno per le icone.

D'altra parte, se hai bisogno di mettere l'etichetta, penso che sia meglio l'etichetta sotto l'icona: [icona] [etichetta]

Ricorda che “Una convenienza è un aspetto di un oggetto che rende ovvio il modo in cui l'oggetto deve essere utilizzato. Nelle schermate dell'interfaccia utente, le funzionalità che creano vantaggi sono generalmente visive. .. "Rosson, M. B. & Carroll, J. M. (2002) Ingegneria dell'usabilità, Morgan Kaufmann.

O forse se hai tempo ... puoi leggere questo: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Se durante il processo di progettazione hai preso in considerazione la convenienza, forse le etichette non sono necessarie e usi semplicemente il tooltip altrimenti puoi considerare le etichette sotto le icone e valutare o proporre più progetti da valutare con gli utenti (non così tanti) che possono essere colleghi all'inizio fino alla versione che potrebbe essere testata con gli utenti finali.

5
user1982

Nella tendenza attuale Il sistema dovrebbe parlare la lingua degli utenti, con parole, frasi e concetti familiari all'utente, piuttosto che termini orientati al sistema. Segui le convenzioni del mondo reale, facendo apparire le informazioni in un ordine naturale e logico. e quando usi l'inglese tieni sempre le lettere sul lato destro. perché ovviamente le icone saranno l'attrazione principale. Pertanto, gli utenti potrebbero ignorare le lettere in primo piano.

per esempio iTunes: organizzato come una libreria che contiene la tua libreria multimediale: musica, film, spettacoli, audibook. Sotto la Biblioteca si trova lo Store dove è possibile acquistare più contenuti multimediali da inserire nella Libreria.

enter image description here

e per le tendenze recenti come Google pallet design e le piastrelle 2D di Windows suggeriscono icone. ma meglio avere icone con a punta del mouse veloce al passaggio del mouse. in bocca al lupo.

4
Miller

Dopo aver letto tutte le domande e sono d'accordo con tutto, vorrei aggiungere un punto di vista in più.

Prima di decidere di mostrare le icone, non mostrare le icone, aggiungere testo attorno al testo, non aggiungere alcun testo a cui dovresti rispondere ad alcune domande:

  • Dove intendi aggiungere le icone?
  • Perché hai bisogno di icone?
  • Chi utilizzerà queste icone?
  • Qual è la conoscenza delle icone/contenuti/azioni da parte degli utenti?
  • È comune usare le icone per questo?
  • Renderai più semplice l'interazione dell'utente?

E per rispondere a queste domande devi considerare alcuni punti:

  • Le persone usano lo smartphone ogni giorno, ogni volta e le icone più famose come Facebook, Youtube, Google, What's App, Instagram e altri devono mostrare un'etichetta per garantire che le persone lo sappiano.

enter image description here

  • Word/Google Docs sta usando con successo icone senza testo perché sono le stesse da anni e tutti già sanno cosa sia, ma anche così al passaggio del mouse mostrano un testo per spiegare l'icona.

enter image description here

  • Diverse aree geografiche potrebbero comprendere la tua icona in modo diverso. Ad esempio, nel Regno Unito è più comune utilizzare il paniere per l'e-commerce e negli altri Stati Uniti è il carrello. Sta accadendo a causa dell'influenza della lingua regionale.

  • Icone complesse potrebbero interrompere la conversione a causa di incomprensioni.

enter image description here

E puoi dare un'occhiata a un buon confronto che ho preso in prestito da Smashing Magazine .

enter image description here

Considerando tutte le risposte, userò il testo con un'icona sul 90% dei casi e la posizione del testo dipende dal tuo concetto di design e se è facile per l'utente collegarli.

E come dico sempre nei miei commenti, nulla qui è assolutamente vero, dovresti testarlo, confrontarlo con i TUOI utenti sul TUO sito web/applicazione.

2
Rafael Perozin

Questo dipenderà dagli utenti. Dal punto di vista dell'usabilità, avere sia l'icona che il testo offre risultati migliori perché ciò segue il riconoscimento rispetto al richiamo, a condizione che le icone siano accettate da una popolazione ragionevole. Avere solo l'icona è applicabile ai glifi simbolici, quelli comprensibili a livello globale. Il testo è più appropriato solo quando gli elementi sono arbitrari e non hanno glifi riconoscibili per rappresentarli. Per tali articoli, avere solo testo è forse il migliore. Tuttavia, la nomenclatura utilizzata dovrebbe essere testata per un uso appropriato.

2
Kernan Kobaya