# WeChat Design Code for Aging in Elderly Patients

# Fundamental Rules

1. We have summarized the basic rules of age-appropriate design for use in mobile Internet applications (APPs) based on and practical experience.
2. Rules summarized based on practical experience will be marked "(new)."
3. At the same time, we will provide detailed operational guidelines or cases for some of the rules.

# Perception

# Font size

For more information, check the "Guide to Action · Font Size"

1. It is recommended to use non-serif fonts.
2. It is recommended to add a font point size adjustment option (either with the system settings, or with the font point size option inside Mobile App).
3. The text information of the main function and main interface (excluding subtitles, text images, and text related to the effect of the Mobile App function) is not less than 30pt.
4. The main text information in the old version of the interface and the separate old version of the APP is not less than 18pt, taking into account the applicable scene and display effect.

# Line spacing

The text in a paragraph should be at least 1.3 times spaced, and the paragraph spacing should be at least 1.3 times larger than the line spacing, taking into account both the context and the display.

# contrast ratio

For more information, see "Operational Guide · Contrast" In aging design, the contrast between text / text image rendering, icons, etc. is at least 4.5: 1 (the contrast between the text and text image is at a minimum of 3: 1 when the font size is greater than 18pt).

# Color Use

1. Text color is not the only means of distinguishing visual elements as a means of conveying information, indicating actions, prompting responses, etc.
2. [Example] In the case of a user who enters a password incorrectly, you can use text or voice to directly prompt the user to enter the password incorrect, and avoid using color as a prompt only.

# verification code

