Cela peut paraitre évident lorsque l’objectif est de maquetter une interface afin qu’elle soit pensée pour l’utilisateur, efficace et simple. Or en m’essayant à l’exercice je me suis rendu compte que cette étape garde ses avantages pour tous types de projets informatique nécessitant une expertise ergonomique. On peut citer : les tableaux de bords, les rapports, les clients lourds, les clients RIA, les sites internet, les portails d’entreprises, etc.

Voilà pourquoi :

1. Nous parlons des langues différentes. Peu importe notre langue chaque personne l’interprète différemment. C’est ce qui rend si difficile la communication autour d’un projet ou l’entente sur une spécification donnée.
2. Nous sommes des êtres visuels. Notre compréhension du monde est essentiellement le fait de notre vision. C’est le sens le plus important chez l’être humain, c’est via celui-ci que nous découvrons le monde, que nous apprenons à lire ou écrire, etc. D’où l’adage “une image vaut mieux qu’un long discours”.
3. Nous itérerons plus souvent. La mise en croquis permettra de partager une vision commune du projet, de la critiquer et d’itérer à nouveau jusqu’à l’obtention du résultat le plus satisfaisant dans une période de temps très courte.
4. Nous irons plus loin dans la réflexion. Lorsque l’on dessine l’interface et la façon dont nous allons interagir avec le logiciel, nous sommes obligés de nous placer dans la peau de l’utilisateur et d’utiliser virtuellement l’application en devenir. C’est ainsi qu’un certain nombre de problématique que l’on aurait pu ne pas voir seront solutionnées dés la conception.

Remarque : ces raisons sont d’autant plus valables avec un prototype qui permet de “réellement” utiliser le logiciel en devenir.

Dans un prochain billet nous verrons les différents outils à notre disposition :

• L’excellentissime Balsamiq.
• Le tout nouveau MockingBird.
• Microsoft SketchFlow.

[EDIT] D’autres billets sur le sujet :

• How do we wireframe?
• Sketching with a sharpie.
• Un magazine consacré aux sketchs !!

Cependant hier ils ont enfin mis à disposition une version compatible avec la dernière beta de Visual Studio.

Foncez, c’est juste là !!!

Ma priorité était donc la facilité d’utilisation qui se traduit par un installeur avec le minimum d’écrans, une documentation la plus précise possible et une réutilisation intempestive de l’identité visuelle de la marque.

C’est dans ce but que j’ai écrit 2 documentations : une documentation utilisateur et une documentation technique. En fait pour ne rien cacher j’ai écrit la première et générer la seconde…

C’est là que rentre en jeu Sandcastle. Ce petit outil édité par Microsoft permet de générer à partir d’une assembly sa documentation style MSDN. Mais le problème c’est que ça doit être un barbu qui l’a créé, autrement dit “bonjour la ligne de commande” !

Heureusement une bonne âme a eu pitié et vous trouverez

Outils

• Télécharger Sandcastle.
• Télécharger Sandcastle HelpFile Builder.
• Télécharger GhostDoc pour documenter plus facilement.

C’est pourtant ce qu’a réaliser le designer Andrea Slutz au travers de l’expérience qu’il propose sur son site personnel. Son portfolio n’utilise plus la souris ni le clavier : uniquement la voix au travers de votre micro et les gestes grâce à une webcam.

Lorsque vous arrivez sur son site vous commencez par calibrer la mécanique et ensuite vous naviguez :

ANDREAS LUTZ – Because clicking is so 90s! from andreaslutz on Vimeo.

Evidemment cela ne marche pas très bien mais l’idée est bonne et la tentative plus que louable !

On peut éventuellement rêver que si Microsoft fournit le projet Natal en tant que Sdk des sites en Silverlight pourront bientôt proposer ce genre d’expérience utilisateur de manière viable…

Via (abduzeedo.)

[EDIT]

D’autres exemples du même genre grâce à Thomas :

• Un article de Fred Cavazza sur le sujet.
• Un site sans click : Don’t click.

Pour cela :

• Proposez un écran permettant de choisir si le service doit démarrer automatiquement après l’installation.
• Passez le paramètre à votre CustomAction installant le service windows.
• Dans le project installer du service Windows abonnez vous à l’évènement Committed et placez le code suivant :

try
{
    ServiceController sc = new ServiceController(this.serviceInstaller1.DisplayName,".");
    if (sc.Status != ServiceControllerStatus.Running)
        sc.Start();
}
catch (Exception oe)
{
    throw new InstallException("Cannot start service: " + oe.Message);
}

——————————–

From: Brian Wood

