User Experience & User Interface Design - nov 2017
•Download as PPTX, PDF•
1 like•181 views
Lesson on User Experience & User Interface Design. Information Architecture, Lean UX cycle, NPS, Google Heart, SUPR-Q, Cards, Customer (emotional) journey and other frameworks to evaluate user experiences in websites, mobile websites and applications.
More Related Content
What's hot
What's hot (17)
Similar to User Experience & User Interface Design - nov 2017
Similar to User Experience & User Interface Design - nov 2017 (20)
More from Andrea Vaccarella
More from Andrea Vaccarella (20)
Recently uploaded
Recently uploaded (20)
User Experience & User Interface Design - nov 2017
- 1. UX & UI User Experience & User Interface Design Andrea Vaccarella 20/11/2017
- 3. USER EXPERIENCE Ciò che una persona prova quando utilizza un prodotto, sistema o servizio. L'esperienza d'uso concerne aspetti esperienziali, affettivi, l'attribuzione di senso e di valore collegati al possesso di un prodotto e all'interazione con esso, ma include anche le percezioni personali su aspetti quali utilità, semplicità d'uso ed efficienza del sistema/prodotto.
- 4. USER EXPERIENCE Esperienza d'uso Aspetti esperienziali, affettivi Attribuzione di senso e valore Connessione, proprietà Percezioni personali Utilità Semplicità Efficienza Ciò che una persona prova quando utilizza un prodotto, sistema o servizio.
- 5. USER EXPERIENCE Ciò che una persona prova quando utilizza un prodotto, sistema o servizio. L'esperienza d'uso concerne aspetti esperienziali, affettivi, l'attribuzione di senso e di valore collegati al possesso di un prodotto e all'interazione con esso, ma include anche le percezioni personali su aspetti quali utilità, semplicità d'uso ed efficienza del sistema/prodotto. Esperienza d'uso Aspetti esperienziali, affettivi Attribuzione di senso e valore Connessione, proprietà Percezioni personali Utilità Semplicità Efficienza Ciò che una persona prova quando utilizza un prodotto, sistema o servizio. USER EXPERIENCE
- 6. UX ≠ UI User Experience ≠ User Interface
- 7. UX ≠ UI User Experience ≠ User Interface
- 8. DEF ISO 9241-210[1] definisce l'esperienza d'uso come “le percezioni e le reazioni di un utente che derivano dall'uso o dall'aspettativa d'uso di un prodotto, sistema o servizio”
- 9. SISTEM USER CONTEST EXPECTATIONS
- 13. 1. Define Outcome measures 2. Define the Users and What they are trying to accomplish 3. Measure the Baseline 4. Make Changes 5. Measure after your redesign LEAN UX CYCLE
- 15. UX IN WEBSITES USABLE FINDABLE ACCESSIBLE DESIRABLE VALUABLE CREDIBLE USEFUL
- 16. PROFILE LOCATION PROFESSION EDUCATIONBEHAVIOURS PERSONA USAGE & LOYALTY ATTITUDE & BELIEFS LIFESTYLE INTERESTS & HOBBIES USAGE GOALS EMOTIONAL GOALS MOTIVATION & TRIGGERS NEEDS Where do you live and work? Job? If B&B Add detail to Role, influences Level and Type of schooling Type of Product/Service What do you think of brand? The category? Social Group? Status? Openness to innovation, media habits? What do you do in your free time? What are you trying to accomplish? How important? What is at stake emotionally? Quote emotions. What motivates you? What Excites you?
- 17. UX IN (mobile) WEBSITES 1. Everything is Touch Friendly 2. All buttons are Big Enough/Stand out from other elements 3. Your copy is legible +13px 4. Your app/site flow in Landscape & Portrait 5. Your key touch interaction are easily accessible
- 18. UX IN (mobile) WEBSITES 6. All NON-essential elements are in the footer 7. Images do not contain text in mobile, +HD/Retina 8. Product images are large 9. Image gallery is a SWIPABLE carousel 10. All forms use custom input types
- 19. UX IN (mobile) WEBSITES 11. Your forms are as short as possible 12. Your forms don’t use autocorrect or auto-capitalize 13. Your mobile site/app uses device API 14. Your app has an appropriate icon for the app store
- 21. IA
- 22. INFORMATION ARCHITECTURE LAMPADA CHAISE LONGUE POLTRONA DIVANO SALOTTO SOFÀ SEDIA TAVOLO SGABELLO BANCONE CUCINA STUDIO SCRIVANIA CAMERA CARDS – POST IT STUDIO
- 23. THINK BUILD CHECK LEAN UX WORK CYCLE
- 24. IDEAS DATA LEARN BUILD Action LEAN UX CYCLE Output MEASURE PRODUCTS
- 25. UNHELPFUL METRICS CHECK # of signups # new users per week a good metric.. ..measures the usage of your product by a person. The usage should be specific to features that deliver value to your user ..makes you look at all the other metrics and say “none of these matter if we don’t get this right first” a great metric.. VANITY GOOD BETTER AWESOME Tot # of registered users # of users who sign in 3+ times a day per week # of users who “share a task” 3+ times a day, per week
- 26. THINK BUILD CHECK LEAN UX WORK CYCLE 1. Feel the Pain 2. Know Your User 5. Validate Assumptions 6. Test with Real Users 3. Onboarding During Use 4. The 3Fs
- 28. WIREFRAMING Sketch > Wireframe > Lo-fi Prototype > Hi-fi Mockup > Hi-fi Prototype (Rapid) -> Code
- 29. A A/B TESTING B A B SPLIT TESTING 50 – 50 A B A B
- 30. BA A/B TESTING B C SPLIT TESTING B D D E E F EVERYTHING CAN BE TESTED Color Buttons Images Fonts Positions Actions (login) Number of Form fields Prices Discounts
- 35. Measure the quality of User eXperience
- 36. Measure the quality of User Experience Satisfaction Perceived Ease of Use Net Promoter Score HAPPINESS
- 37. # of visits per user per week # of photos uploaded per user per day Number of shares ENGAGEMENT
- 38. Upgrades to latest version New Subscriptions created Purchases made by new users ADOPTION
- 39. # active users remaining present over time Renewal Rate of Failure to Retain (Churn) Repeat Purchases RETENTION
- 40. Search result success Time to upload a photo Profile creation complete TASK SUCCESS Choose 2 Categories, start with Goals.
- 41. TASK SUCCESS Choose 2 Categories, Start with Goals. Goals ARE NOT Metrics. RETENTION ADOPTION ENGAGEMENT HAPPINESS
- 42. SUPR-Q Usability This website is easy to use? It is easy to navigate within the website? Credibility (Trust, Value & Comfort) The information on the website is credible? The information on the website is trustworthy? Loyalty How likely are you to recommend this website to a friend or colleague? I will likely visit this website in the future? Appearance I found the website to be attractive? The website has a clean and simple presentation? Standardized User Experience Percentile Rank Questionnaire
- 43. SUPR-Q Usability easy to use easy to navigate Credibility credible trustworthy Loyalty recommend this website revisit in the future Appearance website is attractive clean and simple presentation
- 44. UX DELIVERABLES Design Phase Ethnographic research Surveying Customer feedback and testing Focus group Non-directed interview Contextual Interview Mental modeling Flow charts Mood boards Card sorting Competitive analysis Contextual Inquiry Project Underway Wireframing Heuristic analysis Expert evaluation Pluralistic walkthrough Personas Scenario Prototypes System mapping Experience mapping User testing/Usability testing After Launch User testing/Usability testing A/B Testing Wireframing for fine tuning
- 45. 01) Repetitive actions or frequent activities feel effortless 02) Users can easily recover from errors 03) Users are adequately supported according to their level of expertise 04) Accessing help does not impede user progress 05) No more than three primary colors 06) Color alone is not used to convey hierarchy, content or functionality 07) Visual hierarchy directs the user to the required action WEB UX CHECKLIST
- 46. 08) Items on top of the visual hierarchy are the most important 09) Primary action is visually distinct from secondary actions 10) Interactive elements are not abstracted 11) Form submission is confirmed in a visually distinct manner 12) Alert messages are consistent 13) Alert messages are visually distinct 14) Navigation is consistent 15) Room for growth
- 47. 16) No more than two distinct type families are used 17) Fonts used for text content are at least 12px in size 18) Reserve uppercase words for labels, headers, or acronyms 19) Different font styles or families are used to separate content from controls 20) Font size/weight differentiates between content types 21) Proximity and alignment 22) Progress indicator for multi-step workflows 23) Foreground elements (like content and controls) are easily distinguished from the background
- 49. USER JOURNEY MAPPING Empathy mapping
- 53. Actions: the thing the user needs to do to move to the next step Questions: things the user needs answering before they’ll be willing to move to the next step Happy moments: positive, enjoyable things that improve the experience Pain points: frustrations and annoyances that spoil the experience Opportunities: design enhancements that you could implement in a new product, that address any of the problems identified. CUSTOMER JOURNEY MAPS
- 56. PERSONA
- 58. TASK MODELS INFORMATION ARCHITECTURE PERSONAS CONTENT REQUIREMENTS WIREFRAMES PROTOTYPING JOURNEY MAPPING HEART FRAMEWORK USABILITY TESTING A/B TEST SKETCH USER STORIES ACCESSIBILITY
- 60. THANK YOU User Experience e User Interface Design Andrea Vaccarella 20/11/2017
- 61. Some Links.. • https://www.tableau.com/reports/business-intelligence-trends • https://www.amazon.jobs/en • http://themenectar.com/demo/salient-corporate-creative/ • https://moqups.com/ • http://www.makemypersona.com/
Editor's Notes
- WHY? SEO -> MOZ -> The Impact of Usability and User Experience On search engine rankings (Chp 6) through linking patterns, user engagement metrics, and machine learning, the engines make a considerable number of intuitions about a given site. Usability and user experience are second order influences on search engine ranking success. They provide an indirect but measurable benefit to a site's external popularity, which the engines can then interpret as a signal of higher quality. "no one likes to link to a crummy site" phenomenon.
- Laureato Ing. Elettronica MIT Master e PhD Laurea Honoris Università di Padova in PSICOLOGIA https://it.wikipedia.org/wiki/Donald_Norman E’ stato vicepresidente del gruppo di ricerca sulle tecnologie avanzate per la Apple Computer e dirigente alla Hewlett Packard e alla U Next Insegna Psicologia, Scienze Cognitive,
- User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
- User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
- Alessi Juicy Salif Citrus Squeezer by Philippe Starck Problema di funzionalità (stabilità, sporca, e acidità scioglie materiale) Gold edition -> avvertenza, non usarlo perchè acido citrico scioglie e intacca l’oro
- http://semanticstudios.com/user_experience_design/
- http://semanticstudios.com/user_experience_design/ 1. Drawers, Carousels, Off-Canvas flyouts 2. Search for Recommended Touch Size! (Apple -> 44x44px, Android 48x48) 3. 14px or above. Douple tap, pinch is a pain 4. You don’t know how the user will see it 5. Everything at touch distance, and visible
- 6. Terms of service, Company Locations, Management, Values 7. Avoid text, avoid fuzzy pixely, if not vector based 8. Increase convertion on mobile by 9% 9. Using “switch” button or arrows may be a bad idea 10: use email specific, text specific e number specific keyboards
- 11. Minimize typing for your user 12. odioso quando devi riposizionare e riscrivere 13. Push notifications, geolocalisation, audio-video 14. App is easy to recognize
- Google VENTURE, IDEO e altre aziende simili sono esempi di conoscenze multi-disciplinari messe al servizio di una user experience migliore. Collaborazione tra discipline diverse https://www.evry.com/fi/ajankohtaista/artikkelit/winning-the-battle-of-great-user-experience/
- Information Architecture
- http://semanticstudios.com/user_experience_design/
- UX Design, Lisbon 2014 https://www.slideshare.net/intelleto/designing-with-lean-ux-rapid-product-design-ux-lisbon-2014/79-Designing_with_Lean_UX_UX
- consente di definire la gerarchia delle informazioni, rendendo più facile pianificare il layout a seconda di come si desideri che un utente elaborari le informazioni Low FIDELITY
- Jared Spool is an American writer, researcher, speaker, educator, and an expert on the subjects of usability, software, design, and research.[1] He is the founding principal of User Interface Engineering, a research, training, and consulting firm specializing in website and product usability, and the largest usability research organization of its kind in the world https://www.uie.com/
- Landing Page Example
- Interattivo https://www.dtelepathy.com/ux-metrics/
- You can apply HEART to a specific Feature or a Whole Product Happiness > Measures of user attitudes, often collected via survey. Interattivo https://www.dtelepathy.com/ux-metrics/
- Level of user involvement. https://www.dtelepathy.com/ux-metrics/
- Gaining new users of a product or feature. https://www.dtelepathy.com/ux-metrics/
- The rate at which existing users are returning https://www.dtelepathy.com/ux-metrics/
- Efficiency, effectiveness, and error rate. https://www.dtelepathy.com/ux-metrics/
- Efficiency, effectiveness, and error rate. https://www.dtelepathy.com/ux-metrics/
- Standardized User Experience Percentile Rank Questionnaire
- https://medium.com/@harrybr/how-to-run-an-empathy-user-journey-mapping-workshop-813f3737067
- https://medium.com/@harrybr/how-to-run-an-empathy-user-journey-mapping-workshop-813f3737067
- https://medium.com/@harrybr/how-to-run-an-empathy-user-journey-mapping-workshop-813f3737067
- http://www.comonext.it/next-innovation/
- WHY? SEO -> MOZ -> The Impact of Usability and User Experience On search engine rankings (Chp 6) through linking patterns, user engagement metrics, and machine learning, the engines make a considerable number of intuitions about a given site. Usability and user experience are second order influences on search engine ranking success. They provide an indirect but measurable benefit to a site's external popularity, which the engines can then interpret as a signal of higher quality. "no one likes to link to a crummy site" phenomenon.