Turbo boost your Web UI with JavaScript

1,371 views

Published on

Boost your web UI with JavaScript patterns and tools.

Presented at JSCon 2011 Dhaka by Emran Hasan and M A H Tonu.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,371
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Turbo boost your Web UI with JavaScript

  1. 1. JSCon 2011Turbo Boost your web UIwith JavaScript
  2. 2. Agenda1. User Experience (UX) and User Interface (UI)2. Why bother?3. Boosting UI Elements4. Implementing UI Patterns5. Tools of the trade
  3. 3. “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  4. 4. 1. User Experience (UX) and User Interface (UI)• UX deals with the overall subjective experience associated with the use of a product or service.• UI deals with the specific user interface(s) of a product or service.
  5. 5. 2. Why bother about UX/UI?• Visual impression lasts long• Information is perceived easily/fully• Happy users come back• “Less” becomes “More”
  6. 6. 3. Boosting UI Elements• Date picker• Modal Dialog• Autocomplete• Accordion• Slider
  7. 7. 3. Boosting UI Elements - Date picker
  8. 8. 3. Boosting UI Elements - Modal Dialog
  9. 9. 3. Boosting UI Elements - Autocomplete
  10. 10. 3. Boosting UI Elements - Accordion
  11. 11. 3. Boosting UI Elements - Slider
  12. 12. 4. Implementing UI Patterns http://ui-patterns.com/patterns
  13. 13. 4. Implementing UI Patterns - Clarity• Make things clear for the user to find• Organize information
  14. 14. 4. Implementing UI Patterns – Forgiving the user• Allow user to cancel critical actions
  15. 15. 4. Implementing UI Patterns – Inplace Input/Output• Allow input wherever you have output
  16. 16. 4. Implementing UI Patterns – Inplace Input/Output• Allow input wherever you have output
  17. 17. 4. Implementing UI Patterns – Inplace Input/Output• Allow input wherever you have output
  18. 18. 4. Implementing UI Patterns – Inplace Input/Output• Allow input wherever you have output
  19. 19. 4. Implementing UI Patterns – Live Preview• Provide the user a preview of the expected output
  20. 20. 4. Implementing UI Patterns – Table Sorter• Allow the user to sort table columns by their need
  21. 21. 5. Tools of the trade• jQuery UI• jQuery Tools• Formalize• GameQuery• Component Libraries• Firebug
  22. 22. 5. Tools of the trade – jQuery UI
  23. 23. 5. Tools of the trade – jQuery Tools
  24. 24. 5. Tools of the trade - Formalize
  25. 25. 5. Tools of the trade - GameQuery
  26. 26. 5. Tools of the trade – Component Libraries
  27. 27. 5. Tools of the trade – Firebug
  28. 28. 6. Keep eyes on… +
  29. 29. Must read…
  30. 30. Who we are?Emran HasanCTO, Right Brain Solution@phpfourwww.phpfour.com M A Hossain Tonu Sr. Software Engineer Somewhere in… @mahtonu mahtonu.wordpress.com
  31. 31. Thank You

×