UX_IHECS_2022-2023.pdf

Transcript

1. David Hachez & Raphaël Thys .2022
   USER EXPERIENCE
   IHECS MASTER PUB 2
   

   View Slide

2. View Slide

3. FUTURIST
   CREATE IMPACT BY
   SHARING
   
   
   KNOWLEDGE
   49 11
   12
   18
   24+
   STRATEGIC DESIGNER - UX ARCHITECT
   HELP PEOPLE TO START MOVING TOWARDS
   A SUSTAINABLE PREFERRED FUTURE
   

   View Slide

4. FOLLOW ME
   PERSONAL WEBSITE : RAPHAEL-THYS.COM
   

   View Slide

5. FOLLOW ME
   FUTURIMMEDIAT.NET
   

   View Slide

6. INTERNSHIPS!
   

   View Slide

7. View Slide

8. Expectations
   Yours and ours
   

   View Slide

9. Week outlook
   

   View Slide

10. Lundi Mardi Mercredi Jeudi
    AM Introduction
    
    
    What is UX? Why UX? What is
    good UX?
    
    
    Exercice 1
    
    
    User personas and avatars, User
    research
    
    
    Exercice 2 (start)
    Work
    
    
    Final exercice
    Present and future of UX
    
    
    Quizz 2
    PM Customer journey, flows, mental
    models,dimensions of ux
    
    
    Briefing exercice final (teams &
    themes)
    
    
    Quizz 1
    
    
    Fin à 16h
    Work
    
    
    Exercice 2 (end)
    
    
    Refresher "Scenarios, flows, pages"
    (re-briefing exercice final)
    
    
    Fin à 18h
    Technical Session
    
    
    Exercice 3
    
    
    Fin à 17h
    Final exercise: submit case
    
    
    Conclusion
    
    
    Fin à 18h
    WEEK OUTLOOK
    
    
    

    View Slide

11. Evaluation in short
    4 EXERCICES + 2 QUIZZES
    
    
    EXPECT FEEDBACK WITHIN 4 WEEKS
    

    View Slide

12. Visualization
    

    View Slide

13. WHAT IS USER
    EXPERIENCE?
    

    View Slide

14. 14
    SO?!?
    
    
    

    View Slide

15. View Slide

16. View Slide

17. "USER EXPERIENCE, ENCOMPASSES ALL
    ASPECTS OF THE END-USER'S INTERACTION
    WITH THE COMPANY, ITS SERVICES, AND ITS
    PRODUCTS.”
    Don Norman
    

    View Slide

18. “THE PROBLEM ISN’T
    HOW TO MAKE THE
    WORLD MORE
    TECHNOLOGICAL. IT’S
    ABOUT HOW TO MAKE
    THE WORLD MORE
    HUMANE AGAIN.”
    John Maeda
    

    View Slide

19. View Slide

20. UX Models
    
    
    & A
    tt
    ributes
    

    View Slide

21. USER EXPERIENCE
    
    
    

    View Slide

22. Context
    USER EXPERIENCE
    
    
    

    View Slide

23. USER EXPERIENCE
    
    
    

    View Slide

24. USER EXPERIENCE
    
    
    

    View Slide

25. WHY USER
    EXPERIENCE?
    

    View Slide

26. 26
    SO?!?
    
    
    

    View Slide

27. The A
    tt
    ention
    
    
    Economy
    

    View Slide

28. 28
    FROM A SCARCITY TO AN
    ABUNDANCE ECONOMY
    

    View Slide

29. ONE SPACE - GLOBAL MARKET - GLOBAL COMPETITION
    

    View Slide

30. The attention economy
    30
    Omni Channel
    eRetail vs & Retail
    28
    « When information is free,
    Attention becomes expansive »
    - James Gleick
    

    View Slide

31. 31
    THE PARADOX OF SIMPLICITY
    64% of consumers are willing to pay
    more for simpler experiences
    
    
    

    View Slide

32. THE PARADOX OF CHOICE
    

    View Slide

33. View Slide

34. ATTENTION IS A CURRENCY
    “In the digital space
    We earn it, we spend it”
    Brian Solis
    

    View Slide

35. EXPERIENCE
    
    
    IS
    
    
    THE ONLY THING THAT
    WILL NOT BE
    COMMODITISED
    

    View Slide

36. Commoditisation
    THE COMMODITISATION TRAP
    
    
    ANYTHING IS REPRODUCED , COPIED AND IMPROVED
    

    View Slide

