ABTesting - Kwit

Hello,


 


J'aimerais ajouter une vue résumé pour les statistiques de Kwit (jusqu'à  présent l'onglet stat amène à  une scroll view contenant une stat par page).


 


Les infos sur cette page seraient "arrondies grossièrement".


 


On arriverait ensuite à  chaque stat en cliquant sur les "tiles" concerné.


 


J'ai 2 pistes graphiques pour le moment (cf PJ) et j'aimerais votre avis :) (y'a aussi le choix c), cette idée est pourrie).


 


 


«13

Réponses

  • CéroceCéroce Membre, Modérateur

    Je préfère la variation B.


  • Pareil, B.


    Mais concernant le nombre de sous non-dépensé, j'aurais peut-être mis le "$" à  côté du chiffre. Après tout, c'est plus parlant ainsi, et les gens aiment bien savoir qu'ils ont économisé.


  • Oui, après c'est plus chiant à  gérer pour les localisations (USA -> à  gauche, France -> à  droite, ...).


     


    Dans le B, est ce qu'on "comprend" que les zones sont clickable ? 


  • AliGatorAliGator Membre, Modérateur

    Oui, après c'est plus chiant à  gérer pour les localisations (USA -> à  gauche, France -> à  droite, ...).

    Comment ça ? Avec NSNumberFormatter et en indiquant le currencyCode qu'on veut utiliser (USD/EUR/...) il fait tout le boulot pour nous tout seul, placement du symbole du bon côté en fonction des settings de locale de l'utilisateur, etc !
  • Oui c'est vrai (mais ca fait quand meme du code en plus :D)


     


    Est ce que les NSAttributedString gère le resize to fit au cas ou le texte dépasse la zone ?


  • B c'est bien ..
  • AliGatorAliGator Membre, Modérateur
    octobre 2014 modifié #8
    Je ne pense pas, car ça commencerait à  devenir compliqué comme algo (si ta NSAttributedString est un mélange de plusieurs polices chacune de taille différentes, diminuer le tout jusqu'à  ce que ça rentre impacte chaque portion individuelle de ta NSAttributedString), mais sait-on jamais.

    Sinon je pense que c'est sans doute + parlant de mettre les montants en entier ("$1,600" plutôt que "1.6k" " d'ailleurs au passage ne NSNumberFormatter va aussi te gérer l'ajout des virgules pour les séparateurs de milliers en format US, espaces pour le format FR, etc), c'est bien plus visuel, ça montre à  quel point le chiffre est important, là  où un "k" masque un peu cet aspect.

    Quitte à  ne plus faire 2 colonnes mais qu'une seule, pour avoir assez de largeur pour afficher le nombre en entier.
  • En fait la partie détaillées est pour l'écran suivant (ce que j'ai actuellement).


     


    Si je veux un truc "visuel", il faut que j'arrondisse (ce qui explique le 1,6k à  la place de 1,600).


     


    Pour le formatage, pas de soucis, c'est déjà  fait dans les écrans, la c'est juste une création avec Sketch, rien n'est encore codé de cet écran.


  • Le 1,6k est une information abstraite sans valeur émotionnelle pour le grand-public. Si tu t'adresses à  un public de geek tu peux utiliser des multiplicateurs, pas pour le commun des mortels !


    1,6k -> c'est Mal !

    1.600 c'est bien !
  • Dans ce cas faut que je trouve une autre abstraction, 1600 ca rend plus du tout dans la zone ^^ (peut être sur 6 et 6+, mais pas sur 5S).




  • Dans le B, est ce qu'on "comprend" que les zones sont clickable ? 




     


    Personnellement je préfère le B, mais je ne trouve pas que la zone du milieu ai l'air d'être "clickable" (Mais en jouant un peu j'aurais trouvé ) .

  • Je vais encore explorer un peu


  • AliGatorAliGator Membre, Modérateur

    Dans ce cas faut que je trouve une autre abstraction, 1600 ca rend plus du tout dans la zone ^^ (peut être sur 6 et 6+, mais pas sur 5S).

    C'est pour ça que j'ai rajouté "Quitte à  ne plus faire 2 colonnes mais qu'une seule, pour avoir assez de largeur pour afficher le nombre en entier"
  • Oui mais dans ce cas c'est juste compacter les autres écrans, y'a pas trop d'intérêt (je trouve). La j'aimais bien le coté "Dashboard"


  • AliGatorAliGator Membre, Modérateur
    Oui c'est clair que le côté vue d'ensemble est sympa.

    Mais faut aussi que les chiffres représentés soient parlants émotionellement. Je veux dire, on s'attend pas à  avoir le détail sur cet écran là , c'est juste un dashboard. Mais faut qu'on puisse avoir des chiffres qui ont une valeur émotionelle, comme le souligne Draken.

    C'est là  que tu vois que le travail d'ergo & design n'est pas tjs simple : il faut trouver le compromis entre "avoir une vue d'ensemble" et "y afficher des choses qui marquent". Et comme Draken, le "k" m'embête, il va bien pour un public de Geeks ou de Banquiers, mais pas pour le commun des mortels ;)
  • GeoffreyGeoffrey Membre
    octobre 2014 modifié #17

    Du coup quelque chose dans ce genre ? (police et alignements fait à  l'arrache mais l'esprit est la)


     


    Avec le fichier c'est mieux -_-


  • AliGatorAliGator Membre, Modérateur
    Ca me parait pas mal ouais !
  • Et une idée du type d'animation qui pourrait être sympa ? (pour passer du résumé au détail lorsque l'on clique sur un bouton)


     


    J'avais pensé aux boutons qui "glissent" en dehors de l'écran (à  gauche, droite ou en bas en fonction de leur place), ou encore au bouton touché qui s'agrandit puis un fondu pour laisser la place au détail).


     


    Ou la vue détail qui vient d'en haut ou en bas.


  • DrakenDraken Membre
    octobre 2014 modifié #20


    Du coup quelque chose dans ce genre ? (police et alignements fait à  l'arrache mais l'esprit est la)


    Oui, vraiment mieux !


  • Et une idée du type d'animation qui pourrait être sympa ? (pour passer du résumé au détail lorsque l'on clique sur un bouton)


     


    J'avais pensé aux boutons qui "glissent" en dehors de l'écran (à  gauche, droite ou en bas en fonction de leur place), ou encore au bouton touché qui s'agrandit puis un fondu pour laisser la place au détail).


     


    Ou la vue détail qui vient d'en haut ou en bas.




    Une animation qui me vient à  l'esprit :


    Tu touches un "volet" (bouton).

    Les autres disparaissent comme s'ouvre une porte (il me semble qu'il faut alors toucher à  CATransform 3D)

    Celui sélectionné glisse alors vers le haut.

    Les infos supplémentaires apparaissent via un fondu juste en dessous.


     


    Seul défaut : J'ai l'impression que c'est du Windows Phone :p


     


    Ou peut-être le bouton reste à  sa place, les infos (graphs ?) plus détaillées viennent en fondu police verte sur fond blanc à  la place des autres infos (sans forcément respecter les cases précédentes), un touch sur le bouton originel permet de revenir à  la vue globale.

    Bon, je ne sais pas à  quoi ressemble ta vue détaillée, donc bon.


    Mais genre, si tu touches $1,6k, les infos supplémentaires occupent la place du temps, CO & Days & Time.

  • La vue détaillée tu l'a dans ma premiere capture (c'est celle d'en bas)


  • AliGatorAliGator Membre, Modérateur
    Les animations il en faut, ça fait + pro et + dynamique. Mais faut aussi trouver le juste milieu pour :

    1) qu'elles ne durent pas trop longtemps, car les premières fois on fait "ooooh c'est beau" on a tout le temps de la voir... et les fois suivantes on fait "ouais bon c'est bon, il s'ouvre ce $@#! d'écran, oui ?" :D
    2) qu'elles ne soient pas "too much" dans tous les sens genre trop complexes pour rien

    Moi je verrais bien que les vues non tapées disparaissent avec un fondu (alpha qui tend vers 0) + un zoom arrière. Genre "[UIView animateWithDuration:... animations:^{ view.alpha = 0; view.transform = CGAffineTransformMakeScale(0.8,0.8); }];"

    Après pour la vue tapée et l'affichage de la vue détaillée correspondante, j'ai pas d'avis.
    - Ca peut être un fondu aussi mais avec un zoom avant (la vue tapée passe de {alpha=1,scale 100%} à  {alpha=0,zoom 60%} pendant que la vue détaille s'affiche en passant de {alpha=0, scale=60%} à  son état final {alpha=1,scale 100%})
    - Ca peut être un effet de retournement, la vue tapée se retourne (CAAffineTransform3DMakeRotation avec rotation autour de l'axe Y) pour faire apparaitre la vue détaillée (tu dois pouvoir aussi faire ça avec un [UIView transitionFromView:toView:...])
  • Merci pour vos avis éclairés :) je vais essayer de faire ca ce soir !


  • Attention aux animations qui ne veulent rien dire.


    Ici, a mon avis l'animation doit montrer qu'on détaille une tile et si possible indiquer comment revenir au dashboard.


    Une idée : faire sortir toutes les autres tiles vers la gauche tout en agrandissant la tile sélectionnée à  la taille de l'ecran.

    Et du coup on revient avec un bouton back classique qui fait l'operation inverse. Je ne sais pas si c'est facile à  réaliser par contre (et peut-être avec un pincement).
  • Je vous ferais un gif animé du résultat.


  • Voila un petit POC avant -> après


     


    Vous en pensez quoi ?


     


  • J'en pense que .. tes fichiers ne sont pas lisibles sur mon iPhone 4 !
  • Art fait avec QT pourtant :/


  • On n'est pas aidé par la technique !
  • Si jamais t'arrive à  les voir (sur ton mac à  l'occas), la question est : est ce que j'anime les bloc en décalé de qqs ms ou je laisse comme ca)


Connectez-vous ou Inscrivez-vous pour répondre.