Ngày xuất bản: 10 tháng 11 năm 2016
Chất lượng của kết nối mạng có thể bị ảnh hưởng bởi một số yếu tố, chẳng hạn như:
- Vùng phủ sóng của nhà cung cấp mạng yếu.
- Điều kiện thời tiết khắc nghiệt.
- Mất điện.
- Đi vào "vùng không có sóng" vĩnh viễn, chẳng hạn như trong các toà nhà có tường chắn kết nối mạng.
- Đi vào "vùng không có sóng" 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.
- Những hoạt động văn hoá yêu cầu hạn chế hoặc không sử dụng Internet vào những thời điểm hoặc ngày cụ thể.
Mục tiêu của bạn với tư cách là nhà phát triển là mang lại trải nghiệm tốt, giảm thiểu tác động của các 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 họ có kết nối mạng kém
Câu hỏi đầu tiên cần đặt ra là thành công và thất bại của một kết nối mạng trông 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 bình 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ị trễ.
Để 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 về trải nghiệm người dùng:
- Bạn chờ bao lâu để xác định xem một kết nối có thành công hay không?
- Bạn có thể làm gì trong khi chờ đợi kết quả thành công hay thất bại?
- Bạn nên làm gì nếu không kết nối được?
- Làm cách nào để cho người dùng biết điều gì đang xảy ra?
Thông báo cho người dùng về 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 lỗi mạng. Ví dụ: một 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 lắng! Thư sẽ được gửi khi mạng được khôi phục.
Thông báo cho người dùng về những điểm cải tiến đối với kết nối
Cách bạn thông báo cho người dùng rằng kết nối mạng của họ đã được cải thiện sẽ tuỳ thuộc vào ứng dụng của bạn. Những ứ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, cần tự động cập nhật và thông báo cho người dùng càng sớm càng tốt.
Bạn nên cho người dùng biết rằng ứng dụng web của bạn đã cập nhật "ở chế độ nền" bằng cách sử dụng một tín hiệu trực quan như phần tử thông báo nhanh của Material Design. Điều này liên quan đến việc phát hiện cả sự hiện diện của một worker dịch vụ và nội dung đượ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à Chrome Platform Status (Trạng thái nền tảng Chrome). Nền tảng 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 thời điểm cập nhật gần đây nhất. Ví dụ: điều này đặc biệt hữu ích đối 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, cho người dùng biết về nội dung mới. Việc tự động cập nhật mộ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 bối cảnh hiện tại
Mỗi phần tử trên giao diện người dùng đều 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. Một ví dụ là trang web thương mại điện tử có thể duyệt xem khi không có mạng, nhưng sẽ tắt tính năng định 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 bối 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 khi nào 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 đỏ 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. Cho họ biết nơi 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ữ truyền tải 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ì chỉ dựa vào một lựa chọn thiết kế duy nhất (chẳng hạn như chỉ dùng 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, 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 khó chịu nếu chỉ có thể truy cập vào dữ liệu của họ 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 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ừ việc 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, 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 xuống những 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 không có mạng
Khi tải lần đầu, ứng dụng web phải cho người dùng biết liệu ứng dụng đó đã sẵn sàng để sử dụng khi không có mạng hay chưa. Hãy làm việc này bằng tiện ích cung cấp thông tin 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 sử dụng phù hợp với đối tượng của mình 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 hệ.
Làm nổi bật tính năng "lưu để xem khi không có mạng" 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ó một nút chuyển hoặc nút ghim để thêm một mục cho mục đích sử dụng ngoại tuyến. 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 một trình đơn cài đặt. Đảm bảo người dùng có thể thấy rõ giao diện người dùng ghim hoặc tải xuống và giao diện này không bị các thành phần khác trên giao diện người dùng che khuất.
Một ví dụ về trường hợp này là trình phát nhạc yêu cầu các tệp 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 ở chế độ ngoại tuyến. Để tải nhạc xuống để sử dụng sau, người dùng cần lên kế hoạch trước. Vì vậy, có lẽ bạn nên hướng dẫn người dùng về tính năng này trong quy 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 trình bày rõ ràng 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 được lưu. Đảm bảo các chế độ cài đặt này ngắn gọn, đồng thời nêu rõ nơi lưu trữ dữ liệu và 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 coi khả năng hoạt động khi không có mạng là "tải xuống". Người dùng ở những quốc gia thường xuyên gặp sự cố kết nối mạng hoặc không có kết nối mạng thường chia sẻ nội dung với những người dùng khác hoặc lưu nội dung để sử dụng khi không có mạng.
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ì sợ tốn kém, vì vậy, bạn cũng có thể muố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à cho biết kích thước tệp để người dùng có thể biết chi phí của một 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 một trải nghiệm mà không nhận ra mình đang làm việc đó. Ví dụ: trước khi các ứng dụng web chia sẻ tệp dựa trên đám mây ra đời, người dùng thường lưu các tệp lớn và đính kèm chúng 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 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ị 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ì giúp người dùng dễ dàng đính kèm tệp lớn vào email 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 tạo 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 khi đang đặ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 lại trải nghiệm liền mạch.
Cho người dùng biết trạng thái dữ liệu của họ. Ví dụ: bạn có thể cho biết liệu ứng dụng đã đồng bộ hoá hay chưa. Hãy giáo dục họ nếu có thể, nhưng đừng cố gắng gửi quá nhiều thông điệp 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 mang tính toàn diện bằng cách cung cấp các thiết bị thiết kế có ý nghĩa, ngôn ngữ đơn giản, hệ thống 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 tất hành động hoặc tác 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à thiết kế giao diện. Trong đó có đường dẫn mà người dùng đi qua ứng dụng của bạn và mọi thứ họ gặp phải trên đường đi, 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 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 trực quan để 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 để cho biết 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 đối với người dùng bị suy giảm thị lực. Ngoài ra, vì thiết kế web thường 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 có màu xám để cho biết ứng dụng của bạn đang ở trạng thái ngoại tuyến có thể gây nhầm lẫn về những việc mà ứng dụng có thể làm khi ngoại tuyến, đặc biệt là nếu bạn chỉ dùng màu sắc để cho biết trạng thái.
Để tránh hiểu lầm, hãy thể hiện trạng thái của ứ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
Hãy nhớ sử dụng nhãn văn bản có ý nghĩa cùng với biểu tượng. Chỉ dùng biểu tượ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 tương đối mới. Các 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". Điều này có thể vô nghĩa đối với những người dùng trẻ tuổi chưa bao giờ 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 không có mạng, hãy nhất quán với hình ảnh theo 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ể dùng biểu tượng tải xuống để biểu thị việc lưu để xem 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 các biểu tượng để minh hoạ trạng thái mà thay vào đó có thể được hiểu là hành động lưu hoặc tải xuống.
Để có thêm ý tưởng, hãy tham khảo bộ biểu tượng Material Design.
Sử dụng bố cục khung 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ị lỗi. Một cách để thực hiện 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. Bạn cũng nên cân nhắc việc sử dụng giao diện người dùng 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ẹ cho khung để 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 chặn việc gửi lại hoặc làm mới không cần thiết.
Cho biết trạng thái của một hành động bằng cách đưa ra ý kiến phản hồi. Ví dụ: nếu người dùng đang chỉnh sửa 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 để thiết kế đó khác biệt rõ ràng so với khi họ có 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. Điều này giúp người dùng hiểu cách ứng dụng của bạn hoạt động và trấn an họ rằng nhiệm vụ hoặc hành động của họ đã được lưu trữ, nhờ đó họ có thể yên tâm 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, chẳng hạn như tạo một 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ạ điều này, chúng sẽ hiển thị một hộp thoại phương thức tải xâm nhập bao phủ toàn bộ màn hình. Điều 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 thao tác 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 xem ứng dụng của bạn và xếp hàng các tác vụ sẽ được 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 ổn định và đối với nhiều người dùng, dữ liệu cực kỳ tốn kém. Tạo dựng lòng tin nơi người dùng bằng cách luôn 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 khi kết nối kém và đơn giản hoá giao diện để giúp tăng tốc 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ó dung lượng lớn xuống.
Cung cấp các lựa chọn sử dụng ít băng thông cho người dùng có kết nối bị trễ. 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 thành phần 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 khi không có mạng vì người dùng không quen với trải nghiệm này. Để giúp họ tìm hiểu, hãy thử 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ư việc lưu trữ 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 trạng thái thành công, thất bại và không ổn định của kết nối mạng.
- 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ệ gần như chỉ có thiết bị di động.
- Các thiết bị cấp thấp rất phổ biến, có bộ nhớ, RAM 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 trong quy trình thiết kế của bạn.
- Cho phép người dùng duyệt xem ứng dụng của bạn khi họ không có mạng.
- Thông báo cho người dùng về trạng thái hiện tại của họ 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.
- Tạo trải nghiệm có thể chuyển đổi giữa các thiết bị.
- Kết hợp ngôn ngữ, biểu tượng, hình ảnh, kiểu chữ và màu sắc để truyền tải ý tưởng đến người dùng.
- Đưa ra thông tin trấn an và phản hồi để giúp người dùng.