Le choix du bon évènement (Committed) est crucial sinon le démarrage pourrait ne pas fonctionner. De plus ce bout de code montre comment utiliser les objets tels que le Service Installer pour ne pas mettre en dur le nom du service lorsque vous le démarrez.

Bon déploiement

Mon besoin : créer un installeur qui déploie mon projet et qui propose un écran de configuration de paramètres stockés dans un fichier de config.

J’arrive à récupérer les paramètres rentrés dans l’écran mais lors du passage de ceux-ci à ma classe responsable de la configuration j’obtiens l’erreur ci-dessous :

Une exception : System.IO.FileNotFoundException … Je pensais que ça venait de mon code puisque je manipulais des fichiers. J’ai donc commenté son ensemble sauf que j’obtenais toujours la même erreur…

En fait voici la raison de cette erreur si peu parlante : lorsque vous renseignez la propriété CustomActionData  qui sert à passer des paramètres à la classe appelée lors de l’installation, si vous passez un texte ayant besoin d’être échappé (comme un chemin dans mon cas) l’ancienne nomenclature :

• /maValeur=[PROPERTY1]

devient

• /maValeur=”[PROPERTY1]\”

Attention à l’importance des quotes et du caractère d’échappement indiquant la fin de la chaine. Savoir cela vous sauvera de précieuses minutes lors de votre projet de déploiement !

En savoir plus :

• L’article parlant des CustomActionData sur msdn.
• Un article expliquant le code utilisé pour créer un CustomAction modifiant les valeurs d’un fichier de config.

Bon déploiement

Le billet sobrement intitulé “le mec n°3” expliquait pourquoi il faudrait plus de mec n°3 (par ordre d’apparition dans la vidéo) afin de créer un mouvement. Il statue que les leaders de mouvements sont rares car cela représente beaucoup de pression et cela fait peur mais qu’être le troisième est tout aussi rare. Comme avant l’apparition du mec n°3 les 2 premiers auraient pu être considérés comme des allumés (visionnaires?), c’est le mec n°3 qu’il faut remercier de l’effet boule de neige.

Non sans humour Seth Godin profite de cette vidéo pour parler du sujet de son dernier livre : Tribus. Le livre explique le pouvoir des nouvelles communautés qui se forment sur internet, comment elles se forment et comment en profiter pour faire émerger de nouveaux produits.

Plus que jamais avec l’avènement des outils comme Facebook, twitter, blogs, etc, Seth vous apprend à utiliser ces outils comme des outils marketing redoutables et à devenir un leader.

Pour mieux comprendre :

• La préface française du livre qui en dit plus sur le contenu.
• Une présentation qu’il a donné à TED ci-dessous.

Alors je n’aurais qu’un conseil : suivez de prés ou de loin ce que peux dire ou faire Seth Godin.

Enjoy

Le concept s’appelle 10Gui, je vous conseille vraiment d’aller voir le site, au design minimal comme j’aime. Tout est dit dans la vidéo particulièrement bien réalisée :

10/GUI from C. Miller on Vimeo.

En somme R. Clayton Miller met en avant les freins à l’adoption du multitouch tel que présenté jusqu’à présent : les mains obstruent l’affichage de l’écran et la position imposée par les dispositifs actuels tendent à créer des douleurs chez l’utilisateur.

Et vous qu’en pensez-vous ?

Cependant il y’a un élément de design qui me choque depuis le début et qui n’est toujours pas réglé. Le non-respect du principe de proximité :

Regardez comme la légende renseignant sur l’auteur du tweet parait être associée au tweet qui la suit. Or en réalité elle est associée au tweet directement au-dessus…

Chaque fois que je cherche des renseignements sur l’auteur du tweet je me fais avoir. Et je ne pense pas être le seul. En raison d’un principe très simple, peut être le premier en design, le principe de proximité.

Le principe de proximité est issu de la théorie de la perception visuelle autrement appelé Gestalt, développée par un scientifique allemand dans les années 1920, et est un des fondamentaux de tout design. Ce principe s’applique lorsque des éléments sont placés les à cotés des autres et dit que nous tendons à les assimilés comme un groupe.

Remarquez comme les éléments de gauche ne paraissent pas liés alors que les éléments de droite semblent former un groupe.

Si tweetdeck avait respecté ce principe la lecture des informations de l’auteur aurait été grandement facilitée :

A quand une amélioration de l’unique point qui me déplait chez tweetdeck ?

UI Fundamentals for Programmers by Ryan Singer from ChicagoRuby on Vimeo.

A voir absolument !

Et tant qu’à y être une vidéo plus ancienne du même monsieur qui donne les trucs pour réussir sa page d’inscription :

Enjoy