User Experience

UX is NOT UI - 5 Examples

May 26, 2024 by UX Jobs

Five example user experiences with the corresponding UI elements separated:

Example 1: Online Shopping Checkout Process

User Experience:

  1. User logs in to their account.
  2. User selects items to purchase.
  3. User reviews the cart and proceeds to checkout.
  4. User enters shipping information.
  5. User enters payment details.
  6. User reviews the order and confirms the purchase.
  7. User receives a confirmation email.

UI Elements:

  • Login form (text fields, buttons)
  • Product selection interface (cards, dropdowns, buttons)
  • Cart summary (table, buttons)
  • Checkout form (text fields, dropdowns, radio buttons)
  • Payment form (text fields, dropdowns)
  • Order review page (text, buttons)
  • Confirmation modal (text, buttons)

Example 2: Booking a Hotel Room

User Experience:

  1. User searches for available hotels in a specific location.
  2. User filters search results by price, rating, and amenities.
  3. User selects a hotel and views details.
  4. User chooses a room type and enters guest information.
  5. User enters payment details and confirms the booking.
  6. User receives a booking confirmation email.

UI Elements:

  • Search bar (text field, button)
  • Filter options (checkboxes, sliders, dropdowns)
  • Hotel listing (cards, text, images)
  • Room selection interface (radio buttons, text fields, buttons)
  • Payment form (text fields, dropdowns)
  • Confirmation modal (text, buttons)

Example 3: Submitting a Support Ticket

User Experience:

  1. User navigates to the support section.
  2. User fills out a support ticket form with details of their issue.
  3. User submits the ticket.
  4. User receives a confirmation email with a ticket number.
  5. User tracks the status of their ticket through the support portal.

UI Elements:

  • Navigation menu (links, buttons)
  • Support ticket form (text fields, dropdowns, buttons)
  • Submission confirmation modal (text, buttons)
  • Email confirmation (text)
  • Ticket status interface (table, text, buttons)

Example 4: Using a Fitness App

User Experience:

  1. User logs in to the app.
  2. User sets fitness goals and preferences.
  3. User selects a workout routine.
  4. User tracks their workout progress.
  5. User logs their meals and hydration.
  6. User reviews weekly progress reports.

UI Elements:

  • Login form (text fields, buttons)
  • Goal-setting interface (text fields, sliders, buttons)
  • Workout routine selection (cards, buttons)
  • Progress tracker (charts, text, buttons)
  • Meal log (text fields, dropdowns, buttons)
  • Progress report (charts, text, buttons)

Example 5: Applying for a Job Online

User Experience:

  1. User searches for job openings.
  2. User filters results by job type, location, and salary.
  3. User views job details and requirements.
  4. User fills out the application form.
  5. User submits the application.
  6. User receives a confirmation email.

UI Elements:

  • Search bar (text field, button)
  • Filter options (checkboxes, dropdowns, sliders)
  • Job listing (cards, text, links)
  • Application form (text fields, dropdowns, buttons)
  • Submission confirmation modal (text, buttons)
  • Email confirmation (text)

These examples illustrate how the overall user experience encompasses the entire journey a user takes within a software, while the UI elements are the individual controls and components that facilitate each step of that journey.