Thiết kế và trải nghiệm người dùng

Hãy nghĩ về trang web hoặc ứng dụng 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ều gì ở trang web hoặc ứng dụng đó? Cách người dùng tương tác với thiết kế và trải nghiệm của họ trên trang web cũng như ứng dụng của bạn có thể khác nhau.

Trải nghiệm đó có thể thay đổi tuỳ theo thời gian trong ngày, loại thiết bị được sử dụng, nếu họ đã ngủ đủ giấc vào đêm hôm trước, nếu họ không khoẻ, nếu họ đang sử dụng công nghệ hỗ trợ, v.v. Với gần 8 tỷ người trên thế giới, khả năng mọi người sử dụng và trải nghiệm thiết kế của bạn là vô hạn.

Thiết kế hoà nhập

Làm cách nào để chúng ta giải quyết mọi nhu cầu của người dùng tiềm năng cùng một lúc? Nhập nội dung thiết kế hoà nhập. Phương pháp thiết kế hoà nhập sử dụng cách tiếp cận lấy con người làm trung tâm, kết hợp sự hoà nhập, khả năng hữu dụng và khả năng tiếp cận thành một.

Sơ đồ venn trong đó, ở giữa là một thiết kế xoay quanh khả năng hỗ trợ tiếp cận, tính hoà nhập và khả năng hữu dụng.

Và không giống như kiểu thiết kế phổ quát, vốn tập trung vào một kiểu thiết kế mà nhiều người có thể sử dụng nhất có thể, các nguyên tắc thiết kế mang tính hoà nhập 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:

  1. Cung cấp trải nghiệm tương đương: Đảm bảo giao diện của bạn cung cấp trải nghiệm bình đẳng cho tất cả mọi người để mọi người có thể hoàn thành các nhiệm vụ theo cách phù hợp với nhu cầu của họ mà không làm giảm chất lượng của nội dung.
  2. Cân nhắc 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ể họ làm gì.
  3. Đảm bảo tính nhất quán: Sử dụng các quy ước quen thuộc và áp dụng theo cách hợp lý.
  4. Trao 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.
  5. Lựa chọn ưu đãi: Cân nhắc đưa ra nhiều cách để mọi người hoàn thành công việc, đặc biệt là những cách phức tạp hoặc không theo chuẩn.
  6. Ư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 chính bằng cách sắp xếp các thành phần này theo thứ tự ưu tiên bên trong nội dung và bố cục.
  7. Gia tăng giá trị: 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 cá tính người dùng để hướng dẫn họ trong suốt quy trình. Chân dung độc giả là những nhân vật hư cấu sử dụng các 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 độc giả cũng đưa ra một cách nhanh chóng và ít tốn kém để thử nghiệm cũng như ưu tiên các tính năng đó trong suốt quá trình thiết kế và phát triển. Chúng giúp tập trung vào các quyết định liên quan đến các thành phần của trang web bằng cách bổ sung 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 ra mục tiêu tập trung vào những nhóm người dùng cụ thể.

Kết hợp tình trạng khuyết tật

Tình trạng khuyết tật có thể là vĩnh viễn, tạm thời hoặc tình huống. Những khuyết tật này có thể ảnh hưởng đến việc chạm, nhìn, nghe và nói.
The Persona Spectrum từ Bộ công cụ Inclusive 101 của Microsoft.

"Mỗi người đều khác nhau. Tôi chỉ có thể nói từ kinh nghiệm của mình. Khi bạn gặp một người khiếm thính thì tức là bạn đã gặp một người khiếm thính, chứ không phải tất cả chúng ta."

Meryl sống cùng dự án ID24 Deaf Tech: Travel Through Time from Past to Future (Công nghệ khiếm thính: Du hành xuyên thời gian từ quá khứ đến tương lai).

