SlideShare une entreprise Scribd logo
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Web expérientiel
—
Le mobile
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
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Introduction
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
—
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Les interactions
mobiles
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le web expérientiel : le mobile
—
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le mobile
applicatif vs
le mobile web
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.
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
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Le design mobile :
ce qu’il faut savoir
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
—
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Quelques
exemples
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
—
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
—
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
—
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
—
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
—
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
—
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bibliographie
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
—
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

Contenu connexe

En vedette

CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
CNV Vakcentrale
 
2008 Ca&A EspañOl Adultos Usa Wp
2008 Ca&A EspañOl Adultos Usa Wp2008 Ca&A EspañOl Adultos Usa Wp
2008 Ca&A EspañOl Adultos Usa Wp
Luis Cubria Falla
 
eCommerce V2
eCommerce V2eCommerce V2
eCommerce V2
Sowre
 
Bcr informativo semanal 10082012
Bcr informativo semanal 10082012Bcr informativo semanal 10082012
Bcr informativo semanal 10082012
joseleorcasita
 
Blogosfera, jóvenes y otros espacios para la innovación
Blogosfera, jóvenes y otros espacios para la innovaciónBlogosfera, jóvenes y otros espacios para la innovación
Blogosfera, jóvenes y otros espacios para la innovación
José Manuel Noguera
 
Technology leadership power point
Technology leadership power pointTechnology leadership power point
Technology leadership power point
texpeach25
 
Poemas de locura
Poemas de locuraPoemas de locura
Poemas de locura
Karenlobo
 
2 1030 am the forum on bogota human capital management strategy final-p_nede...
2  1030 am the forum on bogota human capital management strategy final-p_nede...2  1030 am the forum on bogota human capital management strategy final-p_nede...
2 1030 am the forum on bogota human capital management strategy final-p_nede...
Portal Educativo Colombia Aprende
 
Dossier LB canto duo double gobelet tactile
Dossier LB canto duo double gobelet tactileDossier LB canto duo double gobelet tactile
Dossier LB canto duo double gobelet tactile
Laurence Thébault
 
Tarea No.1 Amigo
Tarea No.1 AmigoTarea No.1 Amigo
Tarea No.1 Amigo
Jorge Barahona Ch.
 
Drawing a floor plan
Drawing a floor planDrawing a floor plan
Drawing a floor plan
Ashley Macejka
 
Emma
EmmaEmma
Emma
luisel
 
24092014_Présentation Soirée Agences
24092014_Présentation Soirée Agences24092014_Présentation Soirée Agences
24092014_Présentation Soirée Agences
PrestaShop
 
Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)
Anis Bouhachem Djer
 
Pinterest
PinterestPinterest
Pinterest
Maria Jose
 
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
Universidad Autónoma de Barcelona
 
Cfcshspecialerace2013
Cfcshspecialerace2013Cfcshspecialerace2013
Cfcshspecialerace2013genevieve38
 
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
Office Nationale du Tourisme Madagascar
 
Instalar La Memoria Ram
Instalar La Memoria RamInstalar La Memoria Ram
Instalar La Memoria Ram
Cinthia
 

En vedette (20)

CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
CNV y RSE - Cómo enfrentar víolaciones a los derechos humanos en su empresa o...
 
2008 Ca&A EspañOl Adultos Usa Wp
2008 Ca&A EspañOl Adultos Usa Wp2008 Ca&A EspañOl Adultos Usa Wp
2008 Ca&A EspañOl Adultos Usa Wp
 
eCommerce V2
eCommerce V2eCommerce V2
eCommerce V2
 
Bcr informativo semanal 10082012
Bcr informativo semanal 10082012Bcr informativo semanal 10082012
Bcr informativo semanal 10082012
 
Blogosfera, jóvenes y otros espacios para la innovación
Blogosfera, jóvenes y otros espacios para la innovaciónBlogosfera, jóvenes y otros espacios para la innovación
Blogosfera, jóvenes y otros espacios para la innovación
 
Technology leadership power point
Technology leadership power pointTechnology leadership power point
Technology leadership power point
 
Poemas de locura
Poemas de locuraPoemas de locura
Poemas de locura
 
2 1030 am the forum on bogota human capital management strategy final-p_nede...
2  1030 am the forum on bogota human capital management strategy final-p_nede...2  1030 am the forum on bogota human capital management strategy final-p_nede...
2 1030 am the forum on bogota human capital management strategy final-p_nede...
 
Dossier LB canto duo double gobelet tactile
Dossier LB canto duo double gobelet tactileDossier LB canto duo double gobelet tactile
Dossier LB canto duo double gobelet tactile
 
DSA Bürotec GmbH
DSA Bürotec GmbHDSA Bürotec GmbH
DSA Bürotec GmbH
 