37. 37
    YOU SHOULD MOVE TO THE
    
    
    TRANSFORMATION ECONOMY
    Commodities
    Goods
    Services
    Experience
    Commoditization
    Commoditization
    Customization
    Customization
    Shifting up the Value Paradigm
    Pricing
    Market Premium
    Engaged
    Loose
    Customer
    engagement
    Competitive
    position
    Differenciated
    Undifferenciated
    

    View Slide

38. 38
    YOU SHOULD MOVE TO THE
    
    
    TRANSFORMATION ECONOMY
    $ 6.00
    $ 5.00
    $ 4.00
    $ 3.00
    $ 2.00
    $ 1.00
    Commodities Goods Services Experiences
    café en vrac
    Paquet de café
    café
    

    View Slide

39. 39
    YOU SHOULD MOVE TO THE
    
    
    TRANSFORMATION ECONOMY
    

    View Slide

40. View Slide

41. View Slide

42. 42
    YOU SHOULD MOVE TO THE
    
    
    TRANSFORMATION ECONOMY
    

    View Slide

43. EXPERIENCE
    
    
    =
    
    
    VALUE
    

    View Slide

44. EXPERIENCE
    
    
    IS
    
    
    THE NEW BRANDING
    

    View Slide

45. Product
    
    
    Brand
    
    
    User
    
    
    Relation
    

    View Slide

46. 46
    REVENUE
    STREAMS
    How Much
    Human Have You
    Converted As
    User? (A Notion
    Of Paid Users)
    How Much Value
    Propositions Are They
    Using? (A Notion Of
    Transactions And
    Prices)
    How Long They
    Stay With You? (A
    Notion Of Time)
    Total Experience (Journey, Conversation, Brand)
    LONG TERM REVENUE ARE DRIVEN BY
    
    
    TOTAL EXPERIENCE
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. Fast & Slow
    
    
    Thinking
    

    View Slide

57. View Slide

58. OK, SAFE
    

    View Slide

59. View Slide

60. DANGER!!!! RUN!!!!
    

    View Slide

61. FAST VS SLOW THINKING
    

    View Slide

62. 62
    FILTERING BRAIN
    VIDEO
    

    View Slide

63. View Slide

64. MENTAL MODEL
    

    View Slide

65. Cognitive load
    

    View Slide

66. Cognitive load
    

    View Slide

67. Cognitive load
    

    View Slide

68. 68
    CONTINOUS DISATTENTION
    

    View Slide

69. EXERCISE #1 : GOOD VS BAD UX
    

    View Slide

70. MAKING
    
    
    SOFTWARE
    

    View Slide

71. THE ELEMENTS
    
    
    OF UX
    

    View Slide

72. View Slide

73. Site Objectives
    

    View Slide

74. View Slide

75. Context Analysis
    ⚠ Extra layer to the JJG stack
    

    View Slide

76. View Slide

77. BUSINESS CONTEXT
    
    
    Organisation organigram
    
    
    Processes
    
    
    Politics (local, sectorial…)
    
    
    but also internal
    
    
    

    View Slide

78. TECHNICAL CONTEXT
    
    
    Technical debt?
    

    View Slide

79. CULTURAL CONTEXT
    
    
    General culture of the company
    
    Digital maturity
    
    Customer centricity maturity
    

    View Slide

80. User Needs
    

    View Slide

81. 81
    SO?!?
    
    
    

    View Slide

82. “We do not
    
    
    see things as they are.
    We see things
    
    
    as WE are”
    Anais Nin
    

    View Slide

83. USER?
    
    
    User
    
    Customer
    
    People
    

    View Slide

84. USER?
    
    
    

    View Slide

85. USER NEEDS
    
    
    

    View Slide

86. USER NEEDS
    
    
    

    View Slide

87. USER NEEDS
    
    
    

    View Slide

88. USER NEEDS
    
    
    Source : SapiensUX
    

    View Slide

89. USER?
    
    
    

    View Slide

90. JOURNEY, FLOW
    
    
    ARCHITECTURE
    ⚠ Extra layer to the JJG stack
    

    View Slide

91. AVATARS
    SCENARIOS
    PARCOURS
    ETAPES
    
    MOMENTS
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. PARCOURS
    EX : Fashion eCommerce
    
    Scenario : acheter des vêtements en ligne
    Parcours : visiter le catalogue, s’identi
    fi
    er, s’inscrire, faire le check out…
    
    Etapes: Choisir sa catégorie,
    fi
    ltrer selon mes préférences, visiter le produit, l’ajouter
    au panier…
    
    Micro moments: choisir son
    fi
    ltre, le paramétrer, scroller, voir di
    ff
    érentes vues, choisir
    ma taille, ma quantité, cliquer sur ajouter au panier, …
    

    View Slide

98. MOMENTS
    

    View Slide

99. Functional
    Spéci
    fi
    cations
    

    View Slide

