Cela permet d’offrir une idée générale et tout de même assez précise d’un projet. Un seul document pour expliquer un bonne partie de la fondation. Simple et efficace

Voir le moodboard en format original sur Flickr

Qu’est-ce qu’un moodboard? Wikipédia l’explique très bien:

A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines, for example:

Source: http://en.wikipedia.org/wiki/Mood_board

La prochaine fois que vous me présenté un petit projet, voici surement l’un des documents sur lequel nous baserons beaucoup de nos discussions!

Le design est une discipline visant à rendre concret (sous une forme physique ou non) une pensée, un concept ou une intention en tenant compte éventuellement d’une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives. – fr.wikipedia.org/wiki/Design

On s’entends donc que le design est autant fonctionnel que visuel? Parfait! Alors, dites-moi, lorsqu’un produit est dans la phase d’analyse et de réflexion (qu’il soit en pixels ou en béton), comment est-il possible de sous-contracter le design lorsque justement, il doit être au coeur de ce processus?

Pour ma part, j’ai trop souvent expérimenté cette situation. Lorsqu’une entreprise désirait posséder une stratégie web, commençant souvent par un site web (qui selon moi, devrais ne devrais pas être la première brique), je recevais la proposition finale la plupart du temps lors de la phase «exécution». C’est alors que j’entrais dans le projet en le reconduisant dès la lecture premières lignes à la table à dessin. Imaginez la réaction des clients déjà essoufflé par le travail effectué lorsqu’ils se fessaient dire un jeune designer que leur projetais d’être revu. Je vous passe les commentaires plutôt malhabiles du client soupirant que le «designer fait toujours à ça tête et écoute personne»… J’ai appris à challenger le client et à démontrer les failles et les avantages à réaligner leur projet en l’écoutant. C’est d’ailleurs une qualité primordiale au designer professionnel.

J’ai remarqué que cette culture se retrouve souvent dans nos entreprises du Québec qui, trop à l’aise de «patenter» par nous-même depuis la colonisation, nous sommes pas très à prompt à demander de l’aide venant de l’extérieur. On le remarque dans notre politique, dans inventions géniales peu promues à l’international, dans le phénomène des stages internationaux, etc. Pourtant, de nombreux exemples soulignent la force qu’apporte un département permanent de design à l’intérieur d’une entreprise. Du cirque du soleil à Hydro-Québec, c’est lorsque le design fait partie intégrante du projet que les résultats deviennent enfin… profitable.

Avez-vous déjà vu une voiture protoype prendre la route de la commercialisation? Bien sûr que non car il n’y a pas eu d’études de faisabilité. C’est à la suite d’un travail intensif des ingénieurs, qu’on arrive habituellement avec une voiture présentant beaucoup moins de technologies et d’innovation, mais plus adapté à la commercialisation. Oui, la voiture arrive avec trois ans de retard et le coût du design à été douloureux, mais le projet à vu le jour. Fiouf.

Dans le monde du cinéma, certains films ne prendront jamais l’affiche. Malgré toute la réflexion et la mise en place d’un planning précis, la trop forte compétition renforce l’idée que le lancement du film doit mise juste et rapporter gros. Il y a moins de films qui sortent, mais ils sont profitables à coup sûr.

This is all well and good, and in the ideal world this might be fine. But in the real world, we have to meet deadlines and work under limited budgets. We simply don’t have the time or money to add this kind of process. Shooting for the ideal is just not realistic. “God enough” is all we have time for.

Response:

How is that we can never afford to do propoer planning and design, yet we always seem to be able to afford to pay the cost of products being late as well as the cost of fixing all of the bugs that inevitably result from inadequate design, planning, and testing?

How can this be when the cost of design and planning is nothing compared to the cost of being late to market or having a defective product?

Source: Sketching User Experience

Un exemple, si je vous dis : il reste 123 928 102 Mo sur votre disque dur de 2 103 382 840 Mo. Est-il difficile de savoir combien d’espace libre vous reste-t-il? Il n’y a rien de mieux qu’un graphique visuel en forme de tarte qui vous démontre par la couleur verte, ce qu’il vous reste. Même chose pour des étapes de formulaires. Voici un exemple:

