WWDC 2018 : le plaidoyer d'Apple pour des interfaces fluides

Florian Innocente |

L'une des choses qui frappent lorsqu'on utilise un iPhone X pour la première fois, c'est l'extraordinaire fluidité de l'interface que l'on manipule. C'était déjà un point fort de l'iPhone depuis ses origines et un élément différenciateur face à Android, mais l'iPhone X a encore relevé la barre.

Cette compétition se déroule jusqu'au sein de la gamme Apple, où l'on a l'impression qu'il y a l'iPhone X d'un côté et tous les autres iPhone de l'autre. Même les iPhone 8 semblent appartenir à une autre époque — ce qui n'est pas complètement faux non plus.

Ce sentiment provient des animations d'iOS 11 propres à ce nouvel iPhone. Par exemple celles employées pour illustrer le passage d'une app à une autre ou l'ouverture de la vue multitâche. Les mouvements à l'écran sont parfaitement synchronisés avec les gestes, comme une voiture dont les roues réagiraient au plus léger effleurement du volant.

Une conférence de la WWDC 2018, « Concevoir des interfaces fluides », a été consacrée à cet aspect primordial de l'expérience utilisateur. L'iPhone X est le meilleur exemple de ce que les ingénieurs d'Apple sont parvenus à produire, mais leur propos s'applique aussi aux interfaces des applications tierces.

Une interface qui pense comme nous

À la question de ce que veut dire une « interface fluide », chacun aura son interprétation, explique Chan Karunamuni, membre de l'équipe interface utilisateur d'Apple. Pour les uns elle sera « rapide », pour d'autres elle sera « lisse » dans ses mouvements, ou bien encore « naturelle », voire « magique » en l'absence de tout autre qualificatif plus précis ou lorsque que la surprise dépasse l'analyse.

Plus simplement, une interface fluide est une interface qui réagit sans se mettre en travers du chemin de l'utilisateur, en distillant chez lui une notion d'évidence. Elle ne provoque pas ce sentiment diffus que quelque chose cloche ou n'est pas à sa place. « Il est parfois difficile de mettre le doigt sur ce qui ne va pas », on peut avoir des animations qui s'exécutent à 60 images/seconde sans que cela n'atténue ce malaise.

Silex taillé hier, iPhone aujourd'hui, la mission est la même : prolonger la volonté d'un individu dans un outil manuel.

Pour que cela fonctionne sans heurts, il faut que « l'outil soit une extension de l'esprit ». Parvenir à marier des sensations tactiles avec ce que voient nos yeux, qu'il y ait une excellente synchronisation entre la vue et le toucher pour que l'illusion soit parfaite.

C'est d'autant plus important qu'au gré de l'évolution des matériels informatiques, les barrières entre la main et l'interface qu'elle doit manipuler — interface textuelle, clavier, souris — sont tombées les unes après les autres, au profit d'une interaction directe et plus exigeante.

Plusieurs choses sont mises en œuvre pour aligner les actions à l'écran avec les réponses de l'interface, comme un tango où les mouvements des partenaires sont liés, où chacun réagit et s'adapte immédiatement aux pas de l'autre.

Le premier dos d'âne à retirer du chemin est le délai constaté entre le geste et sa traduction à l'écran. Autrement dit, la latence. « Traquez les délais partout où qu'ils soient, pas seulement dans les gestes de balayage, c'est aussi lorsqu'on tape ou qu'on appuie, toute interaction avec un objet, tout doit réagir instantanément », ça doit faire l'objet d'une vigilance permanente, martèle Karunamuni auprès des développeurs.

Apple travaille ensuite sur la capacité de l'interface à réagir au pied levé aux changements de directions de l'utilisateur, à ses décisions parfois imprévisibles.

Une interface optimisée pour les virages et les freinages

Si un déplacement est interrompu dans son élan et que le doigt part n'importe où ailleurs, l'interface doit répondre sans délai. Sur l'iPhone X, vous pouvez balayer latéralement pour passer d'une application à l'autre puis décider de quitter l'app en la projetant vers le haut de l'écran mais décider d'interrompre ce mouvement à mi-parcours afin d'afficher plutôt la vue multitâche.

Tout cela peut se faire sans détacher le doigt de l'écran. L'image de l'application obéit au doigt et à l'œil, on peut amorcer un geste, hésiter, revenir en arrière ou aller ailleurs. Il n'y a pas de blocage, ni d'à-coup.

Sans cette interface « redirigeable », le cheminement serait beaucoup plus linéaire, détaille Karunamuni. On ferait une action ou une autre mais sans moyen de combiner ces deux gestes en seul mouvement. Il y aurait le balayage latéral et le mouvement vertical mais pas de position intermédiaire, celle qui peut correspondre à une hésitation de l'utilisateur pris subitement entre deux intentions différentes.

