7 ngày tái thiết kế ứng dụng Zalo

App Zalo hẳn là được hàng trăm người, từ UX, UI đến lập trình viên, đến QC và nhiều bộ phận khác nữa, chung tay xây dựng nên cùng với hàng tỉ dữ liệu có được nên chắc chắn họ biết phải đặt cái nào ở vị trí nào, vì sao...

Bài viết dựa trên quan điểm của tác giả Vũ Hoàng Tâm.

Để làm app cho 100 triệu người dùng chưa bao giờ là vấn đề đơn giản. Bài này sẽ nói lại quá trình tác giả tái thiết kế (redesign) một số màn hình cho ứng dụng Zalo. Phạm vi bài này là về UX Design, không phải UI Design vì tác giả chỉ dùng Sketch để phục vụ cho công việc Product Design.

Bản vẽ lại được phân tích dựa vào bản 20.03.02 của Zalo (iOS) và bài này được thực hiện trong khoảng 1 tuần, trung tuần tháng 4/2020.

Nguồn ảnh: Dribbble​

Chia “dự án” làm 3 giai đoạn nhỏ:

Nghiên cứu:

• Làm một bảng khảo sát nhỏ bằng Google Form và có 28 đáp viên
• Đọc một số Desk Research tìm được trên Google
• Nghiên cứu thị trường và đối thủ của Zalo

Chuẩn bị:

• Phác hoạ một vài persona
• Đề ra mục tiêu của việc redesign này đem lại gì
• Sketch (vẽ nháp ra giấy)
• Vẽ LoFi (Low-Fidelity)

Thực hiện:

• UX (và một chút UI Design)
• Usability Testing
• Recap & Why
• Kết luận

I. Nghiên cứu

1. Online Survey

Chiếc survey nho nhỏ thực hiện vài hôm trước​.

Toàn bộ trang chủ của app Zalo được chia ra thành 10 phần để hỏi như sau:

Sau khi có kết quả survey từ dân tình, đem chúng trần sơ qua một lần đạo-hàm rồi đem vào nồi tích-phân để hấp cách thuỷ khoảng 30 phút thì đem ra ngoài trời nơi có sức gió đang dưới 10km/giờ, trời quang mây tạnh, tầm nhìn xa trên 10km. Sau cùng bình-phương kết quả chán chê xong thì lại khai căn bậc 2 cho nó cho ráo nước, xong xuôi thì nêm nhẹ hàm logarit, đợi khoảng 5 phút thì ốp nó khuông Fibonacci, quánh nhẹ trọng số là ra được:

1. Vào ô Tìm kiếm: 3.36/5
2. Lướt tìm ai đó/ nhóm để chat: 3.79
3. Vào mục Danh bạ: 2.50
4. Vào mục Nhóm: 2.11
5. Vào mục Nhật ký: 2.71
6. Vào mục Thêm: 2.11
7. Bấm biểu tượng chat có dấu cộng: 1.93
8. Bấm biểu tượng dấu cộng: 2.61
9. Bấm nút Random Chat: 1.29
10. Chat với người được Zalo gợi ý: 1.54

Và câu hỏi mở, tác giả thu gom và phân loại được các đáp án sau:

Tiếp tục lần mò các Desk Research và có được vài insight như sau:

• Đối thủ chính của Zalo là Facebook Messenger (và cả Facebook, vì Zalo có phần Nhật ký).
• Zalo dành cho mối quan hệ thân thiết hơn, FB Messenger cho đối tượng rộng hơn.
• Facebook Messenger áp đảo Zalo hoàn toàn, trừ 2 tính năng là Gửi Hình và Voice Message.
• Đây là những thứ mà người dùng chọn dùng ở Zalo:

Nguồn: Q&Me​

Trong khi đó, trên thế giới là:

Nguồn: Medium​

II. Chuẩn bị

1. Persona

Hai Le, 38 tuổi, business owner, event organizer
Cựu nhân viên VNG, thường xuyên chạy bộ và chơi các trò chơi vận động cùng con gái. Thường xuyên dùng Zalo cho công việc để quản lý các nhóm PG và vài đối tượng khác.

Xuyen Le, 24 tuổi, office worker
Nhà ở Bà Rịa, lên Sài Gòn làm việc. Thích thơ văn, hay sáng tác những nội dung ngộ nghĩnh đáng yêu tuổi mới lớn trên các mạng xã hội. Vừa giảm cân được mười-mấy kilogram nên rất chú trọng ăn uống và sức khoẻ. Thường xuyên dùng Zalo để thăm hỏi gia đình, người lớn.

Mai Nguyen, 28 tuổi, office worker
Nhân viên văn phòng, có con nhỏ, thường lưu trữ hình và video clip của con để chia sẻ cho người thân bằng Zalo và dùng Zalo để chat công việc với đối tác.

2. Mục tiêu

• Zalo có một phần lớn người dùng là người lớn, không rành về công nghệ, chẳng hạn như cài Zalo để giữ liên lạc với con cái ở thành thị. Vì vậy cần đơn giản hoá. Trong quá trình tác giả phỏng vấn trực tiếp thì rất nhiều người dùng loay hoay bởi các nút bấm gây nhầm lẫn của Zalo.
• Giúp user dễ dàng tìm kiếm hơn.
• Giúp user dễ dàng quản lý profile của mình hơn.

3. Sketch giấy

Sau khi vứt đi một xấp giấy A4 thì thứ còn lại là:

​

4. LoFi

III. Thực hiện

Trang Home

Bạn thích Trái hay Phải hơn?

