Ergonomie pour applications smartphones

GL40 - Interface Homme/Machine et perception Université de Technologie de Belfort-Montbéliard Ergonomie pour applications smartphones Pierre-Jean Hückel et Benjamin Marconnet Printemps 2013

Table des matières 1 L interface mobile 4 1.1 Des interfaces avant tout.......................... 4 1.2 Caractéristiques d une application smartphone.............. 5 2 Principes et conseils d ergonomie mobile 9 2.1 Systèmes d exploitation mobile actuels.................. 9 2.2 Android................................... 9 2.3 ios...................................... 14 2.4 Windows Phone 8.............................. 18 3 Exemples de bonnes pratiques 22 3.1 Android................................... 22 3.2 ios...................................... 24 3.3 Windows Phone 8.............................. 28 4 Mise en place sur une application existante 30 4.1 Présentation de l application........................ 30 4.2 Évolution de l application Android.................... 30 4.3 Application Windows Phone 8....................... 34 5 Conclusion 36 2

Introduction Dans le cadre du projet de l UV GL40 «Interface Homme/Machine et perception», nous souhaitons nous intéresser à l ergonomie des applications mobiles. La façon d utiliser et les contraintes étant différentes d un logiciel «bureau» (écrans plus petits, manipulation au touché), nous trouvons intéressant de chercher à savoir ce qui différencie une bonne interface d une mauvaise et quelles sont donc les bonnes pratiques à adopter lors du développement d application mobile. Nous nous appuierons pour cela sur des exemples d applications existantes, sur les conseils donnés par les sociétés responsables des systèmes d exploitation mobile et sur des documents spécialisés dans le domaine. Nous tenterons aussi d appliquer les bonnes pratiques apprises sur nos propres applications mobiles, qui fonctionnent mais dont le design et l ergonomie n ont pas encore été étudiés et mis en place. 3

Chapitre 1 L interface mobile Les interactions homme-machine classiques, sur logiciel ou site internet, ont été bouleversées par l arrivée ces dernières années des interfaces mobiles. Elles se retrouvent aussi bien sur smartphones que sur tablettes, qui sont de plus en plus présents (en 2012, croissance de 45% pour les smartphones 1 et de 50% pour les tablettes 2 ), contrairement aux PC qui tendent à diminuer 3. Le cabinet IDC, spécialisé dans les technologies informatiques, estime même que la vente de tablette va suppléer la vente des PC bureau en 2013, puis des PC portables en 2014 4. 1.1 Des interfaces avant tout Cependant, l un des buts principaux de l IHM n a pas changé et reste le même : réaliser une application utile et utilisable. Comme l a défini Michel Beaudouin-Lafon dans Enjeux et perspectives en interaction homme-machine, pour être utile, elle doit répondre à un besoin (et donc servir à quelque chose) et pour être utilisable, elle doit être adapté aux capacités perceptives, motrices et cognitives de l utilisateur. Ainsi, les grands principes de l IHM restent valables : loi de Fitts : permet de prédire le temps requis pour qu une personne pointe un élément de l écran (concrètement, plus une cible est grande et proche, plus elle sera facile à atteindre) ; les personas : représentation d un utilisateur fictif et de ses besoins, pour se donner une ligne à suivre lors du développement ; loi de proximité : le fait que des éléments soient placés côte à côte implique que ceux-ci sont conceptuellement proches ; loi de similarité : une même couleur, forme ou comportement tend à rapprocher des éléments. 1. sur www.boursier.com ; article complet : bit.ly/zlijya 2. sur www.cnetfrance.fr ; article complet : bit.ly/soxyxs 3. sur www.latribune.fr ; article complet : bit.ly/16ouiyh 4. sur www.latribune.fr ; article complet : bit.ly/xddc0x 4

