Share
L'un des changements les plus remarquables sur le Web en 2011 a été le déploiement de la nouvelle interface utilisateur de Google dans une gamme de produits. Dans cet article, je vais examiner le processus de réflexion qui sous-tend les décisions d’interface utilisateur de Google et déterminer ce que nous pouvons apprendre de leurs méthodes et principes..
La vignette par Alex Patrascu
La page d'accueil originale de Google…
… Le nouveau look mis à jour.
La mission de Google est d'organiser les informations du monde et de les rendre universellement accessibles et utiles..
Il est évident que le Web a radicalement changé depuis les débuts de Google. Les utilisateurs voient le Web d’une manière très différente de celle d’avant et le visualisent sur divers appareils. Google a apporté des changements pour refléter cela. Des modifications ont également été introduites pour unifier la vaste gamme de produits Google et les rassembler afin que l'utilisateur dispose d'une expérience fluide lors de la navigation entre les produits. Google explique:
Notre objectif est de vous offrir une expérience en ligne plus homogène et cohérente, quelle que soit l'application recherchée, quel que soit le produit Google utilisé ou le périphérique sur lequel vous l'utilisez..
La nouvelle expérience introduite par Google repose sur trois principes de conception fondamentaux. Jetons un coup d'oeil à ces.
L'idée ici est de permettre à l'utilisateur de se concentrer sur la tâche ou le travail qu'il souhaite effectuer rapidement et facilement. Ceci est réalisé en éliminant tout encombrement inutile et en mettant au premier plan les éléments et les outils importants. Ceci est également obtenu par de simples ajouts, tels que l'ajout de couleurs plus vives pour l'appel à des actions ou le masquage de certains éléments de navigation lorsqu'ils ne sont pas utilisés..
En utilisant ces méthodes, l'interface utilisateur de Google peut aider ses utilisateurs à se concentrer inconsciemment sur la tâche qu'ils tentent d'accomplir, soulageant ainsi la frustration de son expérience utilisateur..
L'un des changements les plus importants depuis le début de Google est la manière dont ses utilisateurs accèdent au Web. Nous n'utilisons plus les produits Google sur nos ordinateurs de bureau, nous les utilisons désormais sur divers appareils, des smartphones aux tablettes en passant par les écrans haute résolution et les téléviseurs. L’élasticité consiste à permettre aux utilisateurs de bénéficier d’une expérience visuelle homogène lors de la transition entre différents appareils..
Bien que les technologies utilisées par Google et ses produits soient assez complexes, ils ne veulent pas dépeindre cette complexité dans leur conception. 'Sans effort' consiste à garder un look simple, propre et cohérent.
La nouvelle image de marque de Google sera basée sur la confiance, la beauté, la pureté technologique et l'innovation - Larry Page
La nouvelle barre de Google, qui remplace l'ancienne barre noire horizontale située en haut de l'écran, est au cœur de la refonte de Google. Google s'est rendu compte que ce vieux bar occupait une place précieuse sur nos écrans (30px pour être précis), il a donc décidé de lui donner un nouveau look pour correspondre à ses nouveaux principes de conception..
La nouvelle barre de menus intègre le menu Google, ainsi que des outils de recherche et Google Plus. Il maintient la barre de recherche et la navigation identiques pour tous les produits et permet de basculer facilement entre les produits. Pour changer de produit, il vous suffit de survoler le logo Google et d'afficher un menu déroulant vous permettant de basculer "sans effort" entre Gmail, Docs, Cartes, YouTube et d'autres produits..
Eddie Kessler (responsable technique chez Google) explique
Unifiez, simplifiez et dites au revoir à l'ancienne barre de navigation!
Rendre la navigation et le partage extrêmement simples pour les internautes est un élément clé de nos efforts pour transformer l'expérience globale de Google. C'est pourquoi nous sommes ravis de cette refonte..
À gauche: Conception du logo Google + par Alex Alex Patrascu À droite: Affichage du menu et de l'interface de Google + Pour analyser chaque interface produit Google, ce serait un livre entier à part entière. C'est pourquoi, dans l'intérêt de cet article, j'ai choisi de mettre en avant quelques-uns des produits les plus populaires de Google..
La nouvelle version de Google a coïncidé avec l’un des projets Web les plus évoqués cette année; Google +. Google + a peut-être présenté certains de ses nouveaux principes de conception plus que tout autre produit Google. Après l’anticipation de sa sortie, si un produit quelconque devait attirer les utilisateurs vers Google, c’est le bon choix. Cela démontre admirablement leurs idéaux de conception et pendant des jours après mon arrivée, je me suis retrouvé fasciné par la simplicité de sa conception..
Le mérite en revient en partie à Andy Hertzfeld, membre de l’équipe UI / UX qui a travaillé sur Google Plus. Beaucoup de gens ont fait des comparaisons entre le style de Google et Apple, et cela pourrait être dû au fait qu'Andy avait déjà été employé par Apple dans les années 80 pour travailler sur le projet Macintosh. Une partie du rôle d'Andy dans ce projet consistait à travailler aux côtés de Joseph Smarr sur le concept des "cercles".
Andy explique l'idée derrière les cercles:
L'idée de catégoriser les gens, c'était assez évident. Il y avait ensuite l'idée de base de l'éditeur de cercle qui essayait de rendre cette activité amusante et engageante, quelque chose que vous voudriez faire parce que cela peut devenir fastidieux. Nous voulions donc récompenser l'utilisateur pour l'avoir fait, en mettant un sourire sur son visage et en essayant de le rendre si agréable qu'il continue à le faire..
Google Plus fait désormais partie intégrante de la stratégie globale de Google. On peut le trouver intégré à la majorité des produits de Google et son bouton Plus est même dans les résultats de recherche. Google nous a rendu extrêmement simple le partage de ce que nous trouvons dans nos résultats de recherche. Cela signifie que le terme "recherche sociale" est plus pertinent que jamais et je suis convaincu que la recherche va plus dans cette direction. Google soutient ceci en déclarant:
Google Social Search vous aide à découvrir un contenu pertinent à partir de vos relations sociales, un ensemble de vos amis et contacts en ligne. Le contenu de vos amis et connaissances est parfois plus pertinent et significatif pour vous que celui de toute personne aléatoire. Par exemple, une critique de film en ligne est utile, mais une critique de film de votre meilleur ami peut être encore meilleure.
Le nouveau look Gmail. Selon des informations parues dans CBS News, Gmail comptait 193,3 millions d'utilisateurs actifs en novembre 2010. Afin de garder ces utilisateurs à bord, Google a rationalisé l'expérience de Gmail conformément à ses principes de conception afin d'améliorer l'expérience utilisateur. Ils l'ont fait en apportant les modifications suivantes:
Les conversations dans Gmail ont été totalement repensées pour permettre une lecture plus facile lorsque vous parcourez des fils de discussion. Des images de profil ont été ajoutées à la conversation, ce qui permet à l'interface de vous aider à engager des conversations plus personnelles. Cela vous aide également lorsque vous essayez de savoir qui a dit quoi. En supprimant de nombreux éléments de l'interface utilisateur d'origine, ils ont permis à leurs utilisateurs de se concentrer sur la communication avec leurs collègues et amis..
La barre de navigation de gauche a été repensée et permet de la personnaliser. Vous pouvez modifier la taille de la zone de discussion pour qu'elle soit aussi grande ou petite que vous le souhaitez ou la masquer complètement en cliquant sur la petite icône située dans la partie inférieure gauche de la barre latérale. Comme avec tous les nouveaux produits, vous pouvez désormais naviguer à votre guise dans l'interface de Google en utilisant les touches de navigation ou les touches de direction, ce qui donne à l'utilisateur la liberté de naviguer de la manière qui lui convient le mieux..
Cette image met en évidence la nouvelle fonctionnalité de recherche améliorée de Gmails Le courrier électronique est un outil important pour tout utilisateur Web. À tel point que nous envoyons environ 294 milliards de courriels chaque jour entre nous. Il est impératif que nous puissions trouver tous les courriels que nous avons dispersés dans notre boîte de réception (je sais que j'en ai environ 10 000 ou plus). Google a fourni un coup de main qui surpasse la recherche standard précédente. Les utilisateurs peuvent désormais cliquer sur le menu déroulant de recherche, ce qui révèle un panneau de recherche avancée qui vous permet de créer un filtre à partir de n'importe quelle recherche en quelques clics..
Que vous aimiez ou non le nouveau look de Google, il ne fait aucun doute que cela a été un succès. Il a beaucoup été un sujet de conversation sur le web au cours des derniers mois et a gagné de nombreux fans. Une partie de son succès pourrait être liée à la manière dont Google a apporté les modifications. Au lieu de choisir de lancer tout le nouveau look en une fois, ils ont choisi de publier les modifications par étapes et généralement par produit. En choisissant cette méthode, ils ont été en mesure de recueillir les réactions des utilisateurs et de décider des décisions qui ont fonctionné et de celles qui doivent être réévaluées pour la phase suivante..
Le relâcher par étapes présente également d'autres avantages. En organisant les dates de publication de chaque phase de l'interface utilisateur sur plusieurs mois, Google est en mesure d'entourer ses modifications d'interface utilisateur avec beaucoup de battage médiatique. De la BBC au New York Times, tout le monde a écrit sur les modifications de Google, sans oublier les nombreux tweets et commentaires publiés sur différents sites à propos de ces modifications. Maintenant, cela ne peut certainement pas être mauvais pour les affaires!
En regardant les exemples de couleurs ci-dessus, nous pouvons constater que Google a limité sa palette de couleurs. Ils utilisent le bleu et le rouge pour souligner les caractéristiques importantes, qui sont toutes deux des variantes de couleur du logo Google original..
Illustrer quelques-uns des nouveaux boutons et icônes de Google Dans le cadre de sa nouvelle stratégie de conception, Google a introduit un nouvel ensemble de boutons dans toute la gamme. Ces boutons sont clairs, simples, concis et illustrent clairement le principe de "mise au point" de Google. Ils ont utilisé une combinaison de HTML5 et CSS3 pour les créer. Un choix qui peut surprendre tout le monde est que les boutons ne sont pas réellement des boutons, ni des balises d'ancrage, mais sont en fait créés à l'aide de divs avec un attribut de rôle défini sur "bouton". Ceci est utilisé pour indiquer qu'une balise générique joue le rôle d'un widget standard, comme dans ce cas un bouton. Ceci est utile pour les personnes pouvant accéder au site via un appareil tel qu'un lecteur d'écran..
Google a utilisé des dégradés CSS3 subtils pour donner plus de poids à ses boutons et leur a donné ce petit plus pop en ajoutant une ombre portée subtile au bas du bouton au survol. Les boutons sont généralement regroupés en 2 catégories «autonome» et «gauche, milieu, droite». Avec chaque catégorie ayant 2 tailles différentes 'standard' et 'large'. En optant pour ces 4 styles sur toute sa gamme, Google est en mesure de donner une expérience unifiée à ses utilisateurs..
L'attrait visuel est un facteur qui encourage une bonne expérience utilisateur dans n'importe quelle conception. Google a permis cela en permettant aux utilisateurs de personnaliser la densité d'écran sur certains produits. Cette option apparaît dans GMail, Reader, Docs et d'autres applications lourdes en texte. La densité d'affichage est divisée en trois préréglages. Confortable, confortable et compact, ces derniers s’adaptent en fonction de la densité d’affichage de votre ordinateur. Les requêtes multimédias étant déjà populaires, je suis certain que ce type d'options de densité d'écran commencera à apparaître sur un certain nombre d'autres produits Web..
Ayant étudié de manière approfondie les nouveaux principes d'interface utilisateur de Google au cours des six derniers mois, je peux vous dire ce que j'ai observé et appris de la stratégie mise en œuvre. En tant qu'une des plus grandes marques sur Internet; ils ont clairement compris (par-dessus tout) que la simplicité et une expérience unifiée sont essentielles.
La simplicité et une expérience unifiée sont la clé.
Cela m'a également appris à baisser l'intensité de nombreux éléments de l'interface utilisateur. L'ombre portée doit-elle vraiment être à 80% d'opacité? Peut-il être réduit un peu à peut-être 20 - 30%? En tant que concepteurs, nous voulons que les gens remarquent les efforts supplémentaires que nous avons consentis en ajoutant cette ombre portée ou cette surbrillance, et ont parfois tendance à trop les compenser en les faisant ressortir. Parfois, en le rendant plus subtil, nous pouvons obtenir un effet plus grand, plus lisse, agréable pour les yeux et qui se remarque tout autant. Le même principe peut être appliqué à des propriétés telles que le rayon de la bordure, essayez de les réduire de 5 à 10 pixels à 1, 2 ou 3 pixels. Bien sûr, ces traitements ne doivent pas être appliqués à tous les projets mais font certainement une différence lorsque vous optez pour un design "épuré"..
Nous pouvons également apprendre que le Web se trouve dans un endroit très différent de nos jours, comparé à ce qu’il était. Avec les nouvelles récentes selon lesquelles Internet Explorer mettra à jour automatiquement ses navigateurs, nous pouvons maintenant compter sur les dernières technologies Web pour fonctionner sur la majorité des navigateurs. Google en avait peut-être une idée, car aucune de leurs nouvelles conceptions de produit ne fonctionne dans les versions inférieures à Internet Explorer 8. Nous pouvons maintenant commencer à concevoir à notre guise, sans autant de limitations du navigateur. Nous devrions maintenant réaligner le temps gagné en création de compatibilité inter-appareils pour d'autres appareils et résolutions d'écran, pour offrir une expérience utilisateur ultime.
Que pensez-vous des modifications apportées à l'interface utilisateur de Google? Êtes-vous un fan ou trouvez-vous cela douloureux? J'aimerais entendre vos commentaires sur ce que vous pensez.
Accentsconagua