Si il n'y a qu'une seule règle à retenir, c'est qu'il faut concevoir ton interface non pas en fonction de ce que ton soft propose mais en fonction de ce que tes utilisateurs veulent faire. C'est con à dire, mais c'est primordial.
Et ça nécessite de bien identifier tes utilisateurs et leurs besoins. Selon à qui tu t'adresses, un "même" soft n'aura pas la même interface.
Donc une fois que tu as identifier tes utilisateur et leurs besoins, faut concevoir l'interface en fonction. Là tu as aussi différentes règles (qui se recoupent) :
Une interface est faite pour être utilisé. Par pour représenter la structure interne des données de l'appli.
Les besoins récurrents doivent être faciles à faire.
À contrario, les besoins rares peuvent être compliqués à faire.
Réduire la charge cognitive (moins tu réfléchis, plus facile est l'interface).
L'utilisateur doit toujours savoir où il est, où il en est, où il va.
Le résultats des actions doit être prévisible.
Facile à faire, ça veut pas dire rapide (même si ça peut avoir son utilité), mais que les action à faire soit claires et non ambiguës. Pour cela:
Les boutons des besoins récurrents sont mis en avant.
Les besoins similaires se résolve par des actions similaires. Ajouter un document et un contact doit suivre le même schéma. Soit c'est Ajouter->Type d'object->Où, soit Type d'object->Ajouter->Où, soit Ou->... Mais c'est pas l'un pour le document et l'autre pour le contact.
Si on applique ces règles à Tracim :
Comme je ne connais pas tes utilisateurs, je vais supposer que ce sont des gens qui n'ont pas envie de se faire chier à apprendre un soft et qu'ils veulent un truc facile à utiliser, pas un truc technique. (dans leur langage, ils veulent une interface sexy/sympa/jolie)
Sur le site de Tracim, il est dit :
Collaborez avec vos clients et partenaires
Animez une communauté d'experts ou de passionnés
Documentez vos projets, travaillez avec vos équipes nomades
Gérez vos fichiers en toute traçabilité
Donc on va gérer des clients/partenaires, des communautés (des discussions), des projets, des équipes et des documents/fichiers.
Donc je regarde ton screenshot : pas de clients, discussions, projets ou documents. Pourtant c'est ça qu'on s'attend à voir puisque c'est ça qu'on va gérer.
Sur ton menu principal : "Tableau de Bord", "Espace de travail", "Admin"
"Tableau de Bord", "Espace de travail", c'est quoi ? C'est pas la même chose ? Pour ton appli c'est peut-être différent mais pour un utilisateur c'est kif-kif. Si je vois deux boutons pour ce que je considère comme la même choses => Je sais pas sur quoi cliquer, je sais pas ce que ça va faire. Je clique pas. Je ferme ton appli et j'y revient pas.
"Admin" ? Qu'est que ça fait là ? La configuration, je vais la faire une fois au début (et encore, si je suis l'admin). Le bouton "admin", te le mets dans un sous-menu et tu ne pollue pas l'interface avec un bouton qui sert à rien.
Et où je suis ? Dans le "tableau de bord", dans "l'espace de travail" ? Il faut que j'aille voir plus bas (charge cognitive) pour savoir que je suis dans l'espace de travail (qui plus est, a la même icône que le tableau de bord plus haut)
Dans ccGenie, c'est clair : "Documents", "Conversations", "Notes", "People". Je sais directement de quoi ça parle. Et le bouton documents est mis en avant, je sais tout de suite que je suis dans cette section.
Certes il y a un bouton settings dans un coin, mais il passe inaperçu au premier coup d’œil et je le vois si je le cherche. (Il est dans le coin haut-droit, comme dans 90% des appli web du moment)
Le menu de gauche.
La liste de tout les bugs, on s'en fout (surtout si on peut pas les lires en entier). Si je veux voir tout les bugs, ça sera mon action principale. Donc je les veux dans ma fenêtre principale.
Sur ccGenie : un filtre. C'est une action secondaire (donc sur le coté) mais vachement utile (donc accessible directement). Et il y a fort à parier que si je clique sur "Notes" je me retrouve avec un filtre dans le menu de gauche pour filtrer mes notes (consistance de l'interface)
Les boutons à droite.
J'ai aucune idée de ce que ça fait.
Sur ccGenie : Un bouton "Ajouter un document".
Je veux ajouter un document ?
Avec Tracim, je fait quoi ? Je vais où ?!
Avec ccGenie, j'ai un bouton document, je clique dessus, j'ai un bouton ajouter. Terminer!
Pour résumer:
Liste les actions qu'un utilisateur va vouloir faire.
Classe les par ordre d'importance.
Trouve des schémas d'utilisation.
Structure ton interfaces en fonction de ces schémas.
Dans la mesure du possible, fait des tests utilisateur et recommence au point 1 :)
Un fois que tes schémas sont bons et que ton interface fonctionne, prends un graphiste pour mettre des couleurs et de jolies icônes.
# La conception d'interfaces.
Posté par GaMa (site web personnel) . En réponse au message [résolu] Design d'applications web - pourquoi "ça marche" ou "ça ne marche pas" ?. Évalué à 10.
Généralité
Si il n'y a qu'une seule règle à retenir, c'est qu'il faut concevoir ton interface non pas en fonction de ce que ton soft propose mais en fonction de ce que tes utilisateurs veulent faire. C'est con à dire, mais c'est primordial.
Et ça nécessite de bien identifier tes utilisateurs et leurs besoins. Selon à qui tu t'adresses, un "même" soft n'aura pas la même interface.
Donc une fois que tu as identifier tes utilisateur et leurs besoins, faut concevoir l'interface en fonction. Là tu as aussi différentes règles (qui se recoupent) :
Facile à faire, ça veut pas dire rapide (même si ça peut avoir son utilité), mais que les action à faire soit claires et non ambiguës. Pour cela:
Si on applique ces règles à Tracim :
Comme je ne connais pas tes utilisateurs, je vais supposer que ce sont des gens qui n'ont pas envie de se faire chier à apprendre un soft et qu'ils veulent un truc facile à utiliser, pas un truc technique. (dans leur langage, ils veulent une interface sexy/sympa/jolie)
Sur le site de Tracim, il est dit :
Donc on va gérer des clients/partenaires, des communautés (des discussions), des projets, des équipes et des documents/fichiers.
Donc je regarde ton screenshot : pas de clients, discussions, projets ou documents. Pourtant c'est ça qu'on s'attend à voir puisque c'est ça qu'on va gérer.
Sur ton menu principal : "Tableau de Bord", "Espace de travail", "Admin"
Et où je suis ? Dans le "tableau de bord", dans "l'espace de travail" ? Il faut que j'aille voir plus bas (charge cognitive) pour savoir que je suis dans l'espace de travail (qui plus est, a la même icône que le tableau de bord plus haut)
Dans ccGenie, c'est clair : "Documents", "Conversations", "Notes", "People". Je sais directement de quoi ça parle. Et le bouton documents est mis en avant, je sais tout de suite que je suis dans cette section.
Certes il y a un bouton settings dans un coin, mais il passe inaperçu au premier coup d’œil et je le vois si je le cherche. (Il est dans le coin haut-droit, comme dans 90% des appli web du moment)
Le menu de gauche.
La liste de tout les bugs, on s'en fout (surtout si on peut pas les lires en entier). Si je veux voir tout les bugs, ça sera mon action principale. Donc je les veux dans ma fenêtre principale.
Sur ccGenie : un filtre. C'est une action secondaire (donc sur le coté) mais vachement utile (donc accessible directement). Et il y a fort à parier que si je clique sur "Notes" je me retrouve avec un filtre dans le menu de gauche pour filtrer mes notes (consistance de l'interface)
Les boutons à droite.
J'ai aucune idée de ce que ça fait.
Sur ccGenie : Un bouton "Ajouter un document".
Je veux ajouter un document ?
Avec Tracim, je fait quoi ? Je vais où ?!
Avec ccGenie, j'ai un bouton document, je clique dessus, j'ai un bouton ajouter. Terminer!
Pour résumer:
Tu peux aussi aller choper les poly des cours que j'ai eu sur le sujet : http://www.groupes.polymtl.ca/log2420/Seances/20151/
Ainsi que les principes de Tognazzini qui regroupent en bien mieux tout ce que j'ai raconté (et plus).
Ça fera 200€ :)
Matthieu Gautier|irc:starmad