1.2 Caractéristiques d une application smartphone 1.2.1 Taille de l écran Parmi les contraintes d une application mobile par rapport à un logiciel bureau, on peut retrouver tout d abord un écran de plus petite taille. Même si les constructeurs de smartphones mettent sur le marché des téléphones de plus en plus gros, la «taille idéale» selon Jim Wicks 5, directeur du design de Motorola, serait d environ 4.5 pouces (11.43 centimètres) de diagonale alors qu il est est de plus en courant de trouver des écrans supérieurs à 19 pouces (soit quasiment 50 centimètres) sur bureau. Comme sur logiciel bureau, un écran mobile possède des zones qui sont plus visibles et plus accessibles que d autres. Il est alors intéressant de placer les éléments interactifs dans les zones qui sont accessibles facilement, tout en gardant les boutons «dangereux» (tel que la suppression) à des endroits moins accessibles, pour éviter les erreurs. On privilégiera aussi les textes dans les zones les plus visibles, qui ne seront pas recouvertes par la main. Plus une zone est foncée, plus elle sera facilement atteignable Enfin, concernant les zones de sélection (case à cocher par exemple), il est important que celles-ci soient plus grosse que sur logiciel bureau : toucher un élément est moins précis que de le sélectionner à la souris. 5. sur www.pcinpact.com ; article complet : bit.ly/zzlnek 5

Application Google Talk sur Android, montrant l évolution de la zone du bouton «retour». Sur le système mobile Android, les développeurs ont ainsi choisi dans leur dernière version de ne pas limiter le bouton «retour» à un simple élément, mais à transformer toute la zone en bouton : ici, un appui sur le nom du contact active l action de retour. L affordance, la capacité d un objet à suggérer sa propre utilisation, est évidemment essentielle, du fait de l absence d infobulles (renseignement sur un élément lors de son survol avec la souris) sur mobile. L espace entre les différents éléments doit aussi être assez important pour éviter les erreurs de sélection. Application Dropbox sur Android. Il est possible de distinguer sur la capture d écran facilement les boutons et leurs actions (un texte est même là «en renfort»). L espace entre chaque élément est aussi notable, limitant ainsi les erreurs. 6

Enfin, une taille d écran limitée implique une recherche pour gagner de la place. Par exemple, il peut être intéressant de modifier l organisation et la structure d un formulaire : présentation des éléments de façon vertical systématiquement ; description des champs dans les champs eux-mêmes ; 1.2.2 Application «mobile» Formulaire d ajout de contact sur Android. Comme son nom l indique, une application mobile, contrairement à un logiciel bureau, doit pouvoir être utilisée partout et à tout moment : assis tranquillement chez soi, dans une file d attente, dans les transports en commun, etc. Cette notion de mobilité implique qu un utilisateur ne peut pas donner toute son attention à l application et qu il ne pourra pas interférer totalement avec l interface. Dans son livre «Mobile First», Luke Wroblewski, qui travaille dans le design d application, a fait le choix de définir l utilisateur mobile en le résumant à deux aspects : un seul œil, l utilisateur ne pouvant donner qu une partie de son attention ; un doigt, l utilisateur tenant son téléphone d une seul main et appuyant sur les éléments de l interface avec un seul doigt. 7

Josh Clark entre plus en profondeur dans les types de comportements que peut avoir un utilisateur mobile dans son guide «Tapworthy - Designing Great iphone Apps». Il a ainsi mis en exergue trois types d usage : «je cherche une information et j en ai besoin maintenant», dont un exemple pourrait être une application indiquant la poste la plus proche ; «je cherche à être à jour, à faire quelque chose tout de suite», avec les réseaux sociaux par exemple ; «je souhaite tuer le temps», où l on retrouve la possibilité d une lecture plus approfondie, les jeux vidéos, etc. L application doit être conçue différemment en fonction de ces usages. Une application où l on souhaite une information rapidement doit être simple d utilisation et un outil de recherche doit être présent. Au contraire, une application prise en main par un utilisateur qui s ennuie et qui n a rien d autre à faire peut offrir davantage de contenu et de possibilités. 1.2.3 Utilisation avec des gestes L utilisation d une application mobile se fait via des mouvements de doigts spéciaux, des gestes, et non plus avec des clics. L action causée par ces gestes dépend de chaque système. Geste Tap Drag Swipe Double Tap Pinch Touch and hold Shake Description sélection d un élément appuyer sur un élément et, tout en restant appuyer, le déplacer «balayer» l écran actuel vers un des cotés appuyer deux fois rapidement sur un élément appuyer avec deux doigts, puis les éloigner l un de l autre appuyer et rester sur un élément secouer l appareil Par exemple, sur Android, un drag permettra de trier une liste, un swype changera la page d un livre, un pinch permettra de zoomer sur une photo, un touch and hold donnera la possibilité de modifier ou de supprimer un contact dans le répertoire et un shake peut servir à passer à la musique suivante dans le lecteur audio. 1.2.4 Contraintes techniques Il ne faut pas oublier que sur smartphones, la connexion à Internet sera moins fiable que sur un poste bureau : prévoir un mode «hors-ligne» dans une application sensée être constamment connectée est une chose très importante. Enfin, la puissance requise pour faire tourner l application, même si les smartphones sont de plus en plus performants, doit aussi être surveillée. 8

