Catégories
Astuces et Design

4 leçons que les concepteurs d'applications Web peuvent apprendre de Google – Smashing Magazine

A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant en tant que rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

Il y a une raison pour laquelle Google domine la part de marché pour des éléments tels que les moteurs de recherche, les navigateurs Web, les clients de messagerie et les services de stockage dans le cloud. Il sait exactement ce que veulent les consommateurs et a conçu des solutions simples, intuitives et utiles pour eux. S'il existe une entreprise dont vous devriez mettre en miroir les fonctionnalités du produit, c'est bien Google.

Chaque fois que je me demande ce que nous pourrions faire de plus pour améliorer l'expérience de nos utilisateurs, je me tourne d'abord vers Google. Plus précisément, je vais sur le site Google Developers ou Think with Google pour récupérer les dernières données consommateurs.

Mais je pensais aujourd'hui, "Pourquoi ne copions-nous pas simplement ce que fait Google?"

Après tout, Google a marcher la promenade. Sinon, comment convaincre quelqu'un d'adhérer à ses recommandations et directives en matière de SEO et UX?

Le seul problème est que les sites et les applications de Google ne sont pas très attractifs. Ils sont pratiques et intuitifs, c'est certain. Mais les designs valent-ils la peine d'être imités? Eh.

Cela n’a pas vraiment d’importance. Les principes de base pour créer une bonne application Web existent sur chacune de ses plates-formes. Donc, si nous recherchons une réponse définitive sur ce qui offrira la meilleure expérience aux utilisateurs SaaS, je pense que nous devons commencer par disséquer les plates-formes de Google.

Ce que Google nous apprend sur la bonne conception d'applications Web

Ce sur quoi nous voulons nous concentrer, ce sont les composants qui rendent les produits Google si faciles à utiliser encore et encore. En répliquant ces fonctionnalités dans votre propre application, vous réduirez efficacement (voire supprimerez complètement) les frictions auxquelles vos utilisateurs seraient autrement confrontés.

1.Faites en sorte que la première chose qu'ils voient leur priorité absolue

Lorsque les utilisateurs entrent dans votre tableau de bord, la dernière chose que vous voulez, c'est qu'ils soient submergés. Leur impression immédiate chaque fois qu'ils entrent dans votre application ou reviennent au tableau de bord devrait être:

"Je suis exactement là où je dois être."

Ne pas:

"Mais qu'est ce qu'il se passe ici? Où puis-je trouver X? »

Maintenant, en fonction de l'objectif de votre application, il y a généralement une ou deux choses qui préoccupent le plus vos utilisateurs.

Supposons que vous ayez une application comme Google Traduction qui a un objectif utilitaire clair. Il n'y a absolument aucune excuse pour encombrer la page principale. Ils sont venus ici pour faire une chose:

Outil de traduction Google Translate
Les utilisateurs de Google Traduction n'ont pas à chercher l'outil de traduction. (Source: Google Translate) (Grand aperçu)

Alors, ne perdez pas leur temps. Placez l'outil au premier plan et au centre et laissez toutes les autres pages, paramètres ou avis apparaître en tant que fonctionnalités secondaires de l'application.

Un autre élément que cet exemple nous apprend est la manière dont vous devez configurer votre outil pour les utilisateurs. Google pourrait facilement laisser cela ouvert, mais il est par défaut:

Langue par défaut -> anglais

Les données de Google montrent probablement qu'il s'agit de la manière la plus courante d'utiliser cette application par les utilisateurs.

Bien que vous ne puissiez pas le voir dans l'application de bureau, vous pouvez le voir sur mobile. La formule va comme ceci:

Langue par défaut -> Langue récente

Je soupçonne que, pour les nouveaux utilisateurs, Google définira la traduction dans la langue maternelle de l'utilisateur (comme indiqué dans ses paramètres utilisateur Google).

Si vous disposez des données, utilisez-les pour configurer les valeurs par défaut qui réduisent également le nombre d'étapes que vos utilisateurs doivent effectuer.

Toutes les applications Web ne fournissent pas aux utilisateurs un outil pratique pour résoudre un problème. Dans certains cas, les applications permettent aux utilisateurs de rationaliser et d'automatiser des processus complexes, ce qui signifie que leur principale préoccupation sera la performance de ces processus.

Pour cela, nous pouvons examiner un produit comme Google Search Console, qui connecte les utilisateurs à des données sur les performances de leurs sites dans la recherche Google ainsi qu'à des informations sur les problèmes qui pourraient les retenir.

