Skip to main content

This page has been translated using TexTra by NICT. Please note that the translation may not be completely accurate.
If you find any mistranslations, we appreciate your feedback on the "Request form for improving the automatic translation ".

UI Improvements for Government Information Systems

In order to realize Digital Agency's mission of "Human-friendly digitalization: No one left behind," it is essential to improve the usability of web services and web applications, the ease of searching for information, and accessibility. As part of this, we aim to create a society in which everyone can enjoy the benefits of Issue by developing user interface (UI) guidelines and checklists and resolving digitalization.

Overview

Digital Agency is working to solve Issue by conducting UI surveys and inspections. In addition to this activity, in order to continuously improve from the user's perspective based on feedback from users, Digital Agency will set up a form to collect opinions, compile the details of improvement, and support service improvement in cooperation with each ministries and agencies. In order to efficiently advance the improvement cycle in the future, we will enhance guidelines and checklists that can be referenced by each ministries and agencies.

Recent Efforts

  • From August 2023: Gradually compatible with Issue of UI
  • From July 2023: Started accepting feedback from users
  • May 2023: Base UI template available
  • February 2023: Clean up the UI Issue of government web services and web applications

Examples of improvements

Display examples as text before the field, not as placeholders

Subject: public fund receiving account Registration System (https://myna.go.jp/html/account_information.html)
Screen captures before and after the improvement. Before the improvement, if the entry example is displayed as a placeholder, it cannot be checked during entry, and if an error occurs, it cannot be compared between the entered value and the correct example. After the improvement, by displaying it as text instead of a placeholder, it is possible to always check the entry example regardless of the entry status. In addition, by entering it before the entry field, even a screen reader can know the appropriate entry example before entering it.
Before Renovation
If the entry example is displayed as a placeholder, it cannot be checked during entry, and if an error occurs, it is impossible to compare the entered value with the correct example.

After renovation
By displaying it as text instead of a placeholder, you can always check the entry example without being affected by the entry situation. In addition, by entering it before the entry field, even a screen reader can know the appropriate entry example before entering it.

The number of characters that can be entered is known in advance.

Subject: Household Survey Online Survey System (https://www.stat.go.jp/data/kakei/)
Screen captures before and after the improvement. Before the improvement, the upper limit of the number of characters cannot be grasped in advance, and the alert is displayed and an error occurs only after entering characters. After the improvement, the upper limit of the number of characters is displayed in advance, and a counter function has been added so that the user can always check how many characters are currently entered during input.
Before Renovation
The upper limit of the number of characters cannot be grasped in advance. An alert appears and an error occurs only after characters are entered.

After renovation
A counter function has been added so that the upper limit of the number of characters is displayed in advance and the user can always check how many characters are currently entered during input.

Entry conditions are presented in advance to prevent errors from being entered.

Subject: Online Residence Notification (Consular Services Information System) (https://www.ezairyu.mofa.go.jp/RRnet/index.html)
Screen captures before the renovation and after the improvement. Before the improvement, there is no description about the entry conditions. In addition, the contrast Trust ratio between the white characters of
Before Renovation
There is no description of entry conditions. In addition, the contrast Trust ratio between the white characters of "Essential" and the red background color (#DF387B) is 4.2:1, and the contrast Trust required for accessibility has not been secured.

After renovation
Specific entry conditions, such as the maximum number of characters, were indicated. In addition, the background color of the "Mandatory" label was changed to #DC236D, and the ratio of the con Trust to the white character was set to 4.7:1 to ensure the required con Trust.