Hãy nghĩ về trang web hoặc ứng dụng mà bạn yêu thích. Điều gì khiến bạn yêu thích trang web hoặc ứng dụng đó? Bây giờ, hãy nghĩ về một trang web hoặc ứng dụng mà bạn không thích. Bạn không thích điểm nào ở tính năng này? Cách người dùng tương tác với thiết kế của bạn và trải nghiệm của họ trên trang web và ứng dụng của bạn có thể khác nhau.
Trải nghiệm đó có thể thay đổi tuỳ thuộc vào thời gian trong ngày, loại thiết bị được sử dụng, việc họ có ngủ đủ giấc vào đêm hôm trước hay không, việc họ có khoẻ mạnh hay không, việc họ có đang sử dụng công nghệ hỗ trợ hay không, v.v. Với gần 8 tỷ người trên toàn thế giới, khả năng mọi người sử dụng và trải nghiệm các thiết kế của bạn là vô hạn.
Thiết kế bao trùm
Làm cách nào để chúng ta có thể đáp ứng tất cả các nhu cầu tiềm năng của người dùng cùng một lúc? Nhập thiết kế bao trùm. Thiết kế bao trùm sử dụng phương pháp lấy con người làm trung tâm, kết hợp tính bao trùm, khả năng sử dụng và khả năng hỗ trợ tiếp cận thành một.
Không giống như thiết kế phổ quát (tập trung vào một thiết kế duy nhất mà càng nhiều người có thể sử dụng càng tốt), các nguyên tắc thiết kế toàn diện tập trung vào việc thiết kế cho một cá nhân hoặc trường hợp sử dụng cụ thể, sau đó mở rộng thiết kế đó cho những người khác.
Có 7 nguyên tắc thiết kế toàn diện tập trung vào khả năng hỗ trợ tiếp cận:
- Mang đến trải nghiệm tương đương: Đảm bảo giao diện của bạn mang đến trải nghiệm tương đương cho tất cả mọi người, để họ có thể hoàn thành các tác vụ theo cách phù hợp với nhu cầu của mình mà không làm giảm chất lượng nội dung.
- Xem xét tình huống: Đảm bảo giao diện của bạn mang lại trải nghiệm có giá trị cho mọi người, bất kể hoàn cảnh của họ.
- Tính nhất quán: Sử dụng các quy ước quen thuộc và áp dụng chúng một cách hợp lý.
- Cấp quyền kiểm soát: Đảm bảo mọi người có thể truy cập và tương tác với nội dung theo cách họ muốn.
- Đưa ra lựa chọn: Cân nhắc cung cấp nhiều cách để mọi người hoàn thành các tác vụ, đặc biệt là những tác vụ phức tạp hoặc không theo tiêu chuẩn.
- Ưu tiên nội dung: Giúp người dùng tập trung vào các tác vụ, tính năng và thông tin cốt lõi bằng cách sắp xếp những thành phần này theo thứ tự ưu tiên trong nội dung và bố cục.
- Thêm giá trị: Hãy xem xét mục đích và ý nghĩa của các tính năng cũng như cách chúng cải thiện trải nghiệm cho nhiều người dùng.
Cá tính
Khi phát triển một thiết kế hoặc tính năng mới, nhiều nhóm dựa vào chân dung người dùng để hướng dẫn họ trong suốt quá trình này. Nhân cách là những nhân vật hư cấu sử dụng sản phẩm kỹ thuật số của bạn, thường dựa trên nghiên cứu định lượng và định tính về người dùng.
Chân dung người dùng cũng là một cách nhanh chóng và tiết kiệm chi phí để kiểm thử và ưu tiên những tính năng đó trong suốt quá trình thiết kế và phát triển. Các chỉ số này giúp tập trung vào các quyết định liên quan đến thành phần trang web bằng cách thêm một lớp cân nhắc thực tế vào cuộc trò chuyện để giúp điều chỉnh chiến lược và tạo các mục tiêu tập trung vào các nhóm người dùng cụ thể.
Kết hợp các khuyết tật
"Mỗi người đều có những điểm khác biệt. Tôi chỉ có thể nói dựa trên kinh nghiệm của mình. Khi bạn gặp một người Điếc, thì bạn chỉ gặp một người Điếc chứ không phải tất cả chúng tôi."
Meryl Evans trong buổi nói chuyện tại ID24 Công nghệ cho người khiếm thính: Du hành xuyên thời gian từ quá khứ đến tương lai.
Bạn có thể sử dụng chân dung người dùng làm công cụ thiết kế toàn diện khi đưa người khuyết tật vào chân dung người dùng của mình. Có nhiều cách để thực hiện việc này. Bạn có thể tạo các chân dung người dùng dành riêng cho người khuyết tật, thêm khuyết tật vào chân dung người dùng hiện có hoặc thậm chí tạo một phổ chân dung người dùng để phản ánh thực tế năng động của các khuyết tật theo tình huống, tạm thời và vĩnh viễn.
Dù bạn đưa người khuyết tật vào nhân vật đại diện của mình theo cách nào, thì nhân vật đó không được dựa trên người thật hoặc khuôn mẫu. Và chân dung người dùng không bao giờ thay thế được việc kiểm thử người dùng.
- Tên: Jane Bennet
- Độ tuổi: 57 tuổi
- Vị trí: Essex, Vương quốc Anh
- Nghề nghiệp: Kỹ sư trải nghiệm người dùng
- Khuyết tật: Run tay do bệnh Parkinson khởi phát sớm (YOPD)
- Mục tiêu: sử dụng tính năng nhập liệu bằng giọng nói để dễ dàng thêm các đề xuất về mã; tìm thiết bị đạp xe trực tuyến mà không cần nhập nhiều.
- Khó chịu: trang web thiếu tính năng chỉ hỗ trợ bàn phím; ứng dụng thiết kế có các vùng nhỏ để tương tác bằng cảm ứng.
Là một kỹ sư trải nghiệm người dùng, Jane thiết kế và xây dựng các trang quan trọng để duy trì mức độ phù hợp của trang web công ty. Cô ấy hỗ trợ rất nhiều thành viên trong nhóm suốt cả ngày. Cô ấy là người có khả năng giải quyết các vấn đề kỹ thuật một cách nhanh chóng và là người mà mọi người trong bộ phận tìm đến khi có sự cố bất ngờ.
Việc mất khả năng vận động tinh do chứng run tay khiến cô ngày càng khó sử dụng chuột. Cô ấy ngày càng phụ thuộc vào bàn phím để duyệt web. Jane luôn tận tâm với việc tập luyện thể chất. Cô ấy thích đua xe đường trường và đua xe đạp địa hình. Điều này càng khiến cô suy sụp hơn khi được chẩn đoán mắc bệnh Parkinson khởi phát sớm vào năm ngoái.
Ứng dụng mô phỏng tình trạng khuyết tật
Hãy hết sức thận trọng khi sử dụng trình mô phỏng khuyết tật để mô phỏng hoặc bổ sung cho các nhân vật đại diện của bạn.
Trình mô phỏng khuyết tật là con dao hai lưỡi vì chúng có thể tạo ra sự cảm thông hoặc đồng cảm – điều này có thể phụ thuộc vào từng cá nhân, bối cảnh sử dụng trình mô phỏng và nhiều yếu tố khác không kiểm soát được. Nhiều người ủng hộ khả năng hỗ trợ tiếp cận không ủng hộ việc sử dụng các công cụ mô phỏng khuyết tật và khuyên bạn nên tìm kiếm phim, bản minh hoạ, hướng dẫn và nội dung khác do người khuyết tật tạo ra, đồng thời tìm hiểu trực tiếp về trải nghiệm của họ.
"Tôi nghĩ chúng ta cần hoàn toàn trung thực rằng mọi hoạt động mô phỏng đều không ảnh hưởng đến một số hiểu biết quan trọng nhất mà chúng ta muốn người có thị lực biết trong tâm trí và trái tim của họ. Khiếm thị không phải là đặc điểm định nghĩa chúng ta, mà những hiểu lầm và kỳ vọng thấp về khiếm thị mới là trở ngại lớn nhất của chúng ta.
Những hiểu lầm đó tạo ra các rào cản nhân tạo khiến chúng ta không thể tham gia đầy đủ, và những hạn chế sai lầm đó sẽ tích tụ thành thứ kìm hãm chúng ta."
Mark Riccobono, Chủ tịch Liên đoàn Quốc gia dành cho người mù.
Heuristic hỗ trợ tiếp cận
Hãy cân nhắc việc thêm phương pháp suy nghiệm vào quy trình làm việc khi bạn xây dựng các chân dung người dùng và thiết kế. Heuristics là các quy tắc về thiết kế tương tác, được Jakob Nielsen và Rolf Molich giới thiệu vào năm 1990. Mười nguyên tắc này được phát triển dựa trên nhiều năm kinh nghiệm trong lĩnh vực kỹ thuật khả năng sử dụng và đã được sử dụng trong các chương trình thiết kế và tương tác giữa người và máy tính kể từ đó.
Năm 2019, nhóm thiết kế tại Deque đã tạo và chia sẻ một bộ phương pháp suy nghiệm mới tập trung vào khả năng hỗ trợ tiếp cận kỹ thuật số. Theo nghiên cứu của họ, có đến 67% lỗi về khả năng tiếp cận của một trang web hoặc ứng dụng có thể tránh được khi khả năng tiếp cận là một phần của quy trình thiết kế. Đó là một tác động lớn có thể xảy ra ngay cả trước khi bạn viết một dòng mã.
Tương tự như bộ nguyên tắc kinh nghiệm ban đầu, có 10 nguyên tắc kinh nghiệm về khả năng tiếp cận cần cân nhắc khi lên kế hoạch thiết kế.
- Phương thức và phương thức tương tác: Người dùng có thể tương tác hiệu quả với hệ thống bằng phương thức nhập mà họ chọn (chẳng hạn như chuột, bàn phím, thao tác chạm, v.v.).
- Điều hướng và tìm đường: Người dùng có thể điều hướng, tìm nội dung và xác định vị trí của mình trong hệ thống bất cứ lúc nào.
- Cấu trúc và ngữ nghĩa: Người dùng có thể hiểu được cấu trúc của nội dung trên mỗi trang và hiểu cách hoạt động trong hệ thống.
- Ngăn chặn lỗi và trạng thái: Các chế độ kiểm soát tương tác có hướng dẫn nhất quán và có ý nghĩa để giúp ngăn chặn lỗi, đồng thời cung cấp cho người dùng các trạng thái lỗi rõ ràng cho biết vấn đề là gì và cách khắc phục khi lỗi được trả về.
- Độ tương phản và khả năng đọc: Người dùng có thể dễ dàng phân biệt và đọc văn bản cũng như các thông tin có ý nghĩa khác.
- Ngôn ngữ và mức độ dễ đọc: Người dùng có thể dễ dàng đọc và hiểu nội dung.
- Tính dự đoán và tính nhất quán: Người dùng có thể dự đoán mục đích của từng phần tử. Rõ ràng là mỗi phần tử đều liên quan đến toàn bộ hệ thống.
- Thời gian và khả năng lưu giữ: Người dùng có đủ thời gian để hoàn thành các tác vụ và không bị mất thông tin nếu hết thời gian (tức là hết phiên).
- Chuyển động và nhấp nháy: Người dùng có thể dừng các phần tử chuyển động, nhấp nháy hoặc có ảnh động trên trang. Người dùng không được bị phân tâm hoặc chịu ảnh hưởng tiêu cực khác do những phần tử này gây ra.
- Nội dung thay thế bằng hình ảnh và âm thanh: Người dùng có thể truy cập vào nội dung thay thế bằng văn bản cho mọi nội dung hình ảnh hoặc âm thanh truyền tải thông tin.
Sau khi hiểu rõ các phương pháp phỏng đoán cơ bản về khả năng hỗ trợ tiếp cận, bạn có thể áp dụng phương pháp này cho một nhân vật hoặc thiết kế bằng cách sử dụng bảng tính phương pháp phỏng đoán về khả năng hỗ trợ tiếp cận và làm theo hướng dẫn được cung cấp. Bài tập này sẽ hữu ích hơn khi bạn thu thập nhiều quan điểm.
Ví dụ về quy trình đánh giá theo kinh nghiệm tiếp cận cho điểm kiểm tra điều hướng và chỉ đường có thể như sau:
| Điểm đánh dấu để điều hướng và tìm đường | Xuất sắc (+2 điểm) | Thẻ và vé (+1 điểm) | Không thành công (-1 điểm) | Không áp dụng (0 điểm) |
|---|---|---|---|---|
| Có đặt một chỉ báo rõ ràng, dễ thấy trên tất cả các phần tử đang hoạt động khi chúng nhận được tiêu điểm không? | ||||
| Trang có văn bản tiêu đề có ý nghĩa, trong đó thông tin cụ thể về trang xuất hiện trước không? | ||||
| Phần tử tiêu đề trang và H1 có giống nhau hoặc tương tự nhau không? | ||||
| Có tiêu đề phù hợp cho từng phần chính không? | ||||
| Mục đích của đường liên kết được xác định chỉ dựa vào văn bản liên kết hay bối cảnh ngay lập tức của đường liên kết? | ||||
| Có đường liên kết bỏ qua ở ngay đầu trang và đường liên kết đó có xuất hiện khi người dùng di chuyển tiêu điểm đến không? | ||||
| Việc sắp xếp các phần tử điều hướng có giúp người dùng tìm đường không? |
Sau khi mọi người trong nhóm xem xét trang hoặc thành phần và tiến hành đánh giá theo kinh nghiệm về khả năng tiếp cận, tổng số điểm sẽ được tính cho từng điểm kiểm tra. Lúc này, bạn có thể quyết định cách khắc phục mọi vấn đề đã phát hiện hoặc sửa mọi lỗi thiếu sót quan trọng để hỗ trợ khả năng tiếp cận kỹ thuật số.
Chú giải hỗ trợ tiếp cận
Trước khi bàn giao bản thiết kế cho nhóm phát triển, bạn nên cân nhắc việc thêm chú thích hỗ trợ tiếp cận.
Nhìn chung, chú thích được dùng để giải thích các lựa chọn về mẫu quảng cáo và mô tả các khía cạnh khác nhau của thiết kế. Chú thích hỗ trợ tiếp cận tập trung vào những khu vực mà nhà phát triển có thể đưa ra các lựa chọn lập trình dễ tiếp cận hơn theo hướng dẫn của nhóm thiết kế hoặc chuyên gia tập trung vào khả năng hỗ trợ tiếp cận.
Bạn có thể áp dụng chú thích hỗ trợ tiếp cận trong mọi giai đoạn của quy trình thiết kế, từ khung sườn đến bản mô phỏng có độ chân thực cao. Chúng có thể bao gồm các luồng người dùng, trạng thái có điều kiện và chức năng. Họ thường dùng các biểu tượng và nhãn để đơn giản hoá quy trình và giữ cho thiết kế là trọng tâm chính.
Các ví dụ minh hoạ thiết kế sau đây là từ bộ chú giải hỗ trợ tiếp cận của Indeed.com cho Figma.
Tuỳ thuộc vào chương trình thiết kế của bạn, bạn sẽ có nhiều bộ công cụ chú thích hỗ trợ tiếp cận để lựa chọn. Hoặc nếu muốn, bạn có thể tạo bộ câu hỏi của riêng mình. Trong cả hai trường hợp, bạn nên quyết định thông tin nào cần được truyền đạt cho nhóm bàn giao và định dạng nào phù hợp nhất.
Sau đây là một số khía cạnh cần cân nhắc khi thêm chú thích hỗ trợ tiếp cận:
- Màu sắc: bao gồm tỷ lệ tương phản của tất cả các tổ hợp màu trong bảng màu.
- Nút và đường liên kết: xác định các trạng thái mặc định, di chuột, đang hoạt động, tiêu điểm và bị vô hiệu hoá.
- Đường liên kết bỏ qua: làm nổi bật các khía cạnh thiết kế ẩn và hiển thị cũng như vị trí liên kết của các khía cạnh đó trên trang.
- Hình ảnh và biểu tượng: thêm đề xuất về văn bản thay thế cho những hình ảnh và biểu tượng quan trọng.
- Âm thanh và video: làm nổi bật các vùng và đường liên kết cho phụ đề, bản chép lời và nội dung mô tả bằng âm thanh.
- Tiêu đề: thêm các cấp có lập trình và đưa vào mọi thứ trông giống như tiêu đề.
- Điểm mốc: làm nổi bật các phần khác nhau của thiết kế bằng HTML hoặc ARIA.
- Thành phần tương tác: xác định các phần tử có thể nhấp vào, hiệu ứng di chuột, vùng lấy nét.
- Bàn phím: xác định vị trí bắt đầu tiêu điểm (dừng alpha) và thứ tự thẻ sau đây.
- Biểu mẫu: thêm nhãn trường, văn bản trợ giúp, thông báo lỗi và thông báo thành công.
- Tên hỗ trợ tiếp cận: xác định cách công nghệ hỗ trợ nhận dạng phần tử.