Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop Ooux

2,398 views

Published on

Workshop OOUX, ou comment concevoir une expérience utilisateur orientée objets

Published in: Design
  • Be the first to comment

Workshop Ooux

  1. 1. FLUPA UX DAYS ‘18 OOUX !… ou comment concevoir une expérience utilisateur orientée objets Tous droits réservés
  2. 2. #OOUX #UXdays18 @HugoLabonde @ghyslain_olier Tous droits réservés
  3. 3. USABILIS © | CONFIDENTIEL GHYSLAIN OLIER ghyslain.olier@usabilis.com Consultant UX expert + Coach @Usabilis HUGO LABONDE hugo.labonde@usabilis.com Consultant UX expert + Formateur @Usabilis Tous droits réservés
  4. 4. OOUX : Origine & philosophie OOUX : Workshop Identification des objets Description Liaisons et encapsulations Priorisation Interactions OOUX : Synthèse & discussion
  5. 5. Tous droits réservés
  6. 6. Tous droits réservés
  7. 7. Tous droits réservés
  8. 8. Quels sont les objets ? Où sont ces objets ? Comment ces objets sont rattachés à moi ? Comment ces objets sont reliés les uns aux autres ? Tous droits réservés
  9. 9. Tous droits réservés
  10. 10. sonne Personne Personne Personne Personne Personne Personne Verre Verre Verre Verre Verre Serviette Serviette Serviette Serviette Serviette Serviette Montre Téléphone BagueVerre Verre Verre Verre Table Nappe Tous droits réservés
  11. 11. Tous droits réservés
  12. 12. Tous droits réservés
  13. 13. Tous droits réservés
  14. 14. Tous droits réservés
  15. 15. Tous droits réservés
  16. 16. Tous droits réservés
  17. 17. Du coup OOUX qu’est ce que c’est ? Tous droits réservés
  18. 18. OOUX = Object Oriented UX C’est un système digital intentionnellement organisé autour d’objets réels et de leurs relations dans lequel les interactions et la navigation sont facilités car les objets correspondent au modèle mental de l’utilisateur. Tous droits réservés
  19. 19. ...et faire de l’OOUX ? Tous droits réservés
  20. 20. Pratiquer l’OOUX c’est concevoir en mettant les objets en priorité sur les actions procédurales. C’est déterminer les actions après avoir défini les objets, contrairement à la méthodes qui consiste à sauter directement aux enchaînements d’écrans, interactions, caractéristiques du produit. Tous droits réservés
  21. 21. La Maman de l’OOUX www.rewiredux.com/ooux
  22. 22. Pourquoi faire de l’OOUX ? Tous droits réservés
  23. 23. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Ça renforce l’ergonomie générale - Homogénéité - Apprenabilité - Permet de fluidifier la navigation c’est à dire mieux répondre aux questions “où je suis” et “où je peux aller” - Facilite la distinction et le nommage des contenus Tous droits réservés
  24. 24. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Ça rationalise la conception - Favorise le design modulaire - Plus efficient - Réutilisabilité Tous droits réservés
  25. 25. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Ça simplifie la maintenance - La cohérence entre les différentes vues facilite les mises à jour - Système global plus évolutif Tous droits réservés
  26. 26. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Ça permet de mieux échanger avec les développeurs Le modèle objet est populaire dans le monde du développement. Le fait de réutiliser un concept similaire sur l’interface permet de renforcer les liens et favorise la collaboration avec les développeurs. Tous droits réservés
  27. 27. Qu’est ce qu’un objet ? Tous droits réservés
  28. 28. 12 000 €Renault Clio 2018 • Neuve • Diesel Faire une Offre Afficher plus de détails Rémy Norbert 06 87 56 45 23 83 000 €Tesla Model S P100D 2016 • Occasion • Electrique Faire une Offre Afficher plus de détails Géraldine Hamont 06 67 56 12 23 Volvo 240 Break 1974 • Collection • Essence Faire une Offre Affich Rémy Norbert 06 87 56 45 23 Clio récupéré le 12 mars. Remise en état (peinture portière arrière gauche, ampoule phare avant droit, pare-soleil). Prêt à être vendu à partir du 30 mars. Clio récupéré le 12 mars. Remise en état (peinture portière arrière gauche, ampoule phare avant droit, pare-soleil). Prêt à être vendu à partir du 30 mars. Clio récupéré le 12 mars. Remise en état (p arrière gauche, ampoule phare avant droit, être vendu à partir du 30 mars. Des instances de l’objet “Voiture” Tous droits réservés
  29. 29. Des instances Tous droits réservés
  30. 30. 12 000 €Renault Clio 2018 • Neuve • Diesel Faire une Offre Afficher plus de détails Rémy Norbert 06 87 56 45 23 Clio récupéré le 12 mars. Remise en état (peinture portière arrière gauche, ampoule phare avant droit, pare-soleil). Prêt à être vendu à partir du 30 mars. Une instance de l’objet “Voiture” Tous droits réservés
  31. 31. Photo Année Vendeur Action principale Action secondaire Partager Marque Modèle Prix Description Type Energie Structure de l’objet “Voiture” Tous droits réservés
  32. 32. Tous droits réservés
  33. 33. Caractéristique Méta. Objet lié Interaction Interaction Interaction Méta. Méta. Méta. Caractéristique Méta. Méta. Tous droits réservés
  34. 34. Un Objet est composé de : ● Caractéristiques ● Métadonnées ● Objets liés ● Interactions Tous droits réservés
  35. 35. Mais attention un objet peut avoir plusieurs formes ! Tous droits réservés
  36. 36. Plusieurs formes d’objet Tous droits réservés
  37. 37. Tous droits réservés
  38. 38. Est ce-un objet ? Tous droits réservés
  39. 39. CONSIGNE Objet ou Pas Objet ? Tous droits réservés
  40. 40. Header Tous droits réservés
  41. 41. Header C’est un élément d’interface Tous droits réservés
  42. 42. Vendeur Tous droits réservés
  43. 43. Vendeur Tous droits réservés
  44. 44. Patrick Tous droits réservés
  45. 45. Patrick C’est une instance Tous droits réservés
  46. 46. Client Tous droits réservés
  47. 47. Client Tous droits réservés
  48. 48. Photo Tous droits réservés
  49. 49. Photo C’est une caractéristique (de l’objet client par exemple) Tous droits réservés
  50. 50. Recherche Tous droits réservés
  51. 51. Recherche C’est un élément d’interface Tous droits réservés
  52. 52. 54 TP WORKSHOP OOUX CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS
  53. 53. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS OOUX se pratique... Tous droits réservés
  54. 54. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Le matériel Tous droits réservés
  55. 55. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Entrants Tous droits réservés
  56. 56. EXERCICE MOOCY est une plateforme responsive de cours en ligne Tous droits réservés
  57. 57. MOOCY permet à n’importe quel expert de construire et partager des cours en ligne à des apprentis. Les cours sont sous forme d’une ou plusieurs sessions pouvant être accompagnées de supports. Le service est gratuit et est en phase de construction. La page d'accueil sera un dashboard personnalisable (il sera possible de drag’n’dropper des modules sur la page d’accueil). Le service permettra à l’apprenti de se connecter pour marquer ses cours et ses experts favoris. Une fonction de recherche rapide transverse à tous les cours est prévue. Tous droits réservés
  58. 58. 1LES OBJETS Tous droits réservés
  59. 59. L’OBJET est une classe d’ élément pouvant accueillir plusieurs instances Voiture est un objet La Renault Clio est une instance
  60. 60. CONSIGNE Extraire les objets depuis la description actuelle et éventuellement enrichir de nouveaux objets pertinents Tous droits réservés
  61. 61. MOOCY permet à n’importe quel expert de construire et partager des cours en ligne à des apprentis. Les cours sont sous forme d’une ou plusieurs sessions pouvant être accompagnées de supports. Le service est gratuit et est en phase de construction. La page d'accueil sera un dashboard personnalisable (il sera possible de drag’n’dropper des modules sur la page d’accueil). Le service permettra à l’apprenti de se connecter pour marquer ses cours et ses experts favoris. Une fonction de recherche rapide transverse à tous les cours est prévue. Tous droits réservés
  62. 62. MOOCY permet à n’importe quel expert de construire et partager des cours en ligne à des apprentis. Les cours sont sous forme d’une ou plusieurs sessions pouvant être accompagnées de supports. Le service est gratuit et est en phase de construction. La page d'accueil sera un dashboard personnalisable (il sera possible de drag’n’dropper des modules sur la page d’accueil). Le service permettra à l’apprenti de se connecter pour marquer ses cours et ses experts favoris. Une fonction de recherche rapide transverse à tous les cours est prévue. + thème ? Tous droits réservés
  63. 63. 2LES MÉTADONNÉES LES CARACTÉRISTIQUES & Tous droits réservés
  64. 64. Les Caractéristiques définissent ce qu’est l’objet, son contenu. Elles sont spécifiques à l’objet. Les Métadonnées sont l’ensemble des données sur lesquelles l’utilisateur souhaite filtrer. Photo de la voiture, description.. Année de fabrication, énergie, marque... Tous droits réservés
  65. 65. CONSIGNE Lister les caractéristiques et métadonnées de l’objet COURS et placez les sous le post-it représentant cet objet Tous droits réservés
  66. 66. 3 LES OBJETS LIÉS Tous droits réservés
  67. 67. Les Objets liés sont des instances des autres objets qui sont contenus dans l’objet qui nous intéresse. A chaque objet “voiture” est associé un objet “vendeur” (le responsable de la vente de cette voiture) Tous droits réservés
  68. 68. CONSIGNE Identifiez les objets liés de l’objet COURS et placez les sous l’objet principal Tous droits réservés
  69. 69. 4LA PRIORISATION Tous droits réservés
  70. 70. Photo Année Vendeur Energie Il s’agit de hiérarchiser les caractéristiques, métadonnées et objets liées en fonction de leur importance pour l’utilisateur. Tous droits réservés
  71. 71. CONSIGNE Établissez une hiérarchie du haut vers le bas, sur l’objet COURS, en fonction de l’importance pour l’utilisateur Tous droits réservés
  72. 72. 5LES INTERACTIONS Tous droits réservés
  73. 73. Les Interactions sont toutes les actions pouvant être effectuées sur l’objet Pour l’objet “voiture” : mettre en favoris la voiture, prendre contact avec le vendeur responsable de la voiture, acheter la voiture ...
  74. 74. CONSIGNE Ajoutez les actions associées au dessus de l’objet COURS 1 2 3 Tous droits réservés
  75. 75. Proposition https://hyj0r9.axshare.com Tous droits réservés
  76. 76. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Utilisateurs & OOUX OOUX intervient entre l'enquête terrain et les tests, il s'intègre parfaitement dans le cycle de Conception Centrée Utilisateur. Tous droits réservés
  77. 77. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Méthode miracle ? OOUX fonctionne bien pour des produits larges, complexes, qui évoluent, plutôt de type bibliothèque (Spotity, Linkedin, Netflix, Banque...) OOUX fonctionne moins bien pour les services orientés tâche (tunnel de souscription, interface de paramétrage…) Tous droits réservés
  78. 78. Placer ici une image de cette taille Placer ici une image de cette taille CONFIDENTIEL | © USABILIS | TOUS DROITS RÉSERVÉS Après le OOUX C’est un document évolutif qui supporte le maquettage orienté objet (Design system, Atomic design) Tous droits réservés
  79. 79. 81 Tous droits réservés
  80. 80. Tous droits réservés
  81. 81. 18, rue de Saisset, 92120 Montrouge www.usabilis.com 01 57 63 86 58 Merci

×