Tarea No.1 Amigo
Tarea No.1 AmigoTarea No.1 Amigo
Tarea No.1 Amigo
 
Drawing a floor plan
Drawing a floor planDrawing a floor plan
Drawing a floor plan
 
Emma
EmmaEmma
Emma
 
24092014_Présentation Soirée Agences
24092014_Présentation Soirée Agences24092014_Présentation Soirée Agences
24092014_Présentation Soirée Agences
 
Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)
 
Pinterest
PinterestPinterest
Pinterest
 
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
Comparación normativa 1998 y 2012. Contrato para la formación y el aprendizaje.
 
Cfcshspecialerace2013
Cfcshspecialerace2013Cfcshspecialerace2013
Cfcshspecialerace2013
 
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
L’implication des Producteurs et des Distributeurs dans le Tourisme Durable
 
Instalar La Memoria Ram
Instalar La Memoria RamInstalar La Memoria Ram
Instalar La Memoria Ram
 

Similaire à 01 02 web_expérientiel _ le mobile

03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction
Alexandre Rivaux
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumailjuliendumail
 
Digital lab brief
Digital lab   briefDigital lab   brief
Digital lab brief
Alexandre Rivaux
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
Olivier Dommange
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
bduverneuil
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia
 
Cahier_Projets_FE-CORTES
Cahier_Projets_FE-CORTESCahier_Projets_FE-CORTES
Cahier_Projets_FE-CORTESFran CORTES
 
Aymenbrahamcv
AymenbrahamcvAymenbrahamcv
Aymenbrahamcv
Aymen Braham
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
bduverneuil
 
Tendances Web 2014
Tendances Web 2014Tendances Web 2014
Tendances Web 2014
Antonio Eugenio
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
bduverneuil
 
Internet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.FrInternet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.Fr
Nicolas Mas
 
Usages pédagogiques des outils nomades en info-doc
Usages pédagogiques des outils nomades en info-docUsages pédagogiques des outils nomades en info-doc
Usages pédagogiques des outils nomades en info-doc
sophiebocquet
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
Lotfi Dridi
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
Alinoa
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb
 
eBeam Edge
eBeam EdgeeBeam Edge
eBeam Edge
Henri Willox
 
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
PSST (opinions et tendances 2.0) par jeremy dumont
 

Similaire à 01 02 web_expérientiel _ le mobile (20)

03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction
 
dossier20-ecran
dossier20-ecrandossier20-ecran
dossier20-ecran
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumail
 
Digital lab brief
Digital lab   briefDigital lab   brief
Digital lab brief
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Cahier_Projets_FE-CORTES
Cahier_Projets_FE-CORTESCahier_Projets_FE-CORTES
Cahier_Projets_FE-CORTES
 
Aymenbrahamcv
AymenbrahamcvAymenbrahamcv
Aymenbrahamcv
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Tendances Web 2014
Tendances Web 2014Tendances Web 2014
Tendances Web 2014
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
 
Internet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.FrInternet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.Fr
 
Usages pédagogiques des outils nomades en info-doc
Usages pédagogiques des outils nomades en info-docUsages pédagogiques des outils nomades en info-doc
Usages pédagogiques des outils nomades en info-doc
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
eBeam Edge
eBeam EdgeeBeam Edge
eBeam Edge
 
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
 

Plus de Alexandre Rivaux

02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain
Alexandre Rivaux
 
01 gx d - generative design et creative coding
01 gx d - generative design et creative coding01 gx d - generative design et creative coding
01 gx d - generative design et creative coding
Alexandre Rivaux
 
00 gx d - introduction
00 gx d - introduction00 gx d - introduction
00 gx d - introduction
Alexandre Rivaux
 
01 une histoire du di
01 une histoire du di01 une histoire du di
01 une histoire du di
Alexandre Rivaux
 
Installation interactive conférence
Installation interactive   conférenceInstallation interactive   conférence
Installation interactive conférence
Alexandre Rivaux
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
Alexandre Rivaux
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
Alexandre Rivaux
 
Une histoire du di
Une histoire du diUne histoire du di
Une histoire du di
Alexandre Rivaux
 

Plus de Alexandre Rivaux (8)

02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain
 
01 gx d - generative design et creative coding
01 gx d - generative design et creative coding01 gx d - generative design et creative coding
01 gx d - generative design et creative coding
 
00 gx d - introduction
00 gx d - introduction00 gx d - introduction
00 gx d - introduction
 
01 une histoire du di
01 une histoire du di01 une histoire du di
01 une histoire du di
 
Installation interactive conférence
Installation interactive   conférenceInstallation interactive   conférence
Installation interactive conférence
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
 
Une histoire du di
Une histoire du diUne histoire du di
Une histoire du di
 

01 02 web_expérientiel _ le mobile

  • 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