Synerg'heBlog le blog de la Junior-Entreprise spécialiste du web » Actualité et veille numérique

Face à la popularité grandissante du « mobile » dans le paysage de l’Internet, la junior entreprise Synerg’heTIC a lancé l’an passé, un groupe de travail chargé d’assurer une veille continue sur les différents thèmes du « web mobile », afin de répondre du mieux que possible aux besoins croissants des entreprises.

Un récent sondage au sein d’une des promotions d’HETIC a montré que de nombreux élèves souhaitaient participer à des projets liés à l’Internet mobile.
L’un d’entre eux, Laurent Bracquart fait aujourd’hui le point sur la partie « interfaces » du sujet.

Lire la suite »

Comme certains le savent déjà surement, la chaîne anglaise BBC vient de sortir son nouveau site internet. Au delà de l’aspect très moderne que celui-ci arbore et des fonctionnalités de personnalisations similaires à Netvibes, une attention toute particulière a été portée sur l’accessibilité.
En effet, rares sont les sites à prendre en compte les différentes déficiences visuelles. Bien sûr, la bonne sémantique du code permettra aux synthétiseurs vocaux d’interpréter le contenu mais entre la pleine vision et non voyance totale, il existe un nombre importants d’états intermédiaires.

La présence d’un configurateur d’apparence vient palier à ce problème. Il est désormais possible de pouvoir intervenir sur l’apparence du site afin de le rendre le plus facile à lire pour la vue. Inversion des couleurs, texte en blanc sur fond noir, changement de contraste, tailles des polices, typographies, tout est ici paramétrable ! Une visualisation en directe permet de se rendre compte du résultat avant validation.
Quel progrès ! Ce genre d’initiative n’est certes pas nouvelle mais rarement déployée de manière aussi complète et efficace sur un site aussi important que celui de la BBC.
Bien évidemment, cela a un impact non négligeable en terme de coût de réalisation. Si cette politique est clairement à encourager, je serais quand même curieux de savoir si le retour sur investissement (un des facteurs qui décourage les annonceurs) est intéressant sur un projet de cette envergure et pour ces problématiques d’accessibilité.

Une initiative similaire avait été présentée lors des ateliers Paris Web 2007 pour le musée Beaubourg et son site adapté au public handicapé.

Réalisé à l’époque par des étudiantes des Gobelins (aujourd’hui professionnelles du web), ce site permet d’obtenir de nombreux contenus de manière totalement accessible (adaptation du site aux différents types de déficiences visuelles, vidéos sous titrées, interprétation correcte par les synthétiseurs vocaux etc…)

J’ai eu l’occasion de travailler sur de nombreux projets de création d’interfaces web. Bien que ces projets ne soient pas tous en ligne, cela m’a permis de développer mes compétences dans ce domaine.

Depuis cela, je m’oriente volontairement vers les domaines de l’utilisabilité et de la conception orientée utilisateurs. Plusieurs débats ont animés la blogosphère ces derniers mois. Les avis divergent quant au meilleur outil de création de wireframes et de prototypage (Axure, Powerpoint, Visio ou encore Illustrator).

Pour ma part, je n’ai jamais utilisé que Powerpoint lors de projets professionnels et souhaite vous faire partager mon expérience à ce sujet.

J’ai tout d’abord débuté avec le toolkit de Long Zhen. Je pense qu’il s’agit là d’un bon outil de départ bien que ce dernier soit perfectible. J’ai par la suite découvert celui de Fred Cavazza, moins précis et un peu plus ancien. Il ne correspondait pas non plus à ce que je souhaitais utiliser.

L’un de mes projets nécessitait un haut niveau de détails dans la production des cinématiques c’est pourquoi j’ai décidé de créer mon propre toolkit et souhaite à présent vous le faire partager.

• NuTIC_PrototypingToolkit_v1.ppt (2,4Mo)
• NuTIC_PrototypingToolkit_v1.pptx (530ko)

Retrouvez plus de détails sur mon blog personnel NuTIC.net et visitez également les principales sources m’ayant permis de créer ce document :

• Long Zhen’s toolkit v 0.2 (.pptx)
• Cavazza’s wireframe toolkit (.ppt)
• Discours de Manuel Clément à propos de la création des outils Office (nécessite le plug-in Silverlight)
• Eric’s workshop and files

Je suis en attente de vos remarques. N’hésitez surtout pas à partager vos exemples avec nous !

Si l’on devait décrire notre façon d’évoluer au sein des sites internet, il ne faudrait guère plus de 2 minutes pour dégager les grands principes de navigation.

« Le logo est à gauche », « le menu en haut ou sur le côté », « le contenu est au centre »…tels sont des éléments qui reviendraient de façon régulière car effectivement, une large majorité des sites est basée sur ces standards (admis par l’internaute et donc maîtrisés, pour la plupart).

Cela dit, de nombreuses expérimentations montrent qu’il est possible d’envisager de nouveaux modèles de naviguation (avec plus ou moins de succès).

Quelques exemples :

Songza

Songza est un moteur de recherche de musique doté d’une ergonomie originale et innovante. Ici on laisse de côté les traditionnels symboles « play » à gauche du titre ou les petites étoiles pour voter. Un pointeur/cible permet d’effectuer toutes ces actions très simplement mais surtout de manière tout à fait intuitive. Dès la première utilisation et sans effort intellectuel particulier l’utilisateur devient à l’aise avec cette nouvelle interface.

