SlideShare une entreprise Scribd logo
1  sur  39
Ergonomie et UX
Semaine du 2/11/15 au 6/11/15
Simon Toubiana
Romain Valadon
Julien Marillet
Vincent Vilas Boas
Concept
Création d’un MOOC pôle emploi
Application tablette de diffusion de vidéos gratuites en ligne
Benchmark
Nous avons visité plusieurs sites de MOOC en essayant de voir les plus et les
moins de chacun:
-canvas.net (+interface,open source)
-mooc.francetveducation.fr (+pédagogique;-quantité vidéo)
-futurelearn.com (+originalité thèmes;-absence moteur de recherche par
thème)
-openeducationeuropa.com (+multilinguisme;-ergonomie du site)
Arborescence
Voir le fichier arborescence.png en annexe
Page 1 Wireframe
La page avec chargement pour
simuler l’immédiateté avec le logo de
pôle emploi
Page 2 Wireframe
La page d’accueil
-choix de se connecter si on a déjà un
compte
-bouton mot de passe oublié
-choix de s’inscrire
-choix de connecter en invité si l’utilisateur
ne veut pas ou n’a pas le temps de créer un compte
Page 3 Wireframe
Page d’erreur si on se trompe dans le nom
de compte et/ou mot de passe
-Toujours le choix de pouvoir se connecter
en invité
-Mot de passe oublié
-message d’erreur en rouge
Page 4 Wireframe
Page qui s’affiche quand on clique sur le
bouton s’inscrire à la page 2
-formulaire d’inscription rapide (3 champs)
-case à cocher si on veut recevoir des
notifications sur sa tablette
-toujours le choix de se connecter en invité
-bouton retour si on a appuyé sur s’inscrire sans faire exprès
Page 5 Wireframe
Page qui s’affiche quand il y a une erreur
dans l’inscription de la page 4
-message d’erreur rouge
-toujours le choix de se connecter en invité
-case à cocher
-bouton retour si on a appuyé sur s’inscrire
sans faire exprès
Page 6 Wireframe
Page après s’être connecté pour la première fois avec son compte
-on remplit nos expériences professionnelles
(ex: je suis cuisinier, dans discipline je choisis
Restauration, grâce à ça on aura un choix de
métiers dans la restauration, il prendra cuisinier)
-bouton + pour ajouter d’autres métiers
-un bouton passer l’étape si on est pas intéressé par le fait d’avoir des vidéos
suggérer
Page 7 Wireframe
Page d’accueil du MOOC après s’être connecté avec son compte
-barre de recherche de vidéos
-bouton profil
-bouton rechercher envoi sur une page avec
une recherche à double entrée par secteurs
d’activités et par métiers
-bouton pour recevoir des propositions de secteurs d’activités
-un historique des recherches
Page 8 Wireframe
Page d’accueil du MOOC après s’être
connecté en tant qu’invité
-barre de recherche de vidéos
-bouton rechercher envoi sur une page
(page12) avec une recherche à double entrée
par secteurs d’activités et par métiers
Page 9 Wireframe
Page qui s’affiche quand on clique sur profil
-nouveau bouton retour
-un bouton pour modifier les donnés du profil
-un bouton pour ajouter/changer un compte,
il permet de changer de compte en 2 cliques
-fenêtre avec nos informations
Page 10 Wireframe
Page qui s’affiche quand on clique sur
modifier les données ou si on clique
sur changement de compte
-on peut modifier les informations du
profil en cliquant sur l’une des lignes
du profil
-changement et ajout de compte en 2 cliques
Page 11 Wireframe
Page qui s’affiche quand on clique sur le
bouton proposition dans l’accueil
-défilement verticale des secteurs
activités
-bouton retour
-en cliquant sur un secteur on est amené
à la page 15
Page 12 Wireframe
Page qui s’affiche quand on clique sur
le bouton ‘rechercher par secteurs ou
métiers’ à la page d’accueil
-choix à double entrée
-bouton retour
Page 13 Wireframe
Page qui s’affiche quand on clique sur
métiers
-cercle proposant des métiers par
secteurs d’activités, il suffit de cliquer
sur un secteur pour agrandir le cercle et
voir les métiers correspondant au secteur
-bouton retour
Page 14 Wireframe
Page qui s’affiche quand on clique sur
secteurs d’activités
-cercle proposant des disciplines, il suffit
de cliquer sur une discipline pour agrandir
le cercle et voir les secteurs d’activités
correspondant à la discipline
-bouton retour
Page 15 Wireframe
Page qui s’afficher après avoir choisit soit:
-un secteur d’activité
-un métier
-barre de recherche
Liste de vidéos avec un défilement
verticale
-bouton retour
Page 16 Wireframe
Page qui s’affiche quand on a cliqué sur
une vidéo
-suggestions de vidéos sur le côté
-notre vidéo choisit au milieu
-bouton retour
Maquettes
Nous avons respecter les wireframes pour les maquettes.
Il n’y a pas de différence dans les fonctionnalités entre le wireframe et les
maquettes.
FIN

