Partie 1: Interactions: Comprendre Les Entre L'interface Et L'utilisateur

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 38

PARTIE 1 :

Comprendre les
interactions entre
l'interface et l'utilisateur

1. Définition de la notion d’interaction entre


l’interface et l’utilisateur.
2. Différence entre animation et interaction digitale.
3. Utilisation des interactions selon le contexte de
l’interface digitale.
4. Typologies d’interactions (interactions directes
comme des boutons, interactions indirectes, micro
interactions)
1. Définition de la
notion d’interaction
entre l’interface et
l’utilisateur
Introduction à l’IHM

L'interface homme-machine (IHM) est le point de contact entre les utilisateurs et les machines. Elle
inclut tous les éléments visuels, tactiles et auditifs qui permettent à un utilisateur de communiquer
avec un système informatique ou un appareil électronique. Une IHM efficace vise à rendre cette
communication aussi simple, intuitive et efficace que possible.

• I comme INTERFACE

• H comme HUMAIN

• M comme MACHINE
L'interfaçage fait appel aux
3 principales fonctions d'interactions humaines :

• le toucher (commande par boutons, écrans tactiles, ...);


• le regard (surveillance et contrôle sur écran, supervision de colonnes
lumineuses ,..);
• l'écoute ( alarmes sonores, diffusion sonore);
• Seuls le goût et l'odorat ne sont généralement pas utilisés.
Plusieurs types d’interfaces utilisateur

Plusieurs types d’interfaces utilisateur On peut évoquer l'interface système, qui


permet de commander un système d’exploitation, l'interface en ligne de
commande, qui permet de saisir les opérations à effectuer, ou encore l'interface
textuelle, qui affiche des menus, autant d'interfaces utilisateur, ou interfaces
homme-machine.
Les types d’interfaces utilisateur

L’interface graphique Interface web

Une interface graphique désigne le langage Une interface web est une interface homme-
d’échange entre l’homme et la machine (votre machine constituée de pages web et permettant
ordinateur). L’utilisation la plus commune de dans certains cas d'utiliser des applications web
l’interface graphique est l’interaction à l’aide

d’une souris et d’un clavier.


Les interfaces graphiques présentent de nombreux avantages pour les
utilisateurs tels que :

• Des interactions plus rapides et plus fluides avec les utilisateurs


• La clarté et le contrôle
• L’anticipation des besoins de l’utilisateur
• L’accessibilité pour les utilisateurs handicapés
• L’augmentation de l’engagement grâce à des visuels attrayants
• L’augmentation de l’adoption par les utilisateurs de tous niveaux de compétences
• La suppression du besoin d’expérience en programmation
• L’augmentation de la capacité à effectuer plusieurs tâches à la fois.
Les différents types d’interfaces graphiques

Les systèmes d’exploitation de bureau (Desktop Les systèmes d’exploitation mobiles (Mobile Operating
Operating Systems) Systems)

• Microsoft Windows • iOS d’Apple

• MacOS d’Apple • Android.

• Linux
Objectifs de l'IHM :

Les objectifs principaux de l'IHM sont les suivants :

Utilisabilité : Offrir une interface conviviale et intuitive pour que les utilisateurs puissent interagir facilement
avec le système.

Efficacité : Optimiser les performances en minimisant le temps nécessaire pour accomplir une tâche et en
réduisant les erreurs de l'utilisateur.

Satisfaction utilisateur : Fournir une expérience utilisateur agréable et satisfaisante en tenant compte des
besoins et des attentes des utilisateurs.

Accessibilité : Assurer que l'IHM est accessible à tous les utilisateurs, y compris ceux ayant des besoins
spécifiques tels que les personnes handicapées.
Définition d’une interaction Définition d ’un SYSTÈME
d’interaction

Ensemble des actions permettant la Un système interactif est une


communication entre un système application informatique qui prend en
numérique interactif et son utilisateur compte, au cours de son exécution, les
humain informations communiquées par le ou
les utilisateurs du système, et qui
produit, au cours de son exécution, une
représentation perceptible de son état
interne
on décompose un système interactif en deux
parties :

L'interface utilisateur Le noyau fonctionnel

Contient les éléments logiciels et Contient le reste du système, c'est-à-


matériels dédiés à la capture des dire ses composants de calcul et de
entrées de l'utilisateur et à la restitution stockage de l'information.
des sorties du système.
Exemples d’interactions sur ordinateur
Principales interactions liées aux ordinateurs :

Via la souris :
• Le clic, le clic droit
• Le survols
Via le PAD :
• deux doigt, double clics (mac)
• Scroll
• zoom
Via le clavier :
• Clavier
• Racourcis clavier
Via la voie :
• SIRI sur mac
Exemple d’interaction sur écrans tactiles

Les interactions sur smartphone se font principalement via les gestes