Bản vẽ lại có gì hay ho: Trong quá trình làm Usability Testing, tác giả đưa ra một đề bài như là tạo nhóm, gửi hình HD kèm chú thích... thì rất nhiều người lúng túng thao tác trên giao diện hiện tại của Zalo. Cụ thể:

• Việc vừa có icon-chat-và-dấu-cộng và icon-dấu-cộng là thừa. Icon Chat-và-dấu-cộng kiêm 2 nhiệm vụ là tìm ai đó để chat (trùng chức năng Tìm kiếm) và tạo nhóm (trùng icon dấu-cộng lẫn menu Nhóm ở bottom-menu).
• Điểm số user chạm vào Random chat và Gợi ý chat là cực thấp. Tác giả bỏ vì “đất vàng” mà để lung tung xong người-dùng không dùng, rối.
• Thêm green-dot để nhận biết ai đang online.
• Loại bỏ Danh bạ và Nhóm ở bottom-menu; Đổi menu Thêm thành Profile.

Trang Search

Bên phải là bản redesign​.

• Phần Recent Results hoàn toàn sai vì tác giả không hề tương tác gì các user này.
• Gợi ý 3 người. Vì sao còn dư diện tích nhưng phải bấm Load more sớm vậy?
• Chắc không ai biết đằng sau Suggested OA còn có thể mở ra, lướt qua để tìm các nhóm chat.
• Gõ đại và Zalo đã đưa ra kết quả gì gì khó hiểu quá.
• Đang tìm kiếm cái này thì để icon scan QR code làm gì?
• Ở bản vẽ lại:
  • Chỗ tìm kiếm vẫn để icon-dấu-cộng vì tìm kiếm là có khả năng đang tìm ai đó và lúc đó có thể dùng icon-dấu-cộng để thêm/ tìm bằng số điện thoại.
  • Khi out focus (bấm vào vùng tối để con trỏ không nằm ở chỗ gõ chữ để tìm kiếm nữa), sẽ có các tab như Recent (những nội dung search gần đây), Group (các nhóm chat)...; Cải thiện giao diện add người được gợi ý (chỗ này sẽ cần dùng đến tính năng ẩn của hệ điều hành: swipe (quẹt ngang, cụ thể là sang trái) để xoá nếu không muốn tương tác người được gợi ý).

Trang Nhắn tin

• Cải thiện font chữ và cách trình bày cho thoáng đãng hơn.
• Đảo vị trí cụm icon như hình:
  • Icon-dấu-cộng: Có version thì Zalo dùng icon cái ghim kẹp giấy, có version thì dùng dấu ba chấm. Theo tác giả cả 2 icon đều sai trong ngữ cảnh này:
    • Icon ghim kẹp giấy liên tưởng gửi file trong khi bấm vào thì nào là gửi location, vẽ doodle, chuyển tiền...
    • Icon ba chấm hoàn toàn không phù hợp. Có ai phản bác?
    • Và đây là tính năng không phải chủ đạo nên cho dạt ra bìa (chỗ này ngón tay khó bấm hơn vì sát mép).
  • Di chuyển icon gửi hình vào trong. Vì sao? Xem bên dưới.

Trang Gửi ảnh

​

• Khi chọn chức năng gửi ảnh thì sẽ có thêm icon HD. Gửi ảnh là tính năng được dùng nhiều hơn FB Messenger và gửi ảnh HD là khác biệt so với FB Messenger. Phải promote rõ.
• Khi Usability Testing có “đề bài” là “Hãy gửi 1 ảnh HD có kèm caption”. Tất cả đáp viên đều không làm được.
• Bản redesign khác ở chỗ tự chuyển phần tin nhắn thành soạn caption để khi soạn và bấm gửi thì mặc nhiên đó là caption của hình. Sau khi gửi thì khác nhau như thế nào:

Gửi nhiều ảnh sẽ thấy đây là issue​.

Trang Profile

• Không có dữ kiện gì về mức độ sử dụng chức năng scan QR code trên app Zalo nên cứ để lại.
• Đổi Thêm (More) thành Profile vì nay Zalo đã cho đăng nhập nhiều tài khoản lên một mobile và chỗ này sẽ dùng Haptic Touch để thêm/ chuyển đổi tài khoản, kiểu như Telegram.
• Bỏ nguyên khối Top Selling vì tác giả đánh giá mức độ liên quan giữa cá nhân và món hàng được trưng ở đây không có chút liên quan nhau. Dù đã ẩn/ hủy theo dõi rất nhiều nhưng không thấy Zalo cải thiện.
• Bỏ nguyên khối Sticker đi vì Sticker đã có chỗ của Sticker (lúc nhắn tin).
• Gộp chung 2 màn setting vào 1 và siêu gọn, gói gọn trong 1 màn hình, khỏi phải scroll. Đồng thời là việc gộp nhóm và dẹp bớt vài thứ không cần thiết. Cụ thể:
  • Vì sao phải vào thêm 1 bước nữa chỉ để bật/ tắt dark mode? (Chỗ Theme). Dùng luôn nút bật tắt của hệ điều hành cho nhanh.
  • Notifications có thể tuỳ chỉnh trên hệ điều hành.
  • Trùng tính năng chuyển đổi tài khoản (Switch Account) ở 2 màn trên bản hiện hữu.
  • Và có vài cái theo quan điểm cá nhân là không có cũng chả sao, ví dụ Danh bạ.

Sau tất cả thì đây là “bãi chiến trường”, thiếu mất 1 mobile do cầm chụp hình này.

Vũ Hoàng Tâm