Product design skills

references/patterns-detailed.md

A supporting file of the ux-writing skill.

View raw MarkdownView source

UX Text Patterns — Detailed Examples

This document provides extended examples of common UX text patterns applied across three different product voices: TAPP Transit (helpful, efficient, trustworthy), 'appee Social Game (playful, competitive, rewarding), and Sturgeon Club (sophisticated, exclusive, elegant).

Titles

Brand Title

Identifies the product/organization

TAPP Transit: "TAPP" 'appee: "'appee" Sturgeon Club: "The Sturgeon Club"

Content Title

Reflects what's on the screen

TAPP Transit: "Your routes", "Bus schedule", "Payment methods" 'appee: "Your photos", "Leaderboard", "Daily challenge" Sturgeon Club: "Your reservations", "Member directory", "Event calendar"

Category Title (Ambiguous Task)

Covers multiple related actions

TAPP Transit: "Trip planning", "Account settings", "Help and support" 'appee: "Profile settings", "Game stats", "Photo gallery" Sturgeon Club: "Membership benefits", "Venue access", "Concierge services"

Task Title (Single Action)

Acts as instruction for one task

TAPP Transit: "Buy a day pass", "Report a problem", "Change your email" 'appee: "Upload a photo", "Vote on photos", "Invite a friend" Sturgeon Club: "Reserve a table", "Update your preferences", "Download your invoice"

Buttons

Primary Actions

TAPP Transit:

  • "Buy pass"
  • "Track bus"
  • "Plan trip"
  • "Report issue"

'appee:

  • "Upload photo"
  • "Vote now"
  • "Challenge friend"
  • "Claim reward"

Sturgeon Club:

  • "Reserve table"
  • "View details"
  • "Confirm attendance"
  • "Request service"

Secondary Actions

TAPP Transit:

  • "View schedule"
  • "Cancel"
  • "Go back"
  • "Skip"

'appee:

  • "See rules"
  • "Maybe later"
  • "Pass"
  • "View profile"

Sturgeon Club:

  • "Learn more"
  • "Decline"
  • "Return"
  • "Not now"

Destructive Actions

TAPP Transit:

  • "Delete payment method"
  • "Cancel trip"
  • "Remove favorite"

'appee:

  • "Delete photo"
  • "Leave game"
  • "Remove friend"

Sturgeon Club:

  • "Cancel reservation"
  • "Remove guest"
  • "Close account"

TAPP Transit:

  • "See all routes"
  • "View trip history"
  • "Check real-time updates"

'appee:

  • "Browse all challenges"
  • "See your stats"
  • "View friend activity"

Sturgeon Club:

  • "Explore member benefits"
  • "View upcoming events"
  • "Access your membership card"

TAPP Transit:

  • "Learn about fare options"
  • "Get help with passes"
  • "Contact support"

'appee:

  • "How scoring works"
  • "Tips for better photos"
  • "Report a problem"

Sturgeon Club:

  • "Terms of membership"
  • "Dress code requirements"
  • "Concierge contacts"

Error Messages

Inline Errors

TAPP Transit:

  • "Email must include @"
  • "Card number is incomplete"
  • "Pick a future date"

'appee:

  • "Username already taken"
  • "Photo must be under 10MB"
  • "Needs at least 3 characters"

Sturgeon Club:

  • "Email address required"
  • "Valid phone number required"
  • "Select a date"

Detour Errors

TAPP Transit: Title: "Can't buy pass" Body: "Your payment didn't go through. Check your card details and try again." Action: "Update card"

'appee: Title: "Upload failed" Body: "Your photo couldn't be uploaded. Check your connection and try again." Action: "Retry upload"

Sturgeon Club: Title: "Reservation unavailable" Body: "This time slot is no longer available. Please select another time." Action: "Choose different time"

Blocking Errors

TAPP Transit: Title: "Service temporarily unavailable" Body: "We're updating our systems and will be back online in about 15 minutes. Your saved trips and passes are safe." Action: "Check status"

'appee: Title: "Update required" Body: "You need the latest version of 'appee to continue playing. Update now to access new challenges and features." Action: "Update app"

Sturgeon Club: Title: "Membership renewal required" Body: "Your membership expired on March 15. Renew your membership to continue accessing club services." Action: "Renew membership"

Success Messages

Simple Confirmation

TAPP Transit:

  • "Pass purchased"
  • "Favorite added"
  • "Route saved"
  • "Email updated"

'appee:

  • "Photo uploaded"
  • "Vote recorded"
  • "Friend added"
  • "Profile saved"

Sturgeon Club:

  • "Reservation confirmed"
  • "Preferences updated"
  • "Guest added"
  • "Payment processed"

Detailed Success

TAPP Transit: Title: "Trip saved" Body: "You'll get a reminder 30 minutes before your bus arrives."

'appee: Title: "Challenge complete!" Body: "You earned 50 points. Check the leaderboard to see your ranking."

Sturgeon Club: Title: "Reservation confirmed" Body: "Table for 4 on Saturday, May 20 at 7:30 PM. You'll receive a reminder the day before."

Empty States

First-Use Empty State

TAPP Transit: Title: "No saved routes yet" Body: "Save your frequent trips for quick access." Action: "Plan a trip"

'appee: Title: "No photos yet" Body: "Upload your first photo to start earning points." Action: "Upload photo"

