Comment les cinq grandes banques britanniques se comparent-elles?

Alors que les banques cherchent à servir davantage de clients en ligne, à quel point sont-ils bons dans la conception de contenu à la volée?

Chaque secteur a des défis en ce moment. Les banques fonctionnent avec moins d’agences ouvertes et celles qui sont ouvertes ont réduit leurs heures d’ouverture.

Cela signifie inévitablement que davantage de clients souhaitent contacter les banques par téléphone, ce qui est exacerbé par la situation financière précaire dans laquelle se trouvent de nombreuses personnes, et pourtant les centres d’appels ne sont pas entièrement dotés en personnel.

American Banker rapporte que les connexions bancaires mobiles à BBVA ont atteint des niveaux record aux États-Unis, en hausse de 16% au cours des trois premières semaines d’avril, par rapport à la même période en mars.

Alors, comment les banques gèrent-elles cela en ce qui concerne la conception de contenu humble? J’ai décidé de consulter les pages d’aide sur les coronavirus sur les sites Web des cinq grandes banques du Royaume-Uni – Barclays, HSBC, Lloyds, RBS, Santander.

Je serais très intéressé d’entendre les commentaires des concepteurs de contenu ou des spécialistes UX dans les commentaires ci-dessous.

Premières impressions – où est l’humanité?

Bien que je gémisse à la publicité bancaire moyenne à la télévision – le couple achetant une maison, peignant une pépinière, etc. – le besoin d’humanité en ce moment est assez évident. J’ai donc été un peu surpris par la façon dont ces pages d’aide sur les coronavirus étaient pour la plupart dépourvues de vie humaine.

Meilleures notes à RBS pour avoir inclus une photo d’un être humain en haut de la page – je ne sais pas pourquoi cela aide, mais c’est le cas. Soit dit en passant, je connais des études qui enquêtent sur l’effet des photos d’humains sur les utilisateurs du site Web (voir un résumé ici) et en bref, l’effet est de susciter la confiance. Cela pourrait bien être important lorsque vous parlez à de nouveaux visiteurs, ou même à des clients actuels qui se sentent vulnérables.

Voici quelques captures d’écran, à peu près au-dessus du pli sur mon ordinateur portable, juste pour avoir une idée de ces pages…

HSBC

Assez bien. Quatre gros blocs / appels à l’action au-dessus du pli, avec de belles icônes, et nous pouvons pardonner la longue ligne de texte en haut de la page qui fonctionne sur toute la largeur.

Page de conseils sur les coronavirus HSBC. Image: site Web HSBC

Santander

Configuré presque comme un long article de blog – c’est une collection de « conseils » (11 au total!), Ce qui est admirable, mais cela finit par être très lourd en texte et suppose que l’utilisateur dispose d’au moins cinq minutes pour parcourir ses options.

Page d’aide sur le coronavirus de Santander (j’ai fait défiler un peu vers le bas). Image: site Web de Santander.

Barclays

Semble un peu vide au-dessus du pli, il contient un texte pleine largeur difficile à suivre pour contacter la banque et la signalisation pourrait peut-être être plus claire.

Page d’aide sur le coronavirus Barclays. Image: site Web de Barclays.

Lloyds Bank

J’aime vraiment l’accent mis sur les services bancaires personnels, c’est une grande priorité pour le moment et cette page vend les avantages au-dessus du pli, mais encore une fois, cela semble un peu trop verbeux.

Page d’aide et d’assistance sur le coronavirus Lloyds. Image: site Web de Lloyds.

RBS

Une belle photo de famille et quelques options de navigation très claires. Vraiment, cette page ne m’a pas fait réfléchir, et c’est une bonne chose.

Page de support du coronavirus RBS (j’ai fait défiler un peu vers le bas). Captures d’écran via le site Web de RBS

En ce qui concerne l’imagerie, je dois ajouter que HSBC, RBS et Barclays avaient tous des photos de familles sur leurs pages d’accueil lors de ma visite, mais il m’a toujours semblé que RBS avait pris des précautions supplémentaires avec l’esthétique de leur page d’aide sur les coronavirus au-dessus du pli. C’était immédiatement le plus rassurant.

Barclays comprend en fait plus d’images de personnes que RBS, mais elles apparaissent plus bas sur la page d’aide du coronavirus, et servent à mettre en évidence à quel point il est étrangement vacant au-dessus du pli. HSBC inclut une photo de famille plus bas sur leur page d’aide sur les coronavirus.

