SOMMAIRE. 1. Paysage actuel 1. Chiffres clés et tendances 2. Fragmentation toujours élevée 3. Synthèse. 2. Démarche: pourquoi et quoi faire?

Transcription

1

2 Préambule D'abord considéré comme un simple support de communication, le mobile est devenu en 5 ans un canal d accès privilégié au web, contenus et services. A ce titre, les enjeux du mobile ont considérablement augmenté et font maintenant partie intégrante des stratégies des entreprises. Néanmoins, si l importance du mobile est un fait globalement partagé, le sujet reste complexe à aborder pour la plupart des entreprises car il demeure nouveau, mouvant et à la croisée du web, du marketing et de la technique. Smile, spécialiste du web et de l intégration de solutions open source a donc réalisé ce guide afin de vous éclairer dans votre démarche et de vous accompagner dans la définition puis la gestion d un projet mobile.

3 SOMMAIRE 1. Paysage actuel 1. Chiffres clés et tendances 2. Fragmentation toujours élevée 3. Synthèse 2. Démarche: pourquoi et quoi faire? 3. Démarche: comment faire? 4. Le "cross-platform» 5. L approche de Smile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 3

4 1. Paysage actuel Chiffres clés et tendances

5 CHIFFRES CLÉS ET TENDANCES Le mobile a déjà 30 ans et est devenu au file des années un canal incontournable. Voici quelques terminaux qui ont marqué l'histoire : Motorola DynaTAC 8000x (1983) Bi-Bop (1990) Nokia 3210 et 3310 (1999) Blackberry 5790 (2000) Motorola Razr V3 (2005) Apple iphone 1 (2007) Ce canal sera bientôt dominant, en nombre de connexion dans le monde Dès maintenant [ ] 4 consommateurs sur 5 peuvent accéder à Internet et au commerce en ligne via leur mobile, contre 1 consommateur sur 5 via son ordinateur. " (source: TNS Sofres) 2012 Dans le monde, en 2014, Internet sera majoritairement mobile en nombre de connexion (Source: Etude Morgan Stanley 2011) "All people in the world are going to get a smartphone, and for most of them it will be their first computer." (Larry Page, CEO Google 2012) Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 5

6 CHIFFRES CLÉS ET TENDANCES Croissance du parc et intensification des usages en France En forte croissance (34% en 2011) et avec un parc de 20 millions de smartphones en France à fin 2011, on est loin de la technologie de pointe et réservée à quelques spécialistes que l on a connu. Par ailleurs, l aspect le plus marquant est son utilisation qui s intensifie d année en année (doublement du nombre d utilisateurs quotidiens de l internet mobile en un an). Les nouveaux utilisateurs, se servent de leur smartphone, et ce de plus en plus. +34% Mobinaute = utilisateur de smartphone allant sur Internet (via navigateur ou application) +100% Source: Médiamétrie D après Google/Ipsos, on compterait 55% de mobinautes quotidiens Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 6

7 CHIFFRES CLÉS ET TENDANCES Partout et tout le temps > 90% des utilisateurs gardent leur smartphone sur eux 24h/24h Majoritairement utilisé à la maison Devant la télévision Au lit Dans la salle de bain ou aux toilettes et ensuite en «mobilité» : Durant une attente En transport En réunion / en cours En faisant les courses L âge moyen du premier mobile : 11 ans et demi! Portrait du Mobinaute Données France Près de 50% ont moins de 35 ans 8/10 habitent hors agglomération parisienne (vs. 3/4 l an dernier) 43% sont des femmes (vs. 40% l an dernier) (Source: Médiamétrie) Source : IPSOS et CETELEM Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 7

