Interaction

Interaction

Interaction

September 28, 2024

Có thể nói phần lớn công việc UX/UI design hiện tại, phần việc IxD chiếm chắc đến 70%. Ta là người thiết kế nên “cách thức trò chuyện” giữa người và máy. Cụ thể ra sao mời bạn đón xem thêm nhé.

Definition

Interaction trong IxD là toàn bộ quá trình và hành vi giao tiếp hai chiều giữa người dùng và sản phẩm kỹ thuật số, tập trung vào việc thiết kế các hành động người dùng và phản hồi của hệ thống để tối ưu trải nghiệm người dùng.

https://res.cloudinary.com/dpzknshvi/image/upload/v1754995033/uxcomic-imgs/24d5d164-78d8-80cc-9c4a-dbd081173eca.png

Ngắn gọn thì:

Nó là vòng lặp của: “Thấy” gì → Nghĩ gì → Làm gì → “Thấy” gì…

📌

Nghĩ đến 2 chữ “phát tác”

Phát ra tín hiệu hoặc thông tin gì?
Tác động ra sao? - Vật lý (giác quan) & Cách hiểu & Cảm xúc
Cách user control & sự tác động tương ứng ra sao…

Thử điểm qua cách Interaction, control trong các platform/ device

Trước khi GUI ra đời (graphic user interface) thì con người tương tác với máy tính vẫn bằng câu lệnh (command line interface).

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878068/uxcomic-imgs/24c5d164-78d8-803f-b578-d8916b572557.png

Khi có con chuột và trình diễn đồ hoạ, con người tương tác với máy tính trực quan hơn, ta trỏ đến, ta click, double click, ta scroll, ta quét chọn, ta drag…

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878068/uxcomic-imgs/24c5d164-78d8-8075-9ea9-cadc1772ecf6.gif

Qua đến thời kì điện thoại Nokia thì ta điều hướng bằng bàn phím bằng keyboard, các nút mũi tên lên xuống, trái phải… và nút “ok”, “back”…

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878070/uxcomic-imgs/24c5d164-78d8-80fb-84ca-c51a10ee6ae8.jpg

Qua đến thời kì màn hình cảm ứng, ta có tap, swipe, long press, drag,….

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878071/uxcomic-imgs/24c5d164-78d8-8086-9295-c088b0e7d5a7.jpg

Ngoài ra còn có cái dạng công nghệ hay hay như eye detecting, VUI, haptic feedback,…

Rồi đến các công cụ như kính VR, smart swatch, smart speaker,… cũng có những cách tương tác đặc trưng.

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878073/uxcomic-imgs/24c5d164-78d8-8039-9c74-e5862c3abaec.gif

Tất cả những cách tác vụ hay những “cách giao tiếp” này ta gọi là tương tác (interaction). Nó tuỳ vào device, tuỳ vào platform, tuỳ vào cách các app define & design. Inteaction design giống như thiết kế cho một “hình thức giao tiếp” giữa người & máy.

Nhìn chung thì có 4 thành phần sau:

Flow & Navigation
Affordance, state & feedback
Animation & Timing
Microinteraction (touch area, trigger, response…)

Phisolophy

— From Perplexity

The philosophy of interaction design explores the foundational ideas and principles guiding how interactive products and services are created to support human activities and cognition. It emphasizes that interaction design is not just about creating frictionless interfaces but about shaping users' thought processes and experiences through the design elements themselves.

Key points in the philosophy of interaction design include:

Interaction as part of cognition: Designers build components that become part of the user's thinking process during interaction. For example, a spinning wheel interface element can make users actively consider their choices, integrating the interface into their decision-making rather than merely facilitating a pre-formed plan 1 .
User-centered and context-aware design: Good interaction design requires understanding users in their real environments, considering their behaviors, tools, and cognitive processes in context rather than isolated actions or survey responses. This approach aligns with ethnographic methods and supports designing interfaces that help users form plans and achieve goals 1 6 .
Design as creating relations and experiences: Interaction design is about more than functionality; it creates relationships that evoke emotions and meaningful experiences. This view suggests moving beyond traditional desktop metaphors to make technology "invisible" by embedding it naturally into everyday life, focusing on the purpose rather than the technology itself 3 5 .
Multi-disciplinary perspectives: The philosophy of interaction design draws on formal logic, cognitive science, phenomenology, media studies, and more to understand interactivity's complexity and how users experience interactive products 4 .
A guiding design philosophy: Interaction designers develop a personal or team philosophy that guides design decisions, balancing the interests of all stakeholders and focusing on improving users' lives. This philosophy involves asking critical questions about purpose, target users, value, and problem-solving effectiveness, aligning and optimizing design elements like personas, goals, and behaviors 2 .

In essence, the philosophy of interaction design frames the discipline as a human-centered, contextually aware, and experience-driven practice that integrates technology seamlessly into users' lives to support meaningful interaction and thought.

Thân - Tâm - Trí trong interaction

https://res.cloudinary.com/dpzknshvi/image/upload/v1754878075/uxcomic-imgs/22c5d164-78d8-8078-8bce-c7ba16746f3b.png
https://res.cloudinary.com/dpzknshvi/image/upload/v1754878076/uxcomic-imgs/22c5d164-78d8-80f3-a4de-f9cdaa5bdf90.png

Tương tác tạo ra sự tác động qua lại giữa 2 bên, thì ta có thể nhóm chúng vào góc nhìn thân - tâm - trí.

Thân - tác động lên giác quan của user thế nào (họ cần take action gì: click, swipe, scroll, view,… và hệ thống feedback lại gì: visibility, haptic feedback, transition… chúng giúp user hiểu chuyện gì vừa xảy ra, kết quả của thao tác vừa rồi, mối liên hệ giữa các object…)
Trí - nó tác động đến việc hiểu như thế nào, nó cost mental effort hay cognitive load, memory load ra sao (information hierarchy, content flow, words & meaning, recently items, psychology into content - frame effect, visual effects and their meaning…)
Tâm - nó tác động đến cảm nhận user ra sao, họ thấy delightful hay depress, enjoyable hay frustrated, excited hay boring,… (chúng được hình thành thông qua việc hiểu context of use, mental model, user perception và tìm cách áp dụng các psychology, UX laws, UX ladder sao cho phù hợp…)

Vài terms quan trọng liên quan đến interaction

Từng term này hàm chứa rất nhiều kiến thức khác nên mình chỉ list ra tạm, có time sẽ ngâm cứu kĩ thêm.

Affordance
State
Command
Feedback
Transition
Interactable area
Touch zone
Control, Gesture
Trigger, detect & Dismiss
etc.

Ví dụ 1 case cần phải define interaction control

Mình hỏi GPT: “tôi đang thiết kế một interaction pattern liên quan đến việc dùng drag handle để đóng panel, làm thế nào để tôi define được khi nào thì đóng 50% panel, khi nào thì đóng 100% panel dựa theo độ mạnh nhẹ của thao tác drag của bàn tay?”

https://res.cloudinary.com/dpzknshvi/image/upload/v1755252543/uxcomic-imgs/2505d164-78d8-801d-a4e1-f0f7d1039ac6.png
chatGPT trả lời

Reference

Relevant Item

User Journey map, User scenario, Task flow, User flow
⚔️ ⚔️ ⚔️

User Journey map, User scenario, Task flow, User flow

Interaction Pattern
⚔️ ⚔️ ⚔️

Interaction Pattern