Chapitre 2 Principes et conseils d ergonomie mobile 2.1 Systèmes d exploitation mobile actuels Notre étude s est portée sur les trois systèmes d exploitation mobile smartphones les plus importants. Nous parlerons ainsi : d Android (Google) ; d ios (Apple) ; de Windows Phone 8 (Microsoft). Chacun des systèmes à ses particularités (ios est utilisable seulement sur les produits Apple, alors que de nombreux constructeurs utilise Android comme système). 2.2 Android Sur son site Internet dédié à l ergonomie d application mobile Android Design 1, l équipe de développement a mis à disposition de nombreux principes et guides à respecter lors de la création d une application. 1. developer.android.com 9

2.2.1 Organisation de l interface Application Gmail Selon le guide, une application Android typique doit être organisé de la sorte : 1. une barre d actions principales, en haut, qui comporte les éléments pour naviguer (changer de vue, retour arrière, etc.) et quelques actions importantes ; 2. un contrôleur de vue, permettant de changer l arrangement ou l affichage de nouvelles données ; 3. une zone de donnée, où le contenu est affiché ; 4. une barre d actions secondaires, en bas de l écran, pour placer des actions qui ne sont pas assez importantes pour être dans la barre principale. 2.2.2 Design Principles Parmi les design principles, on retrouve : la manipulation des éléments est plus agréable que d appuyer sur des boutons et naviguer dans des menus. Un exemple peut être l utilisation d un swype pour mettre un élément de coté : 10

Application Google Now sur Android. En appuyant sur un élément et en le glissant sur la droite, on peut le «mettre de coté». donner la possibilité de s approprier l application. Le site explique que les gens aiment ajouter leur touche personnelle parce que cela aide à se sentir au contrôle de l application. Ainsi, sans négliger la configuration par défaut, permettre une personnalisation optionnelle de certains éléments est une bonne chose ; les images sont plus rapides à comprendre que les mots. Ce principe est bien connu de l IHM et on le retrouve sur bureau avec les icônes. Application contenant les contacts, où les photos sont mises en avant. ne montrer que ce dont l utilisateur a besoin. Sur mobile, il est important de diviser une tâche en plusieurs étapes et de ne montrer que ce qui est réellement nécessaire. 11

Application Google Play, où seulement la fonction recherche est disponible directement. Le reste des actions est «cachée» dans un menu. si cela se ressemble, la fonction doit être la même. La consistance est un élément très important du design et aide l utilisation de l application. Le bouton «retour», qui a été mis en avant dans la partie précédente, se trouve toujours en haut à gauche de l interface. faire en sorte que les actions importantes soient faisables rapidement. Tous les actions ne sont pas égales, et il est important de déterminer et de rendre disponible facilement celles qui sont essentielles Appareil photo sur Android, où le bouton pour prendre la photo est séparé du reste des éléments. 2.2.3 «Style» de l application Pour maintenir une idée de consistance dans les applications, les responsables du design Android ont mis en avant leur mécanisme de «thèmes». Ceux-ci déterminent les éléments et leurs positions sur l écran, les couleurs et la police à utiliser, etc. 12

Applications Gmail, Paramètres et Gtalk, montrant les trois thèmes de base. Plusieurs thèmes sont proposés aux développeurs. La possibilité de modifier ces styles est tout de même possible, et nous verrons dans le chapitre suivant que de nombreuses applications les ont personnalisé et appliqué avec talent. 2.2.4 Couleurs Les couleurs, indique le guide, doivent être utiliser pour mettre en valeur des éléments. Elles doivent être choisies pour être cohérente avec des produits déjà existants (dans le cas d une application mobile pour une marque par exemple). Il est aussi rappelé que le rouge et le vert peuvent être impossible à distinguer, en cas de daltonisme. Toujours dans un soucis de consistance, une palette de couleur, que les développeurs Android utilisent dans leurs propres applications, est proposée. Palette des couleurs utilisées 13

