SlideShare a Scribd company logo

Turbo boost your Web UI with JavaScript

Mohammad Emran Hasan
Mohammad Emran Hasan

The document discusses enhancing user experience (UX) and user interface (UI) through effective design and application of UI elements. It covers the importance of UX/UI, various UI patterns, and practical tools such as jQuery UI and component libraries for web development. The emphasis is on creating clear, user-friendly interfaces that foster engagement and satisfaction.

TechnologyEntertainment & Humor
1 of 34
Downloaded 73 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
Turbo boost your Web UI with JavaScript
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”
Turbo boost your Web UI with JavaScript
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
Turbo boost your Web UI with JavaScript
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

More Related Content

Similar to Turbo boost your Web UI with JavaScript (20)

PDF
User Experience: Why should you care?
Nirish Shakya
 
PDF
The Lean Tech Stack
Bill Scott
 
PDF
UX
Paul Springett
 
PPTX
User Experioence - delivering great ux through great ui
Uday Shankar
 
PDF
UX Masterclass at muru-D
Doralin Kelly
 
PDF
Lean UX - Integrated Teams
Fabio Armani
 
PDF
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
 
PDF
Understanding The Value Of User Research, Usability Testing, and Information ...
Kyle Soucy
 
PPTX
Winning Hearts and Minds: Tips for Embedding User Experience in Your Organisa...
Michele Ide-Smith
 
PPTX
User Experience: Why and How
Objective Experience
 
PDF
User Experience (UX) Overview
Bernard Schokman
 
PDF
iAxil Lunch Talk - Lean UX
UX Consulting Pte Ltd
 
PPSX
UX Explained
Mind Over Machines
 
PPT
Bake UX into your Startup (March 2009)
Meghan Ede
 
PDF
That conference strategic process for small teams bk
Damon Sanchez
 
PDF
Why UX is Important
Chris Becker
 
PPTX
Fundamentals of UX Design
The Wisdom Daily
 
PDF
Demystifying User Experience - General Assembly
Mike Biggs GAICD
 
PDF
Web UX Landscape (and all points in between...)
Gene Crawford
 
PDF
Integrating User Experience Design into the Product Lifecycle
ICS
 
User Experience: Why should you care?
Nirish Shakya
 
The Lean Tech Stack
Bill Scott
 
UX
Paul Springett
 
User Experioence - delivering great ux through great ui
Uday Shankar
 
UX Masterclass at muru-D
Doralin Kelly
 
Lean UX - Integrated Teams
Fabio Armani
 
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
 
Understanding The Value Of User Research, Usability Testing, and Information ...
Kyle Soucy
 
Winning Hearts and Minds: Tips for Embedding User Experience in Your Organisa...
Michele Ide-Smith
 
User Experience: Why and How
Objective Experience
 
User Experience (UX) Overview
Bernard Schokman
 
iAxil Lunch Talk - Lean UX
UX Consulting Pte Ltd
 
UX Explained
Mind Over Machines
 
Bake UX into your Startup (March 2009)
Meghan Ede
 
That conference strategic process for small teams bk
Damon Sanchez
 
Why UX is Important
Chris Becker
 
Fundamentals of UX Design
The Wisdom Daily
 
Demystifying User Experience - General Assembly
Mike Biggs GAICD
 
Web UX Landscape (and all points in between...)
Gene Crawford
 
Integrating User Experience Design into the Product Lifecycle
ICS
 

More from Mohammad Emran Hasan (6)

PDF
Build social apps for Facebook
Mohammad Emran Hasan
 
KEY
Show me the money
Mohammad Emran Hasan
 
PDF
Developing better PHP projects
Mohammad Emran Hasan
 
PDF
Enterprise PHP
Mohammad Emran Hasan
 
PDF
Facebook Open Stream API - Facebook Developer Garage Dhaka
Mohammad Emran Hasan
 
PDF
Becoming A Php Ninja
Mohammad Emran Hasan
 
Build social apps for Facebook
Mohammad Emran Hasan
 
Show me the money
Mohammad Emran Hasan
 
Developing better PHP projects
Mohammad Emran Hasan
 
Enterprise PHP
Mohammad Emran Hasan
 
Facebook Open Stream API - Facebook Developer Garage Dhaka
Mohammad Emran Hasan
 
Becoming A Php Ninja
Mohammad Emran Hasan
 
Ad

Recently uploaded (20)

PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Ad

Turbo boost your Web UI with JavaScript

  • 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… +
  • 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