01 02 web_expérientiel _ le mobile

326 vues

Publié le

Le mobile (ixd)

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
326
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

01 02 web_expérientiel _ le mobile

  1. 1. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Web expérientiel — Le mobile
  2. 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. 3. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Introduction
  4. 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. 5. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Les interactions mobiles
  6. 6. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Le web expérientiel : le mobile —
  7. 7. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Le mobile applicatif vs le mobile web
  8. 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. 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. 10. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Le design mobile : ce qu’il faut savoir
  11. 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. 12. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Quelques exemples
  13. 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. 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. 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. 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. 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. 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. 19. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Bibliographie
  20. 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. 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

×