Turbo Boost your web UI with JavaScript

JSCon 2011

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