Share
Le immagini fotografiche attirano la nostra attenzione e scatenano una risposta quasi istantanea quando le incontriamo. Sono quindi una parte importante di qualsiasi sito web che creiamo. Le foto giocano un ruolo significativo nel determinare la nostra prima impressione, ma possono anche dirci di cosa tratta il sito e possono essere un fattore determinante per guadagnare fiducia.
Se utilizzate correttamente, le foto sono molto efficaci e possono inviare rapidamente il messaggio desiderato al pubblico. Tuttavia, l'utilizzo di foto errate può compromettere l'esperienza dell'utente. Come scegliamo quelli giusti?
Per quanto ci interessino tutti gli aspetti del sito Web che stiamo creando: contenuti, colori, tipografia, gerarchia, architettura delle informazioni e altri dettagli, le foto meritano altrettanta attenzione in termini di usabilità e l'esperienza complessiva degli utenti sul tuo sito.
Gestire le foto sui siti web dovrebbe essere qualcosa che i progettisti capiscono e applicano efficacemente, quindi questo articolo ti guiderà nella giusta direzione e ti mostrerà come pensare alle foto quando decidi di usarne una sul tuo prossimo progetto web.
Le persone scansionano gli schermi in base all'esperienza e alle aspettative passate. L'alto a sinistra è il punto di partenza più comune per gli occhi degli utenti, anche se questo dipende dai modelli di lettura della loro cultura. Se stai usando una grande foto sulla pagina, attirerà immediatamente la loro attenzione e le allontanerà dalla loro solita tendenza.
Sono sicuro che non discuterai con me di una foto su una pagina web è contenuto, ma lo tratti davvero come tale? Lo usi come un add-on o un bel riempitore di contenuti? Hai considerato tutti gli aspetti di quel particolare contenuto? Hai valutato correttamente la foto prima di aver scelto di usarla? Hai considerato gli utenti modelli mentali e l'impatto che la foto avrà su di loro? La foto fornisce informazioni significative o fornisce assistenza per l'attività corrente dell'utente? Queste sono solo alcune delle domande a cui devi rispondere prima di utilizzare una foto su una pagina web.
Le foto non dovrebbero mai essere utilizzate solo per "ravvivare" la pagina web.
Ho visto molti designer mettere semplicemente una bella foto a schermo intero su una pagina web, lanciando qualche slogan o un "Call to action" e dichiarandolo fatto. In molti casi la foto non è stata valutata, il designer stava semplicemente seguendo una tendenza in corso. Vediamo come valutare una foto prima di utilizzarla sul tuo sito.
Ci sono alcune cose da considerare quando decidi di scegliere una foto nel tuo design.Presumo che tu sappia già come valutare aspetti fondamentali di una foto, quelle che sono: qualità, dimensione, composizione ed esposizione. Qualità in termini di risoluzione richiesta, dimensioni dell'immagine e, preferibilmente, orientamento per l'uso previsto, composizione efficace e ritaglio della foto per attirare l'attenzione e soggetti correttamente esposti sulla foto.
Una volta che hai fatto questo e la foto ha superato il test fondamentale puoi continuare a esplorare le opzioni per il tuo uso previsto.
Il nostro cervello elabora le immagini 60.000 volte più velocemente della lettura del testo. - Mike Parkinson
Soprattutto una foto deve essere utile. Non c'è niente di sbagliato nell'usare una foto come segnaposto per rallegrare una pagina o riempire un po 'di spazio, ma anche in questo caso considerare il contesto in cui stai usando quella foto. Le foto di contenuto utili, utili e stimolanti sono quelle che richiedono la nostra attenzione speciale. Le foto utili dovrebbero
Un bellissimo esempio di una foto utile nel web design è il sito web Square.
Puoi capire subito che questa immagine è stata scattata professionalmente (guarda le mani e le unghie). La cosa più importante è che comunica direttamente di cosa tratta il prodotto e quanto è facile da usare. Foto molto utile, educativa e istruttiva.
Un altro esempio di foto utile è il sito Web Pencil. Analogamente all'esempio precedente, questa foto mostra esattamente di cosa tratta il prodotto (uno stilo), dove e come può essere utilizzato (applicazione iPad).
Il sito Web Woodster fa anche buon uso delle foto per spiegare il prodotto. È chiaro che il loro prodotto è utilizzato per elevare il tuo Mac, ma fornisce anche utili connessioni USB a portata di mano. Immagina questo prodotto isolato senza contesto (l'iMac). Pensi che la foto sarebbe utile come questa?
Grovemade fa un ottimo lavoro nel presentare una raccolta del loro prodotto su una singola foto di sfondo a schermo intero. È abbastanza ovvio che fabbricano accessori da ufficio in legno di fascia alta. Non solo questa foto è utile, è anche molto efficace ed emotiva allo stesso tempo. Raggiungeremo foto efficaci ed emozionanti in un momento.
Se osservate gli esempi sopra, noterete che tutte le foto sono piuttosto ovvie, autoesplicative e che comunicano molto bene il messaggio previsto. Non devi cercare molto a lungo per capire di cosa tratta il prodotto / servizio / sito. Queste sono tutte caratteristiche di una foto utile nel web design.
Una foto efficace è quella che stimola un'azione, influenza il nostro comportamento e comunica chiaramente il messaggio previsto. In particolare, le foto di prodotti buone ed efficaci dovrebbero incoraggiare gli utenti ad acquistare tali prodotti. Abbiamo visto dagli esempi sopra che le foto utilizzabili sono effettivamente efficaci in quanto rendono il prodotto desiderabile, incoraggiandoci così a comprarle. Ogni volta che vediamo una foto che fa scattare un cambiamento nel nostro comportamento, possiamo descriverlo come essere efficace.
Se guardi il sito web di Mobility e quelle succose cuffie rosse, sei immediatamente attratto e potenzialmente vuoi comprarlo!
Apple è conosciuta per il perfezionismo in tutto ciò che fa. La pagina di destinazione dell'iPhone è piena di foto di prodotti brillanti e desiderabili che ti fanno venire voglia di possedere uno dei loro prodotti.
Un altro esempio di foto efficace è il sito web tsptr. Nota come l'uomo sulla foto guarda verso il basso come se ci fosse qualcosa sotto di te da esplorare? In effetti c'è qualcosa sotto.
Il sito Web Mapquest trasmette non solo emozioni con le immagini, ma usa anche una intelligente direzione dello sguardo per guidare gli occhi degli utenti verso contenuti importanti della pagina, in questo caso il link per il download mobile sulla sinistra.
Poco People usa una foto divertente e divertente sulla loro homepage. Puoi subito dire che c'è qualcosa di strano in questo. A causa di ciò, e un buon uso di colori, luci ed esposizione, il vostro interesse è in qualche modo stimolato a vedere di cosa tratta questo sito.
Il sito web Colossal presenta una grande foto sulla homepage che mostra cosa fanno (dipingono a mano grandi annunci e murales) e come lo fanno (controlla l'uomo sulla destra). La cosa interessante di questa foto sono le persone che passano a sinistra. Sono entusiasti di ciò a cui stanno assistendo che ti coinvolge come osservatore e rende l'intera foto e il messaggio eccitanti ed efficaci.
Una foto emotiva dovrebbe comportare una risposta emotiva da parte dello spettatore. Sii semplicemente piacevole da guardare, calmare o disturbare in un modo che ci spinge a prendere qualche azione, o divertente e divertente, o attraente e desiderabile, a patto che la foto faccia appello alle nostre emozioni in qualche modo avrà una maggiore impatto di uno che non lo fa.
Frogdesign presenta un case study sul loro sito web sulla FEMA e sulla gestione delle catastrofi. La foto principale, combinata con una buona tagline, è molto efficace ed emotiva. Racconta una storia e mostra pericolo e per il sentirci attaccati.
La foto principale del sito web Breath è molto rilassante. Combinato con una buona tagline e una corretta direzione dello sguardo, la donna sulla foto trasferisce la sua facilità di respirazione allo spettatore. Notare l'etichetta del pulsante "Inalare"?
La foto principale del sito web di Shaun Groves racconta una grande storia su di lui. Trasmette felicità, fiducia, speranza, amicizia e anticipazione allo spettatore che si affeziona ad esso e prova empatia nei confronti del suo lavoro.
Oltre all'utilità e all'efficacia della selezione di foto di Relay Foods, traducono anche le emozioni sul servizio che offrono. Le donne di sinistra e di destra mostrano la loro gioia nel lavorare per loro, e poiché Relay Foods è incentrata sui prodotti naturali, le espressioni facciali delle donne su queste foto sono allineate con il loro marchio / messaggio di servizio.
Ci sono sette (o otto) emozioni di base:
Sono universali e sono (solitamente) comunicati dall'espressione facciale e dai gesti fisici. Se stai usando le foto di persone per comunicare il tuo messaggio previsto fai attenzione a queste sette emozioni di base e decidi quali guidano il tuo pubblico di destinazione.
Le foto ravvicinate delle persone attirano immediatamente la nostra attenzione e aiutano a scatenare le nostre emozioni, rendendole un potente elemento di design.
Quando vediamo una faccia, siamo automaticamente innescati per provare qualcosa o per entrare in empatia con quella persona
Abbiamo già visto foto di persone negli esempi precedenti, ma esploriamole un po 'oltre.
Anche se la foto Build Fire di una donna non ci dice nulla del loro prodotto, aggiunge personalità al loro prodotto ed è un modo utile ed efficace per catturare l'attenzione degli utenti. Lo stesso effetto non sarebbe raggiunto se ci fosse solo una foto di iPhone al posto della donna.
Se decidi di utilizzare una foto di grandi dimensioni sul tuo sito web personale, ti saluto, sono stato lì. Ma fa attenzione! Una piccola espressione facciale può fare una grande differenza nel messaggio che stai comunicando. Daniel Eckler fa davvero un ottimo lavoro nel presentarsi al pubblico. La sua espressione facciale comunica sicurezza, calma e fiducia.
Le persone possono capire quando un sorriso è reale o falso
Tutti sanno cosa è successo al WTC. Il sito web del tributo dell'11 settembre è dedicato alle storie di coloro che erano presenti. L'uomo sulla foto ci guarda direttamente, aiutandoci così a relazionarci all'argomento del sito che ci invita nella comunità.
Nota: questo è fatto senza essere conflittuali; una linea sottile!
Un altro grande esempio di portare il messaggio con una foto ravvicinata del volto umano è il sito Web di Conservation. L'uomo Kayapo sulla foto comunica autorità, coraggio e apprezzamento.
Come diceva Susan Weinschenk, le foto ravvicinate sono più persuasive su un sito di beneficenza, e questo è vero. Save the Children presenta una foto ravvicinata di un bambino bisognoso che si allinea perfettamente con la tagline e l'argomento del sito. Notare la direzione dello sguardo verso il pulsante di donazione?
Anche se abbiamo visto molti grandi esempi di come utilizzare le foto nel nostro web design, questi possono essere facilmente utilizzati impropriamente. Quindi ti mostrerò alcuni esempi di come non usare le foto e cosa evitare.
Foto non correlata - uno studio di web design che offre servizi "su misura" utilizza una foto di sfondo non correlata (fili colorati) che crea una prima impressione errata e invia messaggi errati al visitatore. C'è un significato qui, ma è una metafora oscura.
Una soluzione molto migliore qui sarebbe quella di utilizzare una fotografia a tinta unita o di gruppo. Inoltre, i prodotti digitali non possono essere personalizzati.
Un software come servizio che offre strumenti di collaborazione per i team utilizza una foto di una donna preoccupata al lavoro. Ciò potrebbe creare l'impressione che sia preoccupata per lo stesso software che il sito sta promuovendo. Una soluzione molto migliore qui sarebbe quella di mostrare gli screenshot del prodotto reale o mostrare una donna felice utilizzando il loro prodotto.
Sfondo sfocato foto - usato solo come segnaposto decorativo, non comunica nulla sul sito, quindi non ha alcun effetto reale. Ti consiglio di evitare il più possibile gli sfondi sfocati delle foto, puoi fare di meglio allora;)
Un'altra foto totalmente non correlata all'argomento del sito. Anche se le parole "handcrafted" e "workshop" possono essere correlate alla foto stessa, non comunica il vero soggetto del sito. Brand Bat è incentrato sulla creazione di strategie di marca e con la serie di foto correlate alla lavorazione del legno manca una grande opportunità per comunicare il loro messaggio.
Scelta della foto sbagliata - Qual è stata la tua prima impressione quando hai visto questa foto? Due persone felici in piedi in un coffee shop aiuteranno la tua azienda a fare carriera online. Destra? No, un'agenzia di web design a servizio completo offre davvero questo aiuto e la foto dovrebbe mostrare uno dei loro clienti felici e di successo. Questo potrebbe anche essere una foto d'archivio che dovresti evitare.
Foto d'archivio - non comunicano quasi mai il messaggio giusto. Perché c'è un ragazzo con gli occhiali e con il pollice alzato? È uno sviluppatore che fornisce servizi di codifica PHP? Io non la penso così.
Il sito Web nazionale non riesce a comunicare il messaggio con questa foto. In primo luogo, la foto non è correlata al soggetto, la donna sembra mordersi le unghie (sappiamo che si tratta di un disturbo psicologico) e lo schermo del suo tablet è sfocato. Questa foto mostra ansia, nervosismo e stress e non credo che Nationwide volesse comunicarlo ai suoi visitatori.
Questo articolo è stato interamente dedicato all'utilizzo di foto di grandi dimensioni sul tuo sito Web, ma ci sono molti altri modi in cui le foto possono essere utilizzate correttamente per coinvolgere il tuo pubblico. Inizia a pensare alle foto all'inizio del processo di progettazione. Se hai svolto correttamente ricerche di progetto, avrai già molte informazioni.
Investi in buoni servizi fotografici: un grande fotografo può aggiungere una fortuna al valore commerciale del tuo sito web.
Qualunque cosa tu stia progettando, il tuo pubblico è composto da persone che trarranno beneficio dal tuo design. Comprendere il comportamento umano è davvero l'unico modo per rendere efficace il design e questo vale per la scelta delle migliori foto per il tuo prossimo design del sito.
Accentsconagua