UI - Design

Introduction : l'expérience utilisateur

Src. Wikipedia

L'expérience de l'utilisateur (en anglais, user experience), souvent contracté par parataxe en expérience utilisateur ou abrégé en UX (User eXperience), est un concept apparu dans les années 2000 pour tenter de qualifier le résultat (bénéfice) et le ressenti de l'utilisateur (expérience) lors d'une manipulation (utilisation provisoire ou récurrente) d'un objet fonctionnel ou d'une interface homme-machine (via une interface utilisateur) de manière heuristique par un ensemble de facteurs. Contrairement à l'utilisabilité, ce concept n'est pas strictement pragmatique dans le sens où il sous-entend un impact émotionnel cumulé à un bénéfice rationnel, il est entendu que la démarche est bien de créer une expérience agréable. Ainsi les définitions respectives des deux termes permettent de relativement bien appréhender la notion.  

Expérience + Utilisateur

Issue des sciences humaines et de la démarche ergonomique (la découverte d'un support interactif induit une certaine part d'inconnu), la pratique de l'expérience de l'utilisateur a pour objectif de déterminer la satisfaction liée à l'utilisation de fonctions d'une part et la manière de les faire évoluer tant sur la forme (réponse fonctionnelle à une promesse), sur le fond (la fonction ou le service en soi, son nom, description et promesse), que sur la manière d'yaccéder (visibilité, accessibilité) ainsi que sur l'impact de notoriété du diffuseur du support. Depuis qu'il est prouvé que la satisfaction de l'utilisateur est aussi bien liée à la capacité de commercialisation du produit/service comme à la perception de la marque par l'utilisateur, le terme fait référence à des notions essentielles de la communication, de la conception et de la mercatique relationnelle. Il n'est donc plus uniquement basé sur des critères ergonomiques et s'utilise principalement dans le cadre de la conception d'applications numériques (en anglais, digital design). 

Critères

Schéma "Responsive"

Qualifie en anglais un site, une application ou un outil informatique dont le code répond à des normes lui permettant d'être adapté à tous types de supports (PC, tablettes, mobiles). Ainsi la taille des objets (photographies, textes, éléments visuels...) s'adapte à la taille de l'écran où ils sont visibles.

Timeline de l' UI Design

  • Type Navigation 1° étape
    Etablir la manière de naviguer dans le site
  • Structure des pages 2 ème étape
    Etablir l'arbre (hiearchie) des pages du site
  • Choix du framework 3 ème étape
    On choisira un framework pour s'aider à structurer, et plus si ....
  • Elements récurrents 4 ème étape
    On définit les éléments globaux tels que header, paginer, footer et navbar
  • Maquette de page 5 ème étape
    1. Section et container
    2. Dynamisme : ligne et colonne
    3. Composants (slider, table, card, liste, ...)
    4. Taille et alignement des ressources
  • Embellissement 6 ème étape
    Choix des couleurs, choix de la fonte de texte, ...
  • Integration 7 ème étape
    Insertions des ressources (images, sons, vidéos), des données, des server scripts, ..

Le spectre du frontend est vraiment très large, il va d'éléments statiques au plus dynamiques.  Pour ne citer que quelques produits : html5, css3, javascript, jquery, bootstrap, mustache, sass, react.js, ...

Framework d'interface

Un framework d'interface ou cadriciel d'interface est un framework proposant un ensemble cohérent de composants d'interface. Il permet de simplifier le codage et de rapidement développer des interfaces d'applications. On peut aussi parler de framework front-end.


Specific Javascripts

A suivre .../...