100. WHAT FEATURES?
     Stakeholders
     
     Customers
     
     Competitions
     
     Desirable, useful
     
     Functional analysis
     
     Business analysis

     Technical analysis
     68% of projects with e
     ffi
     cient communication and well-de
     fi
     ned requirements meet quality standards.
     
     32% of IT projects fail because of unclear requirements at the planning stage.
     
     Poorly formulated requirements can increase the project timeline and budget up to 60%.
     
     Unclear requirements are responsible for 41% of the global IT development budget for software,
     sta
     ff
     , and external professional services.
     

     View Slide

101. Information
     
     
     Architecture
     

     View Slide

102. WHAT IS IA (AND NOT AI)?
     Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective
     and sustainable way.
     The goal is to help users
     fi
     nd information and complete tasks.
     To do this, you need to understand how the pieces
     fi
     t together to create the larger picture, how items
     relate to each other within the system.
     • Organization Schemes and Structures: How you categorize and structure information
     • Labeling Systems: How you represent information
     • Navigation Systems: How users browse or move through information
     • Search Systems: How users look for information
     Some examples of IA sub-specialties include focusing on search schemas, metadata, taxonomy, etc.
     

     View Slide

103. SITEMAPS
     

     View Slide

104. DIAGRAMS AND FLOWS
     PARTNER’s
     WEBSITES
     POD
     DATABASE
     EXTERNAL
     REVIEWER
     PARTNER
     (internal reviewer)
     PARTNER
     (profile creator)
     NEW PROFILE
     LOGIN
     NEW PROFILE
     INTERNAL
     REVIEW
     UPDATE
     PROFILE
     DRAFT
     NOTIFICATION
     NOTIFICATION
     Review
     done?
     daily
     NOTIFICATION
     Review
     done?
     Day 5
     Reactivity notifications
     Review
     done?
     Day 5
     Reactivity notifications
     NOTIFICATION
     EXTERNAL
     REVIEW
     NOTIFICATION
     Update
     done?
     Daily
     NOTIFICATION
     Update
     done? > 5
     days?
     Reactivity notifications
     NOTIFICATION NOTIFICATION
     NOTIFICATION
     NOTIFICATION
     EEN 3d party
     WEBSITE
     3d party
     WEBSITE
     DISSEMINATION
     STORED IN DB
     CREATE NEW PROFILE
     

     View Slide

105. WIREFRAMES
     SKETCHES
     

     View Slide

106. WIREFRAMES
     ZONING
     

     View Slide

107. WIREFRAMES
     LOW FI
     

     View Slide

108. WIREFRAMES
     HIGH-FIDELITY
     

     View Slide

109. Content
     
     
     Requirements
     

     View Slide

110. CONTENT REQUIREMENTS
     

     View Slide

111. UX WRITING
     UI text (UI = interface text delivered via screens or voice while
     using the product)
     
     UX copy (UX = text for any part of the user experience,
     including marketing and support copy)
     
     Interface copy
     
     UI content
     
     Microcopy
     
     Content
     
     Product or in-product copy
     

     View Slide

112. UX WRITING
     

     View Slide

113. UX VISUALS
     

     View Slide

114. Interaction
     
     
     Design
     

     View Slide

115. FITTS LAW
     

     View Slide

116. FITTS LAW
     

     View Slide

117. View Slide

118. View Slide

119. INTERACTION
     

     View Slide

120. PROTOTYPES
     

     View Slide

121. PATTERNS SELECTION
     

     View Slide

122. Information
     
     
     Design
     

     View Slide

123. View Slide

124. View Slide

125. Navigation
     
     
     Design
     

     View Slide

126. Good navigation design can:
     
     
     • Enhance a user’s understanding
     
     
     • Give them con
     fi
     dence using your product
     
     
     • Provide credibility to a product
     
     
     • It re
     fl
     ects your brand
     

     It tells users their location
     
     
     • It provides access to information
     NAVIGATION
     

     View Slide

127. View Slide

128. View Slide

129. Interface
     
     
     Design
     ⚠ Not used on my side
     

     View Slide

130. Visual
     
     
     Design
     

     View Slide

131. VISUAL DESIGN
     LOOK & FEEL
     
     BRANDING INTEGRATION
     
     DANGEROUS PHASE
     

     View Slide

132. UX PROCESS
     

     View Slide

133. USER EXPERIENCE
     
     
     

     View Slide

134. USER EXPERIENCE
     
     
     

     View Slide

135. USER EXPERIENCE
     
     
     

     View Slide

136. UX PROCESS TO DELIVERABLES
     

     View Slide

137. LEAN UX
     

     View Slide

