Archivi tag: ux

L’architettura delle informazioni nella progettazione di interfacce

L’architettura delle informazioni (Information Architecture) si concentra sull’organizzazione, la strutturazione e l’etichettatura dei contenuti in modo efficace e sostenibile.

L’obiettivo è aiutare gli utenti a trovare informazioni e completare le attività. Per fare ciò, è necessario capire in che modo i pezzi si incastrano per creare un’immagine più grande, come gli elementi si relazionano tra loro all’interno del sistema.

Lo scopo della IA è quello di aiutare gli utenti a capire dove si trovano, cosa hanno scoperto, cosa c’è intorno e cosa aspettarsi. Di conseguenza, l’IA informa la strategia sui contenuti identificando la scelta delle parole e informa sulla progettazione dell’interfaccia utente e sulla progettazione dell’interazione, svolgendo un ruolo nei processi di wireframing e prototipazione.

Che cosa è necessario sapere

l’archiviazione, l’accesso e la presentazione delle informazioni.

I componenti principali della IA: Organizzazione Schemi e Strutture:

Come categorizzare e strutturare le informazioni Sistemi di etichettatura: Come rappresenti le informazioni

Sistemi di navigazione: come gli utenti navigano o passare attraverso le informazioni

Sistemi di ricerca: come gli utenti cercano informazioni

Per creare questi sistemi di informazioni, è necessario comprendere la natura interdipendente degli utenti, dei contenuti e del contesto. ogni cerchio fa riferimento a:

  • Contesto: obiettivi aziendali, finanziamenti, politica, cultura, tecnologia, risorse, vincoli
  • Contenuto: obiettivi di contenuto, tipi di documenti e dati, volume, struttura esistente, governance e proprietà
  • Utenti: pubblico, compiti, bisogni, ricerca di informazioni comportamento, esperienza

 

Componenti utilizzati nell’architettura dell’informazione

Ora che comprendi i concetti più astratti dietro l’architettura dell’informazione, esaminiamo i componenti e le tecniche IA che gli architetti utilizzano per acquisire tali concetti.

Esistono quattro componenti all’interno di un sistema di architettura dell’informazione:

  • I sistemi di organizzazione sono le categorie in cui vengono inserite informazioni, come nomi di autori e titoli o dimensioni della scarpa, tessuto e colore. I sistemi di etichettatura sono i modi in cui rappresentiamo le informazioni, ad esempio il livello di terminologia ritenuto appropriato per il pubblico di destinazione. Ad esempio, gli articoli dovrebbero usare i termini “optometrista” e “oftalmologo” o “oculista” più appropriato?
  • I sistemi di navigazione sono il modo in cui ci spostiamo da un’informazione all’altra quando ci vengono presentate tali informazioni. In questa pagina, ad esempio, è possibile utilizzare il pulsante Avanti per passare alla pagina successiva oppure iniziare a esplorare qualcosa di nuovo in qualsiasi momento utilizzando le schede come Avventura e Tecnologia nella parte superiore della pagina.
  • I sistemi di ricerca sono il modo in cui cerchiamo informazioni, come l’inserimento di parole in un motore di ricerca o la scansione di termini in un elenco numerato. Ad esempio, nella casella di ricerca in questa pagina, puoi digitare più parole per restringere i risultati e avvicinarti agli argomenti di cui vuoi leggere.
  • Altri componenti relativi all’architettura delle informazioni provengono dalla tecnologia utilizzata per trasformare il modello in un sistema di informazioni dal vivo. Ad esempio, se si memorizzano le informazioni in un database, l’architettura deve incorporare un componente di query per recuperare alcune informazioni specifiche. Se stai creando un sito Web, l’accesso alle informazioni utilizza componenti come la navigazione, lo scorrimento e il clic.

Il Wireframe: uno strumento base nella progettazione delle interfacce utente

Il wireframe è il disegno preliminare dell’interfaccia di una pagina che si concentra in particolare sull’allocazione dello spazio e la definizione delle priorità del contenuto, delle funzionalità disponibili e dei comportamenti previsti.

Per questi motivi, i wireframe in genere non includono alcuno stile, colore o grafica. I wireframe aiutano anche a stabilire relazioni tra i vari modelli di un sito Web.