2.2.5 Style d écriture Comme nous l avons vu, une surface d écran plus petite implique de réduire la taille des phrases dans une application. Le guide de design Android va dans ce sens et donne de nombreux autres conseils : rester simple et bref, être «friendly», mettre les choses les plus importantes en premier et ne parler que de ce qui est nécessaire. Avant Consultez la documentation fournie avec votre téléphone pour plus de renseignements Utilisation des satellites GPS Location précise au niveau de la rue Désolé! MyAppActivity (dans l application Météo) ne répond pas Connexion... Votre téléphone a besoin de communiquer avec les serveurs de Google pour se connecter à votre compte. Cela peut prendre jusqu à cinq minutes. Après Lisez les instructions données avec votre téléphone GPS Permettre aux applications de connaitre votre location Météo a un problème Voulez-vous fermer l application? Connexion... Vote téléphone contacte Google. Cela peut prendre cinq minutes. 2.3 ios Dans l ios Human Interface Guidelines 2, les développeurs Apple décrivent leurs visions des bonnes pratiques à adopter lors du design d application pour iphone. Un grand nombre d entre elles ressemblent à celle déjà énoncées pour Android : se concentrer sur la tâche principale, ne pas ajouter de fonctions non nécessaires sur l interface et mettre en avant le contenu que l utilisateur a besoin ; privilégier le haut de l interface ; utiliser des termes «utilisateurs» (éviter le langage technique) ; cohérence avec le reste des applications via un «thème», même si la personnalisation est encouragée ; consistance des boutons dans l application, qu ils soient facilement cliquables, en leur donnant une taille assez importante. Apple souhaite en plus qu une application permettre un partage facile des données (locations, opinions, scores dans un jeux, etc.) et qu il y ait un champ pour effectuer une recherche lorsque l écran contient une liste. 2. apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/ Introduction/Introduction.html 14

2.3.1 Organisation de l interface Application Mail Une application ios doit être organisé de la façon suivante : 1. une barre de navigation, qui apparait en haut de l écran. Elle est composée du titre de la page courante et de boutons permettant de se déplacer dans l application. 2. du contenu ; 3. d une barre d outils, en bas de l écran, contenant des contrôles relatifs au contenu (ici recharger la page, archiver le mail, le supprimer, etc.). 2.3.2 Skeuomorphism design Le skeuomorphisme, principe utilisé par Apple pour ios, définit un «élément de design dont la forme n est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l objet d origine» 3. Concrètement, en utilisant ce type de design, on privilégiera une interface qui ressemble aux objets réels. 3. Définition par fr.wiktionary.com 15

Application BubbleLevel Le guide de design ios explique que plus l application ressemble à un objet existant, plus il sera facile à utiliser. Dans cet exemple qui représente un outil de charpentier, l application aurait pu afficher les informations en texte brut, mais cela l aurait rendu beaucoup moins familière. En voyant la bulle, l utilisateur va intuitivement savoir que si elle se trouve entre les deux traits, la surface est plate. Application Voice Memos Même idée pour l application servant à enregistrer des sons : l utilisateur voit un micro et sait immédiatement de quoi il s agit. Le guide propose d ailleurs de mimer de vrais matériaux, tel que le bois ou le cuir, pour certaines applications. 16

Application Notes L application Notes pour ipad est ainsi composée d une «couverture» en cuir, avec coutures apparentes, et d un bloc note où le titre est écrit sur une bordure en liège et où il est possible de voir les «restes» d anciennes pages déchirées. Les boutons sont dessinés en bas de la page et la note courante est entourée «non-parfaitement», comme si on l avait fait au stylo. Le «skeuomorphisme auditif» existe aussi, l exemple le plus courant est le son d un obturateur ajouté aux applications prenant des photos. Ce bruit, normalement mécanique, provient là d un fichier son sur l appareil. Ce type de design particulier, malgré des qualités telle que la facilité d utilisation, rencontre des détracteurs et il possible de trouver de nombreux arguments contre le skeuomorphisme : l utilisation de métaphores et la représentation d objets réels «gâche» de la place sur l écran, dont la taille est déjà limitée ; la perte d une cohérence avec le reste des applications ; l absence de précision, de réglages ; beaucoup d utilisateurs n ont jamais eu d expériences avec les objets représentés ; limitation de la créativité. 17

