Ergonomie CM (1) - PDF

DDCM ==== Chapitre 1: Introduction ------------------------ ### Principes de base La conception des systèmes avec lesquels nous interagissons doit être pensée pour **l'utilisateur** et **non le concepteur**. Un peu de contexte  La conception des systèmes avec lesquels nou...

DDCM ==== Chapitre 1: Introduction ------------------------ ### Principes de base La conception des systèmes avec lesquels nous interagissons doit être pensée pour **l'utilisateur** et **non le concepteur**. Un peu de contexte  La conception des systèmes avec lesquels nous interagissons doit être pensée en prenant en compte la **tâche** à réaliser et le **contexte d'utilisation**. Acception courante de l'ergonomie 1\. Confort ✓ Minimiser la fatigue physique et nerveuse 2\. Sécurité ✓ Protéger l'utilisateur Dans l'idéal : Tout utilisateur doit être dans une situation aussi confortable que possible tel que devant un ordinateur de bureau dans un environnement calme. Chapitre 2 : Vocabulaire ------------------------ ### Interactions humains-machines Interactions humains-machines 2 types d'approches \- Approche techno centrée \- Approche anthropocentrée Notion d'interface visuelle utilisateur GUI - Graphical user interface  Notion d'interface visuelle WYSIWYG (« What You See Is What You Get ») Notion d'interface digitale NUI -- Natural user interface  Notion d'interface digitale NUI -- Natural user interface Dispositifs d'entrée - - - - - Dispositifs de sortie - - - Dispositifs immersifs - - Les interfaces tangibles : activités interactives dans les musées Chapitre 3 : Architecture de l'information ------------------------------------------ ### Penser l'architecture de l'information #### Les figures importantes   ### Organiser l'information d'une interface #### Arborescence **Visualiser une arborescence**  #### Interface utilisateur - #### Arborescence d'un site web Top-Down et Bottom-up   Infinite scroll ### Interface utilisateur d'un site web **[Gabarit standard de navigation]** **[Page d'accueil -- flatsitemap]**  **[Footer]** : emplacement situé en pied de page. Il peut être dupliqué sur toutes les pages du site et sert de point de repère. Il donne des informations et aide à naviguer sur le site **[Carrousel / slider]** : élément de design qui permet d\'afficher plusieurs contenus sur un même emplacement. C\'est un outil très pratique pour présenter de multiples produits, services ou informations sur votre site web. ### Outils de navigation Moteur de recherche Méga-menu **[Carrousel ]** **[Side scrolling ]**  Différence side scrolling / carrousel : Un Side scrolling : Tu vois slide par slide, une à la fois, elle se déplace à l\'horizontal ou à la verticale. Un carrousel : Tu as une notion de rotation au changement des images, avec une perspective. **[Nuage de mots clés]** Chapitre 4 : Affordance -----------------------  Don Norman : Né en 1935 Psychologue cognitiviste Professeur Université de Californie à San Diego ### Types d'affordance Affordance : Le terme affordance est un néologisme formé à partir du verbe anglais « to afford » =  « fournir l'opportunité de / offrir » - - - #### Affordance trompeuse / fausse DEF : il s\'agit **d\'un objet qui semble être utilisé d\'une certaine manière, mais qui en réalité ne l\'est pas**. Un exemple serait un bouton qui ne s\'appuie pas. - #### Affordance perceptible / perçues DEF \~ **qui dépendent de l\'interprétation de l\'utilisateur ; ce sont des actions perçues comme possibles** - #### Affordance dissimulée / cachée DEF : On parle d'affordance cachée lorsque l'utilisation d'un objet n'est pas si évidente qu'il n'y paraît. Dans l'exemple ci-dessous, la partie colorée de la brosse à dents permet de mesurer la quantité de dentifrice nécessaire pour un brossage.  ### Affordance des interfaces : - #### Affordance métaphorique DEF : **Cet objet qui existe dans la vie réelle représente des métaphores pour l\'affordance**. Prenez les icônes par exemple. La plupart des icônes s\'inspirent d\'objets de la vie réelle, communiquant ainsi l\'affordance. De plus, les icônes emails utilisent les enveloppes comme métaphore. - #### Le skeuomorphisme DEF : Le **skeuomorphisme** est un néologisme formé à partir des termes grecs "**skeuos**" (ornement, décoration) et "**morphé**" (forme). Autrement dit, le skeuomorphisme est une **technique de design** visant à imiter l'apparence d'**un objet réel** lors de la conception d'un **objet virtuel**. Ce **style de design graphique** contraste et diffère avec le **design plat** dont le style est beaucoup plus simple, épuré et minimaliste. (Popularisé par Apple, par exemple, l'ancien logo Youtube, rappels ou contacts) ### Affordance des interfaces : UI Design  ### Affordances du dispositif : UX Design   ### UX Design : parcours utilisateur  ### Evolution de la relation humain- machine #### Sans l'utilisateur  #### Pour l'utilisateur  #### Avec l'utilisateur  Chapitre 5 tunnel d'achat ------------------------- ### 3 modèles : - #### Tunnel de conversion DEF : Tous les business en ligne possèdent un certain nombre d'étapes qui font passer une personne du visiteur au client. Que vous souhaitiez que vos visiteurs vous donnent leur adresse e-mail, téléchargent un e-book ou achètent vos produits; ceux-ci passeront par un certain nombre d'étapes avant de réaliser votre objectif : **ces étapes définissent le tunnel de conversion de votre site**. ( -\> tunnel de conversion = tunnel d'achat \>\> def d'un tunnel achat) = FIL D'ARIANE du parcours d'achat du client - #### Parcours d'achat  - #### Modèle AIDA ### Principes de l'Aida : #### ATTENTION : Par les displays, social ads - - - Display : Le display fonctionne avec des images qui s'affichent sous forme de bannières sur les sites appartenant au réseau Google (c'est-à-dire que c'est Google qui commercialise les espaces publicitaires de ces sites). Socials Ads : **Publicités diffusées sur les réseaux sociaux**. Chaque réseau propose leurs propres publicités. Grace au Social Ads, les annonceurs peuvent cibler spécifiquement leur public en utilisant des critères tels que l'âge, le sexe, la localisation géographique, les centres d'intérêt, le comportement en ligne, etc. #### INTERET : - - - - - - #### DESIR : - - - - - - - - #### ACTION : - -