University VSTEP Info Page

There is no breadcrumb, highlighted menu item, or title bar clearly indicating the user's current location within the site navigation.

Users may feel lost or uncertain about where they are on the site, reducing their confidence and ease of navigation.

Add visible indicators such as breadcrumbs, page titles, or highlighted navigation items to clarify the current location.

Small touch targets make it difficult for users, especially those with limited dexterity, to reliably activate interactive elements, leading to user frustration and repeated attempts.

Increase the size of the hamburger menu target area to at least 44x44 pixels, with adequate padding around the icon to make it easier to tap.

The body text below the heading uses a gray color on a very light cream background, resulting in low contrast likely below WCAG AA standards for normal text.

Use a darker text color or a lighter background to improve contrast to meet at least WCAG AA contrast ratio of 4.5:1 for normal text.

Small body text can cause strain and reduce comprehension, especially for users with visual impairments or on smaller screens.

Uneven alignment distracts users and reduces the perceived professionalism and balance of the layout.

'Xem thêm' translates to 'See more' or 'Read more', which is a generic CTA label that does not specify what the user will get after clicking. The button is visually distinct but the label lacks clarity on the action's outcome.

A vague CTA can reduce user motivation to click as they may not understand the value or the next step, potentially lowering engagement and conversion.

Use a more specific and action-oriented label that clearly describes what users can expect, like 'Learn about VSTEP levels' or 'Discover VSTEP details'.

There are four tilted images around the main text that do not serve any clear interaction or informational purpose, adding visual clutter around the central message.

Users may find it harder to focus on the main explanation and call to action because the decorative images compete for their attention.

Reduce the number of decorative images or simplify the layout to keep the user's focus on the key content and the 'Xem thêm' button.

The button labeled 'Xem thêm' (See more) is visible but it is unclear what action or destination this button leads to from the content shown on the screen.

Users may be uncertain about what will happen if they click the button, potentially causing hesitation or abandonment.

Clearly communicate the next step or action associated with this button, such as by adding an icon, tooltip, or descriptive label. Ensure content beyond this screen matches the user's expectations for 'See more'.

The screen shows a central text explanation about 'Chứng chỉ VSTEP' surrounded by four small card images placed at corners with no strong focal visual emphasis. The layout lacks a clear visual hierarchy and memorable design element that quickly draws users' eyes to the most important information or brand value proposition.

Without a clear, memorable focal area or differentiated design feature, users may find the page bland and be less likely to engage or remember key messages, reducing overall user satisfaction.

Enhance visual hierarchy by increasing size and prominence of the main message or adding a compelling hero image or graphic. Reduce peripheral clutter and increase focus on the key information or call to action.

The body text uses mostly similar font weight and size for multiple lines, causing a flat visual hierarchy that makes it harder to scan or prioritize information.

Weak hierarchy makes it difficult for users to differentiate key points and scan the content efficiently, which can reduce comprehension and engagement.

Use consistent but varied font weights and sizes to emphasize important terms and separate different content sections more clearly.

The four images have inconsistent corner rounding and subtle shadow effects, making them look visually mismatched.

Inconsistent image styling breaks visual harmony and can confuse users about grouping or hierarchy.

Apply a consistent border radius and shadow style across all image cards to unify their appearance.

Four visually similar image cards placed near the main text section may compete as click targets without clear indication of their unique purpose.

Users may be distracted or unsure which card to select, reducing navigation efficiency and causing potential frustration.

Provide clearer labeling and spacing for image cards or reduce the number of simultaneous click targets near main content.

When touch targets are too close, users may accidentally tap the wrong control, increasing error rates and causing frustration.

Add more spacing or padding between the hamburger menu and the register button to separate their touch target zones.

Users might be unsure what to focus on first, which can delay or discourage interaction.

Prioritize the most important action visually, such as by de-emphasizing less critical elements or grouping actions more clearly.

Lack of label for navigation icons can increase cognitive load or make navigation unclear to less tech-savvy users.

Add a tooltip or aria-label to the hamburger menu icon to clarify its function.