Le mobile (ixd)

1. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Web expérientiel
—
Le mobile

2. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
1. Introduction
2. Les interactions mobiles
3. Le mobile applicatif vs le mobile web
4. Le design mobile : ce qu’il faut savoir
5. Quelques exemples
6. Bibliographie

3. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Introduction

4. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Introduction
Depuis la sortie de l’iphone en 2007 nous sommes officiellement passé de l’ère de l’ordinateur personnel à l’ère de l’
informatique ubiquitaire. Nous sommes partout à la fois et avons accès à toute les données en même temps où que nous
soyons.
Le téléphone n’est plus un simple outils de communication dont on se sert ou échanger quelques messages entre amis. Il
est est devenu une extension de l’utilisateur. ll est à la fois ordinateur personnel, conversant notre musique ou nos photos
de vacances et notre assistant personnel nous permettant d’organiser l’anniversaire surprise de l’être cher ou de préparer le
voyage d’affaire du mois prochain. Il est également devenu notre télécommande universelle, nous permettant de contrôler
la consommation d’energie de la maison et tend aujourd’hui à devenir notre coach sportif et médical, monitorant nos
calories et notre rythme cardiaque.
Étant constamment dans notre poche et à notre vue avec une moyenne de 30,2 heure d’utilisation par mois selon une étude
de l’institut Nielsen (Janvier 2014) il est compréhensible que le secteur de la communication le voit comme un média
indispensable sur lequel communiquer. Mais qu’en est-il des interactions envisageable avec cet outils?
Le web expérientiel : le mobile
—

5. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Les interactions
mobiles

6. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le web expérientiel : le mobile
—

7. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le mobile
applicatif vs
le mobile web

8. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le mobile applicatif
Avantages :
1. Possibilité d’accéder à l’ensemble des interfaces d’
entrées
2. Possibilité d’utiliser l’accélération materiel
3. Possibilité d’utiliser la résolution native
4. Possibilité de developper en natif (C#/C++/Java…)
ou via des frameworks (Unity3D, Unreal,
Openframework…)
5. Permet de stocker des éléments en mémoire
(assets images, vidéo, son…)
6. Peut être vendu sur la plateforme dédiée de la l’OS
(le «store»)
7. Peut être facilement accessible via l’accueil
Le web expérientiel : le mobile
—
Contraintes :
1. Nécessite des adaptations spécifique par OS
augmenter ainsi les coûts de production
2. Nécessite d’être télécharger via la plateforme
dédiée de l’OS (le «store») necessitant ainsi sa
propre campagne de communication.

9. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le mobile web
Avantages :
1. Compatible sur l’ensemble des OS via l’utilisation
du browser (HTML5)
2. Facile à mettre en place dans le cas de remontée
de contenus web
3. Permet d’accéder à une grande partie des
capteurs du téléphone
4. Accessible via URL sans passer par un «store» et
un téléchargement
Le web expérientiel : le mobile
—
Contraintes :
1. Peu ou pas d’accélération materiel
2. Design à réaliser selon la taille des viewport
3. Nécessite une connexion 3G, 4G ou WIFI pour
accéder au contenu
4. Peu ou pas de mémoire pour les assets lourd
5. Accessibilité via l’accueil plus «tricky» à mettre en
place
6. Nécessite un upload des donnée pour utiliser les
datas

10. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le design mobile :
ce qu’il faut savoir

11. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le design mobile
L’utilisation du mobile est radicalement différente de celle d’un ordinateur, l’ergonomie s’en trouve alors changé
1. Le changement de l’interface de pointage : adieux souris et clavier, bonjour multitouch et gestuelle. Les interactions
doivent prendre en compte les gestuelles connues des utilisateur. Si l’expérience met en place une nouvelle
gestuelle, celle-ci doit être explicitée.
2. La taille de cécran est radicalement différente et inferieur, le design doit donc prendre en compte ce changement.
3. Les mains de l’utilisateur viennent par dessus l’écran, l’ergonomie de sa page doit donc être pensée pour une
interaction avec les mains. Dans l’article suivant, Steven Hoober revient sur la manière dont les smartphones sont
tenus par les utilisateurs.
4. Les doigts des utilisateurs sont plus gros qu’une souris. Les boutons doivent donc être plus grand afin de faciliter l’
interaction.
5. Il n’existe pas de roll-over sur écran mobile. Le feedback doit donc être repensé.
6. Tout comme le web, l’application doit respecter les principe d’ergonomie web (cf les critères ergonomique de
Bastien & Scapin)
Le web expérientiel : le mobile
—

12. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Quelques
exemples

13. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Gestuel et analogie : le lance
pierre
Angry Birds (2009)
Marque & production : Rovio Ltd.
Quelques exemples
—

14. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Gestuelle et analogie : La galère
The Pirate Boat Race (2010)
Marque : Pirata London
Quelques exemples
—

15. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le hors champ : 360°
Contexta-Collection.ch (2015)
Marque : Contexta-AG
Quelques exemples
—

16. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le coach
Nik training club (NTC) (2011)
Marque : Nike
Agence : AKQA
Quelques exemples
—

17. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Multijoueur
The World of Yo-Ho (2015)
Marque : Volumique
Quelques exemples
—

18. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Créer des mondes
Paws prototypes (2009-2015)
Marque : Volumique
Premier prototype : http://volumique.
com/v2/portfolio/pawns-phone/
Quelques exemples
—

19. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bibliographie

20. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bibliographie
Global
Ré-enchanter la lecture sur numérique, Etienne Mineur, Novembre 2012
http://www.my-os.net/archives/?p=426
Technologies tactiles et systèmes d’exploitation : création et contraintes, cyborgliterraire, Mars
2015
http://cyborglitteraire.com/2015/03/26/technologie-tactile-et-systemes-dexploitation-creations-
et-contraintes/
Mobile HTML5 Approach, Tomomi Imura, Mai 2013
http://www.girliemac.com/presentation-slides/html5-mobile-approach/deviceAPIs.html#31
Smartphone, so many app, so much tim, Nielsen, Janvier 2014
http://www.nielsen.com/us/en/insights/news/2014/smartphones-so-many-apps--so-much-
time.html
Smartphone Resolution, wikipedia
https://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displays
Viewport resolution
http://viewportsizes.com
Native Resolution vs Viewport Resolution
http://mydevice.io/devices/
Mobile gesture
http://openexhibits.org/support/gesture-library/
Les critères ergonomique, Bastien & Scapin
http://www.ergolab.net/articles/criteres-ergonomiques-1.php
How do users really hold mobile devices, Steven Hoober, UX Matter
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Bibliographie
—

21. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bon design
Interactif ;)
Pour toutes questions concernant
la matière, les sujets ou le design;
n’hésitez pas à me contacter.
arivaux@gmail.com