Autrement dit, il faudrait davantage anticiper ce que l'on veut faire puisqu'une erreur ou un changement d'avis obligeraient à recommencer. À l'inverse, avec ce que propose iOS sur l'iPhone X, l'intention (l'action que l'on a en tête) et le geste (pour la réaliser) peuvent être menés en même temps, l'hésitation ou le changement d'avis ne sont plus sanctionnés par une interface qui bloque. Le geste suit constamment le cheminement de la pensée, avec ses virages et ses renoncements.

À droite les principes du comportement de l'interface sur l'iPhone X

Cette approche a une autre vertu : elle aide à faire découvrir les possibilités de l'interface, puisqu'on peut aller où bon nous semble, sans être freiné ni empêché, au gré de sa curiosité ou lorsque le hasard d'un geste imprévu révèle une action possible.

C'est plus explicite lorsque Chan Karunamuni montre ces animations au ralenti. On voit le doigt appuyer sur une icône pour l'ouvrir et alors que l'image de l'app est encore en train de grossir pour venir occuper tout l'écran, le doigt l'intercepte dans son décollage et la renvoie dans son coin.

Calendrier est en train de s'ouvrir : alors que l'animation est en cours on referme l'app d'une pichenette et elle repart en arrière, interrompue dans son élan.

C'est aussi de pouvoir quitter une app par un geste vertical et, alors qu'elle n'est pas encore revenue à son état d'icône, d'enchaîner aussitôt sur un balayage pour aller sur un autre écran d'accueil. L'animation de l'app se refermant continue pendant que la transition entre les deux écrans a commencé. Ou encore, de lancer une app comme Photos et de faire défiler son contenu avant même qu'elle soit complètement ouverte à l'écran.

L'animation de fermeture de Calendrier n'est pas terminée que l'on peut déjà balayer latéralement pour aller sur l'écran de droite.
Si on est suffisamment rapide on peut faire défiler la galerie dans Photos alors que l'app n'a pas fini de s'ouvrir.

Dans les faits, il est assez difficile de reproduire ces gestes tellement l'iPhone X va vite, mais qui peut le plus peut le moins. Cette fluidité sera présente même pour des actions plus banales : « Ça ne parait pas crucial comme ça mais nous avons réalisé qu'il était super important pour l'interface de pouvoir toujours répondre, de toujours comprendre vos intentions, de toujours donner l'impression qu'elle est "vivante" ».

Le reste de la conférence parle de techniques qui sont depuis longtemps à l'œuvre dans iOS, comme l'effet de rebond en fin de défilement ou comment mettre en pratique ces conseils dans une app.

L'une des conséquences de la bonne application de toutes ces méthodes est que l'interface devient non seulement agréable mais aussi amusante à utiliser. C'est probablement le meilleur moyen de familiariser les individus avec le fonctionnement d'un nouveau système : apprendre par le jeu sans avoir l'impression de jouer.


avatar en ballade | 

Le clavier est fluide? Ah bon?????

avatar Yacc | 

@en ballade

Tullius Detritus est en ballade ?

avatar XiliX | 

@en ballade

"Le clavier est fluide? Ah bon?????"

Toi tu as lu le titre pas l'article

avatar jrmy21 | 

Mais oui moi j’ai acheté un iPhone 8 car même processeur que le X mais écran plus petit, je me suis dis qu’il serait alors moins vite obsolète que le X, mais il est lent cet iPhone 8 je n’en peux plus je suis dégoûté j’ai envie de m’acheter le X. Mais surtout je crois que le 8 manque de mémoire vive !!! Il doit tout recharger tout le temps c’est trop long !!

avatar reborn | 

@jrmy21

C’est sérieux ?

avatar ipaforalcus | 

@jrmy21
Reprends un 5s à jours quelques temps, tu verras que le 8 est fluide.

avatar XiliX | 

@jrmy21

"Mais oui moi j’ai acheté un iPhone 8 car même processeur que le X mais écran plus petit, je me suis dis qu’il serait alors moins vite obsolète que le X, mais il est lent cet iPhone 8 je n’en peux plus je suis dégoûté j’ai envie de m’acheter le X. "

Qu'est-ce que tu entends par "lent" ? Les jeux saccadent, le chargement des images dans le navigateur prend du temps ?

avatar jrmy21 | 

@XiliX

Non je ne joue pas, mais Safari recharge constamment les pages ouvertes il y a qq minutes (dès que je change d’appli) Message est long à ouvrir et le clavier lent a apparaître, l’appareil photo idem (voir parfois il freezeur moment de l’ouverture) .... plutôt sur la partie « bureautique »

avatar huexley | 

"c'est aussi lorsqu'on tape ou qu'on appuie, toute interaction avec un objet, tout doit réagir instantanément"

C'est à ce moment là que les devs du clavier de iOS se sont mis en PLS.

avatar comboss | 

C'est comme le clavier iOS 11, très fluide ❤️

