SlideShare a Scribd company logo
First of all thank you for joining us today.
I hope you’re into comfortable user experience right now.
User Experience (UX)?
UX is not UI
Boosting UX in Web Apps_Anu Thakur - May 3, 2017
Boosting UX in Web Apps_Anu Thakur - May 3, 2017
Boosting
UX
in ‘Web Applications’
UX
The term “UX design” refers to the process of creating and enhancing user satisfaction by
improving the usability, accessibility, and pleasure provided through the interaction
between the user and the product. In short, customer satisfaction means everything. If
your UX experience doesn’t satisfy all three of these criteria, it will likely fail.
How can we improve the UX of the following components
1. Form
2. Navigation
3. Table
4. Button
5. Loader
1. Form
A form is a conversation. And like any conversation, it should be represented by a communication
between two parties  -  user and your app.
- Only Ask What’s Required
- Order the Form Logically
- Input Fields - Depending on what information you ask, there are various types of fields — text fields,
password fields, dropdowns, checkboxes, radio buttons, datepickers and others.
Form
- Group Related Information
It helps the users make sense of the information that they must fill in.
Form
- One Column vs. Multiple Columns
It is recommended that forms should never consist of more than one column. If a form has horizontally
adjacent fields, the user must scan in Z patterns, slowing the speed of comprehension.
Form
- Reduce number of Fields
Form
- Mandatory vs Optional
Form
- Setting Default Values
Form
- Desktop-only: Make Form Keyboard-friendly
Form
- Mobile-only: Match the Keyboard With the Required Text Inputs
Form
- Labels - label should be clear to make the UI more accessible.
Previously Current Version
Form
- Alignment of Labels: Left vs Right Aligned vs Top
Top aligned labels
- Best completion rates
- Easy for different sized
labels
Left-aligned labels
- Slowest completion
- Requires more horizontal
space
Right-aligned labels
- Good completion rates
- Has strong visual
connection between label
and input
Form
- Inline Labels (Placeholder Text)
Placeholder text works great for a simple username
and password form.
Good Solution for the placeholder text is Floating Labels.
2. Navigation
A navigation is a section of a graphical user interface intended to aid visitors in accessing information.
- Keep it simple
- Use clear wording
- Make it visual - use icons, use color etc.
- Consider responsive design
Navigation
- Orientation
Horizontal
- More vertical space
- Leftmost items carry more visual weight
- All items above the fold
- Good for less items
Verical
- Less horizontal space
- All items carry equal visual weight
- Some items below the fold
- Good for more number of items
Navigation
- So which orientation should we use?
Vertical or horizontal?
Verical
- Depends upon of purpose of using it..
If it is having more options and having equal
priority than vertical is best.
Horizontal
- Where number of options are less and
content having priorities.
Navigation
- When you should use a breadcrumb navigation?
Users want to know where they are when they’re lost deep in a site’s navigation.
- 3 Levels or More
Navigation
- Home Page Is the First Level - Use Arrowheads, Not Slashes
- Don’t Link to the Page the User Is on
Navigation
- Differentiate Where the User Is
Breadcrumbs aren’t an option, but a necessity if your site has 3 or more category levels of content.
3. Table
A user-friendly table is one that’s easy to scan and allows users to get quality information fast.
Alignment Matters
- Numerical data is right-aligned
- Textual data is left-aligned
- Headers are aligned with their data
- Don’t use center alignment
Table
- Data Abbreviations
Full length - $3000
can be written as - $3k
- Tooltips for Exact Values
Table
- Persistent Column Headers
- Zebra Stripes
Table
Improved table design
4. Button
- Make Buttons Look Like Buttons
- Touch target size and padding
- Put buttons where users can easily find them or expect to see
37.7px
Button
- Label buttons with what they do
- differentiation between Primary Actions and Secondary Actions
Button
- When tertiary actions exist, add a style.
5. Loader
Progress Bars vs. Spinners:
Progress bars: which shows how far along (predictable) he/she is in a process.
Spinners: shows the unknown (unpredictable) length of a process.
So, When to use which?
Loader
- Spinners Are Not For Long Processes (4-Second Rule)
Loader
- When to Display a Spinner
Loader
- Progress Bars: makes long processes Tolerable
- How to Display a Progress Bar
Thank you

