J’ai déjà plusieurs occasions de vous parler des design pattern library (Vive les librairies de modèles de conception d’interfaces et Et on reparle des bibliothèques de modèles de conception), par contre je n’avais jamais abordé les librairies qui concernent les interfaces mobiles. Un manquement impardonnable tant le sujet est chaud (Pourquoi iOS est plus disruptif que vous ne le pensez) et le besoin est pressant (2011, l’année du point de bascule).

Je vous propose donc ce matin de découvrir plusieurs sources d’inspiration pour concevoir vos interfaces mobiles, principalement des interfaces d’applications pour smartphones. Commençons avec Mobile Patterns, une collection d’interfaces mobiles réparties dans une quinzaine de catégories :

Il y a ensuite Pttrns qui propose un équivalent, mais avec une trentaine de catégories :

Il y a enfin LovelyUI qui propose moins de catégories, mais un système de tags bien pratique :

Il existe d’autres sources, mais ces trois bibliothèques devraient vous fournir tout ce dont vous avez besoin pour avoir une vue synthétique des meilleurs pratiques de conception d’interfaces mobiles. Ces bibliothèques présentent l’avantage de classer les interfaces dans des catégories, par contre elles sont très loin d’être exhaustives. C’est pourquoi je vous recommande également Cocoa Controls, une base de référence de l’ensemble des éléments d’interfaces des interfaces Mac (avec une section pour les contrôles iOS). Dans le même style, je peux également vous recommander Android Patterns qui propose une sélection d’éléments d’interface propres au système d’exploitation mobile de Google.

Si vous ne cherchez pas particulièrement des exemples de composants d’interface, simplement l’inspiration, je peux enfin vous proposer quelques collections d’interfaces : CSS iPhone, Make Better Apps, Tap Fency, Refined Mobile Design, Dribbble ou Ember.

Pour finir, si vous avez encore un peu de temps, faites donc un détour par Landing Pad (collection d’interfaces d’applications iPad) et AppSites (collection de sites web d’applications mobiles).

(via UX Movement et Mobile GUI)

Connaissez-vous Hipmunk ? Mais si enfin, un moteur de recherche de vols qui en quelques mois est devenu la nouvelle coqueluche de la Silicon Valley : Hipmunk’s dazzling new view of flight search, Hipmunk Is a Fantastic, Surprisingly Usable Flight Search Site… Pourquoi un tel engouement ? Tout simplement parce que Hipmunk est un service beau, simple et efficace à utiliser. Ce postulat vous semble peut-être simpliste, mais c’est ce qui a fait le succès de Google face à des portails devenus trop chargés et complexes (un peu comme les portails de voyage en fait). Jusqu’à présent, la référence en matière de recherche de vols d’avion était selon moi Orbitz :

Mais maintenant que j’ai testé Hipmunk, je suis accro ! Cette nouvelle expérience de recherche commence donc par une page d’accueil ultra-simple composée uniquement d’un formulaire de recherche simplifié (ça ne vous rappelle pas Google ?) :

Je n’ai pas grand-chose à redire sur ce formulaire, si ce n’est la visibilité des liens en haut à droite (deux onglets et un petit bouton à gauche de « Search » auraient un meilleur impact).

Arrive ensuite la page de résultats à la lisibilité exemplaire :

La clé de cette lisibilité réside dans une représentation visuelle très riche en couleurs (pour focaliser l’attention et faciliter la comparaison) et une absence de « bruit » (pas de distraction inutile). En fait cette interface est plus complexe qu’elle ne le laisse voir au premier abord (principe de simplexité), il est ainsi possible d’activer un certain nombre de tris, filtres et fonctionnalités en explorant les zones périphériques :

Sur cette page nous trouvons donc :

1. Des tirettes pour ajuster la plage horaire (départ / arrivée) ;
2. Un basculement vers les jours suivants (filtre par date de départ) ;
3. Un filtre par usages (pas de départ la matin, pas d’escale…) ;
4. Des regroupements de vols aux caractéristiques similaires (pour n’afficher que le plus intéressant) ;
5. Les détails du vol affichés au survol de la souris ;
6. Une aide en ligne.

Il y a également des options de tri discrètes, mais très bien positionnées (« Sort by« ) ainsi qu’une indication du vol le moins cher (en bleu dans la colonne de gauche). La manipulation de l’interface est parfaitement intuitive et le jeu de couleurs des fonds de lignes permet de faciliter la compréhension.

