Photo

mes directions ux pour 2016.

Posted by Hugo on

Il est aujourd'hui incontestable de souligner le rôle primordiale que joue l'UX dans la qualité d'un service en ligne, et du marché qu'il amène avec lui. Nous sommes janvier 2016, c'est le bon moment pour tirer quelques leçons de 2015 et d'en tirer le meilleur pour l'année qui commence.

1. flat design (ou presque)

En 2015 s'est imposé massivement le Flat Design. Tout le monde le demande, tout le monde l'applique, c'est aujourd'hui la seule et unique manière de produire du Design si l'on veut paraitre à la page. Même si j'adhère à cette direction, la notion de profondeur dans l'UI avec plusieurs niveaux de lecture est également importante et est utilisé sur Google Material.

Donc oui au Flat Design en ce qui concerne l'iconographie, l'illustration, l'utilisation d'applat massif de couleur pour colorer un service mais oui (aussi) aux ombres portées, et à cette notion de profondeur avec plusieurs niveaux de lecture. Attention toutefois à ne pas proposer trop d'intéractions sur une même page, l'utilisateur preferera toujours en premier une action unique. Notamment dans les pages profondes du service.

  • Frontify, The Perfect App for Style Guides
  • Coolors, explore potentially harmonious color combinations
  • Icons library
  • Pricing Table From Tidal
  • Pttrns
  • 2. le mouvement

    Pendant longtemps, la vidéo n'a pas pu être intégré correctement sur les sites/services web et pour cause, les navigateurs interpretaient chacun la vidéo d'une manière différente et les résultats n'étaient pas assez harmonieux pour se baser sur la video. Cela ne semble plus être le cas en 2016, la vidéo est de mieux en mieux supportée donc profitons en pour mieux animer nos services. La vidéo permet :

  • D'accrocher l'utilisateur très efficacement dans une expèrience beaucoup plus immersive. Dans le cas par exemple d'une homepage où la vidéo est en arriere plan/full screen.
  • De mieux signifier l'interaction, que ce soit en animant des composants.
  • D'ajouter des transitions entre les pages pour amèliorer l'experience.
  • 3. les wearables, les objets connectes

    Un énorme marché est en train de voir le jour, le marché des objets connectés et des wearables. Les moyens mis dans notre quotidien n'ont jamais été si présent. A chaque nouvel objet une nouvelle porte d'interaction avec l'utilisateur. Lorsque l'utilisation du service se justifie, c'est le bon moment pour imposer sa présence dans ce nouvel eldorado.

    In 2015, 39.5 million U.S. adults 18 and over used wearable devices, including smartwatches and fitness trackers — an increase of 57.7 percent over 2014, according to eMarketer. That growth will continue in 2016 and beyond, with 81.7 million adults using wearables by 2018, the research firm says.
  • Smartwatches
  • Fitbit/Activity trackers
  • Smart clothing
  • Glasses

  • A noter le danger que represente également ces nouveaux objets en ce qui concerne notre exposition au virus et aux personnes malveillantes. Ces nouveaux moyens de communication en pleine naissance ne sont pas aujourd'hui totalement sécurisés.

    4. Microinteractions

    Chacune de ces intéractions ne prend pas plus d'une seconde, l'idée est qu'à travers une petite notification, nous rappelons à l'utilisateur que l'application est intégré dans son quotidien. Le choix du type de notifications ou le moment de la notification est très importane. Elles doivent apparaitrent au moment opportun ou ne pas être trop répétitives, considérer d'ailleurs de regrouper les notifications en une seule pour augmenter la pertinence de l'information transmise.

    Internet s'est introduit dans notre quotidien c'est indéniable. L'utilisation internet mobile a encore grandi d'une manière exponentielle en 2015 et cela n'est pas prêt de s'arreter. Le mobile, la tablette, les wearables et j'en passe permet à travers les notifications de toucher l'utilisateur dans la journée à certains moments précis:

  • Le status d'un projet, d'une commande, d'un evenement etc
  • Communique le résultat d'une action
  • Aider l'utilisateur a effectuer quelquechose
  • 5. Google Materials

    Depuis la création de son language, Google n'a cessé d'étoffer son UI. Même si les avis divergent quant à sa facilité d'utilisation, il apparaît incontestablement comme un univers magnifiquement coloré et graphique. qui va devenir une grande réference en 2016 sur Android bien sur mais aussi sur iOs.

     

  • Metrics & keylines (layout templates / touch target sizes / Primary color, Accent color / Typography) 08:12
  • Dimensionality & Shadows (Z depth hierarchy) - 12:26
  • Motion (Motion provides meaning) - 14:40
  • 3.1/ Les 3 niveaux de lecture

    Une des notions de base à intégrer avec Google Material, c'est le principe de 3 niveaux de lecture.

  • Le niveau le plus bas, qui présente le contenu des pages (informations, navigation, certaines actions simples).
  • Le niveau intermédiaire contient les actions/élements considérés comme importants. Et qui justifient une mise en avant par rapport au contenu de la page. Nous pouvons ainsi y retrouver : App bar, Cards, Raise buttons... Tous ces élements se situent donc dans le niveau intermédiaire et dirige le plus souvent l'utilisateur vers de nouvelles pages.
  • Le niveau le plus haut est le bouton d'Action flottant dont nous aurons le loisir d'en parler plus bas. Ce niveau de lecture est destinée à l'Action (ou les Actions) avec un grand A dans la page. L'Action primaire, la plus demandée, la plus judicieuse à l'usage.

  • Photo

    L'image ci-dessus illustre cette notion mais en prenant comme exemple les boutons, même principe mais je trouve plus judicieux d'avoir parler de niveau de lecture... Effectivement, les Flat buttons peuvent être associés au Cards qui sont au niveau intermediaire, ils peuvent être donc tout à fait considéré eux aussi comme des actions intermédiaires et ne sont pas forcemment destiné au niveau 1...

    Les cards

    Comme évoqué plus haut, il y a 3 niveaux de lecture qui se superposent les uns par dessus les autres. Les Cards sont au niveau 2.

    L'utilisation de Cards se justifient dans le cas de multiples actions. Elles sont sont surtout utilisées dans les homepages et landings pages et représentent des points d'entrées sur des pages plus profondes.

    Il y a beaucoup de modèles de Cards ce qui rend cette solution assez flexible pour afficher différents points d'entrée qui ne seront pas noyés dans le coeur de la page.


    Photo Photo Photo

    Photo Photo

    Photo

     

    Photo

    Photo

    Photo

    Photo

    Photo

    Photo

     
    Les boutons

    Comme évoqué plus haut, nous avons 3 niveaux de lecture. Ces niveaux se retrouvent eux aussi avec les boutons. Nous trouvons donc:

  • Les Toggles Buttons
  • Les Boutons Dropdown
  • Les Flats Buttons
  • Les Raises Buttons
  • Le Bouton d'Action Flottant
  • Les Toggles buttons

    Les toggles buttons sont clairement issus du web. Ils sont là pour re-arranger le contenu d'une page, peut permettre d'éditer du texte, ou effectuer des actions secondaires (toolbar, appbar, icones).

     

    Photo

    Photo

    Photo

    Photo

    Photo

    Photo

     
    Les Boutons Dropdown

    Les dropdowns sont une manière élegante et discrète d'insérer un menu à l'intérieur du contenu. Il fait apparaitre un dropdown menu contenant une liste d'actions.
    A noter la possibilité d'effectuer un dropdown avec une icône + triangle.
    A noter aussi que les dimensions et la position du dropdown menu est à prendre en compte.

     

    Photo

    Photo

    Photo

    Les menus

    Photo

     

    Les Flats buttons

    Les Flats buttons comprennent les actions les plus éloignées du contenu. Nous y trouverons surtout des actions de navigation qui permettent à l'utilisateur de changer de page ou alors des actions très secondaires comme le Share.
    Dans les faits, les Flats buttons s'inscrivent :

  • dans les Cards (multiple niveau de lecture)
  • dans les footers permanents (le contenu est plus mis en avant, correspond souvent aux pages les plus profondes)
  • dans les boites de dialogue (unique niveau de lecture)
  • A noter que bien que similaires, les Cards se distinguent des boites de dialogue pour ce qui concerne la position des flats buttons : A gauche pour les Cards, à droite pour le Footer (+largeur containeur).

     

    Photo Photo Photo

     
    Les Raised buttons

    Les Raised buttons comprennent les actions considérées comme importantes et directement relatées au contenu. A noter une taille secondaire dites "dense" pour réduire un peu de sa visibilité.

     

    Photo Photo Photo

    Photo Photo

     
    Le bouton d'action flottant

    Le bouton d'action est utilisé pour activer l'Action principale (ou les plus importantes). Il se distingue par un bouton en forme de cercle et flottant au dessus de l'interface et qui s'anime à l'intéraction, fait apparaitre un menu, transite vers une autre page. Tous les écrans ne doivent pas obligatoirement contenir un bouton d'action, mais lorsque c'est le cas, il y a deux tailles possibles:

  • Defaut: Le plus courant
  • Mini: Associé à d'autres actions
  • Photo Photo


    Un seul bouton d'action est recommandé par écran pour accentuer sa mise en avant. Il doit représenter l'action la plus utilisée. Il est interdit ou alors cas rarissime (map) d'associer 2 boutons d'action sur la même page. Que ce soit sur mobile ou sur tablette. Nous rappellons que l'on peut grouper des actions depuis ce bouton.

    Utilisez les boutons dAaction pour des actions "positives" tel que Aimer, Favoris, Partager, Naviguer et Explorer. Evitez d'utiliser les boutons d'action pour des actions "négatives" tel que Supprimer, Alerte, Taches Secondaires, ne pas y mettre de notifications.

    Photo

     
    Le bouton d'action : Transitions

    Lorsqu'une transition d'écran apparaît, le bouton d'Action doit être indépendamment auto-animé sans bouger de position. Il ne doit pas suivre l'écran fuyant par exemple. Les transitions les plus connue à ce jour sont : Trigger, Toolbar, Speed dial et Morphing. Cette liste est évolutive...

     

    A noter qu'il n'y a pas que le bouton d'action qui introduit une transition :

    Le bouton d'action sur les larges écrans

    Photo Photo Photo

     
    Les Controls

    Bon moment pour évoquer le sujet des Controls. Car si effectivement, votre application effectue des actions, est navigable... Elle est également un outils où l'utilisateur est la pièce centrale. Il doit pouvoir manipuler le contenu pour exploiter au maximum son expérience. Avec des controls utilisés au bon endroit, l'expèrience sera plus riche et conviendra aux utilisateurs expérimentés. Les controls sont incontournable dès lors que votre application permet de gérer du contenu.

    Photo

    Les controls se situent donc à gauche (action primaire) ou à droite (secondaire) du contenu d'une ligne.

    Photo

    Les checkboxs

    Photo

    Reorder

    Photo

    Switch

    Photo

    Profile

    Photo Photo

    Expand/Collapse

    Photo Photo

    Delete switch left/right

    Photo

    Secondary menu

    Picker

    Photo

    Les animations

    Avec Google Material, tout ce qui est touché déclenche une petite animation pour y signifier l'intéraction. Ormis les boutons, chaque ligne, chaque bloc, chaque photo, chaque élément qui inclut une interaction déclenche une animation au toucher.

    Certaines icônes faisant parti de d'UI s'animent également:

    La couleur
    Couleur primaire/couleur secondaire

    Avec Google Material, nous allons choisir une couleur primaire (qui va teinter les arrière-plans des interfaces) et une couleur secondaire (que nous retrouverons dans tout ce qui touchera à l'intéraction). Le choix des couleurs se définit en sélectionnant 3 teintes issues d'une même couleur pour:

  • Palette de couleurs primaires : Par défaut, choisir "500" (base), "100" et "700"
  • Palette de couleurs secondaires : Par défaut, choisir "A200" (base), "A100", "A400"

  • Photo Photo

    Accéder à la palette complète de Google!

    Le texte et les dividers

    Le texte et les dividers ont les teintes suivantes que l'on soit sur un theme light ou dark:

    Photo Photo

     
    La couleur primaire

    Comme évoqué précedemment, la barre d'outils utilise la valeur "500" (de la couleur indigo) et la barre de status la valeur "700":

    Photo

    La couleur secondaire

    La couleur secondaire est associée à l'intéraction:

    Photo Photo Photo Photo Photo

    Typographie

    Comme toujours, les régles typographiques doivent être respectées avec la plus grande rigueur pour ne pas perturber l'utilisateur d'une application à une autre.


    Photo

    Photo Photo


    Bien comprendre la taille "Display":


    Photo Photo


    Bien comprendre la taille "Headline":


    Photo Photo


    Bien comprendre la taille "Title" (dans l'App bar):


    Photo Photo


    Bien comprendre la taille "Subheading":


    Photo Photo


    Bien comprendre la taille "Body":


    Photo Photo


    Tous les bouttons font 14sp et sont ALL CAPS:


    Photo Photo

    Don’t follow trends just because they’re the “hip” thing to do at the moment. Trends represent popular techniques for good reason, but make sure it’s best for your users. For example, an e-commerce site certainly wouldn’t do well as a single-page infinite scrolling site.
    Trends are nothing more than additional tools in your designer toolbox. Always pick the right ones for the job.