CAHIER DE SYNTHESE. responsive campus PAGE 1/27

Transcription

1 CAHIER DE SYNTHESE responsive campus PAGE 1/27

2 CONTEXTE Projet Court réalisation d une interface web responsive. Ce projet correspond à la phase de finalisation (ph3) d un projet long en 3 phases Ce projet est suivi par Franck Letrouvé et Gaetan Ark. Il s agit de concevoir une interface responsive pour smartphones, tablettes et ordinateurs. Il s agit de concevoir une interface responsive pour smartphones, tablettes et ordinateurs. PAGE 2/27

3 INTRODUCTION Bien que ce soit un projet court, nous avons eu le temps de discuter de notre travail avec d autres élèves de l école. Les constats sont globalement les mêmes ; les outils les plus consultés sont l agenda (pour les horaires et salles), les notes et la messagerie. Les outils les plus consultés sont l agenda, les notes et la messagerie. Une veille concurrentielle sur ce genre de site est compliquée car, quand bien même nous pourrions trouver une plateforme scolaire de qualité, nous n y aurions pas accès. Cependant notre propre expérience utilisateur ainsi que notre veille créative quotidienne nous a permis de nous reposer sur des bases fiables. PAGE 3/27

4 ANALYSE ET COMPRÉHENSION Nous ne nous sommes pas précipités sur nos écrans. Nous avons d abord posé nos idées sur papier ce qui a contribué à un échange efficace au sein du groupe. Par des mots, des traits, puis des ébauches d interfaces, nous avons commencé à trier et organiser les fonctionnalités selon les supports. Nous avons étudié les éléments à conserver et d autres ont été remis en question. De ces croquis a pu découler le wireframing. Nous avons étudié les éléments à conserver et d autres ont été remis en question. PAGE 4/27

5 OBSERVATION ET DÉCISIONS Nous avons observé de très près la charte graphique de l école. Ainsi ont été pris en compte les déclinaisons de logotype, les typographies en général et les différentes couleurs. Nous sommes également partis du principe que les utilisateurs ont des affinités avec les icones existants ce qui nous a motivé à les garder comme ils sont sur le site actuel ou a les modifier légèrement. Si le public a acquis les fonctionnalités liées aux icones, autant se fier à leur interprétation de l interface et la simplifier le plus possible. Si le public a acquis les fonctionnalités liées aux icones, autant se fier à leur interprétation de l interface et la simplifier le plus possible. Le logo est l empreinte de l école sur la plateforme mais il ne doit pas prendre le devant dans la lecture de l interface. C est pourquoi nous avons choisi sa déclinaison monochrome. PAGE 5/27

6 Nous allons maintenant vous présenter les pages principales du Campus Virtuel en détaillant à chaque fois les fonctionnalités et les décisions graphiques mises en place. PAGE 6/27

7 CONNEXION Excepté quelques écarts de taille du formulaire de connexion, cette page est la même quel que soit le support. La page est simple et sobre, notre regard va à l essentiel ; se connecter et se souvenir de moi. L aspect sombre de la page n est pas agressif mais garde tout de même son dynamisme grâce à des éclats de lumières qui mettent en valeur les éléments principaux tels que le logo de l école, les champs à remplir ou le bouton de connexion. mobile bureau tablette La page est simple et sobre, notre regard va à l essentiel. PAGE 7/27

8 ACCUEIL un chat mélangé à un flux d informations. C est ici qu on observe les premières nuances entre les différents supports. En version mobile on peut observer un chat mélangé à un flux d informations. En effet nous avons fusionné le mégaphone avec les actualités. Les actualités contiennent aussi les conférences et les concours car ce sont des informations éphémères au même titre que les messages des utilisateurs. Cependant on pourrait se dire que ces informations vont très vite se noyer dans le flux de messages. C est pourquoi il est possible de désactiver le chat (Mégaphone) afin de conserver uniquement les actualités, ou bien encore d aller dans le sous-menu «Services» pour afficher l historique de ces informations. Graphiquement, l interface est un peu plus claire que la page précédente et les différents types de flux sont différenciés par l intensité du gris et part une petite icone. Une nouvelle fonctionnalité a été ajoutée. En effet il est possible d ajouter des flux RSS à son fil d actualités : en d autres termes notre veille quotidienne de nos sites préférés est directement présente dans le flux. wireframe mobile mobile PAGE 8/27

