Skip to main content

La vitesse d’affichage des pages d’une application dépend bien entendu de paramètres objectifs : performance de votre appareil mobile (RAM, processeur…), poids des éléments interactifs intégrés (vidéos, images, etc.), nombre d’enrichissements présents sur chaque page, etc. Cela dit ces éléments bien réels ne forment en réalité qu’un partie de l’équation si l’on réfléchit en termes d’expérience utilisateur. En effet, au-delà de ces paramètres objectifs, la sensation de rapidité de l’affichage d’un contenu, que cela soit sur une page web ou dans une application mobile, dépends en réalité de la manière dont l’utilisateur fait l’expérience de cette page. La ‘sensation’ de vitesse est communiquée par des éléments non objectifs, des ‘trucs’ qui participent à l’expérience globale de lecture. Nombre d’interfaces utilisent ces différentes techniques qui participent pleinement du design et de l’ergonomie générale de l’application, voire de l’identité de la marque.

L’expérience utilisateur

Les différents systèmes mobiles proposent de nombreux raffinements quand à cet aspect : floutés, effets de parallaxe, translations légères, apparitions délicates, son… autant d’éléments qui donnent à l’utilisateur une appréhension générale de l’interface. Aquafadas propose depuis longtemps déjà des effets de transition de pages intégrés, combinant fade et parallaxe, donnant plus de corps au passage d’un article à l’autre ou d’une page à l’autre par le ‘swipe’ de l’utilisateur. Ces effets n’ont, pendant longtemps, pas été personnalisable dans le plugin, permettant ainsi à l’utilisateur averti d’identifier aisément les technologies ayant servies à construire les différentes applications. Depuis la version 2.6 cependant, Aquafadas a introduit la possibilité non seulement de paramétrer ces transitions pour la totalité de votre projet digital publishing, mais aussi de les personnaliser page à page en fonction de vos besoins. On apprécie !
[userpro_private]

Les réglages du projet

Une fois votre projet créé dans le Project manager, vous allez pouvoir accéder aux réglages généraux de votre projet en cliquant sur l’onglet AVE. Ces réglages vont s’appliquer sur la totalité de vos articles et vous proposent nombre d’options comme personnaliser la barre de menu (la barre en haut de votre application), la barre de navigation (sommaire avec vignettes), forcer une navigation linéaire pour tous vos articles, bloquer la navigation par glisser (swipe), etc.

Réglages généraux de votre projet001

Onglet AVE002

Les options de Pages

Nous allons nous intéresser aux options de pages (item ‘Page’) dans l’onglet AVE des réglages de projet. C’est ici que notre attention va se porter afin de paramétrer la manière dont les articles et les pages vont ‘apparaître’. Différentes options nous sont proposées : ‘Durée’, ‘Effet’, ‘Type de Parallaxe’ et ‘Amplitude Parallaxe’. (L’option ‘Audio’ va vous permettre de définir un son par défaut qui se déclenchera à chaque changement de page ou d’article.)

003-1
Durée
L’option Durée vous permet de définir le temps que va mettre la page à s’afficher en fonction des effets que vous aurez choisis : typiquement le temps que vont mettre les différents éléments de la page pour se déplacer dans l’amplitude du parallaxe (par défaut 0.8s mais passé à 0.4s dans le screenshot). Les différents éléments de votre page vont subir un effet de translation qui devra être définit par un type de parallaxe ainsi qu’une amplitude ensuite. Les blocs de votre page vont donc se déplacer en fonction de leur position sur la page. Ainsi un bloc se trouvant sur la partie gauche de votre page va opérer une translation gauche-droite pour se placer à l’endroit définit dans votre mise en page inDesign. Si votre bloc est calé très proche du bord gauche, il se déplacera donc sur une distance moindre que si il se situe plus vers le centre (mais toujours dans la partie gauche de votre mise en page) de votre document inDesign. Dans tous les cas, ce déplacement se fera sur la durée que vous aurez définie dans le paramètre ‘durée’ soit 0.4s dans notre exemple. À noter que des blocs groupés dans inDesign se déplaceront comme si il s’agissait d’un seul bloc.

004

