Critique spéciale de la conception Web Le nouveau Google+

Hier, Google a déployé une refonte massive de son réseau social, Google+. Ils ne se sont pas contentés de manipuler quelques objets, ils ont complètement redéfini toute l'expérience visuelle. Une telle actualisation mérite une édition spéciale de notre série de critiques sur la conception de sites Web.

Laissez les autres parler d’anciennes listes de fonctionnalités ennuyeuses, rejoignez-nous au moment où nous intervenons et jetons un coup d’œil pour voir ce qui est meilleur et ce qui est pire du point de vue du concepteur. Nous allons séparer chaque élément de l'interface et voir s'il y a quelque chose à apprendre.

Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.

Le vieux Google+

Avant de plonger dans le nouveau design, jetons un coup d'œil à la version originale de Google+, illustrée ci-dessous.

Comme vous pouvez le constater, c'est une expérience assez rare avec beaucoup d'espaces. La mise en page organise le contenu en trois colonnes avec une barre horizontale en haut pour la recherche, l'ajout de photos, l'affichage de vos cercles, etc. La mise en page ici rappelle en fait assez le design actuel de Facebook.

La sensation générale est propre et simple, mais aussi un peu froide et impersonnelle. Cela a rendu le site facile à prendre en main et à utiliser, mais n'a peut-être pas beaucoup aidé avec le concept de faire de la page votre propre hub personnel de communication.

Le nouveau Google+

Le nouveau Google+ réduit considérablement les espaces et les sentiments de clémence. En comparaison, l'interface semble chargée de fonctionnalités et de boutons. Ils ont conservé la forte personnalité blanche, mais l'ont complétée par une nuance de gris.

Cela peut sembler un changement anodin, mais il s’agit en fait d’une tentative très intentionnelle de créer une hiérarchie visuelle forte sur la page. Lorsque l'ancienne page était une mer de blanc avec une seule zone de gris en haut, cette page utilise ces deux couleurs pour distinguer clairement les portions de contenu principales et secondaires. Vos yeux vont flotter autour de la page, ce qui donnera une signification essentielle aux parties les plus claires de l'interface.

Disposition

La mise en page est beaucoup plus compliquée cette fois-ci. C'est une version modifiée de l'ancienne mise en page à trois colonnes avec un peu d'imbrication en place. Il y a toujours une section principale large flanquée de deux barres latérales étroites, mais cette section principale est maintenant divisée en deux sous-colonnes solides. Tout le contenu de la page a une position fixe, seule la zone de contenu principale défile.

Si nous supprimons tout et regardons les os de la page, nous voyons une structure filaire assez complexe.

L'un des changements conceptuels les plus significatifs est que l'ancienne présentation contenait vos différents cercles d'amis dans une bande verticale en bas à gauche et vos icônes de navigation dans le haut, tandis que la nouvelle disposition place la navigation dans une bande verticale d'icônes. sur le côté gauche et vos cercles dans une barre horizontale en haut.

Ce modèle de navigation basé sur des icônes de gauche est devenu extrêmement populaire dans la conception d’interface utilisateur Mac et nous commençons à le voir reflété dans les interfaces Web. L'un des principaux partisans de ce format était Twitter pour Mac (anciennement Tweetie), qui a engendré une foule d'interfaces similaires dans des applications telles que Reeder, Sparrow et Raven.

La nouvelle page Google+ contient du vocabulaire à apprendre. La bande sur le côté gauche est le "ruban". qui contient diverses? applications.? La zone de contenu principale est la carte? et la zone de sortie sous chaque message avec des commentaires, des +1, etc. est le "tiroir de l'activité".

Problèmes d'alignement

La nouvelle mise en page contribue grandement à faire de Google+ une application plus riche en fonctionnalités. Le contraste est ainsi mis à profit pour mettre en évidence les parties importantes de la page. Je n'ai pas vraiment de problème avec le schéma de disposition général, mais je ne peux pas m'empêcher de remarquer quelques problèmes d'alignement qui, à mon avis, nuisent à l'esthétique.

Pour commencer, la zone de contenu principale et le bouton Hangout sont à deux pixels de la fin de leur alignement parfait. Malheureusement, pour un nigaudeur comme moi, quelques pixels sont à un kilomètre. Il y a peu de bizarreries de conception qui m'ennuient plus rapidement que deux choses qui sont presque aligné. Pour en savoir plus sur ce sujet, consultez «Pourquoi est presque un mot sale dans la conception»?

L'effet est encore pire si vous prenez du recul et examinez les quatre éléments de cette zone. L’adresse électronique de l’utilisateur, la zone de contenu principale, la zone de bulle et la zone de notification font saillie à des longueurs aléatoires et ne semblent pas avoir de logique derrière leur placement.

