| UI or UX | UI + UX - Customer-facing flow for reserving an offered slot, service, resource, appointment, class, or seat | UI + UX - Workflow for arranging time, attendees, availability, recurrence, and reminders | UI + UX - Purchase commitment and order finalization flow | UI + UX - Single-date text field with attached calendar menu | UI + UX - Time input with filtered slot list, period selector, and timezone selector | UI + UX - Two date fields with attached range calendar and apply controls | UI + UX - Payment request, authorization, and status lifecycle | UI + UX - Final endpoint page after a transaction is complete | UI + UX - Competing-version resolution state |
| UI guidance | Render booking as a reservation contract with service or appointment type, provider or staff, location or delivery mode, available date and time slots, duration, timezone, party size or capacity, price or deposit when applicable, customer details, intake questions, policy acceptance, and confirmation action. | Render scheduling as a coordinated time-planning workflow with title, calendar, attendees, required and optional people, rooms or resources, location or conference link, date, start and end time, timezone, recurrence, availability, reminders, and save or send outcome. | Render checkout as a purchase commitment flow with order summary, customer contact, shipping or pickup choice, payment handoff, discount and tax state, total due, review, place-order action, payment processing, and confirmation handoff. | Render a labelled date text field with a persistent format hint and a calendar button that opens a month grid aligned to the field. | Render a labelled time field with persistent hint text, filtered time suggestions, clear selected state, AM/PM control when using 12-hour display, and timezone control when interpretation depends on location. | Render separate labelled start and end date fields with persistent format hints, a calendar trigger, and a shared calendar menu that shows both endpoints and the days between them. | Render payment collection as a money-movement journey with amount due, reference, payer or service context, accepted methods, provider handoff, authorization or processing state, failure and cancel recovery, retry rules, receipt, and reconciliation status. | Render a full page after commit with a prominent completion panel, a page heading that names what finished, a reference or receipt when users need one, and a clear section for what happens next. | Show both competing versions near the affected object, field, paragraph, file, row, or branch with source labels such as Your edit, Server version, Mina's edit, Target branch, and Current published value. |
| UX guidance | Use booking when a customer, invitee, client, patient, guest, student, or attendee reserves a provider-defined appointment, class, room, seat, resource, or service slot. | Use scheduling when users arrange a meeting, event, availability rule, or recurring time plan that must account for people, calendars, rooms, buffers, time zones, recurrence, reminders, invitations, or conflicts. | Use checkout when a user is ready to turn selected items, services, tickets, or subscriptions into a committed order and needs confidence about total cost, delivery, payment, and recovery before placing the order. | Use a date picker when choosing a date requires calendar context such as weekday, nearby availability, booking windows, deadlines, or recent/future scheduling. | Use a time picker when users are scheduling or choosing a specific clock time from predictable increments such as 15-minute or 30-minute appointments. | Use a date range picker when users need to select or inspect a continuous period such as a report window, trip, event, booking, campaign, or eligibility span. | Use payment collection when the user must pay a bill, fee, invoice, application charge, renewal, subscription, donation, deposit, or balance and the service must make the amount, reference, status, and next action unambiguous. | Use a confirmation page when the transaction or service journey has ended and users need durable proof, reassurance, next-step timing, or a record they can bookmark, print, quote, or revisit. | Use conflict state when multiple valid changes overlap and the system needs a human, rule, or review workflow to decide what survives without losing work silently. |
| Good UI | A salon booking page shows Haircut, 45 minutes, Zara as stylist, Thu 14:30, two remaining openings, New York timezone, price, intake questions, cancellation policy, and a Book appointment button. | A meeting scheduler shows required attendees, free/busy bars, suggested times, selected timezone, room availability, video link, recurrence, reminders, and a Send invitation button. | A checkout shows cart items, shipping address, delivery options, taxes, discount, total, payment state, and a Place order button that disables while authorization is pending. | An appointment booking field shows Appointment date, hint mm/dd/yyyy, a calendar button, July 2026 grid, disabled weekends, today marker, and selected July 14 date. | An appointment time field shows a label, hint that typing filters 30-minute slots, a 9:30 AM selected option, AM/PM selector, Eastern timezone selector, and canonical value 09:30:00. | An analytics report control shows Since and Until text fields, quick choices for Today and Last 7 days, a two-week calendar grid, selected August 3 start, selected August 14 end, and a filled band for days inside the range. | A permit-fee payment page shows Reference APP-2048, Amount due $84.00, accepted card and wallet methods, Continue to secure payment, and returns to a status page after provider authorization. | A grant application page says Application complete, shows reference APP-48291, lists what happens next within 5 working days, and offers Save record, Track application, and feedback links. | A field report says Conflict on supervisor comment, shows Your offline edit from 11:06 beside Server edit by Mina at 11:07, and offers Keep mine, Keep server, and Merge comment. |
| Bad UI | A booking page lists calendar dates but hides service duration, staff, capacity, timezone, price, and cancellation policy until after confirmation. | A form asks for date and time only, then sends invitations without checking attendee or room conflicts. | A checkout hides shipping costs until after card entry and changes the total at the last moment. | A date of birth field opens today with no text fallback and forces users to page backward month by month through decades. | A single field labelled Time accepts 930 and silently stores it without AM/PM, timezone, or validation message. | A report filter has one field labelled Date and silently stores two dates separated by a dash with no start or end labels. | A page says Payment failed after redirect but hides whether the bank declined, the user canceled, the session expired, or money might still be pending. | A submitted application only redirects to a dashboard toast that says Done, with no reference, receipt, or next-step details. | A save banner says Something went wrong and only offers Retry after another user changed the same field. |
| Good UX | A client chooses a 45-minute haircut, sees only available stylist times, enters phone and notes, accepts the late-cancel policy, pays a deposit, receives a reference, and gets cancel and reschedule links. | A team lead adds three required attendees, sees one conflict at 10:00, chooses an 11:30 suggested time, adds a room and video link, sends invitations, and sees pending responses. | A user changes shipping speed, sees delivery date and total update in the sticky order summary, reviews the final charge, places the order once, and lands on a confirmation page with an order number. | A user opens the calendar, sees weekends unavailable, moves to August, chooses Tuesday 11 August 2026, and reviews stored value 2026-08-11. | A user types 9, filters the list to 9:00 AM and 9:30 AM, chooses 9:30 AM, selects Eastern time, and submits canonical value 09:30:00 America/New_York. | A user chooses Last 7 days, sees 2026-08-08 through 2026-08-14 filled in the calendar, reviews both inputs, then applies the range. | A user returns from bank authentication, sees the payment is processing, waits without retrying, and later sees the receipt once the provider reports success. | A user copies the reference, saves the receipt, follows Track application, and later returns from a bookmark to the same confirmation details or a helpful tracking fallback. | A user tries to sync an offline field report, reviews only the two changed fields, merges one comment, keeps the server contact number, and commits a resolved version. |
| Bad UX | A guest books a restaurant table shown in local browser time but the venue expected venue time, so the reservation lands in the wrong slot. | A scheduler sees an empty-looking time grid because hidden calendars are not included, books a meeting, and later discovers the host is already busy. | A user cannot find guest checkout, creates an unwanted account, then abandons when email confirmation blocks payment. | A user selects a disabled Saturday because it was only dimmed, then loses their previous month when the error appears. | A user chooses 2:00 from a list and the service books 2:00 AM because no period selector or timezone context was shown. | A dashboard refreshes on every hovered day while the user is still deciding the end date. | A user closes a hosted payment page and returns to a blank form with no way to check whether the payment was canceled or still pending. | A user closes the page after seeing a transient message and later cannot prove the payment or application happened. | The app silently keeps the newest server value and deletes the user's local note. |
| Best fit | Users reserve an offered appointment, service, class, room, resource, seat, table, pickup window, or visit. | Users coordinate time across people, resources, calendars, availability, or recurrence. | A user is ready to purchase selected items, services, tickets, subscriptions, donations, or orderable options. | Users are scheduling, booking, planning, or selecting a recent or future date. | Users choose appointment, meeting, delivery, pickup, reminder, or service times. | Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period. | The user must pay a known fee, invoice, balance, application charge, renewal, subscription, donation, deposit, or service amount. | A transaction or service journey has ended and users need durable proof plus next-step information. | Concurrent users, devices, branches, or background jobs changed the same object or location. |
| Avoid when | The user only needs one standalone date or time field. | The user only needs one remembered date or time field. | The task is only secure card capture, bank-details entry, address entry, or a final answer review without purchase state. | Users already know the exact date and do not need calendar context. | The answer is approximate, relative, unknown, or naturally expressed in words. | The task asks for only one exact date. | The task is a full ecommerce checkout with cart, shipping, tax, discounts, and order finalization. | The user remains inside an ongoing task and only needs local proof near the changed object. | Only one operation failed and there is no competing valid version. |
| Required state | Service or appointment type selection state. | Draft event state | Cart summary state with items, quantities, price, shipping, tax, discount, and total due. | Closed labelled text field with visible date-format hint and calendar button. | Empty labelled time field with persistent hint and optional timezone default. | Empty start and end fields with visible labels, date-format hints, and a calendar trigger. | Payment request state with amount, currency, reference, description, payer context, accepted methods, and secure provider handoff. | Submitted state immediately after authoritative commit routes to the confirmation page. | No conflict state after automatic safe merge. |
| Accessibility burden | Use labelled controls for service, staff/resource, location, party size, date, time, timezone, intake fields, policy acceptance, verification, payment, and final booking action. | Use labelled fields for title, attendees, required/optional role, date, start time, end time, timezone, recurrence, location, conferencing, reminders, and calendar selection. | Use headings that expose the current checkout task and step, such as Delivery, Payment, or Review order. | Use a visible label and persistent hint for the text field; do not rely only on text inside the field. | Use a visible label and persistent hint that explain filtering, increments, and time range. | Label start and end fields separately and associate each hint and error with the correct field. | Use headings that name the payment task and amount, such as Pay application fee or Pay invoice INV-1482. | Use one clear page H1 or panel title that communicates completion without relying on green color alone. | Use headings and text labels to name each side of the conflict; do not rely only on red/green diff colors. |
| Common misuse | Treating booking as only a date picker and time picker. | Treating scheduling as only a date field and a time field. | Forcing account creation before purchase when guest checkout would work. | Using a calendar picker for a date of birth or other remembered historic date. | Using a minute-by-minute dropdown for a schedule that only accepts 30-minute increments. | Using two unrelated single-date pickers that do not validate order or show included days. | Showing a Pay button without amount, currency, or reference. | Showing a toast or local success strip as the only proof of a completed transaction. | Treating a conflict as a simple retryable save error. |