Xác định sớm các mẫu chức năng

Trong quá trình xây dựng design system, việc sớm xác định các mẫu chức năng của giao diện là vô cùng quan trọng. Bằng cách này, chúng ta có thể đảm bảo tính nhất quán và hiệu suất của hệ thống thiết kế, đồng thời tạo điều kiện thuận lợi cho quá trình phát triển và bảo trì sau này.

Các nhận định ban đầu.

Trong việc xác định các thành phần và mẫu chức năng, tôi đã sử dụng một ví dụ về trang web nấu ăn trong vòng 10 phút trong bài viết sử dụng tư duy chung. Điều quan trọng là phỏng đoán các chức năng chính mà người dùng sẽ cần khi sử dụng trang web như chọn nguyên liệu, chọn công thức và xem các bước thực hiện.

Tôi gọi những phần tử tạo nên các chức năng này là "mô-đun", và chúng có thể đơn giản hoặc kết hợp lại để tạo ra những tính năng phức tạp hơn. Mỗi mô-đun có thể thay đổi phù hợp với loại sản phẩm đang triển khai.

Ví dụ, một "thẻ thành phần bữa ăn" có thể bao gồm tiêu đề món ăn, hình ảnh, nguyên liệu, icon và nút thực hiện hành động. Các mô-đun này được kết hợp với nhau để tạo ra một trải nghiệm thú vị và khuyến khích người dùng tham gia vào hoạt động nấu ăn.

Quan trọng hơn, khi sản phẩm phát triển, các mô-đun này cũng phát triển theo để phản ánh các nhu cầu mới của người dùng và yêu cầu của sản phẩm, không hề cố định và luôn linh hoạt.

Mô hình phát triển, hành vi vẫn còn.

Trong quá trình phát triển, các thành phần và mẫu chức năng vẫn tiếp tục thay đổi và cải thiện. Điều quan trọng là dù giao diện có thay đổi, tính năng chính của chúng vẫn được giữ nguyên.

Ví dụ, một thanh tiến trình trên một trang web học tập có thể trải qua các thay đổi về giao diện và cập nhật tính năng mới theo thời gian. Tuy nhiên, dù có sự thay đổi nào đi chăng nữa, tính năng chính của thanh tiến trình vẫn là hiển thị tiến trình học tập của người dùng trên hệ thống.

Ban đầu, các thành phần hoặc mẫu chức năng có thể không hoàn hảo về mặt thiết kế hoặc chức năng. Tuy nhiên, điều quan trọng là phải xác định được chúng phục vụ cho loại hành vi nào và đảm bảo tính nhất quán trong trải nghiệm người dùng.

Cách xác định các mẫu chức năng

Thay vì dựa vào phỏng đoán, chúng ta có thể sử dụng các bản đồ hành trình người dùng, như Activity Diagram, để xác định các mẫu chức năng chính mà người dùng sẽ cần trong quá trình trải nghiệm sản phẩm. Các sơ đồ này giúp chúng ta hiểu rõ hành vi chính của người dùng và xác định các mẫu chức năng phù hợp với từng hành vi đó.

Việc này giúp tránh bị cuốn vào tiểu tiết của giao diện và tập trung vào mối liên kết giữa các mẫu chức năng và hành vi của người dùng.

Sau khi dựa vào các bản đồ hành trình người dùng, chúng ta có thể xác định các mẫu chức năng cơ bản sẽ có trong hệ thống. Bước tiếp theo là phân loại chúng theo mục đích của từng mẫu chức năng, không tập trung quá nhiều vào chi tiết như button hay icon, mà tập trung vào mục đích của chúng để phân loại.

Ví dụ, trang web về nấu ăn trong 10 phút có thể có các mẫu chức năng như: Khám phá, Tìm kiếm, Công thức. Các mẫu chức năng sẽ được phân loại theo từng nhóm để có cái nhìn tổng quan về sản phẩm.

Tiến hành kiểm kê giao diện

Tiến hành kiểm kê giao diện là một bước quan trọng trong quá trình phát triển và duy trì design system. Mỗi mẫu chức năng thường được cấu tạo từ nhiều mô-đun khác nhau, và việc phân loại những mô-đun này theo các danh mục cụ thể như Biểu mẫu, Tab, Nút, Danh sách là cần thiết.

Khi kiểm kê giao diện, bạn có thể nhận ra rằng có nhiều mô-đun nhỏ trùng lặp nhau. Trong trường hợp này, việc thống nhất các mô-đun này thành một dạng duy nhất sẽ giúp cho thiết kế trở nên gọn gàng và đồng nhất hơn. Việc này cần được thực hiện thường xuyên, ngay cả khi sử dụng một thư viện mẫu, vì việc phát sinh các mẫu mới là không thể tránh khỏi.

Đề xuất thực hiện kiểm kê giao diện hàng tháng là một cách hiệu quả để đảm bảo rằng tất cả các mẫu chức năng mới được phân loại và kiểm tra một cách đúng đắn. Tương tự như việc kiểm tra hàng trong kho, điều này có thể tốn thêm một vài giờ của bạn, nhưng đáng giá vì mỗi lần kiểm kê, bạn sẽ nhận ra nhiều điều thú vị và hữu ích.

Xem mẫu chức năng dưới dạng hành động

Xem mẫu chức năng dưới góc độ của hành động là một cách tiếp cận hữu ích để tạo ra các mẫu chức năng linh hoạt và có thể tái sử dụng trong hệ thống. Thay vì gọi các mẫu chức năng bằng các tên thông thường như "công thức nấu ăn" hoặc "công thức nguyên liệu", ta có thể đặt tên chúng theo hành động hoặc mục đích cụ thể của chúng như "cung cấp thông tin" hoặc "thông tin nguyên liệu".

Bằng cách tập trung vào hành động của mỗi mẫu chức năng, ta có thể dễ dàng kết nối chúng với hành vi của người dùng. Điều này giúp ta linh hoạt hơn trong quá trình thiết kế, cho phép ta áp dụng các mẫu chức năng cho nhiều trường hợp sử dụng khác nhau mà không cần thay đổi quá nhiều. Đồng thời, cách tiếp cận này cũng giúp tạo ra một hệ thống logic và dễ hiểu cho người dùng khi tương tác với sản phẩm.

Sắp xếp mẫu theo thang đo sự tương phản

Sắp xếp các mẫu chức năng theo mức độ tương phản là một cách hiệu quả để tăng tính hiệu quả và dễ sử dụng trong quá trình thiết kế. Ví dụ, khi bạn có nhiều mẫu chức năng với cùng một mục đích sử dụng là quảng cáo, bạn có thể sắp xếp chúng từ mức độ nổi bật nhất đến ít nổi bật nhất. Điều này giúp người dùng dễ dàng lựa chọn và sử dụng mẫu quảng cáo phù hợp nhất trong quá trình thiết kế.

Thông qua việc sắp xếp theo thang đo sự tương phản, bạn có thể tạo ra sự tương phản rõ ràng giữa các mẫu chức năng, từ đó giúp người dùng dễ dàng nhận biết và chọn lựa. Đồng thời, việc sắp xếp này cũng giúp tăng tính hợp lý và hiệu quả của giao diện, đảm bảo rằng người dùng sẽ không bị lạc hướng khi tương tác với sản phẩm.