Cet exemple n'est pas un incident isolé, il existe quelques autres cas où des objets juste manquer un alignement vertical ou horizontal. Découvrez comment le logo Google+ ci-dessous est décalé maladroitement par rapport à la forte ligne verticale établie par la navigation ci-dessous.

Icon Design: Plus loin que simple

Historiquement, Google a toujours été connu pour son manque de design. Chaque produit mis en place semblait être la solution la plus simple possible. L'image de marque de Google représentait un refus total de suivre le style visuel Web 2.0 brillant et criard en vogue au début des années 2000 au profit de laisser le contenu parler pour lui-même.

Ces dernières années, Google a commencé à s'éloigner lentement de ces idées, car ses produits présentent une complexité subtile mais de plus en plus complexe. Les icônes du nouveau Google+ illustrent parfaitement cette notion.

Notez que les formes abstraites simples et les couleurs unies ont cédé la place à une image plus cohérente d'une maison, qui contient des traits et des dégradés subtils.

Répétition des effets de survol

Pendant que nous parlons d’icônes, examinons rapidement certains aspects mineurs de l’interaction du site, notamment les effets de survol. Le thème général ici est que les icônes sont grises et contrastent très peu avec le fond. Ensuite, en vol stationnaire, l'icône devient tout en couleur. Vous pouvez voir ceci en action dans l'encadré:

La répétition est l’un de vos meilleurs outils en tant que concepteur et Google la maîtrise bien ici. Le même effet de gris en couleur est répété à plusieurs endroits sur la page.

Cependant, ils sont un peu incompatibles avec cet effet. Il y a quelques endroits où je pense qu'il aurait été approprié de continuer la répétition, mais ils ont choisi d'y aller avec un autre effet aléatoire. Dans l'exemple ci-dessous, les icônes se transforment en formes de boutons en survol.

Nouveau sidebar

À droite de la section de contenu principale, vous trouverez une nouvelle barre latérale avec diverses fonctionnalités conçues pour vous aider à tirer le meilleur parti de Google+. Notez que c’est un autre endroit où nous voyons la couleur lors du vol stationnaire.

Cette zone est très bien conçue avec chaque section clairement organisée et distincte. Il est intéressant de voir Google recueillir une idée sur Twitter sous la forme d'une liste de sujets d'actualité. Vous pouvez constater que les utilisateurs ont déjà adopté la syntaxe hashtag, un exemple fascinant de la façon dont nous transférons automatiquement nos comportements sur les réseaux sociaux, que les développeurs en tiennent compte ou non.

Il est toujours important d'anticiper et d'observer de près le comportement de votre base d'utilisateurs et de prendre en compte les actions qui semblent susciter leur intérêt plutôt que d'essayer de les modifier. Cela rendra votre plateforme beaucoup plus intuitive et facile à adopter.

Profil

Reprenant une page du nouveau carnet de notes chronologique de Facebook (et peut-être de Path), le nouveau profil Google+ permet non seulement une image d'avatar principale, mais également une? Image de couverture? (le même terme utilisé par Facebook) ainsi.

La partie qui marque une rupture notable avec Facebook est indéniablement l’immense image de profil, qui se trouve du côté droit au lieu du côté gauche. Ci-dessous, à la taille réelle, ces images s'affichent à 250px par 250px, ce qui n'est sûrement pas le double des photos de profil carré 125px de Facebook.

Une chose que je trouve intéressante est le fait que l'image de couverture se détache de la zone de contenu principale. J'apprécie généralement que les concepteurs réalisent intentionnellement un truc inattendu comme celui-ci, mais honnêtement, je le trouve assez distrayant ici. Dès qu'une page de profil se charge, mes yeux se posent directement sur le chevauchement gênant.

Quel est le verdict?

Le mois dernier, Google+ aurait franchi la barre des 100 millions d'utilisateurs actifs. Personne ne peut appeler cela un petit nombre, d'autant plus qu'Instagram vient de voler un milliard de dollars à Facebook pour sa plate-forme et à plus de 30 millions d'utilisateurs.

En outre, si vous considérez que Twitter ne compte que 140 millions d'utilisateurs actifs, il semble que Google+ cherche rapidement à occuper le deuxième créneau des médias sociaux. Cependant, cela ne suffit certainement pas pour rivaliser avec la base d'utilisateurs actifs de Facebook, qui se situe aux alentours de 800 millions.

Le nouveau design montre que Google n'a pas l'intention d'abandonner ce projet comme il en a eu tant d'autres par le passé. Ils tentent sans aucun doute de créer une expérience plus agréable pour vous attirer et vous faire revenir. La question est, ça va marcher?

