Beachfront Apartment Booking

The primary navigation links in the top menu are displayed with very low contrast and small font weight on a light background, making them difficult to read and distinguish.

Users may have difficulty identifying navigation options, leading to confusion and increased effort to find important sections of the site.

The reservation form requires users to select both 'Llegada' (arrival) and 'Salida' (departure) dates separately, adding two date selection steps that could potentially be consolidated.

Requesting separate date inputs requires more user effort and may cause hesitation or mistakes, potentially reducing booking completion rates.

Consider consolidating date inputs into a single date-range picker control for faster, more intuitive date selection.

The fields for selecting arrival and departure dates only show 'Seleccionar fecha →' without any indication that these are interactive date pickers or instructions on how to proceed after selection.

Users may not realize they need to select dates or may be uncertain how to interact with these fields, causing confusion and hesitation to complete the reservation.

Add clear affordances such as calendar icons or placeholder text indicating interaction. Provide guidance or tooltips on how to select dates and confirm them.

The call-to-action button 'Solicitar reserva' appears clickable but there is no visible indication or prompt about what happens next or confirmation after clicking.

Without feedback or a confirmation state, users may be unsure if their reservation request was received or successfully processed, leading to uncertainty and potential drop-off.

Implement immediate feedback states such as a loading indicator, confirmation message, or next step instructions upon clicking the reservation button.

The description text 'Apartamento de diseño · Primera línea de playa' uses a medium gray on a partially darkened image background, resulting in reduced contrast below recommended levels (likely below WCAG AA 4.5:1).

Users with visual impairments may struggle to read this text, which can hinder comprehension of key property details.

Use a lighter gray or a white color with a subtle solid background or overlay behind the text to increase contrast against the complex image behind.

Low contrast makes it difficult for users with visual impairments to recognize and interact with these controls or read their labels.

Important informational text may be missed or ignored by users with visual impairments due to poor legibility.

Use a lighter shade of gray or white to increase contrast or provide a subtle background highlight behind the text.

Consistent text casing helps users recognize interactive elements and improves overall visual harmony.

Standardize the button text casing to match other buttons or interactive elements in the UI, either using uppercase or sentence case consistently.

The main call-to-action button is labeled 'Solicitar reserva', which translates to 'Request reservation'. This CTA is somewhat vague as it implies a request rather than a confirmed booking or immediate action, potentially reducing user motivation to click.

Users may hesitate or feel uncertain about what will happen after clicking, reducing conversion rates and causing friction in the booking flow.

Make the CTA more action-oriented and clear about the immediate benefit or next step, for example, 'Book Now' or 'Check Availability'.

The pill-shaped filter buttons ('4 personas', 'Primera línea de playa', '2 noches mín.') appear to be relatively small and may have tight padding, likely below 44x44 pixels recommended for touch targets.

Small tap targets increase the chance of user input errors and frustration, especially on mobile devices or for users with reduced dexterity.

Increase the size and padding of the pill buttons to at least 44x44 pixels to ensure easier and more reliable tapping.

The date input triggers labeled 'Seleccionar fecha →' have minimal affordance cues like button styling or clear borders, which could make it unclear these fields are interactive date pickers.

Users may not realize these are interactive controls, leading to confusion and difficulty completing the reservation process.

Enhance the visual affordance of date fields by adding clearer borders, background changes on hover/focus, or button-like styling.

Users may miss key navigation links or be uncertain about their current location within the site, reducing their ability to efficiently explore options and complete tasks.

The date fields labeled 'Llegada' and 'Salida' show as 'Seleccionar fecha →' without specifying format or calendar context, which may confuse users about the expected input format.

Users might input or expect a date format or calendar behavior that is inconsistent with the system, causing errors or hesitation in completing the reservation.

Add explicit date format examples or calendar pop-ups that clarify how to select or input dates, including regional formats if necessary.

The date selectors, people selector, price box, and reservation button are slightly misaligned horizontally and have inconsistent vertical spacing.

Poor alignment reduces perceived professionalism and can distract users, making the interface harder to scan.

