6 Principi di progettazione dell'interfaccia e suggerimenti che ogni web designer dovrebbe conoscere

Il buon design dell'interfaccia è come l'aria che respiriamo: è lì quando ne hai bisogno e lo usi senza pensare. Se hai mai usato un cattivo design dell'interfaccia, hai faticato per aggirare un sito, hai fatto clic su di esso perché non riuscivi a capire cosa stesse succedendo, non sei stato in grado di completare un compito che avevi in ​​mente o semplicemente stato confuso, conoscerai i pericoli di andare storto in quest'area.

I siti web non sono belle immagini, sono lì per essere utilizzati e consumati, quindi è molto importante che come web designer passiamo una buona parte del tempo a pensare all'usabilità. In questo articolo considereremo alcuni dei grandi problemi di usabilità e i miei suggerimenti per essere un progettista di interfacce migliore.

Questo post è il 7 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 6Session Day 8"

1 - Analisi dei segmenti di pubblico


Quando creiamo Psdtuts + prendiamo in considerazione i diversi modi in cui le persone useranno il sito

In qualsiasi sito Web sono coinvolte almeno tre parti distinte: il cliente o il proprietario del sito, gli utenti del sito e il progettista o il costruttore del sito. Infatti, spesso ci sono più gruppi di utenti, alcuni rappresentanti dei clienti diversi e forse alcune persone nel team di progettazione. Questi sono tutti quelli a cui le persone piace riferirsi come stakeholder (una parola che mi fa immaginare un gruppo di persone che tengono i t-bones).

Ora la cosa sulle parti interessate è che tutti di solito vogliono qualcosa di diverso. Il / i cliente / i ha / ha un ordine del giorno: se è gradito al capo, ingrandisce il logo e ovviamente trasmette il messaggio. I tuoi utenti hanno un ordine del giorno: le attività che stanno cercando di eseguire, le informazioni che stanno cercando di trovare. E naturalmente hai un ordine del giorno: fai in modo che il tuo design sia presente in una galleria CSS preferita, accontenti il ​​tuo capo, inserendo un design veloce prima delle 17:00 quando esci ...

Bene nel mondo delle parti interessate, è sempre importante ricordare che gli utenti vengono prima di tutto. Se si desidera un sito di successo, è necessario negoziare i propri piani con le esigenze del cliente in modo tale che gli utenti siano felici e trovino ciò di cui hanno bisogno. Ecco perché una delle prime cose che fai nella pianificazione di un sito web è capire chi è il target di riferimento.

Classi del pubblico

Il pubblico di riferimento delle parole sembra implicare che si tratta di un gruppo di persone che stiamo cercando di utilizzare il sito. La realtà è più come se ci fosse un gruppo di persone che useranno il sito, che ci piaccia o no, e sta a noi capire come servire queste persone. Quindi preferisco pensare a Classi di pubblico, cioè a diversi gruppi di persone che utilizzeranno un sito.

Ogni classe del pubblico avrà una serie di attività che sta cercando di eseguire e le informazioni a cui sono interessate. Come progettista web, il tuo compito è capire chi sono queste classi di persone, cosa vogliono e come utilizzeranno il sito . Per complicare le cose, puoi generalmente dividere il pubblico in diversi modi, alcuni dei quali saranno più utili di altri.

Quindi per esempio su Psdtuts + potresti dire che abbiamo queste quattro classi di pubblico:

  1. Photoshop e Design Amateurs
  2. Web e Graphic Designer
  3. Artisti di computer grafica
  4. Visitatori occasionali

Ora questo è probabilmente un buon metodo di segmentazione del pubblico se fossi interessato a quali tipi di contenuti inserire nel sito - ad es. dovremmo avere più tutorial di web design o più tutorial di fusione 3d? Ma in termini di usabilità del sito non è molto utile. Un altro modo per suddividere il pubblico è dire che abbiamo questi gruppi:

  1. Persone in missione per imparare Photoshop
  2. I lettori regolari stanno solo mantenendo le loro capacità
  3. Lettori abituali che cercano di ammazzare il tempo
  4. Lettori regolari che partecipano alla comunità
  5. Visitatori occasionali o occasionali

