Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO,...
-
Upload
stewart-preston -
Category
Documents
-
view
218 -
download
0
Transcript of Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO,...
![Page 1: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/1.jpg)
Usability ConsiderationsFor Developing
Web Applications
Usability ConsiderationsFor 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, 2008February 20, 2008
RammSoftRammSoft
The KeyTo Your Success
The KeyTo Your Success
![Page 2: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/2.jpg)
2
Ram
mS
oft
Ram
mS
oft
Web Site Vs. Web ApplicationWeb Site Vs. Web Application
• Web site
• Information
• Monologue
• Design
• Aesthetics
• Navigation
• Security
• Web application
• Business use
• Interactive
• Design
• Utility
• Usability
• Security
![Page 3: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/3.jpg)
3
Ram
mS
oft
Ram
mS
oft
Why Use Web Applications?Why Use Web Applications?
• Widely accessible
• Easy deployment
• Easy management
• Simple interaction
![Page 4: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/4.jpg)
4
Ram
mS
oft
Ram
mS
oft
Reasons To Avoid Web AppsReasons To Avoid Web Apps
• Local network
• Fast interaction
• Standard interface
• Typing activities
• Security / Control
![Page 5: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/5.jpg)
5
Ram
mS
oft
Ram
mS
oft
Types of Web ApplicationsTypes of Web Applications
• Intranet applications
• Local language applications
• Internationally used
• Commercial applications
• Workload and security considerations
![Page 6: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/6.jpg)
6
Ram
mS
oft
Ram
mS
oft
What Is Usability?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
![Page 7: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/7.jpg)
7
Ram
mS
oft
Ram
mS
oft
Usability FactorsUsability 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
![Page 8: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/8.jpg)
8
Ram
mS
oft
Ram
mS
oft
A Broad DefinitionA Broad Definition
• A quality of a system that makes it
• Easy to learn
• Easy to use
• Easy to remember
• Error tolerant
• Subjectively pleasing
![Page 9: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/9.jpg)
9
Ram
mS
oft
Ram
mS
oft
A Narrow (Formal) DefinitionA 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
![Page 10: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/10.jpg)
10
Ram
mS
oft
Ram
mS
oft
Utility ExamplesUtility Examples
• Windows calculator
![Page 11: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/11.jpg)
11
Ram
mS
oft
Ram
mS
oft
Utility ExamplesUtility Examples
• MS Word for DOS
![Page 12: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/12.jpg)
12
Ram
mS
oft
Ram
mS
oft
Methods of AchievementMethods 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
![Page 13: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/13.jpg)
13
Ram
mS
oft
Ram
mS
oft
Other AspectsOther 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
![Page 14: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/14.jpg)
14
Ram
mS
oft
Ram
mS
oft
Other Aspects (2)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
![Page 15: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/15.jpg)
15
Ram
mS
oft
Ram
mS
oft
Why Is Usability Important?Why Is Usability Important?
• For the customer
• Better productivity
• Low costs
• Profit
• For the users
• Less pain
• Professional improvement
![Page 16: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/16.jpg)
16
Ram
mS
oft
Ram
mS
oft
Why Is Usability Important? (2)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
![Page 17: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/17.jpg)
17
Ram
mS
oft
Ram
mS
oft
How to Achieve it?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
![Page 18: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/18.jpg)
18
Ram
mS
oft
Ram
mS
oft
Why Doesn’t it Happen?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
![Page 19: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/19.jpg)
19
Ram
mS
oft
Ram
mS
oft
UI Design PrinciplesUI 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
![Page 20: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/20.jpg)
20
Ram
mS
oft
Ram
mS
oft
UI Design Principles (2)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
![Page 21: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/21.jpg)
21
Ram
mS
oft
Ram
mS
oft
Web UI ConceptsWeb UI Concepts
• Explicitness
• Be perfectly accurate
• Use verbose phrasing
• Grouping and segregation
• Put related things together
• Separate and distinguish them
• Make everything browsable
![Page 22: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/22.jpg)
22
Ram
mS
oft
Ram
mS
oft
Web Application ParadoxWeb Application Paradox
• Server-based design
• The client has a lot of options to impact the design
• They don’t use them
![Page 23: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/23.jpg)
23
Ram
mS
oft
Ram
mS
oft
Design TipsDesign 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
![Page 24: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/24.jpg)
24
Ram
mS
oft
Ram
mS
oft
Accessibility TipsAccessibility Tips
• Have menus always available
• Use a navigation bar
• Have search ability on top
![Page 25: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/25.jpg)
25
Ram
mS
oft
Ram
mS
oft
Amazon ExampleAmazon Example
![Page 26: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/26.jpg)
26
Ram
mS
oft
Ram
mS
oft
Accessibility Tips(2)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)
![Page 27: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/27.jpg)
27
Ram
mS
oft
Ram
mS
oft
Wikipedia ExampleWikipedia Example
![Page 28: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/28.jpg)
28
Ram
mS
oft
Ram
mS
oft
General Form Usability TipsGeneral Form Usability Tips
• Avoid using long forms. Use wizards instead
• Avoid reloading the page on every click. Load some lists at the client
![Page 29: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/29.jpg)
29
Ram
mS
oft
Ram
mS
oft
Registration Form Usability TipsRegistration 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
![Page 30: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/30.jpg)
30
Ram
mS
oft
Ram
mS
oft
Alibris ExampleAlibris Example
![Page 31: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/31.jpg)
31
Ram
mS
oft
Ram
mS
oft
Registration Form Usability Tips (2)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
![Page 32: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/32.jpg)
32
Ram
mS
oft
Ram
mS
oft
Captcha ExamplesCaptcha Examples
![Page 33: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/33.jpg)
33
Ram
mS
oft
Ram
mS
oft
Captcha Examples (2)Captcha Examples (2)
• Hotmail
• Yahoo!
![Page 34: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/34.jpg)
34
Ram
mS
oft
Ram
mS
oft
Tips for Commercial ApplicationsTips 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
![Page 35: Usability Considerations For Developing Web Applications Mihail V. Mihaylov (Mike Ramm) CEO, RammSoft Mihail V. Mihaylov (Mike Ramm) CEO,](https://reader038.fdocuments.net/reader038/viewer/2022110210/56649e745503460f94b74852/html5/thumbnails/35.jpg)
35
Ram
mS
oft
Ram
mS
oft
Thank You!Thank You!
• Email: [email protected]
• Official website:
• http://www.rammsoft.com
• Professional blogs:
• http://pmstories.com
• http://spriipomisli.blogspot.com