Il n’est donc pas surprenant que la première chose qu’ils voient en entrant est la suivante:

Présentation de Google Search Console - Statistiques sur les performances et la couverture
La page de présentation de Google Search Console affiche les statistiques des utilisateurs sur les performances et la couverture. (Source: Google Search Console) (Grand aperçu)

Les performances (le nombre de clics dans la recherche Google) et la couverture (nombre de pages indexées sans erreur) sont au-dessus du pli. En dessous, vous trouverez un autre graphique qui présente les améliorations recommandées pour améliorer les principales fonctionnalités Web Vitals, la convivialité mobile et la visibilité du champ de recherche des liens annexes.

Bottom line: La page de présentation n'est pas jonchée de graphiques illustrant chaque point de données collecté par Google Search Console. Au lieu de cela, il affiche uniquement les principales priorités afin que les utilisateurs puissent avoir une vue d'ensemble de ce qui se passe et ne pas se perdre dans les données dont ils n'ont pas besoin à ce moment-là.

2. Créez une navigation utile et simple là où cela est pertinent

Celui-ci semble être une évidence, mais je vais vous montrer pourquoi j'en parle.

Zoom est une excellente application de visioconférence. Il n'y a pas à contester cela. Cependant, lorsque les utilisateurs souhaitent planifier une réunion à partir de leur navigateur, voici ce qu'ils voient:

Zoomez sur l'application Web du navigateur avec plusieurs menus au choix
L'application Web Zoom complique les choses avec plusieurs menus. (Source: Zoom) (Grand aperçu)

Les options «Rejoindre la réunion» et «Organiser la réunion» conviennent, car elles finissent toutes les deux par pousser l'utilisateur dans l'application de bureau. Cependant, l'expérience du navigateur "Planifier une réunion" n'est pas excellente, car elle laisse les barres de navigation du site Web en place, ce qui ne fait que distraire la barre latérale de l'application sur la gauche.

Une fois que vos utilisateurs ont créé une connexion et ont accès à votre application, ils n'ont plus besoin de voir votre site. Abandonnez la navigation sur le site Web et laissez-les être submergés dans l'application.

Ou faites comme Google Hangouts. Disposez votre application de la manière dont les utilisateurs s'attendent à ce qu'une application soit présentée:

  • Navigation principale le long du côté gauche,
  • Le bouton de menu Hamburger et / ou le bouton Plus (…) contiennent la navigation secondaire,
  • Grand espace ouvert pour que les utilisateurs puissent jouer dans l'application.
Interface sans distraction de Google Hangouts et navigation simple
Un aperçu de Google Hangouts, de son interface et de sa navigation sans distraction. (Source: Google Hangouts) (Grand aperçu)

Mais Google Hangouts ne supprime pas complètement le site Web google.com. Pour les utilisateurs qui souhaitent accéder rapidement à l'un des autres produits de Google, ils peuvent utiliser l'icône en forme de grille dans le coin supérieur droit. Ainsi, si vous estimez qu'il est nécessaire que vos utilisateurs puissent à nouveau visiter votre site Web, vous pouvez l'intégrer à l'application de cette façon.

Cet exemple montre également à quel point il est important de garder votre navigation aussi simple que possible.

La navigation principale de Google Hangouts utilise des symboles pour représenter chacun des onglets / options de l'application:

Conception de la navigation principale de Google Hangouts - icônes uniquement
Google Hangouts utilise des icônes pour représenter les onglets de sa navigation principale. (Source: Google Hangouts) (Grand aperçu)

Bien que je pense que Google Hangouts puisse s'en tirer avec cette conception de menu contenant uniquement des icônes, soyez prudent avec cette approche. À moins que les icônes ne soient universellement comprises (comme le menu hamburger, la loupe de recherche ou le signe plus), vous ne pouvez pas risquer d'introduire des icônes qui créent plus de confusion.

Comme le souligne NNG, il y a une différence entre une icône reconnaissable et sa signification indiscutable.

Ainsi, une façon de contourner ce problème est de donner l'apparence extérieure de l'icône de menu uniquement. Mais au survol, les étiquettes apparaissent afin que les utilisateurs aient un contexte supplémentaire pour ce que chacun signifie.

Comme pour toute navigation secondaire dont vous pourriez avoir besoin – y compris une navigation Paramètres – vous pouvez écrire les étiquettes car elles n'apparaîtront que lors de l'activation de l'utilisateur.

