Cesium v1 - Idées d'UX et version pour les faux codeurs

Salut,

Ces derniers temps j’ai appris un peu d’AngularJS, d’AngularUI-Router et d’Ionic dans l’espoir de pouvoir bidouiller un peu l’interface de Cesium.

Comme je me suis rendu compte que comprendre correctement le code de Cesium allait longtemps rester hors de ma portée, j’ai décidé de repartir plus ou moins de 0 pour faire une version à ma sauce, mais en mode « coquille vide », c’est-à-dire une version pas fonctionnelle pour un sous, mais qui me permet d’émettre quelques idées, de façon plus efficace que par l’écrit ou des montages toujours fastidieux (et parfois pourris) sous GIMP.

Ça donne ça : http://uploads.borispaing.fr/cesium/mockup/

(faites F12 et cliquez sur les petits smartphones en haut pour accéder à la vue mobile)

menu

Le QR code accessible facilement pour permettre à nos « clients » de le scanner facilement en IRL. Les 8 premiers caractères de la clef sont affichés dans l’entête, histoire que les gens aient plus de chance de s’en souvenir.

account_key

Une interface un peu plus minimaliste pour la recherche :

annuaire

Je n’y connais rien en performances, mais j’imagine que ne pas afficher la liste des nouveaux membres ici peut alléger un chouia la blockchain.

La mise en valeur des donateurs (pour inciter d’autres à donner) :

news_patrons

La mise en valeur des développeurs (pour inciter d’autres à participer) :

news_dev

Les statistiques sur la monnaie (mais pas les règles) et la liste des nouveaux membres sont regroupées ici :

news_evolution

Appel à l’action :

support

Et comme je me dis qu’il y a peut-être dans la communauté ML pas mal de gens qui comme moi savent bidouiller HTML et CSS mais pas Javascript, j’ai publié cette version simplifiée du code ici (avec quelques explications dans le README.md) :

6 Likes

Merci beaucoup @anon88550267 pour cet incroyable travail d’UX dont nous avons grandement besoin, j’espère que les développeurs de cesium v2 reprendrons tes maquettes car elle permettrait vraiment de rendre l’appli plus user-friendly tout en créant plus de lien utilisateurs<->développeurs, ça me semble être le chemin a prendre :smiley:

1 Like

C’est claire, j’ai installé et testé un peu CesiumV2 ya quelques jours et je vois que c’est encore aux balbutiements, ya que Benoit qui commit de temps en temps mais que ya pas vraiment de communication à ce sujet auprès des devs.
Justement c’est le moment pour intégrer plus facilement le code parceque pas mal de truc ont été refait, il manque encore plein d’intégration central avec la blockchain. Jme dit pour un dev c’est plus simple et intéressant d’entrer dans un projet neuf et pas finit qu’un projet en prod et déjà conséquent.

@anon88550267 tu a testé le code de Cesium-v2 ?

1 Like

Non pas encore, et c’est passé sous Angular (en remplacement d’AngularJS), donc c’est du Typescript, que je ne connais pas, donc il va probablement falloir que je ré-apprenne 2-3 trucs si je veux toucher un peu au code de Cesium v2.

1 Like

Beau boulot !

Ce serait chouette effectivement de faire cela dans Cesium v2. Ainsi tu pourrais maquetter les UX et je pourrait (ou d’autres) les implémenter.
Après franchement je trouve qu’il faut mettre l’accent sur les opérations les plus usuels, type : paiement, consultation des opérations, annuaire.
Le reste (contributeurs, dons, etc.) devra arriver ensuite.

Ce qu’on faire c’est avoir une option “mock” qui ignore les UX en durs, dans les version de production.

J’ai regardé de plus près :

  • L’approche sur l’Annuaire me parait intéressante, mais moins fonctionnelle que des onglet (“Favoris”, “Contact récents”, etc)
  • La gestion de “Mon compte” n’est pas trop dans ce que j’avais en tête pour la suite. Je pensais plutot pouvoir gérer le multi-compte dans le menu de gauche, en peu comme l’application Android Gmail : avoir des sous menu avec les actions rapides : ma clef, mes opérations, mon compte, mais en permettant de changer en haut du menu, et d’ajouter un autre portefeuille.