Bien que je sache qu’une grande partie de l’imagerie de l’interaction humaine peut sembler inappropriée lors d’une pandémie (voir l’enquête du 24 mars de Pattern89 qui a révélé que sur Facebook et Instagram, il y avait 27% d’images et de publicités vidéo en moins de modèles affichant une interaction humaine), je pense il est toujours important que les marques transmettent un certain niveau d’empathie, quelque chose qui peut être beaucoup plus facile à réaliser avec des images qu’avec des mots.

Réduire la charge cognitive

J’ai déjà fait allusion au livre de Steve Krug, Don’t Make Me Think (une approche sensée de la convivialité du Web). La théorie est simple: laissez les utilisateurs atteindre leurs objectifs facilement et directement.

Krug peut être particulièrement pertinent lors d’une pandémie. Lorsqu’on lui a demandé comment il réagissait à la crise, Grégoire Baret, directeur principal, Expérience omnicanal au sein du groupe ALDO, a déclaré dans une interview à Econsultancy: «Premièrement, nous avons ajusté et simplifié le flux global de commerce électronique et l’ensemble de services. Moins de charge cognitive pour se concentrer sur des services plus clairs, plus rapides et plus légers. Nous avons peaufiné et optimisé les étapes clés des pages de détails du produit à la caisse… »

Maintenant, faites défiler cet article et regardez à nouveau ces captures d’écran des pages des coronavirus bancaires. Lequel d’entre eux évoque vraiment un sentiment de calme, vous prend la main et vous guide? Pour être honnête, je trouve Santander, Barclays et Lloyds un peu déroutant à première vue.

Regardez Santander sur mobile. Au-delà des grands changements de conception, il semble que certains HTML TLC pourraient l’améliorer pour commencer…

Page d’aide sur le coronavirus de Santander. Image: Santander.co.uk

Dans le cas où vous pensez que je parais malhonnête, je suis conscient que ces pages sont conçues pour transmettre beaucoup d’informations et que les clients recherchent des mises à jour qui ne sont pas toujours courtes et rapides. Pourtant, le succès consiste à permettre à l’utilisateur de trouver ce dont il a besoin.

Comparez les options de navigation, par exemple, sur les pages RBS et Barclays coronavirus. Ils apparaissent tous les deux juste en dessous du pli sur leurs pages respectives.

Voici Barclays…

Le menu ci-dessous se plie sur la page d’aide de Barclays coronavirus. Image: Barclays.co.uk

Et voici RBS…

Le menu ci-dessous se plie sur la page d’assistance du coronavirus RBS. Image: personal.rbs.com

L’essentiel, bien sûr, est que le menu Barclays est plus étendu et pourrait donc peut-être bénéficier de catégories / rubriques plus claires («questions d’actualité», «plus de support», peut-être un peu vague?). Au-delà de la simple taille, Barclays est également plus difficile à lire avec sa couleur de police bleu clair et son manque de poids.

Vous pourriez faire valoir que pour une tâche spécifique, le menu RBS peut ne pas fournir à l’utilisateur ce dont il a besoin. Mais, par exemple, si j’avais perdu ma carte, en cliquant sur «informations utiles», je me dirige vers le bas de la page et après un petit défilement, je vois un panneau de recherche disant «quelque chose d’autre, nous pouvons vous aider», qui sert dûment une requête pertinente (voir ci-dessous).

Panneau de recherche RBS au bas de sa page d’assistance sur les coronavirus. Image: personal.rbs.co.uk

Sur le sujet des menus ou des options de navigation, regardez la page du coronavirus de GOV.UK, juste en dessous du pli (voir ci-dessous), et vous commencez à comprendre les avantages d’une police plus grande et plus audacieuse et d’une colonne d’informations qui suit la «  pyramide inversée  » méthode (pourquoi concerner les utilisateurs avec autre chose que les choses les plus importantes pour commencer). Oui, GOV.UK n’est pas une banque, mais j’utilise le site Web pour illustrer quelque chose qui s’apparente aux meilleures pratiques lorsque de nombreuses informations et services sont proposés (et oui, je comprends que les meilleures pratiques sont une idée délicate).

Page du coronavirus GOV.UK. Image: gov.uk

Un autre truc du chapeau à HSBC ici, qui se rapproche assez d’une sensation GOV.UK sur des pages telles que ses conseils de voyage sur les coronavirus. Voir ci-dessous comment la banque cherche à répondre aux besoins des utilisateurs avec des scénarios à la première personne, ceux-ci lient ensuite plus bas sur la page aux informations appropriées. Le texte est un peu petit, mais il est utilisé avec parcimonie et ne s’exécute pas sur toute la largeur.