Il valore dei wireframe

I wireframe servono a molteplici scopi, contribuendo a:

  • Collegare l’architettura delle informazioni del sito al suo design visivo mostrando percorsi tra le pagine
  • Chiarire i modi coerenti per visualizzare particolari tipi di informazioni sull’interfaccia utente
  • Determinare le funzionalità previste nell’interfaccia
  • Dare priorità al contenuto attraverso la determinazione di quanto spazio allocare a un determinato elemento e dove si trova l’elemento

wireframing

Creazione di wireframe

È importante tenere presente che i wireframe sono le guide a cui si allineeranno, nella pagina, gli elementi principali di navigazione e contenuto del sito. Dal momento che l’obiettivo delle illustrazioni non è quello di sovrapporsi al design: mantenete un impostazione essenziale.

Non usare i colori. Se in genere si utilizza il colore per distinguere gli elementi, invece, fare affidamento su vari toni di grigio per comunicare le differenze.

Non usare immagini. Le immagini distraggono dal lavoro di impostazione della pagina.

Per indicare dove intendi collocare un’immagine e le sue dimensioni, puoi invece utilizzare una sagoma rettangolare delle giuste dimensioni e contrassegnata con una x.

Usa solo un carattere generico. La tipografia non dovrebbe far parte della discussione sui wireframe. All’interno dei wireframe, tuttavia, è ancora possibile ridimensionare il carattere per indicare varie intestazioni e modifiche nella gerarchia delle informazioni di testo nella pagina.

Dato che i wireframe sono bidimensionali, è importante ricordare che non funzionano bene mostrando le funzionalità interattive dell’interfaccia come elenchi a discesa, stati di hover, fisarmoniche che implementano funzionalità di show-hide o caroselli con rotazione automatica.

Elementi importanti illustrati nei wireframe

Sebbene i wireframes differiscano da sito a sito, i seguenti elementi vengono spesso inclusi come elementi standard sui wireframe:

  • Campo di ricerca
  • logo
  • Breadcrumb
  • Headers, incluso titolo della pagina come H1 e sottotitoli
  • Sistemi di navigazione (menù orrizzontali e  a “tendina”), inclusa la navigazione globale
  • Contenuto del corpo
  • Pulsanti di condivisione
  • Informazioni di contatto
  • Piè di pagina

Tipi di wireframe

I wireframes possono variare sia nella produzione, dagli schizzi di carta alle immagini disegnate al computer e nella quantità di dettagli che trasmettono. Bassa e alta fedeltà sono termini usati per identificare il livello di produzione o funzionalità del wireframe.

I wireframe a bassa fedeltà aiutano a facilitare la comunicazione del team di progetto e sono relativamente veloci da sviluppare. Tendono ad essere più astratti perché utilizzano spesso immagini semplici per bloccare lo spazio e implementare il contenuto fittizio o il testo latino (lorem ipsum) come riempitivo per contenuti ed etichette.

I wireframe ad alta fedeltà sono migliori per la documentazione a causa del loro maggiore livello di dettaglio. Questi wireframe includono spesso informazioni su ogni particolare elemento della pagina, incluse dimensioni, comportamento e / o azioni relative a qualsiasi elemento interattivo

Nozioni di base sulla progettazione dell’interfaccia utente

Interfaccia utente

La progettazione di questo aspetto dell’user experience si basa sull’anticipazione delle esigenze degli utenti assicurando loro elementi di facile accesso, comprensione e utilizzo dell’interfaccia.

L’interfaccia utente riunisce concetti di interaction design, visual design e architettura dell’informazione.

Scelta degli elementi dell’interfaccia

Gli utenti hanno acquisito familiarità con gli elementi di interfaccia che agiscono in un certo modo, quindi cerca di essere coerente e prevedibile nelle tue scelte e nel layout. Questo aiuterà l’utente ad ottenere il risultato desiderato, mostrando efficienza e generando soddisfazione.

Gli elementi di interfaccia includono ma non sono limitati a: controlli di input: pulsanti, campi di testo, caselle di controllo, pulsanti di selezione, elenchi a discesa, caselle di controllo, campo data

Componenti di navigazione: breadcrumb, cursore, campo di ricerca, impaginazione, slider, tag, icone

