introduction to ux for developers

Download Introduction to UX for Developers

Post on 27-Jan-2015

110 views

Category:

Technology

6 download

Embed Size (px)

DESCRIPTION

What do UX specialist and PHP developers have in common? Probably more than you are aware. I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info. So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.

TRANSCRIPT

  • 1. Introduction to UX for DevelopersJacques Woodcock@jacques_thekit @kitportal

2. A little about me... 3. - Degree in DesignI started by getting my degree in design... 4. - Degree in Design- Multimedia Designer...then started doing multimedia design... 5. - Degree in Design - Multimedia Designer - Multimedia Programmer...then multimedia programming... 6. - Degree in Design - Multimedia Designer - Multimedia Programmer - Coldfusion, Javascript, PHP...then started learning most web technologies.... 7. - Degree in Design- Multimedia Designer- Multimedia Programmer- Coldfusion, Javascript, PHP- Project Managment...then on to project management... 8. - Degree in Design - Multimedia Designer - Multimedia Programmer - Coldfusion, Javascript, PHP - Project Managment - Business Dev, Ops Managment...business development and operations management... 9. - Degree in Design- Multimedia Designer- Multimedia Programmer- Coldfusion, Javascript, PHP- Project Managment- Business Dev, Ops Managment- Strategy... and am now focusing on strategy. 10. Lets get started 11. What is UX? 12. st1 13. ViewIt is NOT the View 14. View = UI (UI = User Interface) 15. UX is 16. Model + View + Controller + So Much More 17. UX is the technical study of how usersinteract with your product. 18. If I were to order web disciplines into a diagram,it might look like this... 19. User InterfaceTechnical Scope UX Business StrategyBusiness Strategy is your base then you build on that with your UX which denes yourTechnical Scope and is presented with your User Interface. 20. User InterfaceTechnical ScopeUX Business StrategyUX is crucial to dening your technical scope and thus your project. 21. A Quick History 22. Human interaction with technical systems started being studied post WWIIThey found that even operators whos live depended on using a technical system, still raninto human limitations. 23. The 80s & 90sWhen the computer started dominating the workplace, user-centered design took on a biggerimportance. 24. TodayToday, as the discipline has evolved, we look more at the psychological aspects of humaninteraction as opposed to just the usability of an interface. 25. Whitney Hess 5 Principles of UX 26. Whitney Hess 1. Understand the problem 27. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 28. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 3. Make things simple and intuitive 29. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 3. Make things simple and intuitive 4. Acknowledge the user is not like you. 30. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 3. Make things simple and intuitive 4. Acknowledge the user is not like you 5. Have empathy 31. Sound Familiar? 32. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 3. Make things simple and intuitive 4. Acknowledge the user is not like you 5. Have empathy1, 3, 5... these are similar to principles of development. 33. Whitney Hess Expanded to 20 34. My Favorites?Here are some of my favorites. 35. My Favorite Principles Present few choicesWe all know Apple is the king of fewer choices, yet they have the best user experience on themarket. 36. My Favorite Principles Present few choicesThe more choices a person is presented with, the harder it is for them to choose. This is whatBarry Schwartz calls The Paradox of Choice. Remove the "nice to haves" and focus instead ofthe necessary alternatives a person needs to make in order to greatly impact the outcome. 37. My Favorite Principles Create a visual hierarchythat matches the users needs "Visual hierarchy" is a combination of several dimensions to aid in the processing ofinformation, such as color, size, position, contrast, shape, proximity to like items, etc. 38. My Favorite Principles Provide contextIf what users nd when they get to your site/product isnt close to what they predicted,chances are theyre going to give up and go elsewhere 39. My Favorite Principles Use appropriate defaultsProviding preselected or predetermined options is one of the ways to minimize decisions andincrease efficiency. But choose wisely: if you assign the defaults to the wrong options(meaning that the majority of people are forced to change the selection), youll end upcreating more stress and processing time. 40. My Favorite Principles Make actions reversibleThere is no such thing as a perfect design. No one and nothing can prevent all errors, soyoure going to need a contingency plan. 41. My Favorite Principles Provide feedbacktell them why theyre waiting. Tell them that youre working. Tell them you heard them andoffer the next step along their path. Design is not a monologue, its a conversation. 42. My Favorite Principles Be consistentWhen things dont match up between multiple areas, the experience can feel disjointed,confusing and uncomfortable. People will start to question whether theyre misunderstandingthe intended meaning or if they missed a key cue. 43. If I were to add 1... 44. My Favorite Principles Dont be lazyIn the battle to just get it launched you need to place followthrough at the top of the list.These might be your principles, but that dont mean squat if you dont apply them. 45. Why is UX not UI? 46. UX defines your features, user flowand product personality. 47. UX: - checking in- sending messages- tweeting, liking, +1ing- the process to do these tasks 48. UI defines the screen style andlayout of those features. 49. UI: - button styles- colors- content size 50. UI == Aesthetic DesignUX == Features and interacting with those features. 51. UX will define what the UI must createthrough wireframes. 52. Project: The Kit CMS Deliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View Attendees Big Heart Design | August 24, 2008WELCOME MARTHA TAYLOR!The Kit LogoLOGOUT | MY ACCOUNT | CONTACT US | HELP HOME PAGESRELATIONSHIPSMANAGERSNEW PAGEQUICK PAGE EDIT MANAGE ATTENDEE RECORDSKIT NEWSPAGE ORDER User Flow 1 Guiding principles 2 ProcessesDev Processes > Technical ScopeUX starts to focus on the user ow while devs start to focus on the technical scope. 79. ProjectUX: User FlowDev: Technical ScopeGood projects have both 80. ProjectUX: User FlowDev: Technical Scope, and they communicate. 81. Project UX: User Flow User flow should defineDev: Technical Scope the technical scope. 82. Project UX: User Flow Technical scope should notDev: Technical Scope influence the user flow... 83. Project UX: User Flow ...beyond technicalDev: Technical Scope limitations. 84. Why? 85. We build for users.Average users will trade functionality for usability. 86. You have to know your users. 87. Great UX specialist understand development. 88. Efficient UX specialist have coding knowledge. 89. UX specialist prototype. 90. UX specialist prototype.Papered process flowsSome present papered process ows. 91. AJAX/JQuery UX specialist prototype.Some prototype in AJAX/JQuery 92. AJAX/JQueryUX specialist prototype. HTML/CSSHTML/CSS 93. AJAX/JQuery UX specialist prototype. HTML/CSSPHPand even PHP 94. Great UX specialist write prototypes that can bepushed to developers for final production. 95. AJAX/JQueryHTML/CSSUse prototypes toPHPstreamlinedevelopment. Development EnvironmentYou can even use these prototypes to streamline the development process. 96. How do I get started? 97. st1 98. Change Mindset 99. FromHow can I organize these featuresto create an efficient system? 100. ToHow can I organize these featuresfor an efficient user experience? 101. nd2 102. Interact with REAL usersTake them out for coffee, lunch, or just chat on the phone. 103. KNOW YOUR USERS! 104. rd3 105. SketchBuildAdjustPrototypeSketch, build, test, adjust, repeat Test 106. Prototype Sketch - PaperHere is a user ow I did for a process for users to take content from the system, get a shorturl and pass it to the social sphere. Bottom right is a rough UI and the bottom left is a roughdata scheme. 107. Prototype Sketch - PaperHere is an interface sketch, the rst is the overall interface, the top right is the interface wheninteraction is initiated and the last is the new user interface that gets shown. 108. Prototype Sketch - WireframeNext you wireframe. Here is the social processs interface. 109. Prototype BuildHere is the user sketch built out. The top is the default state, the next is the interface afterthe new function has been initiated. 110. Prototype BuildHere is the new screen they are presented with to complete their process. 111. Prototype Testing - Focus Groups - Screen Capturing - Eye Tracking - Heat Mapping - AnalyticsTesting can be done with any of the above. 112. PrototypeTesting: Focus Groups A focus group involves encouraging an invited group of participants to share their thoughts, feelings, attitudes and ideas on a certain subject, feature or user flow. 113. Prototype Testing: Focus Groups - Prepare agendaStart by preparing an agenda. 114. Prototype Testing: Focus Groups - Prepare agenda - Invite 1 to 6 target usersNext invite 1 to 6 target users, depending on the agenda. 1 works better for them interactingwith website and 6 is best for a Q&A. 115. Prototype Testing: Focus Groups - Prepare agenda - Invite 1 to 6 target users - Meet in quiet roomYou want to be able to hear each other. 116. Prototype Testing: Focus Groups - Prepare agenda - Invite 1 to 6 target users - Meet in quiet room - Record sessionYou must record, either video or audio, video if they are interacting. This allows you toreference back and justies any changes in strategy. 117. PrototypeTesting: Focus Groups - Prepare agenda - Invite 1 to 6 target users - Meet in quiet room - Record session - Ask them to walk through, or walk them through tasks 118. Prototype Testing: Focus Groups - Prepare agenda - Invite 1 to 6 target users - Meet in quiet room - Record session - Ask