risposta-alla-domanda-sullo-sviluppo-web-bd.com

Modelli di design per la rilevabilità

Quali sono alcuni schemi di progettazione collaudati e reali per la rilevabilità nell'interfaccia utente/UX, in cui le informazioni o una funzionalità non sono necessariamente palesi a prima vista, ma sono rilevabili utilizzando l'interfaccia attraverso la divulgazione progressiva? Come si può segnalare che un'interfaccia ha elementi rilevabili?

32
Virtuosi Media

L'intero articolo collegato che segue è interessante, ma la sezione seguente è pertinente e penso che valga la pena includerla nel contesto di questa domanda, anche se non fornisce effettivamente modelli.

Da Scott Berkun's Il mito della rilevabilità (2003)

Come rendi effettivamente qualcosa di rilevabile?

Come designer, hai una manciata di risorse per enfatizzare le cose e cercare di attirare l'attenzione su di esse:

  • Immobiliare : ottieni una certa quantità di pixel da utilizzare nel modo che preferisci. È probabile che prima vengano individuati obiettivi più grandi e che sia più facile ritrovarli. I grandi obiettivi sono obiettivi più facili.
  • Ordine : puoi posizionare le cose in ordini specifici, da sinistra a destra e dall'alto verso il basso, che potrebbero formare schemi che le persone possono imparare a seguire, a seconda la loro lingua (alcuni sono da sinistra a destra, altri da destra a sinistra, ecc.).
  • Forma : puoi usare colore, font, forma, ombra, composizione e altre costruzioni di design grafico per aiutarti a sfruttare il patrimonio immobiliare che hai.
  • Aspettativa e flusso : a seconda di come usi quanto sopra, puoi mettere le cose in forme o schemi che sono in qualche modo familiari alle persone. Gli esempi più ovvi sono i giornali stampati e il modo in cui vengono utilizzate colonne, interruzioni di riga e intestazioni. Ciò potrebbe essere ottenuto emulando un altro design da un altro sito Web o da qualcosa nel mondo reale.
  • Coerenza : se si utilizza lo schermo in modo coerente, è possibile insegnare alle persone a cercare determinati tipi di comandi in determinati luoghi. Essendo prevedibile, puoi segnare alcuni punti di rilevabilità extra. Questo può essere spesso aiutato usando le convenzioni disponibili e cercando di sfruttare le conoscenze già in possesso degli utenti.

Ogni metafora o paradigma con cui potresti avere familiarità (GUI, Windows, Mac, Amazon.com, ecc.) Fa uso di proprietà immobiliari, ordini e moduli per ottenere i risultati che fanno. I buoni sistemi forniscono alcune costruzioni di base per rendere rilevabili elementi che possono essere facilmente riutilizzati.

20
Roger Attrill

Un'idea è quella di allineare la funzionalità che si desidera scoprire con il comportamento dell'utente esistente . (Ho solo un esempio in mente, quindi non posso, in buona onestà, definirlo un "modello" per ora).

L'esempio di questo metodo sta notando che gli utenti tendono a tentare riflessivamente di scorrere di più in Twitter o nelle app rss iphone/ipad, specialmente se il flusso Twitter/rss tende ad aggiornarsi periodicamente da solo e aggiungere altro in alto. Si noti che tale comportamento, anche quando non ci sono aggiornamenti non letti "above the fold", e invece di avere un evento null associare un aggiornamento manuale ad esso. E ora hai "pull down to refresh". Scopribile.

Ho notato un altro comportamento dell'utente riflessivo da parte mia, quello di premere Ctrl-S o Cmd-S in un documento aperto ogni volta che mi fermo dopo aver digitato o modificato. Mi sorprendo persino a premere Ctrl-S un minuto dopo, quando tutto quello che ho fatto è scorrere il documento, leggere un po 'qua o là, o persino rispondere al maledetto telefono. Cioè, non ci sono modifiche da salvare eppure premo Ctrl-S. È un'abitudine. Ora ... se qualche app software dovesse fare qualcosa di intelligente con quello, sarebbe fantastico.


Ok, ho trovato alcuni schemi documentati più attuali nella Yahoo Pattern Library . Solo loro non li chiamano "modelli di rilevabilità".

