Design d’application web : quatre exemples remarquables (qui ne sont pas tombés dans le piège de l’overdesign)

by
   

Plusieurs ingrédients sont nécessaires pour obtenir une interface agréable à utiliser : de bons gabarits, des fonctionnalités bien organisées, de bons textes et libellés, des styles graphiques qui respectent les principes de l'ergonomie (contraste, affordance) et … ce petit je ne sais quoi.

Bien souvent, ce qui manque le plus, c'est un peu de sobriété. Tout ce passe comme si les designers graphiques web tombent souvent dans le piège de trop vouloir en faire; de faire de « l'overdesign ».

Voici 4 applications web qui m'impressionnent par leur maîtrise de tous ces aspects.

Artsy    

Artsy est un site applicatif qui répertorie les œuvres d'art disponibles dans les galeries d'art du monde entier. Comme la plupart des bons sites applicatifs, Artsy offre l'authentification sociale, c'est-à-dire la possibilité de créer un compte connecté à son compte Facebook ou Twitter.

Fenêtre de création de compte en surimposition.

Un design minimaliste qui fonctionne

Malgré la difficulté de concevoir un flat design sans nuire à l'ergonomie, le site d'Artsy s'en tire admirablement bien. Le style minimaliste du site, presque tout en noir et blanc, laisse toute la place aux œuvres d'art, sans leur porter ombrage.

Le détail : surimposition de texte sur image

Avec le texte qui s'affiche soit en noir ou en blanc en fonction de la tonalité de l'image de fond, la surimposition de texte sur les images fonctionne à tout coup. Ayant travaillé sur un site qui n'a pas pu se payer le "luxe" d'avoir cette fonctionnalité, je l'apprécie particulièrement.

La couleur du texte s'inverse selon la teinte de l'image de fond.

Trello

Parmi toutes les applications de gestion de projet (et plus précision de gestion de backlog agile), Trello se distingue par sa simplicité d'utilisation remarquable, malgré une richesse fonctionnelle de plus en plus grande.

L'engouement pour cette application, qui a déjà plus de 4 millions d'utilisateurs, est pratiquement épidémique. Certains s'en servent pour gérer les candidats à un emploi, d'autres comme d'un entonnoir de vente ou encore pour gérer des projets web. Trello a d'ailleurs beaucoup d'adeptes chez Adviso, moi le premier.

Écran d'accueil d'un board dans Trello
Écran d'accueil d'un board dans Trello

Le détail : l'interface de création d'une carte

Comparons une des interfaces de Trello avec celle d'une application similaire, Pivotal Tracker, qui a une excellente réputation elle aussi.

On voit ci-dessous l'interface de départ pour créer une nouvelle carte (ou story en vocable agile) dans les deux logiciels. S'il est vrai que Pivotal Tracker offre quelques fonctionnalités de plus Trello (Points, Story type notamment), l'approche de Trello est radicalement différente. En ne montrant pas toutes les options disponibles dès le départ, Trello est beaucoup plus facile d'approche. Dans l'interface de Pivotal, on a l'impression de devoir comprendre et remplir tous ces champs.

Trello vs Pivotal Tracker. Comparaison de l'interface minimale pour créer une "carte".

Github

Github est une sorte de réseau social pour les programmeurs, qui y partage leur code source et permettre de mettre en valeur leurs accomplissements en programmation. Cela dit, son influence dépasse le domaine de la programmation.

La page de profil de Paul Irish, programmeur prolifique travaillant sur le logiciel Chrome chez Google

L'interface du site, de même que celle de l'application, frôle la perfection à tous les égards. D'ailleurs, un guide de style CSS, accessible à tous, inventorie tous les éléments d'interface qui composent l'application. Ayant déjà écrit sur la pertinence de créer un guide de style web cohérent, je ne peux qu'admirer le travail de Github.

Cette base solide explique peut-être la qualité exemplaire des interfaces de Github. Mais conserver un tel niveau de qualité demande certainement un effort constant. Mark Otto, designer chez Github (et créateur du framework Bootstrap) a d'ailleurs décrit le processus de design d'un seul des dizaines d'écrans de l'application. À le lire, on comprend que ça ne s'est pas fait en une après-midi.

Teux Deux

Teux Deux est une application individuelle de gestion de tâches. Conçue par Tina Roth Eisenberg (qui a par ailleurs fondé Creative Mornings), l'application TeuxDeux séduit par son minimalisme fonctionnel.

Le détail : le ton irrévérencieux

Au-delà de l'application elle-même, dont l'interface minimaliste est très réussie, les textes qu'on trouve sur le site sont humoristiques et souvent irrévérencieux, en particulier sur la FAQ.

teuxdeux
Il n'y a que deux types d'abonnements disponibles, mensuels et annuels, qu'ils ont eu la bonne idée de renommer respectivement « sceptique » et « croyant ».

Conclusion

Il existe bien sûr beaucoup d'autres applications web particulièrement réussies. Je pense par exemple à MailChimp, qui propose une interface sympathique et coloré, mais très ergonomique malgré tout.

Palette de couleur de MailChimp. 

Mais il y a aussi plusieurs qui malheureusement évoluent dans la mauvaise direction en ce moment. Je pense notamment à :

Delicious : Depuis qu'elle a été rachetée (auparavant une application de Yahoo), la lenteur du site est phénoménale. Parfois 5 secondes pour afficher une simple liste de liens. Probablement pour inciter les utilisateurs à cliquer sur les bannières publicitaires qui elles, s'affichent rapidement. Assez pour me convaincre d'ouvrir un compte sur Pinboard, un service similaire mais payant.

Klout : Ils s'éloignent de leur mission première (calculer une métrique d'influence) et introduisent des fonctionnalités conçues avec peu de souci ergonomique.

iOS (Apple) : La version 7 manque d'affordance. Lire Quand le flat design nuit à l'ergonomie.

 Subscribe to the Checkpoint

Subscribe to our monthly email newsletter for useful tips, best practices and news from the Adviso team. At any time you will be able to unsubscribe. Privacy policy.

If you prefer to contact us at

consulting@adviso.ca

Or call us directly at

514 598 1881

Thank you for your request!

You will hear from us shortly.

×

An error has occurred

Please contact us directly by email at conseil@adviso.ca or by phone at 514-598-1881. Thank you!

×

 

COMMENTS

Leave a Reply

XHTML: Tags allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>