Choosing the right UI patterns

Transcript

1. UX Episode #11: Choosing the right UI patterns Design and User Experience
2. • Introduction • UI patterns • Case study: Analyse the product • Pick the right UI pattern • Wrap up Agenda
3. UI patterns
4. User interface patterns are reusable/recurring components which designers use to solve common problems in software design. UI patterns
5. UI patterns categories Inputs Navigation Data / Content Social Onboarding
6. Case Study
8. Understand user needs The recruiter or hiring manager want to catch up on recent updates of an applicant that are interesting to them, then perform actions when necessary.
9. • Can be hundreds of records • Multiple parties (Recruiter, HM, System) • Different types of information • Timestamp is important • Different length of content • Contextual actions Understand the data structure
10. Table + Pagination • Displaying a grid of tabular data in a readable way. • Often, allowing users to drill into rows or perform actions on them. • Preserving relationships between items when there’s not enough space to show everything. Current UI pattern
11. Timeline + infinite scroll • Chronological order • Showing a subset of results so we don’t have to load everything at once. • Keeping users engaged in the content, without the distractions of navigation. • Easy for reading New approach
12. Table Activity Feed What is it? Tabular data Information in chronological order Dominant action scan, compare Read, scroll Screen real estate Less ✓ More X Easy digestible No X Yes ✓ Mobile No X Yes ✓ Scannability Yes ✓ Yes ✓ Readability No X Yes ✓ UI comparison
14. Mobile experience Screen sizes Frequency of usage Aesthetics Modern Other considerations Progressive Disclosure Accessibility Transitions OS platforms and browsers Language items
15. Great UI always: • Start with experience principles • Understand the problem, which means think about the users • Understand what pattern is best suited for, what their pros and cons are • Do usability testing with user • Be confident in the choices Summary
16. Exercise
17. Modal vs Popover Popover vs Tooltip Alerts vs Toasts Tabs vs List group Checkbox vs Toggle Tags vs Badges Breadcrumb vs Tree view Select vs Radio buttons Accordion vs Tabs Spinner vs Progress bar Which UI pattern should I use?
18. Checkboxes Should be used when the user can select none, one, or multiple options from a list of items. The user has to perform extra steps for changes to be effective. For example, user must click a "submit" to apply changes. Radio buttons Should be used when the user can select one, and only one, option from a list of items, all options permanently visible so that users can easily compare them. Toggles Should be used to represent an action, like turning something on or off, the changes become effective immediately after the user changes them. Checkbox vs Toggle vs Radio
21. Alert vs Toast
22. Alert vs Banner
23. Questions?
24. Thank You! #ux