Comment intégrer les médias sociaux dans la conception de sites Web mobiles

Il existe plusieurs raisons pour lesquelles les médias sociaux sont une forme populaire de socialisation et de communication. Pour commencer, cela nous donne une chance de connecter de manière exponentielle plus de personnes que ne le permettent les communautés en personne (ce qui est fantastique pour le consommateur et les entreprises). Cela encourage également un nouveau style de communication où règle de concision et de narration visuelle.

Alors, pourquoi n'utilisons-nous pas davantage de fonctionnalités de type médias sociaux dans la conception de sites Web mobiles?

Pour être clair, je ne fais pas référence à. les types d'éléments de médias sociaux que nous voyons déjà sur les sites Web, tels que:

• Logins sociaux
• Icônes de suivi social
• Icônes de partage social
• Flux sociaux
• YouTube incorpore
• Images cliquables. Je parle de l'inspiration de la manière abrégée avec laquelle nous parlons aux autres là-bas. Après tout, les sites Web mobiles, les applications PWA et les applications natives ne nous donnent que très peu d’espace pour raconter une histoire et intéresser un public. Adopter une conception inspirée des médias sociaux serait utile pour faire passer rapidement notre message sur les écrans mobiles.

  Ces éléments, en particulier, méritent d'être explorés dans votre travail de conception mobile.

  1. Utilisez un symbole de notification pour diriger les visiteurs vers l’action

  Vous n’avez pas beaucoup d’espace ou de temps à perdre sur votre mobile, alors pourquoi expliquez-vous littéralement le type d’action que vous souhaitez que les visiteurs exécutent? Une grande partie des symboles que nous utilisons sur les réseaux sociaux peuvent facilement être réutilisés pour les sites Web mobiles.

  L'un de ces symboles est un symbole de notification un peu comme ceux que nous avons l'habitude de voir dans l'en-tête ou pied de page des applications de médias sociaux lorsqu'il y a un message ou un rappel dont nous devons être informés. Comme celui-ci bleu trouvé dans la barre inférieure de Facebook :

  

  À l'occasion, le site Web Red Bull mettra un ticker rouge d'aspect similaire sur son menu icône hamburger (celui-ci clignote cependant):

  

  Cette notification clignotante n'a rien à voir avec le fait de m'avertir de l'activité du compte (car je ne suis pas connecté au site Web). Cependant, cela attire certainement mon attention sur la navigation avant toute autre chose.

  Si vous souhaitez que les visiteurs voient quelque chose de pertinent dans la navigation ou dans l'en-tête du site, l'icône de notification est un bon moyen de capter rapidement leur attention. Et il n’est pas nécessaire que ce soit un point coloré comme Facebook ou Red Bull l’a traité. Vous pouvez également utiliser un compteur de numéros, comme ceux qui apparaissent lorsque des articles se trouvent dans un panier ou des courriels dans une boîte de réception.

  Renforcer l'image de marque avec des hashtags et des poignées

  La façon dont nous nous parlons sur les réseaux sociaux est assez unique. Non seulement de nombreuses personnes utilisent des acronymes pour tronquer ce qu'elles disent dans un espace très restreint, mais nous avons également adopté un moyen plus rapide de transmettre nos messages aux utilisateurs cibles.

  Prenez, par exemple, ce message I 'ai écrit sur Twitter à propos de un message que Jad Joubran a récemment écrit sur les PWA .

  

  Maintenant, je pourrais laisser mon message tel quel et espérer que Jad rencontrera cette mention ou que des personnes intéressées à apprendre à construire Les PVA le trouvent. Mais il y a trop de bruit sur les médias sociaux, c'est pourquoi l'utilisation des symboles de poignée (@) et de hashtag (#) est devenue utile pour faire passer nos messages aux bonnes personnes:

  

  Regardez le message ci-dessus et notez les différences. Tout d’abord, j’ai inclus des hashtags dans ce post pour #pwa et #progressivewebapp. De cette façon, si quelqu'un est intéressé par des sujets connexes, il sera plus facile de localiser ce poste maintenant.

  De plus, j'ai marqué Jad. De cette façon, il verra mon cri. J’ai également tagué Smashing Magazine depuis le magazine dans lequel l’article a été publié. C’est bon pour eux, car cela augmentera la visibilité de la marque tout en aidant les personnes qui rencontrent le poste à établir une connexion directe entre #pwa et @smashingmag.

  Le hashtag et le handle sont devenus un tel Une partie innée de notre façon de communiquer en ligne, que je suis surpris que plus de marques ne les utilisent pas sur leurs sites Web. Et je ne parle pas d’énumérer les descripteurs de médias sociaux sur une page. Je veux dire réellement intégrer des hashtags ou des poignées de marque dans leurs conceptions comme le font eos ici:

  

  Il y a quelques années, j'ai vu plus de hashtags et de poignées incorporés dans des conceptions Web. Aujourd’hui, je ne le vois pas autant.

  Je suppose que les concepteurs ont cessé de placer des poignées et des hashtags dans les dessins car les visiteurs ne peuvent pas facilement copier ou cliquer et faire quoi que ce soit avec eux. Cependant, il est utile de placer des poignées et des hashtags de marque dans vos créations sur mobile.

  Considérez-le comme un filigrane pour les images de votre marque. Comme dans l'exemple ci-dessus, les gens ne vont pas simplement s'éloigner en pensant à la fraîcheur de cet «œuf». Ils noteront également le hashtag placé perpendiculairement à celui-ci. Et pour ceux qui sont sur le point de devenir des clients fidèles de eos ce hashtag leur sera fidèle.

  3. Ajouter des marques de confiance dans le dessin

  Il existe certaines plates-formes de médias sociaux qui permettent aux marques et aux personnalités publiques de vérifier leur identité. Ainsi, quiconque voudra les suivre saura qui est la personne de l’autre côté du profil (au lieu d’un bot ou de quelqu'un se faisant passer pour eux).

  Plutôt que de gifler un «profil vérifié». Des étiquettes sur ces profils, des plates-formes comme Twitter et Instagram utilisent un minuscule symbole qui permet aux gens de savoir qu’il est normal de faire confiance à l’utilisateur qui est ce qu’ils prétendent être. Et il se présente sous la forme d’une petite coche bleue à côté de leur nom d’utilisateur.

  

  Les marques de confiance sont déjà utilisées sur le Web pour informer les visiteurs du moment où un site est suffisamment sûr pour faire l'objet d'un achat. Cependant, ils se présentent généralement sous la forme de gros logos de fournisseurs de sécurité tels que Norton Security, qui renforcent la confiance des consommateurs juste avant de passer à la caisse.

  Au lieu de cela, vous devez rechercher des moyens d’utiliser des marques de confiance plus petites expérience. Voici comment Sephora le fait pour son magasin:

  

  Il y a deux marques de confiance présentes dans la capture d'écran ci-dessus.

  Le produit GlamGlow porte un cachet rouge et blanc. ce qui dit "Allure Readers 'Choice Award Winner". Vous savez déjà à quel point les utilisateurs font confiance aux avis et aux recommandations d'autres consommateurs, vous pouvez donc imaginer ce que ce type de symbole fait pour susciter leur intérêt et renforcer la confiance dans le produit.

  Le produit Farmacy a une couleur verte et blanche. timbre sur celui-ci qui dit "Propre à Sephora". Sephora s’applique sur tous les produits sans ingrédients douteux. Pour les clients très conscients de la provenance de leurs produits et de la composition de leurs produits, ce symbole leur permet d’attirer rapidement l’attention sur les types de produits qu’ils recherchent.

  4. Guidez-vous avec une image mémorable singulière

  Lorsque vous parcourez votre flux de médias sociaux, il est peu probable que vous voyiez message après message avec des galeries d'images attachées. Sauf si quelqu'un vient de partir en vacances et veut montrer tout ce qu'il a fait ou vu.

  Habituellement, la plupart des publications sur les réseaux sociaux que vous rencontrez restent simples: un message texte avec une image complémentaire. Et si l'image ne provient pas du lien dont ils font la promotion, ils attacheront quelque chose tout aussi mémorable et pertinent.

  Les flux des médias sociaux regorgent de messages de personnes avec lesquelles nous sommes connectés. Il est important d’avoir une image forte qui aide la nôtre à se distinguer parmi la foule. La même approche serait bénéfique pour un site Web mobile.

  Dans ce cas, je vais vous indiquer cet élément promotionnel sur le site Web mobile West Elm pour les vacances du 4 juillet aux États-Unis. :

  

  Etant donné que les feux de Bengale jouent un rôle important dans la célébration du Jour de l'Indépendance, ce GIF est un moyen incroyablement efficace et simpliste de célébrer attirer l'attention des visiteurs sur la promotion correspondante.

  Non seulement le GIF est-il mémorable, mais il est également très utile pour ce que les acheteurs en ligne recherchent en ce moment. De plus, tout cela s'inscrit dans l'espace d'un écran de smartphone, ce qui en fait un moyen plus pratique de lire des informations sur la promotion avant de cliquer pour bénéficier de l'offre de 20%.

  5. Donnez à votre marque le ton d'une mémoire

  Lorsque les marques utilisent les médias sociaux, elles ne doivent pas seulement associer un message soigneusement élaboré à une image attrayante. Ils doivent également tenir compte de la cohérence de leurs messages. Dans certains cas, les marques utilisent la couleur pour lier leurs articles. D'autres s'appuieront sur le message pour créer une identité cohérente.

  Il y a ensuite des marques qui ont transformé leurs marques en memes . «Les campagnes de Terry Crews ou« L'homme que votre homme pourrait sentir »figurent parmi les exemples les plus réussis et les plus mémorables de la façon de le faire.

  Il n'y a pas que les marques comme Old Spice ou Dollar Shave Club dont les publicités humoristiques deviennent mèmes peut retirer ceci. Prenons l'exemple d'une marque comme Oreo .

  Oreo est un nom familier. Et pourtant, est-ce que quelqu'un aurait envisagé de partager des publications sur les cookies Oreo avec d'autres? Avant 2013, je n'en suis pas si sûr. Après Oreo a publié son article désormais célèbre pendant la panne du Super Bowl, mais les choses ont changé.

  

  Cela pourrait ne pas être un meme au niveau de Old Spice. Cependant, son niveau de tendance et de partage est certainement le même.

  Oreo a continué de chercher des moyens de transformer son image emblématique de biscuits Oreo en un symbole de statut semblable à un mème.

  

  Vous savez comment tout le monde et sa mère ont partagé des avis de cookies sur leurs sites Web, grâce au GDPR? Oreo utilise son image de marque pour s'amuser un peu avec elle.

  Comme vous pouvez le voir ici, la liste déroulante utilise de manière créative l'image Oreo tout en jouant également sur le mot «cookie». C’est un exemple fantastique de créativité, même dans les espaces les plus restreints et pour une durée limitée. Cela a certainement attiré suffisamment mon attention pour que cela vaille la peine d'être partagé ici.

  6. Embrace the Selfie

  Je reconnais que les selfies n’ont pas toujours la connotation la plus positive, mais il est vraiment difficile de discuter de l’utilisation d’éléments de type médias sociaux sans les aborder. Donc, je vais aller un peu plus loin ici et dire que les sites Web mobiles gagneraient à inclure des portraits ressemblant à des selfies… lorsqu'ils ne sont pas utilisés dans un contexte factice ou odieux.

  Je veux dire, c'est le principal grief concernant selfies non? Ils sont mis en scène et pas du tout réalistes de la vie réelle d’une personne. Ou bien ils ne sont pas mis en scène parce qu’ils sont pris au plus mauvais moment et dans les contextes les moins professionnels.

  Cela dit, les selfies se distinguent des tirs super glacés et des autres photos de sociétés mises en scène. Et lorsque vous les présentez sur une interface mobile, cela donne à un site Web (et à la marque qui le cache) une présence plus sociale. En d’autres termes, vous invitez les gens à dialoguer avec vous et non pas simplement à jeter un coup d’œil sur la copie et les photos avant de les convertir sans réfléchir. Quand un selfie est présent, il y a quelque chose de plus dans cette expérience.

  Un exemple que j'aime particulièrement provient de Aleyda Solis consultante en référencement et auteur.

  

  En regardant la capture d'écran ci-dessus hors contexte, j'ai l'impression de faire défiler son flux personnel sur Instagram. Et parce que je suis tellement habitué à voir des photos intéressantes sur Instagram et à rechercher immédiatement les légendes pour obtenir plus d’informations, je suis obligé de faire de même ici. Tu parles du chien de Pavlov, n'est-ce pas?

  Pour les marques ayant une silhouette ou une équipe reconnaissable derrière elles, un selfie peut constituer un excellent moyen d'accroître la participation de vos visiteurs à un site Web. Assurez-vous simplement que la personne ou les personnes sont peintes de manière positive.

  7. Utilisez des filtres pour raconter des histoires individuelles

  Il y a bien longtemps, nous avions l'habitude de prendre des photos avec du film et de prier pour que les images soient correctement rendues et suffisamment acceptables pour être cadrées. Ensuite, nous avons eu des appareils photo numériques qui nous permettaient de voir à quoi ressemblaient nos photos en temps réel, bien que cela conduise souvent à trop de séries de prises de vues pour tenter de capturer l'éclairage ou la prise de vue parfaits.

  Aujourd'hui, nos smartphones et les plateformes de médias sociaux rendent tout cela tellement plus simple. Nous pouvons prendre des photos où que nous soyons, quand nous en avons envie et bon nombre des outils dont nous avons besoin pour nettoyer une photo et appliquer un filtre attractif sont déjà intégrés à nos applications.

  Inutile de dire que filtres sont une partie importante de ce qui rend le partage de photos sur les réseaux sociaux si attrayant pour les utilisateurs.

  Ce n’est pas comme si les marques n’avaient pas utilisé de filtres avant d’améliorer leur image de marque ou leur photographie. Cependant, avez-vous envisagé l'utilisation de différents filtres dans différents contextes pour votre site Web mobile? Ils pourraient transformer différentes pages ou produits en différentes expériences ou histoires uniques.

  Abel est une boutique de parfum en ligne proposant une petite collection de parfums, avec des parfums tels que l'iris rose, le santal rouge et le vert. cèdre. Notez la tendance? Chaque parfum est décrit par une couleur distincte, comme le montre cet exemple de néroli doré:

  

  Bien que le parfum lui-même soit de couleur claire, le dessin de cette image donne à la bouteille une couleur dorée qui correspond à son nom. Maintenant, voici où cela devient intéressant:

  

  Ceci est l’une des images plus bas sur la page du produit. Bien que je soupçonne que le coucher de soleil capturé sur la photo est réel, il est évident qu'un filtre a été appliqué pour éclaircir et réchauffer le ton général de l'image.

  Il en va de même avec une autre image plus bas sur la page:

  

  Encore une fois, l'accent est mis sur le fait de rendre l'image plus claire et plus chaude. Et si vous regardez l'extrait de texte juste au-dessus, vous pouvez voir que Abel compare même la sensation de ce parfum à «la chaude couverture chaude de la nuit qui tombe sur Lisbonne».

  Donc, plutôt que de vous accrocher à la conception votre site Web mobile avec une palette de couleurs unique, considérez l’émotion individuelle et l’identité de chacune de ses pages ou de ses éléments. Vous constaterez peut-être que les filtres et les couleurs vous aident à raconter à chacun une histoire plus forte et unique que les mots seuls.

  Les avantages d'une conception mobile inspirée des médias sociaux

  Alors que nous essayons de déverrouiller davantage de méthodes de conception pour mobile Sans étouffer la créativité ni surcharger l'expérience utilisateur, je pense qu'il est important de s'inspirer d'autres types de supports.

  Ce n'est pas comme si nous n'avions pas encore trouvé le moyen de raconter une histoire visuelle par le biais d'un design sur des écrans plus petits ou plus isolés. Il suffit de regarder la conception du jeu vidéo . Les médias sociaux sont un autre type de média qui a su développer son propre style. Et compte tenu de la dépendance des consommateurs et de leurs réseaux sociaux sur les médias sociaux, il s’agit d’une excellente plate-forme d’inspiration en termes de design.

  (ra, yk, il)