Tout à fait d’accord avec ça. Ceci dit, même s’il n’est pas urgent de coder le backend des écrans “Actualités”, “Encourager”, etc, ça peut être pas mal penser en amont où ils s’afficheront le moment venu, non ? Le menu vertical, il n’est jamais scrollable, si ? Si non, ça peut être un paramètre à prendre en compte, et nous amener à choisir de limiter le nombre d’items qui apparaissent dans le menu. D’ailleurs quand bien même il serait scrollable, ce serait pas terrible que tout ne soit pas visible d’un coup.

Tu parles des onglets bleus en haut ? Si oui :

  1. Ça risque pas de faire un peu tassé si jamais on a besoin de mettre plus de 3 onglets ?
  2. J’imagine que Ionic doit nous permettre un scroll horizontal des onglets, mais est-ce que c’est vraiment pratique et intuitif pour l’utilisateur ?
  3. On afficherait quoi dans la vue de base ? Du blanc ?

Sinon changer le contenu du menu latéral au moment du clic sur “Annuaire” ? C’est peut-être ça dont tu parles en fait en parlant d’“onglets” ? Auquel cas oui ça peut être pas mal ; à essayer en tous cas pour voir ce que ça donne.

Mon écran “Annuaire” est un peu moche et on peut probablement trouver mieux.
Ceci dit, j’aimerais justifier mon choix un peu parce que j’ai oublié de le faire.

Actuellement l’écran “Annuaire” ressemble à ça :

Et il y a plusieurs trucs qui ne me plaisent pas :

  1. Qu’est-ce que j’en ai à faire des nouveaux membres ? (oui, bon, en vrai je suis curieux donc je déteste pas, mais ça fait pas des appels inutiles à la blockchain ? Même pour l’utilisateur : ça ralentirait pas l’application à tout hasard ?)
  2. La recherche est lente. Est-ce que ça ne raccourcirait pas le temps de chargement en séparant la recherche par nom de la recherche par clef ?
  3. Pendant longtemps j’avais pas vu qu’on pouvait accéder à la carte ici.
  4. Assez bizarrement, pendant longtemps, je n’avais même pas vu l’onglet “Pages”. Même chose sur desktop d’ailleurs, bien que les onglets s’affichent un peu différemment. Je sais pas, mon œil curieux devait être attiré par tous ces nouveaux membres.
  5. L’icône filtre induit en erreur, puisqu’il ne permet pas de filtrer les résultats de recherche

Autre remarque : je pense (mais ça demande confirmation par des tests utilisateurs… @matograine ?) que l’icône QR code présent dans le menu n’est pas compris s’il n’y a pas un label explicatif en-dessous (genre “scanner un QR code”). Parce qu’à mon avis il y a pleins de possesseurs de smartphones qui n’ont jamais scanné un QR code de leur vie. A titre d’anecdote, l’autre jour à l’apéro ML de Rennes j’avais fait de belles étiquettes pour mes confitures de mûres et j’étais trop triste de ne voir personne scanner le QR code que j’avais collé sur l’étiquette du dos. Bon, c’est pas très grave qu’on me recherche par nom, parce que je m’appelle “Boris Paing”, donc j’ai peu d’homonymes, mais il ne faudrait pas que les gens prennent trop l’habitude de taper des “Camille Dupuis” car il risque de se produire des erreurs et ça pourrait être embarrassant si la valeur économique échangée a un prix élevé.

Oui, j’ai relu ton message à ce sujet. Gmail ne fait plus ça comme ça, pas sur mon téléphone en tous cas.

Mais ça peut être intéressant de tester, pour voir ce que ça donne, car ça permettrait de changer de portefeuille en 3 clics (plutôt qu’en 4 avec ma version), en espérant que ce soit pas trop surchargé, et que ça reste facilement compréhensible.