There is no clear visible indication of the current page or section in the navigation bar or elsewhere, making it ambiguous where user is within the site hierarchy.

Without orientation, users cannot easily understand where they are in the site, increasing cognitive load and risk of disorientation.

Highlight the active navigation item with distinct styling or provide a visible breadcrumb or page title indicator that stands out.

Users may not immediately understand what the sidebar controls or their current position in the workflow, causing hesitation or errors.

Add a prominent, descriptive header or step indicator within the sidebar to clarify purpose and user context.

The 'Solicitar reserva' (Request reservation) button is a sensitive action involving user booking. While there is a small 'Sin compromiso · Cancela gratis' (No commitment · Cancel free) note below, there are no stronger trust or security signals directly near the button to reassure users about payment security, privacy, or reliability of the booking.

Users may hesitate to proceed with a booking if trust signals are not visible at the moment of commitment, potentially reducing conversions and user confidence.

Add clear trust signals near the reservation button, such as payment security icons, data privacy reassurances, or a short friendly message reinforcing secure, hassle-free booking.

Reservation rules like '2 noches min.' and 'hasta 4 personas' are mentioned only in small text separately and are not emphasized within the booking input fields, forcing users to memorize these restrictions.

Users may forget or overlook key restrictions during booking, leading to errors, frustration, or abandoned bookings.

Integrate visible, real-time validation and reminders near date and guest selectors to reduce reliance on memory.

The reservation form's dark background with uniform dark blue input fields and a purple button lacks strong visual hierarchy, causing the CTA button 'Solicitar reserva' to not stand out strongly from the form and page background.

This reduces the prominence of the main action users are likely to take, potentially lowering conversion and user engagement with the booking process.

The 'Solicitar reserva' button implies a booking request but no personal data input is visible, suggesting multiple micro-steps after the current form for personal info collection.

Additional unseen steps reduce user clarity on process length and can increase abandonment risk if users feel the booking is more complex than expected.

Consider showing minimal personal data fields on this screen or a progress indicator to manage expectations.

The price box shows a euro symbol (€) without a label or tooltip indicating currency context explicitly.

Users unfamiliar with the currency symbol might be unsure what currency is used, causing confusion.

Add an accessible label, aria-label, or tooltip clarifying the currency and meaning of the symbol.

The label under the 'Solicitar reserva' button is small, low contrast, and placed in a visually weak position, reducing its visibility despite its importance.

Important reassurance details might be missed by users, reducing trust or increasing hesitation to complete the booking.

Use a larger font size, higher contrast color, or reposition the text for better visibility.

The availability query form fields (arrival date, departure date, number of people, price per night) appear visually stacked without distinct grouping or separation beyond labels, which can reduce ease of scanning and completion.

Less organized forms increase cognitive load, potentially frustrating users and reducing form completion rates.

Group related fields visually using boxes, spacing, or distinct section headings to improve clarity and flow.

The three filter pill buttons are spaced closely with minimal gaps, which may lead to accidental taps on adjacent buttons.

Touching nearby targets accidentally can lead to input errors and user frustration.

Increase spacing between the filter pill buttons to provide comfortable separation for touch.

'PERSONAS' label is shown in uppercase but with low contrast and similar size to the value '2 personas,' causing weak hierarchy and potential confusion about what is label vs value.

Users may struggle to quickly identify the category and the selected value, which slows comprehension and can increase cognitive load.

Increase the font weight or size of the label or improve color contrast between label and value for clearer separation.

There are three small pill-shaped tags closely spaced below the main title, which may create clutter and make tapping or clicking difficult on smaller screens.

Users might accidentally tap the wrong tag or find the interactions cumbersome, reducing ease of use on mobile or touch devices.

Increase spacing between tags or group them more clearly to reduce density and improve area for interaction.

The booking form's cold tone can create an emotional disconnect that reduces delight and perceived friendliness, impacting user engagement negatively.

Introduce warmer or lighter background colors or accent colors in the booking sidebar, and increase font size or weight for better readability and friendlier tone.