2.4 Windows Phone 8 Microsoft, pour son système mobile, liste ses principes d ergonomie sur le Windows Phone Dev Center 4. La philosophie de design est différente de ce que l on peut trouver sur Android ou ios, en se concentrant sur quelque chose de plus minimaliste. 2.4.1 Organisation de l interface Application Courriel Selon le site web, une application Windows Phone 8 typique est organisée de la sorte : 1. le «pivot», qui permet de changer la page de l application via un swype ; 2. le contenu de l application ; 3. la «barre d application», où il est possible d ajouter jusqu à quatre actions. Un menu peut-être présent, pour permettre de stocker d autres fonctions. 4. developer.windowsphone.com 18

2.4.2 Panorama «L expérience panoramique», comme décrite par le site, fait parti du look and feel de Windows Phone 8, et les développeurs sont donc encouragés à l utiliser. Application People C est «comme-ci» toute l application était affichée, mais avec seulement une partie visible à l écran. Un swipe (balayage de l écran actuel vers l un des cotés) est nécessaire pour voir le reste. 2.4.3 Thèmes Dans le même ordre d idée que sur Android et ios, il est possible de personnaliser son application Windows Phone avec des styles. 19

Deux couleurs sont configurables : la couleur de fond (ici blanche ou noire) et la couleur d accentuation (ici marron, cyan ou violet). Si aucun choix de couleur n est fait, ce sont celles choisies par l utilisateur qui sont utilisées, offrant ainsi une idée de personnalisation immédiate. Contrairement à Android ou ios, une personnalisation totale (des boutons, champs de texte, etc.) est moins encouragée, et il est conseillé de se limiter aux éléments fournis par le système. 2.4.4 Tuiles Enfin, il est important de faire mention à l écran d accueil de Windows Phone 8, particularité intéressante du système. 20

Celui-ci est composé de raccourci vers les applications, nommées «tuiles», qui bougent et changent très souvent. Par exemple, un raccourci vers la galerie parcourt la liste des photos et en choisit une pour l afficher en fond, l application Répertoire affiche des photos de contacts, etc. Le site web encourage ainsi à rendre ses applications (et donc ses tuiles) «vivantes». Ce design de tuiles, en grille, est aussi encouragé pour afficher des informations (principalement les images). Application Nokia Glam Me 21

Chapitre 3 Exemples de bonnes pratiques 3.1 Android Pour résumer le guide de développement pour Android, une application doit : offrir la possibilité de manipuler des éléments plutôt que d appuyer sur des boutons ; utiliser des images, qui sont plus rapides à comprendre que des mots ; ne montrer que ce qui est nécessaire à l écran ; permettre de faire les actions importantes rapidement. 3.1.1 FlightTrack À gauche, l écran de gestion des avions ; à droite, la carte. L application FlightTrack permet de suivre, en temps réel, les vols d avions sur une carte et de zoomer sur leurs itinéraires. Il est possible de voir pour tout les voyages leurs 22

horaires de départ, les retards (ou annulations) et les numéros de porte d embarquement. Pour chaque vol, les positions des avions et des aéroports sont affichées directement sur la carte (compréhension très facile donc, sans passer par des mots). Il est possible de zoomer sur cette carte (manipulation des éléments), qui est l élément le plus important de l écran. Les seules autres informations affichées sont une barre d action principale (personnalisée pour cet écran) et une barre indiquant la progression de l appareil. Enfin, il est possible de voir que sur l écran de gestion des avions, les actions possibles sont le rafraichissement des informations et l ajout d un nouveau voyage. 3.1.2 Feedly À gauche, un affichage de flux RSS ; à droite, la partie pour rechercher de nouveaux flux. Feedly est un lecteur de flux RSS pour Android. Les photos des articles sont mises en avant lors de la présentation de ceux-ci. Le même principe est utilisé pour montrer les différentes catégories lorsque l on recherche de nouveaux contenus. L action principale de l application, disponible rapidement dans la barre d action, est la recherche. Le reste (rafraichissement, suppression du flux, etc.) se trouve dans un sous-menu. 23

