Critique de conception Web # 43: Les abdominaux au travail
Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
La critique d'aujourd'hui est Abdominals at Work, un site Web d'application iPhone.
Explorez les ressources de conception
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 34 $ pour critiquer votre conception - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de l'application Abdominals at Work
«Méthode passive des contractions isométriques. Si vous passez beaucoup de temps devant un ordinateur ou un téléviseur, vous pouvez utiliser cette méthode pour travailler vos muscles abdominaux pendant que vous effectuez d'autres tâches. Vous choisissez l'heure et le lieu, et l'application vous apprendra à faire l'exercice, en marquant votre rythme et l'intensité par vibration ou mélodie de manière discrète. »
Voici une capture d'écran de la page d'accueil:
Première impression
Mes premières réflexions sur cette page étaient assez positives. J'aime l'aspect général du site et la façon dont il reflète étroitement celui de l'application. Une scène de ciel nuageux ne me suggère certainement pas de faire de l'exercice, mais l'application consiste en quelque sorte à faire de l'exercice de manière relaxante, donc je suppose que tout est bien lié.
Les couleurs et les graphismes sont assez sympathiques et créent un environnement accueillant. Mon aspect préféré est la simplicité du contenu global: juste un iPhone avec des captures d'écran, une brève description, quelques façons de partager et un lien important vers l'iTunes Store où vous pouvez en savoir plus et télécharger l'application. C'est juste assez pour vous intéresser sans vous submerger.
Bien que j'aime la direction générale de l'application, comme toujours, j'ai de nombreuses suggestions d'amélioration. Décomposons certains domaines spécifiques pour voir quels changements positifs pourraient être apportés.
Du son
Tous ceux qui nous ont déjà soumis une demande de critique de conception pour un site contenant du son reçoivent les mêmes conseils. Je préfère toujours que les développeurs de sites donnent aux visiteurs la possibilité d'ajouter du son au lieu de le retirer. La navigation sur le Web est une expérience généralement calme et les bruits soudains et forts ne mettront pas vos visiteurs en colère.
Ce site fait certes beaucoup mieux que la plupart dans ce domaine. Bien que le son commence automatiquement, c'est au moins un thème océanique assez serein et relaxant avec des oiseaux et des vagues. Vous pouvez également désactiver le son en cliquant sur l'image de l'oiseau qui gazouille en bas de la page.
J'ai plusieurs réflexions à ce sujet. Tout d'abord, j'ai dû faire défiler pour le trouver (même si je suis certes sur un petit écran de MacBook). Si quelqu'un visite votre site au travail, dans une bibliothèque ou tout autre lieu public, vous ne voulez pas qu'il doive se bousculer car il essaie de trouver embarrassant un moyen de le désactiver. Vous pourriez penser que l'utilisateur vient d'appuyer sur son bouton de sourdine, mais le plus souvent, il fermera probablement la fenêtre le plus rapidement possible.
De plus, je peux certainement voir comment l'oiseau avec des notes de musique qui en sort suggère un contrôle du son, mais il ressemble étrangement à un lien d'oiseau Twitter comme nous le voyons maintenant sur presque tous les sites sur le Web. Cela ne rend pas immédiatement évident que l'oiseau est le contrôle du son car il n'y a pas de texte pour renforcer le message.
Le conseil simple ici est que, si vous vous en tenez à la lecture audio automatique, placez le contrôle en haut de la page et clarifiez ce qu'il fait. Je suggère un graphique de mouette (l'oiseau Twitter ne correspond pas au thème de l'océan) et un message "son activé / désactivé" près de l'oiseau. De plus, arrêtez l'animation des notes de musique lorsque le site est mis en sourdine et recommencez lorsque le son est activé plutôt que de continuer tout le temps.
Animation
En plus du son, la page a plusieurs nuages flottants qui dérivent devant et derrière le contenu. Cela ajoute un peu de plaisir à la page et est certes plus intéressant que les graphiques statiques.
Pour la plupart, les nuages n'entravent pas la convivialité, mais ils interfèrent parfois avec la lisibilité du texte. De plus, comme pour toute animation en boucle, ils peuvent devenir un peu monotones si vous passez autant de temps que moi à regarder le site! Une idée solide que nous avons vue sur notre ToonyTuts Critique était un simple système de contrôle à deux icônes pour arrêter la musique et / ou les nuages animés. Le thème du site était très similaire au site d'aujourd'hui, donc je pense qu'un contrôle similaire fonctionnerait parfaitement ici.
Messagerie et texte
Je pense que le site fait du bon travail en indiquant très clairement que nous discutons des exercices abdominaux. Cependant, cela pourrait être un peu technique pour une page aussi amusante. Considérez le titre principal «Méthode passive de contraction isométrique». C'est beau et haut, mais il n'a pas vraiment de bague amicale, n'est-ce pas?
Vous n'êtes pas obligé d'abandonner ce message, mais envisagez peut-être de l'intégrer dans le paragraphe en faveur d'un titre plus intéressant, comme «Créez un pack de six pendant que vous regardez la télévision!» Ce n'est en aucun cas le meilleur exemple, mais il est au cœur de ma suggestion. Un titre comme celui-ci vous attire et vous donne envie d'en savoir plus plutôt que de vous éteindre parce que vous vous sentez stupide et n'avez pas votre Thésaurus à portée de main.
Le plus gros problème que j'ai avec la page entière est peut-être le texte jaune sur le fond bleu. Ces deux couleurs s'affrontent beaucoup sur le petit texte et rendent cette information très difficile à lire.
Le problème est le conflit classique contre le complément dans la théorie des couleurs. Lorsque deux couleurs ne sont tout simplement pas assez différentes, elles ont tendance à entrer en conflit l'une avec l'autre, surtout lorsqu'une est placée au-dessus de l'autre. Considérez l'exemple ci-dessous et à quel point le texte jaune plus clair et moins saturé est plus lisible que la version qui le précède.
Maintenant, je me rends compte que ce sont en fait les couleurs de votre application, il n'est donc pas logique de les changer sur le site. Ma suggestion est donc de simplement supprimer l'accent jaune sur le texte et d'utiliser autre chose, du texte en gras, un soulignement, etc., qui n'interfère pas avec la lisibilité.
iPhone
Le graphique iPhone avec le diaporama est extrêmement populaire pour les sites Web d'applications iPhone, et pour une bonne raison. Il permet de comprendre instantanément en quoi consiste le site. Cependant, je pense que cela pourrait être affiné un peu.
Pour commencer, les petits points qui servent de navigation au diaporama ont un cercle de chargement tournant à côté d'eux. Cette petite animation ne s'arrête jamais, alors à quoi sert-elle? Quand je le vois tourner, cela suggère que le chargement de la page n'est pas terminé (on nous a appris que c'est ce que ce graphique signifie) et quand il ne termine jamais le chargement, il donne l'impression que votre site est cassé. En fin de compte, ce graphique est distrayant, déroutant et ne sert à rien, supprimez-le.
En outre, comme un petit ennui, le geek d'Apple en moi ne peut s'empêcher de remarquer que l'image de l'iPhone est obsolète. L'iPhone 5 est presque sur nous et ce site n'a pas encore de graphique de l'iPhone 4. Je sais, c'est ridicule de devoir continuer, mais comme le site est en fait pour une application iPhone, cela peut être important. Le fait d'avoir des images obsolètes donne l'impression que l'application elle-même est ancienne et obsolète, ce qui me fait réfléchir à deux fois avant de l'acheter!
La navigation
Une dernière réflexion sur le site est que la navigation semble vraiment être une réflexion après coup. Il contient des liens qui modifient le contenu textuel de la page avec des informations pertinentes pour les visiteurs, mais pour une raison quelconque, il est minuscule et caché dans le pied de page.
Si c'était vraiment quelque chose de mineur, cela ne me dérangerait pas, mais cela semble en fait plus important que ce que le designer lui a accordé. La solution simple est de le jeter à l'emplacement typique tout en haut de la page et d'agrandir un peu le texte.
À ton tour!
Maintenant que vous avez lu mes commentaires, lancez-vous et aidez-moi en donnant au designer quelques conseils supplémentaires. Faites-nous savoir ce que vous pensez de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons également d'être respectueux envers le concepteur du site et d'offrir des conseils constructifs clairs, sans insultes.
