Usability Considerations For Developing Web Applications

1
Usability ConsiderationsFor DevelopingWeb
Applications
The Key To Your Success
RammSoft
February 20, 2008

• Mihail V. Mihaylov (Mike Ramm)
• CEO, RammSoft
• www.rammsoft.com

2
Web Site Vs. Web Application

• Web site
• Information
• Monologue
• Design
• Aesthetics
• Navigation
• Security

• Web application
• Business use
• Interactive
• Design
• Utility
• Usability
• Security

3
Why Use Web Applications?

• Widely accessible
• Easy deployment
• Easy management
• Simple interaction

4
Reasons To Avoid Web Apps

• Local network
• Fast interaction
• Standard interface
• Typing activities
• Security / Control

5
Types of Web Applications

• Intranet applications
• Local language applications
• Internationally used
• Commercial applications
• Workload and security considerations

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

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

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

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

10
Utility Examples

• Windows calculator

11
Utility Examples

• MS Word for DOS

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 Dont Work

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

14
Other Aspects (2)

• Discovery
• Looking for, and finding, a products 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
Why Is Usability Important?

• For the customer
• Better productivity
• Low costs
• Profit
• For the users
• Less pain
• Professional improvement

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

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

18
Why Doesnt 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

19
UI Design Principles

• The customer is not the user
• You dont know what your user wants
• Observe users activities
• Test early, test often, then test again
• Talk one language
• Use metaphors
• Make difficult decisions

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

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

22
Web Application Paradox

• Server-based design
• The client has a lot of options to impact the
  design
• They dont use them

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

24
Accessibility Tips

• Have menus always available
• Use a navigation bar
• Have search ability on top

25
Amazon Example
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)

27
Wikipedia Example
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

29
Registration Form Usability Tips

• Dont 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
Alibris Example
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
• Dont use unreadable captchas

32
Captcha Examples
33
Captcha Examples (2)

• Hotmail
• Yahoo!

34
Tips for Commercial Applications

• Dont 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
Thank You!

• Email mikeramm_at_rammsoft.com
• Official website
• http//www.rammsoft.com
• Professional blogs
• http//pmstories.com
• http//spriipomisli.blogspot.com