3.1.3 Real Colors À gauche, analyse d une photo ; à droite, affichage de son «spectre des couleurs». Real Colors est une application permettant, après analyse d une photo, de déterminer les couleurs qui lui seront complémentaires, analogues, etc. L application, bien que prenant le modèle offert par les développeurs Android, personnalise les éléments (un choix de couleur rouge à la place du bleu pour souligner les boutons). Les couleurs sont affichées de manières claires, un «bouton slide» (qui offre une liste d autre choix après appui) permet de changer l analyse directement. Un bouton dans la barre d action principale lance l appareil photo sans devoir quitter l application, pour faciliter et rendre plus rapide son utilisation. 3.2 ios Comme pour Android, petit rappel des pratiques encouragées par Apple pour le développement ios : se concentrer sur la tâche principale ; cohérence avec le reste des applications ou utilisation du skeuomorphism design ; éléments facilement sélectionnables ; possibilité de partage facile ; champ de recherche lorsque l écran contient une liste. 24

3.2.1 GarageBand En haut, l interface clavier ; en bas l interface ampli. GarageBand est une application qui «transforme» le smartphone en une collection d instruments de musique tactiles. Il est possible de jouer du piano, de l orgue, de la guitare, etc., qui sonnent comme leurs homologues réels, et il existe la possibilité de brancher une guitare électrique à l appareil, via un câble spécial, qui se comportera alors comme un ampli réglable. Ici, le skeuomorphism design est utilisé, on retrouve ainsi des «vrais» piano et ampli. Pour le piano, l alternance entre slow et fast se fait via un interrupteur, une lumière indique si le glissando est «en marche», etc. Même principe pour l ampli, où comme dans la vie réelle, les réglages se font en tournant des boutons. 25

3.2.2 Roland-Garros 2013 À gauche, écran de suivi des scores ; à droite une fiche de présentation d un joueur Roland-Garros 2013 permet, comme son nom l indique, de suivre le tournoi de tennis parisien. De nombreuses fonctionnalités sont proposées, dont la possibilité d avoir le résultats des matchs, de suivre les actualités du tournoi, le calendrier des rencontres, etc. Une fiche est disponible pour chaque joueur, renseignant ses informations et sa biographie. L application reprend une interface classique pour ios (barre de navigation, contenu et barre d outils), en apportant cependant certaines modifications de couleurs (le vert du tournoi remplace le gris par défaut). Pour l écran affichant les résultats en direct, l application se concentre sur un seul match et il est possible de partager à tout moment ce que l on voit avec un bouton «social» (en haut à droite). 26

3.2.3 Marmiton À gauche, la page d accueil ; à droite une fiche de cuisine Marmiton est un «assistant culinaire» pour smartphone. L application propose plus de 50 000 recettes, qu il est possible de classer par ingrédients, par prix, etc. Sur l écran d accueil, des photos sont utilisées pour montrer des recettes mises en avant chaque jour, et une recherche est facile à faire, puisqu un champ de recherche est disponible en haut de l interface. Sur chaque repas, la notion de social et de partage est bien présente (note de la communauté, mention «j aime», possibilité de partager des photos après avoir fait la recette, etc.). L aspect général de l application rappelle celle de base sur ios, cependant l équipe de développement a refait les boutons et la barre d outil a changé d aspect pour correspondre aux couleurs du site Internet 1. 1. marmiton.org 27

3.3 Windows Phone 8 Du coté de Windows Phone 8, les grands principes sont : utilisation d un panorama ou d une interface classique avec un «pivot» pour se déplacer ; mis à part dans le cas d une marque où une couleur lui est associée, utiliser les couleurs du système pour l application ; utilisation de raccourci «vivant» ; représentation des données en forme de «tuiles». 3.3.1 Orange Cineday Panorama : à gauche, les sorties ; au centre les salles de cinéma ; à droite les codes de l offre. L application Orange Cineday permet de profiter de l offre Orange «une place de cinéma acheté = une offerte», directement sur smartphones. Il est aussi possible de suivre l actualité cinéma (bandes-annonces, détails des films, etc.). L application utilise la notion de panorama de Windows Phone 8 (une seule partie visible, un balayage vers un coté pour voire le reste). Elle est personnalisée, avec un fond d écran pour le panorama qui met en avant les données. 28