Guardandolo in questo modo si vede che diversi tipi di pubblico arrivano su Psdtuts + con un obiettivo diverso in mente. Da questa rottura potremmo dedurre che le persone delle categorie 1 e 2 hanno più probabilità di colpire il nostro sistema Plus, le categorie 1 e 4 saranno interessate al gruppo Flickr e così via. Quindi stimerai le diverse dimensioni del gruppo di pubblico e avrai un'idea di ciò che è più e meno importante sul sito.

Assegnazione di priorità alle attività dell'utente

Una volta identificati gruppi di utenti, capito cosa vogliono fare sul sito e approssimativamente quanto siano grandi e importanti i diversi set, è possibile stabilire le priorità per le diverse attività dell'utente. È importante sottolineare che i tuoi obiettivi cliente / proprietario entrano in gioco in quanto peseranno sull'importanza dei diversi gruppi di utenti.

Quindi, tornando all'esempio Psdtuts +, una delle attività utente più importanti è iscriversi al sistema Plus perché è ciò che paga per il sito, quindi anche se "Le persone in missione per imparare Photoshop" non è un gruppo di destinatari tanto grande quanto "I lettori abituali che cercano di ammazzare il tempo" e "I lettori regolari che partecipano alla comunità", tuttavia, sono più importanti. Di conseguenza diamo un po 'del nostro miglior spazio sullo schermo (in alto a destra della barra laterale) a una casella su come entrare in Plus.

"I lettori regolari che partecipano alla comunità" d'altra parte è un gruppo abbastanza grande ma capita anche di essere un gruppo di persone che hanno familiarità con il sito e sono disposte a fare un po 'più di lavoro, quindi qualcosa come il gruppo di Flickr può sedersi in basso nella barra laterale dove è accessibile ma non immediatamente ovvio.

Parte Istinto, Analisi delle parti, Comportamento delle parti

Alla fine della giornata, cercando di capire gruppi di destinatari, ciò che vogliono e faranno è un mix di istinto, analisi e buon senso. Spesso mi sento come se stessi facendo ipotesi plausibili, mentre sono sicuro che su progetti con un budget elevato potresti condurre sondaggi e essere un po 'più sicuro. Penso che qualunque sia la tua abilità e il tuo budget, anche se è una buona abitudine scrivere una breve analisi dei diversi gruppi. Spesso ti costringe a vedere relazioni e problemi a cui potresti non pensare altrimenti.

È quindi possibile presentare la propria analisi al cliente. Nella maggior parte dei casi dovresti scoprire che possono dirti cose sui gruppi di pubblico che non avresti mai saputo diversamente. E più conosci gli utenti, meglio puoi progettare un sito per loro.


2 - Puoi imparare molto guardando le persone


È piuttosto affascinante (e irritante) osservare ciò che le persone effettivamente fanno su un sito

Il modo migliore per sapere in che modo le persone useranno un sito Web è di guardarli farlo. Questo è chiamato test degli utenti e per molto tempo ho avuto l'impressione che fosse qualcosa che solo le grandi e fantasiose agenzie interattive avrebbero dovuto fare. Certo, fare test utente formali è probabilmente qualcosa che è fuori dal budget della maggior parte dei progetti di web design, ma ci sono alcune cose che puoi fare anche se sei solo un ragazzo seduto in un seminterrato a prendere progetti web su eLance.

Il test utente fa bene a te come Web Designer

La prima cosa che devi riconoscere è che quando esegui qualsiasi tipo di test utente, ti renderà un web designer migliore. Vedrai esattamente come le persone usano i tuoi progetti web e ci sono buone probabilità che sarai sorpreso di come lo fanno. Le cose che pensi siano ovvie spesso non lo sono, il testo che hai pensato ha spiegato qualcosa - non viene nemmeno letto, e generalmente gli utenti fanno cose che non dovrebbero fare. Anche se l'unico test utente che fai mai è chiedere ad alcuni amici di usare un sito mentre li osservi, starai già meglio per questo, indipendentemente dal progetto stesso.

