retour

rethinking UX by Steven Berquez

UNE IMPORTATION

INTUITIVE

Facebook ? Etude de cas
imac

FACEBOOK C’EST QUOI ?

Facebook est l’un des réseaux le plus utilisé partout dans le monde, il compte 1,712 milliards d’utilisateurs à son actif. Notre mission dans ce workshop est de repenser l’expérience utilisateur pour une fonction et ses sous-fonctions.

J’ai sélectionné le statut Facebook et l’importation de média. Mon objectif est de rendre le transfert de média sur la plateforme le plus simple et intuitif possible.

COMMENT ET POURQUOI AMÉLIORER L’IMPORTATION DE MÉDIA SUR UN STATUT FACEBOOK ?

Facebook n’est pas là simplement pour discuter, dire qu’on mange de la glace à Nice ou qu’on aime les chats ! C’est un moyen de partager des photos, des vidéos et pourquoi pas des musiques ? Le média a autant d’importance que le statut, alors rendons le aussi simple que de taper du texte.

macbook

Objectif: Définir ce qu’est Facebook

Première étape: redéfinir sur papier ce qu'est Facebook.

  • À quoi sert le service?
  • Quels sont ses objectifs?
  • Est-ce que les chats sont des aliens… wait ! what ?
work

Nous avons obtenu une vision globale de l’utilisation que nous en faisions et nous les avons transformé en “fonctionnalités” qui nous a permis de créer une architecture. J’ai nommé “el architectoura post ! it !”.

architecture d'information

Sur base de cette “el architectoura post ! it !” réalisée collectivement, nous avons choisi une fonctionnalité principale à travailler avec ses sous-fonctionnalités. Le fameux statut facebook et l'importation de média.

Analyse de Facebook:

etape1 etape2 etape3 etape4 etape5 etape6 etape7 etape8 etape9 etape10 etape11 etape12 etape13 etape14 etape15 etape16

Objectif: Créer des utilisateurs types, faire des groupes représentatifs de la fonctionnalité analysée et “Rapid prototyping”

Chaque utilisateur type est divisé en 3 parties:

  • 1ère partie: biographie et photo
  • 2ème partie: besoins et objectifs
  • 3ème partie: son comportement
professeurs

Nous les avons comparés et avons créé plusieurs groupes. Chaque ensemble a un scénario qui décrit des utilisations dans des contextes bien définis. Il nous a été demandé de rationaliser un maximum et de ne pas jouer sur la naïveté de l’utilisateur. Nous avons obtenu 4 groupes: Partage/Ne publie rien/ Garde le contact/Publications régulières

De cette dernière étape nous avons pu commencer les “Rapid prototyping”

Objectif: Proposer des prototypes (papier puis sur InVision), les faire tester et les améliorer.

Je me suis basé sur une série d’actions très intuitive pour que l’utilisateur soit guidé pas à pas jusqu’à l’importation de son média sur le statut Facebook.

Les termes “Photo/Vidéo” n'étaient pour moi, pas assez générals, car nous avons imaginé la possibilité d’importer du son et des documents en prévisualisation rapide. C’est pourquoi le bouton porte le nom “importer”.

Tester le InVision:

invision

Objectif: Créer les visuels PSD et créer le contenu de l’étude de cas.

Pour les visuels, j’ai gardé la charte graphique de Facebook et j’y ai ajouté quelques couleurs pour permettre de différencier de manière rapide, les différents logos dans l’importation de média.

La mise en place et le feedback restent plus ou moins similaires, sauf l’importation de musiques ou de sons. J’ai repris le principe de prévisualisation en direct de SoundCloud, l’utilisateur pourra écouter le son et naviguer dedans avant que le statut soit posté.

preview du statut

Objectif: Créer le visuel PSD de l’étude de cas

Parce que je suis parfois fainéant et que je suis comme Napolon Hill, j’aime allouer peu de temps à une tâche, mais sur le long terme. J’avoue avoir procrastiné… Bon plus simplement. J’ai pas bossé, j’ai donc mis mes idées sur papier dans un premier temps, puis après avoir éliminé mes idées sur papier, je suis allé sur Pinterest.

recherche design

Objectif: Travailler l’étude de cas et partager le travail de l’équipe

Après passage des professeurs, j’ai raccourcis les textes afin de les exprimer en image, j’ai également revu mes typographies, ma mise en page et mes objectifs.

J’ai conservé les couleurs de Facebook et j’ai joué sur les superpositions pour rythmer le site. J’ai également ajouté une navigation pour pouvoir naviguer librement de la page commune à mon case study.

les versions desktops