Đi lang thang ít hơn, tiếp cận nhanh hơn với tệp Phương tiện mong muốn của bạn trên WhatsApp

Nov 28 2022

Cải thiện trải nghiệm người dùng khi tìm kiếm tệp phương tiện WhatsApp trong “thông tin liên hệ” để giảm thời lượng tổng thể của phiên tìm kiếm một tệp phương tiện cụ thể, giúp tăng hiệu quả, nhiều quyền kiểm soát hơn và tự do hơn cho người dùng. Gần đây tôi đã tham gia vào một thử thách thiết kế dẫn đến việc tạo ra nghiên cứu điển hình này.

Gần đây tôi đã tham gia vào một thử thách thiết kế dẫn đến việc tạo ra nghiên cứu điển hình này. Vì vậy, trước khi bạn đi sâu vào nghiên cứu trường hợp của tôi, hãy tìm hiểu một chút bối cảnh ⬇️

Cách tôi bắt đầu với Thử thách thiết kế UX

Vì vậy, hành trình của tôi bắt đầu bằng việc tham dự hội thảo UX Kickstarter kéo dài 2 tuần của Anudeep, nơi tôi đã học về các nguyên tắc thiết kế UX, phương pháp phỏng đoán, xây dựng giao diện người dùng trong Figma, tạo nguyên mẫu hoạt hình và Tác động kinh doanh của thiết kế UX.

Tất cả những gì tôi học được đều không theo sách giáo khoa. Với một số liều thuốc kỳ diệu của cảm giác thông thường gây ra sự tò mò, tôi bắt đầu xem xét các sản phẩm hàng ngày dù là vật lý hay kỹ thuật số với tư duy tò mò hay bạn có thể nói con mắt thứ 3 của tôi đã được khai mở, đó là “con mắt của nhà thiết kế”.

Với suy nghĩ tò mò này, chúng tôi đã tham gia một phiên làm việc với Anudeep, nơi chúng tôi được giới thiệu tóm tắt về thách thức thiết kế UX. Là lần đầu tiên tôi tham gia vào một thử thách thiết kế, tôi vô cùng hào hứng và đồng thời cũng hơi lo lắng. Chúng tôi có 2 ngày để hoàn thành thử thách nhưng tôi đoán rằng cảm giác hồi hộp khi hoàn thành thử thách trong thời gian hạn chế nghiêm ngặt là một trải nghiệm học tập tuyệt vời để tìm hiểu về cách thiết kế luôn ghi nhớ các ràng buộc.

➡️ Bản thiết kế lại cuối cùng của tôi về trải nghiệm tìm kiếm tệp phương tiện của WhatsApp, một phần của màn hình thông tin liên hệ bao gồm tùy chọn phương tiện, liên kết và tài liệu

Dưới đây là so sánh giữa màn hình gốc và Thiết kế lại. Tôi sẽ hướng dẫn bạn cách tôi tìm ra giải pháp trong phần sau của nghiên cứu điển hình.

Hình 1.1 Màn hình gốc

Hình 1.2 Màn hình được thiết kế lại (Trước khi kiểm tra khả năng sử dụng)

Hình 1.3 Màn hình được thiết kế lại (Sau khi kiểm tra khả năng sử dụng)

Hãy nói về giải pháp và cách nó giúp ích cho người dùng

Trong giải pháp cuối cùng,

Tôi đã thêm các tab phương tiện khác nhau như Ảnh, Video, Âm thanh, GIF và Hình dán. Vì vậy, giờ đây, bất cứ khi nào ai đó cần tìm một tệp phương tiện cụ thể, chẳng hạn như video, họ có thể ngay lập tức chuyển sang tab video và tìm tất cả các video của tháng cụ thể mà họ muốn chia sẻ với ai đó hoặc lưu trên thiết bị của họ. Điều này giúp người dùng tiết kiệm rất nhiều thời gian mà lẽ ra phải tìm kiếm các tệp phương tiện trong đó các loại tệp phương tiện khác nhau được trộn lẫn.

Ngoài ra, tôi cũng cung cấp cho người dùng sự linh hoạt và khả năng kiểm soát để hiển thị hoặc ẩn một tab phương tiện cụ thể mà họ muốn xem. Có hai tùy chọn bộ lọc, một tùy chọn dành cho từng tháng cụ thể, trong đó một tùy chọn có thể hiển thị hoặc ẩn các tab phương tiện theo tháng một cách khôn ngoan và tùy chọn còn lại là lọc tổng thể các tab phương tiện cho tất cả các tháng tùy theo sở thích của người dùng.