C'è un corretto test dell'utente

Se si desidera condurre test utente formali, uno dei metodi più semplici e meno costosi è utilizzare la valutazione euristica di Jakob Neilsen. Nonostante il nome spaventoso, questo è fondamentalmente ottenere un set di porcellini d'India per utilizzare un sito e quindi valutarli in base a una serie di criteri speciali denominati euristica. L'insieme di euristiche più comunemente usato è il set di Neilsen di 10 Usability Heuristics e l'effettivo processo di esecuzione del test è spiegato da Neilsen in un articolo ragionevolmente facile da capire.

La cosa bella della valutazione euristica è che non hai bisogno di molte persone per testare, infatti 5 persone dovrebbero trovare circa il 75% di tutti i problemi di usabilità, mentre il raddoppio che a 10 ti porterà solo all'85%. Immagino che le 5 persone debbano essere abbastanza diverse, comunque, perché l'idea è che persone diverse tenderanno a trovare problemi diversi.

Secondo un caso di studio, il "rapporto costi-benefici per un progetto di valutazione euristica di 48: il costo di utilizzo del metodo era di circa $ 10.500 e i benefici attesi erano circa $ 500.000" (Neilsen 1994) - che sembra piuttosto sorprendente, anche se so che non ho lavorato su molti progetti in cui avrei potuto fare un extra di 10.000 dollari oltre il cliente.

E ci sono prove utente difficili

Solo perché non hai un fantastico $ 10,500 da buttare in giro, non significa che non puoi trarre vantaggio dal test degli utenti! Alla fine della giornata, tutto ciò di cui hai veramente bisogno sono alcune persone (a.k.a. amici) con cui puoi passare 10 minuti. Prima devi organizzare qualcosa per testarli. Questo può essere qualsiasi cosa, dai wireframe di carta e penna ai mockup di Photoshop a un sito web che funziona a metà. Quindi dovresti capire alcune idee su ciò che stai cercando, quali compiti una persona tenterà di fare sul sito e chiarire nella tua mente quello che ti aspetti di vedere.

Ora metti giù la tua cavia, informale in modo che capiscano cosa stanno cercando di realizzare, ad esempio "Stai cercando di acquistare un biglietto per le Fiji e sei arrivato a questa pagina ...", quindi mostra loro il set di file JPEG o pezzi di carta o il sito di ossa nude. Se non è qualcosa che è in realtà funzionale (cioè un insieme di JPG o documenti), allora tu produrre la funzionalità - spiegando cosa succede quando "cliccano" da qualche parte o passando alla schermata successiva che vedono.

Personalmente ritengo che i JPG siano i migliori perché puoi guardare dove si muove il mouse della persona, stanno vedendo qualcosa che si avvicina a quello che vedranno effettivamente, ma allo stesso tempo non è necessario che te ne sia andato e costruito un sito completo.

Mentre stai provando non dovresti dire troppo, ricorda che lo sei osservando! Alla fine passi un altro paio di minuti a chiedere loro eventuali domande "Perché diavolo hai fatto clic qui, idiota?" e prendere appunti di cui hai bisogno "Nota per sé, rendi quel pulsante molto più grande".

E questo è tutto! Non hai bisogno di un camice bianco, non hai bisogno di attrezzature speciali, non hai davvero bisogno di nulla ... eccetto alcuni amici o persone che puoi corrompere - che non sono i web designer stessi.

Servizi a pagamento di terze parti

Dopo aver scritto tutto ciò, mi è venuto in mente che potrebbero esserci alcuni servizi di terze parti relativamente economici che possono fornire test agli utenti. Certo, c'è una società chiamata UserTesting.com che ti fornirà un video e un riassunto scritto di una persona reale usando il tuo sito a partire da $ 19 per un singolo tester fino a 100 tester per $ 1,699. Non posso dire quanto siano obiettive queste persone, ma devo dire che spendere $ 100 per far passare 5 persone attraverso un sito non è male per un progetto di piccole-medie dimensioni. Se non altro, sicuramente sembra impressionante quando dici al tuo cliente che organizzerai una serie di test degli utenti!

