[Document] Nguyên tắc thiết kế - Design principles

(English below)

Dễ tiếp cận

Chúng tôi hướng tới việc xây dựng các sản phẩm toàn diện bằng cách xem xét bất kỳ nhu cầu đặc biệt nào của người dùng (rối loạn sắc giác, chứng khó đọc, v.v.) hoặc bất kỳ môi trường nào mà người dùng có thể sử dụng sản phẩm của chúng tôi.

Chúng tôi tuân theo các yêu cầu của Web Content Accessibility Guidelines (WCAG):

1. Cung cấp đủ độ tương phản giữa các yếu tố trong giao diện

Văn bản cần có đủ độ tương phản với màu nền. Điều này bao gồm văn bản trên hình ảnh, độ đổ màu, nút và các yếu tố khác. Điều này không áp dụng cho biểu trưng hoặc văn bản ngẫu nhiên, chẳng hạn như văn bản tình cờ có trong một bức ảnh.

2. Không chỉ sử dụng màu sắc để truyền tải thông tin

Mặc dù màu sắc có thể hữu ích để truyền tải thông tin, nhưng màu sắc không nên là cách duy nhất để truyền tải thông tin. Khi sử dụng màu sắc để phân biệt các yếu tố, hãy cung cấp thêm thông tin nhận dạng không dựa vào cảm nhận màu sắc.

3. Đảm bảo rằng các yếu tố tương tác dễ xác định

Cung cấp các kiểu riêng biệt cho các phần tử tương tác, chẳng hạn như liên kết và nút, để giúp chúng dễ dàng xác định. Ví dụ: thay đổi giao diện của các liên kết khi sử dụng ô nhập dữ liệu, hoặc các nút hành động. Đảm bảo rằng kiểu và đặt tên cho các phần tử tương tác được sử dụng nhất quán trong toàn bộ ứng dụng.

4. Cung cấp các tùy chọn điều hướng rõ ràng và nhất quán

Đảm bảo rằng điều hướng trên các màn hình trong ứng dụng có cách đặt tên, kiểu và định vị nhất quán. Giúp người dùng hiểu họ đang ở đâu trong ứng dụng hoặc màn hình bằng cách cung cấp các dấu hiệu định hướng, chẳng hạn như đường dẫn và tiêu đề rõ ràng.

Đọc thêm về thanh điều hướng của Tini tại đây.

5. Đảm bảo rằng các phần tử biểu mẫu bao gồm các nhãn được liên kết rõ ràng

Đảm bảo rằng tất cả các trường đều có nhãn mô tả liền kề với trường. Đối với các ngôn ngữ từ trái sang phải, các nhãn thường được đặt ở bên trái hoặc phía trên trường, ngoại trừ các hộp kiểm và nút radio nơi chúng thường ở bên phải. Tránh có quá nhiều khoảng cách giữa các nhãn và trường.

6. Cung cấp phản hồi dễ dàng nhận biết

Cung cấp phản hồi cho các tương tác, chẳng hạn như xác nhận việc gửi biểu mẫu, cảnh báo người dùng khi có sự cố hoặc thông báo cho người dùng về các thay đổi trên màn hình. Hướng dẫn phải dễ dàng xác định. Phản hồi quan trọng yêu cầu hành động của người dùng phải được trình bày theo phong cách nổi bật.

7. Sử dụng tiêu đề và khoảng cách để nhóm nội các dung liên quan

Sử dụng khoảng trắng và khoảng cách để làm cho mối quan hệ giữa các nội dung rõ ràng hơn. Tạo kiểu các tiêu đề để nhóm nội dung, giảm sự lộn xộn và giúp bạn dễ dàng quét và hiểu hơn.


Minh bạch

Dễ hiểu

Vài giây đầu tiên khi vào một Tini App là thời điểm quan trọng nhất của chúng ta để giúp người dùng hiểu các chức năng của ứng dụng và cách tương tác với nó. Mỗi màn hình cần phải được trình bày một cách rõ ràng, sử dụng ngôn ngữ đơn giản, dễ hiểu, theo thứ tự để tránh bất kỳ sự nhầm lẫn tiềm ẩn nào mà người dùng ở mọi lứa tuổi và trình độ học vấn có thể gặp phải.

Điều hướng rõ ràng

Tini Apps là một khái niệm mới đối với người dùng Việt Nam, họ có thể chưa quen với việc điều hướng mới của ứng dụng. Để giúp người dùng cảm nhận trực quan vị trí của họ trong quy trình làm việc, độ sâu điều hướng tối đa được đề xuất là ba cấp. Trong trường hợp có nhiều hơn ba cấp, hãy cân nhắc sử dụng thanh menu dưới màn hình hoặc thanh tiến trình để bật điều hướng ngang giữa các phần của bạn. Bạn có thể đọc thêm về các quy định điều hướng tại đây


Tập trung