If there is a non-text verification code in Mobile App (such as puzzle class,Forms of verification that are not easily understood by older persons, such as image-based verification, should be provided with alternative forms of expression that can be accepted by different types of senses (visual, auditory, etc.), such as text or speech, to meet the needs of older person users.

# Operability

# Component Focus Size

For more information, see "Operational Guide · Component Focus Size"

1. The main components in the old interface can be clickable focus area size is not less than 60 × 60 pt, and the main components under other pages can be clickable focus area size is no less than 44 × 44 pt.
2. The size of the main component of the home page can be clickable focus area is not less than 48 × 48 pt, and the size of the main component can be clickable focus area under other pages is not less than 44 × 44 pt.

# Strengthen major operations (new)

For more information, see "Operational Guide · Enhanced Main Operations" The most important operational operations should be adequately enhanced.

# Gesture Manipulation

In Mobile App, a feedback prompt should be provided for the result of the user's gesture navigation or operation;Avoid complex gestures that require 3 or more fingers to complete.

# Simplify operations (new)

For more information, check out the "Guide to Action · Simplify Action"

1. Reduce complex interactions and special effects.
2. You should avoid too many verification processes, such as SMS verification, drag-and-drop image verification.

# Sufficient operational time

In Mobile App, if the time limit is not a necessary part or a key element of the activity and does not result in a legal commitment or financial transaction by the user, sufficient time should be allowed for the user's operation so that the interface does not change until the user has completed the operation.

# Floating window

1. In Mobile App, if the content produces a new window (including but not limited to pop-up windows), set a button that makes it easy for the user to close the window.The close button can only be on the upper left, upper right, and bottom center, and the minimum click response area can not be less than 44 × 44 pt.
2. Flushing windows of the same nature and the same content should not appear repeatedly. (Added)

# Comprehensibility

# Tips mechanisms

For more information, see "Operational Guide · Tips"

1. Easy-to-understand instructions for necessary actions should be provided. (Added)
2. A significant entry point should be provided in the standard version to switch to the age-appropriate version.

# Intuitive expression (new)

For more information, check out "Guide to Action · Visual Expression."

1. It is recommended to provide an interpretative copy for the graphic button.
2. Avoid excessive professionalism, obscurity, and ambiguity in a copy.
3. Appropriate use of monosyllabic vocabulary and composition of rhymes can be made to make a copy more colloquial.Examples include "up-charge charge → charge charge," "query courier → check courier."

# Keep it complete (new)

For more details please see "Guide to Procedure · Keep it Intact" Elements and texts are displayed in full rather than omitted when they are at their maximum.

# Instant feedback (new)

Provides instant feedback patterns for components that need to be operated on in each state. These include: tap, press, disable, etc.

# Safety

# Advertising plug-ins and induced key restrictions

1. Ad plugins are banned. Suitable for the old version of the interface, a separate version of the old version of the APP advertising content and plugins are strictly prohibited, can not randomly appear ads or temporary advertising pop-up.
2. Encourage induced type keys.Mobile App There are no inductive buttons in the program such as inductive download, inductive payment.

# Protect the personal information security of elderly users

1. Mobile App Procedures for personal information processing shall be guided by the principle of least necessity,That is, the processing of personal information should have a clear and reasonable purpose, and should be limited to achieve the purpose of processing the smallest range, not to deal with the purpose of personal information processing, in order to protect the elderly personal information security.
2. The specific act of collecting information (e.g. location information, picture information, etc.) shall be consistent with The Requirements for the Limits of Essential Personal Information for Common Types of Mobile Internet Applications The requirements for minimum essential assessment of the collection and use of personal information by APPs .

# Operational Guide · Instructions

The following will take WeChat "Elder Medical Treatment" as a case, select some of the rules in the "Basic Rules" to elaborate detailed guidelines.

# "The elderly seek medical care."

"Elderly medical treatment" is WeChat developed for the elderly, to solve the daily needs of the elderly to see a doctor function.After the opening of the hospital, patients can directly visit common hospitals, register faster, have a larger font, and have notice of the entire medical procedure.

# Standard vs. Aging

1. "Elderly medical treatment" is designed according to WeChat standard version for aging transformation.
2. As a result, the cases in the operating guide are already designed in a standard version by default, and age-appropriate modifications are made on this basis.

# Operational Guide · Font Size

# Fundamental Rules

1. It is recommended to use non-serif fonts.
2. It is recommended to add a font point size adjustment option (either with the system settings, or with the font point size option inside Mobile App).
3. The text information of the main function and main interface (excluding subtitles, text images, and text related to the effect of the Mobile App function) is not less than 30pt.
4. The main text information in the old version of the interface and the separate old version of the APP is not less than 18pt, taking into account the applicable scene and display effect.

# Standard version of age-appropriate modification

1. If a standard version design is already available, an age-appropriate design can be made according to the standard version
2. The font can be enlarged 1.4 times in accordance with the standard version size.
3. Round off can be used for design purposes.

# Font age-appropriate conversion table

# Operational Guide · Contrast Ratio

Basic rule: In aging design, the contrast between text / text image rendering, icons, etc. is at least 4.5: 1 (the contrast between the text and text image is at a minimum of 3: 1 when the font size is greater than 18pt). If a standard version design is already available, an age-appropriate design can be made according to the standard version:

# Contrast Detection Tool

1. WebAIM's Color Contrast Checker : Can be used to check whether color contrast meets WCAG 2.0 requirements
2. APCA Contrast Calculator : Can be used to check whether color matching complies with WCAG 3.0 (draft)
3. [Guide] The difference between WCAG 2.0 and WCAG 3.0 can be found in WCAG 3 and APCA
4. Whocanuse : Can be used to check whether the contrast is in compliance with WCAG 2.0 requirements, and can also simulate the color seen by visually impaired people
5. Contrast Grid : Can be used to check whether background and text contrast in a design system complies with WCAG 2.0 requirements
6. Stark : Figma plug-in, which can be used to detect design pitch in figma

# Contrast appropriate ageing diagram

# Operational Guide · Component Focus Size

# Fundamental Rules

1. The main components in the old interface can be clickable focus area size is not less than 60 × 60 pt, and the main components under other pages can be clickable focus area size is no less than 44 × 44 pt.
2. The size of the main component of the home page can be clickable focus area is not less than 48 × 48 pt, and the size of the main component can be clickable focus area under other pages is not less than 44 × 44 pt.

# Standard version of age-appropriate modification

1. If a standard version design is already available, an age-appropriate design can be made according to the standard version.
2. When designing a standard version for aging, you can refer to the following methods:

# Button

1. The font and elements in the button are enlarged by 1.4 times, and the upper and lower margins are fixed.
2. The angular size of the circle is kept fixed.

# Notification

# Bar

# Popup Dialog

# Container | Container

# Element

# Heat Zone Settings

# Operational Guide · Enhanced Main Operations

The most important operational operations should be adequately enhanced.

# Operational Guide · Simplifying Operations

1. Reduce complex interactions and special effects.
2. You should avoid too many verification processes, such as SMS verification, drag-and-drop image verification.

# Operational Guide · Tips Mechanism

1. Easy-to-understand instructions for necessary actions should be provided. (Added)
2. A significant entry point should be provided in the standard version to switch to the age-appropriate version.

# Operational Guide · intuitive expression

1. It is recommended to provide an interpretative copy for the graphic button.
2. Avoid excessive professionalism, obscurity, and ambiguity in a copy.
3. Appropriate use of monosyllabic vocabulary and composition of rhymes can be made to make a copy more colloquial.Examples include "up-charge charge → charge charge," "query courier → check courier."

# Operational Guide · Keep it intact

Elements and texts are displayed in full rather than omitted when they are at their maximum.

# Case showing · An elderly patient

The following examples of "elderly doctors" are presented in full as a reference for age-appropriate design.The page marked as "WeChat official page" does not need to be designed separately by the hospital.

# Reference material

# Government documents

1. Notice by the Executive Office of the Ministry of Industry and Information Technology on further enhancing the implementation of the special initiative on the ageing and accessibility of Internet applications
2. Notice by the Ministry of Industry and Information Technology on the issuance of a special action plan for the age-appropriate and accessibility improvement of Internet applications
3. The General Office of the State Council issues a notice on implementing a plan to effectively address the difficulties of elderly people in using intelligent technology

# Industry specifications

1. Web Content Accessibility Guidelines (WCAG) 2.0
2. Web Content Accessibility Guidelines (WCAG) 2.2
3. [Working Draft] W3C Accessibility Guidelines (WCAG) 3.0
4. [\ [Chinese version] Web Content Accessibility Guidelines\ (WCAG) 2.0] (https://www.w3.org/Translations/WCAG20-zh/)
5. General Design Specification for Aging Adaptation of Mobile Internet Applications (APP)
6. National standard GB / T 37668-2019 "Technical requirements and test methods for content accessibility of information technology internetworking"

# Corporate specifications

1. Apple - Human Interface Guidelines - Accessibility
2. Apple - Accessibility for Developers
3. Apple - Videos - Accessibility & Inclusion
4. Material Design - Accessibility
5. Android - Build accessible apps
6. Starting Android Accessibility
7. Microsoft Inclusive Design
8. IBM Accessibility

# tool

1. WebAIM's Color Contrast Checker : Can be used to check whether color contrast meets WCAG 2.0 requirements
2. APCA Contrast Calculator : Can be used to check whether color matching complies with WCAG 3.0 (draft)
3. [Guide] The difference between WCAG 2.0 and WCAG 3.0 can be found in WCAG 3 and APCA
4. Whocanuse : Can be used to check whether the contrast is in compliance with WCAG 2.0 requirements, and can also simulate the color seen by visually impaired people
5. Contrast Grid : Can be used to check whether background and text contrast in a design system complies with WCAG 2.0 requirements
6. Stark : Figma plug-in, which can be used to detect design pitch in figma
7. Android Accessibility Suite : Contains a collection of accessibility apps that allow users to use their Android devices without using their eyes or just switching devices
8. The a11yproject Checklist : Checklist provided by a11yproject to check that the design meets accessibility requirements
9. W3C Checklist : A checklist provided by the W3C to check whether a design meets accessibility requirements
10. Axe DevTools : Chrome plugin for assessing web products for accessibility
11. WAVE Evaluation tool : Chrome plug-in for evaluating web products for accessibility
12. VIZ PALETTE : A grading report on the color scheme can be formed to assess the difference of different colors in different areas

# Extended reading "

WeChat, Zhifubao and other 43 APP will be adapted to aging and barrier-free transformation, how to evaluate this move?What social significance does it have? Hu Yong: Why should we focus on "digital abandonment" today? UX Coffee Design Coffee - The Blind Alley in Networking Accessibility Design Group - Accessibility Knowledge Base Don't let the elderly machines. Only big fonts. A 2021 compilation of accessible information accessibility cases 2022 Compilation of Accessible Information Accessibility Cases Screen Recognition: Creating Accessibility Metadata for Mobile Applications from Pixels How to make charts and graphs more accessible Designing for accessibility is not that hard Designing For Accessibility And Inclusion

# < WeChat Acceptance List for Aging Design Code for Elderly Medical Treatment

Based on this list, the designer may accept whether the product design meets the basic criteria for ageing appropriateness.

# Perception

• [] Use a sans serif font
• [] All text sizes are not less than 14pt.
• [] Text (main information) font size not less than 20pt.
• [ ] Line spacing should not be less than 1.3 times.
• [ ] Segment intervals are greater than 1.3 times.
• [] At least 4.5: 1 (text and text image at least 3: 1 for font sizes greater than 18 pt).
  • WebAIM's Color Contrast Checker*

# Comprehensibility

• [] Provide interpretation text for the icon.For more details, please see "Practice Guide · Intuitive Expression"
• [] Text and components beyond the extreme remain displayed intact.For more information, please refer to "Practice Guide · Keeping Integrity"

# Operability

• [] Component clickable focus area size not less than 44 x 44 pt.
• [] The buttons for the main process are visible on the first screen.For more details, please see "Practice Guide · Strengthening Key Operations"
• [] There are no continuous and repeated verification processes (text message verification, picture drag verification, etc.).