Chân dung độc giả có thể được sử dụng như một công cụ thiết kế dành cho tất cả mọi người khi kết hợp người khuyết tật vào chân dung độc giả. Có nhiều cách để làm việc này. Bạn có thể tạo ra chân dung độc giả đặc thù, thêm khuyết tật vào chân dung người dùng hiện tại hoặc thậm chí tạo ra đặc điểm cá tính để phản ánh thực tế năng động của tình huống khuyết tật, tình trạng khuyết tật tạm thời và vĩnh viễn.

Cho dù bạn kết hợp người khuyết tật vào chân dung độc giả của mình như thế nào, bạn cũng không nên dựa vào con người thật hay định kiến. Chân dung độc giả không bao giờ thay thế cho việc thử nghiệm người dùng.

Đặc điểm của Jane Bennet
Hãy xem ví dụ về chân dung độc giả hỗ trợ các trường hợp sử dụng cụ thể.
Jane Smith cao to với mái tóc dài tối màu, mặc áo sơ mi dài tay màu xám và quần jean
  • Tên: Jane Bennet
  • Tuổi: 57 tuổi
  • Địa điểm: Essex, Vương quốc Anh
  • Nghề nghiệp: Kỹ sư trải nghiệm người dùng
  • Tình trạng khuyết tật: Run tay do bệnh Parkinson khởi phát ở giai đoạn trẻ (YOPD)
  • Mục tiêu: sử dụng tính năng nhập bằng lời nói thành văn bản để giúp thêm các đề xuất mã dễ dàng hơn; tìm thiết bị đạp xe trực tuyến với thao tác nhấn phím tối thiểu.
  • Thất bại: trang web thiếu hỗ trợ chỉ bằng bàn phím; ứng dụng được thiết kế với các khu vực nhỏ cho tương tác chạm.

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 để đảm bảo tính liên quan của trang web của công ty cô. Cô ấy hỗ trợ rất nhiều thành viên trong nhóm suốt cả ngày. Cô là nữ hoàng trong việc dập tắt các đám cháy kỹ thuật và là lời nhắn nhủ của mọi người trong bộ phận khi có sự cố bất ngờ xảy ra.

Việc mất kỹ năng vận động tinh do run rẩy khiến việc sử dụng chuột ngày càng trở nên khó khăn đối với cô. Cô ngày càng dựa vào bàn phím nhiều hơn để lướt web. Jane luôn tận tâm với việc rèn luyện thể chất. Cô ấy yêu thích đua xe đường trường và BMX. Điều này khiến cô bị choáng ngợp hơn bao giờ hết khi được chẩn đoán mắc bệnh Parkinson khởi phát vào năm ngoái.

Công cụ mô phỏng người 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 chân dung độc giả của bạn.

Công cụ mô phỏng tình trạng khuyết tật là một con dao hai lưỡi để thể hiện sự đồng cảm hoặc đồng cảm – tuỳ 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ông thể kiểm soát khác. Nhiều người ủng hộ khả năng hỗ trợ tiếp cận chống đối việc sử dụng các công cụ mô phỏng người 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à các nội dung khác do người khuyết tật tạo ra và trực tiếp tìm hiểu trải nghiệm của họ.

"Tôi nghĩ chúng ta cần phải 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 nhìn thấy hiểu rõ trong tâm trí và tâm trí của họ. Mù không phải là đặc điểm định hình chúng ta, vì sự hiểu lầm và kỳ vọng thấp về những người mù là trở ngại lớn nhất của chúng ta.

Những sự hiểu lầm đó sẽ tạo ra những rào cản giả tạo khiến chúng ta không thể tham gia trọn vẹn. Những giới hạn sai lệch đó cũng dần trở thành rào cản và cản trở chúng ta."

Mark Riccobono, Chủ tịch Liên đoàn Người khiếm thị Quốc gia

Phỏng đoán về hỗ trợ tiếp cận

