GUIDELINES UX POUR CONCEVOIR UNE APPLICATION MOBILE SNCF - Digital SNCF
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
GUIDELINES UX
POUR CONCEVOIR UNE APPLICATION
MOBILE SNCF
STORE SNCF
DIFFUSION LIMITÉE – MERCREDI 4 MAI 2016
GUIDELINES UX
POUR CONCEVOIR UNE
APPLICATION MOBILE SNCF
STORE SNCF
DIFFUSION LIMITÉE – MERCREDI 4 MAI 2016
SOMMAIRE
01.
INTRODUCTION
02.
LES QUESTIONS ESSENTIELLES À SE POSER
03.
CONSEILS POUR LA CONCEPTION D’APPLICATIONS MOBILES
04.
LES SPÉCIFICITÉS SNCF
05.
CONCLUSION
STORE SNCF
– MERCREDI 4 MAI 2016
01.
INTRODUCTION
STORE SNCF
– MERCREDI 4 MAI 2016
#DIGITALSNCF
LE STORE SNCF S’INSCRIT DANS LE CADRE DU PROGRAMME #DIGITALSNCF PRÉSENTÉ PAR
YVES TYRODE ET GUILLAUME PEPY EN FÉVRIER 2015.
Les « golden rules » du digital
Ces guidelines UX sont un des éléments qui composent les 5 règles d’or du digital:
+ User first : partir d’un besoin utilisateur, client ou agent SNCF
+ Agilité : travailler en cycles courts, avec des équipes mixtes, réduites et co-localisées
+ Scalabilité : dès le début, penser le projet pour le déployer à grande échelle
+ Open : travailler avec une démarche d’ouverture des données
+ Data : mesurer et analyser les données
STORE SNCF
– MERCREDI 4 MAI 2016
OBJECTIFS ET CHAMPS D’APPLICATION
Objectifs
Donner des clés de compréhension et quelques
règles à suivre concernant la conception
d’applications mobiles SNCF.
Attention : ce document ne se substitue pas aux
guidelines de chaque OS. Il présente quelques
fondamentaux en matière de conception
d’applications sur mobile et renvoie vers les
guidelines de chaque OS pour tous les détails.
STORE SNCF
– MERCREDI 4 MAI 2016
OBJECTIFS ET CHAMPS D’APPLICATION
Champs d’application
Ce document concerne l’expérience utilisateur des
applications mobiles, principalement sur
smartphones (tablettes et phablettes dans une
moindre mesure)
Seules les problématiques iOS et Android sont
abordées dans ce document. Les sites mobiles feront
l’objet d’un autre document.
STORE SNCF
– MERCREDI 4 MAI 2016
PUBLIC(S) CONCERNE(S)
Les développeurs
Qu’ils soient internes SNCF ou externes
Les responsables d’un projet mobile
Product Owner, AMOA, Chef de projet,
Responsable communication, Responsable
marketing etc.
STORE SNCF
– MERCREDI 4 MAI 2016
DES REMARQUES ?
Un document en constante évolution
Les bonnes pratiques en matière d’UX (expérience
utilisateur) ne sont pas figées dans le temps. Les
technologies, les usages, les ressources évoluent
chaque jour.
Ce document évoluera de fait grâce à la
communauté des utilisateurs qui s’en serviront. Il
s’agit donc d’une première version qui s’enrichira
avec le temps. Si vous voulez nous faire part de vos
remarques, n’hésitez pas à nous envoyer un email à :
store@sncf.fr
STORE SNCF
– MERCREDI 4 MAI 2016
02.
LES QUESTIONS À SE POSER
+ QUOI ?
+ QUI ?
+ QUAND / COMMENT ?
+ POURQUOI ?
+ DE QUOI ?
STORE SNCF
– MERCREDI 4 MAI 2016A QUOI SERT L’APPLICATION ?
LE « QUOI »
En tout premier lieu, vous devez vous poser les questions suivantes :
+ A quel(s) besoin(s) utilisateurs répond-t-elle ? Quelle est son utilité ?
+ Quelle est sa promesse utilisateur ? Quel(s) service(s) va-t-elle leur rendre?
Attention toutefois à ne pas diluer sa promesse (et donc son efficacité) en voulant attribuer trop de rôles à
votre application.
UNE APPLICATION MOBILE NE SERA UTILISÉE DE MANIÈRE PÉRENNE
ET RÉGULIÈRE QUE SI ELLE A UNE UTILITÉ AUX YEUX DE SES
UTILISATEURS.
STORE SNCF
– MERCREDI 4 MAI 2016QUI VA L’UTILISER ?
LE « QUI »
Qui va utiliser votre application ? Quelle typologie d’utilisateurs ?
+ Grand public : dans un contexte avec une multitude d’utilisateurs très différents, préférez les éléments natifs déjà
connus/utilisés dans les applications grand public
+ L’interne SNCF : veillez à bien observer/écouter les utilisateurs afin de comprendre leur mode de fonctionnement
actuel, leurs contraintes, leurs souhaits et le contexte dans lequel sera utilisée l’application
+ Niche d’utilisateurs : selon le type d’utilisateur visé, des comportements d’interfaces spécifiques peuvent être mis
en place (navigation custom ou gestures spécifiques par exemple)
MIEUX VOUS CONNAITREZ VOS UTILISATEURS, MIEUX VOUS SEREZ EN
MESURE DE CONCEVOIR UNE APPLICATION QUI SERA ADAPTÉE À LEURS
USAGES.
STORE SNCF
– MERCREDI 4 MAI 2016DANS QUEL CONTEXTE ?
LE « QUAND / COMMENT »
Une fois vos utilisateurs identifiés, vous devez savoir dans quel contexte ils devraient utiliser
l’application.
La connaissance du contexte d’utilisation de l’application est un des éléments les plus importants dans la
conception et l’expérience utilisateur car il sera déterminant pour l’adoption de l’application par ses
utilisateurs. Il est donc essentiel d‘observer et de comprendre ce contexte auprès des futurs utilisateurs.
UNE APPLICATION CONÇUE SANS PENSER AU CONTEXTE DANS LEQUEL
ELLE SERA UTILISÉE RISQUE FORTEMENT D’ÊTRE INADAPTÉE OU PÉNIBLE À
UTILISER.
STORE SNCF
– MERCREDI 4 MAI 2016DANS QUEL CONTEXTE ?
LE « QUAND / COMMENT »
+ L’application sera plutôt utilisée au domicile ? Sur le lieu de travail ? Les 2 ? En mobilité ?
+ Si c’est en mobilité, l’utilisateur disposera-t-il d’une connexion internet ? S’il n’y a pas de connexion internet ou si
elle est partielle, faudrait-il prévoir une version de l’application utilisable en mode dégradé?
+ L’application sera utilisée la journée ? La nuit ? Potentiellement tout le temps ou à un moment particulier de la
journée ?
+ L’application sera plutôt utilisée en intérieur ? En extérieur (avec les reflets, la luminosité et les aléas
météorologiques) ?
+ L’utilisateur aura-t-il les mains libres pour utiliser l’application avec ses 2 mains ? S’en servira-t-il plutôt à 1 main ?
+ Dans le cas d’une application interne SNCF, l’utilisateur porte-t-il des gants ? Utilise-t-il un stylet ?
+ Doit-il souvent utiliser le clavier pour faire des recherches ou de la saisie ?
+ Est-il déjà équipé d’un device mobile ? Si oui, sur quel device et/ou OS a-t-il ses habitudes ? Faut-il développer
l’application sur un autre OS et/ou sur un autre device ?
STORE SNCF
– MERCREDI 4 MAI 2016POURQUOI UNE NOUVELLE APPLICATION ?
LE « POURQUOI »
Pourquoi les utilisateurs préfèreraient utiliser cette application plutôt qu’une autre ?
+ Existe-t-il des applications similaires ?
+ Si oui, quels sont leurs points forts / points faibles ?
+ Quelle est la plus-value de votre application ?
SI VOUS RÉPONDEZ À LA QUESTION DU « POURQUOI », ALORS VOTRE
APPLICATION A UN VRAI AVANTAGE QU’IL FAUT METTRE EN AVANT.
STORE SNCF
– MERCREDI 4 MAI 2016DE QUELLE SOLUTION AI-JE BESOIN ?
LE « DE QUOI »
Une fois passées en revues ces premières questions, la solution la plus adaptée doit apparaître de
façon évidente:
+ avez-vous besoin d’une application mobile ? D’un site mobile ? D’une webapp ?
+ avez-vous besoin d’une application pour smartphone ? Tablette ? Phablette ? les 3 ?
+ vos utilisateurs utilisent plutôt iOS ? Android ? Les 2 ?
CERTAINS CRITERES PEUVENT VOUS GUIDER DANS LE CHOIX DE LA
SOLUTION LA PLUS ADAPTÉE.
STORE SNCF
– MERCREDI 4 MAI 2016Quelques critères Application mobile Site mobile
Expérience Utilisateur Généralement plus fluide et plus complète Généralement un peu plus limitée qu’une
(car utilise les GUI natifs du device) appli mobile (mais pas moins qu’un site
desktop)
Fonctionnalités Permet d’utiliser des fonctions natives / Peu (voire pas) d’interactions possibles avec
capacités matérielles du device les fonctions natives du device
(cf. slide suivante)
Connexion Peut fonctionner en mode « hors Ne peut pas fonctionner sans connexion
connexion » internet
Utilisation Régulière, fréquente, voire quotidienne Généralement plus ponctuelle et sur des
tâches relativement simples
Compatibilité & Langages propres à chaque OS et Compatible avec tous les devices mobiles
langages adaptations à prévoir (au niveau du code) (smartphones, phablettes, tablettes) qui
en fonction de l’OS interprètent les standards du web
(HTML/CSS)
Accès, installation & • Téléchargement obligatoire & • Aucune installation n’est requise,
mise à jour installation directement sur le device de l’utilisateur doit « retrouver » le site (accès
l’utilisateur direct ou moteurs de recherche)
• Passage obligatoire via les stores • Url avec accès grand public ou restreint
Investissement Généralement plus important, surtout Généralement moins important (ressources &
dans le cas de plusieurs OS (ressources & budget)
budget)
STORE SNCF
– MERCREDI 4 MAI 2016DE QUELLE SOLUTION AI-JE BESOIN ?
LE « DE QUOI »
Les outils/fonctionnalités suivantes sont disponibles sur un smartphone et peuvent être utilisées avec
votre application mobile (mais pas votre site mobile)
+ Audio: entrée micro & sortie speaker
+ Vidéo & image: enregistrement depuis la caméra / l’appareil-photo (avec caméra de face & de dos)
+ Connexion Bluetooth
+ NFC (Near Field Communications)
+ Lumière / lampe torche
+ Déplacements : boussole, GPS, gyroscope 360°, accéléromètre
STORE SNCF
– MERCREDI 4 MAI 201603.
CONSEILS POUR LA CONCEPTION
D’APPLICATION MOBILE
+ QUELQUES GRANDS PRINCIPES
+ STRUCTURE GÉNÉRALE & SPÉCIFICITÉS DES OS
+ EXEMPLES D’APPLICATIONS
+ EXEMPLES D’OUTILS
STORE SNCF
– MERCREDI 4 MAI 201603.
CONSEILS POUR CONCEVOIR UNE APPLI. MOBILE
QUELQUES GRANDS PRINCIPES
STORE SNCF
– MERCREDI 4 MAI 2016PENSER « MOBILE FIRST »
Le mobile comme point de référence en terme
d’interface
Si vous devez concevoir une application disponible
sur smartphone et tablette ou phablette, il est
préférable de la concevoir en premier sur le
smartphone.
Les contraintes liées à la taille d’écran étant plus
importantes, cela vous obligera à prioriser ce qui
compte le plus en terme de fonctionnalités / de
contenus et à proposer ainsi les éléments les plus
importants à vos utilisateurs.
STORE SNCF
– MERCREDI 4 MAI 2016DÉMARRER EN « NATIF FIRST »
FAIRE UNE APPLICATION NATIVE SE CONÇOIT À 2 NIVEAUX
1. Au niveau technique:
Cela signifie coder dans le langage propre à l’OS :
+ sous iOS, le code s’écrit en Objectif-C / Swift
+ sous Android, le code s’écrit en Java
Les webviews, utilisées en HTML/JS, permettent
d’encapsuler des pages HTML au sein d’une application.
Développer son application en natif permet de capitaliser
sur des éléments existants aux comportements déjà
définis et donc potentiellement déjà connus des
utilisateurs.
STORE SNCF
– MERCREDI 4 MAI 2016DÉMARRER EN « NATIF FIRST »
FAIRE UNE APPLICATION NATIVE SE CONÇOIT À 2 NIVEAUX
2. Au niveau de l’UX:
Cela signifie concevoir l’interface de son application
en respectant les guidelines propres à chaque OS
pour faciliter l’expérience et l’apprentissage.
L’insertion d’éléments customisés est possible
(notamment si aucun élément natif ne permet de
répondre à votre besoin au niveau de l’interface).
STORE SNCF
– MERCREDI 4 MAI 2016DÉMARRER EN « NATIF FIRST »
LES GUIDELINES
Chaque OS a défini ses propres guidelines. Similaires
parfois, elles diffèrent sur certains aspects. Nous vous
conseillons de les lire pour vous approprier leurs propriétés
et de vous tenir au courant de leurs évolutions :
Guidelines iOS
https://developer.apple.com/library/ios/documentation/User
Experience/Conceptual/MobileHIG/
Guidelines Android
https://developer.android.com/design/index.html
STORE SNCF
– MERCREDI 4 MAI 20161 POUCE, 1 ŒIL
L’UTILISATION ET L’ATTENTION
Imaginez vos utilisateurs comme des personnes
qui n’ont « qu’un pouce et qu’un œil »
+ « un pouce » car une majorité d’entre eux tient son
smartphone à 1 seule main (et donc utilise votre
application avec le pouce)
+ « un œil » car nous ne captons que partiellement
leur attention (ils utilisent souvent leur téléphone
dans des contextes où leur attention est souvent
fragmentée)
Photo : Steve Rhodes
STORE SNCF
– MERCREDI 4 MAI 2016RESTER SIMPLE
ALLER À L’ESSENTIEL
Prioriser, prioriser et encore prioriser
Une interface simple et bien organisée. Cette règle
doit encore plus s’appliquer sur smartphone à cause
de la taille réduite de l’écran.
Plus l’interface reste simple, plus elle a des chances
d’être efficace. Les actions qu’elle permet de faire
doivent être comprises instantanément et effectuées
sans effort.
Prenez la contrainte de taille comme l’opportunité de
mettre en avant ce qui compte vraiment pour
l’utilisateur.
STORE SNCF
– MERCREDI 4 MAI 2016PASSER DU « CLIC » AU « TOUCH »
LES GESTURES
Le tactile ouvre la voie à de nouvelles manières d’interagir avec des interfaces
Avec les smartphones, les utilisateurs sont devenus familiers des interfaces tactiles qui s’utilisent
directement avec les doigts.
+ Certains événements qui étaient permis via l’utilisation de la souris (rollOver, rollOut) ne sont plus
possibles avec les écrans tactiles
+ En revanche, les interfaces naturelles (NUI) permettent de faire des gestes directement avec les doigts
pour effectuer toutes sortes d’actions (pour les applications mobiles notamment)
+ En savoir plus sur les « gestures » : http://www.lukew.com/ff/entry.asp?1071
STORE SNCF
– MERCREDI 4 MAI 2016PASSER DU « CLIC » AU « TOUCH »
LES GESTURES
En bleu les gestes
les plus utilisés
Source : Luke Wroblewski
STORE SNCF
– MERCREDI 4 MAI 2016PASSER DU « CLIC » AU « TOUCH »
L’ESPACE
Chaque espace compte
Vous trouverez différentes pratiques concernant la taille
que doivent avoir des éléments pour être touchés
correctement par nos doigts. Mais que ce soit avec le
pouce ou l’index, l’enjeu réside surtout dans le bon
équilibre à trouver entre :
+ La cible visuelle, c’est-à-dire le bouton, l’icône,
l’élément de formulaire que l’œil définit pour cible (ce
qu’il doit toucher/atteindre)
+ La zone réactive, c’est-à-dire la zone qui fait que
l’élément sera atteint sans problème (cette zone est
souvent plus grande que la cible visuelle)
+ La zone d’interférence, c’est-à-dire la zone de
recouvrement qu’il peut y avoir avec un élément situé à
proximité
STORE SNCF
– MERCREDI 4 MAI 2016PASSER DU « CLIC » AU « TOUCH »
LA TAILLE
La taille compte
Plus un bouton est gros, plus il est facile à atteindre
mais jusqu’à un certain point seulement. Si sa taille
est exagérément grande, les utilisateurs ont du mal à
le voir comme cliquable, voire même à l’interpréter
comme un bouton.
Il convient donc de trouver le bon équilibre entre
cible visuelle, zone réactive et zone d’interférence
En savoir plus :
http://www.uxmatters.com/mt/archives/2013/03/com
mon-misconceptions-about-touch.php
STORE SNCF
– MERCREDI 4 MAI 2016PENSER AUX ZONES DE CONFORT
LA POSITION
La position compte
En fonction du device (smartphone ou tablette) et de
la manière dont l’utilisateur tient le device en main,
certaines zones de l’écran seront plus pénibles à
atteindre.
Veillez donc à bien identifier le contexte d’utilisation
de votre application avant de vous lancer dans la
conception de son interface.
Smartphone : cas d’une utilisation à 1 main pour une
personne droitière. Tablette : cas d’une utilisation à 2
mains
STORE SNCF
– MERCREDI 4 MAI 2016PENSER AUX ZONES DE CONFORT
LA POSITION
STORE SNCF
– MERCREDI 4 MAI 2016RENFORCER L’AFFORDANCE
L’affordance, c’est…
La « capacité d’un objet à suggérer sa propre
utilisation ». On parle aussi d'utilisation « intuitive »
d'un objet.
Cela signifie qu’un bouton doit ressembler à un élément
que l’on peut presser, qu’une checkbox doit induire
l’action de « cocher » etc.
Cela doit se comprendre de suite et de manière visuelle
(sans avoir à essayer/tester)
Lorsque l’on affiche plusieurs photos, le
STORE SNCF
défilement par swipe peut être indiqué via
– MERCREDI 4 MAI 2016 l’affichage tronqué de photos situées à
droite et/ou à gauche de la photo centrale.DONNER UN RETOUR ACTION
UNE FOIS UN ÉVÉNEMENT DÉCLENCHÉ
Conforter l’utilisateur dans son action
Comme le pointage est moins précis au doigt qu’avec
…
une souris, il est important pour toutes les actions
effectuées (suppression d’un élément, validation d’un
formulaire de saisie etc.) de donner un retour visuel à
Le trajet a bien
l’utilisateur à la suite des actions entreprises. été ajouté à vos
favoris
Ce retour peut, par exemple, prendre la forme d’une Annuler OK
animation qui explique visuellement la conséquence
de l’action. On peut également utiliser les messages
de confirmation natifs qui s’affichent au 1er plan.
STORE SNCF
– MERCREDI 4 MAI 2016ÉVITER LES IMPASSES
Toujours proposer une porte de sortie
Il se peut qu’une rubrique soit vide ou qu’une
recherche n’apporte aucun résultat. Dans tous les cas
de ce type (les impasses), il faut proposer une
alternative à l’utilisateur soit pour apporter une
solution proche de la solution attendue soit pour le
rediriger vers une autre action/rubrique.
Ce point est valable sur tous les devices et ça l’est
encore plus sur les smartphones dont la navigation
n’est pas forcément affichée sur chaque écran faute
de place.
STORE SNCF
– MERCREDI 4 MAI 2016L’ORIENTATION
PORTRAIT OU PAYSAGE
En fonction du device
Quand on le tient à une seule main, le smartphone est plus
souvent à la verticale (portrait). La position horizontale
(paysage) est plus adaptée pour une tenue à 2 mains.
L’utilisation de la tablette est plus mixte car de par sa
taille, elle repose souvent sur sa coque ou une table…
Le choix de l’orientation de votre application doit donc
être principalement défini en fonction du device qui sera
utilisé et des actions principales à effectuer dans votre
application. Vous pouvez laisser l’utilisateur basculer dans
l’un des deux modes s’il le souhaite mais il est plutôt
déconseillé de changer l’orientation au sein de votre
application pour effectuer des actions. Cela doit rester
exceptionnel.
STORE SNCF
– MERCREDI 4 MAI 201603.
CONSEILS POUR CONCEVOIR UNE APPLI. MOBILE
STRUCTURE GÉNÉRALE &
SPÉCIFICITÉS DES OS
STORE SNCF
– MERCREDI 4 MAI 2016STRUCTURE GÉNÉRALE D’UNE APPLICATION
L’INTERFACE DANS LES GRANDES LIGNES
Les applications possèdent souvent la même structure globale (une navigation, une barre en haut, parfois
une en bas, des filtres, des onglets etc.).
Connaître et maîtriser cette structure vous aidera dans le développement mais facilitera aussi l’utilisation de
l’application par les utilisateurs car ils retrouveront des patterns de navigation déjà utilisés dans d’autres
applications.
STORE SNCF
– MERCREDI 4 MAI 2016STRUCTURE GÉNÉRALE D’UNE APPLICATION
L’INTERFACE DANS LES GRANDES LIGNES
Une top bar, souvent une
Une sous-navigation, des Titre icone « menu », un titre de
onglets ou des boutons pour Trier par Filtrer
page et quelques actions
filtrer / trier
Zone de contenu central de
l’application
Sur certaines applications
iOS, il y a une tab bar en bas
STORE SNCF
– MERCREDI 4 MAI 2016LES GUIDELINES DE CHAQUE OS
SPÉCIFICITÉS
Chaque OS a défini ses propres guidelines. Similaires
parfois, elles diffèrent sur certains aspects. Nous vous
conseillons de les lire pour vous approprier leurs propriétés
et de vous tenir au courant de leurs évolutions :
Guidelines iOS
https://developer.apple.com/library/ios/documentation/User
Experience/Conceptual/MobileHIG/
Guidelines Android
https://developer.android.com/design/index.html
STORE SNCF
– MERCREDI 4 MAI 201603.
CONSEILS POUR CONCEVOIR UNE APPLI. MOBILE
EXEMPLES D’APPLICATIONS
STORE SNCF
– MERCREDI 4 MAI 2016DIFFÉRENCIER
Evernote a fait 2 versions différentes en se
concentrant sur les guidelines propres à chaque
OS. L’interface est donc différente entre les
versions iOS et Android.
STORE SNCF
– MERCREDI 4 MAI 2016UNIFORMISER
Inbox (Google) a préféré appliquer ses guidelines
Android sur l’OS d’Apple pour garder une
cohérence sur tous les écrans / devices plutôt que
de respecter les particularités des autres OS.
STORE SNCF
– MERCREDI 4 MAI 2016ADAPTER
Sur iOS, Pinterest a positionné sa tab bar en bas
mais sur Android, les icônes sont placées en haut
à droite comme recommandé dans les guidelines.
Le reste est globalement identique.
STORE SNCF
– MERCREDI 4 MAI 201603.
CONSEILS POUR CONCEVOIR UNE APPLI. MOBILE
EXEMPLES D’OUTILS
STORE SNCF
– MERCREDI 4 MAI 2016#JUSTINMIND
JUSTINMIND EST UN OUTIL DE CONCEPTION ET DE PROTOTYPAGE.
FACILE À PRENDRE EN MAIN, IL OFFRE LA POSSIBILITÉ D’EXPORTER EN HTML LE PROTOTYPE, À
LA FOIS EN LOCAL ET SUR UNE URL DÉDIÉE ET D’AJOUTER DES COMMENTAIRES.
STORE SNCF
– MERCREDI 4 MAI 2016#BALSAMIQ
BALSAMIQ EST UN OUTIL POUR SKETCHER AVEC UN RENDU BRUT DES INTERFACES SIMPLES
OU PLUS COMPLEXES. INTÉRESSANT PAR LA DIMENSION COLLABORATIVE, IL RESTE TRÈS
SIMPLE DANS LA PRISE EN MAIN.
STORE SNCF
– MERCREDI 4 MAI 2016#AXURE
AXURE EST À LA FOIS UN OUTIL DE CONCEPTION, DE PROTOTYPAGE ET DE TEST.
IL OFFRE LA POSSIBILITÉ D’EXPORTER EN HTML LE PROTOTYPE, À LA FOIS EN LOCAL ET SUR
UNE URL DÉDIÉE, DE PERMETTRE LE TRAVAIL COLLABORATIF, DE METTRE DES
COMMENTAIRES ET D’AVOIR ACCÈS À UN HISTORIQUE...
STORE SNCF
– MERCREDI 4 MAI 2016#INVISION
INVISION EST UN LOGICIEL DE PROTOTYPAGE À PARTIR DE .PSD ET DE DROPBOX. IL NE PERMET PAS DE
CONCEVOIR, NI D’AVOIR DE LIBRAIRIES. IL OFFRE UNE MEILLEURE COLLABORATION GRÂCE À LA POSSIBILITÉ
DE POSTER DES COMMENTAIRES DE MANIÈRE COLLABORATIVE.
STORE SNCF
– MERCREDI 4 MAI 2016#POP
POP EST UN OUTIL DE PROTOTYPAGE SUR SMARTPHONE & TABLETTE QUI PERMET DE PRENDRE EN PHOTO
DES ÉCRANS SKETCHÉS ET DE FAIRE DES INTERACTIONS ENTRE EUX.
STORE SNCF
– MERCREDI 4 MAI 2016#APPCOOKER
APPCOOKER EST UN LOGICIEL DE CONCEPTION POUR IPAD & IPHONE QUI PERMET AUSSI DE FAIRE
QUELQUES INTERACTIONS SIMPLES. CHAQUE PROJET POSSÈDE PLUSIEURS FACETTES QUI PEUVENT ÊTRE
UTILES, COMME LE PRICING, UN CARNET À IDÉES ET LE PARTAGE SUR MOBILE AVEC APPTASTER.
STORE SNCF
– MERCREDI 4 MAI 2016#PIXATE
PIXATE EST UN LOGICIEL DE CONCEPTION & DE PROTOTYPAGE EN LIGNE CENTRÉ MOBILE. IL POSSÈDE LA
MAJORITÉ DES ANIMATIONS NÉCESSAIRES À LA CONCEPTION ET À L’ANIMATION. IL A L’AVANTAGE DE
POSSÉDER UNE APPLICATION DE TEST EN TEMPS RÉEL.
STORE SNCF
– MERCREDI 4 MAI 2016#TABLEAU COMPARATIF PRISE EN INTERAC USAGE TYPE D’OUTIL BIBLIOTHÈQUE PRIX
MAIN TIVITÉ NATIVE
Complexe +++ Mixte Software à installer Oui + Possibilité de 429€ / licence
(pour interfaces créer ses propres
complexes) bibliothèques
Medium ++ Mixte Software à installer Oui 77 € pour 1 licence
(pour interfaces (371€ : 5 licences)
complexes)
Complexe +++ Mixte Software à installer Oui + Possibilité de 429€ / licence (776
(pour interfaces créer ses propres pour licence d’équipe)
complexes) bibliothèques
Simple ++ Mixte Interface online Non Gratuit pour 1
(pour interfaces proto. (85€ pour
complexes) protos illimités)
Simple + Spécifique mobile Application à installer Non Gratuit pour 2
(iOS/ Android / Windows projets ( 104€ : 3
Phone) utilisateurs / 260€ :
nbre illimité)
Simple + Spécifique mobile Application à installer Oui 26€ par licence
(iOS)
Simple +++ Spécifique mobile Interface online Oui Gratuit
– MERCREDI 4 MAI 201604.
LES SPÉCIFICITÉS SNCF
STORE SNCF
– MERCREDI 4 MAI 2016BIENVEILLANCE
LES GRANDS PRINCIPES
DE TOUT OBJET MOBILE SIMPLIFICATION
SNCF
EFFICACITÉ
STORE SNCF
– MERCREDI 4 MAI 2016+ FAIRE DU MOBILE AVEC L’IDENTITÉ SNCF,
ÇA SIGNIFIE QUOI ?
STORE SNCF
– MERCREDI 4 MAI 2016PHILOSOPHIE
« SNCF est au cœur de la vie des gens »
Il en est de même pour le mobile qui est au cœur de la vie de nos utilisateurs. Le mobile est un objet qui fait appel à
nos sens (le toucher, l’ouïe et la vue).
En ce sens, cela signifie que :
RÉALISER UNE INTERFACE SNCF SUR MOBILE, C’EST OFFRIR UN SERVICE
SOUS LA FORME D’UN OBJET DU QUOTIDIEN.
STORE SNCF
– MERCREDI 4 MAI 2016+ COMMENT ?
STORE SNCF
– MERCREDI 4 MAI 2016GRILLE DE CONSTRUCTION
Utilisez une grille de construction unique afin d’optimiser
les alignements horizontaux et verticaux.
Choisissez le format le plus petit comme contrainte pour
vous assurer de la lisibilité de chaque élément.
Éléments à télécharger sur Store.SNCF :
+ .PSD (iPhone)
+ .PSD (Android)
https://store.sncf.com/developpement/guidelines
STORE SNCF
– MERCREDI 4 MAI 2016SYSTÈME & COMPORTEMENT
Toujours appliquer un feedback visuel suite à l’action de
l’utilisateur via des micros animations / micros transitions.
Éléments à télécharger :
+ .PSD (iPhone)
+ .PSD (Android)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016COMPOSANTS & COMPORTEMENT
Les composants SNCF sont principalement basés sur les
composants natifs de chaque système d’exploitation afin
d’en améliorer l’affordance (exemples : champs de saisie,
box à choix unique / à choix multiple, menu déroulant,
bouton…)
Éléments à télécharger :
+ .PSD (iPhone)
+ .PSD (Android)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016LE LOGO
Emblème de la marque, l’intégrité du logo doit
être respectée dans sa position, dans sa taille
et dans son aspect
Il peut être positionné en introduction ou dans un
header, dans une tab bar, en tant que signature (contenu
/ fin d’écran) ou dans le footer.
Éléments à télécharger :
+ .PSD (iPhone)
+ .PSD (Android)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016LA TYPOGRAPHIE
L’utilisation de la typographie a un rôle primordial
dans la clarification et la lisibilité des informations.
De manière générale, il est préférable d’utiliser les
typographies natives propres à chaque OS (ex : «
Roboto » sur Android) Cependant, il convient d’utiliser en
priorité la typographie « Avenir » sur l’ensemble des
supports digitaux SNCF.
Afin de clarifier et de hiérarchiser l’information, nous
conseillons de définir à minima 3 niveaux d’importance.
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016LES COULEURS
Dans la charte SNCF, les couleurs ne sont pas
exclusives à une catégories de produits ou de
services. 6E1E78 A1006B CD0037 3C3732
Le rôle de la couleur est triple :
E05206 FFB612 D2E100 82BE00 009AA6 0088CE
1. montrer à l’utilisateur les actions possibles
2. définir les différentes espaces au sein des écrans
3. renforcer le changement d’univers 4D4F53 747678 A0A0A0 B9B9B9 D7D7D7 E1E1DD
Pour en savoir plus, visitez l’Espace Identité SNCF
675C53 82786F 988F86 AFA59B D7D7D7 E0DED8
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016LES VISUELS
On distingue 3 types de visuels :
+ Les visuels d’inspirations
+ Les visuels éditoriaux
+ Les visuels fonctionnels (les « packshots »)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016LES VISUELS
Les visuels d’inspiration
Il doit donner envie à l’utilisateur et lui permettre de se
projeter dans une destination future.
STORE SNCF
– MERCREDI 4 MAI 2016LES VISUELS
Les visuels éditoriaux
Il doit illustrer un contenu (article, dossier…) afin de
remettre l’utilisateur dans le contexte du sujet.
STORE SNCF
– MERCREDI 4 MAI 2016LES VISUELS
Les visuels fonctionnels
Le « packshot » doit être un élément de signalétique et
de repère pour l’utilisateur. Il se fait le relais entre la
communication offline et la communication online.
Sur les supports digitaux, il est utilisé :
• principalement en en-tête des contenus
• et également en rebond (en bas de page)
STORE SNCF
– MERCREDI 4 MAI 2016LES PICTOS ET LA SIGNALÉTIQUE
Dans chaque application SNCF, il faut faire des
signes un repère visuel renforçant l’identité SNCF.
Les signes et pictogrammes SNCF ont une forme simple
reconnaissable de tous, du premier coup d’œil.
Il convient aussi de maintenir une cohérence visuelle avec
la signalétique SNCF visible dans les supports physiques
(en gare, en boutique…)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 2016STORE SNCF
– MERCREDI 4 MAI 2016LE LOADER
À compléter
Éléments à télécharger :
+ .PSD (iPhone)
+ .PSD (Android)
Pour en savoir plus, visitez l’Espace Identité SNCF
http://www.sncf.com/fr/identite
STORE SNCF
– MERCREDI 4 MAI 201605.
CONCLUSION
+ UN DERNIER CONSEIL
+ QUELQUES CITATIONS
STORE SNCF
– MERCREDI 4 MAI 2016+ PROTOTYPEZ
FAITES PLUSIEURS HYPOTHÈSES VIA PROTOTYPAGE RAPIDE (PAPIER) OU INTERACTIF
(WIREFRAME)
+ TESTEZ, TESTEZ, RE-TESTEZ
IDENTIFIEZ LES ÉLÉMENTS QUE VOUS VOULEZ METTRE À L’ÉPREUVE ET TESTEZ
RÉGULIÈREMENT
(7/8 PERSONNES SUFFISENT POUR IDENTIFIER LES PROBLÈMES MAJEURS)
+ ET AMÉLIOREZ !
OBSERVEZ VOS UTILISATEURS QUAND ILS UTILISENT VOTRE APPLICATION ET SOYEZ
A L’ÉCOUTE DE LEURS REMARQUES : LEUR FEEDBACK EST PRÉCIEUX
STORE SNCF
– MERCREDI 4 MAI 2016« A GREAT PRODUCT
ISN’T JUST A
COLLECTION OF TIM COOK
FEATURES. IT’S HOW IT (APPLE)
ALL WORKS
TOGETHER. »
STORE SNCF
– MERCREDI 4 MAI 2016« [THE DESIGN
PROCESS] IS ABOUT
DESIGNING,
PROTOTYPING AND JONATHAN IVE
MAKING. WHEN YOU (APPLE)
SEPARATE THOSE, I
THINK THE FINAL
RESULT SUFFERS. »
STORE SNCF
– MERCREDI 4 MAI 2016« DESIGN IS NOT JUST
WHAT IT LOOKS LIKE
STEVE JOBS
AND FEELS LIKE.
(APPLE)
DESIGN IS HOW IT
WORKS. »
STORE SNCF
– MERCREDI 4 MAI 2016« GOOD DESIGN IS
OBVIOUS. GREAT
JOE SPARANO
DESIGN IS
TRANSPARENT. »
STORE SNCF
– MERCREDI 4 MAI 2016« THE DESIGN IS DONE
JASON FRIED
WHEN THE PROBLEM
(37 SIGNALS)
GOES AWAY. »
STORE SNCF
– MERCREDI 4 MAI 2016MERCI. ME R C R E D I4 MA I2 0 1 6 S T OR E S NC F
Vous pouvez aussi lire
