Case Study: Thiết kế navigation cho một chat app trên PC.
Chat app thì trong cuộc sống hàng ngày hẳn chúng ta đang sử dụng từ 3–5 chat app trên mobile lẫn PC bao gồm Skype, Viber, Line, Kakaotalk, Messenger, vân vân.
Nếu bạn muốn biết các chat app này làm navigation như thế nào thì bạn có thể trực tiếp sử dụng các app này trên PC, ngoài ra bài case study này sẽ giúp các bạn hiểu thêm cách làm navigation cho app.
Trước hết chúng ta đi từ cấu trúc thông tin của chat app PC trước. Như ứng dụng email, chat app cơ bản của chúng ta sẽ sử dụng mô hình bánh xe và nan hoa để từ đó dựng nội dung dần.
Tham khảo: Hiểu cấu trúc thông tin của một trang web để thiết kế sản phẩm (web/hybrid) tốt hơn — Phần 2
Xác định dạng nội dung chính của chat app PC
Chúng ta sẽ có một danh sách các nội dung cơ bản như sau:
- Tin nhắn (trực tiếp với nhau 1:1 hoặc nhóm chat)
- Danh sách bạn bè (Danh bạ)
- Nếu chat app của bạn tập trung vào Social thì sẽ có một nội dung gọi là Timeline: nơi này sẽ chứa các tin tức của bạn bè như một mạng xã hội thu nhỏ.
Riêng với Danh sách bạn bè (Danh bạ) thì chúng ta sẽ phân tích kỹ hơn những thứ này có thể gồm những gì.
Về lý thuyết Danh sách bạn bè hay còn gọi là Danh bạ sẽ là nơi chứa thông tin bạn bè của mình. Nói một cách khác khu vực này sau khi user được điều hướng vào thì không những xem được thông tin bạn bè mà còn có thể làm các việc khác như: Kết bạn, Tạo nhóm chat, Chỉnh sửa profile của chính mình.
Những việc user có thể làm ở trên thì chúng ta xếp chúng vào dạng CTA(Call-To-Action hoặc cũng có thể được hiểu là Call-To-Attention) hoặc microcopy. Mấy cái này thì các bạn design có thể xử lý được về mặt UI hoặc ít nhiều UX tùy vào đối tượng cụ thể.
Phần kế tiếp chúng ta sẽ nói về tính năng Đăng nhập và Kết bạn.
Đăng nhập vào chat app PC
Đăng nhập có 2 dạng:
- Truyền thống: số điện thoại / mật khẩu (có thể có email/username)
- Tích hợp mạng xã hội: Facebook, G+
Một dạng nội dung chúng ta cần phân tích kỹ đó là: Nếu bạn đăng nhập bằng tài khoản FB hoặc G+ thì app chat có thể lưu danh sách bạn bè trên FB hoặc G+ của bạn được không?
Kết bạn
Việc kết bạn được thực hiện hết sức đơn giản:
- Tìm kiếm theo số điện thoại để kết bạn.
- Người nhận được yêu cầu kết bạn sẽ đồng ý hoặc từ chối. Nếu đồng ý thì danh sách bạn bè sẽ được cập nhật thêm 1 người.
Phác thảo navigation
3 mục trên mình đã chỉ ra các nội dung cần thiết (tối thiểu) của một chat app cơ bản khi bạn muốn xây dựng navigation từ đầu. Và vì việc xây dựng navigation luôn là bước đầu tiên và cực kỳ quan trọng có thể ảnh hưởng đến sự mở rộng của chat app trong tương lai nên bạn phải cân nhắc hết tất cả trường hợp phải có.
- Item 1: Tin nhắn
- Item 2: Danh bạ
- Item 3: Timeline hoặc cái khác tùy vào định hướng của bạn
- Item 4: …
Như đã nói ở trên về Đăng nhập và Kết bạn, chúng ta sẽ có 2 loại nội dung sinh ra: đó là Danh sách bạn bè từ FB/G+ và bạn bè được thêm trực tiếp.
Trong 2 dạng bạn bè này chúng ta có thể gọi một bên là Gợi ý kết bạn (Có thể bạn quen) gồm Danh sách bạn bè từ FB/G+ nếu user đăng nhập thông qua FB/G+, ngoài ra khi tham gia vào 1 nhóm chat (group chat) sẽ có trường hợp nhóm chat này có những người đã kết bạn với mình, và những người chưa hề kết bạn với mình.
Tổng hợp lại chúng ta sẽ có 4 loại thông tin: Trong danh sách bạn bè có thể chứa danh sách người đã kết bạn, danh sách gợi ý kết bạn từ FB/G+, danh sách gợi ý kết bạn từ nhóm chat, và danh sách yêu cầu kết bạn từ những người khác.
Hoàn thiện navigation
Sau khi phác thảo được những item cần thiết để giúp user điều hướng thì chúng ta cần xác định rõ phương án điều hướng cho 4 loại nội dung trong item Danh bạ.
Phương án 1: Một item Danh bạ chứa đủ 4 thông tin
Với phương án này thì chỉ có 1 không gian duy nhất hiển thị 4 loại thông tin. Việc đánh giá ưu/nhược điểm sẽ do các bạn designer tiến hành.
Phương án 2:
- Một item Danh bạ chứa danh sách người đã kết bạn, và danh sách yêu cầu kết bạn từ những người khác.
- Một item khác chứa danh sách gợi ý kết bạn từ FB/G+ và danh sách gợi ý kết bạn từ nhóm chat.
Phương án này tỏ ra ưu thế hơn phương án 1 do lúc này mỗi item chỉ tập trung giải quyết 2 vấn đề riêng biệt của 2 dạng thông tin khác nhau.
Sau khi phác thảo & hoàn thiện nội dung cần có khi làm navigation thì chúng ta sẽ bắt tay vào thiết kế mockup, wireframe và UI design luôn.