Hãy cân nhắc việc thêm heuristics vào quy trình làm việc khi bạn xây dựng chân dung độc giả và thiết kế. Heuristics là những quy tắc đơn giản cho thiết kế tương tác, được Jakob Nielsen và Rolf Molich giới thiệu vào năm 1990. 10 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 về khả năng hữu dụng và đã được sử dụng trong các chương trình thiết kế và tương tác của con người với máy tính kể từ đó.

Tua sang năm 2019, nhóm thiết kế của Deque đã tạo và chia sẻ một tập hợp phỏng đoán 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ó tới 67% lỗi hỗ trợ tiếp cận cho 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 quá trình thiết kế. Đó là một tác động to lớn có thể tạo ra ngay cả trước khi viết một dòng mã.

Tương tự như bộ phỏng đoán ban đầu, có 10 phương pháp phỏng đoán về khả năng tiếp cận để xem xét khi lên kế hoạch cho thiết kế của bạn.

  1. Các 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 cách sử dụ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.).
  2. Điều hướng và tìm đường: Người dùng có thể dễ dàng điều hướng, tìm nội dung và xác định vị trí của họ mọi lúc trong hệ thống.
  3. Cấu trúc và ngữ nghĩa: Người dùng có thể hiểu 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.
  4. Ngăn ngừa và trạng thái lỗi: Các chế độ điều khiển tương tác có những hướng dẫn liên tục và hữu ích để tránh lỗi và cung cấp cho người dùng trạng thái lỗi rõ ràng, cho biết vấn đề đó là gì và cách khắc phục bất cứ khi nào lỗi được trả về.
  5. Độ tương phản và mức độ dễ đọ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.
  6. Ngôn ngữ và khả năng đọc: Người dùng có thể dễ dàng đọc và hiểu nội dung.
  7. Khả năng 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 mối liên hệ giữa từng yếu tố với toàn bộ hệ thống.
  8. Thời gian và duy trì: Người dùng có đủ thời gian để hoàn thành tác vụ của mình và không mất thông tin khi hết thời gian (ví dụ: phiên hoạt động).
  9. Di chuyển và nhấp nháy: Người dùng có thể dừng các thành phần trên trang di chuyển, nhấp nháy hoặc tạo ảnh động. Người dùng không được để bị phân tâm hoặc bị các yếu tố này gây hại.
  10. Các phương án thay thế bằng hình ảnh và thính giác: Người dùng có thể truy cập các phương án thay thế dưới dạng văn bản đối với mọi nội dung hình ảnh hoặc thính giác có truyền tải thông tin.

Sau khi nắm được kiến thức cơ bản về các phương pháp phỏng đoán hỗ trợ tiếp cận này, bạn có thể áp dụng phương pháp đó cho một cá tính hoặc một thiết kế bằng cách sử dụng trang tính phỏng đoán 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ẽ sáng suốt hơn khi bạn thu thập nhiều quan điểm.

Sau đây là ví dụ về quy trình đánh giá phương pháp phỏng đoán về khả năng hỗ trợ tiếp cận cho điểm kiểm tra cách điều hướng và tìm đường:

Chốt kiểm tra để đi theo chỉ dẫn và tìm đường Excels (+2 điểm) Thẻ và vé (+1 điểm) Không đạt (-1 điểm) Không áp dụng (0 điểm)
Chỉ báo rõ ràng, dễ thấy có được đặt 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 đề ý nghĩa và có thông tin cụ thể theo trang trước không?
Phần tử tiêu đề trang và H1 có giống hoặc tương tự nhau không?
Có tiêu đề hữu ích cho từng phần chính không?
Mục đích của đường liên kết được xác định chỉ trong văn bản đường liên kết hay trong ngữ cảnh trực tiếp của đường liên kết đó?
Đường liên kết bỏ qua có xuất hiện ở đầu trang và đường liên kết này có xuất hiện ở tiêu điểm không?
Việc sắp xếp các thành phần điều hướng có hỗ trợ việc 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á phương pháp phỏng đoán hỗ trợ tiếp cận, tổng số sẽ được tính toán cho từng điểm kiểm tra. Tại thời điểm này, bạn có thể quyết định cách khắc phục mọi vấn đề phát hiện được hoặc khắc phục mọi thiếu sót quan trọng đối với việc hỗ trợ khả năng tiếp cận kỹ thuật số.

