![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](https://image.slidesharecdn.com/sessionuxnui-1-190403014324/75/Session-UXnUI-SJCIT-1-0-1-1apr2019-desops-io-26-2048.jpg)
![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](https://image.slidesharecdn.com/sessionuxnui-1-190403014324/75/Session-UXnUI-SJCIT-1-0-1-1apr2019-desops-io-59-2048.jpg)
Uploaded bySamir Dash
Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
The document discusses the interplay between user experience (UX) and user interface (UI) design, emphasizing the role of mental models and emotions in shaping HCI. It presents methodologies for understanding user needs through various research techniques and design thinking frameworks, highlighting the importance of empathy and contextual inquiry in the design process. The text also addresses practical aspects of UI development, including prototyping, usability evaluations, and the significance of user-centered design in creating effective interactions.
More Related Content
Similar to Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
![[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...](https://cdn.slidesharecdn.com/ss_thumbnails/final0-190531042932-thumbnail.jpg?width=640&height=640&fit=bounds)
Session UXnUI SJCIT-1.0.1-1apr2019-desops.io
- 1. Session UX&UI Samir Dash 1 April2019 SJC Institute of Technology, Chikkaballapur
- 3.
- 4. The mental modelin this room declares the winner. And the winner voted by the room is…
- 5. Presentation of chocolate? Packaging? Color? Yourprior experience ? (With similar chocolates) What helped you make the choice?
- 6. User Interface(UI) contributes tothe Experience you build for your product.
- 7. Good UI is resultof implementation of Good Experience. However the fact is UI & UX are complementary.
- 8. How you define GoodExperience?
- 9. You experience through 5senses.
- 10. Human collects theinformation through these Processes them using these MIND HEART
- 11. User Experience is NOTlimited to Visual or Auditory. also includes Mental Models & Emotions
- 12. Human Computer Interaction(HCI) related Experience isshaped in same way.
- 13. HCI is revolvedaround Mental Model & Emotions through Touchpoints around these …
- 14. User Experience is about MentalModel + Emotions.
- 15. User Experience Is about Understanding UserNeeds Pain-points & then Catering to those needs
- 16. On the wayimprove any touch-points related to these.
- 17. In HCI atevery touch-point there is one or more UI.
- 18. In HCI atevery touch-point there is one or more UI. https://onotes.com/#he-t https://onotes.com/#he-t
- 21. Touch-points Are not limitedto 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
- 22. All service mapsare about touch-points. All typical UX maps focus on touch-points revolve around user (PEOPLE) in an ‘as-is’ PROPS and PROCESS context.
- 23.
- 24. UXUI Design Empathy Mapping Usability UserResearch Design Thinking Visual Design Information Architecture Interaction Design Interaction Design User Testing Persona HCI Usability Usability Design System CX Design Product Design Product Design
- 25. UCD User-centered Design a frameworkof processes
- 26. User Study User Profile Persona FunctionalRequirements 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
- 27. Research Information Architecture Interaction Design Visual Design UI Development Knowyour 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.
- 28. Research Information Architecture Interaction Design Visual Design UI Development Knowyour 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
- 29. …with user …touch pointsand 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
- 30. …with user …touch pointsand 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
- 31. What tools to use in DesignThinking? 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
- 32. ...having a grandworkshop ...having many post-its ... not an event What Design Thinking is NOT about…
- 33. ... A wayof 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
- 34.
- 35.
- 36.
- 37. Understanding context is the first step. Scenarios Domain& Market Insights User Segment and behaviour Reports Stories Life goals of Users Existing Solutions/Products Statistics
- 38.
- 39.
- 40.
- 41. Social Behavior understanding by numbersor trends.
- 42.
- 43.
- 44. ACTIVITY Research on theEnterprise collaboration tools for software task management.
- 45.
- 46. Contextual Enquiry Is about Listening and Empathizing atthe same time.
- 47.
- 48. Each user-need or pain-point isa story.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. Loud & Expressive Busyand chaotic CASE-STUDY
- 59. 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
- 60.
- 61. … for distractedenvironments, 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
- 62.
- 63.
- 64.
- 65.
- 68. Design for thumbaccess
- 69. Targets of Interactionsfor 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
- 72.
- 73. Empathy Map ExperienceMapUser Journey Service Design Map
- 74.
- 80.
- 81. EXPERIENCE MAPS AS IS USERJOURNEY
- 82. Journeys help in understanding User andin Task Analysis
- 83. User-Journey maps help youget the list of pain points/insights from different stages of the user’s journey.
- 87. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Lineof 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
- 88. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Lineof 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
- 89. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE STAGE Lineof 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
- 90. CUSTOMER JOURNEY FRONT STAGE BACKSTAGE ACTION Lineof 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
- 91.
- 95. ACTIVITY AD CREATOR A Developerwho 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:
- 96.
- 97. Task flow/ ActivityScenario / …
- 98.
- 101.
- 104.
- 106. Respect & BeEthical SX
- 107.
- 108.
- 110. It’s not onlyabout the user also about others who are around him.
- 111.
- 112.
- 113. From data pointsto UI
- 114. Boot Animation Home Screen CustomizationsOfflinereferences 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
- 115. Boot Animation Home Screen AccountSetup 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
- 116. Boot Animation Home Screen AccountSetup 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
- 117. Boot Animation Home Screen AccountSetup 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
- 119.
- 120.
- 122.
- 129.
- 130. Browser UI toMobile UI
- 131. Interaction Target :mobile app/ browser How the design is mapped to a simple Mobile flow.
- 132. 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
- 133. 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
- 134.
- 135.
- 136.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144. Real working prototype ina simulated environment.