Étape 1 – La promesse que l’outil est là, prêt à utiliser.

Étape 2- Attendez, il ne reste qu’àccèder son compte pour de vrai.

Étape 3 – Attendez, ce lien est tellement cliquable.

Étape 4 – Attendez, c’est meilleure de cliquer un deuxième lien.

Étape 5 – Attendez, les liens de texte sont fatiguants. Voiçi un lien visuel!

Étape 6 – Merci d’avoir utiliser l’outil super-facile. Voiçi le dictionaire.

Pendant ce temps, dans un location secret…une autre personne qui a déjà utilisé cet outil est en train de faire quelque chose moins enquiquinant…

Voici mon grain de sel:

De prime abord, même si de facto on sépare les deux mondes car qu’on le veuillent ou non ce sont des disciplines différentes, selon moi on se rejoint à plusieurs niveaux. Premièrement, les développeurs sont en sécurité lorsqu’ils ont un « wireframe » qui rende explicite les demandes du client et qui intègre l’analyse des besoins. Car sinon, les demandes sont incomplètes, floues, désorganisées et loin de la réalité des interfaces, donc de notre langage commun. Les UX ont besoin des développeurs afin de concrétiser leur travail, le rendre utilisable et utile.

Il semble que la fonction principale d’un UX designer est de suggérer des fonctionnalités qui fonctionnent pour les humains. Ce qui signifie, effectuer la recherche ethnographique, savoir ce qui marche, être en mesure de mesurer les résultats, modifier/corriger ce qui ne fonctionne pas et suggérer des idées qui vont fonctionner. Comme c’est intéressant! Le rôle des développeurs est de développer des fonctionnalités qui fonctionnent grâce à l’informatique, analyser les systèmes existants, adapter ces systèmes ou en développer de nouveaux, mesurer les performances et corriger les bugs. Trouvez les points en communs… au niveau de la méthode de travail, on se rejoint pas mal selon moi.

En fait, ce que nous avons en commun, c’est que l’un et l’autre (les UX et les développeur) dans un monde idéal, on ne devrait pas être soumis à des impératifs de budgets. Nos livrables sont toujours perfectibles donc peuvent être constamment améliorés. En ce sens, il faut se méfier de « stamper » les « wireframes », et de juger également trop rapidement une refonte complète d’un système qui marche, ce qui veut dire que les budgets devrait toujours nous permettre de continuer notre travail et de l’améliorer et non pas de nous limiter dans ce qu’on peut/veut faire.

Un autre point en commun : on a tendance à suggérer des solutions qu’on maîtrise bien, de cette façon, on s’évite les écueils, on réduit le temps de réalisation. Le pendant, c’est qu’on innove peu, mais cela ne veut pas dire que notre système n’est pas utilisable cependant… Aussi, les UX et les DEV, on peut également dire que l’on peut tout faire, mais qu’il nous faut du temps, certains développeurs vont aller jusqu’à travailler jour et nuit pour réaliser un projet, certains UX vont tester et modifier/adapter constamment en fonction des besoins identifiés, mais en réalité, on sait tous que certains projets ne pourront jamais être réalisés comme on le voudrait par manque de temps/budget. Donc en bonus, nous avons les mêmes potentielles frustrations: le manque de temps, de budget, de communication.

Il est évident que les UX et les DEV ne devraient pas travailler en silo (!). Un participant mentionnait qu’il pouvait aider de s’assoir un à côté de l’autre UX et DEV et j’abonde totalement dans cette direction! Le même participant mentionnait qu’il faut se percevoir comme un organisme vivant se nourrissant, se passant les informations et s’échangeant les données afin de bien fonctionner et d’être performant en tant qu’ensemble. La beauté d’une méthode Agile et itérative c’est la possibilité de collaborer, aussi avec le client, par cycle.

Et que dire des enjeux du UX et ceux du DEV? Le UX va chercher des solutions pour les utilisateurs, le DEV va chercher à trouver des solutions programmables. Ou est-ce qu’on se rejoint encore?

« J’ai besoin des développeurs! », de dire Michelle-Andrée. On aurait du enregistrer cette exclamation, vraiment! « Nous avons besoin des UX! », j’ai envie de répondre, car c’est précisément là que l’innovation réside, à l’intersection. En fait, l’innovation réside là où on trouve ce qui est possible de faire réaliser par les technologies, grâce aux humains qui les utilisent, de nouvelles formes d’interactions que ni l’un ni l’autre ne pourrait réaliser seul. C’est comme un but ultime, qui nous rassemble. :)