Tieni presente che puoi davvero utilizzare un servizio come questo con un sito web funzionante. Se stai provando a fare dei test sul palco di mockup di Photoshop o sul palco della carta e della penna, allora avrai qualche difficoltà!

Pubblica strumenti di analisi del lancio

In questo giorno ed età ci sono molti strumenti statistici che puoi usare per testare come le persone usano un sito. Ecco alcuni strumenti per l'analisi:

  1. Clicca analisi - CrazyEgg, Overlay del sito di Google Analytics, ClickHeat
    Con questi servizi puoi vedere le heatmap di dove le persone fanno clic. L'unico che ho veramente usato è quello di Google Analytics (clicca su Contenuto> Overlay del sito nel menu laterale). Questi sono abbastanza belli per vedere approssimativamente dove la maggior parte delle persone sta andando su una determinata pagina, ma ovviamente non sai molto altro su ciò che gli utenti stanno facendo o stanno cercando di ottenere, quindi è solo metà della storia.
  2. Analisi del percorso -La maggior parte dei buoni pacchetti di analisi
    Capire quali percorsi gli utenti intraprendono attraverso un sito possono essere determinati da pacchetti di statistiche come Google Analytics. Tra l'impostazione di obiettivi, canalizzazioni ed eventi, il tracciamento delle pagine di uscita, nonché la semplice ricerca di contenuti e l'esplorazione dei percorsi di navigazione, ci sono davvero più informazioni di quante ne puoi scuotere. Personalmente lo trovo un po 'opprimente a volte e utilizzo solo realmente obiettivi e canalizzazioni, ma suppongo che sia meglio avere più del necessario, che essere bisognosi.
  3. Test diviso - La maggior parte dei buoni pacchetti di analisi
    Il test diviso si ha quando si alternano tra due diverse versioni di una pagina per vedere come si converte ciascuna. È una tecnica molto utile per capire come ottimizzare le vendite e le pagine di destinazione in particolare, ma potresti usarlo praticamente su qualsiasi tipo di design dell'interfaccia.

3 - "Non farmi pensare" ... troppo


Che titolo! Che libro!

Do not Make Me Think è il titolo di un famoso libro dell'esperto di usabilità Steve Krug e riassume quasi perfettamente l'usabilità in quell'unica affermazione. Un design utilizzabile non dovrebbe coinvolgere il pensiero, dovrebbe essere ovvio cosa fare e quando farlo. Nel libro Krug spiega che le persone usano i siti in un modo molto diverso da come vorremmo credere che facciano (qualcosa che diventerà chiaro quando eseguirai un po 'di test sugli utenti!) E che è importante sapere questo in modo che tu possa progettali in modo appropriato. Non sovrastimando il testo, progettando per la scansione, accettando che le persone non leggano le tue lunghe istruzioni e così via, puoi lavorare con la realtà delle abitudini e dei comportamenti degli utenti per produrre più disegni utilizzabili.

Forse ti starai chiedendo perché ho aggiunto "... troppo" a questa intestazione. Beh, devo ammettere che mi infastidisce il fatto che i siti web di esperti di usabilità come Steve Krug e Jakob Neilsen siano così dannatamente semplici. Suppongo di capire perché lo fanno, ma non mi importa che gli utenti pensino un po 'se ciò significa avere un impatto visivo migliore. Credo di essere più un ragazzo di usabilità di 37Signals che un devoto di Jakob Neilsen.


4 - Navigazione e orientamento


Adobe.com fa un buon lavoro con il suo percorso breadcrumb per tenervi informati su dove diamine siete nel loro sito gigante.

