esg - application mobile - cours 1

72

Upload: alban-oujagir

Post on 21-Jun-2015

654 views

Category:

Mobile


3 download

TRANSCRIPT

Page 1: ESG - Application Mobile - Cours 1
Page 2: ESG - Application Mobile - Cours 1

• les présentations • Plan de cours • Concevoir pour le mobile

SOMMAIRE - 03/05/2014

Page 3: ESG - Application Mobile - Cours 1

Alban Oujagir UX Designer Marcel WW

Page 4: ESG - Application Mobile - Cours 1

[email protected]

@oujagir_alban

Alban Oujagir

Page 5: ESG - Application Mobile - Cours 1

LES Présentations

Page 6: ESG - Application Mobile - Cours 1

• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile

SOMMAIRE - 03/05/2014

Page 7: ESG - Application Mobile - Cours 1

objectif

PLaN DE COURS

La maîtrise complète d’un projet mobile. De la prise de brief au lancement de l’application.

Page 8: ESG - Application Mobile - Cours 1

5 Phases

PLaN DE COURS

Page 9: ESG - Application Mobile - Cours 1

1. Le Marché mobile 2. Le mobile : pourquoi et pour quoi faire ? 3. «How to» : Gestion de projet mobile 4. Comment ne pas se faire avoir par la technique ? 5. Evaluation.

PLaN DE COURS

Page 10: ESG - Application Mobile - Cours 1

1. Le Marché mobile - Introduction : Concevoir pour le mobile - Chiffes clés et tendances - Une grande diversité de terminaux

PLaN DE COURS

Page 11: ESG - Application Mobile - Cours 1

2. Le mobile : pourquoi et pour quoi faire ? - Définition d’une stratégie mobile - Site Mobile Vs. Application mobile, enjeux et différences - Solution alternative : la web app

PLaN DE COURS

Page 12: ESG - Application Mobile - Cours 1

3. «How to» : Gestion de projet mobile !

- Conception fonctionnelle, graphique et ergonomique. - Zoom sur la conception fonctionnelle - Zoom sur la conception ergonomique - Site mobile et responsive design - Méthodologie et grandes étapes d’un projet - Travaux pratiques : Applications

PLaN DE COURS

Page 13: ESG - Application Mobile - Cours 1

4. Comment ne pas se faire avoir par la technique ? - Zoom sur les technos - Les OS - Cross platform - Tips

PLaN DE COURS

Page 14: ESG - Application Mobile - Cours 1

1. Le Marché mobile 2. Le mobile : pourquoi et pour quoi faire ? 3. «How to» : Gestion de projet mobile 4. Comment ne pas se faire avoir par la technique ? 5. Evaluation.

PLaN DE COURS

Page 15: ESG - Application Mobile - Cours 1

• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile

SOMMAIRE - 03/05/2014

Page 16: ESG - Application Mobile - Cours 1

@esgMS MEB

alban oUjagir

LA CONCEPTION POUR L’objet qui est TOUJOURS

DANS VOTRE POCHE

Page 17: ESG - Application Mobile - Cours 1

Quelques précisions…

Page 18: ESG - Application Mobile - Cours 1

Le mobile c’est quoi ?

(dans cette présentation)

Connexion 3G / Wifi

Stockage des données

Clavier (physique ou virtuel)

Toujours dans la poche

Page 19: ESG - Application Mobile - Cours 1

 « Et la tablette c’est

du mobile ? » 

Page 20: ESG - Application Mobile - Cours 1

En 201385% des tablettes

vendues en France son wi-fi

Page 21: ESG - Application Mobile - Cours 1

Pourquoi s’intéresser au mobile ? en 4 Lieux communs?

Page 22: ESG - Application Mobile - Cours 1

Lieu commun #1 Tout le monde en a un (ou presque)

Page 23: ESG - Application Mobile - Cours 1

Lieu commun #1 Tout le monde en a un (ou presque)

38% des français possèdent un smartphone

2012ventes des smartphones supp. au PC