de la main, mais aussi de plus en plus par la voie.
Via les gestes :
• Le clic
• Le scroll
• Le swipe
• Le zoom
Via la voie :
• SIRI sur Mac, Bixi sur Android, on peut interagir avec son
smartphone sans utiliser les mains.
Il est important aussi de noter que les smartphones ont de plus en
plus de capteurs, permettant des interactions dit invisibles ou
naturels : Géolocalisation, capteur de fréquence cardiaque, de
vitesse, de température etc.
La « règle 5D» (dimensions) dans le design
d’interaction
Les cinq dimensions d'IxD ont d'abord été
définies par un professeur du Royal College
of Art de Londres, Gillian Crampton Smith,
et un designer d'interaction senior, Kevin
Silver.
Les concepteurs d'interactions utilisent les
cinq dimensions pour considérer les
interactions entre un utilisateur et un
produit ou un service de manière holistique
La « règle 5D» (dimensions) dans le
design d’interaction

1- 1D : Mots Les mots, en particulier ceux 2. Les représentations visuelles (2D)


sont des éléments graphiques tels que
utilisés dans les interactions, comme les
des images, de la typographie et des
étiquettes de boutons, doivent être signifiants et
icônes qui facilitent l'interaction de
simples à comprendre. Ils devraient
l'utilisateur.
communiquer des informations aux utilisateurs,
mais pas tellement d’informations qu’ils
finissent par accabler les utilisateurs ou les
ralentir.
La « règle 5D» (dimensions) dans le
design d’interaction

3. Les objets/espaces physiques (3D) 4. Le temps (4D)


font référence au support par lequel les concerne les médias qui changent avec
utilisateurs interagissent avec le produit le temps, tels que les animations, les
ou le service, par exemple, un vidéos et les sons
ordinateur portable via une souris ou un
téléphone portable via les doigts.
La « règle 5D» (dimensions) dans le
design d’interaction

5D : Comportement
Cela inclut le mécanisme d’un produit et implique deux questions essentielles : « Comment les utilisateurs effectuent-
ils des actions sur le site web ? » Et « Comment les utilisateurs exploitent-ils le produit ? En d’autres termes, cette
dimension concerne la manière dont les dimensions précédentes définissent les interactions qu’un utilisateur doit
avoir avec un produit.
Cela inclut également les réactions — par exemple, les réactions émotionnelles ou les rétroactions — des
utilisateurs et du produit. Alors que les quatre premières dimensions sont vitales en elles-mêmes, la cinquième met
en lumière un aspect plus profond du domaine humain en UX et peut exposer des forces sérieuses ainsi que des
défauts.
voici une vidéo
expliquant ces 5
dimensions à
travers un exemple

https://www.youtube.com/wat
ch?v=V3mF_x2vrmo
https://www.youtube.com/wat
ch?v=U7rS_2ch_Ps
Les designers UX vs UI vs IxD…
Après avoir définis ces notions, il semble important d’évoquer la réalité métier. Les termes UX et UI
designers doivent vous être familiers. Mais peut-être un peu moins des IxD Designer, alors reprenons leurs
définitions :

• L'expérience utilisateur (UX)


C'est le processus d'amélioration de la
satisfaction de l'utilisateur en améliorant la • La conception d'interaction (IxD)
convivialité, l'accessibilité et les interactions C'est généralement utilisée pour définir la structure et
entre l'utilisateur et le produit. le comportement de certains systèmes interactifs.

• La conception de l'interface utilisateur (UI) Les concepteurs d'interaction s'efforcent de créer des
fait généralement référence à l'apparence relations significatives entre les utilisateurs et
visuelle. l'interface numérique. Des sites Web aux applications
Par exemple, l'interface
utilisateur consiste à mobiles, le travail d'IxD consiste à s'attaquer à des
sélectionner les bons éléments d'interface - tâches complexes et à les transformer en conceptions
les bonnes polices, boutons, couleurs, intuitives, faciles à utiliser et accessibles.
champs de texte
2. Différence entre animation et interaction
digitale
Animation et interaction
Un modèle interactif
Un modèle animé
permet de mettre en évidence les existe lorsque les interactions sont possibles, c'est-à-dire que
les liens peuvent être cliquables ou que des actions peuvent
animations présentes sur une être effectuées par l'utilisateur.
interface. Il n'y a pas d'animation (à part les transitions), ce sont
simplement les images qui changent dès que l'on bouge la
L'animation est principalement souris ou que l'on clique sur une zone définie. L'objectif d'une
utilisée pour les transitions, et pour maquette interactive est de pouvoir illustrer les différents
parcours utilisateurs, l'arborescence, et l'interconnexion des
apporter de la fluidité dans la pages entre elles.
navigation de l'utilisateur.
Micro interaction

la MICRO-interaction est la traduction


visuelle de ce que fait l’utilisateur
(scroller, changer de page, cliquer sur
un bouton, etc.) dans le contexte
produit.
Selon Dan Saffer, créateur du terme et aujourd’hui Product
Designer chez Twitter, la définition d’une micro-interaction est
la suivante :

«des petits instants pendant lesquels


l’utilisateur et l’interface interagissent. ».
Exemple
d’interactions

Grâce à cette interaction, vous pouvez voir


instantanément vos articles « être
propulsé » dans le panier dès que vous
cliquez sur le bouton "Ajouter au panier".
Le panier continue de faire apparaître
visuellement vos articles, même lorsque
vous explorez d'autres parties du site.
Quiz

