30/11/12 KAPT – Tous Droits Réservés 1

Web multi-cibles, multi-supports

FORMATION

30/11/12 KAPT – Tous Droits Réservés 3

1.  Réorienter la réflexion Web

2.  Sortir des choix techniques

3.  Préparer un socle pour du : –  Design ergonomique et émotionnel –  Contenu contextualisé

POURQUOI CETTE FORMATION ?

30/11/12 KAPT – Tous Droits Réservés 4

QUELQUES DEFINITIONS

le Web

Site web

Site web mobile

Application

Application mobile

Application web

Application web mobile

30/11/12 KAPT – Tous Droits Réservés 5

QUELQUES DEFINITIONS

Technologies web

HTML CSS JavaScript STRUCTURE ASPECT COMPORTEMENT

30/11/12 KAPT – Tous Droits Réservés 6

LE WEB AU CENTRE DE TOUT !

Le  Web  Sites web

et web mobile

Applications web

Applications iPhone, iPad, Android, etc

Vitrine interactive

Logiciels de gestion, ERP, observatoire

30/11/12 KAPT – Tous Droits Réservés 7

L’ORDRE DU JOUR

•  Multi-cibles ? –  Parce que vos visiteurs ne sont pas tous les mêmes,

–  Parce que vos visiteurs ne sont pas toujours vos cibles !

–  Parce que votre contenu doit être adapté à chaque catégorie de public ciblé et à chaque usage.

•  Multi-supports ? –  Parce que la navigation Web n’est plus le monopole des

ordinateurs !

30/11/12 KAPT – Tous Droits Réservés 8

•  Quelles sont mes cibles ? Public visé ?

•  Quels usages ? Quelles fonctionnalités ?

•  Quels supports ? Quels équipements ?

LA PREMIERE APPROCHE EST …

… MARKETING !

A vous !

Lister vos cibles, usages et supports

30/11/12 KAPT – Tous Droits Réservés 10

Cibles Usages Supports

1

2

3

VOTRE CONTEXTE

Ordre de priorité : jamais plus de 3 !

Ordinateurs, portable, TV connectée, tablette, SmartPhones, vitrine interactive

Clients, adhérents, fournisseurs, prescripteur, autres.

A quoi sert le site ?

30/11/12 KAPT – Tous Droits Réservés 11

Cibles Usages Supports

1 resp Com/Marketing Démo / réalisations ordinateurs

2 prescripteurs Offre / méthode SmartPhones

3 clients Contact / Blog tablettes

EXEMPLE DE KAPT :

Définir l’importance relative croisée Usages / Support :

•  Usage 1 : Démo / réalisations

•  Support 1 : Ordinateurs •  Support 2 : SmartPhones  

•  Usage 2 : Offre / méthode •  Support 1 : Ordinateurs •  Support 2 : SmartPhones  

•  Support 1 : Ordinateurs •  Usage 1 : Démo  /  réalisa5ons •  Usage 2 : Offre  /  méthode

•  Support 2 : SmartPhones •  Usage 1 : Offre  /  méthode •  Usage 2 : Contact  

30/11/12 KAPT – Tous Droits Réservés 12

PRÉPARATION DU CONTENU

Information & fonctions

Contenu contextualisé et dynamique

30/11/12 KAPT – Tous Droits Réservés 13

•  SÉPARATION –  du contenu informatif

–  Des fonctionnalités (recherche, cartographie, …)

•  RÉPARTITION –  Sur les supports concernés (compatibilité)

–  Sur les publics ciblés (traduction, détails)

•  FIXE ou ADMINISTRABLE ?

PRÉPARATION DU CONTENU (2)

Les grandes méthodes de conception Web

30/11/12 KAPT – Tous Droits Réservés 15

PRÉPARATION DU CONTENU (3)

SUPPORTS : •  SI un seul support : pas de problème !

•  SINON : préparer le contenu du support le plus contraignant d’abord ! MOBILE FIRST

CIBLES : •  SI une seule cible : … IMPOSSIBLE ! •  SINON : préparer les différents PARCOURS

UTILISATEUR, les traductions, etc.

30/11/12 KAPT – Tous Droits Réservés 16

PRÉPARATION DU CONTENU (4)

30/11/12 KAPT – Tous Droits Réservés 17

PRÉPARATION DU CONTENU (5)