Bref, c’est du très bon travail. Cette interface devrait en inspirer plus d’un !

Et si vous avez encore un peu de temps à accorder à Hipmunk, je vous recommande vivement un détour par le blog officiel du service qui est un modèle de proximité (montrer un visage humain du service) et de transparence (un ton éditorial très accessible) : @theHipmunk Blog.

Si je m’en tiens à la définition de Wikipedia : « Un site Web est un ensemble de pages Web hyperliées entre elles« . OK, mais qui a dit qu’un site web devait nécessairement être composé de plusieurs pages ? C’est sur cette réflexion que le blog Six Revision nous propose un article très intéressant : The Science Behind a Single Page Website.

Les arguments en faveur d’un site web à page unique sont les suivants :

• Tout le contenu est chargé en une seule fois ;
• Scroller est moins compliqué et risqué que de cliquer ;
• La maintenance est plus simple ;
• La densité d’information favorise un meilleur référencement.

Les arguments en défaveur des sites web à page unique sont les suivants :

• Le site est plus long à charger ;
• Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ;
• Les utilisateurs peuvent être désorientés.

Une fois ces arguments énoncés, la visite d’un certain nombre de sites à page unique a finalement réussi à me convaincre de l’efficacité de cette technique : 30 Outstanding Single Page Website Designs, 88 Single Page Website Designs For Design Inspiration, 50 Examples of Modern Single Page Website Designs et aussi One Page Love.

Au final, si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace. Prenons par exemple les sites dédiés à des applications mobiles qui peuvent se contenter d’une description, de quelques captures d’écran et d’un détail des fonctionnalités en bas de page comme Camera+ ou Goin’ Nutty :

De même, il existe un certain nombre d’applications en ligne à périmètre restreint qui ne nécessitent pas un site à plusieurs pages comme Silverback (ou dans une certaine mesure Basecamp), le contenu est réduit au strict minimum et est déroulé sur la hauteur de page :

Même chose pour Coda qui propose par contre un système d’onglets intérieurs pour réduire la hauteur de la page :

Beaucoup plus intéressant, certains sites marchands se content également d’une seule page comme ici pour ce modèle unique de noeud papillon chez Blixt & Dunder :

Cet exemple n’est pas le seul, car il est également possible d’en faire de même pour des produits dématérialisés comme chez Red+White.

Dernier exemple avec Grooveshark, un service d’écoute de musique en ligne :

Au final en cherchant un peu, vous pouvez vous rendre compte qu’un site avec une page unique bien conçue peut faire beaucoup mieux qu’un site avec plusieurs pages et du contenu éparpillé. Bien évidemment ceci ne concerne qu’une minorité de sites, mais cette solution me semble tout à fait viable à partir du moment où l’information apportée est pertinente et que les fondamentaux ergonomiques sont respectés (lisibilité, hiérarchisation de l’information…).

Je suis fan, pas vous ?

Comme chaque année depuis 2005, la société norvégienne Netlife Research nous propose son Bad Usability Calendar. Comme son nom ne l’indique pas il s’agit en fait d’un simple calendrier avec une bonne pratique à respecter par mois :

Un moyen simple de se motiver… ou d’envoyer un message fort à votre patron ! Soyez particulièrement attentifs aux mois d’avril, juin, juillet et octobre.

Pour aller plus loin vous pouvez aussi vous procurer le très bon memento Ergonomie Web.

Je ne sais plus qui a dit : « L’interface parfaite n’est pas celle où l’on ne peut plus rien ajouter, mais celle où l’on ne peut plus rien retirer« . En tout cas pour certains c’est un dogme, et même pour certaine comme SwissMiss qui a récément participé à la conception de TeuxDeux, une application en ligne de gestion de tâches.

Particularité de cette application en ligne : une simplicité à toute épreuve.

Je ne peux que m’incliner devant l’efficacité et la sobriété de cette interface : un champ et une colonne par jour avec des flèches pour avancer ou reculer la date, une zone de tâches sans échéances et la possibilité de rayer ou supprimer la tâche au survol de la souris.

Rien à redire, c’est du grand art.

