Share
Les images photographiques attirent notre attention et déclenchent une réponse presque instantanée lorsque nous les rencontrons. Ils sont donc une partie importante de tout site Web que nous créons. Les photos jouent un rôle important dans la détermination de notre première impression, mais elles peuvent également nous expliquer en quoi consiste le site et peuvent être un facteur important pour gagner la confiance..
Lorsqu'elles sont utilisées correctement, les photos sont très efficaces et peuvent rapidement envoyer le message souhaité à votre public. Cependant, l'utilisation de mauvaises photos peut dégrader l'expérience de vos utilisateurs. Comment choisit-on les bons?
Même si nous nous soucions de tous les aspects du site Web que nous créons: contenu, couleurs, typographie, hiérarchie, architecture de l'information et autres détails, les photos méritent tout autant d'attention en termes de convivialité et d'expérience globale des utilisateurs de votre site..
Traiter avec des photos sur des sites Web devrait être une chose que les concepteurs comprennent et appliquent efficacement. Cet article vous orientera dans la bonne direction et vous montrera comment penser aux photos lorsque vous décidez de les utiliser pour votre prochain projet Web..
Les personnes scannent les écrans en fonction de leurs expériences et attentes En haut à gauche est le point de départ le plus commun pour les yeux des utilisateurs, bien que cela dépende des habitudes de lecture de leur culture. Si vous utilisez une grande photo sur la page, elle attirera immédiatement leur attention et les éloignera de leur tendance habituelle..
Je suis sûr que vous ne discuterez pas avec moi de la photo sur une page Web est content, mais le traitez-vous vraiment comme tel? Est-ce que vous l'utilisez simplement comme add-on ou comme un bon remplisseur de contenu? Avez-vous examiné tous les aspects de ce contenu? Avez-vous évalué correctement la photo avant d’avoir choisi de l’utiliser? Avez-vous considéré les modèles mentaux des utilisateurs et l'impact de la photo sur eux? La photo fournit-elle des informations utiles ou fournit-elle de l'aide pour la tâche en cours d'un utilisateur? Ce ne sont là que quelques-unes des questions auxquelles vous devez répondre avant d’utiliser une photo sur une page Web..
Les photos ne doivent jamais être utilisées uniquement pour «dynamiser» la page Web.
J'ai vu de nombreux concepteurs placer simplement une belle photo en plein écran sur une page Web, y insérer un slogan ou un «appel à l'action» et le déclarer déclaré. Dans de nombreux cas, la photo n'a pas été évaluée, le concepteur a simplement suivi une tendance en cours. Voyons comment évaluer une photo avant de l'utiliser sur votre site.
Il y a quelques points à considérer lorsque vous décidez de choisir une photo dans votre conception..Je suppose que vous savez déjà comment évaluer aspects fondamentaux d'une photo, à savoir: qualité, taille, composition et exposition. Qualité en termes de résolution requise, de taille de l'image et de préférence d'orientation en fonction de l'utilisation prévue, de composition efficace et de recadrage de la photo pour attirer l'attention, et de sujets correctement exposés sur la photo.
Une fois que vous avez fait cela et que la photo a réussi le test fondamental, vous pouvez continuer à explorer les options pour votre utilisation prévue..
Notre cerveau traite les images 60 000 fois plus rapidement que la lecture de texte. - Mike Parkinson
Une photo doit avant tout être utile. Il n'y a rien de mal à utiliser une photo comme espace réservé pour égayer une page ou remplir un espace, mais même dans ce cas, tenez compte du contexte dans lequel vous utilisez cette photo. Des photos utiles, utiles, qui suscitent la réflexion sont celles qui nécessitent notre attention particulière. Des photos utiles devraient
Le site Square est un bel exemple de photo utile en conception de sites Web..
Vous pouvez dire tout de suite que cette image a été prise de manière professionnelle (regardez les mains et les ongles). Plus important encore, il communique directement en quoi consiste le produit et à quel point il est facile à utiliser. Photo très utile, éducative et pédagogique.
Le site Web Pencil est un autre exemple de photo utile. De la même manière que dans l'exemple précédent, cette photo montre exactement en quoi consiste le produit (un stylet), où et comment il peut être utilisé (application iPad).
Le site Web de Woodster utilise également des photos pour expliquer le produit. Il est clair que leur produit est utilisé pour élever votre Mac, mais fournit également des connexions USB utiles à portée de main. Imaginez ce produit isolé sans contexte (l'iMac). Pensez-vous que la photo serait aussi utile que celle-ci?
Grovemade fait un excellent travail en présentant une collection de ses produits sur une seule photo d’arrière-plan en plein écran. Il est évident qu'ils fabriquent des accessoires de bureau en bois haut de gamme. Non seulement cette photo est utile, mais elle est également très efficace et émotionnelle en même temps. Nous arriverons à des photos efficaces et émotionnelles dans un instant.
Si vous regardez les exemples ci-dessus, vous remarquerez que toutes les photos sont assez évidentes, explicites en elles-mêmes et qu’elles communiquent très bien le message voulu. Vous n'avez pas besoin de chercher longtemps pour savoir en quoi consiste le produit, le service ou le site. Ce sont toutes les caractéristiques d'une photo utile dans la conception Web.
Une photo efficace est celle qui incite à une action, influence notre comportement et communique clairement le message souhaité. En particulier, des photos de produits de qualité et efficaces devraient encourager les utilisateurs à acheter ces produits. Les exemples ci-dessus montrent que les photos utilisables sont effectivement efficaces car elles rendent le produit souhaitable et nous incitent à les acheter. Chaque fois que nous voyons une photo qui déclenche un changement de comportement, nous pouvons la décrire comme étant efficace.
Si vous consultez le site Web Mobility et ces casques rouges juteux, vous êtes immédiatement attiré et souhaitez potentiellement les acheter.!
Apple est connu pour le perfectionnisme dans tout ce qu'ils font. La page de destination de l'iPhone regorge de photos de produits brillantes et souhaitables qui vous donnent envie de posséder l'un de leurs produits..
Le site Web tsptr est un autre exemple de photo efficace. Remarquez comment l'homme sur la photo regarde vers le bas comme s'il y avait quelque chose en dessous à explorer? En effet, il y a quelque chose en dessous.
Le site Web Mapquest transmet non seulement des émotions liées à l'image, mais utilise également une direction astucieuse du regard pour guider les yeux des utilisateurs vers le contenu important de la page, dans ce cas le lien de téléchargement mobile situé à gauche..
Poco People utilise une photo amusante et divertissante sur sa page d'accueil. Vous pouvez immédiatement dire qu'il y a quelque chose d'étrange à ce sujet. En raison de cela, et de la bonne utilisation des couleurs, des lumières et de l'exposition, votre intérêt est piqué d'une façon ou d'une autre pour voir de quoi parle ce site..
Le site Web Colossal contient une grande photo sur la page d'accueil montrant ce qu'ils font (ils peignent de grandes annonces murales et des peintures murales) et comment ils le font (regardez l'homme à droite). Ce qui est intéressant à propos de cette photo, ce sont les gens qui passent à gauche. Ils ont l'air enthousiasmés par ce qu'ils voient, ce qui vous implique en tant qu'observateur et rend toute la photo et le message passionnant et efficace.
Une photo émotive devrait entraîner une réaction émotionnelle de la part du spectateur. Que ce soit simplement agréable à regarder, ou calmant, ou dérangeant d’une manière qui nous oblige à passer à l’action, ou amusant et divertissant, ou attrayant et désirable, tant que la photo fait appel à nos émotions, elle aura une plus grande impact que celui qui ne le fait pas.
Frogdesign présente sur son site Web une étude de cas sur la FEMA et la gestion des secours en cas de catastrophe. La photo principale, associée à un bon slogan, est très efficace et émotionnelle. Cela raconte une histoire et cela montre le danger et parce que nous nous sentons attachés à cela.
La photo principale du site Web Breath est très apaisante. Combinée à un bon slogan et à un regard correct, la femme sur la photo transfère sa facilité de respiration au spectateur. Remarquez l'étiquette du bouton "Inhale"?
La photo principale du site Web de Shaun Groves raconte une belle histoire à son sujet. Il transmet bonheur, confiance, espoir, amitié et anticipation au spectateur qui s'y attache et ressent de l'empathie pour son travail..
Outre l'utilité et l'efficacité de la sélection de photos Relay Foods, ils traduisent également les émotions suscitées par le service offert. Les femmes de gauche et de droite manifestent leur joie de travailler pour elles. Parce que Relay Foods se concentre sur les produits naturels, les expressions faciales des femmes sur ces photos sont alignées sur le message de leur marque / service..
Il y a sept (ou huit) émotions de base:
Ils sont universels et sont (généralement) communiqués par l'expression faciale et les gestes physiques. Si vous utilisez des photos de personnes pour communiquer le message voulu, faites attention à ces sept émotions de base et déterminez celles qui motivent votre public cible..
Des photos rapprochées de personnes attirent immédiatement notre attention et nous aident à déclencher nos émotions, ce qui en fait un élément de design puissant.
Lorsque nous voyons un visage, nous sommes automatiquement déclenchés pour ressentir quelque chose ou pour faire preuve d'empathie avec cette personne.
Nous avons déjà vu des photos de personnes dans les exemples précédents, mais explorons-les un peu plus loin.
Même si la photo Build Fire d'une femme ne nous dit rien sur son produit, elle ajoute de la personnalité à son produit et constitue un moyen utile et efficace d'attirer l'attention des utilisateurs. Le même effet ne serait pas accompli s'il n'y avait qu'une photo de l'iPhone à la place de la femme.
Si jamais vous décidez d'utiliser une grande photo de portrait sur votre site Web personnel, je vous salue, j'y suis déjà allé. Mais fais attention! Une petite expression du visage peut faire une énorme différence dans le message que vous communiquez. Daniel Eckler fait un très bon travail en se présentant devant le public. Son expression faciale communique confiance, calme et confiance..
Les gens peuvent dire quand un sourire est réel ou faux
Tout le monde sait ce qui est arrivé au WTC. Le site Web du 9/11 Tribute Center est consacré aux récits de ceux qui y étaient. L'homme sur la photo nous regarde directement, nous aidant ainsi à comprendre le sujet du site en nous invitant dans la communauté..
Remarque: cela se fait sans être conflictuel; une ligne fine!
Le site Web de Conservation est un autre excellent exemple de transmission du message avec une photo de visage humain en gros plan. L'homme Kayapo sur la photo communique autorité, courage et reconnaissance.
Comme Susan Weinschenk l'a dit, les photos en gros plan sont les plus convaincantes sur un site caritatif, et c'est vrai. Save the Children présente une photo rapprochée d'un enfant dans le besoin qui correspond parfaitement au slogan et au sujet du site. Remarquez la direction du regard vers le bouton de donation?
Même si nous avons vu beaucoup d'excellents exemples d'utilisation de photos dans notre conception Web, ceux-ci peuvent facilement être mal utilisés. Par conséquent, je vais vous montrer quelques exemples de la ne pas utiliser des photos et ce qu'il faut éviter.
Photo sans rapport - un studio de conception Web proposant des services "sur mesure" utilise une photo d'arrière-plan sans rapport (fils de couleur) qui crée une première impression erronée et envoie des messages erronés au visiteur. Il y a un sens ici, mais c'est une métaphore obscure.
Une solution bien meilleure ici serait d’utiliser une couleur unie ou une photo de groupe. En outre, les produits numériques ne peuvent pas être personnalisés.
Un logiciel en tant que service offrant des outils de collaboration pour les équipes utilise la photo d'une femme inquiète au travail. Cela pourrait donner l’impression qu’elle s’inquiète des mêmes logiciels que le site fait la promotion. Une solution bien meilleure ici serait de montrer soit les captures d'écran du produit réel, soit une femme heureuse utilisant son produit..
Arrière-plan flou - utilisé uniquement comme espace réservé décoratif, ne communique rien sur le site et n’a donc aucun effet réel. Je vous conseillerais d'éviter autant que possible les arrière-plans de photo flous, vous pouvez faire mieux alors;)
Une autre photo totalement indépendante du sujet du site. Même si les mots "fabriqué à la main" et "atelier" peuvent être liés à la photo elle-même, elle ne communique pas le sujet réel du site. Brand Bat a pour vocation de créer des stratégies de marque et, avec la série de photos liées à la transformation du bois, il manque une excellente occasion de communiquer son message..
Mauvais choix de photo - Quelle a été votre première impression en voyant cette photo? Deux personnes heureuses dans un café aideront votre entreprise à réussir en ligne. Droite? Non, une agence de création de sites Web proposant des services complets offre cette aide, et la photo doit montrer l'un de leurs clients heureux et prospères. Cela peut aussi éventuellement être une photo de stock que vous devriez éviter.
Stock photos - ils ne communiquent presque jamais le bon message. Pourquoi un jeune garçon porte-t-il des lunettes et tient-il les pouces? Est-il un développeur fournissant des services de codage PHP? Je ne pense pas.
Le site Web Nationwide ne communique pas le message avec cette photo. Premièrement, la photo n'a aucun rapport avec le sujet, la femme semble se mordre les ongles (on sait qu'il s'agit d'un trouble psychologique) et l'écran de sa tablette est flou. Cette photo montre l’anxiété, la nervosité et le stress et je ne pense vraiment pas que Nationwide ait voulu communiquer cela à ses visiteurs..
Cet article traite uniquement de l’utilisation de grandes photos sur votre site Web, mais il existe de nombreuses autres façons de bien utiliser les photos pour engager votre public. Commencez à penser aux photos tôt dans votre processus de conception. Si vous avez fait une recherche de projet appropriée, vous aurez déjà beaucoup de connaissances.
Investissez dans de bonnes séances photo: un bon photographe peut ajouter une fortune à la valeur commerciale de votre site Web.
Quoi que vous conceviez, votre public est composé des personnes qui bénéficieront de votre conception. Comprendre le comportement humain est vraiment le seul moyen de concevoir efficacement et cela s'applique au choix des meilleures photos pour la conception de votre prochain site Web..
Accentsconagua