Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Black Friday: -25€ dès 75€ sur les livres en ligne, vidéos... avec le code BWEEK25. J'en profite !
  1. Livres et vidéos
  2. Conception d'interfaces pour mobiles
  3. Conception graphique et fonctionnelle
Extrait - Conception d'interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides
Extraits du livre
Conception d'interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides Revenir à la page d'achat du livre

Conception graphique et fonctionnelle

Le rôle de l’expérience utilisateur (UX)

1. Le contexte d’utilisation des supports mobiles

Par définition, les terminaux mobiles... sont mobiles ! Ils se déplacent avec nous et leur force d’attraction résulte de leur capacité à nous accompagner dans toutes nos activités. Comme en témoigne l’étude publiée sur le site de l’agence CSV, notre emploi du temps est saturé de ces temps d’écran :

images/02OW01.png

a. Une expérience utilisateur dégradée

Notre propre expérience du smartphone nous rappelle intuitivement une évidence : que nous surfions sur Internet ou à travers une application téléchargée, notre contexte immédiat est souvent propice à la distraction. Que nous soyons dans les transports en commun, au travail, dans la rue, l’intérêt de ces interfaces est précisément de nous permettre d’effectuer des tâches (consultation ou prise de décision) dans des situations peu favorables à la concentration.

Cet environnement dégradé est caractéristique des usages mobiles. Chez les utilisateurs compulsifs d’outils connectés, la concentration est aujourd’hui différente de ce qu’elle était autrefois : elle semble plus diffuse, versatile (mais non pas inexistante, comme on a parfois tendance à le penser).

b. Une connexion intermittente

La déambulation que permettent les outils mobiles implique également une connexion à Internet discontinue. Elle peut être à certains moments totalement interrompue ou simplement ralentie, lorsqu’elle dépend du réseau téléphonique (3G/4G), ce qui constitue le mode de connexion majoritaire en mode nomade. Dans ce cas, et selon l’éloignement aux relais, mais aussi les datas ou la bande passante disponible dans le cadre de l’abonnement de chaque utilisateur, les flux de données peuvent varier fortement et occasionner des ralentissements pour la consultation des sites et applications web.

Pour les applications natives, la question de la connexion se pose différemment : si elles peuvent pour certaines actions nécessiter une connexion, le fait qu’il s’agisse par définition de logiciels...

Concevoir, imaginer l’UX

L’approche UX consiste donc à placer le comportement de l’utilisateur au centre de la conception des interfaces.

Une telle démarche "User First" passe par certains outils de conception et de visualisation. Voici un aperçu de certains de ces outils.

1. Audits de sites ou applications concurrentes

L’audit de produits existants, ou benchmark, est un préliminaire souhaitable à la conception de sites ou d’applications. Avant de se lancer dans tout projet, il est naturel d’examiner ce que d’autres ont expérimenté avant nous. C’est précisément en cela que consiste le benchmark : audit et comparaison de produits. Ayez le réflexe de capitaliser sur l’existant : la compréhension de l’UX est avant tout une démarche empirique qui se nourrit des nombreuses expériences passées.

Existe-t-il des produits similaires à celui que vous imaginez ? Quel positionnement choisir pour un projet vis-à-vis des propositions concurrentes ?

Quelle place les concepteurs de ces produits ont-ils accordée à l’utilisateur ? Quelles relations ont-ils tenté (et parfois réussi) d’entretenir avec lui sur le long terme ?

Ce sont là des questions qui vont au-delà de celle de l’existence préalable d’un service similaire au vôtre.

Y compris dans les secteurs très concurrentiels, il est souvent possible de s’imposer en proposant une expérience utilisateur inédite et adaptée.

Comment pratiquer un benchmark efficace dans le domaine des applications mobiles ? Dans un premier temps, en passant par une phase d’observation et de recherche visant à déterminer les produits comparables ou entrant dans le périmètre des usages possibles liés au projet. Mais aussi, lors des phases de test, en étant aussi exhaustif que possible dans l’analyse des contextes et des profils utilisateurs des applications étudiées.

