Introduction to UX for DevelopersJacques Woodcock                            @jacques_thekit                              ...
A little about me...
- Degree in DesignI started by getting my degree in design...
- Degree in Design                - Multimedia Designer...then started doing multimedia design...
- Degree in Design               - Multimedia Designer               - Multimedia Programmer...then multimedia programming...
- Degree in Design                 - Multimedia Designer                 - Multimedia Programmer                 - Coldfus...
- Degree in Design                - Multimedia Designer                - Multimedia Programmer                - Coldfusion...
- Degree in Design               - Multimedia Designer               - Multimedia Programmer               - Coldfusion, J...
- Degree in Design                - Multimedia Designer                - Multimedia Programmer                - Coldfusion...
Let’s get started
What is UX?
st1
ViewIt is NOT the View
View       = UI   (UI = User Interface)
UX is
Model   +   View   + Controller +   So Much More
“UX is the technical study of how usersinteract with your product.”
If I were to order web disciplines into a diagram,it might look like this...
User Interface                                    Technical Scope                                           UX            ...
User Interface                                    Technical Scope                                            UX           ...
A Quick History
Human interaction with technical               systems started being studied post WWIIThey found that even operators who’s...
The 80’s & 90’sWhen the computer started dominating the workplace, user-centered design took on a biggerimportance.
TodayToday, as the discipline has evolved, we look more at the psychological aspects of humaninteraction as opposed to jus...
Whitney Hess               5 Principles of UX
Whitney Hess           1. Understand the problem
Whitney Hess           1. Understand the problem           2. Dont hurt anyone
Whitney Hess           1. Understand the problem           2. Dont hurt anyone           3. Make things simple and intuitive
Whitney Hess           1. Understand the problem           2. Dont hurt anyone           3. Make things simple and intuiti...
Whitney Hess           1. Understand the problem           2. Dont hurt anyone           3. Make things simple and intuiti...
Sound Familiar?
Whitney Hess                   1. Understand the problem                   2. Dont hurt anyone                   3. Make t...
Whitney Hess               Expanded to 20
My Favorites?Here are some of my favorites.
My Favorite Principles   Present few choicesWe all know Apple is the king of fewer choices, yet they have the best user ex...
My Favorite Principles   Present few choicesThe more choices a person is presented with, the harder it is for them to choo...
My Favorite Principles   Create a visual hierarchy                          that matches the users needs "Visual hierarchy...
My Favorite Principles   Provide contextIf what users find when they get to your site/product isnt close to what they predi...
My Favorite Principles   Use appropriate defaultsProviding preselected or predetermined options is one of the ways to mini...
My Favorite Principles   Make actions reversibleThere is no such thing as a perfect design. No one and nothing can prevent...
My Favorite Principles   Provide feedbacktell them why theyre waiting. Tell them that youre working. Tell them you heard t...
My Favorite Principles   Be consistentWhen things dont match up between multiple areas, the experience can feel disjointed...
If I were to add 1...
My Favorite Principles   Don’t be lazyIn the battle to “just get it launched” you need to place followthrough at the top o...
Why is UX not UI?
UX defines your features, user flowand product personality.
UX:   - checking in      - sending messages      - tweeting, liking, +1ing      - the process to do these tasks
UI defines the screen style andlayout of those features.
UI:   - button styles      - colors      - content size
UI == Aesthetic DesignUX == Features and interacting with those features.
UX will define what the UI must createthrough wireframes.
Project: The Kit CMS           Deliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View Attende...
UI will convert the wireframe into an interface.
UI specialist will be a member ona UX team.
UX & Developers are cousins
Both try to solve a problem.
Both break a system down to basic tasks.
Both describes how a function interfaces with theoverall system.
Both plan for input and output.
Shared Goals; Different Focus
Developers think of whats best for the system
UX thinks of whats best for the user
Developer: “Is the process an efficient use of resources?”UX:        “Is the process efficient for the user?”
ExampleLet’s look at the focus of those questions in an example.
Example: RemoteLet’s look at the remote.
Devs:Want to make sure all functionality is assessable to the user, typically in one menu.
Devs:Which leaves you with this.
UX:UX designers understand the principles of user interaction.
UX:UX will deliver a product like this.
Not the same level of functionality,but a mountain of difference in usability.
Disciplines can be broken down to 3 areas.
1 Guiding principles
1 Guiding principles 2 Processes
1 Guiding principles 2 Processes   3 Tools
UX                           1 Guiding principles    DevUX and Dev share similar principles, as we discussed.
UX                                    - Listen                                          - Ask questions                   ...
UX Processes 1 Guiding principles 2 Processes                                         Dev ProcessesIt’s halfway through th...
UX Processes > User Flow 1 Guiding principles 2 Processes                                        Dev Processes > Technical...
Project      UX:   User Flow                          Dev:     Technical ScopeGood projects have both
Project      UX:   User Flow                          Dev:     Technical Scope, and they communicate.
Project   UX:   User Flow                                     User flow should define          Dev:     Technical Scope   ...
Project   UX:   User Flow                                     Technical scope should not          Dev:     Technical Scope...
Project   UX:   User Flow                                     ...beyond technical          Dev:     Technical Scope       ...
Why?
We build for users.Average users will trade functionality for usability.
You have to know your users.
Great UX specialist understand development.
Efficient UX specialist have coding knowledge.
UX specialist prototype.
UX specialist prototype.        Papered process flowsSome present papered process flows.
AJAX/JQuery     UX specialist prototype.Some prototype in AJAX/JQuery
AJAX/JQuery    UX specialist prototype.   HTML/CSSHTML/CSS
AJAX/JQuery     UX specialist prototype.   HTML/CSS                                PHPand even PHP
Great UX specialist write prototypes that can bepushed to developers for final production.
AJAX/JQuery                                                                  HTML/CSS          Use prototypes to          ...
How do I get started?
st1
Change Mindset
FromHow can I organize these featuresto create an efficient system?
ToHow can I organize these featuresfor an efficient user experience?
nd2
Interact with REAL usersTake them out for coffee, lunch, or just chat on the phone.
KNOW YOUR USERS!
rd3
Sketch                                      Build            AdjustPrototypeSketch, build, test, adjust, repeat           ...
Prototype Sketch - PaperHere is a user flow I did for a process for users to take content from the system, get a shorturl a...
Prototype Sketch - PaperHere is an interface sketch, the first is the overall interface, the top right is the interface whe...
Prototype Sketch - WireframeNext you wireframe. Here is the social process’s interface.
Prototype BuildHere is the user sketch built out. The top is the default state, the next is the interface afterthe new fun...
Prototype BuildHere is the new screen they are presented with to complete their process.
Prototype Testing                               - Focus Groups                               - Screen Capturing           ...
PrototypeTesting: Focus Groups     A focus group involves encouraging an invited group     of participants to share their ...
Prototype Testing: Focus Groups       - Prepare agendaStart by preparing an agenda.
Prototype Testing: Focus Groups       - Prepare agenda       - Invite 1 to 6 target usersNext invite 1 to 6 target users, ...
Prototype Testing: Focus Groups       - Prepare agenda       - Invite 1 to 6 target users       - Meet in quiet roomYou wa...
Prototype Testing: Focus Groups       - Prepare agenda       - Invite 1 to 6 target users       - Meet in quiet room      ...
PrototypeTesting: Focus Groups     - Prepare agenda     - Invite 1 to 6 target users     - Meet in quiet room     - Record...
Prototype Testing: Focus Groups       - Prepare agenda       - Invite 1 to 6 target users       - Meet in quiet room      ...
PrototypeTesting: Eye Tracking     “Eye tracking is the process of measuring either the     point of gaze ("where we are l...
Prototype Testing: Eye TrackingThis works by placing a camera on top of the user’s computer.
Prototype Testing: Eye TrackingIt then beam infrared light out that is in turn reflected back bythe human eye.
Prototype Testing: Eye TrackingIn the end, you can pinpoint where the user’s eyes move to.
PrototypeTesting: Screen Capturing     Screen capturing allows you to see exactly what     your users are doing on your si...
Prototype  Testing: Screen CapturingI love this tool.
Prototype Testing: Screen Capturing                             DemoCan’t embed demo. Sorry.
Prototype Testing: Screen Capturing       Some providers:       User Fly       http://userfly.com       ExactoStats       ...
PrototypeTesting: Heat Mapping     “A heat map is an easy way to understand what     users do on your site. It’s a visual ...
PrototypeTesting: Heat Mapping     Many software solutions for making heat maps.
PrototypeTesting: Heat Mapping     Most are based off of user click patterns.
PrototypeTesting: Heat Mapping Notice the colors
PrototypeTesting: Heat Mapping Cool colors are few clicks
Prototype Testing: Heat Mapping   Warm colors are   most clickedhere you will see most people use this page to login.
Prototype Testing: Heat Mapping       Some providers:       Crazy Egg       http://www.crazyegg.com/       Omniture       ...
PrototypeTesting: Analytics      We all know what analytics are, but do we      understand how they help usability?
PrototypeTesting: Analytics      First, they clarify what works in your UI.
PrototypeTesting: Analytics      Next, they justify your content, or justify removing      some of your content.
PrototypeTesting: Analytics      Lastly, they can tell you if your user flow is working.
PrototypeTesting: Analytics      There are many names for this, funnels, goals, paths.      I like conversion as it implie...
Prototype Testing: Analytics       This works by tracking how your user comes in, where       they go and where they end u...
PrototypeTesting: Analytics   So you have your site.                                       Home                     About ...
PrototypeTesting: Analytics   You define a successful   conversion follows this path.                                     ...
PrototypeTesting: Analytics   With analytics, you find that   users follow this path.                                     ...
Prototype Testing: Analytics       There’s something wrong with your user experience.So you...
Prototype Adjusting                     Sketch             Build            Adjust                      TestAdjust
Repeat
To Sum Up
UX != UI
UX             UIUX owns UI
UX   like   Development
UX    like  DevelopmentShared goals, different focus
UX   ==   DevelopmentIn the case of prototyping.
Get Started
Change MindsetGet Started
Change Mindset   Get Started       Interact with REAL usersKnow your users!!!
Change MindsetGet Started   Interact with REAL users              Sketch, build, test, adjust, repeat
One last thing
Pay attention to design.Okay, I know a lot of developers are going to scrum by this word, but trust me, it’s okay.We’re no...
Pay attention to design.You may not be a designer, but you have opinions on design, and that’s okay. So quickly...
DesignDesign covers a wide variety of definitions and skills. It can be one of the most misleadingdisciplines out there.
Design == CreativityMost people think design equals creativity.
Design == CreativityThey are wrong. I know so many people who are good with UX design that have no ability to“design.”
Design is simply the structuring of elements               into a pleasing, or usable, product for the               targe...
Design is simply the structuring of elements               into a pleasing, or usable, product for the               targe...
DesignBut we are talking design.
UX DesignAnd more specially UX design.
Sketch                           Build                                          ∞            Adjust                       ...
Introduction to UX for Developers                                                   Jacques Woodcock     References     Pe...
Upcoming SlideShare
Loading in...5
×

Introduction to UX for Developers

2,453

Published on

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.

Published in: Technology, Business

Introduction to UX for Developers

  1. 1. Introduction to UX for DevelopersJacques Woodcock @jacques_thekit @kitportal
  2. 2. A little about me...
  3. 3. - Degree in DesignI started by getting my degree in design...
  4. 4. - Degree in Design - Multimedia Designer...then started doing multimedia design...
  5. 5. - Degree in Design - Multimedia Designer - Multimedia Programmer...then multimedia programming...
  6. 6. - Degree in Design - Multimedia Designer - Multimedia Programmer - Coldfusion, Javascript, PHP...then started learning most web technologies....
  7. 7. - Degree in Design - Multimedia Designer - Multimedia Programmer - Coldfusion, Javascript, PHP - Project Managment...then on to project management...
  8. 8. - Degree in Design - Multimedia Designer - Multimedia Programmer - Coldfusion, Javascript, PHP - Project Managment - Business Dev, Ops Managment...business development and operations management...
  9. 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. 10. Let’s get started
  11. 11. What is UX?
  12. 12. st1
  13. 13. ViewIt is NOT the View
  14. 14. View = UI (UI = User Interface)
  15. 15. UX is
  16. 16. Model + View + Controller + So Much More
  17. 17. “UX is the technical study of how usersinteract with your product.”
  18. 18. If I were to order web disciplines into a diagram,it might look like this...
  19. 19. User Interface Technical Scope UX Business StrategyBusiness Strategy is your base then you build on that with your UX which defines yourTechnical Scope and is presented with your User Interface.
  20. 20. User Interface Technical Scope UX Business StrategyUX is crucial to defining your technical scope and thus your project.
  21. 21. A Quick History
  22. 22. Human interaction with technical systems started being studied post WWIIThey found that even operators who’s live depended on using a technical system, still raninto human limitations.
  23. 23. The 80’s & 90’sWhen the computer started dominating the workplace, user-centered design took on a biggerimportance.
  24. 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. 25. Whitney Hess 5 Principles of UX
  26. 26. Whitney Hess 1. Understand the problem
  27. 27. Whitney Hess 1. Understand the problem 2. Dont hurt anyone
  28. 28. Whitney Hess 1. Understand the problem 2. Dont hurt anyone 3. Make things simple and intuitive
  29. 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. 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. 31. Sound Familiar?
  32. 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. 33. Whitney Hess Expanded to 20
  34. 34. My Favorites?Here are some of my favorites.
  35. 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. 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. 37. My Favorite Principles Create a visual hierarchy that 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. 38. My Favorite Principles Provide contextIf what users find when they get to your site/product isnt close to what they predicted,chances are theyre going to give up and go elsewhere
  39. 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. 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. 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. 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. 43. If I were to add 1...
  44. 44. My Favorite Principles Don’t 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 don’t mean squat if you don’t apply them.
  45. 45. Why is UX not UI?
  46. 46. UX defines your features, user flowand product personality.
  47. 47. UX: - checking in - sending messages - tweeting, liking, +1ing - the process to do these tasks
  48. 48. UI defines the screen style andlayout of those features.
  49. 49. UI: - button styles - colors - content size
  50. 50. UI == Aesthetic DesignUX == Features and interacting with those features.
  51. 51. UX will define what the UI must createthrough wireframes.
  52. 52. Project: The Kit CMS Deliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View Attendees Big Heart Design | August 24, 2008 WELCOME MARTHA TAYLOR! The Kit Logo LOGOUT | MY ACCOUNT | CONTACT US | HELP HOME PAGES RELATIONSHIPS MANAGERS NEW PAGE QUICK PAGE EDIT MANAGE ATTENDEE RECORDS KIT NEWS PAGE ORDER << Back | National Conference Attendee Report News headlines #1 SITE FILES News headlines #2 News headlines #3 ATTENDEE NAME: EVENT: National Conference GO News headlines #4 News headlines #5 Attendee Status Actions Matt Carlisle Paid View | Mark as Unpaid | Delete Jacques Woodcock Unpaid View | Mark as Paid | Delete PRINT ATTENDEE RECORDUX will direct with a wireframe. Here is an example of a wireframe for a user interface.
  53. 53. UI will convert the wireframe into an interface.
  54. 54. UI specialist will be a member ona UX team.
  55. 55. UX & Developers are cousins
  56. 56. Both try to solve a problem.
  57. 57. Both break a system down to basic tasks.
  58. 58. Both describes how a function interfaces with theoverall system.
  59. 59. Both plan for input and output.
  60. 60. Shared Goals; Different Focus
  61. 61. Developers think of whats best for the system
  62. 62. UX thinks of whats best for the user
  63. 63. Developer: “Is the process an efficient use of resources?”UX: “Is the process efficient for the user?”
  64. 64. ExampleLet’s look at the focus of those questions in an example.
  65. 65. Example: RemoteLet’s look at the remote.
  66. 66. Devs:Want to make sure all functionality is assessable to the user, typically in one menu.
  67. 67. Devs:Which leaves you with this.
  68. 68. UX:UX designers understand the principles of user interaction.
  69. 69. UX:UX will deliver a product like this.
  70. 70. Not the same level of functionality,but a mountain of difference in usability.
  71. 71. Disciplines can be broken down to 3 areas.
  72. 72. 1 Guiding principles
  73. 73. 1 Guiding principles 2 Processes
  74. 74. 1 Guiding principles 2 Processes 3 Tools
  75. 75. UX 1 Guiding principles DevUX and Dev share similar principles, as we discussed.
  76. 76. UX - Listen - Ask questions 2 Processes - Define a goal Dev - Define milestonesThey even start with a similar process.
  77. 77. UX Processes 1 Guiding principles 2 Processes Dev ProcessesIt’s halfway through the process that they split.
  78. 78. UX Processes > User Flow 1 Guiding principles 2 Processes Dev Processes > Technical ScopeUX starts to focus on the user flow while devs start to focus on the technical scope.
  79. 79. Project UX: User Flow Dev: Technical ScopeGood projects have both
  80. 80. Project UX: User Flow Dev: Technical Scope, and they communicate.
  81. 81. Project UX: User Flow User flow should define Dev: Technical Scope the technical scope.
  82. 82. Project UX: User Flow Technical scope should not Dev: Technical Scope influence the user flow...
  83. 83. Project UX: User Flow ...beyond technical Dev: Technical Scope limitations.
  84. 84. Why?
  85. 85. We build for users.Average users will trade functionality for usability.
  86. 86. You have to know your users.
  87. 87. Great UX specialist understand development.
  88. 88. Efficient UX specialist have coding knowledge.
  89. 89. UX specialist prototype.
  90. 90. UX specialist prototype. Papered process flowsSome present papered process flows.
  91. 91. AJAX/JQuery UX specialist prototype.Some prototype in AJAX/JQuery
  92. 92. AJAX/JQuery UX specialist prototype. HTML/CSSHTML/CSS
  93. 93. AJAX/JQuery UX specialist prototype. HTML/CSS PHPand even PHP
  94. 94. Great UX specialist write prototypes that can bepushed to developers for final production.
  95. 95. AJAX/JQuery HTML/CSS Use prototypes to PHP streamline development. Development EnvironmentYou can even use these prototypes to streamline the development process.
  96. 96. How do I get started?
  97. 97. st1
  98. 98. Change Mindset
  99. 99. FromHow can I organize these featuresto create an efficient system?
  100. 100. ToHow can I organize these featuresfor an efficient user experience?
  101. 101. nd2
  102. 102. Interact with REAL usersTake them out for coffee, lunch, or just chat on the phone.
  103. 103. KNOW YOUR USERS!
  104. 104. rd3
  105. 105. Sketch Build AdjustPrototypeSketch, build, test, adjust, repeat Test
  106. 106. Prototype Sketch - PaperHere is a user flow 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. 107. Prototype Sketch - PaperHere is an interface sketch, the first 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. 108. Prototype Sketch - WireframeNext you wireframe. Here is the social process’s interface.
  109. 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. 110. Prototype BuildHere is the new screen they are presented with to complete their process.
  111. 111. Prototype Testing - Focus Groups - Screen Capturing - Eye Tracking - Heat Mapping - AnalyticsTesting can be done with any of the above.
  112. 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. 113. Prototype Testing: Focus Groups - Prepare agendaStart by preparing an agenda.
  114. 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. 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. 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 justifies any changes in strategy.
  117. 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. 118. Prototype Testing: 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 - Document feedbackDocumenting feedback should be highlights as you have a recording to reference back to fordetails.
  119. 119. PrototypeTesting: Eye Tracking “Eye tracking is the process of measuring either the point of gaze ("where we are looking") or the motion of an eye relative to the head.”
  120. 120. Prototype Testing: Eye TrackingThis works by placing a camera on top of the user’s computer.
  121. 121. Prototype Testing: Eye TrackingIt then beam infrared light out that is in turn reflected back bythe human eye.
  122. 122. Prototype Testing: Eye TrackingIn the end, you can pinpoint where the user’s eyes move to.
  123. 123. PrototypeTesting: Screen Capturing Screen capturing allows you to see exactly what your users are doing on your site, down to all sporadic mouse movements, by recording their complete session.
  124. 124. Prototype Testing: Screen CapturingI love this tool.
  125. 125. Prototype Testing: Screen Capturing DemoCan’t embed demo. Sorry.
  126. 126. Prototype Testing: Screen Capturing Some providers: User Fly http://userfly.com ExactoStats http://exactostats.com/ ClickTale http://www.clicktale.com/Some providers of Screen Capturing.
  127. 127. PrototypeTesting: Heat Mapping “A heat map is an easy way to understand what users do on your site. It’s a visual representation showing you where people click and what users do.”
  128. 128. PrototypeTesting: Heat Mapping Many software solutions for making heat maps.
  129. 129. PrototypeTesting: Heat Mapping Most are based off of user click patterns.
  130. 130. PrototypeTesting: Heat Mapping Notice the colors
  131. 131. PrototypeTesting: Heat Mapping Cool colors are few clicks
  132. 132. Prototype Testing: Heat Mapping Warm colors are most clickedhere you will see most people use this page to login.
  133. 133. Prototype Testing: Heat Mapping Some providers: Crazy Egg http://www.crazyegg.com/ Omniture http://www.omniture.com/en/ Clickdestiny http://www.clickdensity.com/ Google Analytics https://www.google.com/analytics/ And many othersGoogle actually only gives you the percentage of clicks per link, but that’s still useful.
  134. 134. PrototypeTesting: Analytics We all know what analytics are, but do we understand how they help usability?
  135. 135. PrototypeTesting: Analytics First, they clarify what works in your UI.
  136. 136. PrototypeTesting: Analytics Next, they justify your content, or justify removing some of your content.
  137. 137. PrototypeTesting: Analytics Lastly, they can tell you if your user flow is working.
  138. 138. PrototypeTesting: Analytics There are many names for this, funnels, goals, paths. I like conversion as it implies your user flow is taking a user from the start to your desired destination.
  139. 139. Prototype Testing: Analytics This works by tracking how your user comes in, where they go and where they end up.It’s easy when you have a finite task, such as share a photo. You can tell how your conversionis doing by how many photos are being shared. Still, it’s good to know how your users comein and then find the share function.
  140. 140. PrototypeTesting: Analytics So you have your site. Home About Login Sign Up Support Blog Team Share Post 1 Service Post 2
  141. 141. PrototypeTesting: Analytics You define a successful conversion follows this path. Home About Login Sign Up Support Blog Team Share Post 1 Service Post 2
  142. 142. PrototypeTesting: Analytics With analytics, you find that users follow this path. Home About Login Sign Up Support Blog Team Share Post 1 Service Post 2
  143. 143. Prototype Testing: Analytics There’s something wrong with your user experience.So you...
  144. 144. Prototype Adjusting Sketch Build Adjust TestAdjust
  145. 145. Repeat
  146. 146. To Sum Up
  147. 147. UX != UI
  148. 148. UX UIUX owns UI
  149. 149. UX like Development
  150. 150. UX like DevelopmentShared goals, different focus
  151. 151. UX == DevelopmentIn the case of prototyping.
  152. 152. Get Started
  153. 153. Change MindsetGet Started
  154. 154. Change Mindset Get Started Interact with REAL usersKnow your users!!!
  155. 155. Change MindsetGet Started Interact with REAL users Sketch, build, test, adjust, repeat
  156. 156. One last thing
  157. 157. Pay attention to design.Okay, I know a lot of developers are going to scrum by this word, but trust me, it’s okay.We’re not going to talk color palates, nor shading.
  158. 158. Pay attention to design.You may not be a designer, but you have opinions on design, and that’s okay. So quickly...
  159. 159. DesignDesign covers a wide variety of definitions and skills. It can be one of the most misleadingdisciplines out there.
  160. 160. Design == CreativityMost people think design equals creativity.
  161. 161. Design == CreativityThey are wrong. I know so many people who are good with UX design that have no ability to“design.”
  162. 162. Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.Design is simply the structuring of elements into a pleasing, or usable, product for a targetaudience to consume.
  163. 163. Design is simply the structuring of elements into a pleasing, or usable, product for the target audience to consume.Don’t get me wrong. Art is something totally different than design. There’s emotion, thought,pain, love and so much more that goes into art.
  164. 164. DesignBut we are talking design.
  165. 165. UX DesignAnd more specially UX design.
  166. 166. Sketch Build ∞ Adjust TestYou piece together a user experience from what’s proven to work for the user by getting toknow the user, testing your product, adjusting your offering and repeating. ∞
  167. 167. Introduction to UX for Developers Jacques Woodcock References Pek Pongpaet http://uxmag.com/design/user-experience-for-developers Whitney Hess http://www.uxmag.com/design/guiding-principles-for-ux-designers Justin Davis http://www.maderalabs.com/blog/five-things-every-developer-should-understand-about-ux/ #more-1051 Everett McKay http://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/ David Leggett http://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/ Focus Groups http://www.webcredible.co.uk/user-friendly-resources/web-usability/focus-groups.shtml 29 Free Tools http://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/ Dr. Tobias Komischke http://blogs.infragistics.com/pixel8/media/p/95683.aspx @jacques_thekit @kitportal
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×