Christophe GILBERT Titulaire d’un DEA de Communication Au ... · Conception d’interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides ISBN

Conception d’interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides

ISBN

: 97

8-2-

409-

0062

4-1

26,5

0 €

Ce livre analyse les principes de conception graphique, ergonomique des interfaces mobiles ainsi que l’aspect technique lié à leur production, qu’il s’agisse des applications natives, web ou hybrides.

Il s’adresse particulièrement aux concepteurs, chefs de projets, respon-sables marketing, professionnels de toutes disciplines ayant à concevoir des services pour tablettes, smartphones ou autres accessoires connectés.

La conception d’une IHM mobile passe d’abord par une étude des usages : qu’attend-on d’une application ? Comment sera-t-elle utilisée ? Dans quels contextes ?

Une bonne approche Utilisateur - ou UX Design (User eXperience) - est essentielle pour garantir la pertinence d’une application. L’auteur analyse ainsi les fondamentaux de l’UX : scénario utilisateur, principe des écosys-tèmes, interactivité, psychologie de la perception, étude de la gestuelle, avant d’en déduire les conséquences sur la mise en page des interfaces mobiles.

Des études de cas permettent de contextualiser cette approche. L’auteur montre notamment à travers ces exemples détaillés, quelles stratégies sont mises en place pour répondre au mieux à la réalité du marché, aux attentes et comportements des utilisateurs.

Dans le chapitre suivant, l’approche technique permet de montrer le lien indissociable qui existe entre design et programmation. Quelles technolo-gies pour quel type d’application ? Cette question est ici posée à travers un panorama des technologies pour les mobiles :

