UX101: 2 cái nút nhấn
Học lỏm UX cùng Product Design, chuyện bắt đầu từ 2 nút nhấn
Có lần mình và bạn Product Design (PD) cùng review lại UI cho tính năng mà team đang revamp. Trong đó có nhiều dialog (pop-up) xác nhận. Mình thấy lạ vì có lúc bạn PD đặt 2 button nằm ngang bằng nhau, có lúc thì bạn đặt 2 button nằm trên dưới. (Cái này mình chưa biết) nên mình buột miệng hỏi liền luôn để làm rõ luôn về ý nghĩa của 2 cách sắp xếp như thế.
Đặt đâu cũng có lý do
Cách sắp xếp chúng cạnh nhau hoặc trên dưới, hóa ra không phải mỗi chuyện thẩm mỹ. Nó là một quyết định có chủ đích, đằng sau là câu hỏi: mình đang muốn khách hàng làm gì tiếp theo.
Secondary action bên trái, primary action bên phải: đây là convention rất phổ biến trong giao diện đọc trái sang phải, nhất là ở form, dialog, các nhóm action. Primary nằm ở cuối luồng thị giác, tạo cảm giác đây là hành động tiếp theo, là đích đến của cả nhóm thao tác
Primary action bên trái, secondary action bên phải: đảo ngược lại, primary được đưa lên vị trí đầu tiên, tạo sự ưu tiên về mặt thị giác ngay từ đầu. Nhưng đây thường là convention của một design system hay platform cụ thể, không hẳn đồng nghĩa với việc người dùng sẽ hành động nhanh hơn
Bố cục dọc, primary action trên hoặc dưới: trên mobile, thứ tự này ảnh hưởng tới khả năng tiếp cận bằng ngón cái. Primary nằm phía dưới thường dễ bấm hơn khi nhóm nút ở gần đáy màn hình. Nhưng vị trí xa hơn chưa chắc là cố ý tạo friction mà nó có thể chỉ đến từ hierarchy hoặc reading order của cả layout (ai rõ chỗ này thì cho mình thêm ý kiến)
Và khi hai nút nằm ngang hàng nhau, cùng size, cùng mức độ nổi bật, đó cũng là một lựa chọn có chủ đích. Nó tạo cảm giác cả hai có trọng số ngang nhau, không bên nào được ưu tiên rõ rệt, buộc người dùng phải đọc và cân nhắc thật sự trước khi chọn, thay vì bấm theo quán tính.
Bản thân vị trí primary action hay secondary action tạo ra những sắc thái khác nhau về visual hierarchy, về luồng đọc, về độ dễ chạm tới của hành động. Còn ý đồ thật sự nằm ở việc người làm thiết kế chọn sắc thái nào cho đúng ngữ cảnh. Không có cách nào đúng tuyệt đối, chỉ có cách nào đúng với cái mình đang muốn dẫn dắt người dùng (lời bạn PD nói)
Đào sâu thêm chút
Tiện thể làm các luồng liên quan đến việc revamp giao diện, mình hỏi luôn bạn PD về một số nguyên tắc trong UX/UI. Mặc dù có thể mình đã từng nghe qua, nhưng giờ mình chưa chắc nhớ. Đây cũng là lúc làm trực tiếp (hay còn gọi là skin in the game), nghe từ người thực tế thì sẽ hiểu và nhớ lâu hơn.Ý tưởng nó đại loại như này:
Đầu tiên là Hierarchy (Visual hierarchy). Hiểu đơn giản là cách sắp xếp và nhấn mạnh các thành phần để dẫn mắt người dùng theo đúng thứ tự quan trọng. Hierarchy có thể được tạo ra bằng nhiều yếu tố như kích thước, màu sắc, sắc độ, độ tương phản hoặc vị trí.
Ví dụ, nếu một màn hình có hai hành động quan trọng khác nhau nhưng cả hai đều được thiết kế nổi bật như nhau, người dùng có thể không biết đâu mới là hành động chính. Vấn đề không phải là hai nút không được phép nổi bật cùng nhau, mà là mức độ nổi bật của UI nên phản ánh đúng mức độ ưu tiên của hành động.
Đi cùng với hierarchy là Proximity, nguyên tắc về khoảng cách và grouping. Nếu hierarchy giúp người dùng nhận biết mức độ ưu tiên của các thành phần, thì proximity dùng khoảng cách để thể hiện mối quan hệ giữa các thành phần với nhau. Những thành phần có liên quan nên được đặt gần nhau để người dùng dễ nhận ra chúng thuộc cùng một nhóm thông tin hoặc cùng một hành vi.
Ví dụ, trên trang HomePage dịch vụ tiện ích có 2 nhóm tính năng liên quan Thanh toán hoá đơn (Điện / Nước / Internet / Khoản vay) và liên quan Điện thoại (Nạp tiền / Mua mã thẻ / Nạp data). Nếu không có grouping rõ ràng, người dùng sẽ phải đọc từng dòng để tìm thứ mình cần. Nhưng nếu các lựa chọn được nhóm thành những section có label rõ ràng, người dùng có thể scan nhanh hơn rất nhiều và giảm được cognitive load
Tiếp theo là Balance, cân bằng về mặt thị giác. Balance không có nghĩa là mọi thứ phải được chia đều hoặc đối xứng tuyệt đối, mà là cách phân bổ visual weight giữa các thành phần để layout có cảm giác ổn định, có chủ đích và không khiến sự chú ý bị dồn bất hợp lý vào một khu vực.
Và Consistency, tính nhất quán. Cùng một loại hành vi, cùng một loại nội dung hoặc cùng một pattern tương tác thì nên được thể hiện nhất quán xuyên suốt sản phẩm. Nếu một màn hình dùng tab để điều hướng nhưng một màn hình khác lại dùng một pattern hoàn toàn khác cho cùng một loại interaction, người dùng có thể phải học lại cách sử dụng mỗi khi chuyển sang một context mới. Đó là một dạng friction không cần thiết.
Bốn nguyên tắc này, Hierarchy, Proximity, Balance và Consistency, trở thành một cái khung khá hữu ích để bạn PD review lại từng màn hình trong các tính năng đang UI revamp để cho nó hợp lý và đồng bộ với phần còn lại của cả app.
Mắt người dùng sẽ nhìn vào đâu trước?
UI có thể hiện đúng mức độ ưu tiên của các hành động không?
Những thành phần liên quan đã được grouping hợp lý chưa?
Visual weight của màn hình có cân bằng không?
Pattern này có nhất quán với phần còn lại của sản phẩm không?
Ngày xưa tự học UX
Nhắc đến việc tự học UX. Lúc mình còn loay hoay chuyển từ dân kỹ thuật sang làm product, mình nhớ có dùng cái hình bên dưới làm kim chỉ nam để học bổ sung thêm các kỹ năng còn thiếu để đi ‘vào ngành’ (đi apply job). Tự soi lại mình thì thấy rõ, Tech và Business / Data tương tự cũng có thể va chạm (học/đọc thêm qua các khoá học). Tuy nhiên còn UX, nói thật, mơ hồ nhất lúc đó với mình. Không hẳn biết bắt đầu từ đâu và học như thế nào là chuẩn
Rồi mình cũng mò đi học khóa UX của Google trên Coursera hồi đó để bù đắp sự thiếu hụt kiến thức về UX này. Nhưng bắt đầu học từ 2022 mà tới 2024 mới kết thúc xong (vì động lực học UX nó yếu yếu vì lúc đấy đang làm đa phần sản phẩm về mặt hệ thống / tech khá nhiều).
Học xong cũng có kiến thức cơ bản đấy nhưng để nói nhớ được liền thì đấy là một câu chuyện khác. Cho tới bây giờ sau khi làm nhiều về những tính năng user facing thì mới tìm xem lại mới lý thuyết cũ thì thầy cũng cũng hợp lý. Còn giờ học lỏm Product Design không giáo trình, không bài bản mà ngấm dữ dội hơn.
Kết / UX trong thời đại AI
Nhớ hồi xưa còn hình dung lộ trình người dùng (user flow) đi qua để hoàn thành một tác vụ. Sau đó tới wireframe, bản phác thảo thô để cả team thống nhất trước khi đi vào chi tiết. Sau đó PD mới triển khai design chi tiết, trong lúc triển khai đó họ áp dụng những nguyên tắc hierarchy, proximity, balance, consistency vào quá trình. Còn dạo này thì AI tạo UI nhanh kinh khủng. Gõ một câu, ra cả một cái web, cả một ứng dụng đầy đủ. Đẹp, đủ component, đủ màu.
Nhưng không biết có bao nhiêu người dừng lại hỏi trong bối cảnh đó thì nên sắp xếp chi tiết sao cho hợp lý. Chẳng hạn như ví dụ 2 nút nhấn nằm ngang nhau hay xếp trên dưới, được đưa vào ở bối cảnh thế nào. Mấy cái nho nhỏ nhưng chứa đủ ý đồ của UX.
AI có thể generate ra một UI đúng chuẩn convention. Nhưng cái ý đồ đằng sau theo mỗi bối cảnh, chọn primary nằm đâu, guide người dùng theo hướng nào, thì vẫn là con người phải quyết —> Human still need to be in the loop.
Khi AI đã quá mạnh về phần execution thì ta tìm về những điều cơ bản để biết thật sự mình cần làm gì. Peace !!
P/s: Về nguồn học UX thì bạn vẫn có thể tìm lại trong Resource Hub của mình