Effet
Vous pouvez ici définir le type de transition à appliquer entre les articles et entre les pages. Ces transitions sont assez classiques et s’approchent de nombre de slideshow javascripts que l’on peut trouver sur le net ou des effets intégrés dans nombre d’applications de montage vidéo : fondu au noir, glisser entrant, flip, etc.

Voici les options proposées :

  • Push (Pousser en dehors) : The new page pushes into the former page
  • Move in (Glisser entrant) : The new page arrive on top of the former page
  • Reveal (Révéler): The former page exits and reveals the new page
  • Dissolve (Dissoudre) : The former page fades and reveals the new page
  • Cross Fade (Fondu) : The new page and former page cross fade
  • Fade Through black (Fondu au noir) : Former page fades first to black then the new page appears
  • Page curl (Effet page tournée) : Standard page curl effect
  • Page curl reverse (Effet page tournée inversé) : the sens of the page curl is flipped
  • Flip (Flip) : 3D flip of the page

006-1

Type de Parallaxe
Vous allez pouvoir définir quels sont les bords actifs de votre page qui vont activer la translation des blocs. Direction simple : tous les éléments viennent de la même direction en fonction du sens de swipe de l’utilisateur, Double sens : la fonction par défaut soit droite-gauche et haut-bas et enfin Directions multiples qui activera l’effet de parallaxe à partir des quatre cotés de votre page. Il est aussi possible de désactiver l’effet de parallaxe en réglant le type de parallaxe sur Aucun.

000

Amplitude Parallaxe
Enfin, l’amplitude va déterminer la distance que vos blocs vont parcourir dans la durée attribuée précédemment (par défaut ‘2’, et ‘6’ dans notre exemple).

005

Ces différents réglages vont vous permettre de donner une sensation de rapidité, de nervosité à l’affichage de vos pages, et va participer activement à la sensation générale de fluidité de votre application.

Personnaliser la transition d’une seule page

Vous pouvez affiner le comportement de votre application en paramétrant ces options page par page. En effet, si les réglages généraux de projet vont effectivement s’appliquer sur la totalité de votre projet, les réglages de pages vont constituer une exception qui ne s’appliquera que sur la page courante.

Il suffit de sélectionner l’outils inDesign ‘page’ dans la barre de menu de gauche, et de cliquer sur la page concernée ; automatiquement cette action va activer la palette AVE Interactivity, vous proposant de personnaliser les réglages de la page en question. Dans la partie Apparaître, cliquez sur Personnalisé. Vous retrouvez alors les réglages vu précédemment : Durée, Effet, Parallaxe et Amplitude, mais s’appliquant cette fois comme une exception pour la page courante. La transition personnalisée affectera donc votre page au moment de son apparition, prenant le pas sur les réglages généraux !

0002

0001

Et les sous-documents ?

Par défaut, tous les sous-documents inclus dans votre projet vont utiliser eux aussi les réglages généraux que vous avez définis dans l’onglet AVE du Project manager. Pour personnaliser l’affichage d’un sous-documents, il est donc nécessaire de personnaliser chaque page du sous-document lui-même via l’outils ‘page’ d’inDesign. Pas forcément pratique pour un sous-document de 50 pages, je vous l’accorde !

Conclusion

Voilà déjà de quoi vous amuser 5 minutes, et surtout redonner du peps à vos applications très facilement ! Bien entendu cela ne vous évitera pas le travail d’optimisation de vos différents médias et surtout la réflexion globale sur les choix d’enrichissement de vos pages : choisir une suite d’image peut être pertinent par exemple pour éviter d’intégrer une vidéo, etc. Mais ceci est une autre histoire…

N’hésitez pas non plus à consulter la doc Aquafadas (disponible en ligne et en ‘français’ mais très mal traduite au point d’être parfois totalement surréaliste !) ainsi que les webinars (en anglais).

Pour la route et parce que je suis sympa, voici le tuto officiel concernant les transitions de pages :

href="http://www.aquafadas.com/en/documentation/sample-page/the-project-manager-panel-in-depth/project-settings/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text href="http://videos.aquafadas.com/en/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text [/userpro_private]
Valéry Girou

D.A. / DIGITAL / WEB / PRINT / Co-fondateur du site ELECTRICNEWS.fr / Consultant & Formateur Digital / Web / Print

Pin It on Pinterest