En 2010, j’ai aimé...
27 janvier 2011Il est presque pas encore trop tard (soyez indulgents).
En 201O, j’ai aimé...
... la musique de barbus !
... les jolies applications !
... l’HTML5 & CSS3 qui m’ont fait rêver à une nouvelle ère !
Back from dConstruct 2010
6 septembre 2010
La courte parenthèse Brighton - dConstruct est désormais derrière moi. Un petit trip en bord de mer anglaise pas désagréable : soleil, mouettes, bise, café latte et... une faune de webdesigners tous venus pour assister à L’Evénement : "dConstruct 2010"
Un tweet chopé sur le flow #dconstruct résume très bien l’ambiance générale :
20pts specs, 10pts beard, 50pts most Apple products, 100pts geekiest slogan tee. All 4 = 500pts
D’emblée ce qui est impression c’est l’organisation anglo-saxonne impeccable : pas un pet de retard, mise en scène avec éclairage sobre et professionnel, pas un larsen, pas de problèmes avec les keynotes, enchainement des speakers sans faille, damned !
Le fil conducteur de quasi toutes les présentations, c’est l’utilisation de la métaphore pour expliquer les idées qui nous préoccupent dans l’assemblée : le design (autrement dit dans la langue de Molière la "conception" d’objets et, dans notre cas, d’applications interactives et plus précisément encore de sites web évidemment). Revue rapide :
- Marty Neumeier : Comparaison sur les anciens modèles ("factories") et les nouveux modèles ("brands")
- Brendan Dawes : son intervention est intitulée "Boil, simmer and reduce". Au delà de cette métaphore du processus complet de design, il fait régulièrement des références à des films (Bonny & Clides, Yakuza)
- Davis McCandless : son discours est principalement basé sur des études de graphiques
- Samantha Warren : une comparaison intéressant entre la symbolique des chaussures (que disent-elles ?) et le fait que les polices de caractères peuvent renvoyer également des émotions, du symboliques avec la même puissance (après tout, nous choisissons nos chaussures en fonction de notre personnalité, c’est le même choix que nous pourrions opérer pour les fonts).
- John Gruber : l’équipe créative est comparée au "director" qui donne le "final cut" en prenant comme illustration Kubrick, Hitchkock et Orson Welles
- Hannah Donovan : l’intitulé de son exposé est assez clair "Jam session : what improvisation can teach us about design" Et pour boucler la boucle, citons enfin :
- James Bridle
- Tom Coates
- Merlin Mann
Tous ces exemples résument l’importance de visualiser (de rendre "visuel") des concepts, des idées pour bien les comprendre et se focuser sur ce qui nous permettra d’être efficace dans notre travail. A chacun ensuite de garder dans ce qui a été dit les métaphores qui nous ont le plus parler par rapport à notre réalité professionnelle. Voici sans doute l’intérêt principal de cette mise au vert à Brighton de mon point de vue.
eID sur IrisBox : UX connait pas !
26 juillet 2010Moi parler langage geek ou informatique, moi faire petit préambule de vocabulaire :
- eID : il s’agit de la carte d’identité électronique. Gràce à la puce et à une lecteur de carte, il est normalement possible d’accéder à une série de services online
- IrisBox : il s’agit des services online accessibles au sein de la Région de Bruxelles Capitale. Classés par commune, ils permettent la demande de certains documents administratifs et quelques procédures comme la déclaration de changement d’adresse : http://irisbox.irisnet.be
- UX : l’abréviation de "User Experience" ou "Expérience utilisateur". Notion clé de mon métier de concepteur de sites web qui consiste à évaluer l’expérience d’un utilisateur (de site par exemple mais en somme de n’importe quel service ou objet tel qu’un ordinateur, une voiture, un fauteuil...). Il s’agit de se mettre à la place de l’utilisateur pour essayer de voir ce qu’on peut améliorer pour répondre au mieux à ses attentes et lui permettre de vivre une expérience la plus positive possible.
Et force est de constater que malheureusement mon expérience utilisateur des services IrisBox est une calamité ! A cette heure, bien que disposant du hardware nécessaire, je n’ai pas encore réussi à utiliser ces fameux services. Mon temps a été partagé entre des recherches sur les sites d’aide mis à disposition par les administrations, des recherches sur Google, des essais de connection avec de nombreux messages d’erreur d’une eau aussi limpide que la Meuse dans le bassin liégeois, des communications téléphoniques avec 3 helpdesk différents, des échanges d’emails et la lecture de documents PDF.
Je suis effaré par le niveau de ce service (peut-être suis-je simplement trop habitué à utiliser des services performants issus de la vague "web 2" et autre et provenant généralement de pays anglo-saxons...) et crie au mégaphone dans le vide de la Toile : Arrêtez de limiter la conception d’un outil web ou interactif à sa simple réalisation technique ou technologique ! Intégrez la dimension UX qui implique des compétences en design, graphisme, ergonomie et structure !
Pour documenter mon coup de gueule, voici un copié-collé du message envoyé au helpdesk :
Chère Me XXX,
Merci de m’avoir transmis rapidement le document. A cette heure, et après de nombreux nouveaux essais, je ne suis toujours pas capable d’utiliser ma carte avec mon PC. Après de nombreuses recherches, la raison la plus probable du problème est apparue sur cette page : http://www.cardreaders.be/fr/modeles.htm
Mon lecteur (ACR38U-SPC-FDT) ne semble pas compatible avec la version OSX 6 ("tot 3" sur le site)
Par rapport à cette expérience utilisateur décevante durant laquelle, il faut bien le dire, j’ai perdu beaucoup de temps, je me permets les remarques suivantes :
Concernant le document :
- il parle d’installer Firefox 3.5.3, visiblement ce document n’est pas à jour car ma version de Firefox installée est la 3.6.7. La version 4 est désormais disponible en béta, je n’ose pas la télécharger à cause de ce genre de procédure. Est-ce qu’il y aurait une incompatibilité avec des versions récentes de Firefox ?
- ce document ne dispose pas de date de rédaction, difficile de savoir de quand il date par rapport au jour d’aujourd’hui et donc de juger de sa pertinence
Concernant la procédure :
- Un ami m’a conseillé de faire une mise à jour du driver. Dès lors, la documentation étant très limitée, dois-je choisir d’installer le driver CCID ou non-CCID ?
Concernant le site :
- pourquoi le document transmis n’est pas disponible en ligne ?
- pourquoi les procédures d’aide sont-elles réparties sur plusieurs sites ? http://eid.belgium.be/fr/besoin_d_aide/ http://irisbox.irisnet.be/vip/porta... https://www.mondossier.rrn.fgov.be/ http://www.cardreaders.be/
- Pourquoi ne pas disposer de procédures complètes impliquant tous les scénarios possibles sur base des expériences utilisateurs ?
- je n’ai pas vu de liste des modèles de lecteurs disponibles sur le marché ainsi que la liste des drivers correspondant, où puis-je trouver cette liste ?
- pourquoi le site ne renvoie-t-il pas la raison du problème plutôt que des messages d’erreur incompréhensible des utilisateurs lambda ("Card not found", "The page requires a client certificate", pourquoi en anglais, "The page requires a client certificate", "Votre configuration ne semble pas conforme à l’utilisation de cette plate-forme.") ? Il me semble que s’il s’agit d’une incompatibilité elle devrait être détectée à un moment de la procédure et me demander de soit mettre à jour le driver soit m’inviter à me procurer un lecteur plus récent
Merci d’avance pour les réponses à ces questions.
Je ne désespère pas d’aboutir...
Design flexible comme évolution du web ?
24 juin 2010L’évolution d’internet est rapide et souvent peu homogène, ce qui demande à moi et mes confrères des métiers du web une veille constante du média et de ses possibilités. Jusqu’ici, je n’apprends pas grand chose à grand monde. Je m’aventure un peu plus loin : une de ces évolution est sans conteste la prise en compte de la place de plus en plus importante que prennent les nouveaux "terminaux" (j’entends pas terminaux par exemples les smartphones, les bornes interactives, les tablets mais aussi les PC portables ou ordinateurs de bureau).
Imaginez : si on considère que le marché va vers une offre de plus en plus grande de formats d’écran (du smartphone à la télé 42 pouces à leds), cela signifie pour nous webdesigners d’être à même de concevoir des sites web capables d’être confortables à la consultation sur tous ces terminaux.
Même si nombres de mes clients sont encore peu conscients de cette pluralité grandissante il est normal que ma veille m’amène à trouver des solutions à cette évolution. J’ai réalisés à plusieurs reprises quelques sites avec une détection du terminal par un script serveur (PHP) permettant de renvoyer une mise en page adaptée en fonction de la largeur d’écran détectée. C’est donc assez simple techniquement mais cette méthode dispose d’un grand désavantage : si on suit mon raisonnement, plus on avance dans le temps plus je devrais réaliser de mises en pages différentes ce qui peut impliquer à la fois une gestion difficile du site sur le long terme et un coût assez cher pour le client.
La méthode décrite par Ethan Marcotte pour A List Apart est pour le moins beaucoup plus séduisante : le design flexible (lire l’article "Responsible webdesign"). Il site notamment John Allsopp pour démarrer son propos dont voici une traduction rapide :
"La mise en page dans le cas du médium print est lié aux limitations du format de la page papier. Nous devrions adopter le constat que le web n’a pas les mêmes contraintes et donc concevoir avec le critère de flexibilité."
Il poursuit cette fois de sa plume :
As a long-time proponent of non-fixed layouts, I’ve long felt they were more “future proof” simply because they were layout agnostic. And to a certain extent, that’s true : flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.
Autant dire que j’ai été assez méfiant à la première lecture. Les designs flexibles sont plus tourné vers l’avenir ? Concevoir des mises en page flexibles (une mise en page qui s’adapte en largeur à l’écran sans largeurs fixes, voici un exemple) est une pratique que j’ai abandonnée il y a quelques années pour plusieurs raisons :
- Les contraintes techniques sont assez difficiles : comment garantir au client que le texte de son site s’affichera correctement sur un écran 1024pixels ou 1900 pixels ? Comment s’en sortir avec des éléments qui sont eux fixés en taille (vidéos YouTube, images, bannières...) au sein d’un design flexible ?
- Les contraintes visuelles donnent a priori une impression qu’on ne pourra pas être aussi créatif que si on est dans un environnement fixe.
Autant dire que j’ai eu besoin d’arguments supplémentaires pour me convaincre. Il arrive juste après : en utilisant la fonction de détection du média via les feuilles de styles (CSS), cela permet au designer qui a développé un design flexible de rapidement prévoir des adaptations de mise en page en fonction du média détecté. Plus besoin donc d’ajouter des détection en PHP d’un iPhone, BlackBerry, iPad mais l’attribut "media" et son sous-attribut "max-device-width" (la largeur maximum du navigateur) permettent rapidement d’ajouter des styles complémentaires de mise en page en restant dans la feuille de style.
Le critère de design flexible n’est pas indispensable mais facilite très fort les adaptations de mise en page en fonction des tailles de navigateurs détectés. Sur ce critère j’ai d’ailleurs appliqué une détection pour le site et blog d’Exibit qui s’adapte pour la lecture sur Smartphone et iPad.
En conclusion...
La bonne nouvelle pour les responsables de site web est que cette méthode facilite grandement les adaptations de leur site en fonction de cette évolution d’internet. Le design fluide pur jus reste néanmoins contraignant et difficile à réaliser pour les designers, il semble donc que nous continuerons à voir différents coutants dans les années à venir et difficile de savoir à ce stade si la voie "flexible" va réussir à s’imposer.
Quelques exemples :
- Un design 100% flexible, images compris
- Le blog de Hicksdesign prévoit pas moins de 7 adaptations du design en fonction de la taille du navigateur
Flickr
le Blog