www 85%des téléphones vendus avec un browser

50%du traffic de Facebook fait sur mobile

Page 24: ESG - Application Mobile - Cours 1

De plus en plus de gens sont et seront équipés d’un smartphone connecté !

Page 25: ESG - Application Mobile - Cours 1

Lieu commun #2 Le contexte d’utilisation d’un mobile n’est pas celui d’un ordinateur.

Page 26: ESG - Application Mobile - Cours 1

Fluffy et Mr. Lacombe Lt. Mac Lusky

Page 27: ESG - Application Mobile - Cours 1

!

Les contextes d’utilisation

(partout)

Dans les magasins 76%

Dans les transports 62% A table.

59%Dans les situations d’attentes

46% En société 39% Aux toilettes

76%

Page 28: ESG - Application Mobile - Cours 1

Le mobile est utilisé partout et en toute circonstance !

Page 29: ESG - Application Mobile - Cours 1

Lieu commun #3 L’utilisateur mobile est multi-tâches comme son téléphone.

Page 30: ESG - Application Mobile - Cours 1

72% des utilisateurs naviguent sur mobile en :

44%

En écoutant de la musique

27%

En jouant33%

En regardant la TV

22%

En lisant le journal

22%

En lisant des livres

Page 31: ESG - Application Mobile - Cours 1

Le mobile est un ami fidèle toujours prêt à m’accompagner dans toutes les tâches de mon quotidien !

Page 32: ESG - Application Mobile - Cours 1

Lieu commun #4 Le portable c’est un véritable concentré de technologie

Page 33: ESG - Application Mobile - Cours 1

L’iPhone 5 est aussi puissant qu’un supercalculateur de 1985

Page 34: ESG - Application Mobile - Cours 1

Microphone

Speakers

APN + Caméra Vidéo

Géolocalisation

Lecteur RFID

Capteur Mutli-touch

Accéléromètre

Boussole

Feedback haptique

Capteur de mouvement

Page 35: ESG - Application Mobile - Cours 1

Allez viens ! Regarde tout ce que l’on peut faire !

Page 36: ESG - Application Mobile - Cours 1

Lieu commun #1 Lieu commun #2 Lieu commun #3 Lieu commun #4

Le mobile offre des opportunités fonctionelles

quasi infinies.

Page 37: ESG - Application Mobile - Cours 1

« My goal initially just to make a mobile

companion, but I became convinced it was possible to create a version of Facebook that was actually better

than the website » !

Joe Hewitt - Former Developer of Facebook App

Page 38: ESG - Application Mobile - Cours 1

La minute

blind test

Page 39: ESG - Application Mobile - Cours 1

La minute

blind test

Page 40: ESG - Application Mobile - Cours 1

Avant je faisais d’une certaine façon,

et maintenant je ne ferai plus jamais comme avant.

Shazam à créé

un nouveau comportement

Page 41: ESG - Application Mobile - Cours 1
Page 42: ESG - Application Mobile - Cours 1

Une minute de silence SVP

Page 43: ESG - Application Mobile - Cours 1
Page 44: ESG - Application Mobile - Cours 1

Le smartphone

se substitue aux objets du quotidien...

Page 45: ESG - Application Mobile - Cours 1

...et trouve également sa place dans des champs

d’actions très spécialisés.

*comme t’aider à tuer des gens

US ARMY app : Bulletflight

!

Page 46: ESG - Application Mobile - Cours 1

Comme disait McLuhan :

« We shape our tools and thereafter our tools shape us »

Marshall McLuhan Understanding Media : The Extensions of Man -1964

Page 47: ESG - Application Mobile - Cours 1

Le smartphone induit des

glissements d’usages :

Fonction 1ère : Souvenirs, Conserver des moments, côté précieux , transmission.

Glissement : Bloc-note,Disposer en permanence de données personnelles utiles.

Page 48: ESG - Application Mobile - Cours 1

Nouvel usage : App marchande, photographier une référence pour l’acheter.

Des nouveaux comportements qui

influencent les «designers» :

