Oggi parleremo dell'importanza di dirigere intenzionalmente l'attenzione dell'utente sulle parti della pagina che meritano di più. Discuteremo su come le persone sono inclini a leggere una pagina e su come possiamo piegare questa tendenza alla nostra volontà.
Daremo anche un'occhiata a un prodotto fantastico che ti consentirà di ottenere una rapida istantanea di come un utente tipico visualizzerà i tuoi progetti in modo da poter iniziare a migliorare subito i tuoi layout.
Prevedere i movimenti degli occhi dell'utente
Stabilire una gerarchia visiva consapevole e intenzionale è qualcosa su cui sto costantemente discutendo su Design Shack. Essere in grado di strutturare una pagina in modo che l'utente riceva informazioni su come le si desidera è una chiave enorme per essere un grafico di successo.
Ogni volta che crei qualcosa, dovresti analizzare costantemente dove e come stai indirizzando l'attenzione dell'utente. Se trascuri questo passaggio, il risultato potrebbe essere che un utente tipico intraprenda un percorso piuttosto indesiderato che hai involontariamente impostato. Per esempio, qualcosa nel footer del tuo sito potrebbe attirare l'attenzione di un utente sopra ogni altra cosa e quindi portarlo fuori dalla pagina, facendo sì che la persona perda attenzione e si muova piuttosto rapidamente.
Più prendi decisioni consapevoli per prendere in considerazione la gerarchia visiva, meglio diventerai padrone di questo principio. Imparerai a prendere istintivamente decisioni che massimizzano il messaggio che stai cercando di trasmettere e incoraggiare l'azione dove necessario.
In definitiva, tuttavia, l'intuizione è una cosa complicata. Semplicemente "sentirlo" non è sempre la scommessa più sicura, soprattutto se questo concetto è nuovo per te. Quindi, come puoi essere sicuro che il tuo design sia visto nel modo che intendi?
Suggerimento: sei una fonte inaffidabile
Il primo passo nel processo di considerare come un utente potrebbe leggere il tuo progetto è analizzare come lo leggi tu stesso. Un esercizio che in genere mi coinvolgo è quello di guardare fuori dal mio monitor per qualche secondo per schiarirmi la mente, poi guardare indietro al disegno e lasciare che i miei occhi vagino dove vogliono. Pensa attentamente a ciò che nel design sta attirando la tua attenzione e perché. Questo ti darà una buona idea di quali elementi tenderanno a gravitare le persone.
Nonostante il fatto che penso che dovresti eseguire questo compito ripetutamente durante il processo di progettazione per ogni progetto di impaginazione che ti imbarchi, la verità non sorprende è che questo esperimento sia pesantemente compromesso da te.
Quando dipingo una stanza, vedo solo errori
Quando vedi qualcosa che hai creato personalmente, non hai quasi nessuna possibilità di guardarlo realmente come fanno tutti gli altri. Questo non è mai più evidente per me di quando dipingo una stanza nella mia casa.
Dopo aver finito con la stanza, faccio un passo indietro e mi guardo intorno per esaminare il mio lavoro. Inevitabilmente, questo è il momento in cui divento molto scoraggiato. I miei occhi non vedono una stanza ben dipinta ma invece saltano da un posto all'altro, puntando sui luoghi in cui so che ho fatto il più piccolo degli errori: quel punto in cui la pittura murale saliva leggermente verso il soffitto o dove l'assetto ha una leggera flebo.
In realtà non sono un pittore orribile, sono solo più incline a vedere i piccoli errori perché so che ci sono. Quando qualcun altro entra nella stanza, vede una stanza ben dipinta e dovrebbe cercare instancabilmente per trovare gli errori che non posso ignorare.
Avanziamo di qualche settimana e mi sono abituato alla stanza dipinta. Quando vado a piedi non guardo intorno e vedo gli errori, infatti, a malapena considero la qualità del lavoro o anche il colore della vernice. Invece, c'è semplicemente un sottile cambiamento nell'umore o sensazione mentre entro nella stanza. Questo è ovviamente l'obiettivo finale del progetto, ero semplicemente incapace di sperimentarlo correttamente fino a quando non mi sono distaccato dal lavoro.
Torna a Web Design
Non temere, in realtà c'è un punto in questa lunga storia. Proprio come me con la stanza dipinta, non è possibile visualizzare e analizzare onestamente un design mentre lo si crea. Anche se sei orgoglioso del lavoro e non trovi alcun difetto, i tuoi occhi continueranno a guardare i tuoi componenti preferiti: quel logo che hai passato ore a perfezionare, la trama che sei così orgoglioso di aver creato da zero o il titolo che hai accuratamente elaborato con pixel kerning perfetto.
Il tuo coinvolgimento personale ti rende un pessimo esempio di come un utente leggerà un disegno. Quindi qual è l'alternativa allora?
Metodi di prova
Il modo migliore per vedere come un utente tipico vedrà un design è quello di far arrivare alcune persone. Se lavori in un ufficio, sarai tentato di chiedere alle persone intorno a te, ma i designer in generale tendono a guardare un design in modo diverso, a meno che non sia il tuo pubblico, hai ancora bisogno di un'opinione esterna.
Ovviamente, il modo migliore per fare qualcosa di simile è creare un focus group, impostare un software / hardware di tracciamento degli occhi e eseguire quanti più test è possibile per vedere come le persone rispondono al design. Poi raccogli i dati, fai una media, crei alcune heatmap e bam, hai un'immagine perfetta di come qualcuno leggerà il tuo design.
Mi vuoi fare cosa !?
Posso già vedere cosa stai pensando. Questo è un po 'ridicolo no? A meno che non stiate progettando una nuova homepage per un'azienda da molti milioni di dollari, non c'è modo di avere il tempo, il budget o le risorse per seguire i consigli sopra riportati su ogni progetto. Il semplice suggerimento di farlo è del tutto ridicolo!
La buona notizia è che puoi ottenere risultati simili senza tutti i problemi. Poiché le persone tendono a concentrarsi su determinati elementi, possiamo utilizzare il software per prevedere con un certo grado di accuratezza in che modo una persona potrebbe leggere il progetto. Quindi, in sostanza, alcune persone intelligenti insegnano a un'applicazione come visualizzare una pagina come un essere umano e quindi mostrare il disegno all'applicazione per ricevere feedback.
Incontra Feng-Gui
Sono stato alla ricerca di una soluzione decente per il monitoraggio degli occhi simulato per un po 'senza successo. Poi ho sentito Paul Boag menzionare un prodotto che sembrava davvero quello che stavo cercando: Feng-Gui.
Feng-Gui consente una serie impressionante di strumenti volti ad aiutarvi ad analizzare il vostro progetto da un punto di vista perfettamente obiettivo. Se finora sei stato un po 'intimidito da questa discussione, non preoccuparti, questi strumenti sono così facili che chiunque può usarli.
Analizzando un design
Per vedere un esempio del tipo di informazioni che puoi raccogliere da prodotti come Feng-Gui, diamo un'occhiata alla home page di Apple. Dopo tutto, se qualcuno ottiene questa roba, dovrebbe essere il fantastico team di progettazione Apple. Ecco la pagina nel suo stato attuale:
Una volta che abbiamo uno screenshot, possiamo caricare il file sul cruscotto Feng-Gui mostrato di seguito. Ci sono alcuni controlli di base per la regolazione dei parametri e uno strumento per selezionare alcune parti dell'immagine e designarle come "aree" uniche. Lo scatto qui sotto è tutto pronto, dobbiamo solo premere il pulsante "Analizza".
La mappa termica
Una volta premuto il pulsante Analizza, Feng-Gui decolla e fa le sue cose. In un minuto o due hai a tua disposizione alcune risorse estremamente utili. Il primo e sicuramente uno dei più utili è una buona vecchia mappa di calore. Questo rende immediatamente evidente quali parti del tuo design stanno catturando la massima attenzione.
Uno sguardo al nostro progetto di esempio sopra e possiamo immediatamente trarre alcune conclusioni importanti. Prima di tutto, il titolo che annuncia l'iPhone 4S sta sicuramente vincendo la battaglia dell'attenzione. Questo ha perfettamente senso poiché tutti abbiamo imparato a gravitare istintivamente verso titoli di grandi dimensioni come un'importante fonte di informazioni.
Un altro importante contendente è un'area a destra del colpo di eroe dei tre iPhone. Questo contiene un pezzo di intuizione molto prezioso. L'area che viene evidenziata non è tanto l'iPhone stesso quanto l'immagine sul telefono: il volto di una bambina. Ricorda sempre che i volti sono magici quando si tratta di catturare l'attenzione dell'utente. Semplicemente non possiamo farci niente, quando c'è una faccia su una pagina, i nostri occhi sono attratti direttamente da essa.
Si noti come la gerarchia sembra prendere forma. Vediamo che la maggior parte della nostra attenzione viene indirizzata verso il titolo, che viene poi spostato un po 'verso il colpo prodotto dell'eroe e viene ulteriormente abbassato da un'immagine colorata di un iPod Touch nel footer. Questa pagina sembra davvero leggere bene da cima a fondo.
Possiamo vedere le stesse informazioni in un modo diverso facendo clic sulla scheda Opacità. Qui tutto è stato oscurato e sbiadito in base ai valori della heatmap. Questa visualizzazione ti offre un'immagine perfetta di ciò che un utente potrebbe assorbire dopo una rapida occhiata alla pagina (che in genere è tutto ciò che ottieni).
The Gaze Plot
Come ho già accennato più volte, non è solo importante sapere cosa vede l'utente, ma in quale ordine vedono queste informazioni. Questo ti aiuta a costruire la pagina in modo da massimizzare la comprensione e la conservazione di elementi importanti.
Feng-Gui prevede questa necessità sotto forma di Gaze Plot. Questo mostra la migliore ipotesi del software su come un utente possa leggere la pagina. Il risultato sembra abbastanza folle, il che è positivo, perché i nostri movimenti oculari tendono a essere piuttosto sporadici durante la lettura di una pagina.
È importante notare che la tua inclinazione naturale è quella di leggere una pagina in uno schema a "z": da sinistra a destra, dall'alto verso il basso. Tuttavia, come designer possiamo rompere questa inclinazione naturale. Nota come nell'esempio sopra, il primo punto di messa a fuoco è in alto a destra della pagina. C'è sicuramente un evidente schema avanti e indietro mentre i tuoi occhi cercano di tornare a ciò che è naturale. Secondo Feng-Gui, ogni punto di messa a fuoco su questa immagine dura "per circa 200 ms durante la lettura del testo linguistico e 350 ms durante la visione di una scena". Quindi, anche se potrebbe sembrare che tutta questa attività oculistica richiederebbe un po ', in realtà succede nell'arco di pochi secondi!
Pensando a questi risultati possiamo ancora una volta dire che la pagina Apple è piuttosto carenata. Iniziamo con il titolo, saliamo agli eroi del prodotto, guardiamo il piè di pagina e poi cominciamo a leggere la stampa più fine sulla pagina. Questa è una progressione perfettamente logica, che indica che la Feng-Gui si sta comportando piuttosto bene.
Questo è veramente d'aiuto?
Per molti designer, tutto questo sembrerà un esercizio inutile. Dopo anni di essere un designer professionista, molti di noi avrebbero potuto raggiungere conclusioni simili per conto nostro. Tuttavia, ti esorto a non scontare il valore di prodotti come questo.
Per cominciare, non tutti i designer sono costretti a pensare in questo modo. L'utilizzo di simulatori di rilevamento degli occhi nel flusso di lavoro standard ti aiuterà a ricordare di analizzare criticamente un progetto per vedere se soddisfa i tuoi obiettivi. Inoltre, anche se hai la teoria in giù, è davvero bello vedere un punto di vista oggettivo. Il software non sarà mai buono come un focus group di cinquanta utenti, ma è sicuramente una buona alternativa per chi ha poco tempo e denaro.
Infine, indipendentemente dal fatto che tu abbia o meno bisogno di uno strumento che ti aiuti a vedere ciò che vede un utente, puoi scommettere che il tuo cliente non è così allenato (altrimenti, perché avrebbero bisogno di te?). Questo rende heatmap, gazebo e strumenti incredibilmente utili per la creazione di report dei clienti che giustificano le tue decisioni di progettazione. Armati di questi ti sembrerà infinitamente più professionale in una presentazione! Puoi anche raggruppare un rapporto come componente aggiuntivo facoltativo per aumentare i profitti.
Conclusione
Per riassumere, il layout della pagina è molto più complicato della semplice disposizione degli elementi in un modo che sembra carino.Si tratta di strutturare volontariamente un messaggio e un'esperienza utente che soddisfa una serie di obiettivi stabiliti. Troppo spesso i designer attaccano gli elementi ovunque sembrino adattarsi con zero pensieri su come potrebbe interrompere il flusso di informazioni sulla pagina.
Strumenti come Feng-Gui sono di grande aiuto nella tua ricerca per imparare a strutturare i tuoi progetti in modo logico ed efficace. Hai provato qualche altro servizio simile? Come si confronta? Fateci sapere nei commenti!
Crediti immagine: Micky, karpacious, City University Interaction Lab