Sturgeon Club: Title: "No upcoming reservations" Body: "Reserve a table at any of our exclusive venues." Action: "Make reservation"

User-Cleared Empty State

TAPP Transit: Title: "All caught up" Body: "You've completed all your trips for today."

'appee: Title: "You're all done!" Body: "You've voted on all today's photos. New challenges arrive tomorrow."

Sturgeon Club: Title: "No pending requests" Body: "You're all set. We'll notify you when we process your reservation."

Error Empty State

TAPP Transit: Title: "No results found" Body: "Try a different search or browse all routes." Action: "See all routes"

'appee: Title: "No photos match your search" Body: "Try different keywords or browse all photos." Action: "Browse photos"

Sturgeon Club: Title: "No events match your criteria" Body: "Adjust your filters or view all upcoming events." Action: "View all events"

Notifications

Action-Required

TAPP Transit: Title: "Your bus is arriving" Body: "Route 42 to Downtown arrives in 2 minutes at Bay St."

'appee: Title: "New challenge available" Body: "Today's theme: Sunset. Upload by midnight to compete."

Sturgeon Club: Title: "Reservation reminder" Body: "Your reservation is tonight at 7:30 PM. Confirm or modify by 5 PM." Actions: "Confirm" | "Modify"

Passive

TAPP Transit: Title: "Service update" Body: "Route 15 is running 5 minutes late due to traffic."

'appee: Title: "You earned a badge" Body: "Weekly Warrior: Uploaded photos 7 days in a row."

Sturgeon Club: Title: "New event announced" Body: "Wine tasting on June 15. Reserve your spot before it fills."

Form Fields

Labels

TAPP Transit: "Email address", "Card number", "Expiration date", "Security code" 'appee: "Username", "Display name", "Bio", "Profile photo" Sturgeon Club: "Member name", "Phone number", "Dietary preferences", "Guest names"

Instructions (Helper Text)

TAPP Transit:

  • "We'll send trip updates to this email"
  • "This card will be saved securely for future purchases"
  • "Shown on your receipts and account"

'appee:

  • "Choose a unique name others will see"
  • "Tell other players about yourself"
  • "Upload a photo that represents you"

Sturgeon Club:

  • "Required for reservation confirmations"
  • "We'll contact you about events and updates"
  • "Help us prepare the perfect dining experience"

Placeholder Text

TAPP Transit: "name@example.com", "4111 1111 1111 1111", "MM/YY" 'appee: "PhotoPro2024", "About me...", "Add caption" Sturgeon Club: "John Smith", "(555) 555-5555", "Guest name"

Controls

Toggle Switches

TAPP Transit:

  • Name: "Real-time updates"
  • Description: "Get notifications when your bus is arriving"

'appee:

  • Name: "Push notifications"
  • Description: "Get notified about new challenges and friend activity"

Sturgeon Club:

  • Name: "Event reminders"
  • Description: "Receive notifications about upcoming reservations and events"

Checkboxes

TAPP Transit:

  • "Remember this payment method"
  • "Include accessibility information"
  • "Show express routes only"

'appee:

  • "Make profile public"
  • "Allow friend requests"
  • "Share scores on leaderboard"

Sturgeon Club:

  • "Send event invitations"
  • "Include guests in communications"
  • "Opt in to exclusive offers"

Instructions

Static Instructions

TAPP Transit: "Tap your card when you board and when you exit." 'appee: "Upload one photo per day to earn points." Sturgeon Club: "Present your membership card upon arrival."

On-Demand Instructions

TAPP Transit: Trigger: Help icon next to "Transfer" Content: "Switch to another bus or train at connecting stops. Your pass covers transfers within 2 hours."

'appee: Trigger: Question mark next to "Challenge rules" Content: "Upload a photo matching today's theme by midnight. Other players vote on entries. Top 10 photos earn bonus points."

Sturgeon Club: Trigger: Info icon next to "Guest policy" Content: "Members may bring up to 3 guests per visit. Guest names must be provided 24 hours in advance for evening reservations."

Key Differences by Voice

TAPP Transit (Helpful, Efficient, Trustworthy):

  • Direct, clear, informative
  • Focuses on practical information
  • Anticipates user needs
  • Transparent about problems

'appee (Playful, Competitive, Rewarding):

  • Energetic, encouraging language
  • Emphasizes achievement and competition
  • Celebrates user actions
  • Uses exclamation points appropriately

Sturgeon Club (Sophisticated, Exclusive, Elegant):

  • Polished, refined tone
  • Emphasizes service and quality
  • More formal phrasing
  • Sophisticated word choices

All three maintain the core UX principles: purposeful, concise, conversational (within voice), and clear.

On this page

TitlesBrand TitleContent TitleCategory Title (Ambiguous Task)Task Title (Single Action)ButtonsPrimary ActionsSecondary ActionsDestructive ActionsLinksNavigational LinksContextual LinksError MessagesInline ErrorsDetour ErrorsBlocking ErrorsSuccess MessagesSimple ConfirmationDetailed SuccessEmpty StatesFirst-Use Empty StateUser-Cleared Empty StateError Empty StateNotificationsAction-RequiredPassiveForm FieldsLabelsInstructions (Helper Text)Placeholder TextControlsToggle SwitchesCheckboxesInstructionsStatic InstructionsOn-Demand InstructionsKey Differences by Voice