Le contenu est basé aux transparents du 7ème édition

de «Software Engineering» de Ian Sommerville

B.Shishedjiev - Génie logiciel 1

Conception d’interface d’utilisateur

B.Shishedjiev - Génie logiciel 2

IU besoins• L’interface doit correspondre aux compétence,

l’expérience et les attentes des utilisateurs prévus

• Les utilisateurs du système jugent souvent un système par son interface plutôt que ses fonctionnalités

• Une interface mal conçue peut provoquer un utilisateur de faire des erreurs catastrophiques.

• Mauvaise conception d'interface utilisateur est la raison pour laquelle tant de systèmes logiciels ne sont jamais utilisés.

B.Shishedjiev - Génie logiciel 3

Les facteurs humains dans la conception de l‘IU

• Mémoire à court terme limitée– Les gens peuvent se rappeler instantanément à

environ 7 éléments d'information

• Les gens font des erreurs • Les gens sont différents

– Les gens ont un large éventail de capacités physiques. Les concepteurs devraient pas seulement le design de leurs propres capacités

• Les gens ont des préférences différentes interactions – des images ou texte

B.Shishedjiev - Génie logiciel 4

Principes de conception d'interface utilisateur • Familiarité pour l’utilisateur

– L'interface devrait être basée sur termes et des concepts familiers pour l'utilisateur plutôt que des concepts informatiques.

• Cohérence– Le système devrait afficher un niveau approprié de la

cohérence. Les commandes et les menus doivent avoir le même format, la ponctuation de commande devrait être similaire, etc

• Minimaliser la surprise– Si une commande fonctionne d'une manière connue,

l'utilisateur doit être capable de prédire le fonctionnement des commandes similaires

B.Shishedjiev - Génie logiciel 5

Principes de conception d'interface utilisateur

• Récupérabilité– Le système devrait offrir une certaine résilience aux

erreurs des utilisateurs et permettent à l'utilisateur de récupérer les erreurs (possibilité d'annulation, confirmation des actions destructrices, suppression provisionnelle, etc ).

• Diversité des utilisateurs– Icônes ou plus grand texte

• Guidage de l'utilisateur

B.Shishedjiev - Génie logiciel 6

Problèmes de conception d'interface utilisateur

• La présentation de l’information• La saisie de l’information• Ils sont unie dans un cadre de l’abstraction dite

l’interface de l’utilisateur. – On peut avoir plusieurs interfaces conçus pour

différents groupes d’utilisateurs. Exemple Unix

B.Shishedjiev - Génie logiciel 7

Styles d’interaction• La manipulation directe

Les jeux, simulation, les sytèmes CAO

• Sélection d'un menuLes systèmes plus générales

• Formulaire à remplirSystèmes d’information, de banques etc.

• Langage de commandeSystèmes d’exploitation. Systèmes de gestion

• Le langage naturelSystèmes d'extraction de l'information

• Interface basé WEBFormulaires, boutons, boxes de texte, images intéractives

B.Shishedjiev - Génie logiciel 8

Formulaire de recherche Lybsys

LIBSYS: Search

Choose collection

Keyword or phrase

Search using

Adjacent words

Search Reset Cancel

All

Title

Yes No

Présentation d’information• Type de présentation

– Directe– Transformé (graphique, audio, etc.)

• MVC modèle (Model-View-Controler)Manière d’avoir plusieurs présentation des données.

B.Shishedjiev - Génie logiciel 9

Information qui va être présentée

Module de présetation

Affichage

Model-View-Controler

B.Shishedjiev - Génie logiciel 10

Présentation de l’information• Information statique

– Permanente pendant la session– Numérique ou texte.

• Information dynamique– Modifiée pendant la session et les modification

doivent être vues par l’utilisateur– Numérique, texte

B.Shishedjiev - Génie logiciel 11

Facteurs influant sur l’affichage• Lequel est plus important?

– La valeur absolue– La valeur relative

• La vitesse de changement• Le besoin d’une réaction de la côté utilisateur• La disponibilité d’un interface directe pour

manipuler l’information• Le type de l’information

– Numérique– Textuelle

B.Shishedjiev - Génie logiciel 12

Méthodes de présentation• Numérique

– Compacte– Précise

• Analogique– Plus compréhensible – Voir les relation plu facilement– Voir les exceptions

B.Shishedjiev - Génie logiciel 13

Méthodes de présentation

B.Shishedjiev - Génie logiciel 14

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

Méthodes de présentation

B.Shishedjiev - Génie logiciel 15

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

0 100 200 300 400 0 25 50 75 100

Pression Temperature

Valeurs relatives

Visualisation des données• Méthodes d’affichage de grandes quantités de

données – montre les relations et les tendances • Exemples

– Différents modèles – molécules, réseaux, information géographique

– Information météorologique

B.Shishedjiev - Génie logiciel 16

Utilisation des couleurs• Les couleurs sont utiles quand

– On doit améliorer la compréhensibilité– On doit souligner des évènements exceptionnels

• Erreurs communes– Utiliser la couleur pour communiquer le sens– La sur-utilisation de la couleur à l'écran.

• Recommandations– Borner le nombre de couleurs– Utiliser changement de couleur quand il ya un

changement d’état– Soyez prudent sur paires de couleurs

B.Shishedjiev - Génie logiciel 17

Les messages d’erreurs• Importance• Recommandations – poli, concise, consistent,

constructif. • Facteurs

– Contexte– Expérience de l’utilisateur– Niveau de compétence– Style – positif, de ne pas offendre– Culture

B.Shishedjiev - Génie logiciel 18

Bon est mauvais message• Supposons qu'une infirmière tape avec une

erreur le nom d'un patient dont les dossiers qu'il essaie de récupérer.

B.Shishedjiev - Génie logiciel 19

Error #27

Invalid patient id

OK Cancel

Message orienté vers le système Message orienté vers l’utilisateur

R. MacDonald is not a registered patientClick on Patients for a list of patientsClick on Retry to re-input the patient’s nameClick on Help for more information

Patients Help Retry Cancel

Conception de l’IU

B.Shishedjiev - Génie logiciel 20

Analyse d’utilisateur• Modèles des procédures de interaction

– Scénario– Diagrammes des séquences

• Interview– Individuelles – des questionnes ouvertes– En groupes

• Observation

B.Shishedjiev - Génie logiciel 21

Prototypes• En papier

– Des croquis de l’interface– Des bandes dessinées

• Prototypes sur ordinateurs– Simulation des scénarios– Programmation visuelle – exige certaine fonctionnalité– L’approche du “Magicien d’Oz”

B.Shishedjiev - Génie logiciel 22

Evaluation• Critères

– Facile pour apprendre

– Vitesse d’opération

– Robuste – tolérant vers les erreur d’utilisateurs

– Capacité de récupération après une erreur

– Capacité d’adaptation

• Techniques d’évaluation– Questionnaires

– Enregistrement vidéo

– Ajouter de code qui collecte information concernant la session

– Ajoute de code qui collecte les réactions des utilisateurs

B.Shishedjiev - Génie logiciel 23