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