De plus en plus sollicités pour produire des sites accessibles, et reconnaissant l’importance de construire des sites et des applications sur des plates-formes standards, nous sommes allés assister ce lundi, Sabine, Caleb et moi, au lancement du programme de certification des compétences en accessibilité web (PCCAW), tel que proposé par la Coopérative Accessibilité Web (@AccessibiliteWb)

Lors de cette miniconférence, j’ai été impressionné par le respect de la communication qui y régnait et la présentation de ce qu’est l’accessibilité par Denis Boudreau (@dboudreau). Le geste de communiquer y est important et je crois c’est le principe sous-jacent de l’accessibilité: permettre à tout un chacun d’accéder à l’information (mais aussi d’y contribuer) en offrant tous les moyens possibles pour que le récepteur puisse comprendre, peu importe les sens qu’il ou elle utilise.

L’accessibilité est un peu comme une cure de santé en ces temps de surcommunication.

Et belle analogie, racontée par Vincent François (@vincent45nord) pour ces anciens qui ont connu la musique analogue : avec les yeux, il est possible de déchiffrer une page comme on écoutait de la musique sur un vinyle : en ayant la possibilité de poser l’aiguille sur n’importe quel sillon, pour en écouter une pièce. Consulter une page web – ou autre document téléchargeable – à l’aide d’un lecteur vocal est un peu comme chercher un morceau de musique en avançant en accéléré une cassette à bande magnétique : il faut passer à travers tout le document avant d’arriver où l’on veut (et en supposant que l’on sait l’information se trouve… d’où l’importance d’une bonne structure et d’un menu s’y référant).

Pour ce qui est du programme de certification proposé, les «techniciens» auront accès à trois niveaux de certification, tandis qu’un seul niveau sera offert aux «designers», ce que je trouve dommage (quoique sans doute compréhensible.)

Je pense aussi qu’il serait important, et ce, dès le premier niveau, de rencontrer des gens qui doivent avoir recours aux outils d’accessibilité pour bien comprendre leurs besoins et la façon dont ils peuvent percevoir le travail que nous faisons. Il n’y a rien de plus instructif que de rencontrer les gens pour qui nous faisons un produit et ils étaient nombreux à être présent lors de cette journée.

Bref, vision inspirante du web et nous avons hâte de pouvoir souscrire à cette accréditation dont le site devrait être en ligne sous peu.

Mise à jour:
Cette prise de conscience nous amène à revalider l’accessibilité du Lab, et on se rend compte qu’il ya plusieurs enjeux que nous aimerions corriger le plus tôt possible. Nos excuses aux plus concernés.

Personas helps you to define your design models and refine them by giving you a reference of a typical user’s intentions, goals and impediments. So of course it can be misleading for a project if you do not take care of them, or if their conception is not well done. They then become zombie-personas, explains Tom Allison in a slide representation (the .mp3 file can be found in the episode of uxcafe.de on the subject).

I’m not into zombies myself, but I found it’s a nice way to emphasis the danger and explain the problems a project could encounter while using personas. I would like to summarize them here and maybe try to explain them a bit. I’ll also be adding some zombies I heard of myself and my thoughts about them.

While using personas on a project, here are some potential horrors (ou erreurs) you want to be prepared for:

Zombie persona
These personas are created but forgotten in a drawer; the project does not refer to them anymore. Or if it does, it’s without really looking at the persona itself and relying on what they think the persona is. It thrives in the dark and feed on human brain – taking up valuable meeting time…

Vampire persona
It is a persona used without telling the others (the vampire takes a hold of you). It can affect a whole department. The problem resides in the fact that decisions will be taken based on needs/use cases that the other personas are not aware of. As Tom Allison nicely putted, all Undead personas can only live in the dark – where there is no communication.

Mirror or Narcissus persona
Narcissus was a man to whom the world had no other meaning than his own reflection.
That said, we always tend to design for ourselves. But it can be dangerous to slip into a pattern where you forget the outside world for whom you’re designing. This persona usualy appear when there is none…

Frankenstein or Unicorn persona
These are made up of anything nor nothing concrete; ie. without user research. They are fantasies of what the project beleive their users should be like. This completely undermine the concept of personas as a useful exercice.

Troll persona
Worst possible user; probably who doesn’t know how to use a mouse…!
It is a persona that represent what the project hates most about its users. It is mostly a dumb way to design feature, for it will make your project work for an extreme portion of your potential users. And you should find empathy in your personas: it’s hard to like the Troll.

So these are the ones I thought of based on the presentation by Tom. And i’m pretty sure we can find others. Please comment if you think of any.

That said, I like this whole metaphor for it makes a lot of sense and it’s a funnyand practical way to remember the potential dangers of playing with creatures such as personas.

Des fois ça pourrait être un petit père-noël, d’autres fois des fleurs qui poussent: on peut imaginer n’importe quoi.