Contenu connexe

Similaire à Ergonomie et UX design

Présentationcelinetypepad
PrésentationcelinetypepadPrésentationcelinetypepad
Présentationcelinetypepad
Celinevulcain
 
Bien utiliser les réseaux sociaux pour les entreprises (PME)
Bien utiliser les réseaux sociaux pour les entreprises (PME)Bien utiliser les réseaux sociaux pour les entreprises (PME)
Bien utiliser les réseaux sociaux pour les entreprises (PME)
Guillaume PAYRE
 

Similaire à Ergonomie et UX design (20)

Onboarding utilisateurs : de visiteurs à clients heureux
Onboarding utilisateurs : de visiteurs à clients heureuxOnboarding utilisateurs : de visiteurs à clients heureux
Onboarding utilisateurs : de visiteurs à clients heureux
 
Learning Apps: Tutoriel - version complète
Learning Apps: Tutoriel - version complèteLearning Apps: Tutoriel - version complète
Learning Apps: Tutoriel - version complète
 
Rubedo commerce, tutoriel de création de sites ecommerce
Rubedo commerce, tutoriel de création de sites ecommerceRubedo commerce, tutoriel de création de sites ecommerce
Rubedo commerce, tutoriel de création de sites ecommerce
 
Conférence sur le Ecommerce
Conférence sur le EcommerceConférence sur le Ecommerce
Conférence sur le Ecommerce
 
Le Display selon Google Adwords en 2015
Le Display selon Google Adwords en 2015Le Display selon Google Adwords en 2015
Le Display selon Google Adwords en 2015
 
Iscom Lyon 2017 Display Adwords
Iscom Lyon 2017 Display AdwordsIscom Lyon 2017 Display Adwords
Iscom Lyon 2017 Display Adwords
 
Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)
 
Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)
 
Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)Introduction à la publicité payante (Google Ads et Facebook Ads)
Introduction à la publicité payante (Google Ads et Facebook Ads)
 
Présentationcelinetypepad
PrésentationcelinetypepadPrésentationcelinetypepad
Présentationcelinetypepad
 
le marketing en 2010 pour un e-commerçant
le marketing en 2010 pour un e-commerçantle marketing en 2010 pour un e-commerçant
le marketing en 2010 pour un e-commerçant
 
Les outils du web pour communiquer et se faire connaître
Les outils du web pour communiquer et se faire connaîtreLes outils du web pour communiquer et se faire connaître
Les outils du web pour communiquer et se faire connaître
 
Créez votre site en ligne avec YepGarage !
Créez votre site en ligne avec YepGarage !Créez votre site en ligne avec YepGarage !
Créez votre site en ligne avec YepGarage !
 
CR atelier Créer son site - 26 novembre 2015
CR atelier Créer son site - 26 novembre 2015CR atelier Créer son site - 26 novembre 2015
CR atelier Créer son site - 26 novembre 2015
 
Tutoriel rubedo commerce
Tutoriel rubedo commerceTutoriel rubedo commerce
Tutoriel rubedo commerce
 
Les Tests Utilisateurs
Les Tests UtilisateursLes Tests Utilisateurs
Les Tests Utilisateurs
 
Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer
 
Atelier E-commerce 1 Web to Store
Atelier E-commerce 1 Web to StoreAtelier E-commerce 1 Web to Store
Atelier E-commerce 1 Web to Store
 
Bien utiliser les réseaux sociaux pour les entreprises (PME)
Bien utiliser les réseaux sociaux pour les entreprises (PME)Bien utiliser les réseaux sociaux pour les entreprises (PME)
Bien utiliser les réseaux sociaux pour les entreprises (PME)
 
Power point
Power pointPower point
Power point
 

