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