Plan du cour Introduction. 2. Recherche du besoin. 3. Inspection des scénarios possibles (storyboard) 4. Prototypage rapide

Transcription

1 Plan du cour 1 1. Introduction 2. Recherche du besoin 3. Inspection des scénarios possibles (storyboard) 4. Prototypage rapide 5. Manipulation directe et représentation 6. Design visuel et design de l information 7. Mise en expérience du design

2 Aperçu du projet de design à réaliser: 2 A travers une série de travaux à la maison qui se complètent itérativement, vous allez réaliser un projet complet de design à la fin de ce cour. Le but de ce projet est de réaliser un service orienté-web ou une application, accessible à travers un mobile ou un navigateur de bureau classique, et qui répond aux besoins d un utilisateur. Par exemple: une application qui réalise la gestion des taches personnelles, de covoiturage, une application pour Smartphone pour la visualisation des lieux des routes bloquées, etc.

3 3 Vous ne serez PAS en train de réaliser une application totalement fonctionnelle. Par contre, ce que vous allez DEVOIR réaliser devait être utilisable depuis un navigateur web qui soit accessible à autrui. Une panoplie d utilitaires sera présentée et qui permet une réalisation fidèle de contenus interactifs sans avoir à utliser les codes HTML, CSS, JavaScript, etc.

4 DESIGN GRAPHIQUE - CHAPITRE 1 INTRODUCTION ISET Kairouan Bassem Seddik

5 Plan chapitre Interaction homme-machine 1.2 La puissance du prototypage 1.3 Evaluation des designs 1.4 La naissance des interfaces homme-machine

6 Buts 6 apprendre à réaliser le design d applications qui apportent la joie au lieu de la frustration. techniques pour le prototypage rapide l évaluation des interfaces alternatives, conduire votre flux de travail avec des gens qui peuvent aider réaliser des prototypes sur papier et des maquettes interactives de basse fidélité, avoir les avis de vos collègues, clients et utilisateurs.

7 Acquis 7 principes du design visuel principes de perception et de la cognition présenter de manière efficace les contenus de vos interfaces. Réaliser, en-ligne, des analyses contrôlées des expériences. le web-design comme un domaine de référence. exemples inspirés depuis des technologies web. Le but principal: donner les atouts pour construire d excellentes interfaces centrées sur l utilisateur humain indépendamment de la technologie utilisée.

8 Définition 8 Le design graphique est une discipline professionnelle qui a pour objectif de créer des objets de communication visuelle: logotype, livre, éléments de signalisation routière, affiche, brochure, site web, etc.

9 1- Interaction homme-machine 9 La meilleure solution d avoir une bonne idée, c est d voir plein d idées (Linus Pauling) Interaction Implémentation Design Homme Machine Evaluation

10 Comparaison 10 Les bons designs Apportent la joie Faciles à faire en suivant les bonnes étapes Les mauvais design coutent: De l argents Des vies Du temps

11 Design pour les gens 11 Les taches, ambitions et valeurs des gens rapportent progrès Travailler avec les utilisateur le long du processus Accéder aux décisions depuis le point de vue des utilisateurs, leurs travaux et environnements Faire attention aux capacités et situations des gens Parler à l expert actuel

12 2- Puissance du prototypage 12 Industrie: Le prototype est le premier, ou l'un des premiers exemplaires d'un produit industriel (voiture, avion ). Sa réalisation est une des phases de la conception de produit. Informatique: Le prototypage est une démarche qui consiste à réaliser un exemplaire incomplet et non définitif de ce que pourra être le produit final. wikipedia

13 Création rapide 13 Kodac Caméra numérique

14 14 S est une stratégie pour faire face efficacement à des choses qui sont difficiles à prévoir Se concentrer sur les objectifs Faire évoluer le design Le prototype est Début temps Fin facile à changer Non nécessairement complet

15 15 SANTA CLARA, California Jeff Hawkins Les gens l ont cru fou lorsqu il dessinait sur un bout de bois le premier Palm-Pilot

16 Atouts des prototypes 16 Sensation : A quoi ressemble t-il? Implémentation: Comment il va fonctionner? Rôle: Quelle sera l expérience de son utilisation? Les prototypes sont des questions. Il faut en poser plein!

17 Multiples idées en entrée 17

18 Une idée en sortie 18

19 Suite de filtres de sélection 19 Comment dire qu une telle idée choisie est vraiment innovante? Rapport qualité/cout/temps?

