P13 [PROJET SI28 : ECRITURE INTERACTIVE ET MULTIMEDIA] Jourdaine Marc Lefèvre Mathilde Rossier Titouan Salles Martin. Responsable : Serge Bouchardon

Transcription

1 P13 Jourdaine Marc Lefèvre Mathilde Rossier Titouan Salles Martin Responsable : Serge Bouchardon [PROJET SI28 : ECRITURE INTERACTIVE ET MULTIMEDIA]

2 Sommaire Concept... 3 Objectifs... 3 Public-cible... 3 Structure et navigation... 3 Modules disponibles... 4 BackOffice... 4 Photos... 4 Messagerie interne... 4 Aide... 4 Ressources médias... 5 Formes et degrés d'interactivité... 5 Choix techniques... 5 Story board/ Schéma d'utilisation... 5 Scénario d'utilisation... 6 Backoffice... 7 Utilisation sur tablette... 9 Conclusion sur notre projet: Annexes Planning général Maquettes Si 28 - Padoo Page 2

3 Concept Les nouvelles technologies ont permis de développer de nouveaux moyens de communication. Cependant, une catégorie de personnes est en marge de cette nouvelle opportunité: il s agit des personnes âgées. En effet, la majorité des personnes âgées ne sait pas (ou très peu) utiliser les outils de communication mis à leur disposition car il y a une grande appréhension de l objet physique associé (ordinateurs, téléphones portables, tablettes). Pourtant, vivant souvent loin de leur famille, les personnes âgées auraient beaucoup d avantages à s initier à ces nouveaux modes de communications, maitrisés et utilisés quotidiennement par leur descendance. La tablette est le dernier outil arrivé sur le marché et est donc à la pointe de la technologie. Bien qu il puisse y avoir une appréhension de l'objet physique nouveau, la tablette est un outil plus adapté au troisième âge de par sa simplicité d utilisation. Le «Padoo» est une application tablette qui permettrait aux personnes âgées de pouvoir découvrir certaines possibilités du web. Des applications développées spécialement pour les personnes âgées existent déjà, telles que Tooty et Doro. Cependant, elles ont des niveaux de complexité plus importants et s adressent donc à un public qui a déjà eu un contact avec l outil tablette. Nous estimons qu une interface très simple avec un contenu limité reste intéressante. Objectifs L objectif principal est de proposer un site web optimisé pour une utilisation sur tablettes qui s adapterait à la personne et lui permettrait d avoir accès à certains outils de communication de manière simple et intuitive. Cette application doit mettre la personne en confiance vis-à-vis de l utilisation d une nouvelle technologie et le contenu doit être adapté et attractif pour les personnes du troisième âge. Public-cible Le public cible est les personnes âgées qui ont du mal à prendre en main l'outil informatique et les fonctionnalités qu'il propose. Structure et navigation L objectif est de garder l utilisateur sur le site en évitant de lui proposer des liens vers l extérieur pour éviter qu il se perde dans l internet mondial. Si 28 - Padoo Page 3

4 Modules disponibles Accueil Météo Messagerie Album photo Jour Fête citation du jour horloge Jour courant / lendemain France / local Messages regroupés par contact Possibilité de répondre Photos avec légende Légende modifiable Passage d'une photo à l'autre intuitif Une liste des modules et un bouton d aide seront accessibles sur toutes les pages. BackOffice Une application backoffice sera disponible pour des personnes de la famille qui pourront configurer l interface accessible à l utilisateur. Photos Les membres de la famille pourront mettre en ligne (upload) des photos qui seront alors visibles dans l album de l utilisateur. Il sera possible de légender la photo. Messagerie interne Il sera possible d ajouter un contact et d envoyer un message à l utilisateur. Les messages s afficheront par conversation afin que chaque contact puisse répondre aux messages de l utilisateur qui lui sont destinés. Aide Un bouton d aide présent en permanence, sur toutes les pages, toujours au même endroit Lorsque l utilisateur clique sur le bouton d aide une bulle d aide apparait et explique les interactions possibles, en mettant en évidence les objets concernés. Lorsque l utilisateur fait une action, l aide disparaît. Si 28 - Padoo Page 4

5 Ressources médias Météo : images récupérées sur des sites mettant à disposition le contenu. Les photos de l album photo et leur légende, ainsi que les textes des messages seront fournis par les utilisateurs via l interface utilisateur ou le backoffice. Quelques images et boutons de navigations propres à l application seront créés par l équipe. Formes et degrés d'interactivité Utilisation des gestes permis par l outil tablette. Rester dans des gestes simples, intuitifs et faciles à retenir qui restent adaptés au public ciblé. L interface backoffice sera une interface classique de site web avec des formulaires, puisqu elle est destinée à des utilisateurs habitués à l informatique et au web. Nous avons décidé d'utiliser le framework Bootstrap (style et JavaScript utilisé par Twitter). Son avantage est une interface simple et élégante. Choix techniques Le site devra être adapté à une utilisation tablette. Il pourra être installé sur un appareil sous la forme d un raccourci qui ouvrira directement le site dans le navigateur en plein écran. Technologies utilisées : HTML5/CSS3 PHP MySQL L hébergement se fera chez le fournisseur d accès Free (gratuit et facile à mettre en place). Story board/ Schéma d'utilisation L'application sera décrite en deux temps: le backoffice et le FrontOffice. Le backoffice est à destination des proches de la personne utilisant l'application. Nous sommes partis de l'hypothèse que les personnes utilisant le backoffice connaissent internet. Le backoffice se présente donc sous forme d'un site internet classique et non d'une application intuitive. Le frontoffice est à destination de la personne âgée. Il s'agit de l'application tablette PADOO. Si 28 - Padoo Page 5

