Singapore UX

Fill out all metadata fields and optimise your website's meta tags. Check that information presented on the search engine results page such as page titles and abstracts are informative and relevant.

Public pages should be findable through search engines, with titles and descriptions that make sense in a results list.

SEO increases the findability and reach of web content by helping search platforms effectively crawl your content and optimising the content displayed in search listings.

Display the end user's name or identifier in a clear, accessible location, such as the header or near the top of the page.

Once someone has logged in, show whose account it is, where they will see it.

Provides a clear indication that the end user is logged into the right account. This is especially important for shared devices.

Implement contact channels such as phone numbers, email, contact forms, live chat.

People must always have at least one way to reach a human or get help.

WCAG asks that help mechanisms repeated across pages keep the same relative position.

Allow end users to contact the relevant parties if they require help or assistance. Reassures users by providing a clear method to acquire information or resolve issues.

For Singapore government services, accessibility is defined by WCAG at Levels A and AA, carried into the standards as their own control families.

Use consistent visual indicators, such as asterisks (*) for mandatory fields. Providing an 'optional' label for optional fields is a good alternative if majority of the fields are mandatory. Ensure these indicators are accessible to screen readers.

Every form field should show whether it has to be filled in. Pick one way of showing it and use it everywhere.

An asterisk alone is a visual symbol. Pair it with a programmatic required state or the word in the label, so the indicator is not conveyed by appearance only.

A form where 8 of 10 fields are needed marks only the two others as "Email (optional)" and "Company (optional)".

Reduces completion time by allowing end users to skip unnecessary fields and increases completion rates by helping end users understand the effort required.

A visible label always, hint text for format, a required state where needed, and a message alongside the error styling.

Implement language selection mechanisms at key entry points, such as login or homepage, or select language based on device setting.

Offer content in more than one language, and let people choose early.

A language selector on the homepage and the login page, with the choice remembered across the service.

Allowing end users to select their preferred language enhances usability and inclusivity, allowing broader access and understanding.

Conduct user testing to validate that content is clear and accessible to your target audience. Readability formulas such as Flesch Reading Ease or Flesch-Kincaid grade level provide an indication of the difficulty of text and identify areas for simplification.

Use plain, short wording, and check it with real users instead of assuming it is clear.

Writing in a simple and concise manner allows more users with different backgrounds and language proficiency to understand your content.

Implement a site search function like SearchSG. Make it easily accessible and discoverable. Regularly review search analytics to optimise the search functionality based on user behaviour and needs.

Any website with more than one page needs a search that people can find easily.

Search also satisfies WCAG's requirement to offer more than one way to reach a page.

Search is a known and effective alternative to navigation for users who know what they are looking for.

Implement Responsive Web Design techniques to ensure web-based digital services are optimised for various devices and screen sizes.

Web services should adapt to the screen they are on. If something truly cannot work on a phone, block it there on purpose and tell people why and where to go instead.

WCAG's reflow rule sets the testable floor: content must work at 320 CSS pixels wide without scrolling in two directions.

A dense reporting table that is disabled on phones shows a message naming the reason and pointing to the desktop version.

A significant amount of web traffic comes from mobile devices. Responsive Web Design allows for optimised browsing experience on devices with different screen sizes.

SGDS names six width ranges and asks designers to deliver at least three sizes.

Use a design system such as the Singapore Government Design System (SGDS).

Build the whole service from one design system or style guide. SGDS is the suggested one, not the only one allowed.

Consistent design and placement of interface components improves usability by allowing end users to quickly learn interface patterns. Design systems or style guides help with consistency and scalability.

Five layers, from hard-coded values up to tokens scoped to one component. Day-to-day design work happens in the two semantic layers.

SGDS gives working rules for pairing colours but, on this page, no contrast ratio of its own.

The ratios to test against come from WCAG: 4.5:1 for text, 3:1 for large text and for UI components.

Variant sets the hierarchy, tone sets the meaning, and medium is the size for most actions.

The Button page does not state a minimum touch-target size. Use the WCAG minimum as the floor.