1. Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft www.rammsoft.com Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft www.rammsoft.com February 20, 2008 RammSoft The Key To Your Success The Key To Your Success

2. RammSoft 2 Web Site Vs. Web Application Web site Information Monologue Design Aesthetics Navigation Security Web site Information Monologue Design Aesthetics Navigation Security Web application Business use Interactive Design Utility Usability Security

3. RammSoft 3 Why Use Web Applications? Widely accessible Easy deployment Easy management Simple interaction Widely accessible Easy deployment Easy management Simple interaction

4. RammSoft 4 Reasons To Avoid Web Apps Local network Fast interaction Standard interface Typing activities Security / Control Local network Fast interaction Standard interface Typing activities Security / Control

5. RammSoft 5 Types of Web Applications Intranet applications Local language applications Internationally used Commercial applications Workload and security considerations Intranet applications Local language applications Internationally used Commercial applications Workload and security considerations

6. RammSoft 6 What Is Usability? System design approach Puts the user at the center of the process Addresses the relationship between tools and their users A tool must allow intended users to accomplish their tasks in the best way possible System design approach Puts the user at the center of the process Addresses the relationship between tools and their users A tool must allow intended users to accomplish their tasks in the best way possible

7. RammSoft 7 Usability Factors What does usability depend on? How well the functionality fits user needs How well the flow through the application fits user tasks How well the response of the application fits user expectations What does usability depend on? How well the functionality fits user needs How well the flow through the application fits user tasks How well the response of the application fits user expectations

8. RammSoft 8 A Broad Definition A quality of a system that makes it Easy to learn Easy to use Easy to remember Error tolerant Subjectively pleasing A quality of a system that makes it Easy to learn Easy to use Easy to remember Error tolerant Subjectively pleasing

9. RammSoft 9 A Narrow (Formal) Definition Ease of use Measures how easy it is to use a product to perform prescribed tasks Usefulness Measures whether the actual uses can achieve their goals Utility The ability of the product to perform tasks Ease of use Measures how easy it is to use a product to perform prescribed tasks Usefulness Measures whether the actual uses can achieve their goals Utility The ability of the product to perform tasks

10. RammSoft 10 Utility Examples Windows calculator

11. RammSoft 11 Utility Examples MS Word for DOS

12. RammSoft 12 Methods of Achievement User-centered design Incorporates user concerns from the beginning of the design process Dictates that the user needs should be foremost in any design decisions Usability testing Testing with ordinary users Feedback Slogans Don’t Work User-centered design Incorporates user concerns from the beginning of the design process Dictates that the user needs should be foremost in any design decisions Usability testing Testing with ordinary users Feedback Slogans Don’t Work

13. RammSoft 13 Other Aspects Likeability People tend to like highly usable products but a well-liked product is not always usable Usability testing primarily measures performance, not preference You can use standardized questionnaires to measure preference across products Likeability People tend to like highly usable products but a well-liked product is not always usable Usability testing primarily measures performance, not preference You can use standardized questionnaires to measure preference across products

14. RammSoft 14 Other Aspects (2) Discovery Looking for, and finding, a product’s feature Learning The process by which the user figures out how to use a discovered feature Efficiency The point at which the user has “mastered” the feature Discovery Looking for, and finding, a product’s feature Learning The process by which the user figures out how to use a discovered feature Efficiency The point at which the user has “mastered” the feature

15. RammSoft 15 Why Is Usability Important? For the customer Better productivity Low costs Profit For the users Less pain Professional improvement For the customer Better productivity Low costs Profit For the users Less pain Professional improvement

16. RammSoft 16 Why Is Usability Important? (2) For the development company Reduces the number of support calls from users Reduces training costs Increased user acceptance Differentiates your products from those of your competitors For the development company Reduces the number of support calls from users Reduces training costs Increased user acceptance Differentiates your products from those of your competitors

17. RammSoft 17 How to Achieve it? Early focus on users Concentrate on understanding the users needs early in the design process Integrated design All aspects of the design should evolve in parallel, rather than in sequence Early and continual testing Iterative design Early focus on users Concentrate on understanding the users needs early in the design process Integrated design All aspects of the design should evolve in parallel, rather than in sequence Early and continual testing Iterative design

