fabernovel loader

Sep 17, 2014 | 4 min de lecture

Design

App Makeover – Snapchat

Marine Pichard

Head of Design


FABERNOVEL TECHNOLOGIES
Notre pôle design s’est intéressé à l’application de partage de médias éphémères baptisée Snapchat.
Rappelons que l’application, lancée en 2011, compte aujourd’hui plus de 82 millions d’utilisateurs actifs par mois, soit plus de 760 millions d’échanges de photos et vidéos chaque mois sur le réseau.

Derrière ce succès se cache un concept simple et innovant de capture et partage de médias.
Si vous n’êtes pas déjà familier avec l’application, la particularité de Snapchat réside dans son traitement des objets envoyés. Une fois la prise de vue effectuée, l’utilisateur détermine une durée de visualisation qui limite le temps de lecture du Snap avant de le rendre indisponible.

Partis pris

Bien que l’application propose une multitude de fonctionnalités telles que le chat, la vidéo conférence, l’ajout de filtres photos, les “story” (vidéos et/ou photos consultables pendant 24h), nous nous sommes uniquement concentrés sur le partage de photos.
Dans cet exercice de style nous proposons de poser un regard critique sur certains aspects ergonomiques et graphiques.

L’application

Navigation

Avant d’entrer dans le détail, notre première analyse s’est portée sur les éléments de navigation des écrans principaux : accueil, mes snaps, mes amis.
Sur le schéma présenté ci-dessous nous présentons les points sensibles.

Application actuelle : pages Mes Snaps, Accueil et Mes Amis

Les deux pictogrammes au bas de la page d’accueil sont des représentations schématiques des principaux éléments de navigation. Ce parti-pris graphique fort implique à la première manipulation une action contre productive pour l’utilisateur novice : cliquer pour ouvrir et comprendre l’écran qui se cache derrière. Tandis qu’ils devraient permettre une compréhension rapide de l’action cachée derrière ce symbole.

Sur les pages “mes snaps” et “mes amis”, le bouton de retour natif est remplacé par le pictogramme d’appareil photo. L’idée est judicieuse, puisque celui-ci renvoie vers la page d’accueil (prise de vue). Mais cela expose une incohérence lors de l’animation de transition “mes snaps” vers “accueil”. Le bouton étant positionné à l’opposé de la translation proposée (cf animation ci-dessous).

Animation des 3 pages principales de l’application

Résultat

Nous présenterons plus bas nos propositions graphiques en regard de l’application actuelle (version 7.0.5).

Connexion / Inscription

Ecran de connexion / Inscription

En l’état, l’écran de connexion nécessite deux pages pour se connecter à l’application. Nous avons fait le choix de regrouper ces deux parties en une seule afin de rapidement profiter de l’application.

Accueil

Accueil

Compte tenu du cas d’usage de l’application : capturer et partager un événement à ses amis, l’entrée sur l’appareil photo est une nécessité incontournable afin de prendre son cliché instantanément. Il est donc essentiel que l’ergonomie de cet écran soit parfaitement étudiée.

Contrairement à l’application actuelle qui positionne les éléments les plus importants de l’application en bas de l’écran (“mes snaps”, “prise de vue”, “mes amis”), nous suggérons une autre approche. Il nous semble plus pertinent d’opérer un regroupement par typologie, avec d’une part les éléments de navigation et d’autre part les outils de prise de vue.
En utilisant les composants natifs proposés par la plateforme, l’utilisateur se repère facilement. Nous proposons de ré-exploiter l’espace alloué à la barre de navigation pour l’employer en ce sens et positionner ainsi en haut de l’écran les entrées “mes snaps” et “mes amis”.

Mes snaps

Mes snaps

Nous avons retravaillé les pictos très schématiques d’envoi et de réception des médias en une représentation plus symbolique.

Une fois le média consulté, il reste visuellement très présent dans la liste. Afin de faciliter la lecture, nous avons grisé ces snaps déjà vus, cela permet de faire ressortir ceux non consultés. Enfin, nous avons indiqué la réponse à un snap par une flèche en bout de ligne.

Visualisation d’un snap

Visualisation d’un Snap

Actuellement l’utilisateur doit maintenir son doigt sur l’écran afin de visionner le snap reçu ; cependant la photo peut être partiellement cachée. Nous proposons une approche différente : celle du “one click”, plus habituelle dans les usages pour obtenir l’information, elle permet par la même occasion de profiter pleinement du média. Nous avons illustré le compte à rebours par une barre de progression qui sert également de bouton “réponse rapide”.

Personnalisation d’un snap

Personnalisation d’un Snap

Une fois la photo prise, l’utilisateur peut personnaliser son snap avec du texte, de la couleur et choisir le temps d’affichage.

Là encore, nous avons souhaité classer les différents éléments par typologies : les 3 outils d’édition dans la tool bar, et les deux actions “annuler” (quitter) et “envoyer” (passer à l’étape suivante) dans la barre de navigation.

Personnalisation d’un Snap – Temps, Couleurs, Texte

Nos actions :

  • Simplification du timer, on évite le swipe du picker en proposant un “one click”
  • L’outil sélection de la couleur est difficile à utiliser : trop petite par rapport à la taille d’un doigt. Nous simplifions à 5 couleurs dans les tonalités de l’application
  • La fonctionnalité “texte” fonctionne bien, nous gardons la mise en forme telle que l’application actuelle le propose
Personnalisation d’un Snap – Récapitulatif avant envoi

Envoyer à…

Envoyer à…

Nous uniformisons toutes les barres de navigation de l’application en vert afin de garder une cohérence entre les différents écrans.

Nous proposons une mise en page quelque peu différente, en utilisant notamment des photos de profil pour les contacts afin de donner un côté plus personnel aux “amis”.

Conclusion

Avec sa popularité, il nous paraissait intéressant d’étudier cette application et d’en proposer une nouvelle version. Nous espérons que les “Snapchateurs” apprécieront notre travail et nous sommes à l’écoute pour tout échange sur le sujet.

logo business unit

FABERNOVEL TECHNOLOGIES

150 talents pour répondre aux défis technologiques de la transformation digitale.

à lire