# Les maquettes fonctionnelles --- ## Objectif de la capsule Savoir présenter un projet au client _avant_ qu'il ne soit développé. --- ## Réalisation Les maquettes d'un projet. --- ## Programme - Définition et utilité des **maquettes fonctionnelles** - Comment **procéder** ? - Gestion des différents **supports** - Savoir parler d'**ergonomie** # Les maquettes fonctionnelles --- ## Recherche Qu'est-ce qu'une maquette fonctionnelle ? Notes: Ne pas confondre avec le design : - Moodboard - Style tiles - Mockup * https://fr.wikipedia.org/wiki/Wireframe_(design) * https://fr.wikipedia.org/wiki/Prototypage * https://www.lafabriquedunet.fr/conseils/conception-site-web/creer-maquettes-site-web/ * MORT - http://samuel.loras.fr/blog/maquette-fonctionnelle-site-web-methode-outils-logiciel * https://lafabriquedeblogs.com/blogue/guide-wireframe/ * https://www.youtube.com/watch?v=8-vTd7GRk-w --- ## Question Quelle est son utilité ? --- ## Objectifs - Spécification légère - Un « langage » que tout le monde comprends - Anticiper les besoins - Structurer la réalisation - Réaliser une démonstration --- ## Question À qui sert-elle ? --- ## Pour … - Le client - Le chef de projet - Le développeur --- # Comment procéder ? --- ## Question À votre avis ? --- ## Avant tout - Comprendre le projet - **PUIS** réaliser les maquettes - En itératif --- ## Comprendre le projet - Il faut poser des questions - Résister à la tentation de deviner - Il faut toujours écouter les commanditaires… - …mais faire savoir faire le tri --- ## À qui ? - Aux utilisateurs - Aux clients - Aux « politiques » --- ## Quoi ? - Les différents utilisateurs - Leurs compétences - Les cas d'usages - Les cas plus rares - Les processus - ... --- ## Comment ? - De vive voix - Par un questionnaire - Par l'observation de l'existant --- ## Mais aussi - Étudier la concurrence - Repérer ce qui se fait de mieux - Sélectionner les plus pertinents… - …et voler les bonnes idées 😈 - Parfois les concurrents ne sont pas évidents... --- # Puis réaliser la maquette --- ## Pas une mais plusieurs - Cinématique des pages - Positionnement / Zoning - Fil de fer / Wireframe / Fonctionnelle - Prototype dynamique - C'est un entonnoir --- ## Les étapes Cinématique des pages -> Zoning -> Wireframe -> Prototype --- ## Quelques outils - [Mockup](https://moqups.com/) - [Balsamiq](https://balsamiq.com/index.html) - [Wireframe](https://wireframe.cc/) - [Mockflow](https://mockflow.com/) - [Figjam](https://www.figma.com/fr/figjam/) - [Excalidraw](https://excalidraw.com/) - [TLDRaw](https://www.tldraw.com/) - [Pencil](https://github.com/evolus/pencil/) - … # À vous de jouer --- ## Le projet nutrition **Activité** : vous voulez réaliser des maquettes pour le projet [nutrition](https://wiki.formation-fullstack.fr/fullstack/fil-blanc/Sp%c3%a9cifications%20projet%20nutrition). **Contraintes** -> Pour le patient uniquement. Je suis le client/utilisateur. Avez-vous des questions ? --- ## La cinématique des pages - Permet de lister les écrans - Et leurs enchaînements - C'est une vue très synthétique de l'ensemble du site - C'est une cinématique pour l'ensemble du site --- ## En image ![Cinematique](./images/ex_cinematique.png) --- ## Cinématiques des pages **Activité** : réalisons la cinématique des pages. Contraintes -> Pour le patient uniquement. # Gestion des supports --- ## Plusieurs supports ? **Activité** : lister les supports et leurs contraintes. --- ## Les supports - Desktop - Tablette - Mobile - TV - Table tactile - Montres - Terminal braille - ... --- ## Les 7 différences - 22" vs 6" - Souris vs écran tactile - 10 doigts vs 1 pouce - Ethernet vs 3G - Au bureau vs dans le métro - Disque dur vs carte SD - Portrait vs paysage --- ## C'est la taille qui compte - Résolution - Densité - Orientation --- ## Plusieurs approches - Fake pixel - Liquid design - Adaptative design - Responsive design - « Mobile first » - Démo : [Liquid](http://g-mops.net/epica_saitama/epica_layout/index_adaptive.html) Notes: Choix des pts de rupture pour le responsive design et l'adaptative design. --- ## Toucher du doigt - Des boutons assez grand - Pas de survol - Pas de clic droit - Long touch --- ## Écris moi un mouton - Juste les deux pouces - Pas de texte long - Le clavier prend de la place --- ## Attends, j'ai plus de réseau - État de la connexion - La 3g est partout ? - Passage sous le tunnel --- ## Les utilisateurs dans le métro - Plutôt de la consultation - Moins attentif - Moins de précision --- ## La taille du disque - Pas de gros téléchargement - Peu de navigation --- ## Plus long que large - Aspect esthétique différent - Permet une meilleur lecture --- # Reprenons nos maquettes --- ## Les zoning - Un zoning par page - Permet de situer les éléments principaux - Sans rentrer dans le détail - Pas d'élément d'IHM --- ## En image ![Zoning](./images/zoning.jpg) --- ## Zoning **Activité** : réalisons le zoning du projet. # Ergonomie et bonnes pratiques --- ## Recherche Qu'est-ce que l'ergonomie ? Notes: Aussi appelé UX. - https://fr.wikipedia.org/wiki/Ergonomie - https://fr.wikipedia.org/wiki/Ergonomie_informatique - http://ludismedia.com/12-regles-ergonomie-web/ - https://www.lafabriquedunet.fr/creation-site-vitrine/articles/regles-ergonomie-web-creer-site/ --- ## Améliorer l'utilisabilité - Spécialité de psychologie - Il n'y a pas de vérité - Se construit avec les utilisateurs - Rien n'est parfait --- # Quels sont les critères à considérer ? --- ## Les critères 1/2 - La sobriété (simple et peu chargé) - La lisibilité (Clair et structuré) - L'utilisabilité (Navigation et homogénéité) - La rapidité (Chargement) - ... --- ## Les critères 2/2 - ... - L'interactivité (Liens) - L'a11é (Adaptation) - La disponibilité (Toujours présent) --- ## Des principes - Contraste - Répétition - Alignement - Proximité - Équilibre --- ## Quelques recommendations - Règle des trois clics - Navigation simple - Respect des standards - Attention à la taille des polices - Hiérarchie visuelle - Test A/B --- ## Et des liens - https://lawsofux.com/ - https://www.shopify.com/partners/blog/ux-laws - https://www.toptal.com/designers/ui/principles-of-design - https://uxdesign.cc/using-gestalt-principles-in-ux-design-3fc64614d3ef --- # Reprenons nos maquettes --- ## Les wireframes - Un wireframe par page et plus si interactions - On devient beaucoup plus précis - On voit les éléments d'IHM - Limiter les textes --- ## En image ![wireframe](./images/wireframe.png) --- ## Wireframe **Activité** : réalisons le wireframe pour PC et **mobile**. --- ## Le prototype Comme le wireframe mais dynamique. --- ## Statique vs Dynamique - Statique - Plus facile et plus rapide - Aucune interaction - Dynamique - Illustrer un flot de fonctionnement - Coûteux --- ## Prototype **Activité** : réalisons le prototype. --- # Des questions ?