9 ACCUEIL Un slide apparait avec les trois informations qui intéressent le plus les utilisateurs. slide en évidence slide ouvert À gauche de l écran nous avons mis un onglet avec la date du jour, ce qui est toujours utile dans une plateformes qui jongle autour des dates (entre agenda et emploi du temps). Si on appuie sur cet onglet, un slide apparait avec les trois informations qui intéressent le plus les utilisateurs à savoir les derniers mails, notes et l emploi du temps du jour avec une fil rouge qui nous indique franchement où nous en sommes dans notre journée. Les préférences permettent de choisir si après la connexion notre page d accueil est le flux d actualité ou le slide. PAGE 9/27

10 ACCUEIL wireframe tablette tablette Sur la version tablette le principe est le même mais le Mégaphone et le flux d actualités sont séparés. Le chat peut être ouvert ou fermé dans on appuie dessus pour laisser plus de place aux actualités qui, mise en page à la manière Pinterest, ont un colonage qui s adaptent à la largeur d écran. Le chat peut être ouvert ou fermé dans on appuie dessus. PAGE 10/27

11 ACCUEIL Sur la version bureau, légèrement plus sombre dans son ensemble, les slides deviennent des colonnes fixes. À gauche on retrouve donc notre emploi du temps ainsi que nos derniers mails et notes, mis en page uniquement avec du texte hiérarchisé pour une lecture optimale. À droite le Mégaphone est fixe aussi et au milieu nous retrouvons nos colonnes d actualités dont le nombre varie selon la largeur d écran. wireframe bureau bureau Les slides deviennent des colonnes fixes. PAGE 11/27

12 MENU Les sous-menus sont moins nombreux que sur la version actuelle. menu mobile menu tablette Sur la version mobile et tablette, on peut voir une icone menu hamburger en haut. À partir d ici nous pouvons voir notre photo de profil avec un lien vers les préférences utilisateur, ainsi qu un bouton déconnexion à droite, mis en valeur par son fond rouge. En dessous nous retrouvons les principaux sous-menus et leurs icones qui sont moins nombreux que la version actuelle du Campus, notamment dû au regroupement de fonctions comme le flux d actualités. PAGE 12/27

13 MENU Sur la version bureau il n y a pas de menu déroulant, les sous-menus se trouvent en haut, nous trouvions plus judicieux de regrouper la plupart des fonctionnalités importantes dans la barre du haut pour un confort d utilisation. Si l écran est large le titre des sous-menus apparaissent sous leur icone, et si l écran rétrécit, le titre disparait. Les fonctionnalités importantes dans la barre du haut pour un confort d utilisation. menu responsive bureau PAGE 13/27

14 PRÉFÉRENCE Nous parlions précédemment des préférences. Elles ont un rôle clef dans la pertinence d une interface adaptée à l utilisateur. Dans les faits, au-delà du réglage de la langue, il est possible de personnaliser son Campus Virtuel. Par exemple nous pouvons décider quelle est la page d accueil (ce qui existe déjà) et ajouter nos flux RSS, nouvelle fonctionnalité. Enfin le Mégaphone et les formats d agenda et d annuaire sont aussi réglables comme nous le verront après. L accès aux données personnelles (sa propre adresse mail, ses réseaux sociaux) et le bouton Help sont en lien sur une autre page car ils sont moins fréquentés. préférences mobile préférences tablette Elles ont un rôle clef dans la pertinence d une interface adaptée à l utilisateur. PAGE 14/27

15 NOTES La disposition des notes est la même sur les trois versions. Bien que la mise en forme soit basique, il y a néanmoins un gros travail de lisibilité. La plateforme est pensée de telle manière qu il y a toujours deux sens de lecture ; une lecture rapide ou l œil va rester accroché sur certains éléments clefs et une lecture plus en détail. Ici par exemple l œil s accroche d abord sur les grandes catégories en rouge puis sur les matières et enfin sur les devoirs détaillés. Les pages de sous-menus en général sont plutôt lumineuses mais ce n est pas un blanc pure qui agresserait les yeux. mobile bureau tablette Il y a un gros travail de lisibilité. PAGE 15/27

