The Importance of UX

5,309 views

Published on

UX is omnipresent nowadays and will grow more and more the tool of innovation. Companies are becoming aware of the vitality of adopting this technology from the start. The Importance of UX is a presentation of how we as a UX Design Team implement UX in projects.

Published in: Design, Technology

The Importance of UX

  1. 1. The importance of UX
  2. 2. What is UX?
  3. 3. What we’ll cover A brief history and future of UX What is UX and why? How do we deal with UX: Project approach
  4. 4. A brief history and future of UX
  5. 5. A brief history of UX Since the beginning of the Machine Age Henry Ford pioneered ways to make human labor more efficient, productive and routinized
  6. 6. 1940: ergonomics & human factors A brief history of UX Focus on design of things to best align with human capabilities
  7. 7. 1950: cognitive science & augmented reality A brief history of UX potential of computers to serve as a tool to augment human mental capacities
  8. 8. A brief history of UX 1955: ‘Designing for People’ by Henry Dreyfuss “When the point of contact between the product and the people becomes a point of friction, then the [designer] has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier— by contact with the product, then the designer has succeeded.”
  9. 9. first GUI first mouse first computer-generated bitmap graphics > inspired Apple Macintosh Xerox PARC A brief history of UX
  10. 10. A brief history of UX Rise of Human Computer Interaction
  11. 11. A brief history of UX
  12. 12. A brief history of UX
  13. 13. A brief history of UX Donald Norman User centered designer at Apple first mention of UX
  14. 14. A brief history of UX Increasing functionality, interactivity >>>
  15. 15. Focus even more on the user A brief history of UX
  16. 16. A brief future of UX technology will not disappear will become more people-centric technology will not look like technology anymore it will dissolve in everyday life
  17. 17. A brief future of UX technology will not just tell you the answer, it will help you solve your problems together the ability to figure out what a person needs at a given moment emerges as the killer app.
  18. 18. A brief future of UX More hands, less mice Natural UI Less chrome, more content
  19. 19. A brief future of UX Contextual Designing
  20. 20. A brief future of UX Unbundling of apps
  21. 21. Future technologies
  22. 22. A brief future of UX UX will become more and more the tool of innovation
  23. 23. Movie Corning https://www.youtube.com/watch?v=v-Hd9kip1wA A brief future of UX
  24. 24. What is UX and Why is it important?
  25. 25. Everyday, everywhere we experience things
  26. 26. We love talking about them
  27. 27. So if we like talking about experiences and feelings so much why do we keep creating horrible experiences?
  28. 28. We’re building something that needs to be used by someone
  29. 29. How does it make people feel? How can we make their life easy? How can we add value to their life? How does it solve a user’s problem?
  30. 30. Give your users control but not too much
  31. 31. So what is UX?
  32. 32. We want you to make the user experience pretty What UX is not
  33. 33. What UX is not UX is not UI
  34. 34. psychology anthropology architecture sociology computer science industrial design coginitive science communication design content strategy What UX is
  35. 35. Information Architecture Interaction Design Visual Design Foundation Function Emotion
  36. 36. What a product does > form follows function How a product works > form follows psychology (of users)
  37. 37. Easthetic design > does the button have the right texture and appeal? Functional design > does it trigger the right action? UX design > is it big enough, does it have the right location to other buttons? > Does it feel right?
  38. 38. Thoughtful design doesn't just enable our habits; it pushes us to improve behavior, making us more economical, reflective, and responsible
  39. 39. The best UX design is when everybody is involved IBM: 1 dollar in design is 100 dollar in development
  40. 40. What is UX? “Experience design is the design of anything, independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal.” Jesse James Garrett “UX is the tangible design of a strategy that brings us to a solution” Erik Flowers
  41. 41. Why UX? “Good design brings a story closer to the people” Richard Turley
  42. 42. Can you design UX? Experience is a subjective phenomenon that occurs within the mind of the individual
  43. 43. So, if you aren’t designing experiences, then what exactly is user experience design?
  44. 44. You can design for UX A good UX designer understands how people see the world A good UX designer understands how people all see the world differently A good UX designer has good soft skills He knows how not to let people feel stupid
  45. 45. A good UX designer listens, tries to understand
  46. 46. Good UX principles First impressions last
  47. 47. Don’t ask too many questions before user can use the application Good UX principles
  48. 48. Good UX principles Give users tiny surprises, regular updates
  49. 49. Good UX principles Create for playfulness
  50. 50. Good UX principles Hidden treasures
  51. 51. Good UX principles There were smartphones before iPhone but Apple was the first one to create a good UX
  52. 52. Good UX principles Innovate
  53. 53. Good UX principles See the product in an ecosystem
  54. 54. Good UX principles The most effective webpage online!
  55. 55. UX for web applications
  56. 56. Before companies had to have a website they couldn’t fall behind
  57. 57. Adding functions and features increases the difficulty level of usage
  58. 58. Saving users time saves company money Good UX
  59. 59. Types of applications Brand presence Marketing Campaign Content source Task-based applications
  60. 60. Brand presence Perception of a company brand Offer easy access to products or services
  61. 61. Marketing Campaign Set focus within limited timeframe combined with other media targeted at groups Microsite
  62. 62. Content Source Newssites, intranet, support centers Focus on presentation and structure of information
  63. 63. Task-based applications
  64. 64. Crossover projects E-commerce E-learning Social networking mobile
  65. 65. Practical A project approach
  66. 66. The lifecycle of a project Define Technology Strategy Formulation Discover Requirement Analysis Specification Design Architecture Design Documentation Develop Standards Best Practices Driven SDLC Deploy Production Operations Support
  67. 67. What we’ll do - Capturing the project ecosystem Get to know the business & Business Requirements SWOT Analysis > Project objectives - Plan the project Project Approach: Methodology - Research & Test Task Models & User Journeys Customer Experience Map - Information Architecture Usability Testing Wireframing - Visual Design
  68. 68. Project Folder Keynote / Powerpoint Description of company Personas photo’s of workshops Wireframes Mockups
  69. 69. Team 1 LETS Leuven Trading website Team 2 Rockstar Energy Sales app
  70. 70. Project team - business representative (CEO, IT manager,…) - product owner - project manager - business analyst - ux designer - developer CLIENT SUPPORT
  71. 71. Part 1 Capturing the Project ecosystem: Business requirements
  72. 72. Project kickoff
  73. 73. Kickoff meeting - Understand the company culture - What project will we be working on? - Why is the project important to the company? - Know the people you’ll be working with - Type of work you’ll be engaged in WHAT IS THE STRATEGY IN A LINE? WHAT ARE THE PROJECT OBJECTIVES?
  74. 74. Project objectives help you: - help you ask the right questions - plan research with users - details the ideas from stakeholders - create effective interaction designs - manage request for changes
  75. 75. Workshop 1. Business requirements > Know the problem before you create the solution 2. Must have functionalities/pages > Define must have functionalities or pages (home, login, catalog, forum,…) 3. SWOT analysis > Know the Strengths, Weaknesses, Opportunities and Threats of the product 4. What is the strategy? > Formulate in one sentence Understand the business Understand the product
  76. 76. eg search form does not bring back all possible results
  77. 77. Part 2 Plan the project
  78. 78. Which way are we gonna go?
  79. 79. Specify the must-haves and nice to haves within budget Define the deadlines and key points Create high level estimation Envision the scope Understand the scope
  80. 80. Project approach Waterfall / Agile?
  81. 81. Waterfall - treats the steps of a project as separate, distinct phases - approval of one is needed to continue on to the next - assumes that each phase can be completed with minimal changes to the phase before it > can throw off the plan! - more straightforward planning - better measure of process
  82. 82. Waterfall approach
  83. 83. WHEN WATERFALL? - the project is simple - the project is complicated, but you have the expertise to deliver it - it is all you know and you have no support for change - the upfront investment is not risky to make - you focus your performance measures on delivery date and budget
  84. 84. Agile - Change is constant - Much more flexibility - More people-centric - Fast feedback from client - Focus on rapid collaboration - Less focus on detailed documentation - Working in sprints - Quickly produces working versions
  85. 85. Agile Method
  86. 86. - More complex, novel or urgent projects - You don't completely understand the value and definition of what you are building - There’s a budget for it - Whole team is very dedicated to project - Everybody is preferably in the same physical space WHEN AGILE?
  87. 87. Agile Method
  88. 88. Developers transition into Agile via Lean UX Less deliverables Less time and waste Quicker to market Build - Measure - Learn (Obligation to) Fail at start
  89. 89. Part 3 Research & Test: User Requirements
  90. 90. Let’s start designing
  91. 91. FOCUS ON USER
  92. 92. Design in context Information design principles
  93. 93. Design with user in mind Information design principles
  94. 94. Keep it simple Information design principles
  95. 95. Don’t forget to design for edge cases Information design principles https://www.youtube.com/watch?v=4m2YT-PIkEc
  96. 96. Use analytics Research
  97. 97. Recreates DOM and its mutations > so shows how browser and website were behaving at that time https://www.fullstory.com/
  98. 98. Competitors all use a certain approach: > should you deviate from this? > recognize design patterns > evaluate other sectors as well Competitor benchmarking
  99. 99. Different forms of user testing: - Guerrilla testing - Stakeholder interview - Contextual research - Call center listening, email reading,… - customer surveys - … User Testing
  100. 100. - Must meet your user group - Information based on research - Can never replace real user testing Personas
  101. 101. User Journeys - Set the context Where is the user? What is around him? - Progression: how does each step enable him to get to the next? - Device: what device is he using? Is he/she a novice, expert - Functionality: what type of functionality does he/she expect? is it achievable? - Emotion: what is their emotional state in each step? is he/she engaged, bored, annoyed
  102. 102. User Journey
  103. 103. Task Models - Description of activities a user needs to perform in order to reach their goal - Helps you understand how your users interact with information provided by the product - Can help you choose features for a widget (eg comparison table, sharing widget,…) - Can help you decide: eg is the widget handy here in the task flow or elsewhere? - Helps you understand how users think about the task at hand
  104. 104. Task Models
  105. 105. Workshop 1. User needs & requirements > Brainstorm over possible user requirements? 2. User stories > Define user stories (as a user i want to…, so i…) Understand the user
  106. 106. Customer experience map
  107. 107. Part 4 Information Architecture & Conceptualization
  108. 108. Start building
  109. 109. Design Tools
  110. 110. - IA should solve information overload - IA is commercially important > how well a user finds the product or service - Makes SEO easier - Will result in site map or navigation What is Information Architecture?
  111. 111. Sitemap or Navigation Techniques: Card Sorting Mindmap Tools: optimalsort.com websort.com
  112. 112. Specify the templates: what pages will you be needing? Order them in rank of prioritisation Prioritize Pages
  113. 113. Sketch!
  114. 114. Workshop 1. Create sketched wireframes 2. Create Sitemap Envision the product
  115. 115. Wireframes
  116. 116. Principles of wireframes Don’t spend too much time with makeup
  117. 117. Principles of wireframes Use consistent terminology
  118. 118. Principles of wireframes You can provide annotations Why men need postits!
  119. 119. Principles of wireframes Test them! > usability testing
  120. 120. Prototypes - Interactive wireframes - Ideal for testing - Fail first and fail early!
  121. 121. Workshop 1. Create wireframes Design the product
  122. 122. Usability Testing - Let users perform tasks on an existing website - Write down quotes or remarks from users on sticky notes
  123. 123. Usability Testing - Develop a test plan - Choose participants - Analyze data remote tools: usertesting.com
  124. 124. Workshop 1. Define user tasks 2. Usability testing 3. Analyze data Test the product
  125. 125. Part 5 Visual Design
  126. 126. Start playing with makeup!
  127. 127. Design Tools
  128. 128. Visual design principles Innovate in content and proposition Imitate in patterns and conventions
  129. 129. Visual design principles Avoid using Lorem ipsum use real content if possible
  130. 130. Visual design principles Strip out as much as you can
  131. 131. Visual design principles Design with fingers in mind
  132. 132. Visual design principles Maintain a pixel-perfect mentality
  133. 133. Design elements Navigation - Use proper labels see Google Adwords Keyword tool www.adwords.google.com - Click here > mistake: you should always now where navigation is taking you - Try to make navigation scalable if info is added later
  134. 134. - Keep it lightweight, no overkill with content most users don’t see it, they arrive at other pages - Should convey easily what we do or offer - What is the key task? put this on the homepage - Logged in and logged out states (cfr Flickr) - Homepage should inspire - Should show that it’s regularly updated (eg new products, dates, facebook likes) Design elements Homepage
  135. 135. Show photos of how something is used, how it would look in your world Design elements Images
  136. 136. Pictures say more than words Design elements Images
  137. 137. Use authentic images not stock photos Design elements Images
  138. 138. Mobile first Luke Wroblewski - Mobile Usage is explosive - Screen real estate forces you to think about the essence native capabilities of the devices - New strategy New way of writing code Before we design a word on…
  139. 139. Website that looks great on all devices Responsive flexible grids flexible images mediaqueries conditional loading modernizr Adaptive better because same url but different structure
  140. 140. Graceful degradation vs progressive enhancement
  141. 141. Visual Design Photoshop or Illustrator?
  142. 142. Design in Photoshop - Design with finger in mind - Create sharp images http://dcurt.is/pixel-fitting - Align to edges - Organize and name layers - Use vector shapes - Don’t just rescale - Don’t color manage document
  143. 143. Workshop 1. Create mockups Design the product
  144. 144. Part 6 Exporting for development
  145. 145. Exporting for development - Create pixel perfect assets - Align to grid - Export in different pixel dimensions (for mobile use)
  146. 146. Slices pngexpress http://www.cutandslice.me Exporting Tools
  147. 147. Wireframing & Prototyping Axure Invision Sketch Proto.io Tools Visual Design Photoshop Illustrator Sketch
  148. 148. Tips & Inspiration Dribbble Pttrns Pinterest Behance Fontastic Flat icons Freebeegoodies Teehan Lax
  149. 149. Templates iPhone 5 templates pixeden.com http://www.teehanlax.com/tools/iphone/ http://www.teehanlax.com/tools/ipad/
  150. 150. Grids 960 grid system http://960.gs/ iPhone 5 grid edwardsanchez.me/blog
  151. 151. Tumblr Pinterest airBnB Yahoo weather app Best practices
  152. 152. Interesting Reading Smashing UX Design: Foundations for Designing Online User Experiences 100 Things Every Designer Needs to Know About People (Voices that Matter) Simple and Usable: Web, Mobile, and Interaction Design A Project Guide to UX Design: For user experience designers in the field or in the making User Experience Innovation: User Centered Design that Works Smashing Magazine A List Apart Flipboard UX Magazine
  153. 153. Thanks!

×