3.3.2 Quoties À gauche, la page d accueil ; à droite le bureau, où il est possible de voir la tuile «vivante» Quoties est un «agrégateur de citations» venant de sites humoristiques français ou anglais. Plutôt que d utiliser une application différente pour chaque contenu, Quoties les regroupe en une seule. Ici, il est possible de voir que le «pivot», utilisé pour passer de pages en pages, a aussi servi à afficher le nombre de nouveautés. Les différentes contenus sont représentés dans des carrés. Ces carrés sont assombris lorsqu il n y a pas de nouveaux éléments, ou mis en avant par une «notification» lorsque de nouveaux contenus sont disponibles. Sur le bureau, le raccourci est une tuile «vivante», où l on peut voir directement, sans lancer l application, le nombre de nouveautés. 29

Chapitre 4 Mise en place sur une application existante Nous avons tenté, au fur et à mesure de l étude, d appliquer les bonnes pratiques apprises sur notre propre application mobile, qui fonctionne mais dont le design et l ergonomie n avaient pas encore été étudiés. 4.1 Présentation de l application L application, développée sur la dernière version Android, permet de créer différents types de «projets» : réaliser une tâche avant une date donnée, économiser de l argent pour un objet particulier, etc. Captures d écrans des différents écrans de l application, à sa création 4.2 Évolution de l application Android Pour personnaliser l application, en plus de l amélioration dans le placement et dans l affichage des éléments de l interface, la couleur bleue a été choisie. Le bleu cyan de 30

base d Android (qui se retrouve notamment dans la barre de notifications de l écran, sur la batterie par exemple) a servi de base, et des teintes plus foncées ont été utilisées. 4.2.1 Classement en catégories Le premier choix, pour améliorer l utilisation de l application, a été la séparation des différents projets en catégories : ceux qui ont une date de fin précise, ceux impliquant une notion d argent à économiser, et enfin une partie «divers» pour le reste. Au point de vue de l interface, cela à été fait grâce à un mécanisme de swype. Chaque catégorie a sa propre page, et un balayage vers la droite emmène vers la suivante. Mécanisme de swype représenté par la bande bleue, où il est possible de voir le titre de la catégorie courante en blanc. 4.2.2 Boutons dans la barre d action Les boutons permettant la création de nouveaux projets, leur modification ou leur suppression ont été ajoutés dans la barre d action principale de l interface : À gauche, l écran contenant les catégories ; à droite, un écran de projet (ici complètement vide). 1. bouton de création d un nouveau projet ; 2. sous-menus, qui une fois appuyé offre la possibilité d accéder à d autres actions telle que la sauvegarde ; 3. bouton de modification d un projet ; 4. bouton de suppression. 31

Autre amélioration, le processus de création de projet. Au départ, un appui sur le bouton «nouveau» amenait vers un écran de sélection du type de projet (durée, argent ou divers), puis à un formulaire pour compléter les informations. Désormais, un appui sur le bouton de création fait apparaitre une sorte de «pop-up» : Le type du projet est connu implicitement (en fonction de l écran dans lequel l utilisateur appui sur le bouton) et le formulaire prend en compte des contraintes d un petit écran (intitulés des champs directement dans les champs de saisie). 4.2.3 Affichage de la liste des projets Au départ, la liste de tous les projets ne contenait que leur titre. Nous avons vu que les projets sont maintenant séparés en catégories (argent, durée ou divers), avec une page pour chacune. 32