Componenti: tooltip, icone, barra di avanzamento, notifiche, finestre di messaggio, finestre modali

Contenitori: accordion

Ci sono momenti in cui più elementi potrebbero essere ugualmente appropriati per la visualizzazione del contenuto. Quando ciò accade, è importante considerare i trade-off.

Ad esempio, a volte gli elementi che possono aiutarti a risparmiare spazio, mettono mentalmente a disagio l’utente, costringendolo a indovinare cosa si trova all’interno del menu a discesa o quale potrebbe essere l’elemento.

Best practice per la progettazione di un’interfaccia

Tutto nasce dalla conoscenza dei tuoi utenti, compresa la comprensione dei loro obiettivi, abilità, preferenze e tendenze.

Una volta che conosci il tuo utente, assicurati di considerare quanto segue durante la progettazione della tua interfaccia: mantieni l’interfaccia semplice.

Le migliori interfacce sono quasi invisibili all’utente.

Evitano gli elementi non necessari e sono chiari nella lingua che usano sulle etichette e nei messaggi.

Crea coerenza e usa elementi di interfaccia utente comuni.

Utilizzando elementi comuni nell’interfaccia utente, gli utenti si sentono più a loro agio e sono in grado di svolgere le attività più rapidamente. È inoltre importante creare schemi in lingua, layout e design in tutto il sito per facilitare l’efficienza.

Una volta che un utente impara a fare qualcosa, dovrebbe essere in grado di utilizzare tale abilità in altre parti del sito.

Sii propositivo nel layout di pagina.

Considera le relazioni spaziali tra gli elementi sulla pagina e struttura la pagina in base all’importanza. Il posizionamento accurato degli articoli può aiutare a richiamare l’attenzione sulle informazioni più importanti e può aiutare la scansione e la leggibilità.

Usa strategicamente il colore e la trama.

È possibile indirizzare l’attenzione o reindirizzare l’attenzione lontano da elementi che utilizzano il colore, la luce, il contrasto e la trama a proprio vantaggio.

Usa la tipografia per creare gerarchia e chiarezza.

Considerare attentamente come si usa il carattere tipografico. Diverse dimensioni, tipi di carattere e disposizione del testo per aumentare la scansione, la leggibilità e la leggibilità. Assicurati che il sistema comunichi cosa sta succedendo. Informa sempre i tuoi utenti di posizione, azioni, cambiamenti di stato o errori.

L’uso di vari elementi dell’interfaccia utente per comunicare lo stato e, se necessario, i passaggi successivi possono ridurre la frustrazione per l’utente. Pensa alle impostazioni predefinite.

Pensando attentamente e anticipando gli obiettivi dei tuoi visitatori, puoi creare delle impostazioni predefinite che riducono e difficoltà per chi utilizza il tuo sito.

 

La migliore interfaccia utente è quella invisibile

Non è un gran mistero che le interfacce utente veramente grandi siano quelle progettate per stare fuori dai piedi.

 ‘Stare fuori dai piedi’ significa non distrarre i tuoi utenti. Piuttosto, le buone interfacce utente consentono agli utenti di completare gli obiettivi.

