MGL 835: Projet de prototypage d'interface

1. Introduction

Pour ce projet, vous aurez à développer un prototype d'une interface logicielle choisie, suite à l'approbation du professeur du projet proposé. Deux sortes de projets sont possibles : (1) un projet de programmation, où l'étudiant(e) réalise un prototype interactif avec un langage et des outils de développement de son choix; ou bien (2) un projet où l'étudiant(e) réalise un prototype statique -- dans ce deuxième cas, le projet doit aussi comprendre une composante d'évaluation du prototype. L'interface aura au moins un aspect de nature expérimentale, novatrice, ou hors de l'ordinaire. Comme livrable, vous aurez à remettre un rapport qui discute de la conception et la réalisation de votre l'interface, et qui montre des images (par exemple, des captures d'écran ("screen shots")) montrant le prototype. Vous aurez aussi à présenter le projet final oralement en classe de manière informelle et rapide (environ 10 minutes).

L'interface n'a pas besoin d'être conçue pour un ordinateur de bureau -- elle peut être conçue pour une automobile, un "PDA" ou ardoise, téléphone cellulaire, etc. De plus, l'interface n'a pas besoin d'être conçue pour des dispositifs conventionnels (souris et clavier); vous pouvez investiguez d'autres dispositifs d'entrée et/ou de sortie si vous voulez.

Le sujet de votre projet n'a pas besoin d'être une interface pour une "application" conventionnelle, consistant d'une fenétre complète avec une barre de menu, des boutons, et tout le contenu associé. Votre projet pourrait se concentrer plutôt sur un seul widget, une seule "technique d'interaction", ou un seul algorithme que vous dévellopiez. Ce qui rendra le projet intéressant est s'il y a un aspect novateur dans l'interface, et si vous pouvez présenter une motivation raisonable et une démarche d'analyse et de conception dans le rapport final.

Un élément nécessaire dans votre projet sera que l'interface ait un aspect novateur, ou expérimental, ou hors de l'ordinaire, ou un peu bizarre, ou qui essaie de combiner les avantages de deux interfaces ou produits conventionnels. Une partie de l'évaluation de votre projet sera basée sur son originalité et sa créativité. Une partie encore plus importante dépendera de votre capacité de faire preuve d'analyse et de raisonnement, et de justifier les décisions que vous allez prendre dans la conception de l'interface, même si en bout de ligne vous vous rendez compte que votre idée de conception originale n'était peut-être pas très bonne. Un projet idéal menerait à un article publiable, mais je m'attends à ce que la majorité des étudiants n'atteignent pas tout à fait ce niveau.

1.1 Projet de programmation

Pour ceux qui choisissent de faire un projet de programmation, voici quelques remarques:

Vous n'avez pas besoin d'écrire du code en partant de rien. Vous pouvez prendre du code existent et le modifier ou l'améliorer. Toutefois, il faut clairement indiquer d'où vous avez pris le code, ce que le code faisait déjà, et ce que vous avez rajouté comme fonctionnalités dans le cadre du projet. De façon semblable, vous pouvez utiliser des libraries ou d'autres outils de développement (par exemple: des générateurs de code), mais il faut les mentionner dans votre rapport et expliquer ce qu'ils ont permis de faire, et ce que vous avez fait comme travail de programmation.

L'application derrière l'interface n'a pas besoin de fonctionner réellement. Vous pourriez avoir une simulation. Par exemple, si une interface pour un fureteur de web ou gestionnaire de fenêtres vous intéresse, mais vous ne voulez pas modifier un vrai fureteur de web ou gestionnaire de fenêtres, vous pourriez monter une simulation de pages webs ou de fenêtres (peut-être stockées comme images statiques) et monter une interface pour faire une preuve de concept, pour démontrer votre idée. L'interface doit, bien sûr, être intéractif! Par exemple, dans l'exemple du fureteur de web ou du gestionnaire de fenétres, les images statiques des pages web ou des fenêtres doivent être réellement manipulables (exemple: on clique sur un lien simulé, et on passe réellement à une autre page simulée).

Le projet doit avoir une interface interactive; pas juste un algorithme qui impliquera très peu d'interaction avec un utilisateur. Si vous voulez vous concentrez sur le développement d'un algorithme (par exemple: an algorithme d'apprentissage pour un réseau de neurones), pensez à le rendre plus interactif avec une interface pour changer des paramètres de l'algorithme, ou bien une interface visuelle pour déboguer l'algorithme ou pour visualiser ou animer son fonctionnement.

Si vous n'êtes pas très comfortable avec la programmation, ou ça fait longtemps que vous n'avez pas programmé, je vous suggère d'éviter le JavaScript, qui n'est pas du tout la même chose que le Java. Le JavaScript impose beaucoup de limitations sur ce que vous pouvez faire, alors utilisez le seulement si vous savez dans quoi vous vous embarquez.

Voici quelques resources de programmation qui pourraient vous être utiles:

Java

Petit tutoriel sur les applets Java
JOGL - permet d'utiliser le OpenGL à partir du Java, pour créer des interfaces 3D
Java3D - permet de monter des interfaces 3D en Java; c'est une alternative au OpenGL
JInput - permet d'utiliser, par exemple, deux souris en même temps comme dans une interface bimanuelle
Échantillons de code source (pris de d'autres cours):
un logiciel de dessin 2D simple en Java, pris du cours LOG350

un logiciel 3D simple en Java (utilisant JOGL et OpenGL), pris du cours LOG740

C/C++

Conseils, et échantillon de code source, pour la programmation 3D en C++ avec OpenGL
Si vous avez besoin d'utiliser des images bitmaps dans votre interface, j'ai des routines C++ qui permettent de lire des images en format PPM / PGM / PBM
Des boîtes à outils d'interface ou de widgets: Qt (compatible avec le OpenGL), GLOW (utilise OpenGL), GLUI (utilise OpenGL). Notez que le Qt ne nécessite pas le OpenGL, et qu'il a des fonctionalités permettant d'afficher des pages web.

Python
Le Python représente un avancement technologique par rapport au Java semblable à l'avancement représenté par le Java par rapport au C++. Le Python a plusieurs libraries qui facilitent la création d'interfaces utilisateurs, la manipulation d'images, l'interaction avec les boîtes à courriels, etc. Si cela vous intéresse, je pourrais vous indiquer plus de resources et d'informations.

D'autres possibilités de langage et de plateformes: Processing, Flash (ActionScript), Visual Basic, C#, ...

1.2 Projet de prototypage statique

Si vous choisissez un projet de prototypage statique, vous aurez un travail supplémentaire d'évaluation à faire, pour compenser du fait qu'il n'y a pas de composante de programmation dans votre projet. Les étapes à suivre pour un tel projet sont:

Développer une première version de votre prototype, soit en papier (cela peut être fait à la main) ou bien en utilisant un éditeur d'images ou en créant des pages web.
Évaluer ce premier prototype, par vous même, en utilisant une évaluation heuristique. Vous devrez consulter les sites http://www.useit.com/papers/heuristic/ et http://www.useit.com/papers/heuristic/heuristic_evaluation.html , et lire les articles http://doi.acm.org/10.1145/97243.97281 et http://doi.acm.org/10.1145/142750.142834 pour apprendre comment effectuer une évaluation heuristique selon Nielsen.
Modifier votre prototype selon les résultats de l'évaluation heuristique, pour ensuite produire une deuxiéme version de votre prototype. La deuxième version devra être fait à l'ordinateur, avec un éditeur d'images ou bien sous forme de pages web.
Évaluer la deuxième version de votre prototype avec des utilisateurs. Pour faire cela, il faut choisir deux tâches que vous allez demander aux utilisateurs d'effectuer, et ensuite vois asseoir avec deux utilisateurs (séparément) et leur demander d'effectuer les tâches, en simulant le fonctionnement de l'interface. Vous devrez prendre en note les commentaires des utilisateurs et les problèmes qu'ils rencontrent dans l'interface.
Rédiger une liste de changements recommendés à l'interface, en fonction des résultats de l'évaluation avec des utilisateurs.

Notez: un éditeur d'images gratuit qui pourrait vous être utile, si vous voulez travaillez avec des couches, est le gimp.

2. Présentation orale de votre projet envisagé

Avant de commencer votre projet, à une date qui sera annoncée, vous aurez à présenter devant la classe votre idée de projet. Cette présentation est informelle est ne durera que environ 4-8 minutes. Vous devrez

décrire l'interface que vous envisager prototyper
montrer des esquisse(s) de l'interface prévue (cela peut être fait au tableau avec de la craie)
donner une briève motivation pour l'interface (c.-à-d. une raison d'être, une logique, une justification -- expliquer pourquoi vous voulez essayer votre idée)
identifier en quoi votre interface sera novateur/experimentale/hors de l'ordinaire
(dans le cas d'un projet de programmation) parler bièvement de votre langage/plateforme choisi pour développer le projet

Vous pouvez, au choix, préparer quelques diapos d'avance que vous pourrez projeter pour cette présentation.

Une fois votre projet fini, à la fin de la session, vous aurez à présenter les résultats de votre projet devant la classe, encore une fois dans un format informel et durant juste quelques minutes par personne.

3. Quelques idées, suggestions, exemples de projets

Voici une liste de suggestions et d'exemples de projets pour vous inspirer:

Un jeu.
Une interface pour assister à la création artistique (musique, dessin, images ...)
Une interface audio (exemple: des icônes sonores)
Une animation interactive.
Une interface pour aider à fureter une collection de musique (exemple: un ensemble de fichiers mp3). Exemple: Pacheco+schraefel 2000
Une interface glisser-déposer ("drag-n-drop").
Une étude de différentes techniques d'interaction pour spécifier les dimensions, angles, couleur, transparence, position, et orientation d'un triangle, avec une souris, dans une application de dessin.
Un widget, par exemple, un menu contextuel qui contient un arrangement non-conventionnel de commandes (par exemple: un menu radial), ou qui permet d'ajuster des variables continues au lieu de sélectionner des commandes (par exemple: une barre de défilement contextuelle "popup").
Une interface conçue pour enfants (amusante, avec des gros boutons et un gros curseur, etc.)
Une interface qui utilise un curseur de souris non-conventionnel (animé, 3D, ...) Exemple: Bubble Cursor Grossman+Balakrishnan 2005
Une interface pour aider à mieux fureter le web. Exemples: visualiser les chemins suivis et les pages déjà visitées; ou bien visualiser les pages qu'on pourrait visiter, et les liens entre eux, en effectuant un "pre-fetch" de ces pages à partir de la page actuelle.
Une interface pour aider à mieux lire et organiser ses courriels.
Une interface pour aider à gérer les fenêtres et icônes sur notre bureau virtuel.
Une interface qui calcule une prédiction du mouvement de curseur de souris pour, par exemple, essayer d'aider à sélectionner des boutons virtuels.
Une interface distribuée sur un réseau. Exemples: un jeu réseau, une interface (du genre "chat" ou "IM") pour communiquer à travers un réseau, une interface pour surveilleur un "spider" qui traverse un réseau, ...
Une interface avec une fonctionalité "undo" plus riche que celle qu'on rencontre dans les interfaces conventionnelles. Par exemple, peut-être avec une barre de défilement ("scrollbar") pour avancer ou reculer dans le temps, ou peut-être avec une arborescence d'états qu'on peut naviguer au lieu d'une simple séquence linéaire.
Quelque chose qui se sert d'entrée par stylet. Par exemple, une interface gestuelle. (Wacom a des tablettes pour stylets qui coûtent peu cher, que vous pourriez utiliser comme périphérique d'entrée pour votre interface: [ site web ])
Une interface qui montre un graphique d'une courbe mathématique, et qui permet de zoomer et de défiler la vue de la courbe, avec affichage intelligent des étiquettes sur les gradations des axes x et y. Peut-être permettre à l'utilisateur de changer la courbe en glissant sur des points de contrôle, et peut-être aussi défiler de façon automatique si l'utilisateur glisse en dehors de la fenêtre.
Une interface zoomable ("zoomable user interface", ou ZUI). Par exemple, une toile virtuelle ou une espace virtuelle qu'on peut naviguer en défilant et aussi en zoomant. vidéo, survol rapide des ZUIs, Bederson+Hollan 1994, site web de pad++, librarie pour développer des ZUIs, vidéo montrant Seadragon
Une interface qui se sert d'un périphérique non-conventionnel (exemples: souris avec une douzaine de boutons, souris avec deux boules qui peut détecter l'orientation en plus de la position, etc.) Balakrishnan+Patel 1998, Balakrishnan et al. 1997 [ vidéo ] 3D Connexion
Fisheye Menu: Bederson 2000 [ site web ] [ démo java ]
FlowMenu: Guimbretière 2000 [ vidéo ]
Marking Menus (une sorte de menu radial): Kurtenbach+Buxton 1994 [ recherche google ]
Interfaces pour sélectionner des couleurs ou explorer une espace de couleurs: [ recherche google ]
Speed-dependent Automatic Zooming (zoom automatique): Igarashi+Hinckley 2000 [ site web ] [ démo java ]
Expanding Targets (des boutons qui changent de grosseur selon la position du curseur): McGuffin+Balakrishnan 2002, McGuffin+Balakrishnan 2005 [ démo java ]
Fold-n-Drop (plier-déposer): Dragicevic 2004 [ vidéo ] [ site web ]
Bumptop (bureau virtuel): Agarawala+Balakrishnan 2006 [ vidéo ] [ site web ]
Filelight (visualisation radiale d'arborescences en 2D): [ site web ]
Treemaps (visualisation d'arborescences en 2D): [ site web ]
Visualisation de musique Bergstrom et al. 2007 site web
Cone trees (visualisation d'arborescences) en 3D: [ site web ] [ références ]
Babillard en 3D: [ site web ]
Visualisation 3D du retournement d'une sphère: [ site web ]
Visualisation d'un réseau en 3D: [ site web ]
Visualisation de simulations de fluides en 2D et 3D: [ site web ]
Des projets sur lesquels j'ai déjà travaillé: [ page web 1 ] [ page web 2 ]

Pour encore plus d'idées, vous pourriez feuilleter les actes des conférences CHI (Conference on Human Factors in Computing Systems) et UIST (Symposium on User Interface Software and Technology) dans la bibliothèque virtuelle de l'ACM (Association for Computing Machinery).

Si, sur mon site web, vous voyez un projet antérieur sur lequel j'ai déjà travaillé qui vous intéresse, je pourrais vous fournir le code source pour que vous puissiez le modifier.

Rapport final

Votre rapport final aura à décrire votre interface. Idéalement, ce rapport serait publiable comme article académique, mais je m'attends à ce que la plupart des étudiants n'atteignent pas tout à fait ce niveau de contribution. Toutefois, je vous demande d'émuler le style académique d'écrire un article.

Je vous permettrez la liberté d'écrire votre rapport avec une grande flexibilité, en utilisant votre bon sens. Je n'imposerait pas de gabarit à suivre à la lettre. Toutefois, je m'attends à voir des sections dans votre rapport qui couvrent les éléments suivants:

un sommaire ou résumé qui décrit brièvement le projet;
une introduction; une motivation; une mise en contexte et/ou discussion de travaux/articles/références/produits antérieurs ou reliés (citez et discutez au moins deux articles académiques reliés au projet); idéalement un petit survol de litérature comprenant quelques articles;
une description de votre conception/approche et les raisons pour votre conception/approche; peut-être une analyse des possibilités de conception ou une analyse des pours et des contres de différentes approches;
Ensuite, pour un projet de programmation,
- une description de votre implementation; peut-être des détails sur l'architecture ou les algorithmes particuliers que vous avez utilisés dans votre programme si vous trouvez ces détails pertinents (vous pouvez laisser tomber des détails "triviaux");
- brièvement, quelques détails sur le langage de programmation utilisé, libraries, plateforme, système d'exploitation, sources de données, etc.
- vos résultats (avec captures d'écran montrant l'interface);
et pour un projet de prototypage statique,
- Des sections correspondantes aux étapes énumérées plus haut (voir section 1.2 de ce document): premier prototype, évaluation heuristique, deuxième prototype, évaluation avec utilisateurs, changements recommendés.
peut-être des leçons que vous avez retirés du projet;
une conclusion;
une liste de directions pour l'avenir ou d'idées pour améliorer le projet ou continuer le travail;
une section de remerciements s'il y a lieu;
et vos références (qu'elles soient des articles, des sites web, etc.). Je m'attends, bien sûr, à ce que vous suivez un format consistent et standard de citation. Par exemple, pour un article, ne donnez pas juste un URL: nommez les auteurs, le titre, la conférence ou journal, etc.

Vous pouvez combiner, re-diviser, ou changer ces sections selon vos besoins, votre style personel, et votre bon sens, comme font les auteurs d'articles académiques. C'est à vous de décider sur quoi vous voulez vous concentrer et sur quoi mettre l'accent. Si vous êtes dans le doute, montrez moi un brouillon de votre rapport et demandez moi des conseils.

Comme mentionné ailleurs, une partie de mon évaluation de votre projet sera basée sur son originalité et sa créativité.

Une deuxième partie, encore plus importante, dépendera de votre capacité de faire preuve d'analyse et de raisonnement, et de justifier les décisions que vous allez prendre dans la conception de l'interface, même si en bout de ligne vous vous rendez compte que votre idée de conception originale n'était peut-être pas très bonne. Donc, il serait souhaitable que vous ayez une section explicite dans votre rapport qui fait de l'analyse, par exemple, qui identifie, discute, analyse, et compare différentes possibilités de conception, ou différents systèmes existants, pour motiver et justifier la conception et l'approche que vous adopterez dans votre interface.

Dans le cas des projets de programmation, une troisième partie de mon évaluation dépendra du défi technique représenté par le projet, et de l'habileté technique que vous avez démontrée. Si vous avez des capacités de programmation assez limitées, et que l'aspect programmation de votre projet risque d'être plutôt simple, je vous encourage fortement d'essayer de compenser en mettant plus d'accent dans les aspects analytiques de votre rapport, par exemple en discutant différentes possibilités de conception, les pours et contres et compromis, les stratégies et solutions possibles, et peut-être même en développant une taxonomie de stratégies ou de possibilités. (De plus, si vous pensez avoir à passer beaucoup de temps à apprendre un langage de programmation ou une librarie avant de pouvoir vous concentrer sur la programmation de votre interface, et que votre projet va donc manquer d'envergure technique, vous pouvez essayer de compenser un peu dans votre rapport en parlant en peu des leçons que vous avez retirés ou des fonctionnalités particulières que vous avez maîtrisées dans le langage ou la librarie qui vous ont aidé à réaliser votre interface.)

Dans le cas des projets de prototypage statique, la troisième partie de mon évaluation dépendra de la qualité des prototypes et des évaluations heuristique et avec utilisateurs, et les changements effectués ou recommendés suite à chaque évaluation.

Quatrièmement, une partie de mon évaluation dépendra de la qualité de présentation du rapport. Ceci comprend l'orthographe, la grammaire, la structure des paragraphes et des sections, la présentation logique des idées, la qualité des figures, etc.

Voici trois exemples de rapports de projets qui pourraient servir à vous donner une idée approximative de mes attentes en termes de contenu et de longueur. Ces rapports n'étaient pas écrits pour des cours de conception d'interfaces utilisateurs. Je ne vous les présentent pas comme gabarits ou exemplaires à suivre nécessairement dans ce cours, mais plutôt pour éviter que certains étudiants n'aient aucune idée des attentes. [ exemple 1 ] [ exemple 2 ] [ exemple 3 ] Vous pouvez aussi regarder les nombreux articles académiques qui décrivent différents systèmes intéractifs pour avoir des idées de comment rédiger votre rapport.

Votre code source ne sera pas noté, mais je demande toutefois une copie de votre code source final. Si votre code source peut-être imprimé en moins de 20 feuilles de papier (recto verso, deux pages par feuille physique), veuillez en annexer une impression à votre rapport. Autrement, veuillez m'envoyer par courriel une copie électronique de votre code source.

De plus, je me réserve le droit de demander une démonstration de votre système si je le juge nécessaire.

Évitez soigneusement toute forme de plagiat, ou même la possibilité de donner l'impression d'un plagiat, dans votre projet et votre rapport. Si vous utilisez une idée, une librarie, un outil, un algorithme, du code source, des données, des images, des fichiers, un gabarit, ou autres choses d'un autre auteur, indiquez le clairement dans votre rapport et expliquer comment vous l'avez utilisé ou modifié. Ne risquez pas de donner l'impression que vous avez créé quelque chose que vous n'avez pas en faite créée par vous même. Il est tout à fait normal pour les chercheurs d'utiliser les idées, les résultats, et les outils des autres pour bâtir de nouveaux résultats et faire des nouvelles découvertes; mais il faut toujours bien citer ses sources et remercier ceux qui nous ont aidés de façon appropriée. Si vous citer une partie du texte d'un article, évidemment, indiquer que c'est une citation et donner la source de la citation. Il existe plusieurs moyens pour un professeur de détecter des cas de plagiat, et lorsque ces cas arrivent, c'est une situation grave qui sera traîtée sévèrement.

Évaluation:

10% - Originalité et créativité
30% - Analyse des possibilités, raisonnement, justification des décisions
30% - Pour un projet de programmation: défi technique, envergure, programmation. Pour un projet de prototypage statique: qualité des prototypes, et des évaluations heuristique et avec utilisateurs, at changements effectués ou recommendés.
30% - Présentation claire, orthographe, grammaire, structure des phrase et paragraphes et sections, qualité des figures, présentation logique des idées