Boost your web UI with JavaScript patterns and tools. Presented at JSCon 2011 Dhaka by Emran Hasan and M A H Tonu.

1. JSCon 2011
Turbo Boost your web UI
with JavaScript

2. Agenda
1. User Experience (UX) and User Interface (UI)
2. Why bother?
3. Boosting UI Elements
4. Implementing UI Patterns
5. Tools of the trade

3. “Design is not just what it looks like and
feels like. Design is how it works.”
- Steve Jobs

5. 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.

6. 2. Why bother about UX/UI?
• Visual impression lasts long
• Information is perceived easily/fully
• Happy users come back
• “Less” becomes “More”

8. 3. Boosting UI Elements
• Date picker
• Modal Dialog
• Autocomplete
• Accordion
• Slider

9. 3. Boosting UI Elements - Date picker

10. 3. Boosting UI Elements - Modal Dialog

11. 3. Boosting UI Elements - Autocomplete

12. 3. Boosting UI Elements - Accordion

13. 3. Boosting UI Elements - Slider

14. 4. Implementing UI Patterns
http://ui-patterns.com/patterns

15. 4. Implementing UI Patterns - Clarity
• Make things clear for the user to find
• Organize information

16. 4. Implementing UI Patterns – Forgiving the user
• Allow user to cancel critical actions

17. 4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output

18. 4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output

19. 4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output

20. 4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output

21. 4. Implementing UI Patterns – Live Preview
• Provide the user a preview of the expected output

22. 4. Implementing UI Patterns – Table Sorter
• Allow the user to sort table columns by their need

23. 5. Tools of the trade
• jQuery UI
• jQuery Tools
• Formalize
• GameQuery
• Component Libraries
• Firebug

24. 5. Tools of the trade – jQuery UI

25. 5. Tools of the trade – jQuery Tools

26. 5. Tools of the trade - Formalize

28. 5. Tools of the trade - GameQuery

29. 5. Tools of the trade – Component Libraries

30. 5. Tools of the trade – Firebug

31. 6. Keep eyes on…
+

32. Must read…

33. Who we are?
Emran Hasan
CTO, Right Brain Solution
@phpfour
www.phpfour.com
M A Hossain Tonu
Sr. Software Engineer
Somewhere in…
@mahtonu
mahtonu.wordpress.com

34. Thank You