6 Scénario d'utilisation Lors de la première connexion, la personne âgée est dans l'idéal accompagnée par les personnes qui suivront son utilisation de PADOO via le backoffice. La première étape pour l'utilisation de PaDOO est l'inscription. L utilisateur dois fournir son nom, son prénom, son identifiant et le mot passe associé. Pour faciliter l'accès de l'application, l'administrateur doit faire 2 choses: créer un raccourci de la page web sur l'écran d'accueil de la tablette Lors de la première connexion, il entre le login et le mot de passe de la personne âgée, en cochant la case «mémoriser les identifiants». Dans la suite du story board, nous allons décrire les étapes séparément, selon si elles doivent être réalisées dans le back office ou sur la tablette. Les intervenants sur le backoffice seront les administrateurs et les personnes utilisant l'application sur la tablette seront les utilisateurs. Si 28 - Padoo Page 6

7 Backoffice Connexion sur la plateforme administrateur avec les identifiants de l'utilisateur : Création de son identifiant administrateur (nom et prénom) : Configuration de la météo Choisir la ville de résidence de l'utilisateur Si 28 - Padoo Page 7

8 Messagerie Une fois que l'administrateur aura crée son identifiant, la conversation entre l'administrateur et l'utilisateur s'affiche et l'administrateur peut envoyer un nouveau message. Configuration de l'album photos Ajouter des photos et légendes. L'administrateur peut ajouter une photo en cliquant sur choisissez un fichier et en mettant un lien url menant à la photo. Dans la partie "limite du projet", nous expliquons pourquoi nous ne pouvons pas sélectionner une photo directement depuis l'ordinateur. Si 28 - Padoo Page 8

9 Utilisation sur tablette Accéder à l'application Icône de l'application, l'utilisateur peut l'utiliser sans passer par un navigateur. L'utilisateur arrive alors sur la page d'accueil où il peut visualiser l heure, la date, la fête du jour et une citation. Si 28 - Padoo Page 9

10 Barre de navigation En bas de l'écran, la barre de navigation est visible et sera présente sur toutes les pages. Elle permet d'aller d'une page à l'autre et de se balader dans les différents contenus. Météo La partie météo est composée de 2 pages. Lorsque l'utilisateur arrive sur la partie météo, sur la première page est affichée la météo local selon la localisation que l'administrateur a choisit sur le backoffice. L'utilisateur pourra aussi voir la météo de la France en un seul clique. Message Sur la page message, l'utilisateur peut voir en premier toutes les personnes avec lesquelles il a échangé des messages et le dernier message échangé. Si 28 - Padoo Page 10

11 Si l'utilisateur clique sur lire le message, alors toute la conversation s'affichera, il aura la possibilité d'envoyer un nouveau message. Si 28 - Padoo Page 11

12 Galerie photo Lorsque l'utilisateur arrive sur la page photos, les photos insérées par l'administrateur s'affiche et l'utilisateur peut passer d'une à la photo suivante par un simple swipe. Bouton Aide Le bouton est présent à chaque page de l'application et indique tout les endroits de l'écran où l'utilisateur peut interagir. Si 28 - Padoo Page 12

13 Conclusion du projet: Au court du projet, nous avons du revoir régulièrement nos objectifs, en réduisant le nombre de possibilité qu'offre l'application. Nous avons notamment abandonné l'idée de faire une page proposant les informations, la météo est statique et non dynamique (problème de récupération des données via la géolocalisation). Par ailleurs, nous avons du abandonner le fait de pouvoir uploader directement les photos depuis l ordinateur car notre solution d hébergement free ne le permet pas. Nous avons donc décidé d insérer les photos dans la tablette à partir d URL. Les administrateurs pourront tout de même insérer leurs propres photos en les hébergeant sur des plateformes tierces. Nous avons aussi été limités par le fait que seulement deux membres de l'équipe étaient en génie informatique et savaient coder. Il a été assez fastidieux d'apprendre à coder aux deux autres membres ce qui nous a fait perdre du temps. Par ailleurs, nous n'avons pas toujours pu tenir le planning car nous n'avons pas toujours réussi à nous voir tous les quatre toutes les semaines. Le projet en lui-même comporte aussi une incompatibilité entre le fait de vouloir faire une interface simple d utilisation pour un public âgé et une interface interactive en utilisant le maximum de possibilités qu offre une tablette tactile. En effet en voulant simplifier l interface nous avons du minimiser les outils interactifs de manière à ne pas perdre l utilisateur. A postériori, nous aurons peut être préféré faire un projet plus simple techniquement où nous aurions plus put réfléchir à l'interactivité. Cependant, il est intéressant de travailler à destination d un public âgé parfois délaissé. Un projet de ce type pourrait servir d intermédiaire pour apprendre aux personnes âgées à se servir de tablettes. Une fois qu ils maitrisent bien ce type d application, ils auront moins d appréhension à utiliser des outils numériques avec plus de fonctionnalités. Ce projet nous a permis d'avoir une nouvelle approche de l'interactivité et du numérique. Si 28 - Padoo Page 13

14 Annexes Planning général Maque es Réalisa on Mokups Réalisa on maque es «taille réelle» à Mi avril Structure Intégra on design Structura on des pages en HTML Mise en place de la naviga on à Fin Avril Découpage maque es CSS à Début Mai Adapta on table e Réalisa on du Backoffice à Mi Mai Test et correc fs While Mamie!= J à Fin Mai Si 28 - Padoo Page 14

15 Maquettes Accueil Météo Si 28 - Padoo Page 15

16 Messagerie Photos Si 28 - Padoo Page 16