Tôi cũng đã thêm một tùy chọn để truy cập các tệp phương tiện chưa được sao lưu để các tệp chưa được sao lưu đó không trộn lẫn với các tệp đã được sao lưu. Vì cuối cùng, người dùng có thể nhấp vào các tệp không được sao lưu để biết rằng họ không thể mở/tương tác với phương tiện. Vì vậy, các tệp không được sao lưu này sẽ có sẵn trên một màn hình khác. Do đó, hãy ghi nhớ kinh nghiệm phòng ngừa lỗi cho người dùng.

Giải pháp giúp gì cho doanh nghiệp?

Giải pháp giúp tiết kiệm rất nhiều thời gian cho người dùng, từ đó giúp họ hoàn thành nhiệm vụ nhanh hơn, do đó giảm thời lượng phiên của người dùng và tỷ lệ bỏ qua khi tìm kiếm.

Đây là một nguyên mẫu Figma cho cùng -

Bây giờ hãy nói về quá trình đi đến quyết định thiết kế cuối cùng là gì

Lý do tại sao tôi chọn WhatsApp và quy trình cụ thể này

Nguồn: Pinterest

Như đã đề cập trước đó sau hội thảo UX, tôi đã hình thành thói quen xem xét mọi sản phẩm dù là vật lý hay kỹ thuật số theo quan điểm của một nhà thiết kế và việc hiểu “lý do” của thiết kế đã trở thành bản chất thứ hai của tôi. Sách bài tập về học hỏi từ thiết kế hiện có là một trợ giúp tuyệt vời trong việc này, vì mọi sản phẩm đều được xem xét từ góc độ thông thường.

Trong khi sử dụng WhatsApp để chia sẻ phương tiện từ thông tin liên hệ của cuộc trò chuyện, tôi nhận thấy rằng quy trình tìm kiếm hơi tẻ nhạt, đặc biệt là khi tìm một tệp phương tiện cụ thể có thể là video, GIF hoặc tệp âm thanh.

Tôi biết phải có một cách để giảm bớt nỗ lực tìm kiếm tệp phương tiện. Một điều khác mà tôi ghi nhớ là bất kỳ sản phẩm nào, nổi tiếng hay mới, luôn có phạm vi cải tiến vì khi sản phẩm phát triển thì thiết kế và nhu cầu của người dùng cũng vậy.

Một lý do khác khiến tôi chọn WhatsApp làm ứng dụng cho thử thách là cơ sở người dùng rộng lớn với hơn 2 tỷ người dùng hoạt động hàng tháng. Các sản phẩm có cơ sở người dùng rộng lớn như vậy có nghĩa là ngay cả một thay đổi duy nhất trong một tính năng của sản phẩm cũng có thể có tác động rất lớn đến người dùng cũng như doanh nghiệp.

Nói về kinh doanh, UX có tác động rất lớn đến doanh nghiệp và những tác động này có thể được đo lường thông qua nhiều Chỉ số kinh doanh . Luồng tìm kiếm của WhatsApp nếu được cải thiện có khả năng dẫn đến việc giảm thời lượng phiên và tỷ lệ bỏ ngang trong khi tìm kiếm người dùng và có thể giúp ích rất nhiều cho doanh nghiệp.

Làm cách nào để tôi hiểu được các lĩnh vực cần cải thiện trong WhatsApp?

Học và hiểu 10 kinh nghiệm thiết kế đã giúp tôi rất nhiều trong việc xác định các vấn đề trong luồng tìm kiếm hiện tại của mình. Với sự trợ giúp của một số đánh giá kinh nghiệm và lẽ thường, tôi đã có thể chọn ra một số vấn đề có thể được giải quyết cho luồng tìm kiếm.

Hình 2 Các vấn đề được xác định

Trong quá trình đánh giá heuristic, tôi đã đưa ra các câu hỏi như,

Tại sao các tệp được tách riêng thành Phương tiện, Liên kết và Tài liệu?
Tính linh hoạt và hiệu quả sử dụng — Việc phân tách tệp thành phương tiện, liên kết và tài liệu giúp người dùng nhanh chóng tìm kiếm tệp họ muốn lưu hoặc chia sẻ với ai đó

