UX Testing Quick Reference Guide
Essential Elements & Testing Points
13 Core Validation Questions
1. Navigation
• What to check: All menus work, links go to correct pages, breadcrumbs show
current location
• Why it matters: Users get lost if navigation is broken
• Test: Click every menu item, check if it goes where expected
2. Header
• What to check: Logo visible, positioned correctly, links to homepage
• Why it matters: Header is on every page - branding and navigation hub
• Test: Verify logo clarity, menu items visible, mobile hamburger menu works
3. Footer
• What to check: Contact info, social links work, copyright year correct
• Why it matters: Users expect important links here (Privacy, Terms, Contact)
• Test: Click all footer links, verify they open correctly
4. Buttons & Actions
• What to check: Button colors match brand, correct size, cursor changes to
pointer on hover
• Why it matters: Non-clickable elements shouldn't show hand cursor (confuses
users)
• Test: Hover over buttons - cursor should be pointer. Hover over text - should be
arrow
5. Links
• What to check: Underlined or colored differently, work when clicked, open in
right tab
• Why it matters: Broken links frustrate users, external links should open in new
tab
• Test: Click all links, verify destination is correct
6. Carousels
• What to check: Auto-slide works, arrows navigate forward/back, dots show
current slide
• Why it matters: Users miss content if carousel doesn't work
• Test: Wait for auto-slide, click arrows, tap dots
7. Content Formatting
• What to check: Text readable, proper spacing, consistent fonts, no overlapping
elements
• Why it matters: Poor formatting = users can't read your content
• Test: Read through pages at different zoom levels
8. Forms
• What to check: Fields big enough, labels clear, placeholder text helpful, submit
button works
• Why it matters: Forms = conversions. Confusing forms = lost users
• Test: Fill out form completely, try submitting with errors, check if validation works
9. Error & Info Messages
• What to check: Error messages are red, success messages green, text explains
what happened
• Why it matters: Users need to know if action succeeded or failed
• Test: Trigger errors intentionally (wrong password, empty field), verify clear
messages appear
10. Additional Elements
• What to check: 'Back to top' button appears when scrolling, Help icon
accessible, Calendly loads
• Why it matters: These enhance usability but often forgotten in testing
• Test: Scroll down long page, click back-to-top button
11. Mobile Responsiveness
• What to check: Page looks good in portrait & landscape, text readable, buttons
tappable
• Why it matters: 50%+ traffic is mobile - must work perfectly
• Test: Use Chrome DevTools mobile view, rotate to landscape
12. Data Entry Validation
• What to check: Fields accept valid input, reject invalid input (SQL injection
attempts, scripts)
• Why it matters: Security + preventing crashes
• Test: Try entering: <script>, '; DROP TABLE, emojis, very long text
13. Scrolling Behavior
• What to check: Page scrolls smoothly, content doesn't jump, sticky headers stay
in place
• Why it matters: Janky scrolling = unprofessional feel
• Test: Scroll up/down on different devices, check for smooth motion
Key Pages to Test
• Login: Test wrong password, forgot password link, remember me checkbox
• Sign Up: Test email validation, password strength indicator, terms checkbox
• Contact Us: Test form submission, email/phone format validation, success
message
• FAQ: Test accordion expand/collapse, search functionality
• Blog Post: Test images load, share buttons work, comments section
• Careers: Test job listings display, apply button redirects correctly
• Cart: Test add/remove items, quantity updates, total calculation
• Search: Test search results accuracy, filters work, no results message
19 Essential UI Elements
Avatar
• User profile picture - circular or square image. Test: Shows default image if no
photo uploaded
Badge
• Small label showing status/count (e.g., '5 New Messages'). Test: Updates in real-
time, correct color for status
Button
• Clickable element for actions. Test: Hover state changes, click triggers action,
disabled state grayed out
Card
• Container with border/shadow holding related content. Test: Consistent sizing,
shadow visible, clickable if interactive
Table
• Rows and columns of data. Test: Sortable headers work, pagination works,
mobile view scrolls horizontally
Icon
• Small graphic symbol. Test: Loads correctly, recognizable meaning, accessible
alt text
Text Field
• Input box for typing. Test: Cursor visible when focused, placeholder disappears,
character limit enforced
Toggle
• On/Off switch. Test: Slides smoothly, color changes between states, saves
preference
Loading Indicator
• Spinner/progress bar showing wait time. Test: Appears during loading,
disappears when done, animates smoothly
Modal
• Pop-up dialog box. Test: Closes with X button, closes when clicking outside, can't
interact with page behind it
Tooltip
• Small text box on hover. Test: Appears on hover, disappears when mouse
leaves, readable text
Search
• Search bar. Test: Enter key triggers search, X clears input, shows suggestions if
enabled
Navigation
• Menu system. Test: All links work, dropdown opens on hover, mobile hamburger
menu functions
Radio Button
• Single choice from multiple options. Test: Only one selectable at a time, selection
visible, label clickable
Checkbox
• Multiple choices possible. Test: Check/uncheck works, checkmark visible, label
clickable
Tabs
• Content sections with switching tabs. Test: Active tab highlighted, content
changes on click, URL updates if needed
Toast Notification
• Temporary message at top/bottom. Test: Auto-dismisses after time, closeable
with X, doesn't block content
Banner
• Full-width alert/announcement. Test: Closeable, stays closed after dismissal,
appropriate color for message type
Dropdown
• List of selectable options. Test: Opens on click, searchable if many options,
closes when option selected
Testing Quick Tips
• Test in multiple browsers: Chrome, Firefox, Safari, Edge
• Test on real devices: iPhone, Android phone, tablet, desktop
• Use Chrome DevTools: F12 → Toggle device toolbar for mobile testing
• Document everything: Take screenshots of bugs, note exact steps to
reproduce
• Prioritize: Fix broken functionality first, then polish UI details
Remember: The goal is to catch issues before users do!