• Les langages machine (Java, Objective-C, C#) qui permettent la pro-grammation des applications natives.

• Les outils de productions IOS, Android et Windows 10 : IDE, SDK.• La sphère des technologies dédiées au Web Responsive ainsi qu’aux

applis web : HTML 5, CSS, JavaScript, jQuery, jQuery Mobile.• Les outils pour la création des applications hybrides : framework Cor-

dova, Angular, Ionic, Kendo-UI, etc...

Enfin, le livre se termine par un chapitre plus prospectif : quelles sont les technologies récentes les plus prometteuses pour l’amélioration des services numériques ? Y sont abordées entre autres les questions de la réalité virtuelle, de la réalité augmentée, de l’Internet des Objets (IOT), de l’intelligence artificielle, des assistants personnels. Autant de pistes pour tenter d’imaginer les interfaces de demain... Pour plus

d’informations :

Conc

eptio

n d’

inte

rfac

es p

our m

obile

s

Christophe GILBERT

Conception d’interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides

Titulaire d’un DEA de Communication Au-diovisuelle (Paris III) et développeur web depuis 2004 après une formation suivie au CNAM, Christophe GILBERT a multi-plié les collaborations avec des agences de Communication dont il est devenu le prestataire en développement et conseil-ler pour les projets numériques. Passionné par le partage des connaissances, il inter-vient également en tant que formateur sur les domaines de la programmation pour Internet et les applications hybrides : JavaScript, HTML 5 et CSS en particulier.

Christophe GILBERT

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b Webographie

Table des matières 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

Chapitre 1 : IntroductionA. À qui s'adresse ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9B. Pourquoi tant d’applications ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9C. Un peu d'Histoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

1. Naissance des écrans tactiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102. Naissance des Market Stores et apparition des applications téléchargeables :

le triomphe d'un modèle économique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113. Internet sur les mobiles et l'approche Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . .124. Responsive Web Design / Adaptative Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125. Puissance de HTML 5 et naissance des applications web . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146. Applications natives ou applications web : une question récurrente

(mais pour combien de temps ?) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14D. Vers une expérience utilisateur unique ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

Chapitre 2 : Conception graphique et fonctionnelleA. Le rôle de l'expérience utilisateur (UX) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

1. Le contexte d'utilisation des supports mobiles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19a. Une expérience utilisateur dégradée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19b. Une connexion intermittente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20c. La gestion multitâche (multitasking) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

2. La recherche d'efficience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20a. De la recherche d'informations à l'utilisation des services . . . . . . . . . . . . . . . . . . . . . . . . .20b. L'efficience dans le cadre des écosystèmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21c. La pratique des écosystèmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22d. Écosystème persistant, continu ou complémentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25e. L'architecture des écosystèmes, une contrainte

pour la définition des scénarios utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273. UX ou UI : définitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29

a. UI pour User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29b. UX pour User eXperience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

4. Les 6 commandements de l'UX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31a. L'efficience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31b. La visibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31c. L'accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31d. L'intuitivité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31e. La crédibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31f. La satisfaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

Conception d'interfaces pour mobiles2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

B. Concevoir, imaginer l'UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321. Audits de sites ou applications concurrentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322. Analyse des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

a. Les focus groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33b. Les personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33c. Les cartes d'idéation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3. La création de documents de partage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35a. Les cartes heuristiques ou Mind Mapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35b. Experience Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36c. Maquettes des interfaces (prototypage). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

C. L'interactivité au cœur de l'UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411. La prise en main des appareils mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412. Interactivité tactile : Touch, Multi-Touch et Touch3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

a. Toucher, balayage, zoom et autres gestes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43b. 3D Touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45c. Susciter les bons gestes de la part de l'utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3. L'interactivité au-delà de l'écran. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46a. Le vibreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46b. Les capteurs de mouvement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46c. Interactivité par la caméra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49d. Interactivité sonore. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

4. Gestion de l'espace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51a. Le point focal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51b. Les « call to action » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52c. Zoning et sens de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56d. De la page à l'écran. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

5. Les composants d'interface (UI Components) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75a. Les barres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76b. Les composants d'affichage : les visionneuses (views) . . . . . . . . . . . . . . . . . . . . . . . . . . . 80c. Les contrôles visuels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

D. Études de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1061. Application ViteInscrit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

a. Les fonctionnalités de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107b. Hébergement et architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108c. Conditions d’utilisation dégradées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108d. Un écosystème complémentaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108e. L’interface : ergonomie et design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108f. Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

2. Application IDEC Sport. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113a. Les fonctionnalités de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114b. Pourquoi un focus sur cette application ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

c. Hébergement et architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115d. L’interface : ergonomie et design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115e. Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

3. Applications Accorhotels et Accor Virtual hotels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119a. Les profils utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120b. L'écosystème numérique Accor : un site et des applications . . . . . . . . . . . . . . . . . . . . 120c. Hébergement et architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121d. L’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121e. Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Chapitre 3 : Aspects techniquesA. Les applications natives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

1. Architectures des applications natives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131a. Les langages de programmation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131b. Apothéose du pattern MVC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132c. Langages orientés objet et instanciation des APIs du hardware . . . . . . . . . . . . . . . . . 133

2. Les outils de production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135a. L'environnement de développement : les SDK iOS, Android et Windows . . . . . . . . 135b. L’interface pour Android. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139c. L’interface pour iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140d. L'interface pour Windows 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143e. Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

B. Applications web et sites RWD (Responsive Web Design) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1451. Architectures des applications Web et sites RWD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

a. Sites et applications web statiques ou dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147b. La séparation des pouvoirs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

2. Langages et programmation : HTML, CSS, JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150a. Le DOM (Document Object Model) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150b. L’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152c. Le corps de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152d. Spécifications W3C/WHATWG pour mobiles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154e. Écrire les styles : syntaxe des CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154f. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

3. Adaptation à l'environnement mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164a. Côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164b. Côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

4. Outils de production pour sites RWD et applications web . . . . . . . . . . . . . . . . . . . . . . . . . . 194a. Les frameworks HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194b. Les grilles flexibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195c. Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197d. jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198


e. Frameworks HTML 5 et RWD plus légers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200C. Applications hybrides : écrire une fois et déployer partout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

1. Architecture mixte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2012. Les outils de production pour projets hybrides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

a. Apache Cordova, le traducteur polyglotte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202b. Angular Mobile UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205c. Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207d. React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208e. Kendo UI Core / Kendo UI Professionnal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209f. Autres frameworks pour applications hybrides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

D. Programmation des accessoires vestimentaires connectés . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Chapitre 4 : Et demain ?A. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215B. Réalité augmentée/réalité virtuelle/réalité mixte :

nouveaux territoires des interfaces ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2151. Réalité virtuelle et augmentée : définition et comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 2152. À quoi ressemblent les interfaces intégrant virtualité et réalité augmentée ?. . . . . . . . 217

a. Interfaces virtuelles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217b. La réalité augmentée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221c. La réalité mixte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223d. Quel impact les réalités virtuelle et augmentée ont-elles

sur les interfaces écrans ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223e. Limites, obstacles des interfaces virtuelles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

C. Apport de l'Internet des Objets (IOT pour Internet Of Things) . . . . . . . . . . . . . . . . . . . . . . . . . . 2241. Objets connectés, avez-vous donc une âme ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2242. Des capteurs de plus en plus nombreux, mais pour quels types d’interfaces ? . . . . . . . 225

D. La révolution de l'intelligence artificielle (IA) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2271. Qu’appellons-nous intelligence artificielle ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2272. Les assistants personnels : vers une dématérialisation des interfaces ? . . . . . . . . . . . . . . 228


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

AnnexeA. Webographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233B. Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236C. Marketing mobile et UX mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237D. Développement, production : les aspects techniques des applications . . . . . . . . . . . . . . . . . 238

1. Applications natives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2382. Applications web et hybrides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

E. Réalité virtuelle et augmentée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239F. Internet des Objets – IOT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239G. Intelligence Artificielle – IA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Chapitre 2 : Conception graphique et fonctionnelle©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

19. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapi tre 2 : Concept ion graph iq ue et fonct ionnelle

Conceptio n d 'in terfaces p our mobi lesA. Le rôle de l'expérience utilisateur (UX)

1. Le contexte d'utilisation des supports mobilesPar définition, les terminaux mobiles... sont mobiles ! Ils se déplacent avec nous et leur forced'attraction résulte de leur capacité à nous accompagner dans toutes nos activités. Comme entémoigne l'étude publiée sur le site de l'agence CSV, notre emploi du temps est saturé de cestemps d'écran :

a. Une expérience utilisateur dégradéeNotre propre expérience du smartphone nous rappelle intuitivement une évidence : que noussurfions sur Internet ou à travers une application téléchargée, notre contexte immédiat est sou-vent propice à la distraction. Que nous soyons dans les transports en commun, au travail, dans larue, l'intérêt de ces interfaces est précisément de nous permettre d'effectuer des tâches (consul-tation 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 compul-sifs 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 à lepenser).


b. Une connexion intermittenteLa déambulation que permettent les outils mobiles implique également une connexion à Inter-net discontinue. Elle peut être à certains moments totalement interrompue ou simplement ralen-tie, lorsqu'elle dépend du réseau téléphonique (3G/4G), ce qui constitue le mode de connexionmajoritaire en mode nomade. Dans ce cas, et selon l'éloignement aux relais, mais aussi les datasou la bande passante disponible dans le cadre de l'abonnement de chaque utilisateur, les flux dedonnées peuvent varier fortement et occasionner des ralentissements pour la consultation dessites et applications web.

Pour les applications natives, la question de la connexion se pose différemment : si elles peuventpour certaines actions nécessiter une connexion, le fait qu'il s'agisse par définition de logiciels té-léchargés leur assure une certaine autonomie. C'est d'ailleurs un argument qui pèse en faveur dece type de développements et explique en partie leur succès.

c. La gestion multitâche (multitasking)Enfin, à ce problème de discontinuité de l'attention et de connexion intermittente s'ajoute uneexigence de la part de l'utilisateur : celle de pouvoir effectuer plusieurs tâches simultanément. Surun smartphone, la messagerie est toujours active, en même temps qu'un grand nombre d'autresservices : réseaux sociaux (Twitter, Snapchat, etc.), services de géolocalisation (Uber, parexemple), et pourquoi pas quelques jeux dont certains se jouent d'ailleurs en connexion avecd'autres personnes.

Comment gérer ces actions simultanées (multitâche) au niveau des OS et des applications elles-mêmes ? Cela relève autant des OS mobiles (l'environnement d'exécution – Android, iOS,Windows) que des applications elles-mêmes.

2. La recherche d'efficience

a. De la recherche d'informations à l'utilisation des servicesLe smartphone et la tablette présupposent donc des conditions d'utilisation plus versatiles qu'unordinateur de bureau.

Pour répondre à ce contexte, les sites web responsive comme les applications doivent optimiserla lisibilité de leurs contenus.

La lecture nomade oblige à une plus grande clarté dans la construction des interfaces. D'unemanière générale, le temps accordé à la lecture continue est de plus en plus réduit à mesure querétrécissent les écrans : la consultation doit être facilitée par un accès direct à l'information.

Autre aspect important de l'usage mobile : il doit produire un résultat, résoudre un problème pra-tique. Les applications sont pour la plupart conçues sur le principe du service (à la différence dusite web, de nature plus informative) : elles remplissent un nombre limité de fonctions, maiscelles-ci doivent être garanties jusqu'à obtention du résultat souhaité. C'est ce qui s'appelle l'effi-cience de l'application.

L'efficience est une notion clé de l'approche UX Design dont nous parlerons un peu plus loin.


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

21. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Au niveau des interfaces, nous verrons que cela suppose l'utilisation d'une grammaire visuelle etd'outils d'interactivité rapidement identifiables par l'utilisateur et qui reposent en grande partiesur les composants d'interface (UI Components). Les UI Components sont des outils qui permet-tent à l'utilisateur d'interagir avec son application, à savoir les boutons et champs de formulaire,les boîtes de dialogue, etc.

b. L'efficience dans le cadre des écosystèmes La diversification des usages et des supports de consultation pour une même application est deplus en plus courante.

Selon les contextes, les supports varient : l'utilisateur peut ainsi passer de son smartphone, éven-tuellement relayé par des alertes ou des notifications sur une montre ou un bracelet connecté, àun tableau de bord automobile, puis à une tablette chez lui, en famille et enfin à un ordinateurpour un usage plus approfondi et individuel.

De cette variété des supports et de leur complémentarité est née la comparaison avec les écosys-tèmes, cette notion héritée de l'écologie.

"En écologie, un écosystème est l'ensemble formé par une association ou communauté d'êtres vi-vants (ou biocénose) et son environnement biologique, géologique, édaphique, hydrologique,climatique, etc. (le biotope). Les éléments constituant un écosystème développent un réseaud'échange d'énergie et de matière permettant le maintien et le développement de la vie. Leterme fut forgé par Arthur George Tansley en 1935 pour désigner l'unité de base de la nature."

Source : Wikipédia (https://fr.wikipedia.org/wiki/%C3%89cosyst%C3%A8me)

Techniquement, les écosystèmes numériques sont aussi l'émanation à travers une multiplicité desupports d'une information globalisée et centralisée sur des réseaux de serveurs : le cloud.

Les applications multiformes proposent des services étendus qui nécessitent un fil directeur fortd'un support à l'autre.


Voyons par exemple le cas de DigiPoste Plus couplée avec la caméra.

Application Digiposte Plus : de la saisie des documents au stockage

Le principe de Digiposte Plus est de mettre à disposition des utilisateurs un cloud dédié au stoc-kage de documents administratifs (fiches de paye, factures, etc.) : une sorte de coffre fort numé-rique garanti à vie.

Intégré à cette application, le composant de prise de vue permet de photographier et authentifierses photos en les datant et en les localisant automatiquement par géolocalisation. Dans le cadrede cette application, il est donc possible d'utiliser son smartphone pour entrer des documents,recevoir des alertes pour la validation de ces documents ou le rappel de certaines échéances.

Dans ce cas comme dans de nombreux autres (applications bancaires, applications de suivis decommandes, applications de partages, de réseaux...), le fonctionnement de l'écosystème peut lui-même être décrit à travers des récits ou scénarios fonctionnels.

Le scénario qui raconte un ou plusieurs cas d’usage, c'est un peu le pitch, ou le story-telling del'application, telle qu'elle sera « vécue » par l'utilisateur.

c. La pratique des écosystèmes

Le partage des données

Les écosystèmes d'écrans et d'objets connectés s'imposent progressivement et accompagnentune demande toujours plus grande de flexibilité et de continuité dans les services. La synchroni-sation des informations dans un écosystème se fait de terminal à terminal ou au contraire depuisune source externe et commune, un cloud.


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

23. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dépendances des objets connectés

À travers ces échanges, un terminal est parfois rendu maître du second. Il peut alors "piloter" leterminal esclave (bien que ces termes "maître/esclave" soient plutôt réservés aux serveursinformatiques) :

Il peut au contraire instaurer des échanges limités au partage des données mises à jour sur l'unou l'autre des terminaux.

Dans ce cas, aucun terminal ne prend la main sur les autres :


Lorsque la mise à jour des données se fait à travers un cloud, l'actualisation est potentiellementcomplète à chaque instant et pour chaque terminal.

C'est une architecture adaptée à des écosystèmes offrant une expérience similaire pour l'en-semble de son réseau :

Chacune de ces options entre dans la logique fonctionnelle des écosystèmes et influence la façondont ces terminaux connectés se complètent les uns les autres pour améliorer les services et l'ex-périence utilisateur.

Documents

Christophe GILBERT Titulaire d’un DEA de Communication Au ... · Conception d’interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides ISBN