Chú thích hỗ trợ tiếp cận

Trước khi giao 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. Nói chung, chú thích được dùng để giải thích các lựa chọn sáng tạ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 khía cạnh mà nhà phát triển có thể đưa ra các lựa chọn có lập trình dễ tiếp cận hơn với sự hướng dẫn của nhóm thiết kế hoặc chuyên gia tập trung vào tính năng hỗ trợ tiếp cận.

Bạn có thể áp dụng các chú giải hỗ trợ tiếp cận trong mọi giai đoạn của quy trình thiết kế, từ khung dây cho đến bản mô phỏng có độ chân thực cao. Chúng có thể bao gồm luồng người dùng, trạng thái có điều kiện và chức năng. Họ thường sử dụng các ký hiệu và nhãn để đơn giản hoá quy trình và giữ thiết kế làm trọng tâm.

Các ví dụ minh hoạ thiết kế sau đây lấy từ bộ chú thích hỗ trợ tiếp cận của Indeed.com cho Figma.

Hình minh hoạ thiết kế về các thao tác sửa đổi trực quan được dùng cho nhiều trạng thái của nút.
Thiết kế của nút hành động sẽ khác nhau tuỳ theo trạng thái: mặc định, lấy nét, di chuột, đang hoạt động và đã tắt.
Hình minh hoạ thiết kế gồm 3 biểu tượng dùng trên thẻ tin tuyển dụng.
Ba biểu tượng có văn bản thay thế được làm nổi bật. Các biểu tượng "lưu việc làm" và "không quan tâm" đóng vai trò như các nút, do đó văn bản thay thế đóng vai trò quan trọng trong việc giúp người dùng hiểu rõ hành động. Biểu tượng bên cạnh mục "Áp dụng bằng sơ yếu lý lịch trên thực tế" chỉ mang tính chất trang trí, nên không cần văn bản thay thế.
Hình minh hoạ mối quan hệ của nhãn biểu mẫu trong dữ liệu đầu vào liên quan cho tháng và năm.
Bạn có thể liên kết nhiều nhãn dữ liệu đầu vào với mỗi dữ liệu đầu vào để giúp người dùng hiểu được ngữ cảnh.

Tuỳ thuộc vào chương trình thiết kế, bạn nên có nhiều bộ công cụ chú giải hỗ trợ tiếp cận để lựa chọn. Hoặc nếu muốn, bạn có thể tạo nhóm 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 chuyển giao và định dạng nào phù hợp nhất.

Một số khía cạnh cần xem xét đối với chú thích hỗ trợ tiếp cận bao gồm:

  • Màu: bao gồm tỷ lệ tương phản của tất cả các tổ hợp màu khác nhau trong bảng màu.
  • Các nút và đường liên kết: xác định trạng thái mặc định, di chuột, đang hoạt động, tiêu điểm và bị tắt.
  • Skip links (Bỏ qua đường liên kết): làm nổi bật các khía cạnh thiết kế ẩn/hiển thị và nơi chúng liên kết đến trên trang.
  • Hình ảnh và biểu tượng: thêm các đề xuất văn bản thay thế cho các hình ảnh/biểu tượng thiết yếu.
  • Âm thanh và video: đánh dấu các khu vực/đườ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à bao gồm mọi nội dung trông giống như một tiêu đề.
  • 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.
  • Các thành phần tương tác: xác định các phần tử có thể nhấp, hiệu ứng di chuột, khu vực tiêu điểm.
  • Bàn phím: xác định vị trí bắt đầu tiêu điểm (dừng alpha) và thứ tự thẻ sau.
  • 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ợ sẽ nhận dạng phần tử.