MGL 835: Projet

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: 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

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:

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:

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: