Iasi code camp 20 april 2013 lets make users happy


Published on

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Iasi code camp 20 april 2013 lets make users happy

  1. 1. Let’s makeusers happy
  2. 2. Daniel PuiuSoftware Developer &User Experience Enthusiastdaniel.puiu@gmail.com
  3. 3. Agenda1. What is usability?2. Benefits of usability3. What we can do for our users?As business analysts (user centered design)As developers/designers (design principles)As testers (usability testing)4. Conclusions
  4. 4. Usability is themeasure of quality ofthe user experiencewhen interacting withsomething.What is usability?
  5. 5. 1. Easy and quick to learn2. Easy and efficient to use3. Error tolerant4. Easy to remember5. Subjective satisfactionUsability is a combination of factors
  6. 6. Your software is usable when users ...don’t think too much when using an applicationdon’t feel the need to use help windowseasily find the information they are looking forfeel comfortable when navigation trough the applicationdon’t feel stupidWhen your software is usable?
  7. 7. ISO 9241-11 (part 11 - 1998)This part deals with the extent to which a product can be used by specified users toachieve specified goals with effectiveness (task completion by users), efficiency(task in time) and satisfaction (responded by user in term of experience) in aspecified context of use (users, tasks, equipments & environments).ISO 9241-210 (ex ISO 13407)Provides requirements and recommendations for human-centered designprinciples and activities throughout the life cycle of computer-based interactivesystems. It is intended to be used by those managing design processes, and isconcerned with ways in which both hardware and software components ofinteractive systems can enhance human–system interaction.International standards
  8. 8. Usability may save lives …http://harryzzz.blogspot.ro/2010_07_01_archive.html
  9. 9. Usability may save money …“Im not here to enter into a relationship.I just want to buy something.”https://www.facebook.com/HodanGlobal
  10. 10. it may make you smile
  11. 11. Increase salesIncrease trafficIncrease of registered usersMarket share increaseCreates a positive brandUsability benefits for …public websitesintranetsinternalDecrease training budget for usersProductivity increaseIncrease user satisfaction at workReduces development timeDecrease maintenance costsRemove re-design costsDecrease documentation and training time
  12. 12. BeforeConversion rate 10%Annual revenue $100.000improved conversion rateannual revenue annual ROIannualrevenue current conversion rateCalculating increased conversion rateAfterConversion rate 15%Annual revenue 100.000 * (15/10) = 150.000Annual ROI 150.000 – 100.000 = 50.000$The formulaExample: Increase conversion rate by 5%
  13. 13. annual ROIusersnumberCalculating increased productivityAssumptionsEmployees 500Loaded salary $20.000 (or $0.008/second)Use 10 tasks/dayIncreased efficiency 6 seconds/taskAnnual ROI 500 x 10 x 230 x 6 x 0.008 = 20.125$The formulauses/daydays/yearincreasedefficiencyloadedsalaryExample: Reorganize intranet to increase efficiency by 6 seconds/task
  14. 14. 90sHardwarewas the KING00sSoftwarewas the KING10sInteractionwill be the KINGFrom past to future
  15. 15. User centeredanalysis
  16. 16. I’ll go up and findout what they needand the rest of youjust start coding!Traditional project life cycleProjectplanningRequirementsdefinitionsDesignDevelopmentIntegrationTestInstallationAcceptanceMaintenancehttp://blogs.msdn.com/b/devschool/archive/2012/09/10/design-principles-why-use-paper-and-pencil-or-similar-on-slate.aspx
  17. 17. Help deskTrainingMaintenanceImplementationDetail designHigh level designUser/taskanalysisInvestment in ResourcesProjectLifeCycleLess user centered design = more hidden costs
  18. 18. Investment in ResourcesProjectLifeCycleMore user centered design = less hidden costsHelp deskTrainingMaintenanceImplementationDetail designHigh level designUser/task analysis
  19. 19. Get smart early!TimeProbabilityBegin EndHighLow
  20. 20. Mental models
  21. 21. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  22. 22. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  23. 23. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  24. 24. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  25. 25. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  26. 26. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?
  27. 27. SimplicityFamiliarityAvailabilityFlexibilityFeedbackSafetyAffordanceHow to apply mental models in software?http://iasi.codecamp.roRegister
  28. 28. Interviews“Everyone has a story,make yours worthtelling”, Patrick Rickettshttp://4.bp.blogspot.com/-HTtRjPqHn2U/UDTdBhB_v7I/AAAAAAAAALk/LkbZEFEQmOw/s1600/job-interview.jpg
  29. 29. User observation“First rule of usability?Don’t listen to users” byJacob Nielsenhttp://www.newswire.ca/en/story/970075/brunswick-mine-earns-prestigious-john-t-ryan-safety-award-for-the-safest-metal-mine-in-canada
  30. 30. Focus groupshttp://rosemedicalcenter.files.wordpress.com/2010/08/focus-group.jpg
  31. 31. Surveysbecause knowledge is everything1. design 2. collect 3. analyze
  32. 32. EnvironmentWorks in centralized roomBusy environment, people, radiosClimate control, but dusty, mal dustOperators, supervisors, visitorsGood lighting conditionsTechnology21” monitors, multiple (3-4)Good internet connectionLooks like a control roomSomeone in the chair 24/72-way radiosDemographics37 years oldBeen at mine since 2000 (13 years)Enjoys what he doesFirm and fairMinimal computer experienceDevelop personasMake Mircea loveyour system!Do you think thatMircea has timefor this wizard?
  33. 33. Card sortinghttp://www.localhiddenvariable.com/ciid/wp-content/uploads/2009/03/dsc03416.jpg
  34. 34. Closed card sortingFitness HappinessDiet HealthWeight Loss NutritionWorkout PlansDisease RisksFor VegetariansLiving GreenLowering StressWorkoutsFinance TipsMeal PlansRecipesSkin CareFitness HappinessDiet HealthWeight LossNutritionWorkout PlansDisease RisksLiving GreenLowering StressWorkoutsFinance TipsMeal PlansRecipesSkin CareFor Vegetarianshttp://sixrevisions.com/usabilityaccessibility/card-sorting/
  35. 35. Open card sortingTourAbout UsAffiliatesDeveloperOverviewSubscriptionPlansDownloadTrialSupportAPI InfoTestimonialsPricingTourAbout UsAffiliatesDeveloperOverviewSubscriptionPlansDownloadTrialSupportAPI InfoTestimonialsPricinghttp://sixrevisions.com/usabilityaccessibility/card-sorting/
  36. 36. DesignPrinciples
  37. 37. Developers spend a lot of time worrying what makesthings easy for themselves, like unit testing, continuousintegration but we should spend more time worryingwhat makes things easy for our usersSoftware exits because users exist, not because wedevelop it, so it’s worth a lot to make their jobs easierDevelopers gains success by making something possibleinstead of making something easy.About developers
  38. 38. If you are not looking forsomething, very oftenyou wont see it!Inattentional Blindness
  39. 39. … 5 buttons are executedfor 80% of user actions… 4 applications are usedin 80% of user’s timePareto rule (80/20 rule)
  40. 40. Hick’s Law
  41. 41. Gestalt principlesSimilarity Proximity
  42. 42. 0123456Category 1 Category 2 Category 3 Category 4Series 1Series 2Series 3Gestalt principles in software design
  43. 43. Why the Register button is on thebottom-right?Question
  44. 44. For typical rectangular screens the eye scansfrom top left to bottom rightGuttenberg DiagramPrimary Optical Area Strong Follow AreaWeak Follow Area Terminal AreaAxis of orientation
  45. 45. Guttenberg Diagram in software designhttp://51bits.com/articles/design-by-gutenberg/
  46. 46. Why do we use gradients?Why do we use rounded corners?Questions
  47. 47. Naturalnesshttp://www.flickr.com/photos/aidanmorgan/7530821574/sizes/h/in/photostream/
  48. 48. Contour bias
  49. 49. Contour bias & Naturalenesin software design
  50. 50. Savanna preferencehttp://www.billycanu.com/wp-content/uploads/2012/12/jungle2.jpeg http://hd-wallpapers.com/download/green-plains-of-wales_1920x1080_273-hd.jpg
  51. 51. Desire lineshttp://fotografiskskole.files.wordpress.com/2012/04/olifantenpaadje3.jpg
  52. 52. 123456
  53. 53. UsabilityTesting
  54. 54. Usability testinghttp://www.statesman.com/news/lifestyles/school-of-information-professor-teaches-students-t/nTCj8/
  55. 55. Circle five words that describe your impression of the design.Friendly GoodCool ConfidentSecure Up-To-DateHelpful High-TechCluttered StableReputable AnnoyingConfusing TrustworthyEasy-To-Use ComfortableEvaluate brand messageTest sample
  56. 56. Where would you goto read about?1. Women’s medicalprocedures2. Home care3. Wight loss surgery4. Local centersEvaluate content organizationTest sample
  57. 57. 1. Can you please tell mewhat is the price forCanon 1000D?2. Can you please find thedifferences betweenNokia S500 and NokiaS600?3. Please add on order forDell Latitude 400.Evaluate navigation designTest sample
  58. 58. Circle everythingthat you believe tobe a hyperlink.Evaluate affordanceTest sample
  59. 59. Prototype Testing
  60. 60. Eye trackinghttp://www.webusability.co.uk/wp-content/uploads/2011/09/DSCN7857.JPG
  61. 61. Gaze Plot Visualization Heat MapsEye tracking data analysishttp://www.doublejumpmedia.com/blog/2009/05/eye-tracking-and-usability-testing-with-city-university-london/
  62. 62. Moderate testing Heat mapsPeer reviewsUser feedback Screen recordingUser testingRemote testinghttp://www.techsmith.com/morae.html http://www.loop11.com/ https://usabilla.com/http://verifyapp.com/ http://www.conceptfeedback.com/ http://openhallway.com/
  63. 63. Web log analysis
  64. 64. Page titleNewsformSignupformContent bodyNav.barA-B TestingVersion A 50 signupsPage titleNewsformSignupformContent bodyNav.barVersion B 75 signupsrandomlydistributed
  65. 65. A B15.2 Conversion rate 20.9 Conversion rateTextMagic.com – Homepage A/B testhttp://www.abtests.com/test/275002/homepage-for-textmagic-homepage-ab-test
  66. 66. In the end ...
  67. 67. The inconvenient truth about SEOhttp://www.smashingmagazine.com/2012/12/11/seo-the-inconvenient-truth/Your primary objectiveshould be better content,not higher rankings
  68. 68. Mint.com – no ad campaign“Take a complicated process, make it easy, and you will win!”http://www.ebusinessblog.org/554/user-experience-success-mint-com-has-made-doing-the-bills-a-joint-effort/
  69. 69. Usability vs. User experiencehttp://roomoramablog.files.wordpress.com/2012/10/transfagarasan-romania.jpghttp://www.consulting.ait.asia/images/news/detail/freeway.jpg
  70. 70. Sketchbook vs. PaperThat was EASY!Whoa. That wasAWESOME!http://www.fingerpainted.it/wp-content/uploads/2010/04/iPad_SketchBookPro_Photo.jpghttp://static.squarespace.com/static/50271a61c4aab6c54f9af5ee/5028140ee4b0195d2ee37559/5028140ee4b0195d2ee37e7e/1334450945277/1000w
  71. 71. let’s get rid of theuser’s frustration …
  72. 72. and let’s makeusers happy!
  73. 73. Steve KrugDon’t make methinkDonald NormanThe design ofeveryday thingsJenifer TidwellDesigninginterfacesJacob NielsenPrioritizing WebUsabilityLidwel, Holden & ButleUniversal Principles ofDesignhttp://www.humanfactors.comhttp://www.uxbooth.com/http://www.smashingmagazine.com/http://www.uxmatters.com/index.phphttp://www.usabilityfirst.com/B O O K SW E B S I T E SResourceshttp://www.upassoc.org/http://www.uie.com/brainsparks/http://uxmovement.com/http://uxdesign.ro/