Menu

UI/UX Design & Mobile devices

Webdesign & Mobile devices

Alter-Ego // 2018

Pour la nouvelle version du site Alter-Ego, j’ai décidé de garder le CMS Joomla39, utilisé sur les deux versions prédédentes (2009 et 2015). L’interface graphique sera orienté mobile-first pour supporter au mieux les appareils des internautes. Le choix de Joomla est tant affectif que technique. En effet, il s’agit du système de gestion que je maîtrise le plus, et ayant eu des expériences avec les concurrents (Wordpress, Prestashop...), il demeure pour moi le plus complet.

Le site a été livré pour le 15 mai 2018 >> Voir le site

 

Préparation: DESIGN SPRINT

Dans la phase d’élaboration du projet, j’ai opté pour la méthode du design sprint.
5 jours destinés à étalonner le futur site.

Voici le compte rendu :

  1. LUNDI : DÉFINIR LE PÉRIMÈTRE DU DESIGN SPRINT

    Définir les objectifs

    Le nouveau site aura pour but d’attteindre tant les enfants que les parents. De donner une place dominante à la vidéo, d’être flexible et léger sur tous les supports. D’être livré en avril 2018 (3 mois plus tard) et de garantir une durée de vie d’au moins quatre ans. D’être sécurisé et de proposer une bonne sauvegarde des données. D’ouvir la possibilité de régler les séjours en ligne et de renseigner un formulaire d’inscription.

  2. MARDI : À VOS STYLOS POUR GÉNÉRER DES IDÉES

    S’inspirer.

    Réunion avec le directeur d’Alter-Ego et son adjoint pour cibler la concurrence, peu incisive en France concernant les colonies de vacances. Nous avons décrypté des sites américains (Kids Camp), beaucoup plus avancés en design et design mobile.

    A partir de là, j’ai dessiné les éléments du site et les premières orientations graphiques.

  3. MERCREDI : VALIDER LE DESIGN

    Présentation d’un zoning (illustration 2.2.11) qui s’appuyera ensuite sur le graphisme de la charte 2018.

    Le mockup mobile (ilustration n°2.2.12) spécifie le positionnement pour les smartphones. Les éléments moins utiles pour mobiles (sliders, actualités...) et sollicitant d’avantage de bande passante ne sont pas représentés sur la version mobile.

    J’ai favorisé une navigation par produit. Alter-ego propose des colonies de vacances et des classes de découverte. Dans ce sens, Les deux uniques liens du menu principal sont ces derniers. Les autres rubriques se retrouvant dans le pied de page.

    J’ai opté pour une dynamique de site One Page. Le site entier comprend une vingtaine de pages, notament pour chaque séjour. Dans cette version, j’ai alimenté de contenu la home page, ce qui a pour avantages :

    • Tout le contenu est chargé en une seule fois
    • Il est souvent plus agréable de scroller une page plutôt que de multiplier les clics sur des liens (héritage des réseaux sociaux et des utilisateurs de smartphone
    • C’est une alternative parfaite pour les sites ayant peu de contenu à présenter

Même si le chargement du site est plus long et l’utilisateur peut-être perdu s’il n’a pas l’habitude de ce genre de site, cette pratique est de plus en plus répandue et rentre dans les habitudes de navigation.

  1. JEUDI : CRÉER LE PROTOTYPE

    Sur illustrator, j’ai modélisé le zoning avec le graphisme 2018 tout en sachant qu’en une journée il ne serait pas abouti. Ce n’est d’ailleurs pas l’objectif du design sprint. Dans le principe de la méthode Agile, le but étant d’anticiper un projet et de ne pas se lancer dans des tâches trop longues au risque qu’elle soient avortées ensuite.

  2. VENDREDI : TESTER

Cinq tests ont été faits sur un public cible du site (un enseignant, un parent, un animateur, une fille de 8 ans, un garçon de 12 ans). Dans ce test, j’ai pris 20 minutes avec chaque testeur et leur ai demandé si :

L’expérience du test était délicate à interpréter avec les enfants. La maquette n’étant pas définitive, ils avaient du mal à se projeter.

 

Webdesign et ergonomie 2018

llustration n°2.2.13 - Site Alter-Ego Mobile

 

Pour une lecture plus ergonomique, le choix s’est à nouveau tourné vers une dominante blanche et une charte colorée pour enfants avec une dynamique de couleurs actuelles en 6 teintes pastels vifs (ilustration n°2.2.14).

J’ai pris écho des tendances de webdesign du moment avec du flat design et du data design, tendance très plébiscitée pour un message clair, ludique et graphique, consistant à vulgariser l’information avec des illustrations et des schémas.

Les images, photos et illustrations se conjuguent, elles racontent une histoire, sans filtre et avec simplicité.

Plus forte présence de pictogrammes optimisés pour l’expérience utilisateurs (UX) et augmentation de la lisibilité. Les bonhommes réapparaissent sur le site et trouvent leur place dans les différentes pages produits (un bonhomme par type de séjour).

La vitesse de connexion plus rapide développe les usages et les possibilités du web ; haute définition, 3d, interactivité. Ce qui pousse le webdesigner a muter vers l’animation. En bandeau, j’ai placé une animation du site en HTML5 CSS3, compatible avec les technologies actuelles. Il est courant que le slider soit en pleine page ; l’image s’affiche en grand partout et pour tout.

Utilisation d’effets d’animations au défilement de la page pour rendre le contenu plus dynamique. Utilisation de l’effet parallax (déplacement variable de la position des éléments en fonction du scroll), en résulte un effet de mouvement et de profondeur plus immersif.

Ces animations, au-delà de surprendre le visiteur, ont pour objectif de narrer une histoire (story telling) et ainsi de faire vivre le contenu.

La typographie est encore plus présente et se conjugue au pluriel : grandes typographies pour le bandeau et les titres orientés enfants, simple et sans serif pour la lisibilité sur mobiles pour le corps de texte.

Concernant le type de contenu, l’objectif étant de communiquer sur les produits (séjours colonies et classes), j’ai mis l’accent dessus en première page. En complément, car l’action de communication ne s’arrête pas au site, j’ai appuyé l’incitation aux réseaux sociaux (boutons call to action) et à la vidéo. Sur la version mobile (ilustration n°2.2.13), les blocs prennent la largeur complète de l’écran. L’approche est très différente de l’écran, laissant place à une navigation verticale uniquement.

 

Tendances à venir pour amélioration du site

Ce site étant mon projet le plus récent, il fait réfléchir aux tendances pour les prochains. Au-delà du design, c’est l’interactivité qui prendra de l’essor. Il conviendra d’aller de plus en plus dans ce sens en animant les pages et en amenant l’internaute à agir.

Je vois quatre orientations à court terme :

Ce projet est riche de part la diversité de ses cibles. Entre les parents, acteurs décisionaires et les enfants, acteurs de demain. Quand on sait que le mobile a pris le dessus sur l’ordinateur et que Youtube a effacé la télévision chez les moins de 25 ans, on est dans la nécessité de tenir compte costamment des usages. Alter-ego est une souche d’innovation, elle me permet une précieuse liberté d’action et m’oblige à prendre des risques et d’aller à l’encontre des besoins de demain.

Je saurai dans quelques mois si l’orientation graphique et interactive sont efficaces. Pour l’instant, j’en tire un bénéfice dans l’apprentissage engendré.