sncf store guidelines-ux v1.2 20160503 · les bonnes pratiques en matière d’ux (expérience...

DIFFUSION LIMITÉE –

GUIDELINES UXPOUR CONCEVOIR UNE APPLICATION MOBILE SNCF

MERCREDI 4 MAI 2016STORE SNCF

DIFFUSION LIMITÉE – MERCREDI 4 MAI 2016STORE SNCF

GUIDELINES UXPOUR CONCEVOIR UNE APPLICATION MOBILE SNCF

–

SOMMAIRE01. INTRODUCTION

02. LES QUESTIONS ESSENTIELLES À SE POSER

03. CONSEILS POUR LA CONCEPTION D’APPLICATIONS MOBILES

04. LES SPÉCIFICITÉS SNCF

05. CONCLUSION


–

01.INTRODUCTION


–

#DIGITALSNCF

Les « golden rules » du digitalCes 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

LE STORE SNCF S’INSCRIT DANS LE CADRE DU PROGRAMME #DIGITALSNCF PRÉSENTÉ PAR YVES TYRODE ET GUILLAUME PEPY EN FÉVRIER 2015.


–

OBJECTIFS ET CHAMPS D’APPLICATION

ObjectifsDonner 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.


–

OBJECTIFS ET CHAMPS D’APPLICATION

Champs d’applicationCe 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.


–

PUBLIC(S) CONCERNE(S)

Les développeursQu’ils soient internes SNCF ou externes

Les responsables d’un projet mobileProduct Owner, AMOA, Chef de projet, Responsable communication, Responsable marketing etc.


–

DES REMARQUES ?

Un document en constante évolutionLes 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 à :

[email protected]


–

02.LES QUESTIONS À SE POSER+ QUOI ?+ QUI ?+ QUAND / COMMENT ?+ POURQUOI ?+ DE QUOI ?


–

A QUOI SERT L’APPLICATION ?

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.

LE « QUOI »

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.


–

QUI VA L’UTILISER ?

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)

LE « QUI »

MIEUX VOUS CONNAITREZ VOS UTILISATEURS, MIEUX VOUS SEREZ EN MESURE DE CONCEVOIR UNE APPLICATION QUI SERA ADAPTÉE À LEURS USAGES.


–

DANS QUEL CONTEXTE ?

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.

LE « QUAND / COMMENT »


UNE APPLICATION CONÇUE SANS PENSER AU CONTEXTE DANS LEQUEL ELLE SERA UTILISÉE RISQUE FORTEMENT D’ÊTRE INADAPTÉE OU PÉNIBLE À UTILISER.

–

DANS QUEL CONTEXTE ?

+ 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 ?


LE « QUAND / COMMENT »

–

POURQUOI UNE NOUVELLE APPLICATION ?

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 ?

LE « POURQUOI »

SI VOUS RÉPONDEZ À LA QUESTION DU « POURQUOI », ALORS VOTRE APPLICATION A UN VRAI AVANTAGE QU’IL FAUT METTRE EN AVANT.


–

DE QUELLE SOLUTION AI-JE BESOIN ?

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 ?

LE « DE QUOI »

CERTAINS CRITERES PEUVENT VOUS GUIDER DANS LE CHOIX DE LA SOLUTION LA PLUS ADAPTÉE.


–

Quelques critères Application mobile Site mobile

Expérience Utilisateur Généralement plus fluide et plus complète (car utilise les GUI natifs du device)

Généralement un peu plus limitée qu’une appli mobile (mais pas moins qu’un site desktop)

Fonctionnalités Permet d’utiliser des fonctions natives / capacités matérielles du device(cf. slide suivante)

Peu (voire pas) d’interactions possibles avec les fonctions natives du device

Connexion Peut fonctionner en mode « hors connexion »

Ne peut pas fonctionner sans connexion internet

Utilisation Régulière, fréquente, voire quotidienne Généralement plus ponctuelle et sur des tâches relativement simples

Compatibilité &langages

Langages propres à chaque OS et adaptations à prévoir (au niveau du code) en fonction de l’OS

Compatible avec tous les devices mobiles (smartphones, phablettes, tablettes) qui interprètent les standards du web (HTML/CSS)

Accès, installation & mise à jour

• Téléchargement obligatoire &installation directement sur le device de l’utilisateur