Regarder la vidéo et dites-moi ce que vous aimeriez.

http://vimeo.com/16399240

L’autre notion que j’ai découverte récemment porte le nom pompeux de psychogéographie. Pompeux certes, mais pas bien méchant, ce terme explique qu’un milieu géographique, consciemment aménagé ou non, agit sur le sentiment de bien-être des individus. Chombart de Lauwe, dans son étude sur “Paris et l’agglomération parisienne” (Bibliothèque de sociologie contemporaine, PUF, 1952), illustre bien ce concept : “un quartier urbain n’est pas déterminé seulement par les facteurs géographiques et économiques mais par la représentation que ses habitants et ceux des autres quartiers en ont “. C’est ainsi que certains environnements ont plus d’impacts émotionnels sur nous, ou encore que d’autres lieux nous rappellent des lieux déjà visités, des endroits appréciés…

La sérendipité, ou pratique du hasard,  trouve aussi des voies dans la navigation numérique. L’application The Accidental News Explorer pousse ainsi la recherche classique de l’internaute, en donnant une ampleur à la rubrique “Voir aussi”. L’utilisateur booste sa navigation en passant d’articles en articles, rebondissant de mots en mots. Composant du projet Sentient City Survival Kit développé par Creative Capital, Serendipitor se propose comme une application de navigation alternative : comme dans un labyrinthe, de multiples voies nous sont proposées, des plus courtes aux plus longues. Le degré de difficulté peut ainsi être dosé en fonction de votre curiosité du moment. En suivant la route du ludisme, Drift Deck mixe le concept de puzzle au principe du cadavre exquis. Les cartes du jeu invitent vos pas à traverser la ville, en composant un nouveau puzzle pédestre à chaque sortie. Ces diverses applications valorisent l’aspect récréatif de la marche, mettant de côté son caractère utilitaire, comme le besoin d’aller du point A au point B. C’est donc bon d’avoir le goût de la dérive, preuve de curiosité d’exploration.

Thinking of highlevel features that will also work for our mobile version:

• keeping and tidying up the “activity feed” on the home page.
• extend activity on author profile pages, to show their latest activity
• featured/most popular content on home page.

Some of my brainstorm sessions included trying to visualize a timeline for activity and a better filtering process for searching old content…

I was first thinking in terms of the desktop version, with a fluid design. Of course this is too much for a mobile version. But it does have the essentials such as: visual timeline, filtering, featured content, and latest content.

At the time I was viewing posts as falling into types: projects, ideas, thoughts and notes. And that these would serve as a basis to categorize the type of posts. I think I was wrong...

I am very secure about the idea that viewing archives should be as easy as just filtering the current content you are viewing. This example would let you filter by time, author and let's say the latest 50 tags. Any filtering you applied would then be shown to you in-line, where then you would be able to remove filters that don't apply, or go back to adding more filters. Again.. tedious for mobile users.

a pool of thought/abstract.

Still liking the idea of a visual timeline, which would most likely be too much for mobile however. I was still trying to segment/categorize content. Does the world make sense, or do we make sense of the world?

I like this sketch because it reminds me to be careful of icons and the clutter they can bring. Obviously mine look rediculous but I think even if small the repition would be insane for the activity on the home page.

I wish to ask the audience.

1. Is there still use in a long list of Archives by month?
2. Do categories help or hinder? Do you wish there were only tags in your blogging dreams?
3. How much value would you put on providing a well-layed-out version for mobile devices? Do you even browse on your mobile, is it all about apps?

Objectives along with more thoughts:

1. Increase community participation (authors/visitors):
   • question potential/current authors on views of the lab. what discourages them from posting content?
   • determine what UI (or absent UI elements) could hinder authors or visitors, from participating.
   • ensure that users know what content they are reading. is content unclear, labeled poorly, hierarchy issues? are you getting lost in content?
   • add interactions for make participation easier.
   • maintain quality of content.
2. Sprinkle Pheromone-ness across the lab:
   • be impatient to share/converse on the lab!
   • produce curious content
   • produce honest content
   • don’t be limited to any amount of topics, or starting new topics
3. Learning playground:
   • the lab hopes to… innovative, test things out, learn, inspire, experiment and evolve!
   • our goals is that our users (and even ourselves) can take something with us after reading. that we can produce in some way due to influences found on the lab.

• Current actionable tasks:
  • the title of the comment’s post on the index page must be more apparent done
    
  • reply/read actions on the index page at the end of post/comment snippets done
    
  • archives/categories should be better placed as they are not used for now
  • add c.c. license done
  • author profile page layout

And now for some fun:

To give everyone some direction we will be tackling new features on the lab by targeting mobile browsers first! Cool?! … yea it is.

~more coming soon

