Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est Okay Geek, un blog de technologie délicieusement geek que nous avons déjà vu sur Design Shack. Faisons un saut et voyons ce que nous pensons du nouveau design!
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.
À propos de okay geek
«Okay Geek est un blog qui écrit sur des sujets que nos rédacteurs trouvent intéressants. Nous ne fournissons notre contenu qu'à quiconque. Et bien que cela puisse sembler un peu étrange, nous le faisons dans l’espoir de créer un contenu qui exprime vraiment notre plaisir et permet aux lecteurs de nous raconter ce que nous écrivons.
Clients de retour
Une note rapide égoïste. Si vous vous demandez si un Design Shack Design Critique en vaut la peine, vous n'avez pas besoin de chercher plus loin que nos clients fidèles tels que Okay Geek. Plusieurs sites ont non seulement pris en compte nos conseils, mais ont également implémenté nombre des modifications suggérées et sont revenus pour une autre critique. Si vous avez des doutes sur votre conception, envoyez-nous un message et organisez une critique dès aujourd'hui.
Maintenant sur la critique, voici une capture d'écran de la page d'accueil de Okay Geek:
Première impression
Dans notre précédente critique de Okay Geek, nous les avons complétés par un site très net et net qui mettait bien en valeur le contenu tout en restant presque vide. Il semble que les concepteurs aient décidé de pousser cette idée encore plus loin en minimisant réellement la conception et en supprimant toutes les parties inutiles. Le résultat est une expérience extrêmement simplifiée qui en fait une excellente expérience de navigation.
Je félicite les designers pour leur travail et je pense vraiment qu'ils ont fait du bon travail ici. Comme toujours, je suis plein de suggestions sur la façon de le rendre encore meilleur. Regardons de plus près et voyons ce que c'est.
La navigation
L'un de mes plus gros problèmes avec la refonte est la zone de navigation. Strictement d'un point de vue esthétique, c'est génial. Il existe un attrait minimal agréable qui complète bien le site. Toutefois, du point de vue de la convivialité, les résultats ne sont pas aussi élevés. Les différents liens sont divisés en deux sections différentes dans l'en-tête:
La première section est bien faite et prend tout son sens: critiques, éditoriaux, contacts, à propos de nous. La seconde cependant est une bande d’icônes qui contrôle le contenu de la barre latérale dans une sorte de méthode à onglets. En fait, j'aime bien ce qu'ils font ici et je pense qu'ils ont vraiment créé une barre latérale polyvalente, mais j'ai quelques problèmes avec les icônes.
Encore une fois, même s'ils ont l'air superbes, ils sont plutôt vagues. Par exemple, l'étoile, qui est un symbole Web universel permettant de faire de quelque chose un favori, est en réalité un lien vers le "Main". section de la barre latérale. Les sujets? Cette section est également source de confusion, car elle est représentée par quatre carrés (ce qui n’a de sens que si vous cliquez dessus). Les titres apparaissent en survol, mais jusque-là, vous ne savez vraiment pas à quoi servent ces icônes.
Trouver ton chemin
Dans un blog technique comme celui-ci, qui couvre un large éventail de sujets, il est important que les utilisateurs puissent trouver rapidement le créneau qui les intéresse. Test, si vous mettez quelqu'un devant ce site pour la première fois et dire, "Trouver les articles de jeu," il leur faudrait probablement plus de dix secondes pour trouver les "sujets"? section, qui les mène ensuite au jeu.
Je ne sais pas trop comment procéder, mais je recommanderais sans hésiter de réfléchir aux moyens de faciliter l'accès des utilisateurs au contenu qu'ils souhaitent voir. Honnêtement, cela pourrait être aussi simple que de rendre le texte visible sous les icônes tout le temps.
Contenu en vedette
Comme tout bon site de nouvelles, il existe plusieurs emplacements de contenu en vedette qui permettent de mettre en évidence des articles dépassant ce qui apparaît dans le fil de page d'accueil principal. Celles-ci ont vraiment fière allure et, tout comme la navigation, apparaissent en haut à gauche et dans la barre latérale à droite.
Répétition
En les regardant, je vois un de mes outils de conception préférés au travail: la répétition. L'étiquetage de chaque section présente une cohérence très simple mais simple. Cependant, ceci est un exemple parfait de la façon dont la répétition peut être une bête délicate et peut même induire l'utilisateur en erreur. Considérez le graphique suivant, qui montre trois en-têtes de la page systématiquement conçus:
Les deux premiers servent d’en-têtes de section. Ils sont assis au-dessus du contenu et servent simplement d'étiquette pour ce qui est en dessous d'eux. Ce ne sont pas des liens, seulement des aides visuelles. Cela donne à votre cerveau le sentiment que ce sera le cas pour tous les objets similaires que vous verrez sur le site. Cependant, le troisième vous lance une balle courbe.
Cette étiquette est placée au-dessus d'un espace vide, ce qui la rend immédiatement confuse quant à son référencement. Rappelez-vous que les deux autres en-têtes nous ont déjà appris que ce ne sont pas des liens, nous devons donc en conclure? More Awesome Stuff? doit encore être ajouté. Cependant, il s'avère que cet en-tête n'est en fait pas du tout un lien, mais un lien vers une page différente.
Répétition Sélective
La leçon de conception simple ici est que la répétition doit être manipulée avec soin. Lorsque vous répétez un style ou un élément de conception visuel, veillez à ce que les éléments partagent un objectif et des fonctionnalités communs. Sinon, vous définissez un archétype attendu que vous cassez ensuite, ce qui réduit la convivialité via la répétition au lieu de l'améliorer.
Je vois ce même problème se poser à au moins un autre endroit sur le site dans le cas de l’icône étoile susmentionnée. Il est utilisé dans la barre latérale simplement pour indiquer le? Main? onglet et est répété dans les aperçus de publication pour indiquer que la publication est "Contenu exclusif exclusif". Encore une fois, la répétition supprime la signification de l'icône car elle est utilisée à deux fins très différentes.
Articles et aperçus
Outre la répétition d'icône que j'ai indiquée ci-dessus, j'aime beaucoup le nouveau format de prévisualisation de publication. Les belles images de grande taille vous attirent et toutes les informations sur le poste dont vous avez besoin sont clairement représentées de manière très organisée.
Je remarque aussi que le vieux vague? Save? bouton a été changé en? Save on Instapaper? bouton par ma suggestion. Points bonus pour la mise en œuvre des modifications suggérées! Je pense que cela rend infiniment plus clair ce qui se passe avec ce bouton.
De même, lorsque vous cliquez et suivez une publication spécifique, nous voyons quelques exemples supplémentaires de travaux de conception vraiment attractifs. La fin d'un message est l'endroit où les gens placent traditionnellement beaucoup de contenu varié comme le partage, des articles similaires et des commentaires. Cette zone peut rapidement devenir un désordre encombré mais j'aime la façon dont elle a été gérée ici. Les trois sections sont clairement distinctes, mais visuellement similaires, et s’harmonisent parfaitement avec le thème général du site.
Vous savez qu'un concepteur est bon lorsqu'il passe beaucoup de temps à mettre au point les petites choses parfaitement et je pense que cette section est un exemple clair de l'excellence des concepteurs dans ce projet.
À propos de nous
La dernière section qui, à mon avis, mérite une certaine attention est la page À propos de nous. Lorsque la page a été chargée pour la première fois, j'ai été stupéfaite par son attrait. C'est un design vraiment sympa qui diffère grandement du reste du site tout en restant 100% marque.
Conclusion
Les gars de Okay Geek m'ont vraiment encouragé à jeter un coup d'œil sur le site et à leur donner les deux barils quand j'ai remarqué tout ce qui devait être traité. Cela indique une volonté claire de rendre le site aussi bon que possible pour les utilisateurs.
La critique est l’une des tâches les plus difficiles à laquelle vous ferez face en tant que designer. Nous nous investissons tellement dans nos projets qu'une critique se sent comme une attaque personnelle. Lorsque nous pouvons nous éloigner de cette réponse émotionnelle et évaluer les commentaires de manière logique, nous devenons de meilleurs concepteurs et nos projets s'améliorent de manière exponentielle.
Comme je l'ai répété tout au long de la critique, ce site est magnifique du point de vue de la conception visuelle. Les domaines que j'ai suggéré d'améliorer sont tous étroitement liés à la convivialité et à l'amélioration de l'expérience utilisateur. Ce sont des choses qu'il est facile de négliger lorsque nous avons trop longtemps regardé un projet. Je suis sûr que l'équipe examinera et abordera nombre de ces problèmes et continuera à faire d'Okay Geek un endroit vraiment formidable pour s'informer des derniers développements dans le monde de la technologie.
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.