Tính linh hoạt và hiệu quả sử dụng- Hiển thị các tệp phương tiện theo tháng giúp người dùng nhanh chóng tìm thấy phương tiện cụ thể cho một tháng cụ thể mà nó được chia sẻ.
Nhận dạng thay vì thu hồi - Do sự phân tách các tệp phương tiện theo tháng, người dùng có thể nhanh chóng nhận ra tệp cũ hay mới thay vì cố nhớ lại thời gian tệp phương tiện được chia sẻ, từ đó giúp giảm tải nhận thức của người dùng.

Người dùng sẽ tìm thấy tệp phương tiện cụ thể như thế nào để thu hẹp thời gian tìm kiếm cho người dùng?

Người dùng khó tìm kiếm một loại tệp phương tiện cụ thể có thể là video, gif, âm thanh hoặc nhãn dán. Thông thường, người dùng có thể cần cuộn nhiều lần để tìm loại tệp phương tiện cụ thể khi cố gắng chia sẻ tệp với ai đó hoặc lưu tệp trên thiết bị của riêng họ.
Heuristic- Linh hoạt và Hiệu quả sử dụng

Người dùng khó xác định tệp nào không được sao lưu vì các tệp được sao lưu và không được sao lưu có trong thư viện và do đó bị trộn lẫn.
Heuristic- Ngăn ngừa lỗi

Từ các vấn đề được xác định trong quá trình đánh giá heuristic, tôi đã đưa ra 2 ý tưởng và chọn ý tưởng có nhiều phạm vi hơn để giải quyết vấn đề.

Hình 2.1 Ý tưởng

Ý tưởng 1 — Đặt ảnh, video, Gif, nhãn dán và âm thanh dưới dạng các tùy chọn tab để tách biệt chúng và giúp việc tìm kiếm loại phương tiện linh hoạt hơn khi chia sẻ với ai đó hoặc lưu vào thiết bị của bạn, đồng thời thêm một phần ở trên cùng cho unbacked các tệp để nhận dạng và ngăn ngừa lỗi.

Ý tưởng 2 — Ngoài ý tưởng 1 còn có bộ lọc tab để chỉ xem các tab phương tiện mong muốn tại một thời điểm, ví dụ: người dùng chỉ muốn xem các tab âm thanh và video có thể chọn nhanh các tab âm thanh và video từ bộ lọc. tìm những tập tin đó.

Tôi đã tiếp tục với ý tưởng 2 vì nó mang lại cho người dùng sự linh hoạt và hiệu quả để nhanh chóng tìm kiếm tệp phương tiện từ một bộ sưu tập lớn các tệp từ thư viện cũng như quyền kiểm soát của người dùng và quyền tự do lọc loại tệp phương tiện mà người dùng muốn xem trên màn hình của họ tại thời điểm nhất định.

Ý tưởng được chọn cũng sẽ tạo ra tác động kinh doanh lớn bằng cách giảm thời lượng phiên và tỷ lệ bỏ qua khi tìm kiếm.

Đưa suy nghĩ lên giấy

Tôi cần hình dung ý tưởng của mình sẽ trông như thế nào trên giao diện và do đó tôi đã tiếp tục phác thảo các nguyên mẫu trên giấy để hiểu rõ hơn về ý tưởng của mình.

Hình 2.2 Nguyên mẫu giấy

Tôi cảm thấy rất hào hứng khi biến ý tưởng của mình thành hiện thực với sự trợ giúp của tạo mẫu trên giấy, như trong hình trên, tôi đã tạo các tab phương tiện riêng biệt và thêm các bộ lọc theo tháng để ẩn/hiện các tab phương tiện cũng như cung cấp tùy chọn truy cập không được hỗ trợ tập tin media cho người dùng.

Sử dụng ứng dụng Marvel để tạo nguyên mẫu rất thú vị và khi tôi chơi nguyên mẫu, cảm giác thật tuyệt vời khi ý tưởng của tôi được chuyển từ tâm trí tôi sang màn hình!

Làm cho nguyên mẫu của tôi chân thực nhất có thể (Nguyên mẫu có độ trung thực cao)

