Tourist Attraction Directory

The interface efficiently organizes content with clear navigation links and a focused search tool to find attractions by location, supporting user exploration. However, the design feels outdated with dense text, cramped layouts, and weak visual hierarchy that could hinder readability and user engagement.
Analyzed design
Fixes by Category
  • 2
    Color & Contrast
  • 3
    Content Readability & Clarity
  • 2
    Visual Consistency, Imagery & Media
  • 1
    Navigation & Structure
  • 0
    Conversion & Actions
  • 0
    Tone, Friendliness & Delight
  • 2
    Accessibility & Input Ergonomics
  • 0
    Efficiency & Cognitive Load
  • 2
    Flow & States Completeness
  • 0
    Strategic Design
    • Recommended Fixes by Impact
    0Critical
    4Major
    7Moderate
    2Minor

    Add Clear Label to Search Form to Improve Usability

    Major
    Content Readability & Clarity
    The Problem
    The search input fields are labeled as 'Attraction', 'Town', and 'State' but these labels are very small and have low visual distinction, which can confuse users about what they need to enter.
    Why it Matters
    Users may not understand the purpose of each search box quickly, leading to mistaken inputs or search errors.
    How to Fix
    Increase label font size and consider grouping the inputs with a clear heading such as 'Search Attractions by Location' to create clearer context.
    Issue Highlights
    Finding region

    Increase Tap Target Size of Search Form Inputs and Button to Reduce Input Errors

    Major
    Accessibility & Input Ergonomics
    The Problem
    The text input fields for 'Attraction' and 'Town' and the 'State' dropdown plus the Search button on the top right are very small and narrow in width and height.
    Why it Matters
    Small input fields and buttons can be difficult to tap or click precisely, increasing error rates and user frustration.
    How to Fix
    Expand the width and height of each form field and the Search button to meet or exceed a minimum touch target size of 44x44 pixels with adequate spacing around.
    Issue Highlights
    Finding region

    Increase Contrast of 'The Muffler Man. Los Angeles, California' Text to Improve Readability

    Major
    Color & Contrast
    The Problem
    The white text 'The Muffler Man. Los Angeles, California' over a sky background has insufficient contrast, likely below the WCAG AA minimum ratio of 4.5:1 for normal text.
    Why it Matters
    Low contrast text is hard to read, especially for users with visual impairments or in bright ambient conditions.
    How to Fix
    Use a darker text color such as dark gray or add a semi-transparent dark overlay behind the text to achieve a contrast ratio of at least 4.5:1 against the background.
    Issue Highlights
    Finding region

    Clarify Next Step After Viewing Sight of the Week to Guide User

    Major
    Flow & States Completeness
    The Problem
    The 'Sight of the Week' feature highlights a location, but the screen does not provide a clear call to action or guidance on what the user should do next.
    Why it Matters
    Without a clear next step, users may be unsure how to proceed to learn more or continue their exploration, leading to uncertainty and potential drop-off.
    How to Fix
    Add a visible and descriptive call to action such as 'Learn More,' 'View Details,' or 'Add to Trip' associated with the Sight of the Week feature to direct the user forward.
    Issue Highlights
    Finding region

    Increase Font Size of Sidebar Links to Improve Readability

    Moderate
    Content Readability & Clarity
    The Problem
    The text in the 'My Sights', 'Mobile Apps', and 'Field Reports' sections is small, likely below 16px, making it harder to read.
    Why it Matters
    Small font sizes require more effort to read and may frustrate users, causing them to skip these useful navigation elements.
    How to Fix
    Increase the font size of sidebar body text to at least 16px and ensure sufficient line-height for better legibility.
    Issue Highlights
    Finding region

    Align 'Find Attractions and Oddities' Section to Grid for Visual Harmony

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    'Find Attractions and Oddities' section with yellow background is slightly misaligned compared to adjacent sections on the left and right, causing uneven spacing horizontally.
    Why it Matters
    Misalignment disrupts the visual flow, increasing cognitive load as users' eyes struggle to follow consistent structure across the page.
    How to Fix
    Adjust horizontal padding/margins so that the yellow section aligns consistently with adjacent text and image columns, maintaining a clear vertical grid.
    Issue Highlights
    Finding region

    Add Clear Page Location Indicator to Reduce User Confusion

    Moderate
    Orientation Missing (Environment/Role/Location)
    The Problem
    The page does not have a clear visible indicator of the current page or section the user is in, such as an active state in the top navigation or a breadcrumb. The top nav links appear generic without distinction.
    Why it Matters
    Users can get confused about where they are within the site hierarchy, reducing their confidence in navigation and increasing frustration.
    How to Fix
    Implement active state styling on the current page link in the navigation bar and/or include breadcrumbs or page headings that explicitly show the user's location within the site structure.
    Issue Highlights
    Finding region

    Increase Tap Target Size of Top Navigation Links to Improve Usability

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    The navigation links in the black bar (Home | Maps | Tips | Blog | My Sights | Video | Mobile) have small tap targets that are close together and appear smaller than recommended accessible sizes.
    Why it Matters
    Small tap targets increase the chance of user errors and frustration, especially on touch devices where finger input is imprecise.
    How to Fix
    Increase the size of each navigation link’s tap area to at least 44x44 pixels and add spacing between links to reduce accidental taps.
    Issue Highlights
    Finding region

    Increase Contrast of Search Box Backgrounds and Text to Improve Form Usability

    Moderate
    Color & Contrast
    The Problem
    The input fields for 'Attraction', 'Town', and 'State' have yellow backgrounds with pale text or border contrast that may fail WCAG AA contrast thresholds.
    Why it Matters
    Low contrast form fields can be difficult to identify and use, especially for users with visual impairments.
    How to Fix
    Use a darker background or a darker text color to meet at least 4.5:1 contrast ratio, or add visible borders with sufficient contrast.
    Issue Highlights
    Finding region

    Enhance Visual Hierarchy in 'Find Attractions and Oddities' Section to Improve Scanability

    Moderate
    Content Readability & Clarity
    The Problem
    The 'Find Attractions and Oddities' section mixes bold, normal, and link text without clear visual grouping or headings, making it difficult to quickly understand the structure.
    Why it Matters
    Users may struggle to scan and find relevant information quickly, reducing site usability.
    How to Fix
    Use distinct headings, spacing, and text styling to clearly separate subsections and highlight important links.
    Issue Highlights
    Finding region

    Add Guidance for Empty State in State Favorites Dropdown

    Moderate
    Flow & States Completeness
    The Problem
    The 'State Favorites' dropdown is visible but there is no instruction or guidance on what to do if no favorite states have been selected or saved.
    Why it Matters
    Users who have no favorites selected might be unclear about how to use this feature or whether they need to take action, impacting their ability to engage fully.
    How to Fix
    Provide placeholder text or a tooltip in the dropdown explaining how to select or save favorites, or display a message when no favorites exist.
    Issue Highlights
    Finding region

    Label Social Media Icons to Improve Accessibility and Clarity

    Minor
    Visual Consistency, Imagery & Media
    The Problem
    Social sharing icons (Facebook, Twitter, Email) in top-right near main image have no text label or tooltip indicating their function.
    Why it Matters
    Without labels or tooltips, users including those with screen readers or cognitive impairments may not understand the icons' purpose, lowering accessibility and usability.
    How to Fix
    Add accessible text labels or tooltips to the social media icons to clarify their function for all users.
    Issue Highlights
    Finding region

    Reduce Number of Top Navigation Links to Improve Click Clarity

    Minor
    Navigation & Structure
    The Problem
    The top navigation bar has 7 distinct clickable text links placed closely together with minimal spacing and similar styling, making it harder to quickly identify and select the desired option.
    Why it Matters
    Too many equally prominent navigation options can slow down users' decision-making and increase click errors.
    How to Fix
    Group related links or prioritize the most important ones; add more spacing or visual grouping to reduce cognitive load and improve ease of selection.
    Issue Highlights
    Finding region