8 CHIFFRES CLÉS ET TENDANCES Applications - Des utilisateurs qui téléchargent, testent, et zappent Le 5 mars Apple a fêté ses 25 milliards d applications téléchargées. Autre chiffre marquant, demandes d applications à valider par semaine dont un tiers sera rejeté. Applications les plus téléchargées en 2011 (dans le monde tout OS confondus) Angry Birds, Facebook, Skype, Angry Birds Rio, Google Maps, ibooks, Angry Birds season, Fruit Ninja, Talking Tom Cat, Twitter Plébiscitées pour les utilisateurs et présentes en très grand nombre 1 million d applications disponibles sur les stores (total des 4 principaux OS) En 2011, 18 milliards d applications ont été téléchargées 83* applications téléchargées en moyenne par an sur ios. *D autres études parlent de 60 à 80 applications téléchargées par an/ par personne, 30 utilisées dont 10 régulièrement Source chiffres : ChangeWave Gartner Un phénomène de «Blockbusterisation» (concentration des usages) Le top 10 des applications Android concentre 43 % de tout le temps passé Des applications considérées comme jetables ou Kleenex 26% des applications sont téléchargées, ouvertes une seule fois pour ne plus jamais être utilisées. Seuls 26% sont utilisées plus de 10 fois aux durées de vie très éphémères: Après un mois d utilisation, seulement 38% des utilisateurs (ios comme Android) l utilisent encore Après 6 mois, seulement 14%, puis seulement 2% utiliseront après 12 mois Source chiffres: Apple, Localytics, Flurry Analytics & Estimates Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 8

9 CHIFFRES CLÉS ET TENDANCES Web mobile - des utilisateurs exigeants Mais nombreux De 2010 à 2011: la part des recherches sur mobile est passée de 2,95% à 5,98% (chiffres monde) En d autres termes: les utilisateurs ont des besoins et souhaitent vous trouver Mais leur expérience actuelle est encore globalement déceptive (US) Un utilisateur sur deux est globalement insatisfait de son expérience d internet sur mobile. 1/4 d entre eux, ne reviendront pas Pour 15% le site ne répond pas à leurs attentes ou est mal adapté au mobile Pour 38% il est trop lent Pour 18% le site ne fonctionne pas Pour 13% le site mobile n existe pas L étude montre néanmoins que la différence entre le web mobile et les applications téléchargées est perçue et les exigences de temps de réponse, d ergonomie et de contenu restent moins élevées que sur le web. Source Chiffres : NetMarketShare Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 9

10 1. Paysage actuel Fragmentation toujours élevée

11 FRAGMENTATION TOUJOURS ÉLEVÉE Un paysage très fragmenté mais homogénéisé grâce à Android Terminaux (sous Android) Cette représentation montre de manière visuelle le niveau de fragmentation des terminaux pour l OS Android. Elle n a pas vocation à apporter d informations chiffrées Source : OpenSignalMaps Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 11

12 FRAGMENTATION TOUJOURS ÉLEVÉE Ecrans : des proportions similaires qui tendent diverger Si globalement tous les smartphones ont une proportion hauteur/largeur proche, celle-ci tend à diverger avec les modèles les plus récents. A titre d information, elle est de 1,5 sur les iphones 3 et 4, de 1,66 sur les Samsung Galaxy S1 et S2 et de 1,77 (16/9) pour l iphone 5. Ces écarts doivent être pris en compte dans le cadre des sites web mobiles mais aussi des applications en vue de mutualisation de certains coûts de développements (ergonomie, design, montage ) Source : OpenSignalMaps Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 12

13 FRAGMENTATION TOUJOURS ÉLEVÉE Terminaux, OS* et navigateurs : la problématique se déplace des terminaux vers les OS Terminaux du mieux! *OS = operating system i.e. système d exploitation La montée en puissance d Android ainsi que l accord Nokia/Microsoft ont permis de réduire le nombre d OS majeurs présents sur le marché grand public Là où il fallait parfois viser une multitude de terminaux, on peut aujourd hui par exemple considérer qu une application développée pour Android 2.1 fonctionnera sur tout appareil qui tourne sous Android 2.1 Problématique modèle et marque Problématique OS et navigateur Pour autant les OS et navigateurs sont toujours trop hétérogènes: Le nombre de ces OS majeurs bougent encore, de nombreux projets sont annoncés ou ont été lancés (ex: TIZEN, BADA). Par ailleurs les OS eux mêmes évoluent très fréquemment, et les mises à jour des utilisateurs ne sont pas toujours automatiques Chaque OS utilise son propre navigateur Web: Tous sont sensés afficher du web «universel» mais dès que l on touche aux spécificités mobiles ou tactiles, il n y a plus de standard On se retrouve parfois à l époque de Netscape où il fallait adapter ses pages à chaque navigateur, les tester et optimiser à chaque évolution Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 13

