Ajax Usability eBusiness Applications

Who am I? Andre Charland Nitobi -Founder, President Authors of Enterprise AJAX for Prentice Hall AJAX Experts 10 Employees Founded in Vancouver, 1998 100s of AJAX Customers

Andre Charland

Nitobi -Founder, President

Authors of Enterprise AJAX for Prentice Hall

AJAX Experts

10 Employees

Founded in Vancouver, 1998

100s of AJAX Customers

Our Customers

The Problem with Web Apps:

Designing RIA Goals Patterns Ajax light vs Ajax deluxe Risk management Check list

Goals

Patterns

Ajax light vs Ajax deluxe

Risk management

Check list

Goals Improving user experience Increasing usability Helping users kick ass Making people more productive

Improving user experience

Increasing usability

Helping users kick ass

Making people more productive

RIA Usability ..its about User Capabilities ..its about User Expectations

..its about User Capabilities

..its about User Expectations

Capabilities – Keyboard Accessibility Minimize swapping between input devices Keyboard Accessibility for everybody Conform to accepted standards MS Windows UE Guidelines ( http:// msdn.microsoft.com/library/default.asp?url =/library/en-us/dnwue/html/ch08c.asp ) Test with MS Object Inspector

Minimize swapping between input devices

Keyboard Accessibility for everybody

Conform to accepted standards

MS Windows UE Guidelines ( http:// msdn.microsoft.com/library/default.asp?url =/library/en-us/dnwue/html/ch08c.asp )

Test with MS Object Inspector

Expectations - Trainability Does the site conform to expectations, or is training required? Diverse User base Relationship with Users Search time = Perceived performance

Does the site conform to expectations, or is training required?

Diverse User base

Relationship with Users

Search time = Perceived performance

Expectations – Back button Ajax ‘breaks’ the back button Is this relevant? Build a state record

Ajax ‘breaks’ the back button

Is this relevant?

Build a state record

Expectations – Attention Span Download times Search times Switching Costs high or low? Set QoS benchmarks

Download times

Search times

Switching Costs high or low?

Set QoS benchmarks

Expectations – Page Weight (or Wait) Total initial mass of the site Should tie to max allowable download times Broadband vs. Dial-up How important is it? – the facts. Task complexity Jitter (variability of latency) Wait time

Total initial mass of the site

Should tie to max allowable download times

Broadband vs. Dial-up

How important is it? – the facts.

Task complexity

Jitter (variability of latency)

Wait time

Expectations – Page Weight Leverage Cacheing Wait indicators for wait times > 4 seconds Favor Usability over Page Weight Optimize JavaScript

Leverage Cacheing

Wait indicators for wait times > 4 seconds

Favor Usability over Page Weight

Optimize JavaScript

Patterns People facing similar problems will find similar solutions These are patterns Don’t re-invent the wheel

People facing similar problems will find similar solutions

These are patterns

Don’t re-invent the wheel

Expectations – UI Patterns Conform to standard UI patterns Make use of available resources Assume that users understand these When necessary, adopt similar patterns Breaking the back button

Conform to standard UI patterns

Make use of available resources

Assume that users understand these

When necessary, adopt similar patterns

Breaking the back button

Example Patterns Inline editing Keyboard navigation Transitions / yellow fade Activity indicators

Inline editing

Keyboard navigation

Transitions / yellow fade

Activity indicators

Keyboard Navigation http://nitobi.com/products/grid/demos/editors/index.html http://www.nitobi.com/products/grid/demos Inline Editing http://nitobi.com/products/grid/demos/LiveScrolling/index.html

http://nitobi.com/products/grid/demos/editors/index.html

http://www.nitobi.com/products/grid/demos

http://nitobi.com/products/grid/demos/LiveScrolling/index.html

Affordances and Hints http://developer.yahoo.com/ypatterns/pattern.php?pattern=dropinvitation# http://developer.yahoo.com/ypatterns/pattern.php?pattern=hoverinvitation#

http://developer.yahoo.com/ypatterns/pattern.php?pattern=dropinvitation#

http://developer.yahoo.com/ypatterns/pattern.php?pattern=hoverinvitation#

Activity Indicators http://www.deltapoll.com/include/poll/compact/?pollid=32

http://www.deltapoll.com/include/poll/compact/?pollid=32

Pattern Resources User Interface Patterns Yahoo Pattern Library AjaxPatterns.org

User Interface Patterns

Yahoo Pattern Library

AjaxPatterns.org

Tools Tools and techniques for rapid prototyping Whiteboard Storyboard Wire frames Visio Power Point Photoshop Flash/Flex

Tools and techniques for rapid prototyping

Whiteboard

Storyboard

Wire frames

Visio

Power Point

Photoshop

Flash/Flex

http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio

http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio

Example ROI Calculation Assumptions: Hosted web app, high speed or LAN Hourly Labor Rate: $20 Seconds Saved per Transaction: 36 Seconds Number of Transactions per year: 50,000 Savings: $10,000 500 Person Hours http://ajaxinfo.com/default~viewart~18.htm Hourly Labor Rate X Time Saved per Transaction X Number of Transactions per year

Assumptions:

Hosted web app, high speed or LAN

Hourly Labor Rate: $20

Seconds Saved per Transaction: 36 Seconds

Number of Transactions per year: 50,000

Savings:

$10,000

500 Person Hours

http://ajaxinfo.com/default~viewart~18.htm

RIA Dev Team Project Manager Designer UX/Usability/UI Front End Developer Back End Developer / Integrator Testing / QA

Project Manager

Designer

UX/Usability/UI

Front End Developer

Back End Developer / Integrator

Testing / QA