Il risultato? Una riduzione dei costi di formazione e supporto e utenti più felici, soddisfatti e altamente coinvolti. Quando inizi a progettare una nuova interfaccia, assicurati di ricordare questi fondamentali:

  • 1. Conosci il tuo utente “Gli obiettivi degli utenti sono i tuoi obiettivi, quindi imparali. Ripetili. Quindi, scopri le competenze e l’esperienza del tuo utente e ciò di cui ha bisogno. Scopri quali interfacce preferisce e sedersi e guarda come le usa. Non farti trascinare cercando di tenere il passo con la concorrenza imitando stili di design alla moda o aggiungendo nuove funzionalità. Concentrandoti prima sul tuo utente, sarai in grado di creare un’interfaccia che gli permetta  di raggiungere i suoiobiettivi.
  • 2. Presta attenzione ai pattern Gli utenti trascorrono la maggior parte del proprio tempo su interfacce differenti (Facebook, MySpace, Whatsapp, Instagram, scuola / università, siti Web di notizie, ecc.). Non è necessario reinventare la ruota. Queste interfacce risolvono già alcuni degli stessi problemi che gli utenti percepiscono all’interno di quella che stai creando. Usando quei modelli familiari di’interfaccia utente, aiuterai i tuoi utenti a sentirsi a casa.
  • 3. Resta coerente “Più le aspettative degli utenti si dimostrano giuste, più si sentiranno in controllo del sistema e più gli piacerà”. – Jakob Nielson. I tuoi utenti hanno bisogno di coerenza. Devono sapere che una volta che imparano a fare qualcosa, saranno in grado di farlo di nuovo. Linguaggio, layout e design sono solo alcuni degli elementi dell’interfaccia che richiedono coerenza. Un’interfaccia coerente consente agli utenti di comprendere meglio come funzioneranno le cose, aumentandone l’efficienza.
  • 4. Usa la gerarchia visiva  Progetta la tua interfaccia in modo che permetta all’utente di concentrarsi su ciò che è più importante. La dimensione, il colore e la posizione di ogni elemento lavorano insieme, creando un percorso chiaro per comprendere la tua interfaccia. Una chiara gerarchia aiuta moltissimo nel ridurrela complessità (anche quando le azioni stesse devono essere complesse).
  • 5. Fornisci feedback La tua interfaccia dovrebbe sempre parlare con il tuo utente, quando le sue azioni sono sia giuste che sbagliate o fraintese. Informare sempre gli utenti delle azioni, dei cambiamenti di stato e degli errori o delle eccezioni che si verificano. I segnali visivi o la semplice messaggistica possono mostrare all’utente se le sue azioni hanno portato al risultato previsto.
  • 6. Sii indulgente Non importa quanto sia chiaro il tuo design, le persone commettono errori. L’interfaccia utente dovrebbe consentire e tollerare l’errore dell’utente. Disegnare modi per gli utenti di annullare azioni poter ricominciare automaticamente aiuta e rasserena lutente. Inoltre, se l’utente provoca un errore, usa la tua messaggistica come supporto mostrando quale azione è stata sbagliata e assicurati che sappia come impedire che l’errore si ripresenti.
  • 7. Potenzia il tuo utente Una volta che un utente ha acquisito esperienza con la tua interfaccia, premialo / a e concedi scorciatoie. La suddivisione di compiti complessi in semplici passaggi all’inizio aiuta ma poi diverrà macchinosa e distraente. Fornire modi più astratti, come le scorciatoie da tastiera, per eseguire attività consentirà al tuo progetto di essere più efficace.
  • 8. Parla la loro lingua “Se pensi che ogni pixel, ogni icona, ogni carattere contino, allora devi anche credere che ogni lettera sia importante. ” Tutte le interfacce richiedono un certo livello di copywriting. Mantieni i testi , chiari e diretti. Fornisci  etichette chiare e concise per le azioni e mantieni la messaggistica semplice. I tuoi utenti lo apprezzeranno, perché  ti sentiranno e sentiranno se stessi tra pari.
  • 9. Resta semplice “Un paradosso moderno è che è più semplice creare interfacce complesse perché è troppo difficile semplificarle.” – Pär Almqvist I migliori design dell’interfaccia sono invisibili. Non contengono elementi non necessari. Invece, gli elementi necessari sono concisi e hanno senso. Ogni volta che stai pensando di aggiungere una nuova funzione o elemento alla tua interfaccia, fai la domanda: “L’utente ha davvero bisogno di questo?” Stai aggiungendo le cose perché ti piaccioni o perché li vuoi? Non lasciare mai che il tuo ego dell’Ilo rubi lo spettacolo.
  • 10. Continua ad andare avanti Questo è un principio chiave nella progettazione dell’interfaccia utente. Si dice spesso quando si sviluppano interfacce che è necessario sbagliare velocemente e rifare spesso. Quando crei un’interfaccia utente, farai degli errori. Continua ad andare avanti e ricorda di tenere la tua interfaccia utente al sicuro dalla tua rabbia.

Prevenire gli errori degli utenti: evitare gli errori inconsci

Una delle 10 euristiche dell’usabilità indicate dal metodo Nielsen indica che è importante comunicare gli errori agli utenti con garbo, azione e chiarezza.

Gli utenti vengono spesso distratti dall’attività in corso, quindi occorre prevenire errori inconsci offrendo suggerimenti, utilizzando vincoli e flessibilità.

