Everyone always want their own site look nice but how much they know about their user characteristics. This presentation will guide you about "key success factor to design a web site", "how to reach your target", "leading to win-win situation" and "testing your site and analyze results"

1. Created by

3. Applying customer-centered design

5. Consider function first, presentation later

6. Conform to the users’ view of the task

7. Design for the common case

8. Don’t distract users from their goals

9. Facilitate learning

10. Deliver information, not just data

11. Design for responsiveness

14. Storyboard

16. Applying customer-centered design

18. Applying customer-centered design

20. Why Customer-Centered Web Design ? With customer-centered design… you do the work up front to ensure that the web site has the features customers need, by determining and planning for the most important features and by making certain that those features are built in a way that customers will understand. This method actually takes less time and money to implement in the long run. In short, customer-centered design helps you build the right web site and build the web site right!

22. Applying customer-centered design

25. Applying customer-centered design

28. Consider function first, presentation later

29. Conform to the users’ view of the task

30. Design for the common case

31. Don’t distract users from their goals

32. Facilitate learning

33. Deliver information, not just data

34. Design for responsiveness

37. Consider function first, presentation later

38. Conform to the users’ view of the task

39. Design for the common case

40. Don’t distract users from their goals

41. Facilitate learning

42. Deliver information, not just data

43. Design for responsiveness

45. What is the software for? What activity is it intended to support? What problems will it help users solve? What value will it provide?

46. What problems do the intended users have now? What do they like and dislike about the way they work now?

47. What are the skills and knowledge of the intended users? Are they motivated to learn? How? Are there different classes of users, with different skills. Knowledge, and motivation

48. How do users conceptualize the data that the software will manage?

52. Collaborate with the intended users to learn about them Understanding the user is best accomplished by working with them as collaborators. Don’t treat users only as objects to be studied. Bring some of them onto your team. Treat them as experts, albeit a different kind of expert than the developers. They understand their job, experience, management structure, likes and dislikes, and motivation. They probably don’t understand programming and user interface design, but that’s OK – others on your team do. A useful slogan to keep in mind when designing software is: “Software should be designed neither for users nor by them, but rather with them”

53. Investigate characteristics of the intended users Making an effort to learn the relevant characteristics of potential users. Surveying potential users helps you find specific populations whose requirements and demographics make them attractive target market After identifying a primary user population, learn as much as possible about that population .

54. Users: Not just novice vs. experienced Software developersoften think of their intended user as varying on a continuum from computer “novice” to “expert.” People who have never used a computer are on the novice end; professional computer engineers are on the expert end. In that assumption, continuum is wrong. No such continuum exists. A more realistic and useful view is that the intended users can be placed along three independent knowledge dimensions: General computer savvy -how much they know about computers in general Task knowledge -how facile they are at performing the target task, e.g., accounting Knowledge of the system -how well they know the specific software product, or ones like it Knowledgein one of these dimensions does not imply knowledge in another. People can be high or low on any of these dimensions, Independently.

55. Collaboration Decision Bring it all together Investigation The goal is to produce profiles that describe the primary intended users of the software. The profile should include information such as job description, job seniority, education, salary, hourly versus salaried, how their performance is rated, age, computer skill level, and relevant physical or social characteristics.

57. Investigate the intended tasks

58. Collaborate with users to learn about the tasks

60. Its past history

61. Its assets, processes, and infrastructure

62. Its perception of market opportunities and niches

64. Example: Task-analysis questions For a task analysis of how people prepare slide presentations, we interviewed people in their offices, encouraging them to both talk about and demonstrate how they work. What is your role in producing slide presentations? 1.1 Do you produce slides yourself or do you supervise others who do it? 1.2 How much of your total job involves producing slide presentations? 1.3 For whom do you produce these slide presentations? What software do you use to create slide presentations? 2.1 Who decides what software you use for this? 2.2 Do you use one program or a collection of them?

65. Collaborate with users to learn about the task Collaborating with users is even more important for understanding the tasks than it is for understanding the users. The limitations of both interviewed and observation make it risky to rely on upon conclusion obtained by either method alone. These limitations can be overcome by introducing two-way feedback into task discovery and analysis process. Don’t just collect data from users; present the preliminary analyses and conclusion to them to and solicit their reactions.

67. Which tasks are common, and which ones are rare?

68. Which tasks are most important, and which ones are least important?

69. What are the steps of each tasks?

70. What is the result and output of each task?

72. What tools are used to do each task?

74. How are different tasks related?

77. Consider function first, presentation later

78. Conform to the users’ view of the task

79. Design for the common case

80. Don’t distract users from their goals

81. Facilitate learning

82. Deliver information, not just data

83. Design for responsiveness

85. What data will users create, view, or manipulate with the software? What information will users extract from the data? How? What steps will they use? Where will the data that users bring into the software come from, and where will the data produced in it be used?

88. Consistency: Enumerating the objects and actions of an application’s supported task allows you to notice actions that are shared by many objects. The design can then use the same user interface for operations across those objects. This makes the UI simpler and more consistent and thus easier to learn.

89. Importance: Listing all user-visible concepts allows you to rate their relative importance. This impacts both the UI design and the development priorities.

91. Kick-start development: An objects/actions analysis provides an initial object model- at least for objects that users encounter. Developers can start coding it even before the UI is designed.

93. Consider function first, presentation later

94. Conform to the users’ view of the task

95. Design for the common case

96. Don’t distract users from their goals

97. Facilitate learning

98. Deliver information, not just data

99. Design for responsiveness

101. Imposing arbitrary restrictions