Sur une route (le Web),  je cherche ma destination (l’information). Certes, les panneaux indicateurs sont présents sous la formes de barres de recherche, de mots-clés. Je peux cibler ma recherche. Puis arrivent les sites ou autres forums qui me proposent plusieurs solutions, ouvrant sur d’autres sites et ce, ainsi de suite. La destination dans le monde du Web n’est donc pas un point fixe et déterminé, comme une maison placée sur une carte : la destination est multiple et ouverte, comme une porte ouvrant sur une autre porte ouvrant sur une autre p… Les solutions de trouver sa destination sont donc plurielles, quasi-infinies. La recherche est un labyrinthe, la destination est inconnue.

D’où ma question : comment faciliter la navigation en fonction de ma recherche ? Cette problématique s’adresse à tout type de navigation, virtuelle comme réelle. Après tout, avant de trouver sa route avec un GPS, nous avions bien une carte géographique en main. Si elle nous sert toujours, cela signifie que le GPS ne se suffit pas encore à lui-même.

Je fais donc appel à vos avis aussi bien en tant que navigateur du Web que de voyageur du monde. À vos compas !

fraîchement arrivée chez Phéromone, je découvre là un espace d’expérimentation, le Lab. En haut de la page, un slogan m’accroche l’oeil : “Inspiration, expérimentation, innovation”. Et j’interprète ce message comme une feuille blanche à ma petite plume, une porte-ouverte aux idées, aussi farfelues soient-elles. Après tout, le farfelu est aussi le monde de l’original, du drôle, de la nouveauté. Et c’est la nouveauté qui fait avancer. La porte du Lab est ouverte aux idées, aux propositions, à la discussion.

Chaque idée est une information susceptible d’intéresser, d’intriguer une autre personne. N’hésitons pas à apporter notre bulle de pensée à cet espace virtuel en construction !

Enjeux

1. Augmenter la participation des usagers
2. Améliorer l’affichage des commentaires
3. Améliorer la navigation à travers les émissions archivées et en faire rayonner le contenu

Solutions

1. Faire ressortir les points d’entrée pour participer aux conversations dès la page d’accueil
2. Faciliter l’ajout de commentaire en intégrant le formulaire à l’intérieur même de la page (au lieu de pop-ups), près des contenus.
3. Restructurer l’affichage des commentaires en proposant une visualisation hiérarchisée.
4. Restructurer la présentation des émissions en page d’accueil en montrant les plus récentes avec des vignettes

Finger Prince by opusinfinity, on Flickr

C’est ce que Sony a découvert, lors de tests avec des consommateurs:

The latest is a new line of Sony e-readers that the company will introduce Wednesday. For the first time, all have touch screens; Sony decided on the technology after watching person after person in focus groups automatically swipe the screen of its older, nontouch e-readers.

Cette tendance a ses implications, outre dans le design des nouveaux appareils, mais aussi dans le design d’interfaces. Depuis plusieurs mois, notre travail de design a dû évoluer avec cette nouvelle tendance. C’est le cas bien sûr pour le design d’interfaces dans notre travail sur des services ubiquitaires, puisque la plupart des appareils mobiles contemporains sont tactiles. Mais c’est aussi le cas pour notre design d’interfaces Web en général.

Depuis des années, le design Web a pris pour habitude d’offrir des interactions particulières à une utilisation d’une souris. Lorsque le visiteur passe le pointeur sa souris sur certaines zones (le fameux “hover” ou “mouse over”), de nombreuses fonctions peuvent être déclenchées: offrir de l’information contextuelle, ouvrir un menu, indiquer la présence d’un hyperlien ou la possibilité d’agir avec le contenu ou l’interface.