Il existe deux types d’interfaces : les interfaces physiques avec des boutons (intuitifs mais compliquées à mettre en oeuvre, exemple : une table de mixage) et les interfaces virtuelles sur des surfaces tactiles (simples à mettre ne oeuvre mais pas toujours intuitive, exemple : application iPhone).Il n’y a pas réellement de rivalité, mais ces deux types possèdent chacun des avantages et inconvénients qu’il faut bien mesurer avant de se lancer.

Une équipe de l’université de Carnegie Mellon propose cependant un compromis tout à fait intéressant avec une interface tactile gonflable qui reproduit le relief des boutons : Next For Touchscreens: Temporary Pop-Up Buttons?.

Le principe est simple : une couche souple avec des zones en creux ou reliefs par succion ou aspiration de l’air dans certaines zones. Le résultat est tout à fait surprenant car il donne du relief aux interfaces tactiles :

Un principe très intéressant car il cela permet de mieux restituer l’état d’un bouton (enfoncé ou pas) mais nécessite tout de même un peu de travail. Le résultat est tout de même très encourageant et il existe ainsi de nombreuses combinaisons :

À quand une utilisation dans les bornes de gare ou les distributeurs de billets ?

(via Reaction)

Et puisque l’on est dans les interfaces innovantes, je vous propose également de découvrir cet étonnant logiciel de crayonnage 3D : Rhonda.

Le principe est de combiner une palette graphique avec une souris 3D. Rien de très spectaculaire, mais ce dispositif semble fonctionner rudement bien dans la vidéo suivante :

J’imagine tout à fait l’intérêt que peut représenter cette application pour le développement d’objets 3D dans des univers virtuels « ouverts » comme Second Life / Opensim ou dans des plateformes de User Generated Games.

(via Today & Tomorrow)

J’ai eu la chance d’assister cet après-midi à une démonstration de la Reactbale. Il s’agit d’un instrument de musique électro-acoustique créé conjointement par le Music Technology Group et l’université Pompeu Fabra de Barcelone. La particularité de la Reactable est de proposer une interface tangible pour un usage à mi-chemin entre la table Surface de Microsoft et la GrooveBox de Roland.

Le principe est de créer des mélodies (ou des arrangements mélodiques) à l’aide de petites plaquettes en plastique ayant différentes propriétés :

• Les plaquettes carrées produisent des sons ;
• Les plaquettes carrées à coins arrondis servent de filtres ;
• Les plaquettes rondes servent d’ondulateurs ;
• Les plaquettes en forme d’étoile changent les paramètres du tempo général ;
• Les blocs produisent des séquences…

Lorsque vous déposez une plaquette sur la table, elle est reconnue grâce à une caméra optique et commence à interagir avec les autres plaquettes. Là où ça devient intéressant, c’est qu’il est possible de moduler les sons en fonction de l’orientation et de la proximité des plaquettes. Des curseurs projetés autour de chaque plaquette permettent également de modifier le comportement de ces dernières, comportement qui est représenté par une oscillation sur la table (pour certain son cela ressemble à une onde, pour d’autres à des impulsions).

Voici une courte vidéo qui illustre mieux le fonctionnement :

Le promoteurs présentent la Reactable comme un instrument collaboratif (plusieurs personnes peuvent « jouer » dessus en même temps, très intuitif et évolutif (il convient aussi bien aux novices qui bidouillent qu’aux musiciens professionnels qui font des arrangements complexes).

Du point de vue de l’intuitivité, je dois reconnaître l’incroyable facilité de prise en main de la table : il suffit de poser les plaquettes carrées pour produire des sons, de les associer avec des filtres et de faire varier les réglages. Il y a de plus une dimension pédagogique non-négligeable puisque la représentation visuelle des sons permet de mieux appréhender des concepts comme la fréquence ou l’amplitude.

Les universitaires associés au projet y voient également un moyen de faire comprendre les sons aux enfants (et notamment aux bébés) ainsi que les interactions.

Bien évidément il n’est pas question de mettre ça en pratique dans votre site web dès demain (quoi que… Auditorium est fondé sur un principe assez proche), mais je trouve cette innovation particulièrement inspirante (inspirationnelle ?). Il existe un équivalent en Flash chez OrganeLabo mais connaissez-vous d’autres exemples d’interfaces similaires ?

MàJ (06/07/2009) : On me signale l’existence des AudioCubes qui ont un principe de fonctionnement similaire (interactions entre cubes) et qui utilisent des senseurs de proximité : Making loops with single AudioCube.