Tuttavia, è ancora meglio impedire agli utenti di commettere errori

Un punto cruciale nella discussione degli errori degli utenti è a cosa assegnare la responasbilità per l’errore. Il termine “errore utente” implica che l’utente è in colpa per aver fatto qualcosa di sbagliato. Nonè così: invece è il progettista ad essere in colpa per aver reso troppo facile per l’utente commettere l’errore.

Pertanto, la soluzione agli errori degli utenti non è quella di sgridare gli utenti, di chiedere loro di provare più duramente o di dare loro una formazione più ampia. La risposta è ridisegnare il sistema per renderlo meno incline agli errori.

 

Vedi anche: 

Due tipi di errori utente

Prima di discutere su come prevenire gli errori, è importante notare che ci sono due tipi di errori che gli utenti fanno:
Gli slittamenti o errori inconscsi verificano quando gli utenti intendono eseguire un’azione, ma finiscono per fare un’altra azione (spesso simile).Ad esempio, digitare una “i” anziché una “o” conta come una scivolata; anche mettere un sapone per le mani liquido sullo spazzolino da denti invece che sul dentifricio è una scivolata.

Gli slittamenti vengono in genere realizzati quando gli utenti sono sul pilota automatico e quando non dedicano interamente le loro risorse di attenzione all’attività in corso.

 

Gli errori spesso sono errori consci e spesso (anche se non esclusivamente) sorgono quando un utente ha informazioni incomplete o errate sull’attività e sviluppa un modello mentale che non corrisponde a come l’interfaccia effettivamente funziona.

Gli errori  consci vengono commessi quando gli utenti hanno obiettivi inappropriati per il problema o l’attività corrente; anche se intraprendono i passi giusti per completare i loro obiettivi, i passaggi risulteranno in un errore.

Ad esempio, se ho frainteso il significato della spia della pressione dell’olio nella mia auto, e ho pensato che fosse il monitor della pressione dei pneumatici, non importa quanto attentamente ho aggiunto l’aria alle mie gomme, non avrebbe risolto il problema con la mia pressione dell’olio . Questo è un errore, dal momento che l’obiettivo che stavo tentando di realizzare era inappropriato per la situazione, anche se non ho commesso errori nell’esecuzione del mio piano.

Questo articolo si concentra sulla prevenzione di errori inconsci del tipo di slittamento mentre un prossimo articolo risolverà gli errori.

Linee guida generali per evitare errori inconsci

Gli scivoloni si verificano spesso quando gli utenti conoscono bene l’obiettivo che cercano di ottenere e con la procedura per raggiungere tale obiettivo, ma accidentalmente fanno il passo sbagliato quando cercano di raggiungerlo.

Spesso, quando eseguiamo compiti che ci sono ben conosciuti, tendiamo ad allocare meno risorse attenzionali e, di conseguenza, possiamo “scivolare” ed eseguire l’azione sbagliata. Quindi, ironia della sorte, gli errori di tipo slip sono spesso fatti da utenti esperti che hanno molta familiarità con il processo in questione; a differenza dei nuovi utenti che stanno ancora imparando come utilizzare il sistema, gli esperti ritengono di aver padroneggiato l’attività e di dover prestare meno attenzione al suo effettivo completamento.

Le strategie per prevenire gli slittamenti sono incentrate sulla gentile guida degli utenti in modo che rimangano sulla strada giusta e abbiano meno possibilità di scivolare. Assistere gli utenti fornendo il livello di precisione necessario e incoraggiare gli utenti a verificare la presenza di errori.

Includere vincoli utili

Sebbene non sia sempre una buona idea limitare le scelte degli utenti, nei casi in cui vi siano regole chiare che definiscono le opzioni accettabili, può essere una buona strategia per limitare i tipi di input che gli utenti possono effettuare.

Ad esempio, prenotare un volo di solito comporta la selezione delle date di viaggio e ci sono alcune regole che determinano quali date sono accettabili. Una delle regole principali è che un volo di ritorno non può avvenire prima di una partenza. Se gli utenti non sono limitati nelle date che possono scegliere, potrebbero scivolare e selezionare per errore un insieme di date per il loro volo che non rispettano le regole. Un vincolo utile qui costringerà gli utenti a scegliere un intervallo di date adatto.

