Forum Programmation.web [résolu] Design d'applications web - pourquoi "ça marche" ou "ça ne marche pas" ?

14
17
mar.
2015

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 :

Pod

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 :

Tracim

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.

ccGenie

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 (page perso) . Évalué à 7. Dernière modification le 17/03/15 à 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 (page perso) . É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)

  • # Mise en page

    Posté par (page perso) . É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:

    • ccGenie structure fortement sa page par un contraste de couleurs, et la pense comme une image qu'il n'est pas nécessaire de lire pour y trouver des repères. La page de Tracim est peu contrastée, et elle est construite comme un page de texte, qui doit être lue plutôt que vue.
    • Tracim semble fourmiller d'information, le regard cherche parmi elles celles qui sont pertinentes, ccGenie minimise la quantité d'information textuelles.
    • Tracim utilise des phrases (« Allow to reset password to […] Créé(e) le… »), ccGenie utilise de simples mots.
    • Tracim hiérarchise peu les éléments textuels, ccGenie utilise un double contraste (taille et couleur), de sorte que l'information secondaire apparaît effacée.
    • Outre le texte, Tracim incorpore dans la page tout un ensemble d'éléments qui viennent parasiter la lecture: la petite icône bleue à droite du titre, les flèches vers le bas ou la droite des menus déroulants, les slash dans le menu « espace de travail, développement, bugs », etc.
    • Icônes et textes sont redondants sur la page de Tracim. Mieux vaudrait peut-être se contenter de l'un ou de l'autre, selon les cas. Par exemple, espace de travail n'a pas nécessairement besoin d'une icône de bureau.
    • Les lignes grises, horizontales et verticales, sur la page de Tracim sont probablement symptomatiques: elles sont censées hiérarchiser la page, mais la complexifient finalement en ajoutant encore un élément visuel et sémantique.

    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.

  • # Un article

    Posté par . Évalué à 4. Dernière modification le 17/03/15 à 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 (page perso) . É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) :

    • 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.

    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 (page perso) . É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 ? ;)

      • [^] # Re: La conception d'interfaces.

        Posté par (page perso) . É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):

        tracim

        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.

        ccgenie

        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 (page perso) . É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 !

      • [^] # Re: La conception d'interfaces.

        Posté par . Évalué à 5.

        mais on est là sur un sujet d'ergonomie.
        La question que je posais initialement était plutôt orientée "design".

        parce que l'ergonomie c'est pas du design ?

        • [^] # Re: La conception d'interfaces.

          Posté par . É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 (page perso) . É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).

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.