Pour répondre à cette question, nous devons spéculer sur ce qui empêche les gens d’adopter Google+. La réponse évidente est que Google+ se sent un peu redondant lorsque vous avez déjà un compte Facebook, à plus forte raison si vous êtes actif sur Facebook et Twitter. Une autre possibilité est que, même si l'ancien Google+ n'était certainement pas laid, il se sentait peut-être un peu stérile et dépourvu de personnalité.

Objectifs possibles derrière la nouvelle conception

À partir de là, nous pouvons nous attendre à au moins deux objectifs possibles derrière la nouvelle conception. La première serait de différencier davantage Google+ des autres réseaux sociaux. Essayer de prétendre qu'ils sont simplement meilleurs que Facebook à son propre jeu n'est pas la meilleure option, les employés de Google doivent établir une pierre angulaire conceptuelle clairement unique pour expliquer pourquoi les internautes devraient se rendre sur leur site. Par exemple, Twitter a fait un excellent travail en évitant de reproduire les fonctionnalités de Facebook et de ne pas se positionner comme une alternative, mais comme un produit distinct.

Le deuxième objectif serait de réduire la stérilité et de commencer à transformer Google+ en un lieu convivial et accueillant, facile à naviguer et même amusant à utiliser.

Ont-ils atteint ces objectifs?

Si nous analysons la conception en fonction de ces objectifs, nous pourrons mieux évaluer si cela a été un succès ou non. Cet exercice nous donne des arguments clairs sur lesquels nous pouvons nous comparer plutôt que de poignarder aveuglément dans le noir pour tenter de trouver ce qui fonctionne et ce qui ne fonctionne pas.

En ce qui concerne le premier objectif, Google a progressé dans certains domaines et s’est peut-être légèrement replié dans d’autres. Globalement, la nouvelle mise en page est un saut beaucoup plus éloigné de Facebook que l'ancien. En un coup d'œil, un utilisateur fidèle de l'un ou de l'autre ne confondrait jamais l'un avec l'autre, ce qui est une bonne chose.

De plus, de petites touches telles que le placement des filtres circulaires le long du haut et le maintien de la visibilité des lieux de rencontre garantissent que les quelques innovations de Google sont à l'avant-plan. Ces progrès contrastent avec d’autres domaines, tels que la nouvelle image de couverture, qui donne réellement l’impression au réseau social. plus comme un clone de Facebook, pas moins. J'aurais aimé les voir montrer une pensée unique dans ce domaine plutôt que de simplement emprunter le nouveau format de Facebook.

Le deuxième objectif semble certainement avoir été une préoccupation majeure dans la mise à jour de la conception. Le nouveau Google+ crée un environnement plus invitant.Bien qu’il soit peut-être sur le point d’être encombré, en particulier par rapport à l’ancienne version, il donne l’impression que ce service est plus robuste et comprend tout ce qui se passe sur votre page d’accueil.

On insiste beaucoup plus sur les visages. Cela commence par votre nouvelle grande image de profil et continue jusqu'à la page d'accueil. Vous y trouverez une grande barre latérale de discussion remplie de visages sympathiques, en plus de suggestions pour les personnes que vous connaissez peut-être et les utilisateurs que vous pourriez aimer. Google veut que vous vous fassiez des amis, que vous soyez suffisamment entraîné dans l'expérience et que vous le manquiez une fois parti. Plus d'amis signifie plus d'interactions, ce qui signifie plus de raisons de revenir.

Qu'est-ce que tu penses?

Google+ m'a semblé sortir de la scène au cours des derniers mois. Cependant, cette perception était apparemment erronée car, en réalité, ils gravissaient les palmarès de manière discrète mais régulière avec un nombre impressionnant d'utilisateurs quotidiens actifs. Quoi qu’il en soit, même s’ils commençaient à prendre de l’importance dans l’intérêt du public, le nouveau design était parfaitement programmé pour que le Web tout entier en parle à nouveau. Même si c’était la seule raison derrière cette actualisation, cela porterait probablement ses fruits.

Cependant, comme je l'ai expliqué ci-dessus, je pense que des objectifs plus profonds étaient à l'œuvre ici. Maintenant que vous avez lu mes pensées, il est temps de vous lancer dans la conversation. Quels objectifs Google essayait-il d'atteindre avec le nouveau design? Ont-ils effectivement retiré ces intentions?

En outre, Google+ est-il finalement condamné à suivre le même chemin que Wave, Buzz et autres tentatives sociales infructueuses, ou va-t-il poursuivre sa croissance régulière et devenir l'un des réseaux sociaux les plus importants du Web?