Analogamente a come i vincoli guidano gli utenti verso l’uso corretto di un’interfaccia, i suggerimenti possono prevenire molti errori prima che l’utente abbia l’opportunità di crearli.

Sui siti web che offrono migliaia di prodotti, la ricerca è un modo efficace per aiutare gli utenti a trovare il proprio ago proverbiale in un pagliaio. Tuttavia, la digitazione può essere inaccurata, in particolare sui touchscreen in cui non vi è alcun feedback tattile.

Sebbene non sia possibile impedire a un utente di eseguire errori di battitura (che sono errori di tipo slip), è possibile impedire che errori di battitura si trasformino in problemi offrendo suggerimenti contestuali mentre l’utente digita.

Offrire suggerimenti di ricerca ha anche il vantaggio di supportare il riconoscimento rispetto al richiamo in quelle situazioni in cui gli utenti ricordano erroneamente il nome del prodotto o del contenuto che stanno cercando. Ricordare come si scrive la ricerca etimotica è difficile per gli utenti che cercano cuffie di alta qualità, e la digitazione è probabilmente anche di bassa precisione.

I suggerimenti di ricerca cliccabili di Amazon consentono agli utenti di digitare meno, riducendo in tal modo gli errori o gli errori che non producono risultati.

Le opzioni predefinite sono sensate e impediscono errori di battitura per scelte comuni.

Le buone impostazioni predefinite aiutano anche a ridurre gli errori, perché insegnano agli utenti i valori ragionevoli per la domanda in questione. Aiutano gli utenti a comprendere meglio la domanda ea volte li fanno capire che si trovano sulla strada sbagliata.

Usa la formattazione per aiutare

Alcune attività richiedono davvero agli utenti di digitare informazioni molto dettagliate o precise, ma costringere le persone a fornire queste informazioni in un formato molto specifico può essere in contrasto con buone pratiche di usabilità: se chiedi agli utenti di inserire informazioni numeriche in un modulo , essere flessibili e formattare tali informazioni in modo facilmente scansionabile (dagli umani, non dalle macchine) per evitare errori.

Ad esempio, nei moduli di registrazione dell’account, c’è spesso un campo che richiede un numero di telefono. Tuttavia, molti utenti hanno difficoltà a scansionare una lunga fila di cifre che non è suddivisa in spazi o segni di punteggiatura e che hanno meno probabilità di individuare errori.

Questo è il motivo per cui  in molti altri paesi vengono scrivitti i numeri di telefono nel formato “(777) 555-1212”: questo formato raggruppa le cifre in blocchi più piccoli che sono più facili da scansionare. Mentre il database del tuo sito web potrebbe non consentire l’archiviazione di caratteri non numerici in un numero di telefono, vorresti sicuramente che gli utenti notassero errori di battitura quando inseriscono il loro numero di telefono.

Una soluzione è consentire agli utenti di digitare in un modo che è naturale per loro, piuttosto che costringerli a utilizzare il formato che la tua applicazione si aspetta.

Una soluzione ancora migliore consiste nel formattare l’input degli utenti durante la digitazione, come avviene nel sito Web di Uber durante la creazione dell’account.

Una volta iniziata la digitazione, il modulo aggiunge spazi, parentesi e trattini dove normalmente vanno, e ignora anche caratteri non numerici addizionali (che agiscono come un tipo di vincolo utile, impedendo agli utenti di aggiungere parentesi extra non necessarie, ad esempio).

Questo aiuta l’utente a capire quali caratteri devono essere digitati, e fa il lavoro di riformattazione, rendendo molto più facile per gli utenti leggere e ricontrollare il proprio lavoro. Uber.com visualizza automaticamente il numero di telefono nel formato desiderato durante la digitazione degli utenti, in modo che possano più facilmente eseguire la scansione del loro lavoro per confermare che è corretto.

Riepilogo

  • Gli errori sono spesso errori comuni che si verificano quando gli utenti non dedicano la massima attenzione a un’attività o hanno problemi di memoria.
  • Prevenire errori inconsci di questo tipo consiste  in gran parte nel ridurre gli oneri per gli utenti e guidarli quando è richiesta precisione.