Ugo | Le covoiturage repensé

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