1. Supports de cours
  2. UI-UX : les bases du prototypage web et apps - Concevoir avec les utilisateurs

UI-UX : les bases du prototypage web et apps Concevoir avec les utilisateurs

  • En stock
  • Expédié en 24h00
  • Personnalisable
  • Accessible immédiatement
  • Version HTML
  • Accès illimité 24h/24, 7J/7

    Présentation

    La conception fructueuse de projets digitaux s'appuie sur des dispositifs et interfaces qui sont pensés pour et avec les utilisateurs. Le prototypage joue donc un rôle central dans la conception centrée utilisateur : il s'agit de matérialiser l'interaction, la tester auprès de la cible visée puis l'optimiser à tous les stades du projet.

    Ce support étudie comment matérialiser et tester les idées dès les phases de pré-conception avec des prototypes adaptés. Il est destiné aux responsables de projets web et applications, aux designers d'interfaces et à tous ceux qui veulent concevoir des interactions utilisateurs.

    Vous verrez tout d'abord comment représenter les utilisateurs avec les "personas" puis comment visualiser un projet encore au stade des propositions. Vous ferez le point sur les techniques fondamentales : idéation, facilitation graphique, scénarios et story-boards.

    Vous apprendrez ensuite à utiliser les outils en ligne pour réaliser concrètement les prototypes utiles aux différentes phases d'un projet digital. Vous verrez quels sont les outils gratuits pour créer rapidement et efficacement des prototypes papier sans être graphiste. Vous apprendrez à exploiter les logiciels pour réaliser des prototypes fonctionnels qui permettent les tests sur périphérique. Vous découvrirez les méthodes pour l'organisation et la conduite de tests utilisateurs. Vous pourrez ainsi intégrer le prototypage dans la mise en œuvre de vos conceptions itératives de projets.

    En déployant ces méthodes pratiques de prototypage, vous assurerez des parcours fluides et optimiserez les taux de transformation et, au final, vous produirez la meilleure expérience utilisateur.

    Table des matières

    • Avant-propos
      • A. Il n’est jamais trop tard pour prototyper
      • B. Best UI ? No UI !
    • Chapitre 1 : Les fondamentaux du prototypage
      • A. Qu’est-ce qu’un prototype ?
        • 1. Origines des prototypes
        • 2. Fonction actuelle des prototypes
        • 3. UI-UX et prototypage
        • 4. Les objectifs des prototypes
          • a. Affiner la conception
          • b. Concevoir sans contraintes techniques
          • c. Développer le mode collaboratif
          • d. « Vendre » des idées
        • 5. Le prototypage dans la gestion de projet web
        • 6. Prototypage et conception centrée utilisateur
        • 7. Prototypage et démarche Agile
          • a. Approche Agile
          • b. Le manifeste Agile
        • 8. La fidélité des prototypes
        • 9. Prototypes papier et prototypes sur poste
        • 10. L’environnement multicanal
      • B. Prototyper l’utilisateur : les personas
        • 1. Qu’est-ce qu’un persona ?
        • 2. Recueillir les données
        • 3. Définir les personas
          • a. Les données socio-démographiques
          • b. Les données comportementales
          • c. Les données du problème
          • d. Les points de contact
        • 4. Ressources pour prototyper les personas
          • a. Les modèles (templates)
          • b. Les outils en ligne de création de personas
        • 5. Exploiter les personas
          • a. Le questionnement et les personas
          • b. La conduite de tests et les personas
          • c. La gestion de projet et les personas
      • C. Conceptualiser
        • 1. Idéation : co-création et prototypage
        • 2. La « Design Charrette »
          • a. Le déroulement
          • b. Les modalités
          • c. La durée
          • d. L’exploitation
        • 3. La facilitation graphique
      • D. Scénarios et story-boards
        • 1. Séquences et parcours
        • 2. Créer un scénario
        • 3. Schématiser un scénario
          • a. Schémas simples
          • b. Schémas normés
          • c. Schémas alternatifs
          • d. Créer un story-board
        • 4. Les outils de story-boarding
          • a. Les caractères et cliparts
          • b. Les templates (modèles/kits graphiques)
          • c. Les outils de création de story-boards en ligne
    • Chapitre 2 : Prototyper les structures
      • A. Prototyper ce qui n’existe pas encore : les prototypes papier
      • B. Le tri de cartes
        • 1. Le matériel
        • 2. Première étape : La validation
        • 3. Deuxième étape : l’organisation des contenus
        • 4. Troisième étape : la labélisation
      • C. Le tri de cartes en ligne
        • 1. Découvrir le fonctionnement d’OptimalSort
        • 2. L’exploitation des résultats
        • 3. Créer un Tri de cartes avec OptimalSort
      • D. Les wireframes
        • 1. Stratégies pour les wireframes
          • a. Exemple de maquettes filaires
          • b. Créer les wireframes avec des kits graphiques
      • E. Wireframes : les logiciels de création
        • 1. Pencil Sketching
          • a. Installer Pencil
          • b. Découvrir l’interface de Pencil
          • c. Créer un prototype avec Pencil
          • d. Enregistrer et exporter les prototypes
          • e. Aller plus loin avec Pencil
        • 2. Justinmind Prototyper
          • a. Installer Prototyper
          • b. Découvrir l’interface de Prototyper
          • c. Premiers pas avec Prototyper
          • d. Mockingbird
          • e. Lancer Mockingbird
          • f. Premiers pas avec Mockingbird
          • g. Lier des pages
          • h. Commenter le prototype
          • i. Partager le prototype
        • 3. Autres outils de wireframing
    • Chapitre 3 : Les prototypes fonctionnels
      • A. Prototypage HTML
        • 1. Pourquoi prototyper en HTML ?
        • 2. Les 3 étapes de prototypage HTML
          • a. Prototype HTML simple
          • b. Prototype HTML statique
          • c. Prototype HTML dynamique
        • 3. Frameworks : les environnements de travail HTML
          • a. Bootstrap
          • b. Foundation
          • c. WIREFY
      • B. Les outils collaboratifs de prototypage fonctionnel
        • 1. Adobe XD
          • a. Lancer Adobe XD
          • b. Télécharger des kits graphiques
          • c. L’interface
          • d. Créer un prototype avec Adobe XD
          • e. Gérer les interactions
          • f. Prévisualisation en temps réel
          • g. Partage et collaboration
        • 2. Figma
          • a. L’interface
          • b. Créer un prototype avec Figma
          • c. Présenter un prototype avec Figma
          • d. Commenter un prototype
          • e. Partager un prototype avec Figma
          • f. Visualiser en temps réel sur un périphérique
          • g. Exporter le code
          • h. Exporter les éléments au format image
          • i. L’application de bureau Figma
    • Chapitre 4 : La conduite de tests
      • A. Les tests dans la démarche ergonomique
      • B. Organiser et gérer une session de tests
        • 1. Les règles de base
        • 2. Recruter les testeurs
          • a. Se baser sur les personas
          • b. Filtrer les participants
          • c. Confirmer les participants
          • d. Le nombre de participants
        • 3. Organiser la session
          • a. Le planning général
          • b. Le lieu
        • 4. Animation et contrôle de la session
          • a. L’accueil
          • b. Les scénarios de test
          • c. Le rôle des animateurs-observateurs
        • 5. Les outils de tests
          • a. Les prototypes
          • b. Les logiciels pour gérer les sessions de test
        • 6. Évaluer les résultats
          • a. Consigner efficacement les résultats
          • b. Les questionnaires post-tests
          • c. Les cartes d’expérience
    • Conclusion
    • Index

    Auteur

    Didier MAZIEREn savoir plus

    Ex-directeur de création associé en agence de communication, Didier MAZIER se consacre depuis 1992 à l'enseignement et à la recherche dans le domaine digital. Participant à la création de la Licence ECMN-MCI d'Evry dont sont issues plusieurs générations de marketers talentueux, il collabore avec les organismes de formation de la CCIP IDF et intervient sur les thématiques liées au numérique en France et dans le monde pour des écoles et des groupements professionnels.

    Il anime de nombreuses formations vidéo sur le marketing digital et l'UI-UX. Parallèlement, il conçoit et met en œuvre des bases de données applicatives professionnelles et accompagne les entreprises dans leur transformation digitale.

    Caractéristiques

    • Niveau Initié à Confirmé
    • Nombre de pages 252 pages
    • Parution mars 2018
      • Reliure spirale - 17 x 21 cm (Médian)
      • ISBN : 978-2-409-01273-0
      • EAN : 9782409012730
      • Ref. ENI : OWMUIUX
    • Niveau Débutant
    • Parution mars 2018
      • HTML
      • ISBN : 978-2-409-01314-0
      • EAN : 9782409013140
      • Ref. ENI : LNOWMUIUX
    • Niveau Débutant
    • Nombre de pages 252 pages
    • Parution mars 2018
      • Bundle
      • Ref. ENI : INOWMUIUX

    Téléchargements

    En complétant ce formulaire, vous acceptez d'être contacté afin de recevoir des informations sur nos produits et services ainsi que nos communications marketing. Vous aurez la possibilité de vous désabonner de nos communications à tout moment. Pour plus d'informations sur notre politique de protection des données, cliquez ici.
    • Webographie