Pour en savoir plus sur Songza, je vous invite à consulter une analyse détaillée sur le blog Ergophile.

Sekisuihem

Une expérience intéressante pour promouvoir une société Japonaise de maisons préfabriquées.

Il faut ici déplacer son personnage en drag’n drop au sein des pièces de la maison pour accéder aux contenus dus ite. Ce n’est pas toujours très simple mais l’originalité est là !

Publicis Stockholm

J’ai découvert le site de la branche Suédoise de Publicis un peu par hasard mais sa navigation aussi inhabituelle qu’étrange ne laisse pas indifférent. Ici pas de menu, pas d’espace reservé au contenu, seulement des cases menant à d’autres pages à la façon d’un tableau de bord.

Le design est minimaliste et forcément déroutant du fait de l’occupation totale de l’espace du navigateur. (waaa, on étouffe un peu ici…)

Si l’originalité est là, l’efficacité est loin d’être évidente.

Dans la même veine, voici Marumushi qui permet une autre forme de visualisation de l’information au travers de blocs de couleurs de différentes tailles.

Dont Click It

Le célèbre site dans lequel aucun clic n’est nécessaire pour naviguer.

Un vrai défi pour l’internaute qui doit résister à son instinct premier. Toute l’intéraction se fait par des jeux de survol pour obtenir l’information désirée.

D’autres interfaces intéressantes à découvrir :

• Playersrepublic
  
• Shematic
  

Au travers de ces exemples, on se rend compte que de nombreuses voies restent à explorer quant à la façon de présenter ou d’accéder à l’information.

Pour aller plus loin :

• Connaissez-vous l’ergonomie artistique ? par Frédéric Cavazza

L’information est en train de faire le tour de la blogosphère suite au billet publié sur le blog d’IE par Chris Wilson et expliquant le « standards mode d’IE 8 ».

En effet, si l’on ne peut que saluer l’initiative (certes tardive) de rendre le navigateur de Microsoft enfin conforme aux standards web, le hic se situe dans son utilisation.

IE 8 intégrera les 3 moteurs de rendu : celui d’IE 6, d’IE 7 et le nouveau entièrement réécrit pour IE8. Jusque là tout va bien d’autant qu’il y a quelques semaines, l’annonce qu’IE8 passerait le test Acid 2 avait fait espérer bon nombre de personnes quant à l’évolution positive du navigateur.

L’ennui vient du fait que par défaut, ce nouveau moteur de rendu ne sera utilisé. Pour faire interpréter son site par le moteur d’IE8, il sera nécessaire de le spécifier via une balise meta dans le code HTML.

« Ne pas casser la rétro compatibilité ». Oui mais…

L’utilisation de cette meta serait justifiée par la volonté de ne pas « casser » l’optimisation des sites actuels, retro compatibilité oblige.

En effet, IE6 représente 35% des parts de marché des navigateurs et sa non conformité aux standards établis par le W3C oblige de nombreux sites à être optimisés spécifiquement.

L’argument parait tout de même étrange voir absurde car un navigateur comme Firefox arrive à faire ce travail d’interprétation correctement sur une très large majorité des sites, même ceux non optimisés pour lui. Pourquoi IE8 n’en serait-il alors pas capable ?

Par ailleurs, Microsoft demanderait aux autres navigateurs d’adopter cette méthode de « hack » afin de spécifier les moteurs pour lesquels le site serait optimisé (Firefox 2 et 3, IE8 …)

Cela va bien évidemment à l’encontre de la question première qui est de faire des sites respectant les standards, et non des sites s’adaptant aux différents navigateurs…

Ces différentes annonces de la part de la firme de Redmond témoignent néanmoins et malgré tout de la prise de conscience de l’importance des standards du web.

Dommage que cela paraisse si laborieux à être implémenté.

Pour aller plus loin :

• Compatibilité et IE8, le point par Tristant Nitot
• Le standards mode d’IE8 par Country

Nous y voila. L’équipe norvégienne de Netlife Research a mis en ligne sa version 2008 du célèbre calendrier de l’inutilisabilité. Je vous en parle tous les ans, c’est l’occasion d’aborder 12 erreurs courrantes concernant l’ergonomie.

Tous les mois sont donc horribles, mais chacun à sa façon. La présentation sous forme de calendrier n’est bien sûr qu’un pretexte pour mettre en valeur des « guidelines » que nous devrions suivre dans nos métiers au quotidien (et donc notamment sur le web).

L’an passé, Jakob Nielsen évoquait la version précédente, et critiquait notamment les dimensions du document au format européen (ce qui rendait l’impression hasardeuse sur du materiel américain). Cette année, Eidar lui renvoie la balle en se moquant du design de useit.com. 1 – 1

Pour 2008, l’équipe a puisé ses idées de multiples services dits « web 2.0″ comme Youtube ou Facebook. Personnellement, j’apprecie particulièrement la référence à la loi de Fitts.

Le calendrier de l’inutilisabilité a maintenant son site dédié, où vous pouvez uploader la photo du calendrier, exposé dans votre bureau.