Non penso di poter scrivere un articolo sul design dell'interfaccia senza toccare il tema di aggirare un sito. Le regole cardine della navigazione sono:

  1. Gli utenti dovrebbero essere sempre in grado di capire dove si trovano su un sito
    Questo è chiamato orientamento e puoi ottenere un buon risultato attraverso voci di menu evidenziate, tracce di breadcrumb e titoli. Essere in grado di orientarsi su un sito è la chiave per renderlo comprensibile e utilizzabile. Nel mondo reale l'equivalente fisico dell'orientamento sono i segnali stradali, ti fanno sapere dove sei adesso.
  2. La navigazione dovrebbe rimanere coerente
    Non c'è niente di più confuso di avere una barra dei menu spostarsi da qualche altra parte, cambiare drasticamente o semplicemente scomparire. La navigazione di un sito è uno degli strumenti più importanti utilizzati dai visitatori per comprendere un sito. Nel mondo reale l'equivalente fisico della navigazione è una mappa stradale, ti permette di capire dove puoi andare.

Il modo migliore per capire perché la navigazione e l'orientamento sono così importanti è immaginare se sei stato improvvisamente trasportato in una remota città straniera e hai detto di andare da qualche parte, perché non c'erano segnali stradali e periodicamente la tua mappa si sarebbe riorganizzata, svanire e riappare. Il dolore è meno su un sito web, ma solo perché un clic del mouse ti fa uscire di lì!

Ci sono molte altre convenzioni e idee su cosa rende una buona navigazione / orientamento - ma tutto il resto è subordinato a queste due regole.


5 - Fai i tuoi problemi


Anche se più sullo sviluppo del web che sul design, il libro 37signals ha alcune sezioni interessanti su come lavorare sui propri problemi. E il migliore di tutti è il libro gratuito leggere online.

Nessun problema è più chiaro del tuo. Questo è uno dei motivi per cui i nuovi imprenditori sono sempre consigliati di avviare attività che risolvano il loro problema. Anche i web designer possono trarre vantaggio dalla risoluzione dei problemi che hanno vissuto. C'è qualcosa nell'esperienza del dolore in prima persona che chiarisce esattamente come le cose potrebbero essere migliori.

Poiché è improbabile che tu possa scegliere di lavorare solo sui siti web con cui hai esperienza diretta, un metodo migliore è quello di acquisire esperienza con i siti web su cui stai lavorando. Puoi farlo tramite:

  1. Utilizzando il sito corrente (se ne esiste uno) per il tuo cliente
  2. Usando i siti della concorrenza che fanno cose simili

La cosa importante da notare è che quando dico "uso", non intendo solo fare clic in giro per un paio di secondi e quindi spuntare l'elenco delle cose da fare. intendo veramente usa un sito. Descrivi alcuni compiti tipici (ad es. "Devo contattare l'ufficio vendite in Delaware", "Voglio fare una prenotazione") e poi eseguirli completamente. Quando comprendi veramente i compiti e i problemi che un utente dovrà affrontare su un sito Web, sarai in grado di progettare una soluzione molto migliore.


6 - Le convenzioni sono sia familiari che facili


Le icone sono un eccellente esempio di convenzioni. Guarda le icone qui sopra e vedi quanti automaticamente ti fanno pensare a qualche compito o azione. Per inciso, queste icone sono disponibili su una licenza Creative Commons tramite Web Appers

È passato più di un decennio da quando il web è diventato mainstream e in quel momento ci sono molte cose su come i siti web appaiono e funzionano che sono diventati generalmente accettati. Ad esempio quando fai clic su un pulsante che dice "Home" ti aspetti di andare alla pagina iniziale, non ti aspetti di andare a una pagina che mostra la casa di una persona. Sembra ovvio e stupido, ma è quello che sono le convenzioni.

Come corollario del nostro precedente suggerimento "Non farmi pensare", l'uso di standard accettati significa esattamente questo, gli utenti non hanno bisogno di pensare. Se metti la barra di navigazione nel piè di pagina di ogni pagina, avrai degli utenti confusi, infastiditi e in partenza. Se si usano icone comuni per scopi non comuni, non etichettare correttamente gli articoli, non dare "Are You Sure?" conferme per azioni irreversibili, e così via, rischi di alienare i tuoi utenti, e questa è l'ultima cosa che vuoi fare.

Certo, ci sono momenti in cui potresti non seguire i metodi convenzionali, ma dovresti avere dei buoni motivi per farlo, e fare tutto il possibile per chiarire che cosa stai facendo.

Questo post è il 7 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 6Session Day 8"