14 FRAGMENTATION TOUJOURS ÉLEVÉE France Des parts de marché variables qui imposent de viser large Les parts de marché des OS mobiles vont rester instables: Le parc augmente vite (13 millions de smartphones vendus en 2012), et la concurrence est telle qu il est difficile d anticiper vers quel OS les utilisateurs vont se porter Malgré leur prix et la baisse globale du niveau de subventions des opérateurs (notamment Free), le rythme de renouvellement reste rapide L OS n est pas ou plus un critère d achat (excepté pour une part de «Fans» d Apple) 100% Parc France - Estimations Smile basées sur ComScore, GfK, IPSOS 80% Autres (dont Bada) 60% Windows 40% 20% Blackberry Symbian Android? 0% Q Q Q Q Q Q ios Les chiffres communiqués publiquement sont très variables selon le fait qu il s agisse de parts d audience, de sondages déclaratifs, de chiffres de ventes ou de base installée. Ici, nous avons tenté de synthétiser l ensemble pour donner une vision du parc des terminaux en circulation. Aujourd hui, viser Symbian n est plus prioritaire (l OS n étant plus soutenu) et la question se pose pour BlackBerry en perte de vitesse. Sauf exception, nous conseillons généralement de cibler ios, Android et Windows Phone (sans forcément respecter les principes ergonomiques très spécifiques de ce dernier). Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 14

15 1. Paysage actuel Synthèse

16 SYNTHÈSE Vos clients et utilisateurs vous attendent déjà Le mobile (web mobile et applis) est un canal privilégié 24h/24h près de soi 17h/24h allumé Plus personnel et précieux qu un porte-monnaie Connecté en continu et utilisé n importe où et n importe quand largement adopté 20 millions d utilisateurs actifs en France dont 35 à 50% de quotidiens et spécifique Répondant à des besoins et usages différents du web classique Vos utilisateurs s attendent déjà à retrouver vos services et vos informations déclinés spécifiquement pour leur mobile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 16

17 SOMMAIRE 1. Paysage actuel 2. Démarche: pourquoi et quoi faire? 1. Définition des objectifs et stratégies 2. Site Mobile ou Application? 3. Une solution intermédiaire : la WebApp 3. Démarche: comment faire? 4. Le "cross-platform» 5. L approche de Smile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 17

18 2. Démarche: pourquoi et quoi faire? Définition des objectifs et stratégies

19 DÉFINITION DES OBJECTIFS ET STRATÉGIES Définition des objectifs business pour aller au delà d une simple «présence» Un investissement sur le mobile doit être traité comme un projet informatique et non plus comme un «budget de communication» (i.e. achat d espace publicitaire) Ses objectifs sont donc à définir en amont afin de permettre l élaboration d une réelle stratégie et d en mesurer le succès Des analyses de cas montrent que de nombreux objectifs peuvent être adressés par le mobile: Acquérir des clients Vendre d avantage, plus cher ou à moindre coût Générer du trafic (purs players) Fidéliser ses clients Réduire ses coûts Créer, renforcer, modifier son image Jouer son rôle sociétal (institutions, associations) Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 19