• Passage obligatoire via les stores

• Aucune installation n’est requise, l’utilisateur doit « retrouver » le site (accès direct ou moteurs de recherche)

• Url avec accès grand public ou restreint

Investissement Généralement plus important, surtout dans le cas de plusieurs OS (ressources & budget)

Généralement moins important (ressources & budget)


–

DE QUELLE SOLUTION AI-JE BESOIN ?

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

LE « DE QUOI »


–

03.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


–

CONSEILS POUR CONCEVOIR UNE APPLI. MOBILE

QUELQUES GRANDS PRINCIPES03.


–

PENSER « 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.


–

DÉMARRER EN « NATIF FIRST »

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.

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).

FAIRE UNE APPLICATION NATIVE SE CONÇOIT À 2 NIVEAUX


–


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 iOShttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Guidelines Android

https://developer.android.com/design/index.html

LES GUIDELINES


–

1 POUCE, 1 ŒIL

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)


L’UTILISATION ET L’ATTENTION

Photo : Steve Rhodes

–

RESTER SIMPLE

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.


ALLER À L’ESSENTIEL

–

PASSER DU « CLIC » AU « TOUCH »

Le tactile ouvre la voie à de nouvelles manières d’interagir avec des interfacesAvec 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

LES GESTURES


–

PASSER DU « CLIC » AU « TOUCH »LES GESTURES


En bleu les gestes les plus utilisés

Source : Luke Wroblewski

–


Chaque espace compteVous 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é


L’ESPACE

–


La taille comptePlus 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/common-misconceptions-about-touch.php


LA TAILLE

–

PENSER AUX ZONES DE CONFORT

La position compteEn 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.


LA POSITION

Smartphone : cas d’une utilisation à 1 main pour une personne droitière. Tablette : cas d’une utilisation à 2 mains

–

PENSER AUX ZONES DE CONFORT


LA POSITION

–

RENFORCER 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 défilement par swipe peut être indiqué via l’affichage tronqué de photos situées à droite et/ou à gauche de la photo centrale.

–

DONNER UN RETOUR ACTION

Conforter l’utilisateur dans son actionComme 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 à l’utilisateur à la suite des actions entreprises.Ce retour peut, par exemple, prendre la forme d’une 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.


UNE FOIS UN ÉVÉNEMENT DÉCLENCHÉ

…

Le trajet a bien été ajouté à vos

favoris

Annuler OK

–

ÉVITER LES IMPASSES

Toujours proposer une porte de sortieIl 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.


–

L’ORIENTATION

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.


PORTRAIT OU PAYSAGE

–


STRUCTURE GÉNÉRALE & SPÉCIFICITÉS DES OS

03.


–

STRUCTURE GÉNÉRALE D’UNE APPLICATION

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.


L’INTERFACE DANS LES GRANDES LIGNES

–

STRUCTURE GÉNÉRALE D’UNE APPLICATIONL’INTERFACE DANS LES GRANDES LIGNES


Titre

Trier par Filtrer

Une top bar, souvent une icone « menu », un titre de page et quelques actions

Zone de contenu central de l’application

Une sous-navigation, des onglets ou des boutons pour

filtrer / trier

Sur certaines applications iOS, il y a une tab bar en bas

–

LES GUIDELINES DE CHAQUE OS

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 iOShttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Guidelines Android

https://developer.android.com/design/index.html

SPÉCIFICITÉS


–


EXEMPLES D’APPLICATIONS03.


– MERCREDI 4 MAI 2016STORE SNCF

DIFFÉ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.


UNIFORMISER

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.


ADAPTER

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.

–


EXEMPLES D’OUTILS03.


–

#JUSTINMINDJUSTINMIND 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.


–

#BALSAMIQBALSAMIQ 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.


–

#AXUREAXURE 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...


–

#INVISIONINVISION 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.


–

#POPPOP 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.


–

#APPCOOKERAPPCOOKER 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.


–

#PIXATEPIXATE 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.


–

#TABLEAU COMPARATIF

MERCREDI 4 MAI 2016

PRISE EN MAIN

INTERACTIVITÉ

USAGE TYPE D’OUTIL BIBLIOTHÈQUE NATIVE

PRIX

Complexe +++ Mixte(pour interfaces

complexes)

