#ui_design

Một lợi ích khác của việc sử dụng Question labels là chúng có thể giúp mô tả loại dữ liệu. Ví dụ, một label như "Storage" là một từ đơn và không có nhãn mô tả (descriptors) gì. Tuy nhiên, Question label như "How much storage?" giúp người dùng hình dung dữ liệu như một thứ có thể định lượng được. Những chi tiết tinh tế như vậy sẽ giúp người dùng suy nghĩ về dữ liệu họ sẽ điền cho mỗi trường.

Tối ưu Label Flow

Khi sử dụng Question labels, bạn không nên để nó quá dài. Đó là lý do bạn cần tạo ra một flow tối ưu cho Label của các trường thông tin từ đầu đến cuối biểu mẫu.

Biểu mẫu của bạn nên bắt đầu với một tiêu đề nêu rõ nhiệm vụ cần thực hiện. Tiêu đề nên được thiết kế lớn, đậm, và chú trọng đến hành động (action-oriented). Ví dụ, tiêu đề như "Buy Pro Computer" sẽ chỉ rõ nhiệm vụ mà người dùng cần hoàn thành là gì.

Theo sau tiêu đề là Question label cho các trường nhập thông tin. Những Label này nên được viết như một sự tiếp diễn của tiêu đề hơn là một câu hỏi độc lập. Chẳng hạn, sau tiêu đề "Buy Pro Computer", label tiếp theo nên là "Which model?" thay vì "Which model would you like?". Cắt bớt số lượng chữ trong label sẽ giúp người dùng dễ scan hơn.

Một Commanding label (Nhãn dạng mệnh lệnh) có tốt hơn một Question label? Chẳng hạn, "Choose a model" là một Commanding label. Một mệnh lệnh truyền đạt yêu cầu với một giọng điệu hung hăng có thể sẽ khiến người dùng mất hứng. Ngược lại, Question labels thường mang một tông giọng cởi mở và thân thiện, nhờ đó thu hút người dùng hơn.

Bên cạnh đó, Question labels cũng mang nặng information scent (những thông tin chỉ dẫn người dùng đến đích họ cần) hơn là một Commanding labels. Sử dụng Commanding labels có thể gây ra sự thừa thãi vì chúng đều bắt đầu bằng "Choose a...". Với Question labels, bạn có thể tùy biến nó theo cách mô tả kiểu dữ liệu. Một vài biến thể mà bạn có thể sử dụng cho một Question Label như: Which..., What…, When…, Where…, Who…, Would you like…, Do you want…, Will you…, Are you…, How much…, How many…

Xác nhận cho cuộc trò chuyện

Đây là một cách tiếp cận mới để xác nhận dữ liệu người dùng đã điền. Và nó chỉ hiệu quả khi đi kèm với Question label. Question labels đưa cho người dùng 1 câu hỏi, và họ sẽ trả lời bằng cách chọn một lựa chọn hoặc là nhập dữ liệu của riêng mình. Sau đó, biểu mẫu sẽ phản hồi với một dòng chữ xác nhận bên cạnh Question label.

Chẳng hạn, sau khi người dùng đã chọn, bạn có thể xác nhận bằng cách cho thể hiển thị dòng "Nice choice!" để người dùng an tâm là họ đã thực hiện thao tác thành công. Bằng cách này, việc thực hiện các tác vụ trên giao diện sẽ trở nên giống như một cuộc hội thoại. Mặc dù nó không phải một cuộc hội thoại thật sự, nhưng trong tiềm thức người dùng vẫn sẽ cảm nhận được có ai đó đằng sau thiết kế kia đã bỏ công bỏ sức ra săn sóc những trải nghiệm của họ.

Info icon

Tuy nhiên, không phải lúc nào người dùng cũng cần một trang tài liệu hỗ trợ để hoàn thành tác vụ. Đôi lúc, thứ họ cần chỉ là vài thông tin bổ trợ cho một phần tử cụ thể trên màn hình. Trong trường hợp này, bạn nên sử dụng một Info icon để cung cấp cho họ một đoạn ngắn những thông tin hữu ích mà không cần phải đưa người dùng ra khỏi màn hình hiện tại. Bạn có thể đặt Info icon cùng dòng với chức năng cần giải thích để cung cấp thông tin cụ thể cho nó.

Những trường hợp dùng Info icon

Một cách sử dụng điển hình của Info icon là đi kèm với những trường nhập thông tin không rõ ràng trong các biểu mẫu. Chẳng hạn như một trường nhập số điện thoại mà người dùng muốn biết dữ liệu của họ sẽ được sử dụng như thế nào. (Hình 1)

Một Info icon sẽ cung cấp những thông tin đúng ngữ cảnh, khiến người thoải mái hơn về việc cung cấp số điện thoại. Bởi vì chỉ có thể hiển thị một đoạn thông tin ngắn, bạn có thể trình bày nó như một gợi ý (tooltip) hiện ra khi người dùng click vào Info icon.

Một ví dụ khác là khi người dùng đứng giữa nhiều lựa chọn nhưng không chắc chắn nên chọn cái gì. Lúc này, cung cấp thêm thông tin về các lựa chọn bằng Info icon sẽ giúp người dùng đưa ra quyết định chính xác (Hình 2).

Nếu lượng thông tin quá nhiều, bạn có thể sử dụng một hộp thoại (modal card) thay cho một tooltip. Một hộp thoại sẽ cho phép bạn có thêm không gian để trình bày thông tin với nhiều tùy chọn định dạng hơn. Bạn thậm chí có thể thêm cả hình ảnh vào nếu cần thiết.

Những trường hợp sử dụng Question Mark

Một vị trí phổ biến thường đặt Question Mark là bên trong các menu (Hình 1). Menu là nơi người dùng sử dụng để tìm kiếm những thứ cụ thể, vì vậy nếu cần giúp đỡ, họ sẽ tự nhiên có xu hướng tìm đến đây. Tuy nhiên, hãy đảm bảo rằng bạn đã phân tách riêng mục trợ giúp ra khỏi các mục nội dung khác để người dùng có thể tìm và truy cập trợ giúp nhanh nhất.

Bạn cũng có thể đặt Question Mark ở các góc của cửa sổ (Hình 2). Mỗi cửa sổ bật lên đều có một ngữ cảnh cụ thể. Nếu người dùng cần giúp đỡ trong ngữ cảnh đó, họ sẽ click vào biểu tượng Question Mark và đi đến trang tài liệu hỗ trợ (help documentation page). Đặt Question Mark ở góc dưới bên phải hoặc bên trái, như vậy nó sẽ không ảnh hưởng đến phần nội dung.