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.
La critique d'aujourd'hui est Abdominals at Work, un site Web d'application pour iPhone.
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, ce qui est nettement moins que ce que vous paieriez pour qu'un consultant examine votre site! Vous pouvez en savoir plus ici.
À propos de l'application Abdominals at Work
Méthode passive de contractions isométriques. Si vous passez beaucoup de temps devant un ordinateur ou la télévision, vous pouvez utiliser cette méthode pour faire travailler vos muscles abdominaux pendant que vous effectuez d'autres tâches. Vous choisissez l’heure et le lieu, et l’application vous apprendra comment 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 pensées initiales sur cette page étaient plutôt positives. J'aime l'aspect général du site et la manière dont il reflète étroitement celui de l'application. Une scène de ciel nuageux ne me suggère certainement pas d’exercer de l’exercice, mais l’application consiste en quelque sorte à s’exercer de manière relaxante, donc je suppose que tout est lié.
Les couleurs et les graphiques sont assez sympathiques et créent un environnement accueillant. Mon aspect préféré est la simplicité avec laquelle le contenu global a été conservé: juste un iPhone avec quelques captures d'écran, une brève description, des façons de partager et un lien bien visible vers le magasin iTunes 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écrivons quelques 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 le même conseil. Je préfère toujours que les développeurs de sites donnent aux visiteurs la possibilité d'ajouter un son au lieu de le supprimer. La navigation sur le Web est une expérience généralement silencieuse et les bruits soudains ne feront que rendre vos visiteurs fâchés.
Certes, ce site fait beaucoup mieux que la plupart dans ce domaine. Bien que le son commence automatiquement, il s'agit au moins d'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 gazouillant au bas de la page.
J'ai plusieurs pensées à ce sujet. Tout d'abord, je devais faire défiler pour le trouver (même si je suis certes sur un petit écran de MacBook). Si une personne visite votre site au travail, dans une bibliothèque ou dans tout autre lieu public, vous ne voudrez pas qu’elle se démène pour essayer de trouver un moyen de la désactiver. On pourrait penser que l'utilisateur appuie simplement sur le bouton muet, mais le plus souvent, il fermera probablement la fenêtre le plus rapidement possible.
De plus, je peux vraiment voir comment l'oiseau avec les notes de musique qui en sortent suggère un contrôle du son, mais il ressemble malheureusement à un lien avec un oiseau Twitter, comme nous le voyons maintenant sur à peu près tous les sites du Web. Cela fait qu'il n'est 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 est que, si vous souhaitez conserver la lecture automatique, placez la commande vers le haut de la page et expliquez-la plus clairement. Je suggère un graphique de mouette (l'oiseau Twitter ne correspond pas au thème de l'océan) et un "son activé / désactivé". message près de l'oiseau. En outre, arrêtez l'animation de la note de musique lorsque le site est en mode sourdine et commencez lorsque le son est activé plutôt que de continuer tout le temps.
Animation
Outre le son, la page comporte plusieurs nuages flottants qui défilent devant et derrière le contenu. Cela ajoute un peu d'amusement à la page et est certes plus intéressant que les graphiques statiques.
Pour la plupart, les nuages n'empêchent pas la facilité d'utilisation, mais ils interfèrent parfois avec la lisibilité du texte. En outre, comme avec toute animation en boucle, ils peuvent devenir un peu monotones si vous passez autant de temps que j'ai à regarder le site! Une idée solide que nous avons vue sur notre ToonyTuts Critique était un système de contrôle simple à 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 actuel, je pense donc 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 d'exercices abdominaux. Cependant, il se peut que ce soit un peu technique pour une page aussi amusante. Considérez le titre principal «Méthode passive de contraction isométrique». C'est beau et noble, mais ça n'a pas vraiment de bague amicale, n'est-ce pas?
Vous n'avez pas à abandonner ce message, mais envisagez peut-être de l'intégrer au paragraphe en faveur d'un titre plus intéressant, par exemple «Construisez un pack de six pendant que vous regardez la télévision! Ce n’est certes pas le meilleur exemple, mais c’est au cœur de ma suggestion. Un titre comme celui-ci vous attire et vous incite à en apprendre davantage plutôt que de vous dissuader parce que vous vous sentez stupide et que vous n'avez pas votre thésaurus à portée de main.
Le plus gros problème que j'ai avec toute la page est peut-être le texte jaune sur le fond bleu. Ces deux couleurs se heurtent beaucoup sur le petit texte et rendent cette information très difficile à lire.
Le problème est le conflit classique vs 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, en particulier lorsqu'elles sont superposées.Considérez l'exemple ci-dessous et voyez combien le texte jaune, plus léger et moins saturé, est plus lisible que la version qui le précède.
Maintenant, je réalise 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 mis en jaune sur le texte et d’utiliser quelque chose d’autre, un texte en gras, un soulignement, etc., qui ne gêne pas la lisibilité.
iPhone
Le graphique de l'iPhone avec le diaporama est extrêmement populaire pour les sites Web d'applications iPhone, et pour cause. Cela rend instantanément clair le contenu du site. Cependant, je pense que cela pourrait être affiné un peu.
Pour commencer, les petits points qui servent à la navigation dans les diaporamas sont entourés d'un cercle de chargement en rotation. Cette petite animation ne s'arrête jamais, alors à quoi sert-elle? Quand je le vois tourner, cela indique que le chargement de la page n'est pas terminé (on nous a appris que c'est ce que ce graphique signifie) et quand jamais termine le chargement, cela donne l’impression que votre site est cassé. En bout de ligne, ce graphique est gênant, déroutant et ne sert à rien, supprimez-le.
En outre, 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 toujours pas de graphique de l'iPhone 4. Je sais, il est ridicule de devoir suivre ce sujet, mais comme le site est en fait pour une application iPhone, cela peut être important. Avec des images obsolètes, l'application elle-même se sent vieille et obsolète, ce qui me fait réfléchir à deux fois avant de l'acheter!
La navigation
Une dernière pensée 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, ils sont minuscules et cachés dans le pied de page.
Si cela était vraiment quelque chose de mineur, cela ne me dérangerait pas, mais cela semble en réalité plus important que ce que le designer lui a attribué. La solution simple consiste à le placer à l'emplacement habituel tout en haut de la page et à agrandir un peu le texte.
À 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.