Form design should focus on only asking for required information, logically ordering fields, grouping related information, reducing the number of fields, clearly labeling inputs, and using inline labels or floating labels. Navigation should be kept simple with clear wording, use of visual elements like icons and color, and consider responsiveness. Tables should have aligned headers and data, use abbreviations where appropriate, and include persistent column headers and zebra striping. Buttons should clearly label their purpose and differentiate primary from secondary actions. Loaders should use progress bars for predictable processes and spinners for unknown length processes, following the 4-second rule for spinners.

1. First of all thank you for joining us today.
I hope you’re into comfortable user experience right now.

2. User Experience (UX)?

3. UX is not UI

6. Boosting
UX
in ‘Web Applications’

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

13. Form
- Mandatory vs Optional

14. Form
- Setting Default Values

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

29. Table
Improved table design

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

37. Thank you