Tìm hiểu về giao diện người dùng và hiểu cách thức hoạt động của một giao diện đã giúp ích rất nhiều cho việc tạo ra các nguyên mẫu có độ trung thực cao trong Figma. Các kỹ năng như tạo nguyên mẫu hoạt hình, khoảng cách và định cỡ rất hữu ích khi thiết kế giao diện. Plugin cũng là một công cụ tiết kiệm thời gian rất lớn trong quá trình thiết kế giao diện người dùng.

Hình 2.3 Nguyên mẫu độ trung thực cao

Trong quá trình thiết kế lại giao diện người dùng, tôi đã thêm các tùy chọn tab tệp phương tiện như Ảnh, Video, Âm thanh, Gif và Hình dán.
Đã thêm biểu tượng bộ lọc để ẩn/hiện các tab phương tiện hàng tháng.
Đã thêm biểu tượng chưa sao lưu để cung cấp cho người dùng tùy chọn truy cập các tệp chưa sao lưu
Sử dụng các plugin như Unsplash cho hình ảnh có sẵn và các biểu tượng thiết kế Material design cho các biểu tượng là một cách tiết kiệm thời gian rất lớn.

Xác thực xem các giải pháp của tôi có hoạt động hay không với sự trợ giúp của kiểm tra khả năng sử dụng ✅

Bây giờ tôi đã hoàn thành các thiết kế của mình theo các vấn đề được xác định trong quá trình đánh giá heuristic.

Tôi đã thử nghiệm thiết kế với người dùng để đảm bảo rằng chúng hoạt động và cải thiện những gì không hoạt động.

Vì WhatsApp là một ứng dụng rất nổi tiếng và hầu hết mọi người đều sử dụng nó, nên
tôi đã gặp 3 người ngẫu nhiên tại một phòng tập thể dục để thực hiện kiểm tra khả năng sử dụng.
Trong thử nghiệm khả năng sử dụng, tôi đã đến gặp người dùng và yêu cầu họ thực hiện các nhiệm vụ để hiểu liệu thiết kế của tôi có được người dùng hiểu hay không và liệu người dùng có thể sử dụng chúng hay không. Nếu họ nghĩ rằng tính năng này sẽ giúp ích cá nhân họ nếu được triển khai trong ứng dụng thực và yêu cầu họ đưa ra đề xuất nếu có.

Nhiệm vụ được giao cho người dùng —

1)Đi tới phương tiện, liên kết và tài liệu từ màn hình thông tin liên hệ
2)Bạn có thể tìm kiếm loại tệp phương tiện cụ thể không
3)Bạn có thể lọc và xem loại tệp phương tiện bạn muốn xem không
4)Bạn có thể tìm địa điểm không nơi có thể nhìn thấy các tệp chưa sao lưu

Điểm quan sát —

1) Người dùng có thể hiểu được sự phân biệt của các loại tệp phương tiện không?
2) Người dùng có thể điều hướng và tìm loại tệp phương tiện mong muốn của họ không?
3) Người dùng có thể lọc ra một loại phương tiện cụ thể không?
4) Người dùng có thể truy cập các tệp vào tùy chọn sao lưu không?
5) Hiểu xem người dùng có thể hiểu nếu biểu tượng để sao lưu được người dùng nhận ra nhanh chóng hay không?

Thông tin chi tiết và phản hồi từ thử nghiệm khả năng sử dụng-

Người dùng có thể dễ dàng điều hướng từ tab tệp phương tiện này sang tab tệp phương tiện khác
Người dùng nhận thấy tính năng này rất trực quan để sử dụng
Người dùng thấy tùy chọn bộ lọc hữu ích và dễ sử dụng
Người dùng thích tùy chọn chưa được hỗ trợ một cách chu đáo

Phản hồi và quan sát của người dùng trong quá trình kiểm tra khả năng sử dụng

Trong quá trình kiểm tra khả năng sử dụng, tôi thấy rằng người dùng nhận thấy tất cả các tính năng được tích hợp trong nguyên mẫu đều rất hữu ích, tuy nhiên, một trong những người dùng cũng đề xuất thêm tùy chọn để lọc các tab phương tiện để ẩn hoặc hiện các loại tệp phương tiện, không chỉ theo tháng nhưng nhìn chung, đó là chỉ với một cú nhấp chuột để có thể chỉ xem ảnh hoặc chỉ gifs hoặc video hoặc nhãn dán của tất cả các tháng.