18. RammSoft 18 Why Doesn’t it Happen? Not an explicit project goal PMs do not see the tradeoffs The unseen impact on the system architecture Confusing customers with users Technical focus on the project Feature-based design vs. scenario- based design Diffusion of design authority Not an explicit project goal PMs do not see the tradeoffs The unseen impact on the system architecture Confusing customers with users Technical focus on the project Feature-based design vs. scenario- based design Diffusion of design authority

19. RammSoft 19 UI Design Principles The customer is not the user You don’t know what your user wants Observe user’s activities Test early, test often, then test again Talk one language Use metaphors Make difficult decisions The customer is not the user You don’t know what your user wants Observe user’s activities Test early, test often, then test again Talk one language Use metaphors Make difficult decisions

20. RammSoft 20 UI Design Principles (2) Let the user work Prevent, don't scold Give sufficient feedback Don't lose the user Don't keep them waiting Accessibility for disabled Let the user work Prevent, don't scold Give sufficient feedback Don't lose the user Don't keep them waiting Accessibility for disabled

21. RammSoft 21 Web UI Concepts Explicitness Be perfectly accurate Use verbose phrasing Grouping and segregation Put related things together Separate and distinguish them Make everything browsable Explicitness Be perfectly accurate Use verbose phrasing Grouping and segregation Put related things together Separate and distinguish them Make everything browsable

22. RammSoft 22 Web Application Paradox Server-based design The client has a lot of options to impact the design They don’t use them Server-based design The client has a lot of options to impact the design They don’t use them

23. RammSoft 23 Design Tips Do not use small fonts Do not use color or textured backgrounds Use pop-ups carefully Screen resolution Accessibility for disabled Put important things at the top and left Test on different browsers Do not use small fonts Do not use color or textured backgrounds Use pop-ups carefully Screen resolution Accessibility for disabled Put important things at the top and left Test on different browsers

24. RammSoft 24 Accessibility Tips Have menus always available Use a navigation bar Have search ability on top Have menus always available Use a navigation bar Have search ability on top

25. RammSoft 25 Amazon Example

26. RammSoft 26 Accessibility Tips(2) Windows can be resized Use flexible layouts Do not make them scroll horizontally Beware of the “Back” button Avoid using long pages Create page menu (summary) Windows can be resized Use flexible layouts Do not make them scroll horizontally Beware of the “Back” button Avoid using long pages Create page menu (summary)

27. RammSoft 27 Wikipedia Example

28. RammSoft 28 General Form Usability Tips Avoid using long forms. Use wizards instead Avoid reloading the page on every click. Load some lists at the client Avoid using long forms. Use wizards instead Avoid reloading the page on every click. Load some lists at the client

29. RammSoft 29 Registration Form Usability Tips Don’t ask for more information than is required Distinguish required fields from optional with an asterisk (*) Make the email address the username Clearly define password requirements Ask user to confirm email and password Don’t ask for more information than is required Distinguish required fields from optional with an asterisk (*) Make the email address the username Clearly define password requirements Ask user to confirm email and password

30. RammSoft 30 Alibris Example

31. RammSoft 31 Registration Form Usability Tips (2) Avoid security questions, instead send a confirmation email with login details Make sure your registration form is internationally usable Don’t use unreadable captchas Avoid security questions, instead send a confirmation email with login details Make sure your registration form is internationally usable Don’t use unreadable captchas

32. RammSoft 32 Captcha Examples

33. RammSoft 33 Captcha Examples (2) Hotmail Yahoo! Hotmail Yahoo!

34. RammSoft 34 Tips for Commercial Applications Don’t ask the user to register at first State benefits of registration using a bulleted list Avoid hiding important information in graphics that look like ads Allow customers to enter billing address and credit card information at a later date Don’t ask the user to register at first State benefits of registration using a bulleted list Avoid hiding important information in graphics that look like ads Allow customers to enter billing address and credit card information at a later date

35. RammSoft 35 Thank You! Email: mikeramm@rammsoft.commikeramm@rammsoft.com Official website: http://www.rammsoft.com Professional blogs: http://pmstories.com http://spriipomisli.blogspot.com Email: mikeramm@rammsoft.commikeramm@rammsoft.com Official website: http://www.rammsoft.com Professional blogs: http://pmstories.com http://spriipomisli.blogspot.com