Charte Ergonomique. Agence : Team Tim. Décembre IUT de Marne-la-Vallée. Une boite, des idées.

Transcription

1 Charte Ergonomique Une boite, des idées. Agence : Team Tim Décembre 2015 IUT de Marne-la-Vallée

2 Sommaire 1. Le site web 3 A. L'arborescence 3 B. Les différentes pages 4 C. La navigation 6 2. L application 7 A. L'arborescence 7 B. Les wireframes 7 3. Les attentes de la cible 10 A. La gestuelle 10 B. Le design Annexes Wireframes des autres pages Wireframes de l'application 12 2

3 1. Le site web Pour permettre la promotion de Shakin BOX, nous avons créé un site vitrine. Son objectif est de présenter l application de façon simple et claire, mais avant tout efficace. A. L'arborescence Le site internet de Shakin BOX est constitué de 4 pages : l accueil, la présentation de l agence, le FAQ, le formulaire de contact. Nous avons voulu limiter le nombre de pages pour permettre une navigation simple et éviter à l utilisateur de se perdre. Sur cette arborescence ont été indiqués les éléments clés des pages pour une présentation plus simple. 3

4 Lorsque nous allons sur le site, nous arrivons sur une page de présentation. Divisées en plusieurs parties, elle reprend le principe d un one page : plusieurs blocs différents s enchaînent. L objectif est d éviter à l utilisateur de changer de page pour trouver des informations sur l application. Elle se compose de 3 blocs différents : L écran d accueil avec le logo de l application en blanc et une flèche incitant au scroll. En background se trouve une vidéo légèrement floutée pour ne pas compromettre la lisibilité. La partie de présentation contenant une vidéo promotionnelle, la maquette de l application, et une vidéo explicative du fonctionnement. Le tout sera commenté avec des textes dans le cas où l utilisateur ne pourrait pas lire les vidéos. B. Les différentes pages B.1. La page d'accueil 4

5 La zone de téléchargement avec un texte, le logo de l application pour le présenter à l utilisateur et la familiariser avec cette version modifiée du logo original. De ce fait, il ne sera pas perdu et la retrouvera facilement dans son mobile. A cela s ajoutent les 3 liens de téléchargements sur les différents appstores. Lors d un clic, ils redirigeront sur la page de l application sur ces stores. Notre page d accueil est donc centrée sur l application en elle-même. Cependant, le site dispose aussi de 3 autres pages. B.2. Les autres pages Le principe de fonctionnement des autres pages reste le même : nous arrivons sur un écran d accueil avec le titre de la page en blanc sur une photo floue. Pour inviter au scroll, le bloc qui suit dépasse légèrement sur l écran d accueil et une flèche est présente. Seule la page de contact ne présente pas d image de fond. En effet, cette page se compose uniquement d un formulaire de contact, il n y a donc pas d utilité à ajouter ce système. Les wireframes de la page de présentation de l agence, de la FAQ et de la page de contact sont disponibles en annexe 1. 5

6 C. La navigation Notre site contient une nav bar d une hauteur de 50 pixels. C est une hauteur idéale pour la lecture des différents onglets et une taille qui est familière aux internautes. La position de cette barre de navigation constitue un autre élément important du point de vue ergonomique. Dans notre cas, elle se situe en haut de l écran et est toujours présente. Elle est fixe, c est à dire que lorsque l utilisateur scrolle sur la page, la barre de navigation sera toujours maintenue en haut de l écran. Cela permet aux internautes de ne pas être contraints de remonter en haut de la page pour naviguer sur le site. Cela engendre néanmoins un inconvénient non négligeable sur les petits écrans : la perte de place. Pour contrer ce problème, la barre de navigation n est pas totalement opaque. Elle est sur un fond blanc à environ 50% d opacité. Concernant les intitulés des liens, ils sont courts et précis pour permettre à l utilisateur de comprendre vers où ils se dirige en un clin d œil. 6