CIBLES : PARCOURS UTILISATEUR •  Approche ergonomique : permettre à un

visiteur de trouver facilement son chemin et donc l’information qu’il vient chercher rapidement.

•  Design émotionnel : humaniser la visite de mon site Web

30/11/12 KAPT – Tous Droits Réservés 18

CONCEPTION ERGONOMIQUE

•  Approche ergonomique : permettre à un visiteur de trouver facilement son chemin et donc l’information qu’il vient chercher rapidement.

30/11/12 KAPT – Tous Droits Réservés 19

CONCEPTION ERGONOMIQUE (2)

•  Maquette ergonomique : –  Zoning

–  Wireframe ou Mock’up (wireframesketcher.com)

ZONING

WIREFRAME

30/11/12 KAPT – Tous Droits Réservés 22

DESIGN EMOTIONNEL

•  Humaniser

•  Rendre unique

•  Laisser un bon souvenir

30/11/12 KAPT – Tous Droits Réservés 23

HUMANISER

Tenue vestimentaire

Personnalité Charisme

Discours clair et adapté

Confiance

Pédagogue

INTERFACE

CONTENU

ERGONOMIE

DÉTAILS

FIABILITÉ

RÉPONSES TECHNOLOGIQUES

30/11/12 KAPT – Tous Droits Réservés 25

AUTANT DE VERSIONS QUE DE CIBLES ?

Gestion multilingue, Détection de la langue du navigateur

Préparation de zone de contenu adaptée : détaillée, ludique, etc.

NON, gestion spécifique et dynamique du contenu.

30/11/12 KAPT – Tous Droits Réservés 26

AUTANT DE VERSIONS QUE DE SUPPORTS ?

OUI & NON, ça dépend des usages, mais …

30/11/12 KAPT – Tous Droits Réservés 27

AUTANT DE VERSIONS QUE DE SUPPORTS ?

La fonctionnalité principale disponible partout, tout le temps !

Le contenu informatif, les outils avancés, les actualités, l’agenda.

Le plus : blog, bannière, illustrations, etc.

30/11/12 KAPT – Tous Droits Réservés 28

COMMENT ADAPTER UN CONTENU A PLUSIEURES TAILLES D’ÉCRAN ?

•  Responsive Web Design –  Une conception qui a prévu l’adaptation de

l’interface utilisateur à la taille de l’écran,

–  Une approche du support le plus contraignant vers le plus confortable : MOBILE FIRST,

–  Définition des différents cas : détermination d’une résolution limite pour chaque (ex: largeur de 768px)

–  Utilisation des MEDIA QUERIES en CSS

30/11/12 KAPT – Tous Droits Réservés 29

MEDIA QUERIES ?

•  Mise en page différente pour chaque format

Quelques exemples

Beaux sites en Responsive Web Design

30/11/12 KAPT – Tous Droits Réservés 31

COMMENT DÉTERMINER LES CAS ?

•  Responsive Web Design : –  SmartPhones : 320px de largeur minimum pour 2012

–  Tablettes portrait : 768px

–  Tablettes paysage : 1024px

–  Ordinateur portable : 1280px

–  Ordinateur de bureau / TV connectée : > 1280 px

–  Tactile

–  Souris / Clavier

–  Télécommande

– …

30/11/12 KAPT – Tous Droits Réservés 32

COMMENT PROCÉDER ?

•  Responsive Web Design, la méthode :

30/11/12 KAPT – Tous Droits Réservés 33

CONCRÈTEMENT ?

•  Réalité : –  Exemple d’un bout de CSS

30/11/12 KAPT – Tous Droits Réservés 34

ET ÇA MARCHE ?

•  OUI, un utilisateur qui trouve une interface bien pensée et adaptée à son support ne zappera pas ou moins !

30/11/12 KAPT – Tous Droits Réservés 35

•  Quelques statistiques

ET ÇA SERT ?

30/11/12 KAPT – Tous Droits Réservés 36

POURQUOI JE LE FERAI ?

•  Cette approche est la meilleure !!!

•  Ça pose les bonnes questions !

30/11/12 KAPT – Tous Droits Réservés 37

ET APRÈS ?

•  Il faut humaniser chaque rendu ! Par un DESIGN EMOTIONNEL (autre formation)

Des questions ?

Plus d’infos : formation@kapt.mobi