More Related Content

PDF
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
PPT
Jordan Kasteler Usability SEO
PPT
Jordan Kasteler Usability SEO
PDF
Form Design and GUI Controls for Better User Experience
PDF
How to be different?
PPTX
The 6 Step Program to Create Better UIs for Design-Impaired Engineers
PDF
Intro to UX: Enterprise UX
PDF
Web usability a complete list of ux ui best practices
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
Form Design and GUI Controls for Better User Experience
How to be different?
The 6 Step Program to Create Better UIs for Design-Impaired Engineers
Intro to UX: Enterprise UX
Web usability a complete list of ux ui best practices

Similar to Boosting UX in Web Apps_Anu Thakur - May 3, 2017 (20)

PDF
Design patterns for mobile apps
PDF
Luke W
PPTX
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
PPTX
Lesson 3 Introduction to Human Computer Interaction.pptx
PPTX
Lesson 3 Introduction to Human Computer Interaction.pptx
PDF
Best Practices for Form Design
PDF
Best Practices for Form Design
PPTX
GUI & Modern UI Design
PDF
Web Form Design Best Practices
PDF
Design better forms – Mobile UX London
PPT
Weavora's guide to web app usability
PDF
TWG's Guide to Onboarding
PDF
Twg's guide to onboarding
PPTX
How to design forms that deliver a great user experience
PDF
Ux, UI and US v1.2
PPTX
Design pattern of mobile application
PPTX
Form Design: Best Practices to Improve Conversions
PDF
UX Usability Heuristics
PPTX
Interface usability-adding-schweppervescence-ver3-8
 
PDF
Common Design Patterns for Mobile (part 1)
Design patterns for mobile apps
Luke W
What’s in your BA Toolbox – Has User experience and Usability gone to the way...
Lesson 3 Introduction to Human Computer Interaction.pptx
Lesson 3 Introduction to Human Computer Interaction.pptx
Best Practices for Form Design
Best Practices for Form Design
GUI & Modern UI Design
Web Form Design Best Practices
Design better forms – Mobile UX London
Weavora's guide to web app usability
TWG's Guide to Onboarding
Twg's guide to onboarding
How to design forms that deliver a great user experience
Ux, UI and US v1.2
Design pattern of mobile application
Form Design: Best Practices to Improve Conversions
UX Usability Heuristics
Interface usability-adding-schweppervescence-ver3-8
 
Common Design Patterns for Mobile (part 1)
Ad

Recently uploaded (20)

PDF
The Advantages of Working With a Design-Build Studio
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
joggers park landscape assignment bandra
PPTX
building Planning Overview for step wise design.pptx
PPTX
Entrepreneur intro, origin, process, method
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PDF
Urban Design Final Project-Context
PPT
Machine printing techniques and plangi dyeing
PDF
Urban Design Final Project-Site Analysis
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
Media And Information Literacy for Grade 12
DOCX
The story of the first moon landing.docx
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
The Advantages of Working With a Design-Build Studio
AD Bungalow Case studies Sem 2.pptxvwewev
joggers park landscape assignment bandra
building Planning Overview for step wise design.pptx
Entrepreneur intro, origin, process, method
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
Urban Design Final Project-Context
Machine printing techniques and plangi dyeing
Urban Design Final Project-Site Analysis
Tenders & Contracts Works _ Services Afzal.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Interior Structure and Construction A1 NGYANQI
Fundamental Principles of Visual Graphic Design.pptx
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
rapid fire quiz in your house is your india.pptx
Media And Information Literacy for Grade 12
The story of the first moon landing.docx
Wisp Textiles: Where Comfort Meets Everyday Style
Ad

