Transcript Rapid Development

RammSoft
The Key
To Your Success
Usability Considerations
For Developing
Web Applications
February 20, 2008
Mihail V. Mihaylov (Mike Ramm)
CEO, RammSoft
www.rammsoft.com
RammSoft
Web Site Vs. Web Application
• Web site
• Web application
• Information
• Business use
• Monologue
• Interactive
• Design
• Design
• Aesthetics
• Utility
• Navigation
• Usability
• Security
• Security
2
Why Use Web Applications?
• Widely accessible
• Easy deployment
• Easy management
RammSoft
• Simple interaction
3
RammSoft
Reasons To Avoid Web Apps
• Local network
• Fast interaction
• Standard interface
• Typing activities
• Security / Control
4
RammSoft
Types of Web Applications
• Intranet applications
• Local language applications
• Internationally used
• Commercial applications
• Workload and security considerations
5
RammSoft
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
6
RammSoft
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
7
RammSoft
A Broad Definition
•
A quality of a system that makes it
•
Easy to learn
•
Easy to use
•
Easy to remember
•
Error tolerant
•
Subjectively pleasing
8
RammSoft
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
9
Utility Examples
Windows calculator
RammSoft
•
10
Utility Examples
MS Word for DOS
RammSoft
•
11
RammSoft
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
12
RammSoft
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
13
RammSoft
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
14
RammSoft
Why Is Usability Important?
•
For the customer
•
Better productivity
•
Low costs
•
Profit
•
For the users
•
Less pain
•
Professional improvement
15
RammSoft
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
16
RammSoft
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
17
RammSoft
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. scenariobased design
Diffusion of design authority
18
RammSoft
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
19
RammSoft
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
20
RammSoft
Web UI Concepts
•
Explicitness
•
Be perfectly accurate
•
Use verbose phrasing
•
•
Grouping and segregation
•
Put related things together
•
Separate and distinguish them
Make everything browsable
21
Web Application Paradox
Server-based design
•
The client has a lot of options to
impact the design
•
They don’t use them
RammSoft
•
22
RammSoft
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
23
Accessibility Tips
Have menus always available
•
Use a navigation bar
•
Have search ability on top
RammSoft
•
24
RammSoft
Amazon Example
25
RammSoft
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)
26
RammSoft
Wikipedia Example
27
General Form Usability Tips
Avoid using long forms. Use wizards
instead
•
Avoid reloading the page on every
click. Load some lists at the client
RammSoft
•
28
RammSoft
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
29
RammSoft
Alibris Example
30
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
RammSoft
•
31
RammSoft
Captcha Examples
32
RammSoft
Captcha Examples (2)
•
Hotmail
•
Yahoo!
33
RammSoft
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
34
RammSoft
Thank You!
•
Email: [email protected]
•
Official website:
• http://www.rammsoft.com
•
Professional blogs:
• http://pmstories.com
• http://spriipomisli.blogspot.com
35