Tout cela change avec la multiplication d’appareils connectés au web dont la principale interface utilisateur n’est plus une souris et son pointeur, mais un écran tactile. Exit la possibilité pour le visiteur de traîner sa souris comme on traîne le regard à la recherche d’information. Même si elles ont toujours leur utilité comme petit “plus” pour les utilisateurs avancés (avec un ordinateur et une souris ou un trackpad, les fonctions de “:hover” ont fait long feu, et comme l’écrit Andy Croll, beaucoup d’interfaces migreront sans doute du hover au tapotement.

C’est sans doute une bonne chose. Depuis longtemps, les apôtres des bonnes pratiques Web notent qu’il est préférable, pour de nombreux utilisateurs du Web, de ne pas offrir d’information ou d’interaction exclusivement via “:hover” ou autre action qui nécessite l’utilisation de la souris. En effet, certains utilisateurs n’ont pas le contrôle neuro-moteur suffisant pour effectuer des déplacements subtils d’une souris. D’autres, dont la vision ne leur permet pas d’utiliser un écran et une souris, accèdent le Web entièrement avec un clavier et une synthèse vocale.

De nombreux développeurs pour le Web auront déjà pris en compte ces besoins d’accessibilité, mais d’autres auront sans doute eu du mal à voir pourquoi il faudrait “amputer leur design” pour un petit pourcentage d’utilisateurs aux handicaps divers. La prolifération des interfaces tactiles change la donne. Elle apporte avec elle une nouvelle démographie “handicapée de la souris”: un public souvent jeune, assez riche et prêt à adopter les nouvelles technologies. Et cela change tout.

1. bike stations with free docks (can you park?)
2. available bikes in each station (can you get a bike?)

for Montréal, Canada.

We like to experiment stuff and play with tools available around us. Most of the time, someone (a developer, someone in bizdev, etc) will get an idea or have a need, and ask Could we do that? Many of us at Pheromone are users of Bixi, the Montreal shared bike system. Sometimes, it is frustrating to reach a station to find out that everything is taken. Where are the closest stations around and in which directions. Bixar does just that. It creates a 3D overview of the position of bike stations and gives information about their vacancy status.

Jon Masse has developed the application using Layar and finally has ported his work on wikitude in 2 hours. Florin Gabor has created the logo, without forgetting the feedback and help of Olivier Théreaux, Sophie Leroy et Philippe Le Roux.

How to use layar on your phone?

For using layar on your phone you need to download the layar application, then you will be able to access a list of augmented reality layers.

How to use Wikitude on your phone?

For using wikitude on your phone you need to download the wikitude application, then you will be able to access a list of augmented reality layers.

Universal platforms

There are benefits to develop for open technologies and not be tied to proprietary technologies. The same way, we love opensource tools and open web standards, we are really looking forward to have an augmented reality format and apps that we could develop once and deploy everywhere.

Pictures of the application in action

1. les stations de vélos avec des places libres (puis-je me garer ?)
2. les vélos disponibles à chaque station (puis-je obtenir un vélo ?)

pour Montréal, Canada.

Nous aimons expérimenter et jouer avec les outils autour de nous. La plupart du temps, quelqu’un (un développeur, une personne aux développements des affaires, etc.) aura une idée ou un besoin, et demandera Pourrions nous le faire ? Nombre d’entre-nous à Pheromone sont des utilisateurs de Bixi, le système de partage de vélo de Montréal. Parfois, il est frustrant d’atteindre une station et de réaliser que toutes les places sont déjà prises. Où sont les stations les plus proches et dans quelles directions. Bixar répond justement à ce besoin. Il donne une vue 3D de la position des stations de vélos et donne de l’information sur le statut des places disponibles.

Jon Masse a développé l’application en utilisant Layar et puis finalement a porté son travail sur wikitude en 2 heures. Florin Gabor a créé le logo sans oublier les commentaires et revues de Olivier Théreaux, Sophie Leroy et Philippe Le Roux.

Comment utiliser Layar sur son téléphone?

Pour utiliser layar sur votre téléphone, vous devez télécharger l’application layar. Ensuite vous aurez la possibilité d’accéder une liste de calques de réalité augmentée.

Comment utiliser Wikitude sur son téléphone?

Pour utiliser wikitude sur votre téléphone, vous devez télécharger l’application wikitude. Ensuite vous aurez la possibilité d’accéder une liste de calques de réalité augmentée.

Plate-formes universelles

Il y a des bénéfices à développer pour les technologies ouvertes et de ne pas être piégées par les technologies propriétaires. De la même façon que nous aimons les outils opensource et les normes Web ouvertes, nous attendons avec impatience un format et des apps pour la réalité augmentée où nous pourrions développer une fois et déployer partout.

L’application en action

Open Data and Licenses

To really promote open data, it is necessary to use the appropriate licence. Glen Newton looked at the licenses of different data sets published by canadian cities. The terms of the licenses are too restrictive. It is important to ensure that people will be able to use the data freely. There are many ways of achieving that. One of them is using creative commons licenses. It enables people to reuse the data in many circumstances keeping the attribution credits.

Open Data in Canada

What about Canada? Not that bad. Many initiatives push in the right direction. Governments (federal and local), cities as well as civic organizations are publishing data. Often the licenses are not the right ones, but that can be fixed.

• Info Source Canada Gov
• Open Data Edmonton
• Open Data Nanaimo
• Open Data Ottawa See also Ottawa Data – open data ottawa blog – opendata apps directory
• Open Data Toronto
• Open Data Vancouver
• Open Data Links Canada
• Open Ottawa (Civic Organization)
• Canadian Gov data by citizens
• CivicAccess

Montréal ?

And Montréal. There are whispers of interests. But I do not know of any concrete initiatives yet. Have you heard something? How do we encourage Montreal city to share the data?

Montréal has data, a lot of data. The access could be improved (RESTful API, data format) and licenses clarified.

Update 2010-08-09 : See the comment. Montreal Ouvert (Open Montreal) has opened a Web site. That is an excellent news.

Notice anything unusual? What fascinates me is how the top third of the page mentioned locations in no less than three countries. How? Why?

Near the top-left of the page, I can see an icon depicting a Canadian flag, along with a link to the Canada-specific Yahoo! portal. What this means is that the Yahoo! system knows that I am browsing from Canada (I have been, therefore, geolocated). If you view the site from another country, chances are you will be getting a different flag and a different link. And if you view it from Spain? I do not know. When I do follow the hyperlink to Yahoo! Canada, I get a similar link to Yahoo! Quebec, and when I go to Yahoo! Quebec, I get a link to Yahoo! Canada.

Interestingly enough, one of the most common elements of personalised user experience is missing here: language selection. There is no way I can read the news from Spain in English – or indeed, in Català or Gallego. Neither do I get a “Français” link on Yahoo! Canada, or “English” on Yahoo! Quebec.

Knowing where I am, the system could assume I necessarily want to view local content in my local language and therefore redirect me to the Canadian/English portal. Fortunately, it does not, and lets me browse news from Spain as much as I like, and limits the effect of geolocation to a subtle but clear hint that local content is also available.

How do they do it? Most likely, the IP address of the machine I used to access the site was compared against a GeoIP database such as this one or that one. Note that, unlike in many mobile applications, the IP-to-location translation is done automatically, without ever prompting the user for her agreement.

Next in our exploration of the personalisation elements is the page-wide bar of text links, calls for action and teaser questions serving a single purpose: convert the visitor into a user, either by registering, or by logging into an existing account.

Notice how the bar employs about about every trick know to web designers to entice us to log in: give regular users a quick link to their well-known personal space; showcase some of the added value gained through registration (preview of my inbox, directly in my news portal); comfort the potentially puzzled new visitor (New here?) and tease the social fiber (What are you doing? – obviously a go at copying the now-abandoned twitter tagline?).

The most surprising element comes last. How come, given that I am not logged into Yahoo!’s system, I am shown a weather widget for the city of Tokyo, Japan? I could have understood if it were Madrid (local to the portal, with an educated guess about which city I may be interested in) or Montréal (through geolocation) – but Why Tokyo? And how?

How do they do it? I quickly validated my initial hunch: Yahoo achieved this through the use of cookies – although other client storage options such as the localstorage in html5 would have been just as valid. My problem here, however, is that:

• The cookies are opaque – even with a cookie browser (most browsers with developer extension offers one) I would hardly be able to know which cookie was telling Yahoo! thay my preferred location was Tokyo. I had to delete cookies, one by one, until the weather widget changed to a geolocated default of Montreal.
• I cannot tell how and when this cookie was set in my system. Sure, I could set my browser to have me validate any cookie sites want to store, but given how cookies are entirely opaque, how would I know the meaning and consequences of allowing Yahoo (of flickr, or any site in the Yahoo ecosystem) to store a cookie that sets key T to …CAuNRMqKiCOsvekk….

And there’s more… All these modes of personalisation have been enabled without me even logging into the system. Imagine the many personalised features that can be implemented for recurrent, identified users: social filtering (content that my friends like, for instance), content adapted to my choices or patterns of use (recommendations for you), and much more. Has any content-heavy site ever tried to recommend their users items that they are unlikely to “like”, or at least that they are likely to be surprised or challenged by?

The web is not print, however, and the embedding of nice typography seems to come with a few other issues: the first few site prototypes on which we worked with @font-face tended to be plagued with performance problems – a really big deal in our case, given that we manage high-traffic sites. The User experience of the pages we had tested was sub-par: slow loading times, blocks of text “jumping” after the actual font gets loaded, etc.

And yet, webfont services are popping like mushrooms and seem rather popular. I decided to give four of them a look, to see how good – and how fast – their service was.

My test page, based on fontsquirrel’s webfont comparison page loads the fonts from the 4 providers (unfortunately, fontdeck does not seem to offer the Cantarell fount, a common denominator between all other three services, hence the difference). The rest of my testing consists mostly of analysis of speed, HTTP headers and other tinkering through firebug.

Google Font Directory

Google’s webfont solution is “view source” friendly: one can copy-paste from another site and get the fonts working immediately. Their offering is still rather limited, but their site is no-nonsense, immediately usable, and does not require any signup, payment – indeed all the fonts provided are Open Source (distributed under Open Font License).

Google’s service is also pretty good with caching – their servers appropriately respond with a 304 not modified open a request, and they send proper Expires: and Last-Modified: HTTP Headers.

Font Deck

Setup with Fontdeck is relatively easy: one needs to register on their site, choose a few fonts, and get a piece of HTML and CSS code to use. While I ran into a silly UX issue and couldn’t find the code samples at some points (a case of bad whitespace and beyond-the-fold design), using the font deck web site is rather pleasant.

However, after setting up my test page by following all their instructions, I never managed to get the fonts to appear: the URIs given to me in the sample systematically resulted in “403 forbidden” responses. I could not test the performance of this solution yet.

Font squirrel

Font Squirrel is clearly different from the rest. Similar to the many foundry catalogs available for designers, it includes a really simple wizard to create a font-face kit from any (downloaded) font. Very geek friendly. This is also the only service that caters to site admins who want to host their fonts themselves, and it does not provide a hosted font-face service.

Typekit

One of the first service of the genre, Typekit also requires you to register yourself and your site. Javascript-based. Really similar to font-deck (which I believe it predates), Typekit will let you browse fonts for your site, and will provide a javascript snippet to add to pages to embed the fonts.

However, after setting up my test page by following all their instructions, I had trouble getting the fonts to appear: the URIs given to me in the sample systematically resulted in a “404 Not Found” response. It took me a while to understand (DOH!) that I had to choose fonts, add them to my site’s collection THEN publish in order for the system to work. My bad, their UX is really decent and I should really have understood this faster.

This solution is actually quite nice, as it allows me to choose which weight and style I want to include in my kit – which can be a big win for file weight, and thus performance.

Caching-wise, Typekit also behaves nicely, with the same combination of “304 Not Modified” response, Expires: and Cache-Control: HTTP Headers seen in Google’s service.

Their caching policy is much less aggressive than Google’s, however: while Google sends a cache directive for 14 days (Cache-Control: private, max-age=1209600), Typekit sends one for 300 seconds. I assume the reason for this difference is that with Google, you link to each individual font (which change very rarely), while with Typekit you link to your kit, which you may tinker with a lot. In any case, a cache policy of 300 seconds (5 minutes) is rather likely to cover the average visit, so this short timeout should hopefully not have too much of an impact on your visitor’s experience.

One thing I’m not a big fan of: the script Typekit gives you doesn’t just lets you embed fonts, it also adds a little Typekit logo on all your pages. Not cool. I assume that paid customers don’t get the pesky logo, but regardless, if a service is going to advertise itself on my site, I’d like to know in advance…

Anything Else?

Any other service you would like to see tested here? Any other indicator of performance or cost-effectiveness you would like to see in the table? Tell us in the comments and we’ll try to keep this page up to date.

The project is quite advanced, the blueprints have been created and we are almost ready to start working on building it. Then suddenly someone is raising his/her hand shyly and says:

“errr… sorry I may disrupt something… but where is the kitchen?”

The kitchen… The kitchen? The kitchen!!! Then everyone suddenly realize that the restaurant owner needs to cook to be able to deliver food on the tables of his/her customers and that this kitchen is very different depending on the type of food you are cooking. The restaurant owner also has specific habits, desires, tastes when managing his/her restaurants.

This story is happening too often in the Web industry business.

We spend a lot of time on the public UI of the Web site. We define the interactions (UX) in a way to maximize conversion ratio. We want the best possible user experience. And then we create a design. Later on, we realize that the design constraints are incompatible with the Content Management System which has been chosen.

The issue is that the CMS is often chosen too late by developers without keeping in mind very specific needs of the Web site owners. At best, the business rules will be customized for content catering, but not to the point where the UX of Web site kitchen (administration UI) will be part of the real work. All Drupal Web sites, WordPress, etc. will look the same on the kitchen side because we have forgotten about it.

Fuzzy?

Imagine you created a beautiful design where the first letter of the Web page is an initial and the requirement is that the owner of the Web site must be able to manage the content of the Web site.

• How do you handle the possibility of free text and the requirement of a specific html/css markup to create the initial?
• What is happening when the content editor is putting a space before the first letter in the form?
• Is the CMS hackable to do it?
• Will I have to modify the core of the CMS?
• How much will it cost to hack the CMS?

We often try to have a very pleasant Web site for the public. That’s fine. But we should not forget the kitchen of the Web site. It’s where the Web site owner will spend most of his/her time. If the UX is complex, doesn’t answer the basic needs of people in charge of making the site alive, the site will fail, create frustration from the Web site owners, and destroy the business relationship.

UX, design and development teams need to work together for the kitchen sink too.

This can sometimes goes as far as designing the UX of URIs. An example?

Take the CAPTCHA W3C specification, a simple and very dry document for most users who might read it. The URI is

http://www.w3.org/TR/turingtest/

Now add a ,tools at the end of the uri

http://www.w3.org/TR/turingtest/,tools

You access a list of tools to manage this content or do something with it. For example you can create a text version of the page.

http://www.w3.org/TR/turingtest/,text

or access the list of translations of this document

http://www.w3.org/TR/turingtest/,translations

It is very geeky in this context but it gives you an idea of where the UX can impact the design of your Web architecture.

Have you really thought about the kitchen sink? What are your techniques for designing the invisible? What are your tips for not missing the UX of Web site owners?

The mobile devices are bringing a lot of diversity to the Web world. That is good. It should encourage universal design, respect of Web standards and not designing systems for specific systems. Unfortunately, Web developers, designers are being caught in the way they designed past Web sites : Desktop designs. The experience is then being very poor on a mobile device.

Their first incentive is then to design yet another entirely new site that will be specific for the mobile. That is a mistake. Browser sniffing stinks, even more so with the mobile era. It’s a sisyphean challenge. Every year, new handsets, new specific browsers. Willing to sniff Webkit user agent string? There is no Webkit on mobile. The list of user agent strings can be daunting. And the future with the rise of mobile in North America, the tablets and ebooks readers will be colorful.

Design your Web site for any devices. If you want to create an experience on the mobile, then design specific applications for mobile devices. APIs should help here.

These are my notes for day 3 of the Mobile World Congress 2010, in Barcelona. For past entries, see my impressions on day 1 and my reading of the pre-summit consensus on mobile augmented reality on day 2.

This is day three of the congress and I think I am starting to get the hang of it! Orienting oneself in this maze of booths can be daunting at first, but one eventually finds the two or three exhibition halls most relevant to their business, and focuses on these areas.

The past couple of days brought me a new set of observations. I’d already noted on day 1 how much the congress was focused on hardcore technologies, with a strong showing by telco hardware vendors and video streaming/encoding/delivery, for instance, but it took me an incredulous two days to accept another conclusion.

Where is the Web?

The most strikingly absent word in all this congress was, in my opinion, “web”. Of the thousands of exhibitors, I think only one built their message around it, and it was nvidia, with banners claiming that they “power the mobile Web”. Quite a strange messaging from this video chipset vendor, which I would expect to claim to power mobile gaming, mobile video… but the web?

Other than nvidia, I think only the browser vendors were talking about the web. Opera had a decent presence, sandwiched between the enormous areas dedicated to Microsoft and Adobe; OpenWave was here too, and so were a number of browser vendors I did not know before, including for instance Bolt. Coming from North America where I suspect the mobile web usage is almost strictly limited to powerful, large-screened smartphones, one has to remember that other markets have a strong demand for Web browsing capabilities on smaller, less able handsets. The ability to download a “PC-like” browser capable of displaying CSS-styled, complex layouts on a tiny screens is a very big deal.

The absence of the “Web” word does not mean that the Web technologies are no longer relevant to the mobile world. On the contrary, I believe that no-one is talking about the Web because it has become such an integral part of mobile technologies. And thus, what used to be a buzzword has become the silent foundation, leaving more space for new darlings such as NFC, geolocation or others.

One such important buzzword this year is “mobile widget”, which in most case refers to packaged web application! In this area, one interesting announcement made during the congress was the opening of the Wholesale Applications Community. This looks like a joint effort from a number of vendors to fight the current fragmentation in mobile applications development, with Apple’s success causing every vendor and their dog to release their own apps platform and market. The announcement is still rather unclear about what technologies will be used, but it seems likely that they will build upon existing consensus on widgets.

Mobile Augmented Reality Summit

Day 3 of the congress was also the occasion for many actors in the “augmented reality” scene to come together and look at the state of the art, the state of the market, and most importantly, look at potential areas for collaboration.

And what a great meeting it was. 65 people joined the summit for more than 4 hours or passionate discussions on the themes of technology, business, user experience or privacy.

Interestingly enough, even after the summit, I still find it hard to define the scope of mobile augmented reality. At the moment, it tends to take the shape of applications superimposing layers of data (Points of Interest, most often) on a video feed, but there seems to be an agreement that this may not be, in the long run, the preferred mode of interaction. As one participant stated, “no-one likes to walk around with a mobile phone in front of their face”, and many agreed that AR was not a stated user need. Perhaps, we all agreed, we should look at Mobile AR as an enhancement to existing applications, but not necessarily standalone applications for a unique usage.

In the end, the best definition of Mobile AR (albeit vague) may be the one proposed by Vodafone’s Daniel Appelquist: Mobile AR is where the mobile platform bridges the digital and physical world.

More on the Mobile Augmented Reality summit in a matter of days, as soon as the embargo on the summit materials gets lifted.