Usability ConsiderationsFor Developing

Web Applications

Mihail V. Mihaylov (Mike Ramm)CEO, RammSoft

www.rammsoft.com

February 20, 2008February 20, 2008

RammSoft

The KeyTo Your Success

2

Ram

mS

oftWeb Site Vs. Web Application• Web site• Information

• Monologue

• Design• Aesthetics

• Navigation

• Security

• Web application• Business use

• Interactive

• Design • Utility

• Usability

• Security

3

Ram

mS

oftWhy Use Web Applications?• Widely accessible• Easy deployment• Easy management• Simple interaction

4

Ram

mS

oftReasons To Avoid Web Apps• Local network• Fast interaction• Standard interface• Typing activities• Security / Control

5

Ram

mS

oftTypes of Web Applications• Intranet applications• Local language applications• Internationally used• Commercial applications• Workload and security considerations

6

Ram

mS

oftWhat 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

Ram

mS

oftUsability 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

Ram

mS

oftA Broad Definition• A quality of a system that makes it • Easy to learn• Easy to use• Easy to remember• Error tolerant• Subjectively pleasing

9

Ram

mS

oftA 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

Ram

mS

oftUtility Examples• Windows calculator

11

Ram

mS

oftUtility Examples• MS Word for DOS

12

Ram

mS

oftMethods 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

13

Ram

mS

oftOther 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

Ram

mS

oftOther 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

15

Ram

mS

oftWhy Is Usability Important?• For the customer• Better productivity• Low costs• Profit

• For the users• Less pain• Professional improvement

16

Ram

mS

oftWhy 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

Ram

mS

oftHow 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

Ram

mS

oftWhy 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

19

Ram

mS

oftUI 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

20

Ram

mS

oftUI 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

Ram

mS

oftWeb UI Concepts• Explicitness• Be perfectly accurate• Use verbose phrasing

• Grouping and segregation• Put related things together• Separate and distinguish them

• Make everything browsable

22

Ram

mS

oftWeb Application Paradox• Server-based design• The client has a lot of options to

impact the design• They don’t use them

23

Ram

mS

oftDesign 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

Ram

mS

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

25

Ram

mS

oftAmazon Example

26

Ram

mS

oftAccessibility 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

Ram

mS

oftWikipedia Example

28

Ram

mS

oftGeneral Form Usability Tips• Avoid using long forms. Use wizards

instead• Avoid reloading the page on every

click. Load some lists at the client

29

Ram

mS

oftRegistration 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

30

Ram

mS

oftAlibris Example

31

Ram

mS

oftRegistration 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

32

Ram

mS

oftCaptcha Examples

33

Ram

mS

oftCaptcha Examples (2)• Hotmail

• Yahoo!

34

Ram

mS

oftTips 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

35

Ram

mS

oftThank You!• Email: mikeramm@rammsoft.com

• Official website:

• http://www.rammsoft.com

• Professional blogs:

• http://pmstories.com

• http://spriipomisli.blogspot.com