Trang này cung cấp nguyên tắc thiết kế về cách tạo trải nghiệm người dùng chất lượng cao trên mạng chậm và khi không có mạng.
Chất lượng kết nối mạng có thể chịu ảnh hưởng của một số yếu tố, chẳng hạn như:
- Phạm vi phủ sóng của nhà cung cấp mạng kém.
- Điều kiện thời tiết khắc nghiệt.
- Mất điện.
- Bước vào "vùng chết" vĩnh viễn, chẳng hạn như trong những toà nhà có tường chặn kết nối mạng.
- Bước vào "vùng chết" tạm thời, chẳng hạn như khi di chuyển trên tàu và đi qua đường hầm.
- Kết nối Internet đóng hộp thời gian, giống như kết nối ở sân bay hoặc khách sạn.
- Các hoạt động về văn hoá yêu cầu quyền truy cập hạn chế hoặc không có quyền truy cập Internet vào những thời điểm cụ thể hoặc vào những ngày cụ thể.
Là nhà phát triển, mục tiêu của bạn là mang đến trải nghiệm tốt làm giảm tác động của những thay đổi về khả năng kết nối.
Quyết định nội dung sẽ hiển thị cho người dùng khi kết nối mạng của họ kém
Câu hỏi đầu tiên cần đặt ra là kết nối mạng thành công và không thành công sẽ như thế nào đối với ứng dụng của bạn. Kết nối thành công là trải nghiệm trực tuyến thông thường của ứng dụng. Lỗi kết nối bao gồm cả cách ứng dụng của bạn hoạt động khi không có mạng và trên mạng chậm.
Để xác định cách xử lý lỗi kết nối, hãy tự hỏi những câu hỏi quan trọng về trải nghiệm người dùng sau đây:
- Bạn đợi bao lâu để xác định kết nối thành công hay thất bại?
- Bạn có thể làm gì khi thành công hay thất bại đang được xác định?
- Bạn nên làm gì nếu không kết nối được?
- Bạn làm cách nào để cho người dùng biết điều gì đang diễn ra?
Thông báo cho người dùng về trạng thái hiện tại và sự thay đổi trạng thái của họ
Thông báo cho người dùng biết cả trạng thái của ứng dụng và những hành động mà họ vẫn có thể thực hiện khi gặp lỗi mạng. Ví dụ: một thông báo có thể có nội dung như sau:
Có vẻ như kết nối mạng của bạn kém. Bạn không phải lo lắng! Tin nhắn sẽ được gửi khi mạng được khôi phục.
Thông báo cho người dùng khi kết nối mạng được cải thiện hoặc được khôi phục
Cách bạn cho người dùng biết kết nối mạng của họ đã cải thiện như thế nào tuỳ thuộc vào ứng dụng của bạn. Các ứng dụng ưu tiên thông tin hiện tại, chẳng hạn như công cụ theo dõi thời tiết hoặc thị trường chứng khoán, phải tự động cập nhật và cho người dùng biết càng sớm càng tốt.
Bạn nên thông báo cho người dùng biết ứng dụng web của mình đã cập nhật "ở chế độ nền" bằng cách sử dụng một chỉ dẫn hình ảnh như phần tử thông báo ngắn Material Design. Điều này giúp phát hiện cả sự hiện diện của trình chạy dịch vụ lẫn bản cập nhật cho nội dung được quản lý của trình chạy dịch vụ đó. Bạn có thể xem mã ví dụ về hàm này hoạt động tại đây.
Một ví dụ cho vấn đề này là Trạng thái của Nền tảng Chrome. Theo đó, hãy đăng ghi chú cho người dùng khi ứng dụng được cập nhật.
Một số ứng dụng luôn có thể cho thấy thời điểm cập nhật gần đây nhất. Ví dụ: đối tượng này đặc biệt hữu ích với các ứng dụng quy đổi tiền tệ.
Ứng dụng tin tức có thể hiển thị thông báo nhấn để cập nhật đơn giản để cho người dùng biết về nội dung mới. Việc tự động cập nhật bài viết sẽ khiến người dùng bị mất vị trí của họ.
Cập nhật giao diện người dùng để phản ánh trạng thái theo ngữ cảnh hiện tại
Mỗi thành phần trên giao diện người dùng có thể có ngữ cảnh và hành vi riêng và thay đổi tuỳ thuộc vào việc kết nối thành công có cần thiết hay không. Ví dụ: trang web thương mại điện tử có thể duyệt xem khi không có mạng, nhưng vô hiệu hoá chế độ đặt giá và nút Mua cho đến khi kết nối được thiết lập lại.
Các dạng trạng thái theo ngữ cảnh khác có thể bao gồm dữ liệu. Ví dụ: ứng dụng tài chính Robinhood sử dụng màu sắc và đồ hoạ để cho người dùng biết thời điểm thị trường chứng khoán mở cửa. Toàn bộ giao diện chuyển sang màu trắng rồi chuyển sang màu xám khi thị trường đóng cửa. Khi giá trị của một cổ phiếu tăng hoặc giảm, mỗi tiện ích cổ phiếu riêng lẻ sẽ chuyển sang màu xanh lục hoặc màu đỏ tuỳ thuộc vào trạng thái của cổ phiếu đó.
Hướng dẫn người dùng để họ hiểu mô hình ngoại tuyến là gì
Hầu hết người dùng quen với việc luôn có kết nối mạng. Bạn cần hướng dẫn họ về những thay đổi trong ứng dụng của bạn khi họ không có kết nối. Cho họ biết vị trí lưu dữ liệu lớn và cung cấp cho họ các chế độ cài đặt để thay đổi hành vi mặc định. Sử dụng đồng thời nhiều thành phần thiết kế giao diện người dùng (chẳng hạn như ngôn ngữ thông tin, biểu tượng, thông báo, màu sắc và hình ảnh) để truyền tải các ý tưởng này, thay vì chỉ dựa vào một lựa chọn thiết kế duy nhất (chẳng hạn như chỉ một biểu tượng) để kể toàn bộ câu chuyện.
Cung cấp trải nghiệm ngoại tuyến theo mặc định
Nếu ứng dụng của bạn không cần nhiều dữ liệu, hãy lưu dữ liệu đó vào bộ nhớ đệm theo mặc định. Người dùng có thể ngày càng trở nên khó chịu nếu họ chỉ có thể truy cập vào dữ liệu của mình thông qua kết nối mạng.
Hãy cố gắng tạo trải nghiệm ổn định nhất có thể. Kết nối không ổn định khiến ứng dụng của bạn cảm thấy không đáng tin cậy. Một ứng dụng giúp giảm bớt tác động của lỗi mạng sẽ làm hài lòng người dùng.
Các trang web tin tức có thể hưởng lợi từ tính năng tự động tải xuống và tự động lưu tin tức mới nhất, có thể tiết kiệm dữ liệu bằng cách chỉ tải văn bản xuống, để người dùng có thể đọc tin tức hôm nay mà không cần kết nối. Bạn có thể điều chỉnh hành vi này cho phù hợp với hành vi của người dùng bằng cách ưu tiên tải các danh mục tin tức mà người dùng xem nhiều nhất.
Thông báo cho người dùng khi ứng dụng sẵn sàng để sử dụng ngoại tuyến
Khi tải lần đầu, ứng dụng web phải cho người dùng biết ứng dụng đã sẵn sàng để sử dụng khi không có mạng hay chưa. Hãy thực hiện việc này bằng một tiện ích cung cấp ý kiến phản hồi ngắn gọn về một thao tác thông qua một thông báo ở cuối màn hình, chẳng hạn như khi một mục đã được đồng bộ hoá hoặc một tệp đã được tải xuống.
Hãy đảm bảo ngôn ngữ bạn đang dùng phù hợp với đối tượng của mình và sử dụng cùng một cụm từ trong mọi trường hợp áp dụng. Đối tượng không chuyên về kỹ thuật thường hiểu lầm từ "ngoại tuyến". Thay vào đó, hãy sử dụng ngôn ngữ dựa trên hành động mà độc giả có thể liên tưởng đến.
Thực hiện rõ ràng việc 'lưu để xem ngoại tuyến' trong giao diện
Nếu một ứng dụng sử dụng nhiều dữ liệu, hãy đảm bảo có công tắc hoặc ghim để thêm một mục nhằm sử dụng khi không có mạng. Chỉ tự động tải tệp xuống khi người dùng đã yêu cầu cụ thể về hành vi này thông qua trình đơn cài đặt. Hãy đảm bảo người dùng có thể nhận biết rõ giao diện người dùng ghim hoặc giao diện người dùng tải xuống và không bị các thành phần khác trên giao diện người dùng ẩn đi.
Một ví dụ cho trường hợp này là trình phát nhạc yêu cầu các tệp có kích thước lớn. Người dùng biết về chi phí dữ liệu liên quan, nhưng cũng có thể muốn sử dụng trình phát khi không có mạng. Việc tải nhạc xuống để sử dụng sau này đòi hỏi người dùng phải lên kế hoạch trước. Vì vậy, có thể bạn nên hướng dẫn người dùng về việc này trong quá trình làm quen.
Làm rõ nội dung có thể sử dụng khi không có mạng
Hãy nêu rõ những lựa chọn mà bạn cung cấp. Có thể bạn cần hiển thị thẻ hoặc chế độ cài đặt cho "thư viện ngoại tuyến" hoặc chỉ mục nội dung để người dùng có thể xem nội dung họ đã lưu trữ trên thiết bị và những nội dung cần lưu. Hãy đảm bảo rằng các chế độ cài đặt ngắn gọn và rõ ràng về nơi lưu trữ dữ liệu cũng như những người có quyền truy cập vào dữ liệu đó.
Hiển thị chi phí thực tế của một hành động
Nhiều người dùng đánh đồng khả năng ngoại tuyến với việc 'tải xuống'. Người dùng ở những quốc gia nơi kết nối mạng thường xuyên không hoạt động hoặc không hoạt động, thường chia sẻ nội dung với người dùng khác hoặc lưu nội dung để sử dụng ngoại tuyến khi họ có kết nối.
Đôi khi, người dùng gói dữ liệu tránh tải các tệp lớn xuống vì lo ngại về chi phí. Vì vậy, bạn cũng nên hiển thị chi phí liên quan để người dùng có thể chủ động so sánh cho một tệp hoặc tác vụ cụ thể. Ví dụ: ứng dụng âm nhạc nêu trên có thể phát hiện xem người dùng có đang sử dụng gói dữ liệu hay không và hiển thị kích thước tệp để người dùng có thể xem chi phí của tệp.
Giúp ngăn chặn các trải nghiệm bị tấn công
Người dùng thường tấn công một trải nghiệm mà không nhận ra rằng họ đang làm điều đó. Ví dụ: trước khi có các ứng dụng web chia sẻ tệp dựa trên đám mây, người dùng thường lưu các tệp có kích thước lớn và đính kèm vào email để họ có thể tiếp tục chỉnh sửa các tệp đó từ một thiết bị khác. Giao diện người dùng tốt sẽ giải quyết vấn đề mà người dùng đang cố gắng giải quyết mà không bị kéo vào trải nghiệm bị tấn công. Ví dụ: cung cấp một cách để chia sẻ các tệp lớn giữa các thiết bị, thay vì đính kèm các tệp lớn vào email thân thiện hơn với người dùng.
Giúp người dùng có thể chuyển đổi trải nghiệm từ thiết bị này sang thiết bị khác
Khi xây dựng cho các mạng không ổn định, hãy cố gắng đồng bộ hoá ngay khi kết nối được cải thiện để có thể chuyển trải nghiệm. Ví dụ: hãy tưởng tượng một ứng dụng du lịch bị mất kết nối mạng giữa chừng quá trình đặt trước. Khi kết nối được thiết lập lại, ứng dụng sẽ đồng bộ hoá với tài khoản của người dùng, cho phép họ tiếp tục đặt trước trên thiết bị máy tính và mang lại trải nghiệm liền mạch.
Cho người dùng biết dữ liệu của họ đang ở trạng thái nào. Ví dụ: bạn có thể cho biết ứng dụng đã được đồng bộ hoá hay chưa. Hãy hướng dẫn trẻ nếu có thể, nhưng cố gắng không khiến trẻ bị choáng ngợp vì quá nhiều thông điệp.
Tạo trải nghiệm thiết kế dành cho tất cả mọi người
Khi thiết kế trải nghiệm người dùng, hãy tìm cách hoà nhập bằng cách cung cấp các thiết bị thiết kế có ý nghĩa, ngôn ngữ đơn giản, biểu tượng tiêu chuẩn và hình ảnh có ý nghĩa để hướng dẫn người dùng hoàn thành hành động hoặc nhiệm vụ mà không gây cản trở.
Dùng ngôn từ đơn giản, rõ ràng
Trải nghiệm người dùng hợp lý không chỉ là việc thiết kế giao diện. Hệ thống này bao gồm lộ trình mà người dùng trải qua thông qua ứng dụng của bạn và mọi thứ họ gặp trong quá trình đó, bao gồm cả ngôn ngữ mà ứng dụng dùng để mô tả hành trình đó. Khi giải thích các thành phần giao diện người dùng hoặc trạng thái của ứng dụng, hãy tránh sử dụng thuật ngữ công nghệ. Từ "ngoại tuyến" thường không đủ rõ ràng để cho người dùng biết ứng dụng của bạn đang làm gì.
Sử dụng nhiều thiết bị thiết kế để tạo ra trải nghiệm người dùng dễ tiếp cận
Sử dụng ngôn ngữ, màu sắc và các thành phần hình ảnh để hiển thị trạng thái hoặc sự thay đổi trạng thái. Việc chỉ sử dụng màu để hiển thị trạng thái có thể khiến người dùng khó nhận thấy hoặc thậm chí người dùng bị khiếm thị hoàn toàn không thể tiếp cận. Ngoài ra, do thiết kế web thường sử dụng màu xám cho các phần tử bị vô hiệu hoá, nên việc sử dụng giao diện người dùng màu xám để cho thấy ứng dụng đang ở chế độ ngoại tuyến có thể gây nhầm lẫn về những việc ứng dụng có thể làm khi không có kết nối mạng, đặc biệt là khi bạn chỉ sử dụng màu sắc để hiển thị trạng thái.
Để tránh gây hiểu lầm, hãy thể hiện trạng thái ứng dụng cho người dùng theo nhiều cách, chẳng hạn như bằng màu sắc, nhãn và các thành phần giao diện người dùng.
Sử dụng biểu tượng truyền tải ý nghĩa
Nhớ sử dụng các nhãn văn bản có ý nghĩa bên cạnh biểu tượng. Chỉ riêng các biểu tượng có thể khó hiểu, đặc biệt là vì khái niệm "ngoại tuyến" trên web tương đối mới. Một số trường hợp biểu tượng gây nhầm lẫn khác bao gồm việc sử dụng ổ đĩa mềm để biểu thị "lưu". Điều này có thể vô nghĩa với những người dùng nhỏ tuổi chưa từng nhìn thấy ổ đĩa mềm, cũng như biểu tượng trình đơn "hamburger".
Khi giới thiệu biểu tượng ngoại tuyến, hãy sử dụng hình ảnh tiêu chuẩn ngành nếu có, đồng thời cung cấp nhãn văn bản và nội dung mô tả. Ví dụ: bạn có thể sử dụng biểu tượng tải xuống để lưu để xem ngoại tuyến, biểu tượng đồng bộ hoá cho một thao tác có liên quan đến việc đồng bộ hoá. Hãy cẩn thận khi sử dụng các biểu tượng để minh hoạ trạng thái có thể được hiểu là một thao tác lưu hoặc tải xuống.
Để có thêm cảm hứng, hãy tham khảo bộ biểu tượng Material Design.
Sử dụng bố cục khung xương và các cơ chế phản hồi khác
Trong khi ứng dụng của bạn đang tải nội dung, hãy cho người dùng thấy rằng ứng dụng đang tải để họ không nghĩ rằng nội dung đó đã bị hỏng. Có một cách để làm việc này là sử dụng bố cục khung xương, một phiên bản khung xương của ứng dụng hiển thị trong khi nội dung đang được tải. Ngoài ra, hãy cân nhắc sử dụng giao diện người dùng trình tải trước có nhãn văn bản cho người dùng biết rằng ứng dụng đang tải hoặc một ảnh động nhấp nháy nhẹ cho khung hình dây để tạo cảm giác như đang hoạt động và đang tải. Việc này sẽ giúp người dùng yên tâm rằng điều gì đó đang xảy ra và giúp ngăn chặn việc gửi lại hoặc làm mới không cần thiết.
Hiển thị trạng thái của hành động bằng cách đưa ra phản hồi. Ví dụ: nếu người dùng đang chỉnh sửa một tài liệu khi không có mạng, hãy cân nhắc việc thay đổi thiết kế phản hồi để người dùng thấy khác biệt so với khi họ ở trên mạng nhưng vẫn cho thấy rằng tệp của họ đã được "lưu" và sẽ đồng bộ hoá khi họ có kết nối mạng. Việc này sẽ hướng dẫn người dùng về cách hoạt động của ứng dụng và yên tâm rằng tác vụ hoặc hành động của họ đã được lưu trữ, giúp họ tự tin hơn khi sử dụng ứng dụng của bạn.
Không chặn nội dung
Trong một số ứng dụng, người dùng có thể kích hoạt một thao tác như tạo tài liệu mới. Một số ứng dụng cố gắng kết nối với một máy chủ để đồng bộ hoá tài liệu mới, và để minh hoạ việc này, chúng sẽ hiển thị một hộp thoại phương thức tải xâm nhập che phủ toàn bộ màn hình. Cách này có thể hiệu quả nếu người dùng có kết nối mạng ổn định, nhưng nếu mạng không ổn định, họ sẽ không thể thoát khỏi hành động này, vì vậy, giao diện người dùng sẽ chặn họ làm bất cứ việc gì khác.
Tránh các yêu cầu mạng chặn nội dung. Cho phép người dùng tiếp tục duyệt qua các tác vụ trong ứng dụng và hàng đợi sẽ được thực hiện và đồng bộ hoá khi kết nối cải thiện.
Thiết kế cho hàng tỷ người dùng tiếp theo
Ở nhiều khu vực, các thiết bị cấp thấp khá phổ biến, khả năng kết nối không đáng tin cậy và đối với nhiều người dùng, dữ liệu cực kỳ đắt đỏ. Hãy tạo dựng niềm tin nơi người dùng bằng cách minh bạch và tiết kiệm dữ liệu. Hãy suy nghĩ cách trợ giúp người dùng có kết nối kém và đơn giản hoá giao diện để đẩy nhanh các tác vụ. Luôn cố gắng hỏi người dùng trước khi tải nội dung có nhiều dữ liệu xuống.
Cung cấp các lựa chọn băng thông thấp cho người dùng sử dụng kết nối chậm. Cung cấp thành phần nhỏ hơn trên kết nối mạng chậm hơn hoặc cho phép bạn chọn thành phần có chất lượng cao hoặc thấp.
Kết luận
Giáo dục là yếu tố then chốt đối với trải nghiệm người dùng ngoại tuyến vì người dùng chưa quen thuộc với trải nghiệm đó. Để giúp trẻ học hỏi, hãy cố gắng tạo mối liên kết với các khái niệm quen thuộc, chẳng hạn như giải thích rằng việc tải xuống để sử dụng sau này cũng giống như việc ngoại tuyến dữ liệu.
Khi thiết kế cho các kết nối mạng không ổn định, hãy nhớ các nguyên tắc sau:
- Thiết kế hướng đến sự thành công, lỗi và tình trạng không ổn định của kết nối mạng.
- Dữ liệu có thể gây tốn kém, vì vậy, hãy thận trọng với người dùng.
- Đối với hầu hết người dùng trên toàn cầu, môi trường công nghệ hầu như chỉ có trên thiết bị di động.
- Các thiết bị cấp thấp là bình thường, với dung lượng lưu trữ, bộ nhớ và công suất xử lý hạn chế, màn hình nhỏ và chất lượng màn hình cảm ứng thấp hơn. Hãy đảm bảo hiệu suất là một phần trong quy trình thiết kế của bạn.
- Cho phép người dùng duyệt qua ứng dụng của bạn khi họ ngoại tuyến.
- Thông báo cho người dùng về trạng thái hiện tại và những thay đổi của tiểu bang.
- Hãy thử cung cấp chế độ ngoại tuyến theo mặc định nếu ứng dụng của bạn không cần nhiều dữ liệu.
- Nếu ứng dụng có nhiều dữ liệu, hãy hướng dẫn người dùng về cách họ có thể tải xuống để sử dụng khi không có mạng.
- Giúp trải nghiệm có thể chuyển đổi giữa các thiết bị.
- Sử dụng kết hợp ngôn ngữ, biểu tượng, hình ảnh, kiểu chữ và màu sắc để thể hiện ý tưởng cho người dùng.
- Mang đến sự yên tâm và phản hồi để giúp người dùng.