Simple et efficace, ce concept permet de s’assurer qu’il y aura toujours quelqu’un derrière la souris.

Pour améliorer l’utilisabilité d’un formulaire, il est possible de le faire avec trop étapes faciles: créer une zone de formulaire, aligné les étiquettes et les champs convenablement et offrir qu’un seul bouton clair pour soumettre les données. Voici dun exemple tirés de mon dernier projet, governmentbids.com:

Offrer à l’usager un indice visuel clair que la zone est un formulaire. Très souvent, une simple bordure suffit. Dans le cas actuel, nous avons appliqué un concept visuel qui s’adapte au style du site web.

Pour vous assurer que l’usager relie instinctivement l’étiquette à son champs respectif, alignez le texte à droite et le champs à gauche.

Un seul bouton est nécessaire. Oubliez le fameux «reset» qui créer souvent beaucoup plus de problèmes qu’il règle de solutions. Profitez-en pour rendre ce bouton visuellement présent afin qu’il soit très facile à repérer.

Trois petits trucs et vos formulaires seront déjà beaucoup plus efficaces.

Il est très simple d’utiliser un petite icône pour identifier la nature du lien à l’utilisateur. Voici un exemple d’une fenêtre qui «pop»:

Wikipedia intègre aussi beaucoup de genre d’icône au lien.

Simple et efficace, l’usager est tenu au courant et la réaction est beaucoup plus prévisible.

Quelques bons points:

• Un slogan efficace, des boutons d’actions clair et une capture d’écran tout a fait salivante.
• Belle approche du menu qui est présent, bien en évidence mais tout en se moulant parfaitement à l’interface. Dans les pages intérieures, on retrouve le menu secondaire à droite. Cette école de pensée est la mienne: le contenu en premier, le menu en deuxième mais toujours facilement repérable.
• Bonnes idée de mettre des liens bénéfices qui nous renvoient aux caractéristiques, n’est-ce pas?
• Le fond de l’écran d’une couleur foncé permet de faire ressortir l’interface d’agréable façon.
• Les “gradients” ont été intégré de main de maître. Il permettent d’accentuer, de mettre en profondeur, mais en toute subtilité.
• Les boutons clair, clean demanderais peut-être un certain travail d’interactivité (roll-over) mais en sommes toute, il font très bien leur travail.
• La page «Pricing» est claire et précise.

Un design épuré, qui est liquide (prend tout l’écran) et qui respire est très rare pour un site web se consacrant à la vente de propriétés. C’est pour moi, un site très beau et efficace.

Quelques autre bons points:

• Un slogan bien en évidence;
• Une belle navigation clair avec des termes court et facilement compréhensifs;
• Les trois messages (Selling a Property?, Searching for a New Home? Interested in Letting?) s’intègrent dans une action «roll-hover» légère, rapide et conçue pour l’usager. Il permet de mieux comprendre le message avant de cliquer. Approche intéressante!
• Un “Quick search” repérable rapidement;
• L’affichage des trois dernières propriétés à vendre permet de mieux comprendre l’offre de l’entreprise tout en soulignant le coté «toujours à jour» du site web.
• L’espace réservé à la publicité interne (Free Property Valuation – à droite) explique clairement en une phrase le service. De plus, elle offre la possibilité de rejoindre tout de suite le vendeur. J’aime ce coté «droit au but».

Voici un exemple d’un bon site web qui est à la mode (épice à saveur 2.0), technologiquement solide, où le design (en 1024px) efficace respire tout en donnant beaucoup d’information. Il a été fait avec très peu de moyen.

Quelques bons points:

• l’engin de recherche est très facile d’accès et les résultats sont très clairement affiché. Pour une fois, j’aime le positionnement horizontal (type excel);
• le menu de gauche est très évident, les thermes sont courts et les boutons facile à cliquer;
• de bonne grosses images dans le contenu. On a pas peur et on a raison;
• du contenu, du contenu et du contenu;
• bonne utilisation de la publicité;
• aller à la page “subscribe” et voyez l’efficacité général: c’est pour moi, clique, je paye!

Il y a de ces histoires qui ne connaissent pas leur fin, seulement une page couverture 99 X 99 pixels. Ces histoires s’ouvrent pas un clavier et se termine dans un journal jetable à la poubelle: faire clic-droit.