Interaction Pattern

Definition

Trước mắt hãy hiểu về term “ interaction ”

Nó là quá trình tương tác diễn ra khi con người {hành động-trigger} gì đó trên một {objects} thì system sẽ {phản hồi - feedback} gì đó.

— và ngược lại —

có khi object sẽ {hành động-trigger} gì đó lên con người thông qua các {giác quan} để con người nhận được {tín hiệu - thông điệp} gì đó.

>> Quá trình này ta gọi là tương tác. Nó gồm 3 thành tố chính:

Trigger (command, input, auto detect…)

Object (button, page scrolling, checkbox…)

Feedback (toast, change, status…)

Lấy một ví dụ:

Khi bạn {chạm} vào một cái {nồi nước đang sôi} thì bạn thấy nó {nóng & đau - feedback} >> đây là một tương tác.

Khi máy điện thoại cần thông báo có {tin nhắn mới} cho bạn, chúng sẽ báo hiệu qua {run nhẹ kèm âm thanh} để bạn nhận biết có thông báo gì đó mới.

“ Pattern ” là một cái gì đó diễn ra lặp đi lặp lại. Trong bối cảnh nói trong chuyên môn thì nó có thêm nghĩa như sau: Pattern = Một cách làm sẵn + Dùng đi dùng lại + Hiệu quả đã được chứng minh.

Vậy gộp lại “ interaction pattern ” là một giải pháp thiết kế lặp lại để xử lý một tình huống tương tác phổ biến giữa người dùng và hệ thống. Nó giống như một công thức được ghi nhận, chuẩn hóa, và áp dụng nhiều lần để mang lại trải nghiệm nhất quán, hiệu quả, và quen thuộc cho người dùng.

Type of interaction patterns (high level)

1. Navigational Patterns

Actions that help users move through an interface, system, or information space.

Clear Entry Points (Điểm vào rõ ràng): Xác định các điểm truy cập chính để người dùng có thể dễ dàng bắt đầu sử dụng hệ thống.

Hub and Spoke (Mô hình Hub và Spoke): Trung tâm là trang chính, và người dùng điều hướng đến các trang phụ (spokes) từ trang này và trở về trung tâm sau khi hoàn thành nhiệm vụ. Ví dụ: bottom sheet, modal,…

Pyramid Structure (Cấu trúc hình tháp): Người dùng bắt đầu từ một điểm chính và điều hướng theo các nhánh để hoàn thành nhiệm vụ. Ví dụ: sub page,…

2. Command Patterns

Actions where the user tells the system to do something — usually triggers an operation.

Explicit Actions (Hành động rõ ràng): Người dùng thực hiện các hành động rõ ràng, trực tiếp thông qua các nút lệnh hoặc biểu tượng. Ví dụ: trên google map sau khi ta click chọn “nhà hàng” thì ngay lập tức trên map chỉ hiển thị các nhà hàng.

Implicit Actions (Hành động ngầm): Hệ thống tự động thực hiện các hành động dựa trên ngữ cảnh hoặc thói quen của người dùng mà không cần lệnh trực tiếp. Ví dụ: cơ chế phân phối feed trên facebook…

Batch Actions (Hành động hàng loạt): Người dùng có thể thực hiện một loạt hành động cùng lúc thông qua các công cụ như chọn hàng loạt, sao chép, hoặc xóa. Ví dụ: tạo một feed mới trên facebook cần phải viết caption, thêm hình, chỉnh sửa trang trí… rồi mới đăng.

3. Input Patterns

Actions where the user provides data for the system to process or store.

Form Entry (Nhập liệu qua biểu mẫu): Người dùng điền thông tin vào các biểu mẫu truyền thống với các trường văn bản, dropdown, checkbox, v.v.

Direct Manipulation (Tương tác trực tiếp): Người dùng thao tác trực tiếp với các đối tượng giao diện để chỉnh sửa hoặc di chuyển chúng.

Inline Editing (Chỉnh sửa trực tiếp): Cho phép người dùng chỉnh sửa nội dung ngay tại vị trí hiển thị mà không cần chuyển qua chế độ chỉnh sửa riêng.

4. Selection Patterns

Actions where the user chooses from available options .

Single-Select (Chọn một đối tượng): Người dùng chọn một đối tượng duy nhất từ danh sách hoặc nhóm. Ví dụ: radio button, checkmark…

Multi-Select (Chọn nhiều đối tượng): Người dùng chọn nhiều đối tượng từ danh sách hoặc nhóm để thực hiện các hành động hàng loạt. Ví dụ: checkbox, checked items, chip selection…

Filtered Search (Tìm kiếm có lọc): Người dùng áp dụng bộ lọc để thu hẹp phạm vi tìm kiếm và chọn kết quả phù hợp.

5. Temporal Patterns

This one’s a bit broader. It refers to interactions related to time , sequences, or timing.

Feedback Loops (Vòng lặp phản hồi): Hệ thống cung cấp phản hồi ngay lập tức hoặc theo thời gian để thông báo cho người dùng về trạng thái của hành động. Ví dụ: toast message, snack bar, progress bar, inline error message…

Undo/Redo (Hoàn tác/Làm lại): Người dùng có thể quay lại hoặc làm lại các hành động trước đó để dễ dàng kiểm soát kết quả.

Progressive Disclosure (Tiết lộ dần dần): Thông tin hoặc tùy chọn được tiết lộ dần dần dựa trên hành vi của người dùng hoặc mức độ hiểu biết của họ.

Vài ví dụ cụ thể mà bạn có thể quen thuộc hơn

Back - chuyển trang trên mobile thì có animation slide in từ phải sang trái, và affordance là nút “back”, hành động user có thể click vào button đó hoặc gesture drag ngay mép bên trái qua phải (iOS), samsung thì ngược lại từ mép phải qua trái

Form auto validate pattern: Khi người dùng nhập sai, hiển thị lỗi ngay bên dưới trường nhập, đổi màu viền sang đỏ.

Infinite scroll: Tải thêm nội dung khi người dùng kéo xuống cuối trang.

Confirmation dialog: Yêu cầu xác nhận trước khi thực hiện hành động không thể hoàn tác (như xóa dữ liệu)