JSCon 2011
Turbo Boost your web UI
with JavaScript
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
“Design is not just what it looks like and
feels like. Design is how it works.”
- Steve Jobs
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.
2. Why bother about UX/UI?
• Visual impression lasts long
• Information is perceived easily/fully
• Happy users come back
• “Less” becomes “More”
3. Boosting UI Elements
• Date picker
• Modal Dialog
• Autocomplete
• Accordion
• Slider
3. Boosting UI Elements - Date picker
3. Boosting UI Elements - Modal Dialog
3. Boosting UI Elements - Autocomplete
3. Boosting UI Elements - Accordion
3. Boosting UI Elements - Slider
4. Implementing UI Patterns
http://ui-patterns.com/patterns
4. Implementing UI Patterns - Clarity
• Make things clear for the user to find
• Organize information
4. Implementing UI Patterns – Forgiving the user
• Allow user to cancel critical actions
4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output
4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output
4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output
4. Implementing UI Patterns – Inplace Input/Output
• Allow input wherever you have output
4. Implementing UI Patterns – Live Preview
• Provide the user a preview of the expected output
4. Implementing UI Patterns – Table Sorter
• Allow the user to sort table columns by their need
5. Tools of the trade
• jQuery UI
• jQuery Tools
• Formalize
• GameQuery
• Component Libraries
• Firebug
5. Tools of the trade – jQuery UI
5. Tools of the trade – jQuery Tools
5. Tools of the trade - Formalize
5. Tools of the trade - GameQuery
5. Tools of the trade – Component Libraries
5. Tools of the trade – Firebug
6. Keep eyes on…
+
Must read…
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
Thank You