![[NEWS #01] (re)découvrez l'essentiel de l'actu mobile](https://static.fdocuments.fr/doc/165x107/58e815fa1a28abfd738b67ed/news-01-redecouvrez-lessentiel-de-lactu-mobile.jpg)
01 02 web_expérientiel _ le mobile
21
e-art sup | 3A & 3B Design Interactif Alexandre Rivaux [email protected] ixd.education Web expérientiel — Le mobile
-
Upload
alexandre-rivaux -
Category
Design
-
view
346 -
download
3
Transcript of 01 02 web_expérientiel _ le mobile
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Web expérientiel — Le mobile
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
1. Introduction2. Les interactions mobiles3. Le mobile applicatif vs le mobile web4. Le design mobile : ce qu’il faut savoir5. Quelques exemples6. Bibliographie
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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 & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Les interactions mobiles
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Le web expérientiel : le mobile
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Le mobile applicatif vs le mobile web
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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 materiel3. Possibilité d’utiliser la résolution native4. 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 & 3BDesign Interactif
Alexandre [email protected]
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 materiel2. Design à réaliser selon la taille des viewport3. Nécessite une connexion 3G, 4G ou WIFI pour
accéder au contenu4. Peu ou pas de mémoire pour les assets lourd5. Accessibilité via l’accueil plus «tricky» à mettre en
place6. Nécessite un upload des donnée pour utiliser les
datas
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Le design mobile : ce qu’il faut savoir
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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 & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Gestuel et analogie : le lance pierre
Angry Birds (2009)Marque & production : Rovio Ltd.
Quelques exemples
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Gestuelle et analogie : La galère
The Pirate Boat Race (2010)Marque : Pirata London
Quelques exemples
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Le hors champ : 360°
Contexta-Collection.ch (2015)Marque : Contexta-AG
Quelques exemples
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Le coach
Nik training club (NTC) (2011)Marque : NikeAgence : AKQA
Quelques exemples
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Multijoueur
The World of Yo-Ho (2015)Marque : Volumique
Quelques exemples
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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 & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Bibliographie
Global
Ré-enchanter la lecture sur numérique, Etienne Mineur, Novembre 2012http://www.my-os.net/archives/?p=426Technologies tactiles et systèmes d’exploitation : création et contraintes, cyborgliterraire, Mars 2015http://cyborglitteraire.com/2015/03/26/technologie-tactile-et-systemes-dexploitation-creations-et-contraintes/Mobile HTML5 Approach, Tomomi Imura, Mai 2013http://www.girliemac.com/presentation-slides/html5-mobile-approach/deviceAPIs.html#31Smartphone, so many app, so much tim, Nielsen, Janvier 2014http://www.nielsen.com/us/en/insights/news/2014/smartphones-so-many-apps--so-much-time.htmlSmartphone Resolution, wikipedia https://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displaysViewport resolutionhttp://viewportsizes.comNative Resolution vs Viewport Resolutionhttp://mydevice.io/devices/Mobile gesturehttp://openexhibits.org/support/gesture-library/Les critères ergonomique, Bastien & Scapinhttp://www.ergolab.net/articles/criteres-ergonomiques-1.phpHow do users really hold mobile devices, Steven Hoober, UX Matterhttp://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Bibliographie
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Bon designInteractif ;)Pour toutes questions concernant la matière, les sujets ou le design; n’hésitez pas à me contacter.
