Minh Hong

*Một bài viết rất hay của lou.vn, xin về khi nào cần đoc lại

Thỉnh thoảng Phowr nhận được một số câu hỏi như sau: “Sản phẩm của em cần cải thiện UX chỗ nào?”, “Nhờ đánh giá giúp UX của sản phẩm này”, “Em cảm thấy sản phẩm chưa tốt lắm nhưng chưa biết bắt đầu từ đâu?”, “Em đã tối ưu giao diện hết mức như goodui.org rồi nhưng kết quả vẫn chưa như kì vọng”…

Những câu hỏi bên trên xuất phát từ việc chưa có guideline (chi dẫn) chuẩn nào trong tiếp gia tăng trải nghiệm người dùng. Bài viết này sẽ cung cấp một trong số các guideline tiếp cận dưới hình thức UX layers để các bạn tham khảo.

UX layers là gì

Để phân chia trải nghiệm người dùng thành các nhóm chức năng, Jesse James Garett có đề xuất mô hình UX layers gồm 5 lớp để tiện trong việc khoanh vùng các chức năng để tiện cho việc tối ưu.

Mô hình này được đề cập trong cuốn The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter). JJG đã tóm tắt lại một số ý chính: http://www.jjg.net/elements/pdf/elements.pdf

Trong bài viết Phowr sẽ kết hợp UX layers và các kinh nghiệm thực tế triển khai để các bạn tham khảo.

Cấu trúc UX layers

1. Strategy

Strategy plane bao gồm hai phần chính là Product Objectives và User need.

Để tìm hiểu User need, trước tiên cần chỉ ra chính xác “User” của sản phẩm là ai. User need được tìm hiểu thông qua rất nhiều phương pháp như usability testing, focus group, online survey, dummy testing, stakeholders interview v.v.. Bằng việc hiểu chính xác nhu cầu của người dùng MỤC TIÊU (target users) và người dùng TIỀM NĂNG (potential users), người quản lý sản xuất sẽ định hướng lại các mục tiêu sản phẩm của mình hướng tới để đáp ứng tốt hơn nhu cầu của người dùng và thị trường.

Chiến lược UX vừa phải đáp ứng được mục tiêu kinh doanh (business goals), nhận diện thương hiệu (brand identity) và các chỉ số đo lường thành công (success metrics) từ Product Objectives vừa phải cân bằng với nhu cầu người dùng.

2. Scope

Scope plane bao gồm hai phần chính là Functional Specifications và Content Requirements

Functional Specifications là bước brainstorm tính năng và cụ thể hoá các yêu cầu về chức năng giúp giải quyết các yêu cầu từ Strategy plane. Functional Specifications bắt đầu từ việc viết các BRD (Business Requirements Documents), PRD (Product Requirements Documents) và UCD (Use case diagram). Tiếp đó UX team bắt đầu ngồi brainstorm các tính năng để đáp ứng các yêu cầu nghiệp vụ cũng như yêu cầu sử dụng từ phía users. Cuối cùng các tính năng được tổng hợp và thống nhất dưới dạng SAD (System Architecture Document), Cross-functional Diagram.

Content Requirements phụ thuộc vào từng sản phẩm. Thông thường sẽ có một CMS (Content Management System) riêng để đáp ứng nhu cầu đa dạng về content.

Vì các yêu cầu về tính năng thường rất nhiều, vì thế trước khi triển khai cần phân loại ưu tiên các tính năng để đảm bảo thời gian xử lý. Việc xây dựng các tính năng nền tảng luôn cần được ưu tiên cao hơn.

3. Structure

Structure plane bao gồm hai phần chính là Interaction Design và Information Architeture

Interaction Design là cách người dùng tương tác để sử dụng các tính năng ở Scope Plane. Để tối đa hoá mức độ dễ dùng, interaction design có thể dựa trên conceptual model đã có trong thực tế để người dùng dễ hình dung và sử dụng. Lấy ví dụ đơn giản như conceptual model của Amazon là cửa hàng bán lẻ truyền thống. Khách hàng vào xem hàng hoá, cửa hàng chèo kéo khách hàng để mua nhiều hơn v.v…

Ngoài ra, trong quá trình sử dụng, người dùng rất có thể sử dụng sai so với lúc thiết kế, có thể do người dùng không hiểu, sản phẩm quá khó dùng hoặc người dùng cố tình thử thách sản phẩm v.v.. Lúc này cần tính toán xử lý các trường hợp “lỗi” mà người dùng có thể gặp phải để ngăn chặn ngay từ đầu. Ví đụ đơn giản, khi người dùng tìm kiếm sản phẩm, đa phần người dùng sẽ sử dụng phần nội dung gợi ý. Tuy nhiên sẽ có những trường hợp người dùng thao tác quá nhanh và gõ enter trước khi các từ khoá gợi ý hiện ra. Việc thiết kế phải tính toán tới trường hợp người dùng bỏ qua gợi ý tìm kiếm.

Information Architecture là việc cấu trúc thông tin cần thiết sao cho các thông tin hiển thị có ý nghĩa đối với người dùng và đảm bảo cấu trúc các tầng nội dung cho phép người dùng di chuyển dễ dàng.

Ở bước này, đầu ra có thể là danh sách các trang hoặc màn hình (page list hoặc screen list) cần thiết để đáp ứng nhu cầu tương tác và thông tin

4. Skeleton

Skeleton gồm 3 mảng chính là Information Design, Navigation Design, Interface Design

Information Design hướng vào các thông tin cần thiết trong từng page/screen để đáp ứng nhu cầu người dùng. Ví dụ thông tin sản phẩm trên Amazon cần tên sản phẩm, giá, nhà cung cấp, rating, tuỳ chọn màu sắc v.v.

Navigation Design hướng vào liên kết giữa các block nội dung với nhau.

Interface Design hướng vào thể hiện chi tiết các thông tin dưới giao diện trực quan.

Đầu ra của bước này là prototypes hoặc clickable wireframes.

5. Surface

Surface là tầng đập vào mắt, gây ấn tượng với người dùng đầu tiên trước khi người dùng đi sâu vào sử dụng các chức năng liên quan tới các tầng bên dưới. Ở surface plane có sự xuất hiện của UID (User Interface Design) và IxD (Interaction Experience Design). Công việc ở tầng này liên quan nhiều đến đồ hoạ và tương tác chuyển động như: typography, màu sắc, khoảng cách, layout, animation.

Đầu ra của bước này là giao diện graphics hoàn chỉnh về sản phẩm và kịch bản interaction với từng đối tượng khi có trigger.

Kết luận

UX layers tạo ra guideline để tối ưu sản phẩm và cũng phân chia công việc rất rõ ràng. Từ đó giúp tổ chức team UX thành những nhóm chức năng phù hợp để nghiên cứu sâu đáp ứng nhu cầu sản phẩm. Dưới đây là một số hình thức tổ chức team mà J.J.Garett đề xuất.

Nghiên cứu liên quan

Tsitedesign có đưa ra mô hình UX layers mở rộng từ mô hình của J.J.Garett.

Mô hình của Phowr dựa trên khá nhiều mô hình của J.J.Garett, nhưng có thay đổi một chút để đáp ứng nhu cầu agile development.

1. Strategy: BRD, PRD, User research, Brand guide.

2. Scope : SAD, cross-functional diagram, function prioritization -> MVP -> Back-end product (admin) -> base development + back-end development

3. Structure + Skeleton: Page/screen list, module design, information design, navigation design -> Front-end product development -> data processing development

4. Surface: UID, IxD, UI Kit -> Front-end product development with graphics