Je pense qu’avoir plusieurs portefeuilles et les gérer tous sur mobile restera un cas d’utilisation peu probable pour la plupart des gens. Donc, même s’il faut évidemment que cette fonctionnalité soit présente, il ne faut pas que son affichage se fasse au détriment de la simplicité.

Voilà, je ne connais pas grand chose à l’UX mais c’étaient mes 0,02 Ğ1

Je comprends pas, désolé :neutral_face:

Oui, moi ou d’autres. Ça peut être intéressant qu’on soit plusieurs à proposer des idées d’UX, pour mettre en concurrence les idées, les argumenter, et servir aux utilisateurs finaux une version encore plus intuitive de Cesium.

En plus c’est un peu pourri de taper des kilomètre de texte pour expliquer un truc, alors qu’on pourrait juste forker le mock, déplacer quelques briques de code et faire une vidéo pour parler du truc et expliquer nos choix à l’oral sans avoir à faire trente-six-mille captures d’écrans.

Ça pourrait être pas mal aussi de faire tester les différentes versions aux utilisateurs (@matograine) et de recueillir leur avis dessus, surtout des gens qui ne sont pas des power users. On pourrait peut-être toutes les rendre accessibles à la suite les unes des autres via une même URL qui les référencerait (genre v2.cesium.app @poka ?).

Bref, on fait quoi ? Je regarde si je peux faire un truc similaire avec Cesium v2 ?

2 Likes

Je suis pas sûr de comprendre ce que tu veux mais si c’est une liste d’url affiché à cette adresse oui sans pbm
Vous me direz le moment venu :wink:

Oui oui, en gros c’est juste ça car j’imagine que toute personne capable de bidouiller du HTML et CSS a bien un hébergement qui traîne quelque part, donc on ne devrait pas avoir besoin de l’héberger pour eux. Juste un petit index.html avec un lien vers chaque version pour que ce soit plus facile d’en faire tester plusieurs à des utilisateurs (une seule URL à transmettre et après ils se débrouillent avec l’historique ou l’URL pour passer d’une version à l’autre).

1 Like

Je n’avais pas testé le flash du QR code, mais il est loin d’être évident à trouver, de mon point de vue aussi.

Concernant les tests, je pourrai en refaire au prochain ContribAtelier si j’ai des taches précises à faire tester.

D’autre part, je suis tombé sur un projet libre et tout jeune pour les tests UX : usertest. Une démo est accessible ici : usertest.gelez.xyz

En gros, on définit des choses à tester, et la personne les teste en commentant sa navigation à voix haute. Le serveur enregistré la session ecran+audio pour que les devs puissent regarder.

J’ai pas encore essayé.

Édit - Je n’arrive pas à faire fonctionner usertest sur smartphone. J’ai fait une remontée de bug, on verra.

Ping @elois @fbuland

2 Likes

Ça a l’air sympa comme principe. Ceci dit, je ne comprends rien à leur site. C’est normal si la liste des projets est vide ? Quand je tape rien dans la recherche et que je valide, j’ai une liste de cartes qui apparaît, mais sur chaque carte il n’y a rien de marqué, à part “0 task available”, et lorsque je clique sur une carte, j’arrive sur une page vide.

Ah ouais j’avais fait ça avec deux personnes pour le site d’un client. C’est intéressant car quand on revisionne la vidéo, on voit des trucs qu’on n’a pas forcément vu lors du test. Ça peut être même intéressant de filmer la personne en train d’utiliser l’application, genre avec la caméra du smartphone près de son épaule droite, pour voir le mouvement des doigts, et entendre les commentaires de l’utilisateur et de la personne qui lui fait tester l’application.

Oui, quand j’en ai discuté avec @bpresles au dernier apéro rennais, il m’a dit que, quelque soit le système, il testait toujours tous les boutons, pour voir ce qu’ils faisaient, mais il m’a dit aussi qu’il avait eu ses premières Amiga à 8 ans, et on est parti à parler de nos parents qui avaient peur de provoquer un deuxième Tchernobyl en appuyant sur un bouton où-qu’il-fallait-pas-appuyer :sweat_smile:

1 Like