16 AGENDA Le regard sait tout de suite l emplacement des cours avec le rappel des horaires agenda graphique bureau Comment mettre en page l agenda a été une grande question pour nous. Sur la version bureau il n y a aucun problème, nous avons réutilisé un tableau par semaine avec les cases des cours, très lisible (la semaine est bien schématisée à laquelle nous avons ajouté des marqueurs rouges pour que le regard sache tout de suite l emplacement des cours avec le rappel des horaires). Nous avons également tenu à conserver l agenda en liste, présent sur les trois versions car c est une valeur sûre ; c est un bon moyen d avoir la visibilité de beaucoup de jours à l avance dans une taille d écran, avec les informations principales en évidence (la plupart des élèves ou professeurs ne regardent que leurs horaires et la salle, voir également la classe pour les intervenants). PAGE 16/27

17 AGENDA Sur la version mobile et tablette, la vision de l agenda graphique a été tronquée. Il y a bien une vue graphique mais au jour par jour car il était impossible de faire rentrer la semaine entière dans une écran si étroit. Cependant il nous semblait indispensable d avoir une vue d ensemble c est pourquoi nous avons créé la vue en diagramme (comme le diagramme de Gant). Dans cet affichage, nous pouvons avoir une vue d ensemble du temps en cours (sans détails) et du temps libre avec des marqueurs au contraste fort. De cette manière nous estimons avoir pallié à notre problématique d agenda. agenda diagramme mobile agenda graphique tablette Il nous semblait indispensable d avoir une vue d ensemble. PAGE 17/27

18 ANNUAIRE Comme une liste de contacts, avec la possibilité de leur envoyer un mail directement annuaire liste mobile annuaire grille bureau Sur la version actuelle de l annuaire il faut envoyer la classe d une personne qu on recherche avant de sélectionner son groupe et, en plus, il y a un bouton de recherche. Pour simplifier tout cela les quatre champs de recherche se suivent (version bureau) ou se superposent (mobile et tablette), avec un seul bouton de recherche. L affichage se fait en grille à la manière trombinoscope, et sur mobile et tablette il y a possibilité d afficher l annuaire en liste, comme une liste de contacts, avec la possibilité de leur envoyer un mail directement à partir de cette page grâce à l icone enveloppe à droite (discrète pour ne pas hacher la lecture). PAGE 18/27

19 RESSOURCES La page de ressources a connu un subtil changement, qui consiste à pouvoir avoir un aperçu d un document plutôt que le télécharger car, parfois, lorsque l on cherche un document on en regarde plusieurs avant de trouver le bon et l accumulation de téléchargements peut être encombrant. Il y a donc une icone œil à côté de l icone de téléchargement. En outre, bien que sur un ordinateur nous puissions recherche les mots clefs de la page (avec ctrl + F dans les navigateurs), sur mobile ou tablette c est inexistant. Un outil de recherche s impose donc (il a été ajouté sur les trois versions pour une question d harmonie et d accessibilité). Pouvoir avoir un aperçu d un document plutôt que le télécharger. ressources bureau La page est simple mais est efficace, va à l essentiel avec des titres accrocheurs et des descriptions plus discrètes. Sur la version bureau la colonne de droite avec les deux icones a pour rôle de ranger l information, pour que l utilisateur ne se perde pas dans le contenu. ressources tablette PAGE 19/27

20 PROJETS La mise en page est simple et accessible visuellement projets bureau projets mobile Bien qu il existe un filtre entre nos projets et tous les projets, cela ne suffit pas pour les trier car ils sont trop nombreux. Là aussi un outil de recherche s est imposé. La mise en page est à l image des ressources, les icones en moins, simple et accessible visuellement. Sur la version mobile ou tablette il suffit d appuyer sur la case correspondant à tel ou tel projet mais sur la version bureau nous avons souhaité conserver un lien pour en lire plus. PAGE 20/27