Tập trung vào tác vụ

Theo nguyên tắc chung, hãy cố gắng tránh xa bất kỳ thứ gì yêu cầu người dùng phải nhớ để quay lại ứng dụng của bạn để hoàn thành nhiệm vụ, rất có thể họ sẽ không làm vậy. Khi người dùng đang trong luồng hoàn thành tác vụ nào đó, hãy giúp họ hoàn thành trong khoảng thời gian ngắn nhất có thể bằng cách loại bỏ các yếu tố gây mất tập trung (ví dụ: những tác vụ phụ khác) trên màn hình đó.

Xuyên suốt một màn hình

Giải quyết hầu hết các vấn đề trên cùng một màn hình và tránh dẫn người dùng đến một màn hình mới nếu không cần thiết, bởi vì việc làm mới và chuyển tiếp có thể khiến người dùng cảm thấy không chắc chắn về bước tiếp theo, và làm gián đoạn dòng suy nghĩ cũng như cảm xúc của người dùng.


Năng lượng tích cực

Tạo hứng thú

Khi người dùng nhận được thông báo tiêu cực (từ chối quyền truy cập, thông báo lỗi, v.v.), hãy gửi thông báo theo cách phù hợp để giảm thiểu tiêu cực nhiều nhất có thể, bằng cách xem xét cẩn thận ngôn ngữ, màu sắc, hình minh họa thích hợp có thể được sử dụng trong thông báo.

Nguyên tắc này nên được áp dụng triệt để trong ngôn ngữ, hình ảnh, minh họa, v.v. của ứng dụng.

Tăng cảm giác tích cực

Cân nhắc tạo các chi tiết nhỏ mang tính tích cực để khuyến khích người dùng tiếp tục tác vụ hoặc cung cấp phản hồi trực quan trong quá trình tương tác. Điều này bao gồm nhưng không giới hạn việc sử dụng ngôn ngữ, hình ảnh, minh họa, hiệu ứng, âm thanh, biểu tượng, màu sắc, v.v.


Accessible

We aim to build inclusive products by considering any special needs of our users (color blindness, dyslexia, financial difficulty, transportation limitations, etc.) or any environments in which our users might use our products.

We follow the Web Content Accessibility Guidelines (WCAG) requirements:

1. Provide sufficient contrast between foreground and background

The foreground text needs to have sufficient contrast with the background colors. This includes text on images, background gradients, buttons, and other elements.

2. Don’t use color alone to convey information

While color can help convey information, color should not be the only way information is obtained. Using color to differentiate elements also provides additional identification that does not rely on color perception.

3. Ensure that interactive elements are easy to identify

Provide distinct styles for interactive elements, such as links and buttons, to make them easy to locate. For example, change the appearance of the input focus or hover the button. Ensure that styles and naming for interactive elements are used consistently throughout the app.

4. Provide clear and consistent navigation options

Ensure that navigation across screens within an app has consistent naming, styling, and positioning. Help users understand where they are in an app or screen by providing orientation cues, such as clear headings.

Read more detail about the Tini navigation bar here.

5. Ensure that form elements include associated labels

Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons, where they are generally to the right. Avoid having too much space between labels and fields.

6. Provide easily identifiable feedback

Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the screen. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.

7. Use headings and spacing to group related content

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter and make it easier to scan and understand.


Transparency

Instant understanding

The first few seconds of entering a Tini App are the most important moment for us to help users understand its functionalities and how to interact with it, and each screen should have a clear presentation using simple, easy-to-understand language in order to avoid any potential confusion users of any ages and educational background might experience.

Make navigation self-evident

Tini Apps are a new concept for Vietnamese users; they may not be familiar with the navigation. The recommended maximum navigation depth is three levels to help users intuitively feel where they are in the workflow. In case of more than three levels, consider leveraging the bottom menu or progress bar to enable horizontal navigation between your sections. You can read more about the navigation guideline here


Clear focus

Focus on the task

As a general rule, try to avoid anything requiring users to remember to go back to your Tini App to complete tasks. They most likely won’t. Once the user has entered a “complete-the-task” flow, help them finish the job within the shortest time possible by removing other potential distractions on-screen.

Stay on the screen

Solve most of the problems on the same screen and avoid leading users to a new one if not necessary because the page refresh and forwarding can make users feel uncertain about the next step, in addition to disrupting the user’s mental flow.


Positive vibe

Generate excitement

When a user receives a negative message (deny access, error messages, etc.), deliver the news in a tailored way that will minimize the negativity as much as possible by carefully considering the appropriate language, colors, and illustrations used in the message.

This principle should be applied thoroughly in the app’s language, images, illustrations, etc.

Positive reinforcement

Consider creating micro-actions to encourage users to continue with the flow or provide visual feedback during an interaction. This includes but is not limited to language, images, illustrations, animation, sound, icons, colors, etc.

2 Likes