Page de conseils de voyage sur le coronavirus HSBC. Image: hsbc.co.uk

Minuscule torture de texte

En regardant toutes ces pages sur le bureau, ce ne sont sans doute que RBS et HSBC qui échappent aux critiques pour le petit texte qui parcourt toute la largeur de la fenêtre.

Ci-dessous est une capture d’écran de la page de support du coronavirus Lloyds prise sous le pli sur mon ordinateur portable. Des choses assez intimidantes à mon avis, même lorsque la page utilise deux colonnes, et surtout si vous êtes un utilisateur qui a du mal à lire.

Page d’aide sur le coronavirus Lloyds, sous le pli. Image: lloydsbank.com

Il existe une fonctionnalité de style accordéon à peu près à mi-chemin de la page d’aide sur le coronavirus Lloyds, un moyen intelligent de réduire la charge cognitive et de conserver également beaucoup de contenu sur une seule page. Mais ouvrez une des options et vous trouverez plus de texte clair pleine largeur. Tout cela est parfaitement utilisable pour moi, mais si j’avais une mauvaise vue, je pense que j’apprécierais quelque chose de plus grand.

Liens rapides de style «accordéon» sur la page d’aide sur le coronavirus Lloyds. Image: lloydsbank.com

Cette critique de texte minuscule est une critique que je pourrais formuler à Lloyds, Barclays et Santander. Beaucoup de directives pour la rédaction pour le Web pourraient être mieux respectées avec un texte plus lisible, divisé en sections ou en-têtes plus lisibles.

Bien sûr, sur mobile, la taille de l’écran rend ce texte plus lisible car la longueur de la ligne est limitée. Voici un exemple de Barclays qui est sans doute plus lisible que la version de bureau que j’ai incluse en haut de cet article…

Page d’aide sur le coronavirus Barclays sur mobile. Image: Barclays.com

Cependant, comme nous l’avons déjà vu et le GIF suivant le montre, RBS le garde relativement volumineux sur le bureau et utilise des sous-en-têtes et des dépliants d’une manière plus sophistiquée que les quatre autres sites Web.

Page du coronavirus RBS, soutien financier. Image: personal.rbs.co.uk

HSBC a également un texte de meilleure taille et est bon sur les titres, ce qui rend les bonnes informations faciles à trouver. Les icônes sont également d’une grande aide dans ma quête pour ne pas trop exercer mon cerveau.

Page de conseils sur les coronavirus HSBC. Image: HSBC.co.uk

Obtenir des liens texte à droite, voire des boutons!

L’humble bouton peut-il révéler beaucoup de choses sur la transformation numérique? Eh bien, il est certainement vrai que les expériences numériques peuvent être complexes et sont souvent la somme de leurs parties. En ce sens, lorsque les pages sont précipitées, elles peuvent le ressentir exactement.

Vous n’avez pas toujours besoin de boutons fantaisie si vous avez de bons liens dans le texte, mais ils doivent être bien faits.

Reprenez Lloyds, cette fois sur mobile. Regardez les liens texte utilisés dans la capture d’écran ci-dessous pour aider les utilisateurs à trouver les bonnes informations. En plus d’être difficile à remarquer, le texte d’ancrage n’aide pas l’utilisateur à comprendre où mèneront les liens. Bien que je comprenne qu’un lien à partir du mot «ici» aidera les utilisateurs à savoir qu’ils peuvent cliquer dessus, il pourrait être encore plus clair s’il disait «découvrez les services actuellement disponibles dans nos succursales». De même, en faisant référence à la Poste, «leur site Web» est utilisé comme texte d’ancrage, alors que «visiter le site Web de la Poste» aurait peut-être été plus visible.

De plus, comme le souligne ma collègue Rebecca Sentance, quelqu’un qui utilise son lecteur d’écran pour écouter une liste de liens sur la page entendra simplement «ici» sans aucune autre information.

Page d’aide et d’assistance sur le coronavirus Lloyds sur mobile, sous le pli. Image: lloydsbank.com

Comparez la page Lloyds à celle que j’ai prise de GOV.UK ci-dessous, qui contient beaucoup moins d’informations sur la page et utilise très efficacement les liens de texte descriptif pour diriger les utilisateurs vers la bonne information ou le bon service.

Passerelle gouvernementale, Covid-19 HMRC Guidance. Image: GOV.UK

Donc, les boutons ne sont pas nécessaires comme le montre GOV.UK, mais bon, ils se démarquent dans l’exemple RBS ci-dessous. Très exploitable. Bien que je n’aie pas inclus de GIF ici, sur le bureau, ces boutons ont des effets de survol assez élégants, avec des hachures scintillantes sur le bord inférieur du bouton lorsque la souris est au-dessus de votre tête.

