Bonjour,
Je suis le développeur de Tracim, un logiciel web collaboratif de gestion et partage des connaissances et de versionning de fichiers.
La question que je me pose concerne la réalisation des interfaces utilisateurs, et de comment faire quelque chose de "sympa", c'est à dire perçu comme tel.
A l'origine, Tracim, c'était pod, et pour pod je m'appuyais sur les technos Bootstrap 2 et Font Awesome pour des icônes monochrome. Ca ressemblait à ça :
C'est en appliquant un style "explorateur windows"-like à la vue arborescente que j'ai trouvé que pod prenait un vrai look d'application, et j'ai finalement décidé de généraliser l'utilisation d'icônes multicolores en m'appuyant sur le set d'icônes Tango Icons. J'ai toutefois gardé FontAwesome pour certaines icônes, et le résultat, c'est Tracim tel qu'il existe aujourd'hui :
Ca fait plusieurs fois qu'on me dit que Tracim est pas très sexy. J'ai eu l'occasion de creuser un peu, mais les gens savent dire ce qu'ils éprouvent mais ne savent pas forcément expliquer pourquoi. Il semble qu'il y ait plusieurs "problèmes" pour qu'une interface semble "sympa", et le reproche fait à Tracim concerne notamment les icônes "un peu désuettes" (on préfère les icônes "flat" et monochrome genre Font Awesome), la vue un peu type "explorateur" qui ne donne pas envie (l'explorateur windows, les gens connaissent) ou encore les zones de travail et barres de menu peu contrastées (par rapport à ccGenie par exemple). Et par exemple, contre toute attente, on m'a indiqué que ccGenie était beaucoup plus attrayant que Tracim. ccGenie, ça ressemble à ça.
Quand je parle d'attrait, c'est d'un point de vue esthétique, mais également d'un point de vue "invitation à utiliser" : on a envie d'essayer une interface comme ccGenie plus qu'une interface comme Tracim (et donc un utilisateur va naturellement creuser et seul, là où Tracim va demander des efforts).
Ce que je cherche, ce n'est pas tant à savoir quelle est la meilleure interface qu'à comprendre ce qui fait qu'une interface est perçue comme attrayante ou pas attrayante.
Quel est votre avis sur le sujet ? Pourquoi ? Dans quel contexte ?
# mon avis, il n'engage que moi
Posté par Gauthier Monserand (site web personnel) . Évalué à 7. Dernière modification le 17 mars 2015 à 09:10.
ccGenie inclut la recherche et le tri "nativement", c'est bien intégré, on sent qu'avec 1000 documents on va moins galérer. Dans ton screenshot on voit déjà que ca déborde (un treeview qui déborde est plus moche qu'une liste qui fait de même), au bout de 10 secondes j'ai toujours pas compris comment chercher et trier.
ccGenie : les icones d'actions ont en plus un texte, sans prendre trop de place, cela facilite la compréhension. Dans tracim, je ne sais pas ce que ca va faire (suremement il y a t'il un tooltip mais ca demande un effort pour aller voir)
Dans ton screenshot à cause du Breadcrumb le titre est repris deux fois cote à cote ca fait bizarre. J'aurai mis le breadcrumb (sans le titre) au dessus du vrai titre, pour ne pas séparer le titre et le contenu.
J'aurai ensuite aligné verticalement les icones de droite sur le titre pour bien montrer le contexte auquel ils s'appliquent.
[^] # Re: mon avis, il n'engage que moi
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 4.
Merci pour tes remarques intéressantes et dont je vais tenir compte.
En fait, les retours "ça marche" / "ça marche pas" arrivent au premier coup d'oeil, sans même savoir ni l'objet du logiciel, ni ses fonctionnalités.
Pour le breadcrumb, par défaut il est masqué (donc ne coupe pas le titre du reste)
#tracim pour la collaboration d'équipe __ #galae pour la messagerie email __ dirigeant @ algoo
# Mise en page
Posté par Sygne (site web personnel) . Évalué à 10.
Au premier coup d'œil jeté sur les copies d'écran, je suis plus attiré par ccGenie moi aussi. Cela relève de la mise en page à mon avis. Je vais essayer d'exprimer cette impression:
Je penche donc pour une forme d'épuration de la page, en utilisant des contrastes forts pour hiérarchiser les blocs, des contrastes forts pour hiérarchiser les éléments textuels, de simples mots pour les menus, des formats simples pour l'information textuelle (en particulier les dates), et en supprimant toutes les icônes. Sur cette base, il sera plus facile de replacer des icônes pertinentes sémantiquement et visuellement.
[^] # Re: Mise en page
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 4.
Merci bcp pour ce retour détaillé.
#tracim pour la collaboration d'équipe __ #galae pour la messagerie email __ dirigeant @ algoo
# Un article
Posté par copapa . Évalué à 4. Dernière modification le 17 mars 2015 à 14:36.
J'ai retrouvé cet article vachement bien foutu (en anglais et en deux parties) qui donne quelques règles pratiques, exemples à l'appui pour créer des interfaces "qui marchent".
La règle 3 "Double your whitespace" semble particulièrement s'appliquer à la différence entre Tracim et ccgenie.
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
# La conception d'interfaces.
Posté par GaMa (site web personnel) . É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
[^] # Re: La conception d'interfaces.
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 3.
Ta réponse est hyper pertinente ; mais on est là sur un sujet d'ergonomie.
La question que je posais initialement était plutôt orientée "design".
Bon, maintenant, vu que 2 messages sur 3 sont des retours sur l'ergonomie, ça confirme qu'il y a pas mal de taff aussi de ce côté (ce que je savais déjà, mais là c'est cool, parce que j'ai des éléments extérieurs de réflexion).
Merci bien pour ton retour détaillé, les liens et les 200€ que tu m'offres. Ah ? J'ai mal compris ? ;)
#tracim pour la collaboration d'équipe __ #galae pour la messagerie email __ dirigeant @ algoo
[^] # Re: La conception d'interfaces.
Posté par GaMa (site web personnel) . Évalué à 8.
Niveau design, Sygne est plutôt juste (pour pas dire totalement :) )
Dans les liens que je t'ai filé il y a pas mal de truc sur le design aussi.
Mais je vais faire mon analyse (en essayant de pas faire doublon avec Sygne) :
Au niveau des couleurs :
Déjà, ça ne tranche pas avec le reste du navigateur. On a du mal à voir la différence entre ta barre de raccourcie et le menu de ton appli. Ton site se retrouve "parasité" par le navigateur. Pour ccgenie la démarcation est bien marqué et se retrouve donc isolé du reste.
De plus, de manière générale, il faut un contraste d'intensité plutôt qu'un contraste de couleur. Pour Tracim ça semble fade, il y a très peu de contraste d'intensité. Le peu qu'il y a est sur le rapport blanc/bleu.
Ensuite il faut définir des structures générales.
Si je prend les deux screenshots et que je les floutes (Et là, les images ont un flou gaussien de rayon 30 (dans gimp). Si tu appliques un rayon de 50, c'est encore plus flagrant. Mais j'ai la flemme de reupload les images mieux floutées):
Sur tracim, il y a rien d'utile qui ressort. Le seul éléments qui fait contraste, c'est la barre de scrolling du menu. Ça ne structure rien. On semble perdu.
Sur ccgenie, des zones apparaissent. On a deux bandes noires en haut. Une grosse sur le coté. On a deux zone blanche.
Ça structure la page. Le contenu principale, c'est la plus grosse zone blanche.
À gauche, c'est un menu (on a l'habitude qu'il soit ici) et il a le même thème que les deux autres menus en haut.
Les couleurs vertes se répondent aussi. On est dans une section (Document) qui a une couleur associée. Quand je vois du vert, je sais que je suis dans la section document. Pas de question à me poser, rien à lire (ok, faut avoir cliquer trois fois sur les sections pour connaître les couleurs, mais ça va vite, surtout avec les rappels en haut des boutons)
Au niveau de l'alignement aussi. Les deux contenus de ccgenie ressortent. On devine la structure en grille qui apparaît. Au niveau de Tracim, il y a rien.
Matthieu Gautier|irc:starmad
[^] # Re: La conception d'interfaces.
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 4.
J'ai pas encore regardé les liens que tu m'as donné, mais entre vos différents retours et liens, j'ai beaucoup à lire pour avancer.
Sinon, les images floutées sont hyper parlantes.
Je pensais pas avoir des retours aussi riches et complets, merci beaucoup !
#tracim pour la collaboration d'équipe __ #galae pour la messagerie email __ dirigeant @ algoo
[^] # Re: La conception d'interfaces.
Posté par NeoX . Évalué à 5.
parce que l'ergonomie c'est pas du design ?
[^] # Re: La conception d'interfaces.
Posté par xcomcmdr . Évalué à 2.
De même, un challenge n'est pas un défi (ou pas).
"Quand certains râlent contre systemd, d'autres s'attaquent aux vrais problèmes." (merci Sinma !)
[^] # Re: La conception d'interfaces.
Posté par LeBouquetin (site web personnel, Mastodon) . Évalué à 3.
Tu peux très bien faire du design sans ergonomie, c'est d'ailleurs souvent le cas : des sites web beaux mais pas fonctionnels.
Ma remarque était pour la résolution de problèmes genre "les menus à mettre en avant en fonction des usages des utilisateurs" alors que la question que je posais concernait l'impression que donnait l'une ou l'autre des interfaces, sans même savoir ce que faisait le logiciel (et donc parler des usages n'a pas de sens à ce stade de l'expérimentation).
#tracim pour la collaboration d'équipe __ #galae pour la messagerie email __ dirigeant @ algoo
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.