Conception de navigation secondaire de Google Hangouts - icônes et étiquettes
La navigation secondaire de Google Hangouts utilise une icône et une étiquette pour chaque onglet. (Source: Google Hangouts) (Grand aperçu)

Bien que certaines icônes soient assez faciles à identifier, toutes ne seraient pas immédiatement reconnaissables (comme «Invites» et «Hangouts Dialer»). Si même un onglet de votre navigation secondaire est rarement vu dans d'autres applications, épelez-les tous.

Une dernière chose: les lignes de séparation de ce menu sont un excellent choix. Plutôt que de regrouper 10 onglets / options dans cette barre de navigation, ils sont regroupés de manière logique, ce qui permet aux utilisateurs de trouver plus facilement ce qu'ils recherchent.

3. Fournir aux utilisateurs une fonctionnalité de recherche prédictive

Chaque application doit avoir une barre de recherche. Il peut être là pour aider les utilisateurs à parcourir le contenu, à trouver le contact qu'ils recherchent dans une longue liste ou à poser une question sur quelque chose dans l'application.

Plus votre application est complexe, plus la recherche interne jouera un rôle critique. Mais si vous souhaitez améliorer encore plus l'expérience de recherche de vos utilisateurs, vous souhaiterez alimenter la vôtre avec une fonctionnalité de recherche prédictive.

