Ajax Usability for AjaxWorld

3,464 views

Published on

A presentation on best practices for building usable web applications using Ajax.

Published in: Business
1 Comment
7 Likes
Statistics
Notes
  • Hey Andre,

    Is this for your talk at Ajax world? Are you using full screen mode it to give the presentation. Just curious.

    And good to see you on Slideshare!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,464
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
1
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • Ajax Usability for AjaxWorld

    1. 1. Ajax Usability eBusiness Applications
    2. 2. Who am I? <ul><li>Andre Charland </li></ul><ul><li>Nitobi -Founder, President </li></ul><ul><li>Authors of Enterprise AJAX for Prentice Hall </li></ul><ul><li>AJAX Experts </li></ul><ul><li>10 Employees </li></ul><ul><li>Founded in Vancouver, 1998 </li></ul><ul><li>100s of AJAX Customers </li></ul>
    3. 3. Our Customers
    4. 4. The Problem with Web Apps:
    5. 5. Designing RIA <ul><li>Goals </li></ul><ul><li>Patterns </li></ul><ul><li>Ajax light vs Ajax deluxe </li></ul><ul><li>Risk management </li></ul><ul><ul><li>Check list </li></ul></ul>
    6. 6. Goals <ul><li>Improving user experience </li></ul><ul><li>Increasing usability </li></ul><ul><li>Helping users kick ass </li></ul><ul><li>Making people more productive </li></ul>
    7. 7. RIA Usability <ul><li>..its about User Capabilities </li></ul><ul><li>..its about User Expectations </li></ul>
    8. 8. Capabilities – Keyboard Accessibility <ul><li>Minimize swapping between input devices </li></ul><ul><li>Keyboard Accessibility for everybody </li></ul><ul><li>Conform to accepted standards </li></ul><ul><ul><li>MS Windows UE Guidelines ( http:// msdn.microsoft.com/library/default.asp?url =/library/en-us/dnwue/html/ch08c.asp ) </li></ul></ul><ul><li>Test with MS Object Inspector </li></ul>
    9. 9. Expectations - Trainability <ul><li>Does the site conform to expectations, or is training required? </li></ul><ul><li>Diverse User base </li></ul><ul><li>Relationship with Users </li></ul><ul><li>Search time = Perceived performance </li></ul>
    10. 10. Expectations – Back button <ul><li>Ajax ‘breaks’ the back button </li></ul><ul><li>Is this relevant? </li></ul><ul><li>Build a state record </li></ul>
    11. 11. Expectations – Attention Span <ul><li>Download times </li></ul><ul><li>Search times </li></ul><ul><li>Switching Costs high or low? </li></ul><ul><li>Set QoS benchmarks </li></ul>
    12. 12. Expectations – Page Weight (or Wait) <ul><li>Total initial mass of the site </li></ul><ul><ul><li>Should tie to max allowable download times </li></ul></ul><ul><li>Broadband vs. Dial-up </li></ul><ul><li>How important is it? – the facts. </li></ul><ul><ul><li>Task complexity </li></ul></ul><ul><ul><li>Jitter (variability of latency) </li></ul></ul><ul><ul><li>Wait time </li></ul></ul>
    13. 13. Expectations – Page Weight <ul><li>Leverage Cacheing </li></ul><ul><li>Wait indicators for wait times > 4 seconds </li></ul><ul><li>Favor Usability over Page Weight </li></ul><ul><li>Optimize JavaScript </li></ul>
    14. 14. Patterns <ul><li>People facing similar problems will find similar solutions </li></ul><ul><li>These are patterns </li></ul><ul><li>Don’t re-invent the wheel </li></ul>
    15. 15. Expectations – UI Patterns <ul><li>Conform to standard UI patterns </li></ul><ul><li>Make use of available resources </li></ul><ul><li>Assume that users understand these </li></ul><ul><li>When necessary, adopt similar patterns </li></ul><ul><li>Breaking the back button </li></ul>
    16. 16. Example Patterns <ul><li>Inline editing </li></ul><ul><li>Keyboard navigation </li></ul><ul><li>Transitions / yellow fade </li></ul><ul><li>Activity indicators </li></ul>
    17. 17. Keyboard Navigation <ul><li>http://nitobi.com/products/grid/demos/editors/index.html </li></ul><ul><li>http://www.nitobi.com/products/grid/demos </li></ul>Inline Editing <ul><li>http://nitobi.com/products/grid/demos/LiveScrolling/index.html </li></ul>
    18. 18. Affordances and Hints <ul><li>http://developer.yahoo.com/ypatterns/pattern.php?pattern=dropinvitation# </li></ul><ul><li>http://developer.yahoo.com/ypatterns/pattern.php?pattern=hoverinvitation# </li></ul>
    19. 19. Activity Indicators <ul><li>http://www.deltapoll.com/include/poll/compact/?pollid=32 </li></ul>
    20. 20. Pattern Resources <ul><li>User Interface Patterns </li></ul><ul><ul><li>Yahoo Pattern Library </li></ul></ul><ul><ul><li>AjaxPatterns.org </li></ul></ul>
    21. 21. Tools <ul><li>Tools and techniques for rapid prototyping </li></ul><ul><ul><li>Whiteboard </li></ul></ul><ul><ul><li>Storyboard </li></ul></ul><ul><ul><li>Wire frames </li></ul></ul><ul><ul><li>Visio </li></ul></ul><ul><ul><li>Power Point </li></ul></ul><ul><ul><li>Photoshop </li></ul></ul><ul><ul><li>Flash/Flex </li></ul></ul>
    22. 23. <ul><li>http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio </li></ul>
    23. 24. Example ROI Calculation <ul><li>Assumptions: </li></ul><ul><ul><li>Hosted web app, high speed or LAN </li></ul></ul><ul><ul><li>Hourly Labor Rate: $20 </li></ul></ul><ul><ul><li>Seconds Saved per Transaction: 36 Seconds </li></ul></ul><ul><ul><li>Number of Transactions per year: 50,000 </li></ul></ul><ul><li>Savings: </li></ul><ul><ul><li>$10,000 </li></ul></ul><ul><ul><li>500 Person Hours </li></ul></ul><ul><ul><li>http://ajaxinfo.com/default~viewart~18.htm </li></ul></ul>Hourly Labor Rate X Time Saved per Transaction X Number of Transactions per year
    24. 25. RIA Dev Team <ul><li>Project Manager </li></ul><ul><li>Designer </li></ul><ul><li>UX/Usability/UI </li></ul><ul><li>Front End Developer </li></ul><ul><li>Back End Developer / Integrator </li></ul><ul><li>Testing / QA </li></ul>

    ×