Glissement : Bloc-note,Disposer en permanence de données personnelles utiles.

Page 49: ESG - Application Mobile - Cours 1

C’est notre rôle de «concepteur» de déterminer en fonction du contexte et de nos utilisateurs quelles sont nos opportunités

d’innovation.

Page 50: ESG - Application Mobile - Cours 1

Avec un espoir :

transformer un comportement en un usage !

Page 51: ESG - Application Mobile - Cours 1

Aller observer les utilisateurs dans leur milieu naturel.

Tips #1

LET’S GO OUTSIDE !

Page 52: ESG - Application Mobile - Cours 1

Tips #2

Exploite la technologie de ton mobile !

Page 53: ESG - Application Mobile - Cours 1

Petit voyage à Singapour

Page 54: ESG - Application Mobile - Cours 1

OKAMOTO / TipOff - Cannes 2012 Mobile Lions Shortlist TBWA\ TEQUILA\ Singapore

Page 55: ESG - Application Mobile - Cours 1

Cet exemple

répond aux besoins des

utilisateurs dans un contexte donné

et aux objectifs de la marque :

UTILISATEUR(S)

OBJECTIF(S)

CONTEXTE

Page 56: ESG - Application Mobile - Cours 1

Mais est-ce toujours suffisant ?

Page 57: ESG - Application Mobile - Cours 1

Fuel Band : L’histoire d’un bide

(ou pas)

Page 58: ESG - Application Mobile - Cours 1

Fuel Band : Les raisons du succès

Ils ont modifiés le dispositif déjà lancé sur la base de deux insights utilisateur : !

1/ Notre tendance naturelle à consulter compulsivement les feeds : «fear of missing out». !

2/ L’esprit de compétition et le besoin de se comparer aux autres.

Page 59: ESG - Application Mobile - Cours 1

« It wasn’t a big idea so much as lots of little smart decisions that, added together, created an inspired experience».

Nick Law Global CCO at R/GA

Page 60: ESG - Application Mobile - Cours 1

Concevoir pour le mobile :

Observations d’usages

Remontées d’insights

IDEABIG +itération

Page 61: ESG - Application Mobile - Cours 1

«CREATE RELEVANCE, NOT AWARENESS»

Le challenge aujourd’hui n’est plus de se battre pour créer l’attention, mais de devenir suffisamment pertinent pour que nos consommateurs s’intéressent à nous par eux-même.

Amir Kassaie CCO at DDB Worldwide

Page 62: ESG - Application Mobile - Cours 1

Tips #3

!

Il ne faut jamais oublier ce qu’implique la conception en

situation de mobilité.

Page 63: ESG - Application Mobile - Cours 1

Fluffy et Mr. Lacombe Lt. Mac Lusky

Page 64: ESG - Application Mobile - Cours 1

Un utilisateur attentif

Un environnement familier dédié

Un espace privatif

Un écran de grande taille

Un clavier stable / usuel

Un réseau stable

De l'énergie à revendre

Page 65: ESG - Application Mobile - Cours 1

Un utilisateur distrait

Un espace public

Environnement variable

Ecran de taille réduite

Clavier + touch

Réseau variable

Une batterie

Page 66: ESG - Application Mobile - Cours 1

Concevoir pour le mobile, c’est : prendre en compte le manque de concentration, l’intérruption et la distraction.

Page 67: ESG - Application Mobile - Cours 1

Concevoir pour le mobile, c’est donc: ne pas trop solliciter ce truc.

Page 68: ESG - Application Mobile - Cours 1

Tips #4

Rester core functionality !

x

Page 69: ESG - Application Mobile - Cours 1

Exemple : le remplissage automatique

Simplifier au maximul l’effort de l’utilisateur !

Tips #5

Page 70: ESG - Application Mobile - Cours 1

!

"La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer".

Antoine de Saint-Exupéry.

Page 71: ESG - Application Mobile - Cours 1

• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile

SOMMAIRE - 03/05/2014

Page 72: ESG - Application Mobile - Cours 1