Magazine Coaching

AJAX: les bonnes pratiques pour une ergonomie gagnante

Par Jcqualitystreet

Plus de fluidité, plus de souplesse, plus de confort pour les utilisateurs des applications web: c'est bien là l'intérêt d'Ajax, qui à petites doses, ici ou là, peut encourager et favoriser l'Expérience Utilisateur tout en obéissant aux principaux critères ergonomiques de conception.
Petites doses et 11 vraies bonnes pratiques illustrées...

Les technologies évoluent, les utilisateurs changent, l'activité, elle, reste: à nous de la garder au coeur de nos préoccupations et d'insister sur les éléments qui vont la faciliter. AJAX (Asynchronous Javascript And XML) qui se traduit entre autres par un rafraîchissement partiel, ciblé (et non pas total) d'une page web lors d'une interaction entre la page et l'utilisateur, fait partie de ces éléments facilitateurs.

On en fait depuis longtemps, on en parle depuis 2005; la maturité est là et de très nombreux frameworks existent aujourd'hui, plus ou moins bien ficelés...

Mais le plus intéressant, ce sont ces critères ergonomiques, feedback, contrôle utilisateur, adaptabilité, concision, gestion des erreurs... si essentiels pour les applications web qu'Ajax, utilisé à bon escient, va pouvoir satisfaire.
Attention, un feedback à double tranchant car sans un travail de qualité sur le feedback système, les bénéfices espèrés seront réduits à néant !

De bons exemples chez Kayak:

AJAX: les bonnes pratiques pour une ergonomie gagnante

ou encore

AJAX: les bonnes pratiques pour une ergonomie gagnante

Voici donc 11 bonnes pratiques AJAX potentiellement utilisables dans le cadre de vos applications web (pour autant qu'utilité et utilisabilité restent au RDV):

1 Autosave (enregistrement automatique)

C'est souvent trés pratique (notamment pour les messages) et ça peut dépanner parfois ...

AJAX: les bonnes pratiques pour une ergonomie gagnante

2 Autosuggestion (Autocompletion des critères de recherche ou l'affinage de ces derniers en fonction de ce que tape l'utilisateur)

La fin des listes interminables, mal fichues, inutilisables avec plus de confort

Google suggest
AJAX: les bonnes pratiques pour une ergonomie gagnante
L'âne gourmet
AJAX: les bonnes pratiques pour une ergonomie gagnante

3 Validation à la volée de données de formulaire (y compris vérification de la disponibilité d'informations login) Feedback immédiat et gestion des erreurs efficace Remember the milk

AJAX: les bonnes pratiques pour une ergonomie gagnante
Picnik
AJAX: les bonnes pratiques pour une ergonomie gagnante
4 Onglets intrapage Souplesse et réactivité comme si de rien n'était ... Yahoo finance
AJAX: les bonnes pratiques pour une ergonomie gagnante
5 Manipulation de données complexes (filtre / tri ...) Et vive l'interactivité ! Kayak
AJAX: les bonnes pratiques pour une ergonomie gagnante
Bluenile
AJAX: les bonnes pratiques pour une ergonomie gagnante
6 Courtes notes et bulles d'aide, au passage de la souris ça peut toujours servir, ça peut même devenir collaboratif... Flickr
AJAX: les bonnes pratiques pour une ergonomie gagnante

7 Dévoilement progressif, au clic, avec Popup

Enfin des variations dans les niveaux de détails avec à la clé concision et simplicité ...

AJAX: les bonnes pratiques pour une ergonomie gagnante
Banana republic

AJAX: les bonnes pratiques pour une ergonomie gagnante
puis
AJAX: les bonnes pratiques pour une ergonomie gagnante

AJAX: les bonnes pratiques pour une ergonomie gagnante
8 Dévoilement progressif, sur clic, avec plier / deplier

De l'incitation et une information toujours organisée et priorisée

Tripadvisor

AJAX: les bonnes pratiques pour une ergonomie gagnante
puis
AJAX: les bonnes pratiques pour une ergonomie gagnante

9 Drag & Drop d'éléments ou de blocs

Allez pourquoi pas... si c'est approprié et bien guidé ! (ce n'est toujours pas un comportement attendu dans un contexte web)

AJAX: les bonnes pratiques pour une ergonomie gagnante
AJAX: les bonnes pratiques pour une ergonomie gagnante
10 Vote à la volée

Toujours plus de réactivité, pour les fans de fonctions collaboratives...

AJAX: les bonnes pratiques pour une ergonomie gagnante
11 Menus déroulants riches (du DHTML en bonus)

Gains de place, vue d'ensemble ou plus ciblée et surtout accès direct à l'info...

AJAX: les bonnes pratiques pour une ergonomie gagnante

-

AJAX: les bonnes pratiques pour une ergonomie gagnante

-

AJAX: les bonnes pratiques pour une ergonomie gagnante

-

AJAX: les bonnes pratiques pour une ergonomie gagnante
AJAX: les bonnes pratiques pour une ergonomie gagnante

Retour à La Une de Logo Paperblog