102. Use users’ vocabulary, not your own

103. Keep program internals inside the program

106. Allowing table rows to be sorted by at most three columns

107. Providing Undo for only the last three actions

108. Requiring a fax number in all address book entries even though some users don’t have fax machines.

109. Use users’ vocabulary, not your own When writing text for the software or its documentation, avoid computer jargon. You should create a project lexicon. The lexicon should name every concept (object, action, or attribute)

110. Keep program internals inside the program Softwareusers are not interested in how the software works. They just want to achieve their goals.

112. Generic commands: Use a small set of command to manipulate all types of data.

113. Task-specific design: Offer user a small specialized programs to support one task.

115. Consider function first, presentation later

116. Conform to the users’ view of the task

117. Design for the common case

118. Don’t distract users from their goals

119. Facilitate learning

120. Deliver information, not just data

121. Design for responsiveness

123. Two types of “common” : “how many users?” vs. “how often?”

125. The more users will use a feature, the more visible it should be

129. Consider function first, presentation later

130. Conform to the users’ view of the task

131. Design for the common case

132. Don’t distract users from their goals

133. Facilitate learning

134. Deliver information, not just data

135. Design for responsiveness

138. Don’t make users reason by elimination Minimizingthe need for problem solving in the domain of computer technology includes not requiring users to figure out how software works by a process of eliminations.

140. Consider function first, presentation later

141. Conform to the users’ view of the task

142. Design for the common case

143. Don’t distract users from their goals

144. Facilitate learning

145. Deliver information, not just data

146. Design for responsiveness

149. Consistency , consistency, consistency User interfaces should foster the development of usage habits. When using interactive software and electronic appliances. They want to be able to ignore the software or device and focus on their work. The more consistent the software is, the easier it is for users to do that

151. Consider function first, presentation later

152. Conform to the users’ view of the task

153. Design for the common case

154. Don’t distract users from their goals

155. Facilitate learning

156. Deliver information, not just data

157. Design for responsiveness

159. The screen belongs to the user

161. Scannability: Computer users rarely read the screen carefully. They usually scan it quickly looking for anything matching their goals.

162. Match the medium: One mark of a poorly designed UI is failing to match the design to the limitations of the presentations medium.

164. Move controls to the pointer.

165. Reposition, stretch, or shrink windows.Such attemptsto be helpful and efficient disorient and frustrate users more than they help. They interfere with users’ perception of the screen as being under their own control.

166. Preserve display inertia If a user edits a field in a Web form or a word on a Wiki page, it would be poor UI design for the entire page to refresh.

168. Consider function first, presentation later

169. Conform to the users’ view of the task

170. Design for the common case

171. Don’t distract users from their goals

172. Facilitate learning

173. Deliver information, not just data

174. Design for responsiveness

176. Let users know when it is busy and when it isn’t.

177. Free user to do other things while waiting for a function to finish.

178. Animate movement smoothly and clearly.

179. Allow users to abort lengthy operations they don’t want

180. Allow users to judge how much time operations will take

182. Consider function first, presentation later

183. Conform to the users’ view of the task

184. Design for the common case

185. Don’t distract users from their goals

186. Facilitate learning

187. Deliver information, not just data

188. Design for responsiveness

190. How many users should you test

191. Schedule time to correct problems found by tests

192. Testing has two goals: Informational and social

194. How many users should you test? ONE TEST WITH 8 USERS TOTAL PROBLEMS FOUND: 5 8 users Eight users may find more problems in a single test. But the worst problems will usually keep them from getting far enough to encounter some others. TWO TEST WITH 3 USERS TOTAL PROBLEMS FOUND: 9 First test: 3 users Second test: 3 users But in the second test, with the first set of problems fixed, they’ll find problems they couldn’t have seen in the first test. Three users may not find as many problems in a single test.

195. Schedule time to correct problems found by tests Of course, it isn’t enough just to test the usability of a product or service. Developers must also provide time in the development schedule to correct problems uncovered by testing. Otherwise, why test?

196. Testing has two goals: Informational and social Information goal:find the aspects of the user interface that cause users difficulty, and use exact nature of the problems to suggest improvements. Social goal:It is at least as important as the informational goal. It is to convince developers that there are design problems that need correcting.

197. There are tests for every time and purpose Test can be conducted before any code is written, when the software has been only partially implemented, or after the software is almost done.

201. Key Insights Analysis (KIA) 1. Click Density Analysis:You can see what the difference in behavior is for different kinds of traffic to your website. 2. Visitor Primary Purpose:Conduct a survey, do phone interviews. Seek out real customers and ask them why they show up on your website. 3. Task completion Rates: Page view cannot measure the customer satisfaction. 4. Segmented Visitor Trends:ClickTracks and Visual Sciences (analysis tool) allow you to segment your customers and their behavior in a meaningful way that allows for a significantly richer understanding of their interaction with your website. 5. Multichannel Impact Analysis: Measuring the impact of your web site on other channels (how many people use your website but buy your product via retail or via your phone channel)

205. Storyboard

207. Storyboard

210. Storyboard

213. Storyboard

215. References 1. Don't Make Me Think!: A Common Sense Approach to Web Usability, Steve Krug 2. The Design of Sites: Patterns for Creating Winning Websites, Douglas K. van Duyne 3. Prioritizing Web Usability, Jakob Nielsen 4. GUI Bloopers 2.0: Common User Interface Design Don’ts and Dos, Morgan Kaufmann

216. Thank you for watching my presentation Created by panuausavasereelert blog: http://panu.in.th email: panu@panu.in.th twitter: @panuinth