Boosting UX in Web Apps_Anu Thakur - May 3, 2017

  • 1. First of all thank you for joining us today. I hope you’re into comfortable user experience right now.
  • 7. UX The term “UX design” refers to the process of creating and enhancing user satisfaction by improving the usability, accessibility, and pleasure provided through the interaction between the user and the product. In short, customer satisfaction means everything. If your UX experience doesn’t satisfy all three of these criteria, it will likely fail.
  • 8. How can we improve the UX of the following components 1. Form 2. Navigation 3. Table 4. Button 5. Loader
  • 9. 1. Form A form is a conversation. And like any conversation, it should be represented by a communication between two parties  -  user and your app. - Only Ask What’s Required - Order the Form Logically - Input Fields - Depending on what information you ask, there are various types of fields — text fields, password fields, dropdowns, checkboxes, radio buttons, datepickers and others.
  • 10. Form - Group Related Information It helps the users make sense of the information that they must fill in.
  • 11. Form - One Column vs. Multiple Columns It is recommended that forms should never consist of more than one column. If a form has horizontally adjacent fields, the user must scan in Z patterns, slowing the speed of comprehension.
  • 12. Form - Reduce number of Fields
  • 15. Form - Desktop-only: Make Form Keyboard-friendly
  • 16. Form - Mobile-only: Match the Keyboard With the Required Text Inputs
  • 17. Form - Labels - label should be clear to make the UI more accessible. Previously Current Version
  • 18. Form - Alignment of Labels: Left vs Right Aligned vs Top Top aligned labels - Best completion rates - Easy for different sized labels Left-aligned labels - Slowest completion - Requires more horizontal space Right-aligned labels - Good completion rates - Has strong visual connection between label and input
  • 19. Form - Inline Labels (Placeholder Text) Placeholder text works great for a simple username and password form. Good Solution for the placeholder text is Floating Labels.
  • 20. 2. Navigation A navigation is a section of a graphical user interface intended to aid visitors in accessing information. - Keep it simple - Use clear wording - Make it visual - use icons, use color etc. - Consider responsive design
  • 21. Navigation - Orientation Horizontal - More vertical space - Leftmost items carry more visual weight - All items above the fold - Good for less items Verical - Less horizontal space - All items carry equal visual weight - Some items below the fold - Good for more number of items
  • 22. Navigation - So which orientation should we use? Vertical or horizontal? Verical - Depends upon of purpose of using it.. If it is having more options and having equal priority than vertical is best. Horizontal - Where number of options are less and content having priorities.
  • 23. Navigation - When you should use a breadcrumb navigation? Users want to know where they are when they’re lost deep in a site’s navigation. - 3 Levels or More
  • 24. Navigation - Home Page Is the First Level - Use Arrowheads, Not Slashes - Don’t Link to the Page the User Is on
  • 25. Navigation - Differentiate Where the User Is Breadcrumbs aren’t an option, but a necessity if your site has 3 or more category levels of content.
  • 26. 3. Table A user-friendly table is one that’s easy to scan and allows users to get quality information fast. Alignment Matters - Numerical data is right-aligned - Textual data is left-aligned - Headers are aligned with their data - Don’t use center alignment
  • 27. Table - Data Abbreviations Full length - $3000 can be written as - $3k - Tooltips for Exact Values
  • 28. Table - Persistent Column Headers - Zebra Stripes
  • 30. 4. Button - Make Buttons Look Like Buttons - Touch target size and padding - Put buttons where users can easily find them or expect to see 37.7px
  • 31. Button - Label buttons with what they do - differentiation between Primary Actions and Secondary Actions
  • 32. Button - When tertiary actions exist, add a style.
  • 33. 5. Loader Progress Bars vs. Spinners: Progress bars: which shows how far along (predictable) he/she is in a process. Spinners: shows the unknown (unpredictable) length of a process. So, When to use which?
  • 34. Loader - Spinners Are Not For Long Processes (4-Second Rule)
  • 35. Loader - When to Display a Spinner
  • 36. Loader - Progress Bars: makes long processes Tolerable - How to Display a Progress Bar