Aujourd'hui, nous examinerons les pratiques de conception Web et les tendances du plus grand nom de logiciel pour savoir si nous pouvons en apprendre davantage sur certaines erreurs à éviter dans notre propre travail.
N'hésitez pas à commenter pour être d'accord ou en désaccord avec les suggestions ci-dessous. En tant que designers professionnels, vos idées sont précieuses et j'attends vos pensées avec impatience.
Le coup de gueule occasionnel
À tous ceux qui détestent les articles remplis de diatribes, je m'excuse pour ce message qui est parfois un peu dur. Je préfère généralement faire l'éloge d'un bon design plutôt que de le critiquer, mais lorsque David Appleyard et moi avons décidé de publier un article sur les tendances en matière de design de Microsoft, il me semblait qu'il y avait beaucoup plus à apprendre sur les choses désordonnées, laides et / ou déconseillées qui ils font que l'alternative.
Pour vous couper la parole dans les commentaires, je ne citerai ni ne ferai une comparaison avec Apple dans l'analyse ci-dessous. Cela ne veut pas du tout être un argument PC contre Mac, mais plutôt un regard sur ce que nous croyons être de véritables mauvaises pratiques en matière de conception et de développement Web. En toute justice, Microsoft est une entreprise extrêmement performante et n’échoue pas à cause de l’un de ces problèmes. En fait, comme nous le soulignons ci-dessous, Microsoft semble vraiment avoir des concepteurs stellaires dans l'équipe de certains sites, nous suggérons simplement qu'un niveau de contrôle de la qualité plus élevé soit mis en place à tous les niveaux.
Dans cet esprit, analysons quelques endroits où Microsoft semble manquer à ses pratiques de conception et de développement et comment tirer parti de ces connaissances.
# 1 Méfiez-vous de mandater certains plugins
Si nous avons appris quelque chose des récents affrontements entre Apple et Adobe, c'est que la création de sites entièrement dépendants de plugins tiers fermés peut éventuellement conduire à un retour de flamme sérieux. Microsoft semble répéter cette même erreur alors que son propre réseau de sites devient de plus en plus dépendant de Silverlight.
Alors que je parcourais les différents sites de Microsoft qui préparaient cet article, Windows m'a constamment harcelé, m'informant que je n'avais pas installé Silverlight et que je ne pouvais donc pas voir la page Web de la manière dont elle était censée être visionnée. Ma question est, pourquoi aller dans cette voie? Surtout lorsqu'il s'agit de simples diaporamas et animations pouvant être réalisés avec des technologies plus répandues. Certes, Microsoft possède Silverlight et il est donc judicieux pour eux de sauvegarder leur investissement, mais cela ne veut pas dire que c'est le meilleur choix pour vous de suivre le mouvement.
Que vous soyez un grand fan de Silverlight ou non, mon conseil est d’être extrêmement prudent lorsque vous basez les fonctionnalités de votre site sur cette technologie ou une technologie similaire. Alors que le débat sur le point de savoir s'il est judicieux de développer des sites avec Flash continue de chauffer, les systèmes de deuxième ligne tels que Silverlight deviennent encore plus un pari. Autant que possible, respectez le code et les outils compatibles avec tous les navigateurs et qui ne nécessitent aucun travail ou installation supplémentaire de la part de vos visiteurs.
# 2 Surveillez votre résolution
C’est l’une de mes plus grosses plaintes à propos de Microsoft simplement parce que cela ressemble à une conception négligée. Il existe sans aucun doute une ligne de démarcation fine entre réduire la taille de votre fichier afin d'accroître la convivialité et garder vos images nettes et nettes, mais je ne peux m'empêcher de penser que Microsoft semble être plus enclin à afficher des fichiers JPG laids et déchiquetés que les autres. site professionnel que j'ai vu ces dernières années.
Le nombre toujours croissant d’utilisateurs d’Internet par accès commuté continue de pousser de plus en plus les tailles d’images acceptables. Cela ne signifie nullement que vous ne devez pas prendre un soin particulier pour rendre tout aussi petit que ce qui est raisonnable, mais au moment où cela commence à peser si lourdement sur le design qu'il réduit considérablement la qualité apparente du site, les images deviennent auto-destructrices!
Vous vivez l'ironie si vous utilisez des images pour améliorer l'apparence de votre site tout en réduisant votre attrait esthétique. Lorsque cela est possible, prévisualisez vos images traitées sur différents moniteurs et soyez particulièrement attentif au niveau de distorsion et d'artefact que vous jugez acceptable.
# 3 Organisé Clutter
Parfois, vous pouvez suivre toutes les règles de conception évidentes tout en obtenant quelque chose qui semble visuellement inférieur. En parcourant les sites de Microsoft, je suis tombé sur d'innombrables zones, comme celle ci-dessous, qui semblaient encombrées malgré leurs tentatives d'organisation par colonnes.
Donc quel est le problème? En termes simples, une tonne se passe dans un espace relativement petit ici. Même s’ils ont bien essayé d’arranger le contenu et d’améliorer la lisibilité visuelle à l’aide d’icônes, le résultat final reste assez déséquilibré.
Si vous regardez de près ce qui se passe ici, vous avez l’impression de quatre colonnes d’informations conçues par quatre personnes différentes qui ont été entassées. Le côté gauche semble très chargé en images par rapport au droit, la couleur du texte est un peu sporadique, le contenu est maladroitement décalé et les colonnes manquent de suffisamment de souffle pour les faire ressembler aux zones indépendantes qu’elles sont.
La leçon à tirer ici est de ne pas surcharger une seule partie de votre page avec des informations disparates. Il est indéniable que la situation exige souvent beaucoup de contenu, mais l'organisation doit être gérée de manière cohérente et attrayante, comme le montrent les beaux exemples ci-dessous (provenant de sites autres que Microsoft).
# 4 Incohérence
À partir de Microsoft.com, ouvrez les menus déroulants gargantuesques et choisissez une zone du site à visiter. Quel que soit le lien sur lequel vous cliquez, la page résultante sera très différente de la page d'accueil et différente de la plupart des autres liens disponibles dans la même liste déroulante.
Explorer le site Microsoft, c'est comme tourner une roue de roulette.Vous ne savez pratiquement pas où vous allez atterrir et à quoi vous attendre de la page suivante. Certaines pages présentent des arrière-plans swooshy, d’autres utilisent des dégradés progressifs ou même des cercles explosifs. La plupart des pages semblent préférer le bleu mais pas nécessairement le même bleu et de nombreuses pages ignorent totalement la tendance bleue.
Le fait est que, que votre site ait deux pages ou deux cents, la cohérence est essentielle. Les internautes se sentent plus à l'aise lorsqu'ils peuvent se familiariser avec le fonctionnement et la présentation d'un site en quelques secondes. Leur donner quelque chose de radicalement différent toutes les quelques pages rend la navigation plus confuse et moins efficace.
En plus de cela, il y a l'idée que créer une marque forte et cohérente est tout simplement une bonne affaire car cela aide les clients à communiquer avec votre entreprise de manière plus personnelle. Certes, Microsoft jongle avec de nombreuses marques et microsites différents qui proviennent tous de la page d’accueil, mais même parmi ce que l’on pourrait considérer comme les pages centrales de Microsoft.com, les thèmes et les méthodes de navigation semblent radicalement variés.
# 5 Design axé sur les cliparts
Cette suggestion est évidemment un peu absurde, vu que les images clipart et Microsoft Office ont toujours été inextricablement liées. Cependant, la conception des icônes a parcouru un long chemin depuis 1995 et il est temps d'abandonner ce style spécifique dans les images que vous utilisez.
Les exemples d'art ci-dessus tirés de diverses pages Microsoft me font simplement grincer des dents, en particulier cet horrible? Développeur débutant? logo. Je ne sais pas du tout pourquoi un boomerang attaque une plante ou si le moniteur d'ordinateur en vol stationnaire facilite l'attaque ou fuit les lieux. Tout ce que je sais, c'est que la communication visuelle est un gâchis indéchiffrable.
C’est l’une des principales raisons pour lesquelles les galeries CSS, comme la nôtre, existent. Vous ne pouvez donc pas voler le design des autres, mais vous pouvez aussi avoir un aperçu de l’état du design au cours de la décennie au cours de laquelle vous évoluez. Parcourir ces galeries, c’est comme visiter des magasins de vêtements populaires au centre commercial pour montrer à votre tante folle que elle n'a pas à s'habiller comme quelqu'un du Sunny and Cher.
Sentez-vous toujours libre de dépasser les limites et d'aller au-delà des tendances actuelles en commençant par les vôtres. Soyez juste prudent de rester obstinément stagnant pendant des années pendant que le reste du monde avance.
# 6 Texte en débordement mal aligné
Les colonnes de texte constamment cassées qui débordent de toute évidence sont une autre tendance difficile à manquer sur les sites de Microsoft.
Celui-ci est assez facile à réparer et ne nécessite en réalité qu'un peu d'effort et d'attention. Assurez-vous simplement de tirer parti des outils gratuits tels que le laboratoire de navigation d'Adobe pour vous assurer que vos mises en page ne se cassent pas lorsqu'elles sont affichées sur les principaux navigateurs.
Bien que la mise en forme CSS soit certes un sujet délicat en matière de cohérence entre navigateurs, de petites erreurs comme celle-ci gâchent réellement la qualité de votre site et valent le temps de dépannage qu'elles prennent à résoudre.
# 7 Mauvais alignement
Parfois, une page donnée me posait le défi de décider quel design pouvait être signalé. Par exemple, sur la page ci-dessous, j'avais initialement envisagé de choisir l'utilisation d'une petite capture d'écran qui ne s'agrandissait pas lorsque vous cliquez dessus, mais plus je regardais la page, plus j'étais confus quant à ce qui se passait. la disposition.
Si vous connaissez bien la théorie de la conception de base, vous savez qu'apprendre à mettre en œuvre des alignements solides et cohérents est la clé d'une bonne mise en page. Le mélange étrange des alignements visuels gauche, central et droit qui se produisent sur le site ci-dessus, associé à l'espace vide délicat situé près du sommet, crée un flux visuel vraiment étrange des informations présentées.
De plus, si vous visitez la page ci-dessus, vous constaterez que le contenu dans son ensemble semble vouloir être centré, mais qu’il est vraiment éjecté par la bande située au centre, ce qui donne à la page une apparence tout à fait à droite du centre.
# 8 Annonce Clutter
Les blogs de design gratuits comme celui-ci doivent contenir de nombreuses annonces. C’est tout simplement notre façon de gagner de l’argent et de continuer à vous fournir du contenu. Toutefois, si vous exploitez un site professionnel, vous devez examiner attentivement si vous souhaitez nuire à votre message et à votre professionnalisme en matière de publicité.
Les pages de Microsoft.com sont jonchées de diverses publicités qui réduisent vraiment l’esthétique de la page sur laquelle elles se trouvent. Parfois, ces annonces pointent directement vers d'autres pages Microsoft, parfois vers d'autres sociétés ou partenaires. Il n’ya rien de mal à ce concept de diriger le trafic vers d’autres parties de votre site, mais la façon dont vous y parvenez peut faire une énorme différence.
S'il y a une chose que la plupart des internautes ont appris à détecter, à ignorer et éventuellement à renvoyer, c'est une bannière publicitaire. Cela ne veut pas dire que ce type de publicité ne fonctionne pas avec un ciblage et une conception appropriés, ni même dire que les utilisateurs de Microsoft ne cliquent pas dessus, mais je me demande s’il n’existe pas de meilleur moyen.
Si Microsoft souhaite diriger le trafic sur ses téléphones mobiles et d'autres projets, la solution de facilité consiste à configurer un système de publicité encombré et non standard (en termes de conception) qui s'étend sur l'ensemble de son site. Cependant, il semble que l'intégration de ce contenu dans le site lui-même aurait un taux de clics beaucoup plus élevé, car davantage d'utilisateurs prendraient note du message et ne seraient pas obligés d'enfreindre les règles internalisées permettant d'éviter à tout prix les bannières publicitaires.
De plus, une telle intégration forcerait les conceptions à être plus cohérentes, car elles sont créées comme une seule unité plutôt que par des équipes séparées. Encore une fois, c’est un scénario dans lequel je peux comprendre la rentabilité de l’approche de Microsoft, tout en vous mettant en garde de ne pas suivre leur exemple.Il est peu probable que les sites que vous concevez ne rivalisent pas avec le méga-réseau des sites Microsoft et se prêtent donc plutôt à une conception solide et intégrée, ce qui vous permet d'éviter l'encombrement visuel des annonces excessives.
De toute évidence, il existe de nombreux types de sites où cela ne s'applique pas du tout, car la publicité devrait être présente. Assurez-vous simplement de déterminer si votre site doit être dédié à la vente de votre produit ou service, ou nécessite des revenus supplémentaires et la distraction de la publicité.
# 9 Un manque de salle de respiration
En conception graphique, les concepteurs configurent chaque page avec une "zone dynamique". Il s'agit généralement d'un encadré rectangulaire à partir de la bordure de la page qui définit la zone dans laquelle vous pouvez placer du contenu en toute sécurité pour éviter les coupures de page ou les encombrements de bords. La plupart des concepteurs Web le font intuitivement, car il est assez évident que vous ne voulez pas que votre contenu soit trop encombré contre le côté du navigateur.
Cependant, comme le montre la capture d'écran ci-dessus, il existe quelques pages Microsoft qui ne semblent pas mettre en réserve de telles opinions. Au lieu de cela, le contenu commence dès que la page le fait avec zéro remplissage horizontal ou marge (au moins sur les navigateurs avec lesquels j'ai vérifié).
Le panneau de navigation n’a pas l’impression d’être intégré au bord de la page, mais plutôt d’être coupé (encore une fois, c’est peut-être parce que je n’ai pas d’Internet Explorer). La leçon à tirer est simple: soyez toujours conscient du bord de la fenêtre du navigateur. À moins que vous ne respectiez la règle d'un effet de purge visuel évident, placez votre contenu, en particulier les portions et les liens interactifs, dans une marge de sécurité afin que les utilisateurs ne se sentent pas encombrés lorsqu'ils essaient de l'utiliser.
Si vous regardez de près la capture d'écran ci-dessus, vous verrez d'autres exemples de concepteurs de Microsoft qui ne considèrent tout simplement pas si leur texte sera correctement diffusé sur tous les principaux navigateurs. C’est une tendance amusante pour Microsoft, de nombreux concepteurs Web passant de nombreuses années à tenter de créer des aménagements spéciaux pour Internet Explorer de Microsoft. Toutefois, cette entreprise de plusieurs milliards de dollars ne se gênera pas pour rendre la pareille en vérifiant son travail sur d’autres systèmes.
# 10 Ne pas tirer parti de votre talent
Bien que de nombreux commentaires négatifs aient été formulés à propos des concepteurs de sites Web chez Microsoft, j'ai été agréablement surpris de voir qu’ils comptent en fait un certain nombre de sites et de pages qui semblent tout simplement incroyables.
Les exemples ci-dessus ne sont que deux des nombreux endroits sur lesquels Microsoft, selon moi, a vraiment réussi à faire sortir le parc de son agencement, de ses choix de couleurs, de ses graphiques et de la compatibilité entre navigateurs. Cela me dit que quelque part dans le vaste bassin de bureaux de cette société, il y a des personnes très talentueuses capables de la sortir complètement de son marasme.
Ces concepteurs, quels qu’ils soient, devraient être promus à des postes leur permettant de coopérer ensemble et d’établir des normes cohérentes auxquelles tous les concepteurs Web de Microsoft seraient contraints de se conformer. À la place d'un labyrinthe de contenus déconnectés, ils pourraient créer un réseau fortement lié de sites magnifiques appartenant clairement à la même famille.
La dernière suggestion que je vous présente est de trouver ces types de personnes exceptionnelles dans votre propre entreprise et de leur donner une voix. Plutôt que de déplorer le manque de talent des autres membres de votre équipe, nommez les meilleurs concepteurs et développeurs aux postes où ils peuvent influer sur chaque élément de communication visuelle associé à une marque donnée.
Pour ce faire, vous pouvez créer des directives claires, cohérentes et strictes concernant la marque, qui sont distribuées à chaque concepteur et développeur pour chaque marque distincte avec laquelle vous travaillez.
Pensées de clôture
En résumé, bien que Microsoft possède plusieurs concepteurs Web extrêmement talentueux, le travail de ces personnes est presque complètement éclipsé par la quantité de contenu qui ne répond même pas aux normes que nous attendions des concepteurs et développeurs débutants .
Heureusement, nous pouvons utiliser des sociétés comme Microsoft comme supports pédagogiques pour illustrer clairement qu’il existe en fait une mauvaise façon de faire les choses. N'imaginez jamais que, simplement parce que vous êtes un pigiste solitaire ou une petite entreprise de design, vous ne pouvez pas surpasser complètement les méga-entreprises et les firmes de design en ce qui concerne la qualité du travail que vous produisez.
J'ai constaté qu'il est souvent plus facile de trouver des exemples de concepteurs de qualité dans les bureaux à domicile du monde entier que de rester assis à la table des grandes entreprises. Rassurez-vous, vous n'avez pas à coordonner et à contrôler la qualité de centaines de concepteurs. Faites de votre mieux pour créer certains des meilleurs sites Web avec la petite quantité de ressources que vous possédez et une grande quantité de motivation personnelle pour créer des conceptions fonctionnelles et esthétiques.