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.

Session UXnUI SJCIT-1.0.1-1apr2019-desops.io

89 views

Published on


This is part of the UX/UI workshop I conducted at SJCIT , Chikbalpur on 1st April 2019 .
UI/UX workshop is organized with an objective to provide students with understanding the value of user experience in product design and to have hands-on exposure to the Product Development process.
More details: http://desops.io/2019/03/31/ui-ux-workshop-for-startups-at-sjcit-chickballapur-1st-april-2019/

Published in: Design
  • Be the first to comment

Session UXnUI SJCIT-1.0.1-1apr2019-desops.io

  1. 1. Session UX&UI Samir Dash 1 April 2019 SJC Institute of Technology, Chikkaballapur
  2. 2. Which is tastier?
  3. 3. The mental model in this room declares the winner. And the winner voted by the room is…
  4. 4. Presentation of chocolate? Packaging? Color? Your prior experience ? (With similar chocolates) What helped you make the choice?
  5. 5. User Interface(UI) contributes to the Experience you build for your product.
  6. 6. Good UI is result of implementation of Good Experience. However the fact is UI & UX are complementary.
  7. 7. How you define Good Experience?
  8. 8. You experience through 5 senses.
  9. 9. Human collects the information through these Processes them using these MIND HEART
  10. 10. User Experience is NOT limited to Visual or Auditory. also includes Mental Models & Emotions
  11. 11. Human Computer Interaction(HCI) related Experience is shaped in same way.
  12. 12. HCI is revolved around Mental Model & Emotions through Touchpoints around these …
  13. 13. User Experience is about Mental Model + Emotions.
  14. 14. User Experience Is about Understanding User Needs Pain-points & then Catering to those needs
  15. 15. On the way improve any touch-points related to these.
  16. 16. In HCI at every touch-point there is one or more UI.
  17. 17. In HCI at every touch-point there is one or more UI. https://onotes.com/#he-t https://onotes.com/#he-t
  18. 18. Touch-points Are not limited to HCI. PEOPLE SAYS THINKS FEELSDOES USER THINKS SAYS DOESFEELS Touch-point of feedback loop USER THINKS SAYS DOESFEELS Touch-point of feedback loop PROCESSESUSER THINKS SAYS DOESFEELS Touch-point of feedback loop PROPS
  19. 19. All service maps are about touch-points. All typical UX maps focus on touch-points revolve around user (PEOPLE) in an ‘as-is’ PROPS and PROCESS context.
  20. 20. UX UI
  21. 21. UXUI Design Empathy Mapping Usability User Research Design Thinking Visual Design Information Architecture Interaction Design Interaction Design User Testing Persona HCI Usability Usability Design System CX Design Product Design Product Design
  22. 22. UCD User-centered Design a framework of processes
  23. 23. User Study User Profile Persona Functional Requirements Non-functional Requirements Conceptual Design Platform Analysis (Capability, Constraints] Task Analysis Usability Goals [Quantititive, Qualititive]Prototyping [Low fi – hi fi] Usability Evaluations Formative Evaluations (Thinking Aloud, Co-discovery, Constructive Interaction, Coaching methods, retrospective testing) Performance measures Meet Usability Goals? YES Summative Evaluations Deployment NO UCD User-centered Design
  24. 24. Research Information Architecture Interaction Design Visual Design UI Development Know your user and segment, market and the pain-points, needs. Know your data-points, eco-system, entity, ontology etc. Define flows, map the data points to those flows. Decide on views, touch points etc. Translate the touch points as per visual design system. Generate specs, guidelines based on the target. Prototype, implement the design. Code or setup the environment and prepare the UI.
  25. 25. Research Information Architecture Interaction Design Visual Design UI Development Know your user and segment, market and the pain-points, needs. Know your data-points, eco-system, entity, ontology etc. Define flows, map the data points to those flows. Decide on views, touch points etc. Translate the touch points as per visual design system. Generate specs, guidelines based on the target. Prototype, implement the design. Code or setup the environment and prepare the UI. Design Thinking
  26. 26. …with user …touch points and pain- points … solutions around the pain points … check feasibility of solution … check impact and effectiveness insights à innovation observation à understanding understanding à insights validation à observation innovation à validation …with user
  27. 27. …with user …touch points and pain- points … solutions around the pain points … check feasibility of solution … check impact and effectiveness insights à innovation observation à understanding understanding à insights validation à observation innovation à validation …with user • Empathy Map • User Journey Map (As IS/ To BE) • Service Design Map • Customer Journey Map • Persona (Awareness about domain and associated disciplines, methodologies, technology feasibility etc. ) • Empathy Map • User Journey Map (As IS/ To BE) • Service Design Map • Customer Journey Map
  28. 28. What tools to use in Design Thinking? Persona Task Analysis Empathy Map As is Journey To Be Journey Affinity Mapping Mind-Mapping … Pen + Paper Whiteboard Post-Its … Software (purely optional) UCD Tools Physical Artifacts / Tools
  29. 29. ...having a grand workshop ...having many post-its ... not an event What Design Thinking is NOT about…
  30. 30. ... A way of life …. Part of everyday design process Design Thinking is about… u can follow it yourselves u can follow it with your team... Golden principle more collaboration better results as it helps you to free from your biases helps to overcome your limits
  31. 31. Let’s Try…
  32. 32. Finding user-needs starts with search for stories.
  33. 33. GETTING CONTEXT
  34. 34. Understanding context is the first step. Scenarios Domain & Market Insights User Segment and behaviour Reports Stories Life goals of Users Existing Solutions/Products Statistics
  35. 35. GETTING CONTEXT SECONDARY RESEARCH
  36. 36. Domain understanding by numbers.
  37. 37. RESEARCH
  38. 38. Social Behavior understanding by numbers or trends.
  39. 39. Competitive Analysis of products or solutions.
  40. 40. RESEARCH
  41. 41. ACTIVITY Research on the Enterprise collaboration tools for software task management.
  42. 42. GETTING CONTEXT CONTEXTUAL INQUIRY
  43. 43. Contextual Enquiry Is about Listening and Empathizing at the same time.
  44. 44. STORIES
  45. 45. Each user-need or pain-point is a story.
  46. 46. CASE-STUDY
  47. 47. CASE-STUDY
  48. 48. CASE-STUDY
  49. 49. GETTING CONTEXT OBSERVATION/ ETHNOGRAPHY
  50. 50. Observe.
  51. 51. Loud & Expressive Busy and chaotic CASE-STUDY
  52. 52. MASSCLUSIVITY STATUS ANXIETY consumers' never-ending quest for status and standing out amidst a SEA OF SAMENESS and MASS CLASS standards. [Alain de Botton] http://www.trendwatching.com/trends/MASSCLUSIVITY.htm 'exclusivity for the masses’ is all about consumer’s need for respect and privilege among the masses The consumer in emerging mass markets exhibit “Massclusivity” and “Status of Anxiety” . CASE-STUDY
  53. 53. multi-taskingin distracted environments CASE-STUDY
  54. 54. … for distracted environments, benefits may exist in using motion gestures to execute commands. … motion gestures result in significantly less time looking at the smartphone during walking than does tapping on the screen, even with interfaces optimized for eyes-free input. 1 Tapping a screen is still the most common interaction technique performed with a touch screen mobile phone. However, it is also one of the most demanding, as it requires precisely acquiring a particular location on the screen. Moreover, incorrect selections originate errors, burdening users with error recovery mechanisms, and requiring new attempts to achieve accurate selection. Smartphones are frequently used in environments where the user is distracted by another task, for example by walking or while doing something behaviour pattern recommendation Use micro-interactions that use less visual attention to handle key application action The interface must limit the need for visual attention during interaction CASE-STUDY
  55. 55. CASE-STUDY
  56. 56. CASE-STUDY
  57. 57. CASE-STUDY
  58. 58. GETTING CONTEXT TECHNOLOGY DOMAIN / FEASIBILITY
  59. 59. Design for thumb access
  60. 60. Targets of Interactions for the Use-case Desktop (When app is Active/Open) App UI with Board view of Cards Notification module Desktop (Outside App / App is not active) Push notifications as similar actionable cards Mobile (Outside App / App is not active/Device locked) Push notifications as similar actionable cards - minimalistic Mobile App (When app is active) Responsive and liquid layout provides device specific easy to use experience. SMS + Email The additional means of communication are supported. IA – Navigation , Layout Data-points
  61. 61. EXPERIENCE MAPS
  62. 62. Empathy Map Experience MapUser Journey Service Design Map
  63. 63. EXPERIENCE MAPS EMPATHY MAP
  64. 64. ? ? ?
  65. 65. EXPERIENCE MAPS AS IS USER JOURNEY
  66. 66. Journeys help in understanding User and in Task Analysis
  67. 67. User-Journey maps help you get the list of pain points/insights from different stages of the user’s journey.
  68. 68. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 0/9//@L,0092/@L 10 min CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of Visibility Line of interaction EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 10 min
  69. 69. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 0/9//@L,0092/@L 10 min CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 0/9//@L,0092/@L 10 min
  70. 70. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 0/9//@L,0092/@L 10 min CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store picks the itemAsks about specific item submits items for billing swipes credit card for payment left store. enters store ACTIVITY Fill the Service Design Map 0/9//@L,0092/@L 10 min
  71. 71. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE ACTION Line of interaction Line of Visibility Line of interaction SUPPORT PROCESS EMPLOYEE TECHNOLOGY CUSTOMER Entry in Store Selecting in Store Billing/Payment in Store Leaving Store welcomes Asks about specific item Browses in Catalogue and answers submits items for billing helps in packaging items swipes credit card for payment provides bill & receipt wishes goodbye left store. enters store billing system update inventory data payment gateway connection picks the item Inventory Management Software Weigh & Packaging billing & receipt generation Weigh & Management System Sample Service Design Map
  72. 72. PERSONA
  73. 73. ACTIVITY AD CREATOR A Developer who works on Online Ad-campaigns AD REVIEWER The Manager or Lead who leads developers and reviews their work. Create Persona of each of the following:
  74. 74. STORY BOARDING
  75. 75. Task flow/ Activity Scenario / …
  76. 76. UI Flow/Interface specifics/ ….
  77. 77. TO-BE
  78. 78. PRIORITIZING AGREEMENT
  79. 79. Respect & Be Ethical SX
  80. 80. Design should Not be Intrusive.
  81. 81. https://www.behance.net/gallery/8602703/Socio-cultural- User-Experience-(SX)-and-SxD
  82. 82. It’s not only about the user also about others who are around him.
  83. 83. http://www.slideshare.net/MobileWish/sx-heuristics
  84. 84. IA
  85. 85. From data points to UI
  86. 86. Boot Animation Home Screen CustomizationsOffline references Pre-initialization Initialization Post-initialization Regular phone usageUn-boxing experience Outside device On the device Language selection Typical un-boxing experience involves customizations as a part of the post device- initialization step. Typical Unboxing Flow Account Setup Connect to network Cloud data update Customizations
  87. 87. Boot Animation Home Screen Account Setup Connect to network Cloud data update Customizations Offline references Pre-initialization Initialization Post-initialization Regular phone usageUn-boxing experience Outside device On the device Language selection Minimal post initialization steps. After Language selection the user is navigated to the Home-screen that can have language based customized UI elements and theme. Suggested Unboxing Flow 1
  88. 88. Boot Animation Home Screen Account Setup Connect to network Cloud data update Customizations Offline references Pre-initialization Initialization Post-initialization Regular phone usageUn-boxing experience Outside device On the device Language selection Super minimal post-initialization steps. After boot animation the user is presented to the home- screen, where Language selection can be one of the other options. Suggested Unboxing Flow 2
  89. 89. Boot Animation Home Screen Account Setup Connect to network Cloud data update Customizations Offline references Pre-initialization Initialization Post-initialization Regular phone usageUn-boxing experience Outside device On the device Language selection Super minimal post-initialization steps. In the boot animation it self the language options are presented as an integral part of the animation. Suggested Unboxing Flow 3
  90. 90. INTERACTION
  91. 91. Device attributes impacting UI
  92. 92. Follow Mental Model
  93. 93. MOBILE FIRST
  94. 94. Browser UI to Mobile UI
  95. 95. Interaction Target : mobile app/ browser How the design is mapped to a simple Mobile flow.
  96. 96. Navigation Layout - Mobile The collapsible sidebar houses the main navigation. Clicking on Drawer menu opens the side panel with the main nav Interaction Target : mobile app/ browser
  97. 97. Viewing Alerts - Mobile The right-hand side panel in mobile app is used for all the alerts. Clicking on the alert icon will display this. Interaction Target : mobile app/ browser
  98. 98. PROTOTYPE
  99. 99. Post-it /Paper Prototype.
  100. 100. Post-it /Paper Prototype.
  101. 101. Navigation flow in wireframe.
  102. 102. Visual Mockups from wireframe.
  103. 103. Visual Mockups placed within HTML.
  104. 104. Simulated HTML Prototype.
  105. 105. Testing HTML prototype on device.
  106. 106. Fully functional Interactive HTML-JS Prototype.
  107. 107. Real working prototype in a simulated environment.

×