UX Episode #11: Choosing the right UI patterns Design and User Experience

● Introduction ● UI patterns ● Case study: Analyse the product ● Pick the right UI pattern ● Wrap up Agenda

UI patterns

User interface patterns are reusable/recurring components which designers use to solve common problems in software design. UI patterns

UI patterns categories Inputs Navigation Data / Content Social Onboarding

Case Study

No content

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.

● 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

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

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

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

No content

Mobile experience Screen sizes Frequency of usage Aesthetics Modern Other considerations Progressive Disclosure Accessibility Transitions OS platforms and browsers Language items

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

Exercise

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?

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

No content

No content

Alert vs Toast

Alert vs Banner

Questions?

Thank You! #ux