Exemple de boutons sur la page de support du coronavirus RBS. Image: personal.rbs.co.uk

Et voici un appel à l’action équivalent de Lloyds (remarquez que je devais le mettre en évidence avec une flèche)…

Lien vers l’application bancaire sur la page d’aide du coronavirus Lloyds. Image: Lloydsbank.com

Je dois ajouter qu’il y a un gros bouton pour «se connecter» aux services bancaires par Internet Lloyds juste au bas de cette boîte, et si vous appuyez dessus, vous visitez une page qui a une annonce plus claire pour l’application mobile.

Écrire pour le web

L’écriture pour le Web est quelque chose que la plupart des grandes entreprises doivent maîtriser à un certain degré ou à un autre, et les cinq grandes banques sont toutes assez douées pour utiliser un langage simple que le client comprendra.

Rendez-vous sur la page des services bancaires personnels de RBS et vous verrez des liens cliquables indiquant «services bancaires à proximité» et «contactez-nous». C’est simple mais ça marche plutôt bien.

Revenez aux lignes directrices 2016 du service numérique du gouvernement pour écrire pour GOV.UK si vous voulez quelque chose d’aussi proche de ce que vous pourriez appeler les meilleures pratiques. Voici juste une sélection de points qui me sautent aux yeux:

Répondre aux besoins des utilisateurs.
Répondre à ce besoin signifie être: spécifique; informatif; clair et précis.
Un bon contenu en ligne est facile à lire et à comprendre.
Il utilise: des phrases courtes; sections sous-titrées; vocabulaire simple.
… Les utilisateurs ne lisent qu’environ 20 à 28% d’une page Web.
Gardez votre copie corporelle aussi ciblée que possible.
Utilisez l’approche «pyramide inversée» avec les informations les plus importantes en haut, diminuant vers le bas pour plus de détails.
Décomposez le texte avec des sous-titres descriptifs.

Avec ces lignes directrices fraîches à l’esprit, voici quelques exemples où l’écriture de Barclays et Santander pourrait peut-être être améliorée…

Copie de Barclays et Santander – est-elle suffisamment précise?

La page du coronavirus de Santander est divisée en 11 conseils. Le premier conseil est illustré ci-dessous. Étant pernickety, je dirais que «nous sommes là pour vous aider» n’est pas exactement une astuce.

J’ajouterais que l’intitulé complet de cette astuce – «Si vous avez été touché par le coronavirus, nous sommes là pour vous aider de toutes les manières possibles» – n’est pas très court ni précis. Est-ce que deux cases – «aide financière» et «bien-être» – feraient mieux le travail?

Astuce 1 sur la page d’aide du coronavirus de Santander. Image: santander.com

L’astuce 2 se lit au moins comme une astuce – «  Voyez si nous avons supprimé les frais sur vos comptes courants, vos cartes de crédit et plus  » – mais je dirais que les sous-titres pourraient être rendus plus percutants ici en utilisant des pauses et un différentiel dans la police taille plutôt que simplement gras. Une petite chose, peut-être!

Astuce 1 sur la page d’aide du coronavirus de Santander. Image: santander.com

C’est une histoire familière dans le résumé de l’aide hypothécaire sur la page Barclays coronavirus – trois lignes de texte sans intérêt. Pourrait-il être décomposé davantage?

Liste déroulante d’informations hypothécaires sur la page d’aide du baronays coronavirus. Image: Barclays.co.uk

« Il pourrait y avoir plusieurs façons de vous aider » – ces premiers mots ajoutent-ils vraiment quelque chose? Des congés de paiement et des extensions pourraient-ils être faits pour se démarquer davantage comme sous-positions? Peut-être que je suis dur ici, il y a un joli bouton clair après tout – «aide hypothécaire» – et sur mobile, le texte se lit un peu plus facilement.

Liste déroulante d’informations hypothécaires sur la page d’aide du baronays sur le coronavirus sur mobile. Image: Barclays.co.uk

Lloyds montre une amélioration au fil du temps

La case «branches update» sur la page du coronavirus Lloyds Bank laisse un peu à désirer (elle bénéficierait peut-être de meilleurs sous-titres)…

Boîte de mise à jour des branches sur la page d’aide et de support du coronavirus Lloyds. Image: Lloydsbank.com

Cependant, lorsque vous cliquez à travers la case ci-dessus pour lire la mise à jour complète sur les heures d’ouverture de la succursale, vous obtenez une page qui a été considérablement améliorée par l’équipe Lloyds.