Ergonomie et UX design

  • 1. Ergonomie et UX Semaine du 2/11/15 au 6/11/15 Simon Toubiana Romain Valadon Julien Marillet Vincent Vilas Boas
  • 2. Concept Création d’un MOOC pôle emploi Application tablette de diffusion de vidéos gratuites en ligne
  • 3. Benchmark Nous avons visité plusieurs sites de MOOC en essayant de voir les plus et les moins de chacun: -canvas.net (+interface,open source) -mooc.francetveducation.fr (+pédagogique;-quantité vidéo) -futurelearn.com (+originalité thèmes;-absence moteur de recherche par thème) -openeducationeuropa.com (+multilinguisme;-ergonomie du site)
  • 4. Arborescence Voir le fichier arborescence.png en annexe
  • 5. Page 1 Wireframe La page avec chargement pour simuler l’immédiateté avec le logo de pôle emploi
  • 6. Page 2 Wireframe La page d’accueil -choix de se connecter si on a déjà un compte -bouton mot de passe oublié -choix de s’inscrire -choix de connecter en invité si l’utilisateur ne veut pas ou n’a pas le temps de créer un compte
  • 7. Page 3 Wireframe Page d’erreur si on se trompe dans le nom de compte et/ou mot de passe -Toujours le choix de pouvoir se connecter en invité -Mot de passe oublié -message d’erreur en rouge
  • 8. Page 4 Wireframe Page qui s’affiche quand on clique sur le bouton s’inscrire à la page 2 -formulaire d’inscription rapide (3 champs) -case à cocher si on veut recevoir des notifications sur sa tablette -toujours le choix de se connecter en invité -bouton retour si on a appuyé sur s’inscrire sans faire exprès
  • 9. Page 5 Wireframe Page qui s’affiche quand il y a une erreur dans l’inscription de la page 4 -message d’erreur rouge -toujours le choix de se connecter en invité -case à cocher -bouton retour si on a appuyé sur s’inscrire sans faire exprès
  • 10. Page 6 Wireframe Page après s’être connecté pour la première fois avec son compte -on remplit nos expériences professionnelles (ex: je suis cuisinier, dans discipline je choisis Restauration, grâce à ça on aura un choix de métiers dans la restauration, il prendra cuisinier) -bouton + pour ajouter d’autres métiers -un bouton passer l’étape si on est pas intéressé par le fait d’avoir des vidéos suggérer
  • 11. Page 7 Wireframe Page d’accueil du MOOC après s’être connecté avec son compte -barre de recherche de vidéos -bouton profil -bouton rechercher envoi sur une page avec une recherche à double entrée par secteurs d’activités et par métiers -bouton pour recevoir des propositions de secteurs d’activités -un historique des recherches
  • 12. Page 8 Wireframe Page d’accueil du MOOC après s’être connecté en tant qu’invité -barre de recherche de vidéos -bouton rechercher envoi sur une page (page12) avec une recherche à double entrée par secteurs d’activités et par métiers
  • 13. Page 9 Wireframe Page qui s’affiche quand on clique sur profil -nouveau bouton retour -un bouton pour modifier les donnés du profil -un bouton pour ajouter/changer un compte, il permet de changer de compte en 2 cliques -fenêtre avec nos informations
  • 14. Page 10 Wireframe Page qui s’affiche quand on clique sur modifier les données ou si on clique sur changement de compte -on peut modifier les informations du profil en cliquant sur l’une des lignes du profil -changement et ajout de compte en 2 cliques
  • 15. Page 11 Wireframe Page qui s’affiche quand on clique sur le bouton proposition dans l’accueil -défilement verticale des secteurs activités -bouton retour -en cliquant sur un secteur on est amené à la page 15
  • 16. Page 12 Wireframe Page qui s’affiche quand on clique sur le bouton ‘rechercher par secteurs ou métiers’ à la page d’accueil -choix à double entrée -bouton retour
  • 17. Page 13 Wireframe Page qui s’affiche quand on clique sur métiers -cercle proposant des métiers par secteurs d’activités, il suffit de cliquer sur un secteur pour agrandir le cercle et voir les métiers correspondant au secteur -bouton retour
  • 18. Page 14 Wireframe Page qui s’affiche quand on clique sur secteurs d’activités -cercle proposant des disciplines, il suffit de cliquer sur une discipline pour agrandir le cercle et voir les secteurs d’activités correspondant à la discipline -bouton retour
  • 19. Page 15 Wireframe Page qui s’afficher après avoir choisit soit: -un secteur d’activité -un métier -barre de recherche Liste de vidéos avec un défilement verticale -bouton retour
  • 20. Page 16 Wireframe Page qui s’affiche quand on a cliqué sur une vidéo -suggestions de vidéos sur le côté -notre vidéo choisit au milieu -bouton retour
  • 21. Maquettes Nous avons respecter les wireframes pour les maquettes. Il n’y a pas de différence dans les fonctionnalités entre le wireframe et les maquettes.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39. FIN