Fermer

août 12, 2020

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


À propos de l'auteur

Suzanne Scacca est une ancienne réalisatrice, formatrice et directrice d'agence de WordPress qui travaille maintenant comme rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca

Il y a une raison pour laquelle Google domine la part de marché pour des choses comme 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 suis curieux de savoir 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 sur les consommateurs.

Mais je pensais aujourd'hui, "Pourquoi ne copions-nous pas simplement ce que Google fait?" [19659006] Après tout, Google a pour marcher. Sinon, comment pourrait-il convaincre quiconque de se conformer à ses recommandations et directives en matière de SEO et d'UX?

Le seul problème est que les sites et applications de Google ne sont pas très attrayants. 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 que nous Je souhaite vous concentrer sur 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 de la première chose qu'ils voient leur priorité absolue

Lorsque les utilisateurs accèdent à 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 retournent au tableau de bord devrait être:

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

Pas:

«Quoi diable se passe ici? Où puis-je trouver X? »

Maintenant, selon le but de votre application, il y a généralement une ou deux choses qui préoccuperont le plus vos utilisateurs.

Let's disons que vous avez une application comme Google Translate 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 de Google Traduction
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 à l'avant-plan et au centre et laissez toutes les autres pages, paramètres ou avis apparaître comme fonctionnalités secondaires de l'application.

Un autre élément que cet exemple nous apprend est de savoir comment configurer votre outil pour les utilisateurs. Google pourrait facilement laisser cette option ouverte, mais la valeur par défaut est:

Langue par défaut -> Anglais

Les données de Google montrent probablement que c'est la façon la plus courante d'utiliser cette application par les utilisateurs. [19659006] Bien que vous ne puissiez pas le voir dans l'application de bureau, vous pouvez le voir sur mobile. La formule est la suivante:

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 leur Google paramètres utilisateur).

Si vous disposez des données, utilisez-les pour configurer les paramètres 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 regarder 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 y entrant est la suivante: [19659032] Présentation de Google Search Console – Statistiques de performances et de 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 fonctionnalités essentielles de Web Vitals, la convivialité pour mobile et la visibilité de la boîte de recherche des liens annexes.

En résumé: la page 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 n'affiche que 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 des données dont ils n'ont pas besoin à ce moment-là.

2. Créez une navigation utile et simple partout 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:

 Application Web Zoom dans le 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 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 sert qu'à distraire la barre latérale de l'application sur la gauche.

Une fois que vos utilisateurs ont créé un identifiant 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 sur le 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 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. Donc, si vous pensez 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 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 qu'il est normal que Google Hangouts s'en tire avec cette conception de menu à icônes uniquement, 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 un 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 lors du 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 libellés
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, elles ne seraient pas toutes immédiatement reconnaissables (comme "Invites" et «Hangouts Dialer»). Si même un onglet dans 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 elle est critique rôle que la recherche interne va jouer. Mais si vous voulez améliorer encore plus l'expérience de recherche de vos utilisateurs, vous voudrez 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 savent pas comment l'articuler).

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

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

Google Drive connecte les utilisateurs à des 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 pour "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 qui incluent le terme «vitesse» dans le titre.

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

 Exemple de recherche prédictive de Google Maps 'Alicia'
Google Maps tire parti de diverses sources pour prédire où les utilisateurs veulent 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 miles contenant le mot «Alicia».

Cela ne se limite pas à cela. 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, c'est ce que je vois lorsque je recherche "Trois" :

 Google Maps affiche un emplacement «favori» lorsqu'un utilisateur recherche «trois»
Google Maps fournira des 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 trouve 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 votre application si ce n'était pas toujours difficile d'y accéder. le contenu, les données ou la page recherchés. 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 avouons-le:

Vous n’allez jamais plaire à tout le monde.

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

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 Calendrier - personnalisations d'affichage
Google Agenda permet aux utilisateurs de personnaliser l'apparence et l'affichage de leurs calendriers. (Source: Google Agenda ) ( Grand aperçu )

À l'extrême gauche se trouve une liste de «Mes agendas». 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 permet pour 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 de gestion de projet, planification ou l'application de prise de rendez-vous.

Pour d'autres applications, je vous recommande de consulter Gmail . Il regorge de personnalisations que vous pourriez 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 apporter une petite modification.

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

Désormais, le bouton Paramètres ouvre ce panneau dans Gmail. Il permet aux utilisateurs d'ajuster des éléments tels que:

  • 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é.

Ceci est une version récente mettre à jour les 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 veulent faire qu'ils ne peuvent pas trouver dans ce nouveau panneau, ils peuvent cliquer sur "Afficher tous les paramètres" et personnalisez encore plus la conception et la disposition de l'application (entre autres).

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

  • Contrôle du clavier,
  • Mode sombre,
  • Couleur- mode aveugle,
  • Redimensionnement du texte,
  • Basculement entre l'affichage de la liste et de la grille,
  • Masquage du widget et de la bannière,
  • Colonnes affichées. aiment regarder et cela fonctionne mieux pour leurs besoins, cela peut également aider avec cessibilité.

    Conclusion

    Il y a une raison pour laquelle Google domine sa part de marché avec 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 à définir une base pour n'importe quel public – si nous prêtons juste attention aux tendances sur ses plates-formes.

    Lectures complémentaires sur SmashingMag:

     Smashing Editorial (ra, yk, il)




Source link