Dans l idée que «les images sont plus faciles à comprendre que les mots», une icône a été associée à chaque projet. Pour plus de simplicité, cette image est choisie en fonction du titre du projet (par exemple, si «courrier» ou «email» s y trouve, ce sera une enveloppe). L information importante du projet (ici la date de fin, pour un projet argent, c est la somme à économiser) est directement affichée, sans devoir aller dans les détails. 4.2.4 Détails d un projet De nombreuses informations ont du être représentées dans la partie «détails» des projets. La première étape a été le respect de la «loi de proximité», où les données qui ont un rapport entre elles doivent être regroupées. Le titre a été mis en avant, puis les informations par ordre d importance. Chaque groupe de données se trouve dans un rectangle blanc. Des sous-titres ont été ajoutés, pour une compréhension plus facile. Lorsqu il existe une notion de progression dans le projet, une barre de progression a été mise pour la représenter. Dans le cas d un projet argent, plutôt que de devoir aller modifier le projet tout entier, un champ et un bouton pour augmenter directement la somme économisée est présent. 4.2.5 Analyse et conclusion Pour reprendre le guide de développement Android Design, elle permet bien la manipulation des éléments directement (un appui long sur un des projets dans la liste 33

permet de le modifier ou de le supprimer). Des images identifient chacun des projets. Pour chaque écran, seulement ce qui est nécessaire est montré. Enfin, les actions importantes (création, modification et suppression) sont accessibles très rapidement. Désormais, l application «est au norme» et respecte les principes de design et d ergonomie Android. Avec de légers changements dans l organisation des données, un bon placement des éléments et un ajout d images, elle a ainsi gagné en facilité d utilisation. Une idée d amélioration pourrait être de donner la possibilité aux utilisateurs de s approprier l application, en proposant de choisir la couleur dominante (ici bleu). Il existe encore un peu de travail et quelques changements dans le code avant la publication sur le Google Play Store 1. 4.3 Application Windows Phone 8 L application a aussi été réalisé sous Windows Phone 8, en tentant de respecter les conseils d ergonomie données par les développeurs. Écrans d accueil, à gauche, la liste des projets «temps» ; à droite la liste de projet «argent» 1. marché d applications Android 34

Toutes les possibilités de l application Android sont reprises, mais sont implémentés à la façon Windows Phone 8. On retrouve ainsi un «pivot» pour passer d une catégorie de projet à une autre et une «barre d application» sur le bas de l interface, contenant le bouton pour créer un nouveau projet. À gauche, détail d un projet «temps» ; à droite un projet «argent» Les couleurs de l application (ici bleu et noir) changent en fonction de celles choisies par l utilisateur : il est donc tout à fait possible que l application soit en rouge et blanc sur un autre smartphone. 35

Chapitre 5 Conclusion Cette étude de l ergonomie sur smartphones nous a permis de découvrir que, comme sur logiciel «bureau», il existait des règles et des principes à respecter pour réaliser une interface fonctionnelle. Nous avons d ailleurs pu retrouver des théories déjà étudiées, telle que la loi de Fitts. Cependant, il est très important de prendre en compte la notion de mobilité liée à l usage d un smartphone, et le fait que l écran soit plus petit qu un écran classique, pour réaliser une interface. En reprenant les guides d ergonomies écrits par les responsables de systèmes d exploitation mobile, nous avons pu déterminer les bonnes pratiques à respecter lors du développement d applications : utilisation d images à la place de mots, n afficher que ce qui est important à l écran, cohérence avec le reste des applications en utilisant des thèmes pré-définis, etc. Des exemples ont permis de voir comment les développeurs, tout en utilisant ces consignes et en respectant les contraintes, ont tout de même pu réaliser de «bonnes» applications. Enfin, les nombreux principes appris au cours de l étude ont été appliqués sur nos propres applications smartphones, sur Android et Windows Phone 8. Nous avons ainsi pu voir qu en respectant de simples notions d ergonomie qu il était possible de rendre une application beaucoup plus facile à prendre en main, et donc plus agréable à utiliser. Pour conclure, cette étude était donc très intéressante à réaliser, puisqu en plus d avoir découvert les principes d ergonomie mobile, elle nous a servi et nous sera très utile pour nos futures projets. 36

Bibliographie et sources Livres Wroblewski, Luke. Mobile First, publié par Eyrolles, 2012. Clark, Josh. Tapworthy - Designing Great iphone Apps, publié par O Reilly Media, 2010. Études Beaudoin-Lafon, Michel. Enjeux et perspectives en interaction homme-machine, publié par l in situ de l Université Paris-Sud, 2008. Sites Internet Android Design Disponible sur developer.android.com. ios Humain Interface Design. Disponible sur developer.apple.com. Windows Phone Dev Center. Disponible sur developer.windowsphone.com. Android Niceties. Disponible sur androidniceties.tumblr.com. Mobile UI - Pinterest. Disponible sur pinterest.com/timoa/mobile-ui-comments/. 37