Software à installer Oui + Possibilité de créer ses propres

bibliothèques

429€ / licence

Medium ++ Mixte(pour interfaces

complexes)

Software à installer Oui 77 € pour 1 licence(371€ : 5 licences)

Complexe +++ Mixte(pour interfaces

complexes)

Software à installer Oui + Possibilité de créer ses propres

bibliothèques

429€ / licence (776 pour licence d’équipe)

Simple ++ Mixte(pour interfaces

complexes)

Interface online Non Gratuit pour 1 proto. (85€ pour protos illimités)

Simple + Spécifique mobile Application à installer(iOS/ Android / Windows

Phone)

Non Gratuit pour 2 projets (104€ : 3

utilisateurs / 260€ :nbre illimité)

Simple + Spécifique mobile Application à installer(iOS)

Oui 26€ par licence

Simple +++ Spécifique mobile Interface online Oui Gratuit

–

04.LES SPÉCIFICITÉS SNCF



BIENVEILLANCE

SIMPLIFICATION

EFFICACITÉ

LES GRANDS PRINCIPES DE TOUT OBJET MOBILE SNCF


+ FAIRE DU MOBILE AVEC L’IDENTITÉ SNCF, ÇA SIGNIFIE QUOI ?

–

PHILOSOPHIE

« 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.


+ COMMENT ?

–

GRILLE 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


–

SYSTÈ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


–

COMPOSANTS & 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…)


+ .PSD (iPhone)

+ .PSD (Android)




–

LE 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é SNCFhttp://www.sncf.com/fr/identite


–

LA 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.




–

LES COULEURS

Dans la charte SNCF, les couleurs ne sont pas exclusives à une catégories de produits ou de services.

Le rôle de la couleur est triple :

1. montrer à l’utilisateur les actions possibles

2. définir les différentes espaces au sein des écrans

3. renforcer le changement d’univers




6E1E78 A1006B CD0037 3C3732

E05206 FFB612 D2E100 82BE00

4D4F53 747678

675C53 82786F

009AA6 0088CE

A0A0A0 B9B9B9

988F86 AFA59B E0DED8

D7D7D7 E1E1DD

D7D7D7

–

LES VISUELS

On distingue 3 types de visuels :+ Les visuels d’inspirations

+ Les visuels éditoriaux

+ Les visuels fonctionnels (les « packshots »)




–

LES VISUELS

Les visuels d’inspirationIl doit donner envie à l’utilisateur et lui permettre de se projeter dans une destination future.


–

LES VISUELS

Les visuels éditoriauxIl doit illustrer un contenu (article, dossier…) afin de remettre l’utilisateur dans le contexte du sujet.


–

LES VISUELS

Les visuels fonctionnelsLe « 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)


–

LES 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…)




–

LE LOADER

À compléter


+ .PSD (iPhone)

+ .PSD (Android)




–

05.CONCLUSION+ UN DERNIER CONSEIL+ QUELQUES CITATIONS


–

+ PROTOTYPEZFAITES PLUSIEURS HYPOTHÈSES VIA PROTOTYPAGE RAPIDE (PAPIER) OU INTERACTIF (WIREFRAME)

+ TESTEZ, TESTEZ, RE-TESTEZIDENTIFIEZ 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


–

TIM COOK(APPLE)

« A GREAT PRODUCT ISN’T JUST A COLLECTION OF FEATURES. IT’S HOW IT ALL WORKS TOGETHER. »


–

JONATHAN IVE(APPLE)

« [THE DESIGN PROCESS] IS ABOUT DESIGNING, PROTOTYPING AND MAKING. WHEN YOUSEPARATE THOSE, I THINK THE FINAL RESULT SUFFERS. »


–

STEVE JOBS(APPLE)

« DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE. DESIGN IS HOW IT WORKS. »


–

JOE SPARANO

« GOOD DESIGN IS OBVIOUS. GREAT DESIGN IS TRANSPARENT. »


–

JASON FRIED(37 SIGNALS)

« THE DESIGN IS DONE WHEN THE PROBLEM GOES AWAY. »


MERCI.

ME R C R E D I 4 MA I 2 0 1 6

S T O R E S N C F

sncf store guidelines-ux v1.2 20160503 · les bonnes pratiques en matière d’ux (expérience...

Documents