20 DÉFINITION DES OBJECTIFS ET STRATÉGIES Définition d une stratégie Pensons «situation d usage» Une fois le ou les objectifs définis, la stratégie à adopter peut être définie en suivant les trois étapes suivantes La cible : Mes clients? Ceux des concurrents? Les visiteurs de mes points de ventes? Les internautes? Les mobinautes? Ses besoins : De quoi mon client / prospect a-t-il besoin sur son mobile? Comment va-t-il exprimer ce besoin? Sa situation d usage: Quand a-t-il une attente? Chez lui depuis son canapé? Dans la rue? Dans le métro? Son besoin est-il urgent? Contextualisé? Fréquent? Comment va-t-il me chercher ou me trouver? Google? App Store? Vous avez tous un smartphone, vous téléchargez des applications et naviguez sur Internet avec, mettez vous à la place de vos utilisateurs Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 20

21 DÉFINITION DES OBJECTIFS ET STRATÉGIES Cas d entreprise : BNP Un dispositif complet et segmenté BNP propose diverses applications ayant chacune une cible, un objectif et un contenu dédié : BNP «Mes comptes» : Objectifs: fidélisation, accroissement de l autonomie, communication sur produits et upselling sur clients grand public Cible: principalement les clients particuliers BNP, mais certaines fonctions sont ouvertes à tous Contenu: accès à ses comptes, virements pour tous: simulateur de prêts/épargne, numéros utiles BNP «Les Bons comptes» : Objectifs: image et communication sur la marque Cible: principalement jeune / dynamique («WE entre amis») Contenu: outil de calcul de remboursement pour événement ponctuel entre amis Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 21

22 DÉFINITION DES OBJECTIFS ET STRATÉGIES Cas d entreprise : E. Leclerc - Qui est le moins cher? Une application marketing E. Leclerc propose une application «marketing» basée sur une promesse très «grande distrib»: Objectifs: communication, et prise de position sur les terminaux des consommateurs «Nous sommes les moins chers et allons le prouver» Dispositif: une campagne de pub associée au lancement de l application L application devient le support de communication et la justification du message Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 22

23 DÉFINITION DES OBJECTIFS ET STRATÉGIES Cas d entreprise : VEOLIA L'eau chez vous : entre le marketing, le service et la rationalisation des contacts Une application avec plusieurs objectifs, et plusieurs cibles Objectifs initiaux: Information, communication, fidélisation: Cible client connu: relevé, visualisation facture, paiement Cible client inconnu ou prospect: qualité, prix et travaux en cours Objectif secondaire de potentielle réduction de coûts: une part importante des appels au call center effectuée pour un relevé d index ou paiement ainsi évitée 23 Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 23

24 2. Démarche: pourquoi et quoi faire? Site Mobile ou Application?

25 SITE MOBILE OU APPLICATION? Site mobile Application «native» Comment les utilisateurs vous trouvent Navigateur + Moteur = = Logique d annuaire Stores Logique de rayons Enjeux SEO Site Web / URL connue Réponse rapide Tops! Cohérence Classification Notoriété marque Comment ils reviennent sur votre «service» Icône Favoris ou raccourci (icône standard ou personnalisée) Les fonctions Web, contenus, transactions, paiement par CB, géoloc, interface tactile (partiele), en partie mode déconnecté (HTML5) Idem + Look & feel premium, paiement in-app., accéléromètre, contacts, vibreur, caméra, flash, d avantage de puissance, mode full déconnecté, full tactile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 25

26 SITE MOBILE OU APPLICATION? A adapter selon les usages e-commerce «besoin d info» contextualisées réseaux sociaux Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 26

27 SITE MOBILE OU APPLICATION? Idéalement les deux! Un exemple : «Paris Bouge» qui propose une version mobile de son site et une application Site mobile Installation application Application Le site mobile fournit les informations ET invite à télécharger l application via un lien vers le store (ici exemple Android) Un utilisateur à la recherche d une information urgente ira plus naturellement sur Internet pour effectuer une recherche (exemple ici: «Meilleurs bars Paris») que sur un store pour rechercher une application. Mais un utilisateur habitué au site web de Paris Bouge, pourra avoir le réflexe d aller rechercher le nom sur les stores. Le dispositif est donc double, pour cibler à la fois les «prospects» et les «fidèles». Objectif: conquête Adresser une demande précise et urgente Objectif: fidélisation Simplifier la vie et offrir le service dans les meilleures conditions Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 27