avatar stefhan | 

J’aime beaucoup ce genre d’article, en français en plus. Très agréable. Merci MacG.

avatar Giru | 

Article intéressant... mais parler de fluidité à l’ère d’iOS 11, il faut oser.

Les interfaces sont pensées pour être fluides, mais le système rame du cul. On en est à iOS 11.4.1 et le clavier continue d’être insupportablement lent.

avatar Florian Innocente | 
Tout sera pardonné avec iOS 12 ?
avatar senghor | 

En parlant d’interface fluide, j’aimerai voir dans l’application de macge la possibilité de passer d’un article à un autre seulement en glissant de droite à gauche au lieu des commentaires, comme dans l’app de marianne

avatar TrollMan06 | 

@senghor

Bah pas moi. ?‍♂️

avatar XiliX | 

@senghor

Pareil que TrollMan06... il faut garder la glisse droite gauche pour aller dans les commentaires.

Pour changer d'un article à l'autre, il suffit pourtant de glisser vers le bas l'article en cours lorsque tu est complètement en haut de l'article. Et pour passer vers l'article précédent, il suffit de glisser vers le haut lorsqu'on est tout en bas de l'article

avatar adixya | 

Dommage que toute cette approche d’un raffinement suprême soit annihilée par le throttling cpu a cause de la batterie usée...

avatar XiliX | 

@adixya
"Dommage que toute cette approche d’un raffinement suprême soit annihilée par le throttling cpu a cause de la batterie usée..."

Bah non c'est exactement le contraire. Tu as besoin du CPU que pendant ces gestes, le reste du temps tu n'en as pas besoin. Du coup le throttling est une excellent idée.

avatar adixya | 

Bah non, vu que le throttling induit des lags d’interface globaux qui faisaient que certains se rachetaient un iphone en pensant qu’il etait obsolete.
N’importe quoi.

avatar jb18v | 

Bien joli mais je préfère le moins d’animations possible sur mon iPhone :)

avatar Mickydog | 

En revanche, ils n’ont pas l’air d’appliquer les mêmes préceptes à iOS sur l’iPad.
Les gestes pour partager l’écran entre deux apps sont extrêmement contraints, en particulier pour passer du slide over au split screen. En particulier, il faut descendre la barre du haut et la faire aller vers la droite pour que la fenêtre superposée grandisse sur la droite de l’écran.
Et là, les gestes ne sont pas modulables selon les changements de désirs de l’utilisateur, il faut les pratiquer jusqu’au bout et souvent annuler ce qu’on vient de faire. Et malgré mon utilisation intensive de l’iPad, même pour de la productivité, je fais encore des erreurs dans ces gestes, ou plutôt iOS ne comprend pas correctement mes gestes.
Pourtant la barre en haut de la fenêtre flottante ressemble à s’y méprendre à la barre sur iPhone X et pourrait sûrement avoir un comportement similaire.

Et ne parlons pas de la barre du tiroir d’application de Messages, au comportement totalement incompréhensible (fonctionne vers le haut, pas vers le bas), avec un rendu tout sauf naturel.

avatar DrJonesTHX | 

La description de cet interface est ce que j’attend d’un iPhone depuis le début (sans que cela soit assez rapide pour moi...)
Donc j’ai pris l’iPhone 8+ car même processeur que le X, mais design de l’interface éprouvée :

Alors pourquoi le X va plus vite sur votre papier ???

 aura-t-elle enfin décider à s’attaquer à cette foutu latence ? Le X est il en 120Hz ?

avatar Lemmings | 

On en parle du 3d touch tellement fluide qu'on n'a aucune possibilité de savoir où et quand on peut l'utiliser ? ?

Sinon dans le genre bien fluide, la mère de ma chérie hier qui n'arrivait plus à décrocher l'appel facetime car elle ne faisait que toucher le bouton vert au lieu de glisser ce dernier... Fluide ?!

avatar x arena | 

C’est toujours impressionnant de voir Apple donner des leçons de fluidité quand un truc aussi basique et important que le clavier rame à fond.
Vivement iOS 12 pour que ce soit corrigé! ?

avatar adixya | 

Oui ou que les imessage arrivent dans le desordre pendant 8 mois ?
Ou que le password root soit affiché en clair sur Mac...

Bref...

avatar XiliX | 

@x arena

Es-tu sûr d'avoir compris le sens du mot "fluide" dans l'article ?

Pour t'aider... ça n'a rien à voir avec la vitesse

avatar serginio | 

Super, ce plaidoyer d'Apple pour des interfaces. J'espère également me réjouir d'une éventuelle extension de la gamme apple vers le bas. Après le plus, SE, X peut être le light. En effet un smartphone bas de gamme apple permettra à ceux qui achetent des téléphones récents à moins de 200€ de bénéficier de cette expertise en fluidité.

Pages

CONNEXION UTILISATEUR