1. Quelle est la bonne définition de l’acronyme I.H.M ? :

A. Internet Hybride multimédia.


B. Interface Homme Machine.
C. Interaction Homme Machine.
Quiz

1. Quelle est la bonne définition de l’acronyme I.H.M ? :

A. Internet Hybride multimédia.


B. Interface Homme Machine.
C. Interaction Homme Machine.
2. Quelle est la définition de l’interaction ?

A. Ensemble des actions permettant la communication entre un système


numérique interactif et son utilisateur humain.
B. Méthodes d'encadrement d'un groupe qui favorisent l'intégration et la
participation de ses membres.
C. Un site internet qui regroupe des travaux de designer
2. Quelle est la définition de l’interaction ?

A. Ensemble des actions permettant la communication entre un système


numérique interactif et son utilisateur humain.
B. Méthodes d'encadrement d'un groupe qui favorisent l'intégration et la
participation de ses membres.
C. Un site internet qui regroupe des travaux de designer
3. Quelle est la définition d’un
écosystème digitale :

A. Une unité économique, juridiquement autonome dont la fonction


principale est de produire des biens ou des services pour le marché.
B. La somme de tous les dispositifs web mis en place par une entreprise.
C. Une structure physique ou abstraite où se vendent et s'achètent une
certaine quantité de biens ou de services.
3. Quelle est la définition d’un
écosystème digitale :

A. Une unité économique, juridiquement autonome dont la fonction


principale est de produire des biens ou des services pour le marché.
B. La somme de tous les dispositifs web mis en place par une entreprise.
C. Une structure physique ou abstraite où se vendent et s'achètent une
certaine quantité de biens ou de services.
3. Utilisation des interactions selon le
contexte de l’interface digitale
QUELLES SONT LES RÈGLES D’UN BON
DESIGN D’INTERACTION ?
Jakob Nielsen a énoncé 10 principes, ou heuristiques, pour rendre l’interface utilisateur
interactive :
• Visibilité de l’état du système : les actions des utilisateurs provoquent une réaction dans un délai raisonnable.
• Correspondance entre le système et le monde réel : phrases et concepts familiers, ordre logique des informations…
• Contrôle et liberté de l’utilisateur : pouvoir annuler une action involontaire ou la refaire, avoir une sortie de secours
• Cohérence et normes : suivre les conventions sur toutes les pages du site par exemple pour que l’ensemble soit clair et cohérent
• Prévention des erreurs : dès la conception d’une interface, il faut penser aux potentielles erreurs pour les empêcher de se produire ou
permettre à l’utilisateur de les éviter
• Reconnaissance plutôt que rappel : rendre visibles et accessibles les objets, options, etc. pour aider l’utilisateur à les mémoriser facilement.
• Flexibilité et efficacité d’utilisation : l’interaction est possible pour l’utilisateur, qu’il soit novice ou expert en termes de maturité digitale
• Esthétique et design minimaliste : seules figurent les informations pertinentes
• Permettre aux utilisateurs de reconnaître, diagnostiquer et corriger leurs erreurs : faire apparaît un message d’erreur simple avec le
problème et la solution
• Aide et documentation : l’idéal est d’avoir un système suffisamment intuitif pour être utilisé sans documentation, mais proposer cette aide
peut s’avérer nécessaire
L’importance de l’interaction
Voici les trois domaines clés dans lesquels les interactions sont primordiales.
• La convivialité : est le strict minimum d'IxD. Si les utilisateurs ne peuvent pas utiliser votre
produit, ils ne le désireront certainement pas. L'utilisabilité d'un système doit être simple. Moins
l'utilisateur prête attention à comprendre comment l'utiliser, plus il peut atteindre l'objectif. Un
système doit être utilisable avant d'être beau.
• Le rayonnement : est la capacité d'influencer les utilisateurs pour qu'ils fassent quelque chose.
Qu'il s'agisse d'effectuer un achat ou de s'abonner à la newsletter. La mesure clé de l'influence est
généralement le taux de conversion.
• L’aspect visuel : Le design visuel joue un rôle essentiel dans l'UX. Cela permet aux utilisateurs de
savoir ce qu'ils doivent répondre, sur quoi cliquer ou alors où naviguer. C'est la première impression
que fera votre produit. Des études ont montré que vous disposez de 50 millisecondes avant que les
utilisateurs ne portent leur premier jugement sur votre produit.
4. Typologies d’interactions (interactions
directes comme des boutons, interactions
indirectes, micro interactions)
Interaction direct et indirecte
Les interactions «directes » et « indirectes »
sont présentes dans plusieurs contexte. Le premier
est l’interaction via une IHM sur un élément de
l’interface. Dans ce cas on parle de :
• l'interaction directe, quelle est directe lorsqu’un
utilisateur peut manipuler un élément directement
en interagissant avec l'élément lui-même, par
exemple, en cliquant directement sur un bouton.
• l'interaction indirecte lorsqu’elle est réalisée via
un autre dispositif ou outil (par exemple, en utilisant
un outil comme un switch button)

Vous aimerez peut-être aussi