Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
Présentation de l'interface M a q u e t t e s
h a u t e
f i d é l i t é
INTERFACE MOBILE
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
MAQUETTES HAUTE FIDÉLITÉ
figure 1.0
figure 1.1
Pages d’accueil C’est la page qui s’affiche lors de l’ouverture de l’application.
Sa présentation est une image de l’entreprise «sans contenu». Tout ce qui est interactif, boutons, liens, icônes, texte, etc. est évité, car cela cré une impression d’interaction susceptible de dérouter l’utilisateur (Tydewell). 5. L’animation d’une petite
voiture traversant l’écran servira d’indicateur d’action lors du chargement de l’application. 3. Comme notre application se
veut sociale, la possibilité de l’apprécier sur les différents réseaux sociaux pourra se faire à cet endroit exclusivement puisque plus loin dans l’application nous serons en mode efficacité et non en mode divertissement.
9
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
De petites icônes thématiques prenant la forme de verres à café permettront le partage social sur les réseaux les plus populaires à ceux qui désireraient publiciser l’application. Ceci augmente le capital sympathique de notre application et contribue à une campagne de notoriété déployée sur ces différents réseaux.
<< 5.
Progress indicator >
< 3. Médias sociaux >
INTERFACE MOBILE
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
1 covoiturage prévu figure 1.2.1
MAQUETTES HAUTE FIDÉLITÉ
3 covoiturages prévus figure 1.2.2
Profil personnel La page de profil personnelle avec rappel de covoiturage prévu, mode en ligne et hors ligne, menus et carte. Note: La carte en plan 3D sert d’image de fond. Lors de consultation une petite animation la ramènera dans le mode 2D conventionnel pour une plus grande efficacité.
10:15pm
Streamlined branding > le covoiturage repens é
ANA_DUB
en ligne
@ 12 aoû t
12:00 PM
Maquettes filaires basse fidélité
LOGO
messagerie
téléphone
profil
CONTACTES
1 0
contact
covoitureur
historique
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
COVOITURAGES
HISTORIQUE
< 2. Bottom navigation >
INTERFACE MOBILE
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
figure 1.3
MAQUETTES HAUTE FIDÉLITÉ
Réception d’offres suite à une demande placée
8. ROW STRIPPING Comme l’information linéaire est difficile à séparé visuellement, ce modèle propose d’alterner deux teintes d’une même couleur dans une liste contenant de l’information linéaire afin d’aider l’oeil à séparer l’information.
La page d’offre de covoiturage
Comme UGO utilise un tableau sous forme de liste dans ses offres de covoiturage (figure 1.3) et que notre utilisateur consulte son interface en mouvement il est capital de tirer profit de ce modèle. La lisibilité doit être maximale. Le principe de design «CHUNKING» (W.Lidwell, K.Holden, J.Butler) s’est avéré très efficace ici sous la forme du modèle «ROW STRIPPING» en assurant une rapidité et une précision accrue du décodage de l’information. 8.
12:00 PM
Maquettes filaires basse fidélité
LOGO
messagerie
téléphone
ponctualité qualité fiabilité
profil
Offres > marcL84
Bibiz9944x
1 1
contact
covoitureur
historique
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Row stripping
INTERFACE MOBILE
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
figure 1.4
MAQUETTES HAUTE FIDÉLITÉ
Consultation d’un profil complet et sélection La page affiche toujours le logo de l’application pour les mêmes raisons décrites précédemment. Dans un premier niveau de lecture, cette page favorise la consultation en un coup d’oeil du candidat sélectionné. Un second niveau nous permet de consulter l’appréciation générale sous forme de tableau étoilé. Suivi de son nom d’utilisateur.
Maquettes filaires basse fidélité
12:00 PM
LOGO
messagerie
téléphone
Réponse >
profil
ponctualité qualité fiabilité
Marc
Accepter
1 2
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Notez la grosseur des boutons de communication. Ils se veulent gros, car facilement activable dans un contexte où l’utilisateur serait en déplacement.
Diagonal Balance
Une série d’icônes accompagnées d’un bref libellé pour une compréhension maximale dans résume les préférences. Une série de points indique la navigation possible pour consultation des icônes. Des commentaires sous forme de texte permettent au covoitureur de laisser précision et commentaire qu’il juge pertinents. Comme l’espace est restreint, une fois de plus, de l’information cachée est disponible et bien identifiable grâce à la flèche qui
Proeminent done button
INTERFACE MOBILE
figure 1.5.1
MAQUETTES HAUTE FIDÉLITÉ
Échanche entre un offrant et un chercheur de covoiturage Un test utilisateur a permis de prendre conscience du manque de boutons pour sortir
Maquettes filaires basse fidélité
Maquettes filaires basse fidélité
12:00 PM
Discussion
Bla, bla, bla
Bla, bla, bla
a
Bla, bla, bla Bla, bla, bla
Clavier
1 3
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
figure 1.5.2
INTERFACE DE BUREAU
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
MAQUETTES HAUTE FIDÉLITÉ
Plateforme de bureau L’espace que permettait la plateforme de bureau devait être utiliser à sont maximum sans oublié notre promesse d’efficacité : Simplicité | dynamique | technologique.
La plateforme de bureau
En ce qui concerne l’application web, nous désirions aller à l’essentiel afin de garder l’utilisateur concentrer sur sa tâche. Nous avons ainsi créé une interface web sous forme de Dashboard (Tydewell) ce qui minimise le nombre d’onglets et de pages dans le site. Comme il s’attend à pouvoir le faire, nous laissons à l’utilisateur la possibilité de pouvoir personnaliser sa page en y insérant les informations qui lui sont pertinentes. L’utilisateur n’a pas à naviguer inutilement en trouvant tout dans un même tableau. L’information est bien hiérarchisée. Onglets et libellés sont utilisés afin de faciliter la navigation et la compréhension globale de la page. Les pages du mobile se retrouvent dans le Dashboard sous forme de liste et de tableau dans une organisation multicolore. Ceci permet de pouvoir consulter l’information pertinente en un seul coup d’oeil. Par souci d’uniformité les mêmes dispositions sont utilisées. N
Maquettes filaires basse fidélité
1 4
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
Page d’accueil
1 5
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e Page de profil en petit
Page principale, en grand, comprenant la conversation les covoiturages prévus, l’historique et d’autres fonctionnalités dans une page centralisée.
Je ne peux être retar
J’ai une Toyota Yarris
1 6
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
dé de plus de 10 min.
s noire, j’offre 2 places.
1 7
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
Cahier de normes U G O
l e
c o v o i t u r a g e
r e p e n s é
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
«CAHIER DE NORMES VISUELLES» Pour bien comprendre les décisions qui ont été prises concernant le visuel de notre interface de covoiturage Ugo, voici un cahier de normes et d’utilisations prescrites qui vous aidera à conserver et entretenir une identité forte qui s’imprègnera parmi les utilisateurs puis dans la collectivité. D’abord le nominal Ugo a été choisi pour son côté universel et polyvalent.C’est un mot court, rapide à écrire et susceptible de s’imprégner dans la mémoire collective. Le segment anglophone Ce segment reconnaîtra une abréviation souvent utilisée en marketing anglophone, le U étant l’abréviation répandue pour You et le Go (aller) fait directement référence aux déplacements encourus par l’utilisateur. Cette expression populaire est fixée dans la mémoire collective et c’est pourquoi elle nous permet de baser notre image de marque pour une application de type sociale. Le segment francophone S’il n’est vraiment pas familier avec l’anglais, ce segment y verra plutôt le nom Hugo. Ceci induit aussi une identité forte et de surcroits, humaine pour une application mobile. Elle personnifie l’application et le téléphone mobile. L’utilisateur développera un préjugé sympathique. Nous tablons sur l’anthropomorphisme (W.Lidwell, K.Holden, J.Butler) des sociétés modernes par rapport aux objets. Le nominal tire profit de ces tendances sociétales. Dans les deux cas une identité forte et présente se dégage du nominal choisi en se basa sur les conventions et la mémoire collective
POSITIONNEMENT
1 9
Comme nous désirons amélioré le système de covoiturage et que nous misons sur notre communauté pour y arriver, nous n’hésitons pas à nous
positionner comme DYNAMIQUE. Qui dit efficacité dit dynamisme ce qui ne manquera pas de toucher tous les membres d’une communauté active et vivante. Comme le covoiturage est social, ce positionnement est judicieux.
PROMESSE
Nous ne promettons rien de moins que l’EFFICACITÉ. L’efficacité de notre application, de nos services, de notre site et de tous nos membres. Cette promesse sera au coeur des décisions qui seront prises dorénavant.
STRATÉGIE Simplicité | dynamique | technologique L’efficacité passe par la simplicité, la communauté passe par le dynamisme et notre produit par la technologie. Toutes ces facettes devront être exploitées chaque fois qu’il sera pertinent de le faire.
SLOGAN
Le covoiturage repensé Le slogan laisse croire que tout est pensé, différent donc efficace.
LOGO < Zone de dégagement
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
COULEURS (Few hues, many use) Les palettes de couleurs choisies est susceptibles de plaire è la masse. Comme notre publique cible est plutôt large nous avons développé une palette de style «vintage» qui rallye les plus jeunes et les plus vieux de plusieurs styles différents. COULEURS ÉLÉMENTS CYMK
2 0
HEXA PMS
Couleur beige et Texture de vieux papier
Fond
4-8-19-0
247-236-212
#f7ecd4
#7499
Brun chocolat
Texte
56-64-56-63
67-50-49
#433231
#439
Rouge orangé
Couleur 1
76-16-44-0
232-86-72
#e85648
#7625
Vert (teal)
Couleur 2
76-16-44-0
50-157-148
# 329d94
#7473
Vert tendre
Accents
50-0-100-0
128-189-38
#97bf0d
#376
RVB
La couleur de fond offre un bon contraste (Deep Background, Tydewell, 2010) avec le brun utilisé par les textes. Sa texture, vieux papier, accentue le style vintage ce qui crée l’ambiance qui touche la sesibilité du public cible. Couleur attribuée au texte. Il offre un contraste maximal ce qui rencontre les normes en termes d’accessibilité Couleur vibrante qui vient mettre de l’avant le côté dynamique que nous recherchons.Il symbolise l’action, la passion. Vient aussi apporté un touche dynamique mais dans un second ordre.Il symbolise le bien être et la raison. Couleur sélectionnée pour mettre des accents. Comme elle détonne de la palette de base, elle servira à attirer l’attention seulement, sur les boutons par exemple.
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
2 1
Travail de réflexion et d'amélioration de système f o n c t i o n n a l i t é - v i s u e l - e r g o n o m i e
Typographie Titres > Gotham Ultra Regular
La police Gotham Ultra Regular a été retenue pour son côté solide et imposant. Le logo est construit à partir de celle-ci.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()
Texte courant > Dosis Dosis à été retunur pour le ses qualités concernant la lisibilité.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() Widgets > Helvetica Neue light
Comme la lisibilité doit être maximale, pour les widgets, nous avons misé sur les conventions et le caractère universel Helvetica Neue light.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()
Dans le cas ou une police web safre (W3C serait indispensable Nous favorisons de «Lucida Sans Unicode» ou le «Lucida Grande»
Web safe >Lucida Sans Unicode
EXMPLE DE SYSTÈME ICONIQUE
2 2
l e s l i e D U M O N T 9 1 0 1 6 5 6 0 7
Aime Petite parler Voiture en route
Parcours Aucun retard Enfant sans arrêt possible à bord ni détours
Allergique aux chats ou autres
N’aime Grosse pas parler Voiture en route
Parcours sans arrêt ni détours
peu transporter un vélo