Même si je suis sûr que vous avez une ligne d'assistance, peut-être un chatbot et peut-être une FAQ ou une base de connaissances pour aider les utilisateurs à trouver ce dont ils ont besoin, une barre de recherche intelligente peut les connecter à ce qu'ils recherchent vraiment (même s'ils ne le font pas) savoir comment l’articuler).

Google a intégré cette fonctionnalité de recherche dans la plupart de ses produits.

Vous connaissez la saisie semi-automatique dans le moteur de recherche Google lui-même. Mais voici quelques autres cas d'utilisation des fonctionnalités de recherche intelligente.

Google Drive connecte les utilisateurs aux documents (de tous types – Docs, Sheets, Slides, etc.) ainsi qu'aux collaborateurs qui correspondent à la requête de recherche.

Recherche Google Drive pour "vitesse"
Un exemple de recherche de «vitesse» dans Google Drive. (Source: Google Drive) (Grand aperçu)

Les utilisateurs peuvent bien sûr être redirigés vers une page de résultats de recherche complète. Cependant, la barre de recherche elle-même prédit quel contenu est le plus pertinent pour la requête. Dans ce cas, ce sont les éléments de contenu les plus récents que j'ai écrits et qui incluent le terme "vitesse" dans le titre.

Google Maps est un cas d'utilisation intéressant car il extrait des données d'une variété de sources connectées (Google) pour essayer de prédire ce que recherchent ses utilisateurs.

Exemple de recherche prédictive Google Maps 'Alicia'
Google Maps s'appuie sur diverses sources pour prédire où les utilisateurs souhaitent se rendre. (Source: Google Maps) (Grand aperçu)

Dans cet exemple, j'ai tapé «Alicia». Maintenant, Google Maps me connaît assez bien, donc le premier résultat est en fait l'adresse d'un de mes contacts. Les résultats restants concernent les adresses ou les entreprises situées dans un rayon de 45 milles contenant le mot «Alicia».

Il ne s’agit pas seulement de tirer de là. C'est l'un de ces cas où plus vous rendez l'expérience intégrée à l'application, plus vos utilisateurs interagiront avec elle, ce qui signifie plus de données.

Par exemple, voici ce que je vois lorsque je recherche "Trois":

Google Maps affiche un emplacement "favori" lorsqu'un utilisateur recherche "trois"
Google Maps fournira les emplacements "Favoris" dans les résultats de recherche, le cas échéant. (Source: Google Maps) (Grand aperçu)

La toute première chose qu'il arrête est un restaurant appelé Three Sisters (qui est un restaurant fantastique dans la ville de Providence, au fait). Si vous regardez juste au-dessus du centre de la carte où se trouve le cœur rouge, c'est le restaurant. Cela signifie que je l'ai ajouté à mes adresses favorites et que Google Maps l'appelle comme tel dans mes résultats de recherche.

Imaginez à quel point vos utilisateurs aimeraient davantage votre application s'il n'était pas toujours difficile d'accéder au contenu, aux données ou à la page qu'ils recherchaient. Ou pour effectuer une action souhaitée. Lorsque vous donnez à vos utilisateurs la possibilité de personnaliser leur expérience de cette manière, utilisez les informations qu'ils vous ont fournies pour améliorer également leur expérience de recherche.

4. Permettre aux utilisateurs de modifier la conception et la disposition de l'application

En tant que concepteur, vous pouvez faire de votre mieux pour concevoir une expérience formidable pour vos utilisateurs. Mais regardons les choses en face:

Vous n’allez jamais plaire à tout le monde.

Contrairement à un site Web, cependant, qui est à peu près ce que vous voyez est ce que vous obtenez, les utilisateurs SaaS ont la possibilité de modifier la conception et la mise en page de ce avec quoi ils interagissent, si vous les laissez. Et tu devrais.

Cela peut s'appliquer de différentes manières à l'application que vous avez créée.

Google Agenda, par exemple, propose une tonne d'options de personnalisation.

Google Agenda - afficher les personnalisations
Google Agenda permet aux utilisateurs de personnaliser l'apparence et l'affichage de leurs agendas. (Source: Google Calendar) (Grand aperçu)

À l'extrême gauche se trouve une liste de «Mes calendriers». Les utilisateurs peuvent cliquer sur les calendriers et les événements associés qu'ils souhaitent voir dans l'application.

Dans le coin inférieur droit se trouve une pointe de flèche. Cela permet aux utilisateurs de masquer le panneau latéral des applications Google et de leur donner plus d'espace pour se concentrer sur les événements et les rendez-vous à venir.

En haut à droite, les utilisateurs disposent de deux emplacements où ils peuvent personnaliser leur calendrier:

  • La barre de paramètres leur permet d'ajuster la couleur et la densité du calendrier.
  • La liste déroulante «Mois» leur permet d'ajuster la quantité de calendrier affichée à la fois.

Ces personnalisations seraient toutes utiles pour tout type d'application de gestion de projet, de planification ou de prise de rendez-vous.

Pour les autres applications, je vous recommande de consulter Gmail. Il regorge de personnalisations que vous pouvez adapter à votre application.

Auparavant, si les utilisateurs cliquaient sur le widget Paramètres, cela les déplaçait hors de l'application et dans le panneau de paramètres dédié. Pour être honnête, c'était ennuyeux, surtout si vous vouliez juste faire un petit ajustement.

Panneau Paramètres Gmail - Options de personnalisation de la conception et de la mise en page
Les paramètres de Gmail affichent une liste d'options de personnalisation de la conception et de la mise en page. (Source: Gmail) (Grand aperçu)

Maintenant, le bouton Paramètres ouvre ce panneau dans Gmail. Il permet aux utilisateurs d'ajuster des choses comme:

  • Interligne,
  • Thème d'arrière-plan,
  • Priorités de tri de la boîte de réception,
  • Disposition du volet de lecture,
  • Affichage de la conversation activé / désactivé.

Il s'agit d'une mise à jour récente des paramètres de Gmail, ce qui signifie probablement que ce sont les personnalisations de conception les plus couramment utilisées par ses utilisateurs.

Pour toutes les personnalisations que les utilisateurs souhaitent apporter qu'ils ne trouvent pas dans ce nouveau panneau, ils peuvent cliquer sur "Afficher tous les paramètres" et personnaliser davantage la conception et la mise en page de l'application (entre autres).

Les autres personnalisations que vous pourriez trouver utiles en activant dans votre application sont:

  • Contrôle du clavier,
  • Mode sombre,
  • Mode daltonien,
  • Redimensionnement du texte,
  • Basculement entre la vue liste / grille,
  • Masquage de widgets et de bannières,
  • Colonnes affichées.

Non seulement ces contrôles de conception et de mise en page permettent aux utilisateurs de créer une interface qu'ils aiment regarder et qui fonctionne mieux pour leurs besoins, mais ils peuvent également contribuer à l'accessibilité.

Emballer

Il y a une raison pour laquelle Google domine la part de marché avec bon nombre de ses produits. Il obtient l'expérience utilisateur. Bien sûr, cela est dû en grande partie au fait qu'elle a accès à plus de données utilisateur que la plupart des entreprises.

Et même si nous devrions concevoir des solutions pour nos publics spécifiques, il est indéniable que les produits de Google peuvent nous aider à établir une base vraiment solide pour n'importe quel public, si nous prêtons simplement attention aux tendances sur ses plates-formes.

Lectures complémentaires sur SmashingMag:

Éditorial fracassant(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *