UX / UI

 

Starting Kit

Expérience Utilisateur / Interface Utilisateur

La Nuit du Code Citoyen - Lyon

4 et 5 mars 2017

Anys Mechkar

  • Designer UX /UI
  • Dev Front-End
  • Product Leader

Pourquoi l'UX/UI ?

  • Répondre à un besoin = Fonctionnel
  • Faire de l'utilisation de votre outil une expérience mémorable = Émotion 

 

Utile & Agréable

L'UI une part de l'UX

Expérience Utilisateur

Interface

Utilisateur

Expérience Utilisateur

Persona

  • Définissez un utilisateur type

 

 

Outils : Un papier et stylo

  1. Donnez un prénom à votre utilisateur type
  2. Donnez lui quelques caractéristiques (age, métier...)
  3. Définissez ses besoins
  4. Définissez ses envies
  5. Mettez vous à sa place à chaque instant

Parcours utilisateur

  • Définissez comment va naviguer votre utilisateur type

 

 

Outils : Un papier et stylo

  1. Partez de votre première page
  2. Imaginez tous les cas d'utilisation possible
  3. Imaginez les difficultés qu'il pourra rencontrer
  4. Faites simple !

Wireframe

  • Définissez le positionnement des éléments sur votre page

 

Outils : Papier/Stylo, balsamiq, Moqups

  1. Placez les éléments récurrents de votre application (layout)
  2. Ajouter les éléments nécessaires page par page
  3. Allez vous inspirer des applications que vous utilisez déjà

Prototypage

  • Définissez les interactions entre chacune de vos pages

 

Outils : Invision, Moqups

  1. Utilisez les wireframes réalisés précédement
  2. Choisissez un parcours d'utilisation
  3. Définissez les zones cliquables et les actions qu'elles réalisent

Tests utilisateurs

  • Allez voir les autres équipes et faites leur tester votre prototype !

 

C'est le meilleur moyen de ne pas perdre de temps à développer des choses qui ne fonctionne pas !

Interface Utilisateur

Logo

  • Choisissez une forme simple et évocatrice de votre concept

 

Outils : Shopify Logo Maker, Spaces Logo Maker, GraphicSprings

Couleurs

  • Choisissez 2 couleurs principales

 

Outils : Coolors, Adobe Color, ColourLovers

Typographie

  • Choisissez la typographie en fonction de votre concept ( ou de la popularité de la police)

 

Outils : Google Font

Intégration

  • Utilisez un framework front-end existant avec une banque d'icones

 

Outils : Bootstrap, Semantic-UI, Fondation, Materialize

A vous de jouer !

Made with Slides.com