7 2. L application A. L'arborescence L arborescence de l application est assez complexe. En effet, nous avons d une part une arborescence classique qui décrit les différentes pages, et d autre part celle dédiée au concept même de l application : le principe des catégories et des résultats en découlant. Le menu se compose de 6 parties qui peuvent changer si l utilisateur est connecté à un compte ou non. Par exemple, la rubrique Mon compte devient Créer un compte si l utilisateur n est pas connecté. De même pour Déconnexion qui devient Connexion. B. Les wireframes Notre application comporte de nombreux wireframes au vu du nombre élevés de pages accessibles. Nous allons présenter ici les étapes clés pour accéder à une activité, ainsi que le menu. Quelques autres wireframes sont disponibles en annexe 2. 7

8 L interface de l application est très simple. Il suffit de cliquer sur les boites correspondant à l état de l utilisateur. Une question est posée en haut de l écran et des choix de réponses sont disposés en dessous. De plus, pour permettre à l utilisateur de se repérer dans l application, nous avons placé une sorte de fil d Ariane au bas de la page. Les 3 points représentent les 3 questions. Nous avons supposé que sans cette indication, l utilisateur pourrait s attendre à beaucoup plus de questions, et juger cela trop long et ennuyeux. La 4 ème page est la page clé de l application, sur laquelle repose le concept lui ayant donné son nom. C est le moment où l utilisateur doit secouer son téléphone pour obtenir le résultat. Cependant, pour des raisons d accessibilité, l utilisateur peut aussi toucher la boîte pour obtenir son résultat. Une icône de menu est disponible en haut à gauche sur toutes les pages de l application. Encore une fois, ce choix a été fait pour une raison d habitude de l utilisateur. La logique fait que le menu est souvent placé à cet endroit. B.1. Accéder à l'activité 8

9 B.2. Le menu Accessible par le bouton hamburger ou par un swipe de gauche à droite, le menu permet à l utilisateur de se repérer et d accéder à de multiples fonctionnalités. L actu permet de visualiser un fil d actualité contenant les activités réalisées par les personnes à qui l utilisateur est abonné. Mon compte permet de voir son nombre d abonnés et d abonnements. Sur cette page, l utilisateur peut aussi modifier son compte et les paramètres de configuration de l application. Activités en cours permet à l utilisateur, une fois son activité terminée, de la valider et de la publier s il le souhaite. Toutes les activités permet d accéder à la liste complète de toutes les activités disponibles. Proposer une activité permet à un utilisateur connecté de soumettre à l équipe technique une idée d activité. Déconnexion permet, comme son nom l indique, de se déconnecter. 9

10 3. Les attentes de la cible Nous visons un public âgé de 14 à 26 ans. Les adolescents se munissent de leur premier smartphone à leurs 14 ans environ, et la vie étudiante prend fin à 26 ans dans de nombreux contextes. L objectif de l application est donc de répondre à aux attentes des utilisateurs d un point de vue ergonomique et graphique. A. La gestuelle Notre application comprends 3 mouvements : le clic, le swipe et le shake. La cible est habituée à utiliser des applications mobiles. Ces gestes qui lui sont familiers ne sont donc pas un frein à l expérience utilisateur. Le clic est l action la plus basique sur une expérience tactile. C est instinctif et très simple. Il est donc fondamental que Shakin BOX utilise ce geste. Le swipe est présent sur la majeure partie des applications disponibles sur les stores, et permet de naviguer entre différentes catégories ou encore de faire apparaître des éléments. Le shake est l action sur laquelle repose toute notre application. Elle consiste à secouer son téléphone. Peut présent sur les applications classiques, ce mouvement peut être vu comme trop envahissant, demandant un certain espace et un contexte favorable autour de l utilisateur. Pour parer à cela, l étape où l utilisateur doit shaker sont téléphone peut aussi être réalisée en touchant la boîte. B. Le design Notre cible connaît les tendances actuelles en matière de design, et veut que les applications qu elle utilise évoluent aussi avec leur temps. Le graphisme de Shakin BOX est donc actuel et répond aux codes du flat design et du material design. Ces deux tendances permettent d avoir un contenu clair et organisé tout en étant agréable à regarder. Il était important pour nous de faire une application aussi pratique d utilisation qu élégante. Nous savons par expérience que pour un même contenu, une présentation «vieillotte» et une autre moderne ne rencontreront pas le même succès. 10

11 5. Annexes 1. Wireframes des autres pages Page de contact Page de l agence Page de FAQ 11

12 2. Wireframes de l'application Bloc qui apparait après avoir secoué la boite. Rubrique Mon compte 12