28 2. Démarche: pourquoi et quoi faire? Une solution intermédiaire : la WebApp

29 UNE SOLUTION INTERMÉDIAIRE : LA WEBAPP Présentation de la WebApp Une webapp est une application web: Accessible via une url et installée presque automatiquement Consultable par smartphone, tablette, PC Evolutive sans mise à jour à effectuer via les store Elle est adaptée aux écrans mobiles Construite en une seule page: Afin de concentrer le temps de chargement au départ Et d offrir des transitions rapides sans chargement lorsque l utilisateur change d écran Fonctionne hors connexion sur la base des données stockées localement App «capable» (mise en marque page) Icône d application Mode plein écran Des balises audios, videos et autres nouveautés Exemple: Ce site (qui est aussi une webapp) est un équivalent de store pour installer via le navigateur des webapp HTML5 Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 29

30 SYNTHÈSE DES TROIS APPROCHES L approche sélectionnée devra avant tout répondre au besoin identifié Application WebApp (HTML5) WebMobile + Visible sur les stores Mode déconnecté Fonctions natives Accessible via l URL actuelle Mode déconnecté une fois installée Flexible Accessible via l URL actuelle Flexible Plus économique - Installation Gestion des différents OS Evolution via mise à jour Nécessite terminaux récents Fonctions limitées (pas d accès aux fonctions natives du terminal) Connexion indispensable (3G/Wifi) Fonctions limitées (pas d accès aux fonctions natives du terminal) Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 30