20 Sélection par volonté? 20 Exp: Yosra Mahnouch La sélection est peut-être le produit de la volonté à se prouver? En réalité: Des milliers de candidats en attente sur gradins La sélection est ardue

21 Cycles de développement d un logo 21

22 Création de beaux artefacts 22 conseils: Proposer plusieurs exemplaires Etre patient Regarder autour de sois son propre travail s améliorer Itérer les améliorations

23 3- Evaluation du design 23 Comment mesurer le succès d un design? Pourquoi évaluer le design avec le gens? Quels sont les truck cachés que vous voulez découvrir à propos d une interface? Comment les trouver? Différentes méthodes génèrent différents résultats: Qu est ce qu on veut apprendre?

24 QCM 24 Les expériences contrôlées: Peut limiter l applicabilité dans le monde réel lorsque appliqué dans des condition limitée de laboratoire Est une bonne manière de voir plus clairement les pratiques réelles des gens, par opposition au rapport personnels Est une solution rapide pour obtenir beaucoup de réponses depuis un très grand nombre de personnes Est une solution courante et directe pour corriger les bugs dans les logiciels existants

25 25 Etude d utilisabilité Enquêtes et groupe d intéret Commentaires depuis les experts

26 QCM 26 Etude d utilisabilité: Peut limiter l applicabilité dans le monde réel lorsque appliqué dans des condition limitée de laboratoire Est une bonne manière de voir plus clairement les pratiques réelles des gens, par opposition au rapport personnels Est une solution rapide pour obtenir beaucoup de réponses depuis un très grand nombre de personnes Est une solution courante et directe pour corriger les bugs dans les logiciels existants

27 QCM 27 Les enquêtes: Peut limiter l applicabilité dans le monde réel lorsque appliqué dans des condition limitée de laboratoire Est une bonne manière de voir plus clairement les pratiques réelles des gens, par opposition au rapport personnels Est une solution rapide pour obtenir beaucoup de réponses depuis un très grand nombre de personnes Est une solution courante et directe pour corriger les bugs dans les logiciels existants

28 28 Expérience comparatives Observations des participants

29 QCM 29 Les observations participatives et les expériences compratives: Peut limiter l applicabilité dans le monde réel lorsque appliqué dans des condition limitée de laboratoire Est une bonne manière de voir plus clairement les pratiques réelles des gens, par opposition au rapport personnels Est une solution rapide pour obtenir beaucoup de réponses depuis un très grand nombre de personnes Est une solution courante et directe pour corriger les bugs dans les logiciels existants

30 30 Simulation et modèles formels. Considération à prendre: Fiabilité et précision Généricité Réalisme Comparaison Travail demandé

31 4- Premières interf. homme-machine 31 Créateur de la silicon valley Memex

32 L interface graphique 32

33 Premiers Designs: Souris et Hypertexte 33

34 Premières initiations 34

35 Question 1 Question 2 Reformulation : 35 Quel est le problème avec la question de l'entrevue qui suit: «Aimez-vous la fonction Word Art de Microsoft Office?" Cochez toutes les cases correctes : La question de premier plan. La question suppose que l'utilisateur a deb bons sentiments sur la fonction Word Art de Microsoft Office. La question est trop ouverte. La question suscite une réponse binaire oui / non.

36 Question 3 : 36 Quand on réalise le prototypage avec une équipe, citer 3 avantages du partage de plusieurs modèles de design avec des membres de votre équipe, au lieu de partager une seule conception?

37 Question 4 37 Vous êtes un chercheur intéressé à trouver le temps de jour ou les gens s endorment le plus. Quelle technique permettrait d avoir le plus de données à partir du plus grand nombre de personnes avec la plus grande précision? observation participante enquête interview études expérience échantillonnage / téléavertisseur

38 Exemple de projet Différentes itérations

39 I worked on a web application which could display complex environmental pollution data sets into interactive visualizations. This could be used by school students to understand environmental issues. Below is one of the paper prototypes that I developed during the class.

40 After a few iterations I came up with a digital prototype. It looked something like this.

41 After that I did usability studies and other techniques I learnt during the course. Now it looked something like this.

42 Soon enough it started gaining traction and people started liking the idea. We then did a pilot user study at NITK English Medium School, Karnataka on 100 students of grade 6-8.

43 Having tested it on around 100 students, I gained confidence in the idea and applied it for IBM/IEEE Smarter Planet Challenge. This idea received an honorary mention among the Top 10, across all the projects from around the world. This was the only one from India to be in Top 10. This project later caught the attention UNEP and UNESCO and they have now asked our team to develop a similar platform for them.

44 44 Projet à réaliser