Thiết kế không chỉ có pixel và mẫu. Đó cũng là nhịp độ và cảm xúc. Một số sản phẩm mang lại cảm giác điện ảnh khi chúng hướng dẫn chúng ta vượt qua sự không chắc chắn, nhẹ nhõm, tự tin và bình tĩnh mà không kéo chúng ta đi loanh quanh. Đó là Cảm xúc trong Dòng chảy. Những người khác cắt xén khoảnh khắc của chính họ bằng một trò đùa không đúng chỗ, một cửa sổ bật lên bất ngờ hoặc một đoạn chuyển tiếp đột ngột. Đó là Cảm xúc trong Xung đột. Đây không phải là những ý tưởng chỉ dành cho UX. Bạn có thể nhìn thấy chúng ở mọi nơi trong làng giải trí. Và cách rõ ràng nhất để cảm nhận sự khác biệt là so sánh cách anime xử lý những thay đổi cảm xúc với cách phim Marvel và DC vấp ngã. Chúng tôi sẽ sử dụng hai ví dụ cụ thể, một từ Dan da Dan (loạt phim anime trên Netflix) và một từ phim Siêu nhân của James Gunn, để xác định hai khái niệm, sau đó chuyển chúng thành các mẫu thiết kế sản phẩm thực tế mà bạn có thể áp dụng ngay. Lưu ý: Chúng tôi sẽ tập trung vào các sản phẩm kỹ thuật số, bao gồm ứng dụng, SaaS và web. Cảm xúc đang chảy (Anime: Dan da Dan) Trong Dan da Dan, dải âm hoang dã, kinh dị, hài hước, dịu dàng nhưng vẫn trôi chảy. Ví dụ: Trong một phần, các nhân vật chính đang thực hiện một nhiệm vụ kỳ quái, hài hước liên quan đến “bộ phận sinh dục vàng” của một trong những nhân vật chính (vâng, thực sự là vậy), và ở một phần khác, chúng ta bị cuốn vào một câu chuyện đau lòng về một người mẹ có con bị bắt cóc. Trên giấy tờ, sự thay đổi đó sẽ là một vụ tai nạn ô tô. Trên màn hình, nó mạch lạc và dễ đọc về mặt cảm xúc. Tại sao điều này hoạt động trên màn hình?
Tính liên tục của tiền cược. Ngay cả khi trò bịt miệng xảy ra, mục tiêu và mối nguy hiểm của nhân vật vẫn được giữ nguyên. Sự hài hước giúp giải tỏa căng thẳng sau một cuộc giải quyết nhỏ; nó không phủ nhận mối đe dọa. Tín hiệu tâm trạng rõ ràng. Âm nhạc, khung hình, nhịp độ và phản ứng của nhân vật sẽ báo hiệu cảm giác tiếp theo. Bạn đã sẵn sàng cho ca làm việc, vì vậy bạn lái nó thay vì bị kéo mạnh. Một mỏ neo đầy cảm xúc. Các mối quan hệ vẫn là Sao Bắc Đẩu, để tâm hồn của cảnh quay không bị lạc lối khi giai điệu chuyển động.
Điều này chuyển sang UX như thế nào? Các sản phẩm tốt cũng có chức năng tương tự: chuẩn bị, chuyển tiếp, giải quyết, để người dùng luôn đắm chìm khi cảm xúc thay đổi.
Cảm xúc xung đột ( Marvel/DC: Siêu nhân của James Gunn) Lois & Clark đang có một cuộc trò chuyện chân thành, thân mật, một khoảnh khắc chậm rãi, nhân văn, trong khi ở hậu cảnh là một cảnh hài hước đang diễn ra (một con quái vật bị một cây gậy bóng chày khổng lồ đánh chết). Trò bịt miệng đánh cắp sự tập trung ngay khi cảnh phim yêu cầu bạn cảm nhận điều gì đó thực tế. Kết quả là sự xung đột âm sắc làm tổn thương cảm xúc thay vì giải phóng nó. Tại sao điều này không thành công trên màn hình?
Tải nhận thức tăng lên. Những gì đang xảy ra ở đây liên quan trực tiếp đến lý thuyết tải nhận thức. Khi một cảnh (hoặc giao diện) yêu cầu người dùng xử lý hai tín hiệu cảm xúc cạnh tranh cùng một lúc, nó sẽ tạo ra tải nhận thức không liên quan, nỗ lực tinh thần không liên quan gì đến nhiệm vụ hoặc khoảnh khắc đó. Thay vì tập trung vào nhịp điệu cảm xúc, sự chú ý được phân chia giữa các tín hiệu không giải quyết được lẫn nhau. Trong các sản phẩm, đây là điều xảy ra khi sự hài hước, khuyến mại hoặc những thay đổi giao diện người dùng không mong muốn xâm nhập vào những thời điểm quan trọng: người dùng buộc phải diễn giải giọng điệu và ý định cùng lúc khi họ đang cố gắng hành động, điều này làm chậm khả năng hiểu và tăng căng thẳng. Nhịp điệu cạnh tranh cùng một lúc. Trò đùa chồng lên cao trào của nhịp nghiêm túc; khán giả chú ý đến sự chuyển đổi hơn là cảm giác. Không có sự chuyển giao tông màu. Không có sự chuyển tiếp nào mang lại sự thân mật trước khi sự hài hước xuất hiện, vì vậy khoảnh khắc này có cảm giác bị cắt xén hơn là được giải quyết.
Điều này chuyển sang UX như thế nào? Trong sản phẩm, đây là vấn đề về hoa giấy trước khi xác nhận, lỗi táo bạo trong dòng tiền hoặc phương thức quảng cáo xuất hiện ngay giữa một nhiệm vụ quan trọng. Điều này cũng làm tăng tải nhận thức: người dùng phải xử lý sự hài hước trong khi cố gắng khắc phục sự cố, điều này khiến họ chậm lại và tăng căng thẳng.
Định nghĩa nhanh Cảm xúc trong FlowCác thay đổi cảm xúc mang lại cảm giác kiếm được, được điện báo và tính thời gian để chúng giải quyết các nhịp trước đó. Sự đắm chìm. Cảm xúc trong xung đột Một công tắc chói tai (hoặc cắt cứng) làm thủng nhịp cảm xúc sống động. Ngâm nghỉ.
Bây giờ chúng ta đã đặt tên cho nó: nó kết nối với UX như thế nào? Cảm xúc hình thành khả năng ghi nhớ sản phẩm như thế nào Mọi người không nhớ mức trung bình của một trải nghiệm; họ nhớ những đỉnh cao và cái kết. Nếu đỉnh điểm của dòng chảy của bạn là sự thất vọng hoặc kết thúc của bạn lộn xộn, thì đó chính là điều khó hiểu. Vì vậy hãy thiết kế đường cong cảm xúc một cách có mục đích. Cảm xúc tồn tại qua ba lớp (từ Thiết kế cảm xúc của Don Norman) và sản phẩm của bạn cần sắp xếp chúng:
Nội tạng (ruột): Tín hiệu ấn tượng đầu tiên: hình ảnh, chuyển động, xúc giác, âm thanh. Ví dụ: Trình tải bộ xương ổn định giúp bình tĩnh hơn cảm giác bồn chồnmáy quay; một tiếng chuông thành công nhẹ nhàng/chạm xúc giác cho phép giành chiến thắng mà không cần hét lên; sự nới lỏng/hướng nhất quán cho mắt biết điều gì đã thay đổi. Hành vi (làm): Tôi có thể hoàn thành nhiệm vụ của mình một cách suôn sẻ không? Ma sát ở đây có nghĩa là căng thẳng. Ví dụ: Ba bước thanh toán rõ ràng với tiến độ có thể dự đoán được; trạng thái lỗi giải thích điều gì đã xảy ra và cách khắc phục; xác thực nội tuyến thay vì bùng nổ cuối biểu mẫu. Phản ánh (ý nghĩa): Câu chuyện mà tôi tự kể sau đó, "Điều đó có đáng không? Tôi có tin điều này không?" Ví dụ: Một màn hình tóm tắt gọn gàng ("Xong. Bạn sẽ nhận được X vào thứ Sáu.") kết thúc; một bản tóm tắt nhỏ (“Bạn đã tiết kiệm được €18 trong năm nay”) tạo nên niềm tự hào mà không cần đến pháo hoa.
Các tương tác vi mô là chất keo cảm xúc. Mỗi cái đều có một trình kích hoạt (tôi nhấn vào Thanh toán), các quy tắc (hệ thống làm gì), phản hồi (tiến trình và kết quả rõ ràng) và các vòng lặp hoặc chế độ (điều gì sẽ xảy ra nếu người dùng thử lại). Hãy làm đúng những điều này và quá trình chuyển đổi của bạn sẽ kết nối cảm xúc. Hiểu sai và chúng sẽ phá vỡ dòng chảy.
Bản nhịp cảm xúc ánh xạ rõ ràng vào các lớp trải nghiệm của Norman:
Sự không chắc chắn tồn tại trong các lớp hành vi ban đầu và nội tạng, nơi người dùng dựa vào các tín hiệu cảm giác (chuyển động, sự rõ ràng, phản hồi) để hiểu điều gì đang xảy ra. Sự rõ ràng chắc chắn nằm ở lớp hành vi, thời điểm mà ý định của hệ thống và hành động tiếp theo của người dùng được xác định rõ ràng. Dự đoán là sự kết hợp giữa hành vi (người dùng đang làm điều gì đó có mục đích) và phản ánh (người dùng đã dự đoán kết quả và tưởng tượng điều gì sẽ xảy ra tiếp theo). Thành tích là một đỉnh cao phản ánh, nơi người dùng đánh giá sự thành công, sự tin cậy và liệu trải nghiệm đó có “cảm thấy đúng” hay không. Bình tĩnh/Đóng cửa chủ yếu mang tính phản ánh, giúp người dùng tóm tắt ý nghĩa của hoạt động tương tác và quyết định xem sản phẩm có đáng tin cậy và đáng quay lại hay không.
Trong các sản phẩm thực tế, trình tự này không biến mất khi có sự cố xảy ra. Lỗi, độ trễ và trạng thái xuống cấp không phải là ngoại lệ đối với vòng cung cảm xúc - chúng là một phần của nó. Nhìn qua lăng kính tường thuật, những khoảnh khắc này là những trở ngại trong cuộc hành trình của người anh hùng. Trạng thái phục hồi được thiết kế tốt sẽ thừa nhận thất bại, làm rõ những gì đã xảy ra và hướng dẫn bước tiếp theo mà không tạo ra tiếng ồn cảm xúc mới. Khi thất bại được coi như một nhịp đập thay vì một sự đứt đoạn, dòng cảm xúc có thể được duy trì ngay cả khi bị căng thẳng. Ví dụ về UX: Cảm xúc trong dòng chảy so với Cảm xúc trong xung đột Cảm xúc đang chảy Quá trình thanh toán được thực hiện đúng (kiểu Stripe/Apple Pay): các bước ngắn, tiến trình rõ ràng và trạng thái thành công rõ ràng (dấu kiểm có xúc giác mềm tùy chọn). Đỉnh cao (thành công) đạt đến và điểm kết thúc là sự kết thúc (tiếp nhận hoặc bước tiếp theo).
Trạng thái đón khách (ứng dụng gọi xe, ví dụ: Uber, Free Now hoặc Bolt): các cập nhật liên tục duy trì định hướng và giảm bớt lo lắng (“Tài xế đang đến”, “cách 2 phút”, “Đã đến”). Sự không chắc chắn biến thành sự rõ ràng, với chuyển động nhẹ nhàng chuẩn bị cho mỗi lần chuyển tiếp.
Cảm xúc xung đột Lưu ý: Chúng tôi không nêu tên sản phẩm cụ thể ở đây - chúng tôi tôn trọng công việc đằng sau chúng. Thay vào đó, chúng tôi chỉ ra những nguyên nhân gây ra xung đột cảm xúc và cách khắc phục chính xác chúng.
Truyện cười trong những khoảnh khắc nghiêm túc. Tuyên bố lỗi sao chép táo bạo vì tiền bạc/sức khỏe/bảo mật. Người dùng bị căng thẳng; sự hài hước khuếch đại sự khó chịu. Lễ kỷ niệm trước khi giải quyết. Hoa giấy, pháo hoa hoặc âm thanh lớn trước khi xác nhận. Bữa tiệc làm gián đoạn cao trào. Chuyển đổi trạng thái cứng. Các phương thức/quảng cáo bất ngờ ở giữa nhiệm vụ, tiếp quản toàn màn hình mà không cần chuẩn bị. Cảm giác như bị cắt đột ngột trong một nhịp cảm xúc.
Bạn có thể làm gì để đảm bảo cảm xúc được tuôn chảy Đây là trang Notion với mẫu đầy đủ mà bạn có thể sao chép:
Mẫu beat sheet đầy cảm xúc.
1. Viết bản beat cảm xúc trước Đối với mỗi quy trình cốt lõi (làm quen, thanh toán, phục hồi), hãy lập bản đồ cảm xúc theo từng bước: sự không chắc chắn → rõ ràng → dự đoán → thành tích → bình tĩnh. Đính kèm bản sao, chuyển động và tương tác vi mô vào từng nhịp. (Ai mang cảm xúc đi đâu?) 2. Điều chỉnh phù hợp với rủi ro nhiệm vụ Tạo ma trận giai điệu (mức rủi ro × trạng thái). Đối với các lỗi có nguy cơ cao, hãy bình tĩnh, thẳng thắn và hướng tới giải pháp. Dành sự vui vẻ cho bối cảnh có rủi ro thấp. Đoạn mẫu:
Lỗi có nguy cơ cao: "Chúng tôi không thể xác minh ID của bạn. Hãy thử lại hoặc liên hệ với bộ phận hỗ trợ." Trạng thái trống có rủi ro thấp: "Chưa có gì ở đây. Bạn có muốn bắt đầu với mẫu không?"
Đây là nơi nhiều sản phẩm trưởng thành lặng lẽ trôi vào xung đột cảm xúc. Theo thời gian, các nhóm tạo thêm niềm vui bằng thói quen hơn là ý định. Cách tự kiểm tra hữu ích là hỏi: Nếu chúng ta loại bỏ mọi yếu tố vui tươi hoặc ăn mừng khỏi bước này, liệu dòng chảy vẫn mang tính nhân đạo - haynhững yếu tố che giấu ma sát? Thiết kế cảm xúc tốt làm rõ trải nghiệm; thiết kế đầy cảm xúc tuyệt vời không cần trang trí để bù đắp cho sự nhầm lẫn. 3. Thiết Kế Đỉnh Cao Và Kết Thúc Đúng Mục Đích Kỹ sư có một đỉnh rõ ràng (thời điểm thành công) và một kết thúc rõ ràng (xác nhận và điều gì xảy ra tiếp theo). Đo lường khả năng thu hồi và sự hài lòng ở cả hai điểm. 4. Sử dụng các tương tác vi mô làm cầu nối chứ không phải làm điểm nhấn
Chuẩn bị: Gợi ý chuyển động nhỏ, nhất quán trước khi có sự thay đổi trạng thái lớn. Xác nhận: Thành công có được sự ổn định tinh tế, với khả năng thoát ra chậm hơn một chút và cảm giác xúc giác nhẹ tùy chọn. Phục hồi: Thất bại lặp đi lặp lại sẽ chuyển giọng điệu từ lạc quan sang hỗ trợ một cách duyên dáng và hướng dẫn bước tiếp theo.
5. Kiểm tra tính liên tục của cảm xúc Trong các phiên về khả năng sử dụng, đừng chỉ hỏi “Điều đó có dễ không?” Thay vào đó, bạn có thể hỏi “Cảm giác nào đã thay đổi ở đây?” Nếu bạn nghe thấy “bối rối → thích thú → bối rối”, thì bạn đang có xung đột chứ không phải trôi chảy. Lặp lại quá trình chuyển đổi, không chỉ màn hình. Cách tránh cảm xúc khi xung đột: Danh sách kiểm tra nhanh Cờ đỏ → sửa lỗi:
Những câu chuyện cười trong những thời điểm nghiêm túc → đổi lấy ngôn ngữ bình tĩnh, trực tiếp và lộ trình phục hồi rõ ràng. Ăn mừng trước khi quyết định → chuyển việc ăn mừng sang sau khi xác nhận; giảm âm lượng cho các nhiệm vụ có rủi ro cao. Nhảy trạng thái cứng → chuyển tiếp được thông báo trước; giữ khung hình nhất quán; sử dụng chuyển động có ý nghĩa để duy trì tính liên tục. Giọng điệu lệch giữa các nhóm → tập trung các nguyên tắc về giọng nói và giọng điệu với các ví dụ cho mỗi mức độ rủi ro và trạng thái.
Có những khoảnh khắc việc phá vỡ dòng cảm xúc là có chủ ý và cần thiết. Cảnh báo bảo mật, xác nhận pháp lý và cảnh báo quan trọng về an toàn thường được hưởng lợi từ sự thay đổi âm sắc đột ngột. Trong những trường hợp này, sự gián đoạn báo hiệu tầm quan trọng và đòi hỏi sự chú ý. Bản thân vấn đề không phải là xung đột cảm xúc; đó là xung đột ngẫu nhiên. Khi các nhà thiết kế cố tình lựa chọn sự gián đoạn, người dùng sẽ hiểu được những rủi ro thay vì cảm thấy bị đòn roi. Kết luận Những trải nghiệm tuyệt vời là những trải nghiệm được định hướng. Dan da Dan chỉ ra cách vượt qua cảm xúc mà không đánh mất chúng ta: nó chuẩn bị, chuyển tiếp và giải quyết. Cảnh Superman cho thấy điều ngược lại: một trò bịt miệng va chạm với nhịp điệu chân thành. Làm cái trước. Hãy lập bản đồ nhịp điệu cảm xúc của bạn, điều chỉnh tông màu phù hợp với rủi ro của nhiệm vụ và để các tương tác vi mô kết nối cảm xúc để người dùng ghi nhớ đúng đỉnh và cuối bên phải chứ không phải đoạn giật gân ở giữa.