Modelli di design dell'invito

Il progettista deve indicare all'utente l'esistenza di una funzione interattiva

Cursor Invitation - Designer deve indicare all'utente con cui un oggetto può interagire.

Drop Invitation - Il designer deve indicare i siti di rilascio candidati validi durante un'operazione di trascinamento.

Hover Invitation - Designer deve indicare all'utente cosa accadrà quando si fa clic con il mouse sull'oggetto hovered.

Tool Tip Invitation - Designer deve indicare all'utente cosa accadrà se fanno clic con il mouse sull'oggetto al passaggio del mouse.


E ho appena osservato un'altra soluzione di design che porta alla scoperta mentre scrivo questa risposta: se fai clic sulla piccola icona della guida e apri il menu della guida, quando fai clic su uno degli argomenti della guida lì (ad es. Stile/Titolo) eventualmente vedere alcune delle icone appena sopra rimbalzare una o due volte mentre viene visualizzato l'argomento della guida.

Ora, sapevo quali fossero alcune o la maggior parte di quelle icone, ma non sapevo che una di esse fosse per blockquote. Quando ho aperto l'argomento di aiuto per "Blockquotes" il icona/pulsante rimbalzato.

OK, se riusciamo a trovare qualche altro esempio della soluzione di design di oggetti correlati animati , penso che possiamo anche chiamarlo modello. (Il modello Yahoo Drop Invitation potrebbe essere un sub-pattern di questo).

15
Erics

I nuovi utenti saranno sopraffatti da troppe opzioni o funzioni, mentre gli utenti esperti probabilmente vorranno molti più di quelli che già hanno. La soluzione a questo è rivelazione progressiva o caccia al tesoro, se preferisci.

Quando un nuovo utente inizia con l'applicazione, dai loro solo le basi di cui hanno bisogno per fare le cose - nascondi tutto il resto. In questo modo possono passare da zero a efficaci in un breve lasso di tempo e sentirsi facilmente più sicuri nell'applicazione.

Dopo aver raggiunto un certo livello di utilizzo (per questo utilizziamo i punti), come ricompensa si rivela un'altra funzione e contrassegnarlo come nuovo o sbloccato di recente. Questo li mette in una posizione in cui conoscono bene l'applicazione oltre a questa caratteristica. È facile imparare un'altra cosa, e grande per l'esperienza se è anche qualcosa di utile per loro.

Continua a rivelare le funzionalità in questo modo e i tuoi clienti non si sentiranno mai sopraffatti dall'applicazione durante l'apprendimento progressivo.

Un altro vantaggio aggiuntivo è che una volta che le persone si rendono conto che questo è il meccanismo, è probabile che esplorino, e quindi imparino, l'applicazione solo per sbloccare nuove funzionalità - l'effetto di gamification.

Modifica: Per applicazioni complicate con un uso vario (come Word), potresti dare suggerimenti visivi a punti e funzionalità o persino mostrare funzionalità e fornire suggerimenti su come sbloccarle.

9
JohnGB

DUH! Usa Clippy, ovviamente. Quello che devi fare è programmare una sorta di personaggio animato interattivo che si apre ogni volta che l'utente cerca di fare qualsiasi cosa nel tuo programma e suggerire altre cose che potrebbe voler fare. È molto importante Word questo giusto. Inizia ogni suggerimento con "Ho notato che eri ...." e quindi aggiungi la tua funzione rilevabile.

L'animazione è fondamentale perché altrimenti gli utenti potrebbero concentrarsi su ciò che stanno facendo e non saranno distratti dal tuo dicoverabilibuddy. Meglio solo renderlo modale per essere al sicuro.

Un'opzione ancora migliore è mostrare suggerimenti giornalieri. L'utente apre la tua applicazione, cercando di fare un po 'di lavoro, BAM! lo fai esplodere con una certa conoscenza delle funzionalità che non sa ancora che vuole usare. Potrei suggerire di cercare consigli orari, perché i quotidiani sono stati fatti a morte. Renderà le tue funzionalità 24 volte più rilevabili.

3
Assaf Lavie