L’objectif est de savoir quelle expérience sera la plus pertinente et la plus récursive pour le service ciblé, et ceci dans le plus grand nombre de contextes.

2. Analyse des utilisateurs

a. Les focus groups

Les focus groups peuvent être traduits par « groupes de discussion »....

L’interactivité au cœur de l’UX

1. La prise en main des appareils mobiles

Dans le cas du smartphone en particulier, l’innovation majeure a été le passage des technologies tactiles classiques (avec clavier physique sous l’écran) à celles plus riches et sensibles dites "Touch" (sensibilité sur l’ensemble de l’écran). L’appropriation de cette technologie par le grand public s’est faite rapidement. Plus intuitive que la navigation par le clavier, elle donne lieu à des usages convergents malgré certaines particularités de prise en main selon les utilisateurs, comme il résulte d’une enquête publiée en 2015 publiée en 2015 par l’agence Personae User Lab (http://www.personae-userlab.com/) dans le cadre de son enquête Smartphone Street Observer.

images/02OW18.png

© Fotolia / alexhliv

Cette illustration montre le rôle du pouce, qui se partage entre son rôle préempteur (il tient l’appareil) et celui de sélecteur.

Le pouce n’a pas une portée très étendue mais joue néanmoins un rôle central. C’est pourquoi la topologie des interfaces tactiles et, en particulier sur les écrans de tablettes en mode paysage, s’inspire souvent du zoning imposé par les régions que le pouce peut effectivement atteindre.

images/02OW19.png

Les zones prioritaires pour les pouces sur tablette

L’écran tactile a profondément transformé les interfaces. Jusqu’alors, comme le fait remarquer Josh Clark, les IHM graphiques avaient toujours été basées sur une séparation claire entre les contrôles, c’est-à-dire tout ce qui nous permet de manipuler les données, et l’écran sur lequel s’affichent les objets cibles de cette manipulation.

Cette séparation est présente au niveau des téléviseurs, des ordinateurs de bureau et des téléphones portables à clavier physique qui ont précédé les smartphones (les appareils Blackberry ont conservé jusqu’au bout leurs touches cliquables qui permettaient d’écrire plus vite et avec moins d’erreurs de frappe, avantage qui s’est atténué avec la systématisation des fonctions de suggestion sur les appareils...

Études de cas

Nous avons passé en revue les principaux éléments constituant les interfaces mobiles, ces composants UI dont la programmation est en grande partie fournie par les SDK des systèmes d’exploitation mobiles. Si les fonctionnalités de ces briques de base sont standardisées, leur mise en situation reste à imaginer et c’est là le travail des concepteurs et des développeurs qui fait de chaque application un objet unique.

Dans les pages qui suivent nous allons observer plus en détail trois exemples d’application : un progiciel de billetterie (ViteInscrit.com), une application de loisir (IDEC Sport) et une application e-commerce (AccorHotels). Certaines des images utilisées ici sont des documents de présentation ou des maquettes provenant des agences et départements marketing à l’origine de ces projets.

1. Application ViteInscrit

Genre : service lié à l’organisation d’événements

images/02OW84.png

L’application mobile ViteInscrit a été développée par Mobizel pour le compte d’une start-up française : viteinscrit.com.

Elle s’adresse aux organisateurs d’événements et propose un service professionnel.

Sa vocation est de fournir un outil de gestion de billetterie mobile permettant de valider les entrées des participants par sélection dans une liste ou par scan de QrCode.

L’application complète la plateforme numérique www.viteinscrit.com réalisée par la société Net-ng dont l’objectif est de dématérialiser l’organisation des événements au niveau des inscriptions.

Le process est donc le suivant :

  • Sur le site, l’organisateur crée, paramètre et invite les participants à s’inscrire directement en ligne à l’événement.

  • Lorsque le jour J arrive, les organisateurs peuvent scanner, avec un ou plusieurs smartphones à la fois, les billets des participants afin de valider leur entrée.

images/02OW85_1.png
images/02OW85_2.png

Les étapes de validation des billets via l’application mobile

a. Les fonctionnalités de l’application

  • L’identification des QRCode par billet,

  • La validation des billets (et le cas échéant, de plusieurs billets simultanément)...