31 SYNTHÈSE DES TROIS APPROCHES Possibilités fonctionnelles et techniques Appareil photo numérique, gyroscope, carnet de contacts, calendrier, vibreur, compas, état du réseau, push de notifications Applications Webapp HTML5 Web Mobile Oui Non Non Géolocalisation Oui Oui Oui Fonctionnement hors connexion Oui Oui Non Stockage de grande quantités de données (système de fichiers) Oui Non Non Accès aux applications natives (liées à l'os comme par exemple la galerie de photo sur iphone) Oui Non Non Interfaces natives (boutons, listes, etc ) Oui Oui Oui Performances et fluidité (dignes d un jeu par exemple) Oui Non Non Animations, gaphismes avancés Oui Oui Oui Vidéo, son, images Oui Oui Oui Accès via URL Non Oui Oui Accès via stores Oui Non Non Chargment en une seule fois Oui Oui Non Mise à jours type web Non Oui Oui Mise à jour via les stores Oui Non Non Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 31

32 SOMMAIRE 1. Paysage actuel 2. Démarche: pourquoi et quoi faire? 3. Démarche: comment faire? 1. Conception fonctionnelle, ergonomique et graphique 2. Focus sur la conception fonctionnelle 3. Focus sur la conception ergonomique 4. Site mobile 5. Zoom sur le responsive design 6. Applications 7. WebApp 4. Le "cross-platform» 5. L approche de Smile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 32

33 3. Démarche: comment faire? Conception fonctionnelle, ergonomique et graphique

34 CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE Trois approches Démarche projet Application WebApp (HTML5) Site Mobile Conception Fonctionnelle Ergonomique Graphique Etapes clés du projet Création des écrans Développements spécifiques «mobiles» (potentiellement en cross-platform) Intégration des webservices Création des écrans Développements spécifiques «mobiles» Intégration au back office de gestion de contenus Création des écrans Intégration au back office de gestion de contenus Paramétrage du back office et déploiement Packaging, et adaptation aux OS Paramétrage du back office et déploiement Distribution sur les stores Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 34

35 CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE Prendre le sujet dans le bon sens Objectif Design Ergonomie Au service de l ergonomie et des usages - Rendre l ergonomie lisible - Donner envie d utiliser l application Au service des contenus - Augmenter l utilisation - Rendre intuitif, simple, efficace l accès aux services et informations prioritaires Contenu Au service des usages et des objectifs du projet Exemple: Contre-exemple: La manette de Playstation 3 est belle, mais est avant tout conçue pour une prise en main parfaitement adaptée à un usage continu pendant plusieurs heures sans douleur aux doigts Ces deux sites mobiles proposent d effectuer un drag n drop pour pouvoir accéder à une rubrique un simple tap/clic aurait été plus efficace, logique et ergonomique Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 35

36 3. Démarche: comment faire? Focus sur la conception fonctionnelle

37 FOCUS SUR LA CONCEPTION FONCTIONNELLE Typologie des usages en mobilité Le choix des informations et fonctionnalités à mettre à disposition de l utilisateur de smartphone est à déterminer en fonction de ses besoins. Ceux-ci sont pourront être catégorisés en 3 à 4 grands groupes, en répondant à la question: Pourquoi, quand, où et comment un utilisateur a-t-il besoin d accéder à mon site / service? La typologie de Google «Urgent now», «repetitive now», «bored now» Que Luke Wroblewski (auteur de «Mobile first» chez Eyrolles) reprend en : Consulter / Rechercher : «J ai besoin d une réponse maintenant - et ici» Exemple: Où est ce restaurant? A quelle heure est la séance? Enjeu : proposer des modalités de recherche rapide Explorer / Jouer «J ai du temps et je m occupe / je m amuse» Exemple : Y a-t-il de nouvelles images du robot de la NASA? Enjeu : Être ludique / proposer des poursuites de lecture Vérifier / Checker «Un contenu est continuellement actualisé et je veux être tenu au courant des changements» Exemple : Roger Federrer est-il en train de gagner son match? Enjeu : alerter, montrer les contenus chauds tout de suite Editer / Créer «Je dois faire quelque chose qui ne peut pas attendre» Exemple : J ai oublié de réserver ma place de concert! Enjeu : faciliter la saisie, les choix (formulaires) Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 37

38 FOCUS SUR LA CONCEPTION FONCTIONNELLE Exemple de site mobile dédié : Krys Des fonctionnalités clés Le site web de Krys est très riche et présente notamment les collections. Lors de la conception du site mobile, seules trois rubriques ont été mises en avant, mais celle-ci répondent précisément à des besoins en situation de mobilité: - Mes commandes Suivre ses commandes: «Je ne suis pas loin de la boutique Krys, je vais vérifier si mes lunettes sont arrivées avant de m y rendre» -Informations Informations pratiques: «Mon fils vient de casser ses lunettes, étaient-elles garanties?» - Trouver un magasin Store Locator: «En vacances, où est le magasin le plus proche dans lequel Krys me réparera ma monture» Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 38

39 3. Démarche: comment faire? Focus sur la conception ergonomique

40 FOCUS SUR LA CONCEPTION ERGONOMIQUE A garder en tête «L utilisateur de smartphone est un pouce et un œil» Bruits, mouvements, ensoleillement l utilisateur en mobilité est souvent dérangé et ne dispose pas toujours de sa totale liberté de mouvement (paradigme de la double tache) DIFFICILE ACCEPTABLE FACILE Facilités d accès aux zones de l écran avec un smartphone tenu de la main droite en position portrait : Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 40

41 FOCUS SUR LA CONCEPTION ERGONOMIQUE Privilégier le contenu aux liens 1/3 Les liens prennent trop de place. Laissez d abord vos utilisateurs lire, regarder, écouter. Ils approfondiront s ils le souhaitent. Pousser immédiatement les contenus chauds, et laisser les liens et options de navigation accessibles à la demande Ne pas obliger l utilisateur à passer par un écran intermédiaire Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 41

42 FOCUS SUR LA CONCEPTION ERGONOMIQUE Privilégier le contenu aux liens 2/3 Evitez les barres de navigation sandwich car elles occupent un espace de visibilité précieux sans que leur utilité soit garantie Un accès à l ensemble des catégories / rubriques depuis toutes les pages n est pas utile Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 42

43 FOCUS SUR LA CONCEPTION ERGONOMIQUE Privilégier le contenu aux liens 3/3 Facilitez les poursuites de lecture là où elles sont pertinentes (dans leur contexte), via des liens intelligemment placés après le contenu Laisser toujours le choix à l utilisateur de poursuivre ou d interrompre sa lecture Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 43

44 FOCUS SUR LA CONCEPTION ERGONOMIQUE Concevoir une charte de navigation simple 1/4 Les utilisateurs sur mobile sont peu conciliants, pressés, et attendent une navigation facile à appréhender en situation de double tache. Brancher les liens sur les contenus pour économiser de l espace et associer sémantique et navigation. Attention toutefois à ne pas en faire trop en branchant un lien sur de (trop) gros blocs de texte. OUI NON Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 44

45 FOCUS SUR LA CONCEPTION ERGONOMIQUE Concevoir une charte de navigation simple 2/4 Le bouton «Retour» (back de l historique) est inutile sur les terminaux autres que ios, en revanche, le bouton de retour à la page mère est pertinent (en indiquant quelle est cette page) (Sur ios, un bouton est disponible au niveau de la barre d adresse du navigateur Safari, et donc également inutile sur les sites web-mobile) NON OUI Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 45

46 FOCUS SUR LA CONCEPTION ERGONOMIQUE Concevoir une charte de navigation simple 3/4 Cacher le menu de navigation afin qu il soit accessible à tout moment, sans pour autant occuper continuellement l espace Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 46

47 FOCUS SUR LA CONCEPTION ERGONOMIQUE Concevoir une charte de navigation simple 4/4 Utiliser la barre fixe dans le cas d applications : En haut (Android) qui a déjà des boutons natifs en bas Ou en bas (iphone) Même si cette règle n est pas universelle, il faut garder en tête ces potentiels réflexes d utilisation Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 47

48 FOCUS SUR LA CONCEPTION ERGONOMIQUE Assurer la lisibilité Rendre les textes lisibles avec des tailles de caractères suffisamment grandes Proposer des zones actives de taille suffisante pour un pouce d homme adulte Adopter une organisation unitaire en ligne par ligne afin que la lecture et la manipulation soit simple et ne conduise pas l utilisateur à commettre des erreurs de «tap» Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 48

49 FOCUS SUR LA CONCEPTION ERGONOMIQUE Tactile - Choisir les bons gestes Les smartphones sont caractérisés par leurs interfaces tactiles. Cette manière d interagir est certes très intuitive, mais elle reste nouvelle pour le grand public. De nombreux types de gestes existent et peuvent encore être inventés ; mais l ergonomie ayant pour vocation de simplifier et fluidifier l usage, il faut les utiliser à bon escient. Les utilisateurs d aujourd hui ne connaissent pas encore toutes les subtilités possibles et aucune norme universelle ne s est encore installée comme par exemple: - Le clic droit de la souris pour accéder à des options avancées - La croix qui indique la fonction de fermeture d une fenêtre Ainsi, dans la liste des principaux gestes ci-dessous (issue de «Touch Gesture Reference Guide» nous conseillons de n utiliser que ceux encadrés : Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 49

50 FOCUS SUR LA CONCEPTION ERGONOMIQUE Tactile - comment utiliser les gestes Même parmi les gestes simples, certains ne sont pas totalement intuitifs, il faudra les rendre lisibles C est pourquoi nous avons encore besoin de boutons affichés dans l écran et explicitement visibles pour les utilisateurs Mais cela ne doit pas nous empêcher d utiliser les gestes pour l activation de raccourcis ou d actions avancées pour un usage expert, en doublon des boutons disponibles à l écran Les gestes avancés deviennent donc des raccourcis au même titre que les raccourcis claviers ont envahis nos applications de bureautique Exemple: Sur l application mobile de Facebook, la seule manière de supprimer un «statut» est actuellement d effectuer un Flick sur son statut. Peu d utilisateur le savent, ce geste n étant pas universellement associé à cette fonction ( Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation 50