21 SERVICES Quelques fonctionnalités nous semblaient en marge vis à vis de leur utilisation peu fréquente. Si le besoin s en faisait ressentir de les utiliser elles ne sont pas bien loin puisqu il suffit d aller dans ce sous-menu. D abord nous parlions des actualités noyées dans le flux, ici nous pouvons retrouver l historique des actualités d une part et des concours d un autre (séparés pour ne pas avoir à trier éternellement). Ensuite le service d objets trouvés qui était déjà présent dans ce sous-menu ainsi que le plan de l école et l outil d upload de fichiers. Pas de fioritures une mise en page directe qui indique ses fonctions. services mobile Les rubriques de recherche d emploi et d outils externes nous paraissaient vraiment pauvres en terme de contenu, nous avons donc décidé de les mettre ici, en tant que liens utiles si jamais certains étudiants les utilisent. Enfin, Apple on Campus a fait son apparition récemment mais ne mérite sans doutes pas un sous-menu entier (qui ferait gonfler la lecture du menu). Il est ici aussi comme lien utile pour nous informer du partenariat qu Apple entretient avec l École de Design. Ici pas de fioritures une mise en page directe qui indique ses fonctions. PAGE 21/27

22 COULEURS Le rouge cette couleur apporte un premier degré de lecture à l interface. «le rouge met en avant les éléments dynamiques» Les couleurs secondaires (teintes de gris) Peu importe le support, le rouge met en avant les éléments dynamiques, c est à dire ceux avec qui on peut interagir ou les éléments clefs. En règle générale, cette couleur apporte un premier degré de lecture à l interface. Il y a de multiples associations entre deux couleurs, nous avons veillé à chaque fois (sur des écrans différents et à des intensités de lumière différentes), à ce que les contrastes soient suffisamment lisibles. PAGE 22/27

23 ICONES L icone de notes devient un icone d éditeur de notes pour la version des enseignants de l école. PAGE 23/27

24 CONCLUSIONS Nous avons pris en compte les différents besoins utilisateurs selon les supports sur lesquels est consulté le Campus Virtuel. Aucune fonctionnalité n a été supprimée, nous avons simplement hiérarchisé la structure de manière plus intuitive afin que les informations soient lisibles au premier regard. Comme l exprime très bien l énoncé, l une des principales difficultés de ce projet a été de travailler sur une plateforme que nous utilisons nous même. Nous avons dû faire en partie abstraction de nos habitudes individuelles et penser à tous les utilisateurs. Nous avons simplement hiérarchisé la structure de manière plus intuitive En outre, nos cours de méthodologie nous ont aidé à acquérir une bonne mécanique de travail de groupe. Nous avons pu, entre autres, établir le planning de ce projet (sous forme de diagramme de Gant). Nous avons évalué globalement un nombre d heures nécessaires à la finalisation de ce projet, ce qui motive réellement à travailler régulièrement car nous avons pu avoir une idée du temps à consacrer au projet chaque jour. PAGE 24/27

25 CONCLUSIONS Le Campus Virtuel a été pensé dans sa pluralité de supports de manière harmonieuse et responsive (adaptative) que ce soit en format portrait ou paysage. Le Campus Virtuel a été pensé dans sa pluralité de supports. PAGE 25/27

26 QUEL AVENIR? Un retour utilisateur pour encore optimiser l interface. Bien évidemment notre prochain objectif serait de coder la version bureau de la plateforme virtuelle mais également d améliorer notre code pour rendre l interaction et le responsive encore plus pertinents. Ensuite nous aurions aimé avoir quelques notions de langage Php pour pouvoir relier la base de données du Campus à notre projet afin d avoir un outil fini et utilisable par les étudiants qui serviraient de bêta testeurs et nous donneraient ainsi un retour utilisateur pour encore optimiser l interface. Nous serions bien sûr vraiment fiers que notre prototype laisse une empreinte dans une future version du Campus Virtuel. PAGE 26/27

27 Thomas Gauthier Théo Richard PAGE 27/27