138. AGILE
     

     View Slide

139. AGILE
     

     View Slide

140. USER RESEARCH
     

     View Slide

141. HOW PEOPLE WILL
     USE YOUR
     PRODUCTS?
     

     UNEXPECTEDLY
     

     View Slide

142. View Slide

143. No UX
     
     
     without the USER
     

     View Slide

144. Select the right
     research method
     

     View Slide

145. View Slide

146. RISKS OF USING THE WRONG METHOD
     

     View Slide

147. Frame
     
     
     the problem right,
     
     
     Ask the right
     questions
     

     View Slide

148. View Slide

149. Interprete data
     correctly
     

     View Slide

150. View Slide

151. View Slide

152. View Slide

153. ATTITIDINAL
     What people say
     

     View Slide

154. ATTITIDINAL
     Interviews
     

     View Slide

155. ATTITIDINAL
     Focus groups
     

     View Slide

156. ATTITIDINAL
     Surveys
     

     View Slide

157. ATTITIDINAL
     Card sorting
     

     View Slide

158. BEHAVIOURAL
     What people do
     

     View Slide

159. BEHAVIOURAL
     USABILITY TESTS
     

     View Slide

160. BEHAVIOURAL
     EYE TRACKING
     

     View Slide

161. CRO
     

     View Slide

162. View Slide

163. View Slide

164. View Slide

165. View Slide

166. View Slide

167. CRO STATS
     The average conversion rate for websites is approximately 2.35% across all industries.
     
     
     Though certain industries will have higher conversion rates, others will have lower.
     
     
     A conversion rate of 11% is recorded on the best-performing websites.
     
     
     The average conversion rate for desktops is 4.14%.
     
     
     The average conversion rate on tablets is 3.36%.
     
     
     The average conversion rate on smartphones is 1.53%.
     
     
     Brands that build more than 40 landing pages will receive 1200% more leads than those brands with less than
     fi
     ve landing pages.
     
     
     Personalization of emails can increase conversion by 10% or more.
     
     
     Videos can improve conversions by 86%.
     
     
     Nearly two-thirds of consumers (65%) will start their purchasing journey on a mobile device.
     
     
     

     View Slide

168. UBIQUITOUS UX
     

     View Slide

169. GRAPHICAL, VISUAL
     

     View Slide

170. TEXTUAL
     

     View Slide

171. CONVERSATIONAL
     

     View Slide

172. VOCAL
     

     View Slide

173. VOCAL
     

     View Slide

174. GESTUAL
     

     View Slide

175. GESTUAL
     

     View Slide

176. QUIZZ #1
     

     View Slide

177. FINAL EXERCISE BRIEFING
     Select up to 3 scenarios, flows and pages from 1 of the 2 business
     cases proposed:
     

     - Provide a critical view on the funnel
     

     - Propose improvements and recommendations having your avatar in
     mind
     Format :
     

     5-6 Minutes video
     

     1 link to an optional document
     Criteria for evaluation:
     

     - Group effort
     

     - Ability to think strategically while using rational arguments to back up
     your decisions / advices
     

     - Clarity of your message
     

     View Slide

178. FINAL EXERCISE BRIEFING
     Exercice 1
     
     
     Submit form
     
     
     Exercice 2
     
     
     Persona template: IHECS-UX-2022-EX-
     PERSONA.xlsx
     
     
     Submit form:
     
     
     Exercice 3
     
     
     Submit form :
     
     
     Tag Manager Google / Google Analytics /
     Jimdo.fr
     
     
     Exercice 4
     
     
     Submit form :
     Quizz 1
     
     
     Form
     
     
     Quizz 2
     
     
     Form
     
     
     Liste des groupes: Groupes UX.xlsx
     
     
     Lien vers la présentation théorique:
     
     
     Aide Jimdo pour intégration (link)
     

     View Slide

179. HISTORY
     
     
     & FUTURE OF UX
     

     View Slide

180. Mainframe computers
     

     View Slide

181. MAINFRAMES COMPUTERS
     

     View Slide

182. Internet
     

     View Slide

183. Darpa
     

     View Slide

184. Academic internet
     

     View Slide

185. Micro computers
     

     View Slide

186. GUI
     

     View Slide

187. Laptops
     

     View Slide

188. Early public internet
     

     View Slide

189. The new economy
     gold rush
     

     View Slide

190. TUI and iPhone
     

     View Slide

191. Mobile internet
     

     View Slide

192. AI, AR and Ubiquity
     computing
     
     
     (and interfaces)
     

     View Slide

193. Brain - Computer
     
     
     Interface
     

     View Slide

194. Degrowth & resource
     scarcity?
     

     View Slide

195. View Slide