Le voici en avril lors de ma première visite…

Page de mise à jour de la succursale de Lloyds en avril. Image: Lloydsbank.com

Et le voici en mai à l’heure de l’écriture…

Page de mise à jour de la succursale Lloyds en mai. Image: Lloydsbank.com

Le titre a été beaucoup amélioré, utilise un langage courant et des horaires plus clairs. Il y a des messages plus clairs sur le fait de rester à la maison (bien que répétés légèrement), et l’ajout d’un joli tableau montrant ce que « nous pouvons aider » et ce « au moment où nous ne pouvons pas aider ».

Vous pouvez voir dans le microcosme comment de petits changements font une grande différence en descendant plus loin sur cette page de mise à jour de la branche Lloyds – il y a une boîte qui n’a vraiment pas été inspirée en avril, intitulée « ce que cela signifie pour vous ». Ce n’est toujours pas étonnant maintenant, mais il fait le travail, et c’est beaucoup mieux qu’il ne l’était, principalement grâce à l’ajout de sous-titres. Regarde…

avril

Lloyds «ce que cela signifie pour vous» dans la boîte d’informations située sous le pli sur la page de mise à jour de la succursale. Image: Lloydsbank.com

Mai

Mise à jour de la boîte d’informations sur les heures d’ouverture de Lloyds sous le pli de la page de mise à jour de la succursale. Image: Lloydsbank.com

Il n’est pas vraiment nécessaire de souligner que ce qui était difficile à lire / comprendre plus tôt est plus facile à comprendre maintenant.

Une conclusion pleine d’avertissements

Quelques mises en garde:

1. Mon enquête n’est pas approfondie. J’ai essentiellement consulté une page simple, bien que chacune de ces banques soit mise en évidence de manière très visible sur leurs pages d’accueil respectives. Je ne suis pas allé profondément dans aucune sorte de parcours utilisateur ni même vraiment pensé aux besoins ou aux personnalités. Je n’ai pas regardé les applications, les succursales, la publicité ou appelé toutes les lignes téléphoniques.

2. La recherche est un élément important pour répondre aux besoins des utilisateurs que je n’ai pas couvert. Je pouvais rechercher «vacances de paiement» sur les pages d’accueil de Santander, RBS et Barclays (HSBC et Lloyds ne proposent pas de barre de recherche sur la page d’accueil). Dans chacun de ces trois exemples, j’ai été rapidement et facilement conduit à la bonne information. Mais Barclays était le plus impressionnant, avec des résultats suggérés apparaissant dynamiquement sous la forme de liens FAQ (voir ci-dessous).

Recherchez sur le site Web de Barclays. Image: Barclays.co.uk

3. Chacun de ces sites Web a une fonction d’aide / de discussion bien en vue avec un assistant numérique qui peut guider les utilisateurs vers les informations dont ils ont besoin.

4. Je n’ai pas abordé autant de points importants pour la convivialité – vitesse, mobile (seulement à quelques endroits) et accessibilité, pour n’en nommer que trois.

5. Je ne veux pas suggérer que chacune de ces banques devrait nécessairement viser le même ton de la voix.

6. La réglementation peut dicter quelles informations doivent figurer sur certaines de ces pages, par exemple en offrant des informations sur l’emprunt. Parfois, des rames de texte sont difficiles à éviter.

7. Si vous voulez entendre de vrais experts, J’ai déjà mentionné les directives d’écriture de GOV.UK, mais vous pouvez également consulter l’expérience utilisateur et la conception d’interaction d’Econsultancy pour mobile et Web – Guide des meilleures pratiques.

Avec toutes ces mises en garde et plus prises en compte, je pense qu’il est juste de dire que la conception de contenu est toujours une science qui est peut-être sous-investie. Ou peut-être, même si j’ai remarqué l’itération de Lloyds, il est facile de voir comment une combinaison d’équipes travaillant à distance et devoir travailler avec rapidité (voire hâte) n’est pas le scénario idéal pour obtenir une conception de contenu correcte du premier coup.

Et tandis que chacun des systèmes de gestion de contenu de ces banques aura certainement ses caprices et ses limites, la transformation numérique concerne autant la capacité des équipes à s’adapter au travail itératif que la technologie avec laquelle elles doivent jouer.

Dans l’ensemble, les cinq banques ont fait du bon travail en surfaçant toutes les informations dont les clients ont besoin. Dans le monde réel, la nécessité oblige les expériences numériques qui ne sont pas toujours aussi fluides que nous le souhaiterions.

Catégories Economie