Hướng dẫn thiết kế trải nghiệm web cho mạng chậm và ngoại tuyến.
Bài viết này cung cấp các nguyên tắc thiết kế về cách tạo trải nghiệm chất lượng cao trên cả mạng chậm và mạng ngoại tuyến.
Chất lượng kết nối mạng có thể bị ảnh hưởng bởi một số yếu tố như:
- Nhà cung cấp dịch vụ không phù hợp.
- Điều kiện thời tiết khắc nghiệt.
- Mất điện.
- Lẫn vào "vùng chết" cố định, chẳng hạn như trong những toà nhà có tường chặn kết nối mạng.
- Lố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ó khung thời gian, chẳng hạn như kết nối Internet ở sân bay hoặc khách sạn.
- Các hoạt động văn hoá yêu cầu quyền truy cập hạn chế hoặc không có kết nối Internet vào những thời điểm hoặc ngày cụ thể.
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 được đặt ra là kết nối mạng thành công và không thành công như thế nào? 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. Tuy nhiên, lỗi kết nối có thể là cả trạng thái ngoại tuyến của ứng dụng và cách ứng dụng hoạt động khi mạng chậm.
Khi nghĩ về việc kết nối mạng thành công hay thất bại, bạn cần 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 đợ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ì trong trường hợp không thành công?
- Bạn làm cách nào để thông báo cho người dùng về các nội dung trên?
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 về cả những việc mà họ vẫn có thể thực hiện khi gặp lỗi mạng và trạng thái hiện tại của ứng dụng. Ví dụ: thông báo có thể có nội dung:
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 thông báo cho người dùng rằng kết nối mạng của họ đã cải thiện sẽ tuỳ thuộc vào ứng dụng của bạn. Các ứng dụng như ứng dụng thị trường chứng khoán ưu tiên thông tin hiện tại 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 rằng ứng dụng web đã được cập nhật "ở chế độ nền" thông qua một chỉ dẫn hình ảnh, chẳng hạn như phần tử thông báo ngắn Material Design. Quá trình này bao gồm việc phát hiện cả sự hiện diện của trình chạy dịch vụ và 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. Trạng thái này sẽ đăng ghi chú cho người dùng khi ứng dụng được cập nhật.
Bạn cũng có thể cho thấy thời điểm cập nhật ứng dụng gần đây nhất ở một không gian nổi bật. Ví dụ: điều này sẽ hữu ích cho một ứng dụng chuyển đổi tiền tệ.
Các ứng dụng như ứ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 sẽ khiến người dùng 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 bit giao diện người dùng có thể có ngữ cảnh và chức năng riêng và sẽ thay đổi tuỳ thuộc vào việc giao diện đó có yêu cầu 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ử mà người dùng có thể duyệt xem khi không có mạng. Nút Mua và giá sẽ bị tắt 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 cho phép người dùng mua cổ phiếu cũng như sử dụng màu sắc và đồ hoạ để thông báo cho người dùng khi thị trường 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ổ 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ì
Ngoại tuyến là một mô hình tư duy mới dành cho mọi người. Bạn cần hướng dẫn người dùng về những thay đổi sẽ xảy ra khi họ không có kết nối. Thông báo cho họ về 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. Hãy đảm bảo bạn sử dụng nhiều thành phần thiết kế giao diện người dùng 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 chung 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ỉ riê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, 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 chỉ có thể truy cập vào dữ liệu của mình 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 sẽ khiến ứng dụng của bạn cảm thấy không đáng tin cậy. Trong đó, một ứng dụng làm giảm tác động của sự cố mạng sẽ cảm nhận được sự kỳ diệu của 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 để người dùng có thể đọc tin tức hôm nay mà không cần kết nối, có thể là tải văn bản xuống mà không cần hình ảnh bài viết. Ngoài ra, hãy điều chỉnh cho phù hợp với hành vi của người dùng. Ví dụ: nếu người dùng thường xem phần thể thao, hãy thiết lập chế độ tải xuống ưu tiên.
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 một ứng dụng web tải lần đầu tiên, bạn cần cho người dùng biết liệu ứng dụng có sẵn sàng để sử dụng khi không có mạng hay không. 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 phần đã được đồng bộ hoá hoặc một tệp dữ liệu đã được tải xuống.
Một lần nữa, hãy nghĩ đến ngôn ngữ bạn đang sử dụng để đảm bảo ngôn ngữ đó phù hợp với khán giả của bạn. Hãy đảm bảo thông báo giống nhau trong mọi trường hợp thông báo được sử dụng. Khán giả không có chuyên môn thường hiểu lầm thuật ngữ ngoại tuyến. Vì vậy, hãy sử dụng ngôn ngữ dựa trên hành động mà họ có thể liên tưởng đến.
Biến tính năng 'lưu để dùng ngoại tuyến' thành một phần rõ ràng của giao diện cho các ứng dụng nặng dữ liệu
Nếu một ứng dụng sử dụng lượng lớn dữ liệu, hãy đảm bảo có một công tắc hoặc ghim để thêm mục nhằm sử dụng ngoại tuyến thay vì tự động tải xuống, trừ phi 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 rằng giao diện người dùng đã ghim hoặc tải xuống không bị các thành phần khác trên giao diện người dùng che khuất và người dùng có thể thấy rõ tính năng này.
Một ví dụ là trình phát nhạc yêu cầu các tệp dữ liệu lớn. Người dùng biết chi phí dữ liệu liên quan, nhưng cũng có thể muốn sử dụng trình phát ngoại tuyến. Người dùng phải lên kế hoạch trước khi tải nhạc xuống để sử dụng sau. Vì vậy, trong quá trình làm quen, người dùng cần được hướng dẫn về điều này.
Làm rõ nội dung có thể sử dụng khi không có mạng
Hãy nêu rõ lựa chọn mà bạn cung cấp. Có thể bạn cần hiển thị một thẻ hoặc chế độ cài đặt cho thấy "thư viện ngoại tuyến" hoặc chỉ mục nội dung để người dùng có thể dễ dàng xem nội dung họ đã lưu trữ trên điện thoại 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.
Người dùng sử dụng gói dữ liệu có thể 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ụ: nếu ứng dụng âm nhạc ở 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
Thường thì người dùng tấn công một trải nghiệm mà không nhận ra rằng họ đang thực hiện điều đó. Ví dụ: trước khi 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 từ một thiết bị khác. Điều quan trọng là không bị đưa vào trải nghiệm bị tấn công của họ, mà hãy xem xét những gì họ đang cố gắng đạt được. Nói cách khác, thay vì nghĩ cách làm cho việc đính kèm một tệp lớn trở nên thân thiện hơn với người dùng, hãy giải quyết vấn đề chia sẻ các tệp lớn trên nhiều thiết bị.
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 khi đặ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. Việc không thể chuyển trải nghiệm có thể cực kỳ khó chịu đối với người dùng.
Thông báo cho người dùng về trạng thái hiện tại của dữ liệu. 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 họ nếu có thể, nhưng cố gắng không làm quá nhiều việc bằng việc nhắn tin.
Tạo trải nghiệm thiết kế dành cho tất cả mọi người
Khi thiết kế, hãy tìm cách hướng đến tính hoà nhập bằng cách cung cấp các thiết bị có thiết kế có ý nghĩa, ngôn ngữ đơn giản, biểu tượng 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 nhiệm vụ thay vì cản trở tiến trình của họ.
Sử dụng ngôn từ đơn giản, súc tích
Trải nghiệm người dùng hợp lý không chỉ là giao diện được thiết kế hợp lý. Nó bao gồm đường dẫn mà người dùng thực hiện cũng như các từ được sử dụng trong ứng dụng. Tránh sử dụng thuật ngữ công nghệ khi giải thích trạng thái của ứng dụng hoặc các thành phần giao diện người dùng riêng lẻ. Hãy lưu ý rằng cụm từ "ứng dụng ngoại tuyến" có thể không truyền tải cho người dùng trạng thái hiện tại của ứng dụng.
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 để thể hiện sự thay đổi về trạng thái hoặc trạng thái hiện tại. Chỉ sử dụng màu sắc để thể hiện trạng thái có thể không được người dùng chú ý và người dùng bị khiếm thị có thể không tiếp cận được. Ngoài ra, bản năng của các nhà thiết kế là sử dụng giao diện người dùng màu xám để thể hiện ngoại tuyến, nhưng điều này có thể mang ý nghĩa được tải trên web. Giao diện người dùng màu xám, chẳng hạn như các phần tử đầu vào trên một biểu mẫu cũng có nghĩa là một phần tử bị tắt. Điều này có thể gây nhầm lẫn nếu bạn chỉ sử dụng màu sắc để mô tả trạng thái.
Để tránh gây hiểu lầm, hãy thể hiện nhiều trạng thái 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
Đảm bảo rằng thông tin được truyền đạt chính xác bằng các nhãn văn bản cũng như biểu tượng có ý nghĩa. Nếu chỉ có các biểu tượng thì cũng có thể gây ra vấn đề, vì khái niệm ngoại tuyến trên web còn tương đối mới. Người dùng có thể hiểu nhầm các biểu tượng được sử dụng. Ví dụ: việc sử dụng đĩa mềm để lưu có ý nghĩa với một thế hệ cũ nhưng những người dùng trẻ chưa từng nhìn thấy đĩa mềm có thể bị nhầm lẫn bởi phép ẩn dụ. Tương tự, biểu tượng trình đơn "hamburger" có thể khiến người dùng nhầm lẫn khi được trình bày mà không có nhãn.
Khi giới thiệu biểu tượng ngoại tuyến, hãy cố gắng đảm bảo tính nhất quán với hình ảnh tiêu chuẩn của ngành (khi có hình ảnh) cũng như cung cấp nhãn văn bản và nội dung mô tả. Ví dụ: lưu để dùng khi không có mạng có thể là biểu tượng tải xuống thông thường hoặc có thể là nếu hành động có liên quan đến việc đồng bộ hoá, thì đó có thể là biểu tượng đồng bộ hoá. Một số thao tác có thể được hiểu là lưu để dùng khi không có mạng thay vì thể hiện trạng thái của mạng. Hãy nghĩ đến hành động bạn đang cố gắng truyền tải thay vì giới thiệu cho người dùng khái niệm trừu tượng. Ví dụ: lưu hoặc tải dữ liệu xuống sẽ dựa trên hành động.
Ngoại tuyến có thể có nghĩa là một số việc tuỳ thuộc vào ngữ cảnh, chẳng hạn như tải xuống, xuất, ghim, v.v. Để có thêm cảm hứng, hãy xem bộ biểu tượng Material Design.
Sử dụng các bố cục khung xương với các cơ chế phản hồi khác
Về cơ bản, bố cục cơ bản là 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. Điều này giúp chứng minh cho người dùng rằng nội dung sắp được tải. Ngoài ra, bạn cũng nên cân nhắc sử dụng giao diện người dùng trình tải trước, với nhãn văn bản thông báo cho người dùng rằng ứng dụng đang tải. Một ví dụ là làm rung chuyển nội dung khung xương mang lại cho ứng dụng cảm giác rằng ứng dụng đ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 gửi lại hoặc làm mới ứ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 sẽ cố gắng kết nối với 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. 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à giao diện người dùng sẽ chặn họ làm bất cứ việc gì khác một cách hiệu quả. Bạn nên 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 đợi các tác vụ sẽ được thực hiện và đồng bộ hoá sau khi kết nối được cải thiện.
Thể hiện trạng thái của hành động bằng cách cung cấp phản hồi cho người dùng. Ví dụ: nếu người dùng đang chỉnh sửa một tài liệu, hãy cân nhắc việc thay đổi thiết kế phản hồi sao cho phản hồi này rõ ràng là khác với khi họ trực tuyến 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ác trạng thái có sẵn và yên tâm rằng tác vụ hoặc hành động của họ đã được lưu trữ. Điều này giúp ích cho việc người dùng ngày càng tự tin hơn khi sử dụng ứng dụng của bạ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, giá dữ liệu không phải chăng. Bạn cần 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 suy nghĩ cách trợ giúp người dùng trên 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 lựa chọn băng thông thấp cho người dùng sử dụng kết nối chậm. Vì vậy, nếu kết nối mạng chậm, hãy cung cấp các thành phần nhỏ. Cho phép người dùng 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 trong trải nghiệm người dùng ngoại tuyến vì người dùng chưa quen với các khái niệm này. Hãy cố gắng tạo mối liên kết với những nội dung quen thuộc, ví dụ: 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à phổ biến, với dung lượng lưu trữ, bộ nhớ và khả năng 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 mà không cần 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.