Tương lai của thiết kế chuyển động trong trải nghiệm kỹ thuật số

Khi sáng tạo sản phẩm, các nhà thiết kế luôn tìm cách truyền tải câu chuyện của mình đến người dùng…

… và họ có rất nhiều công cụ để làm câu chuyện thú vị hơn. Thiết kế chuyển động là một trong những công cụ mạnh nhất. Sức mạnh thực sự của chuyển động có thể được nhìn thấy trong trải nghiệm mobile.

Một ứng dụng di động nếu không có chuyển động sẽ chỉ là một chuỗi các màn hình riêng biệt. Nhưng khi các nhà thiết kế đưa chuyển động vào ứng dụng, thiết kế sẽ trở nên sống động và trở thành một câu chuyện tương tác có thể thu hút người dùng.

Hôm nay, chúng ta sẽ khám phá ý tưởng về thiết kế chuyển động trong các giao diện của tương lai với những trợ lý trí tuệ nhân tạo (Artificial Intelligence – AI).


Xây dựng tương lai với trí thông minh nhân tạo

Trợ lý AI là một thuộc tính phổ biến của nhiều phương tiện giao thông hiện đại và smartphone. Nói một cách đơn giản, nó là hệ thống giúp người dùng giải quyết các công việc hàng ngày như đặt pizza hoặc cài đặt mục tiêu cuối cùng. 

Quá trình tương tác với một hệ thống khá rõ ràng – người dùng kích hoạt hệ thống và cung cấp một lệnh (trong hầu hết các trường hợp, thường sẽ qua giọng nói), hệ thống sẽ tiến hành yêu cầu và trả lời đầy đủ chi tiết.

Hiện tại, thiết kế AI có hai nhược điểm chính:

  • Phản hồi được cung cấp bởi một hệ thống không chứa nhiều thông tin. Hệ thống không xử lý rõ ràng/chính xác yêu cầu của bạn hoặc những gì sẽ xảy ra với các thông tin đó.
  • Phản hồi mà hệ thống cung cấp không truyền đạt cảm xúc. Nó là một robot. Khi người dùng tương tác với hệ thống như vậy, cảm giác sẽ như nhập yêu cầu cho một máy tính. Sự khác biệt duy nhất từ ​​GUI (Graphic user interface – giao diện người-máy bằng đồ họa) truyền thống là bạn sử dụng phương tiện khác để nhập yêu cầu (nhập bằng giọng nói và bàn phím).

Các nhà thiết kế đang cố gắng giải quyết những vấn đề này và mang đến diện mạo cũng như cảm xúc sống động cho các thiết bị máy móc.

Dưới đây là cách giúp chúng ta có thể đạt được kết quả với chuyển động:

VUI giúp xây dựng niềm tin của người dùng

Trong tương lai, hệ thống AI sẽ ưu tiên tín nhiệm VUI (Voice User Interface) để xây dựng niềm tin của người dùng. Niềm tin sẽ xây dựng cầu nối giữa con người và máy móc. Nếu không có điều đó, người dùng sẽ không có khả năng tương tác với một hệ thống. 

Related image

Một trong những khía cạnh quan trọng nhất của việc xây dựng niềm tin là tạo cho người dùng cảm giác kiểm soát. Khả năng hiển thị trạng thái hệ thống, kiểm soát người dùng và tự quyết – 2 trong số 10 khả năng sử dụng cho thiết kế giao diện người dùng bởi Jakob Nielsen vẫn được áp dụng cho thiết kế VUI.

Nhưng nó có ý nghĩa gì trong bối cảnh một hệ thống AI? Hệ thống sẽ phản ứng với yêu cầu của người dùng để phản hồi thích hợp. Phản hồi này sẽ cung cấp cho người dùng sự hiểu biết đầy đủ về những gì hệ thống đang làm.

Phản hồi trực quan về nhập liệu của người dùng

Nếu không có phản hồi trực quan hoặc âm thanh rõ ràng, người dùng chỉ có thể phỏng đoán khi họ tương tác với một hệ thống. Phản hồi trực quan cho phép người dùng biết trạng thái hiện tại của một hệ thống – nó hoạt động như một sự thừa nhận rằng hệ thống đã nhận được yêu cầu và đang xử lý.

Khi nói đến việc thiết kế phản hồi trực quan cho các hệ thống AI, các nhà thiết kế có rất nhiều lựa chọn. Theo cách cơ bản nhất, phản hồi có thể đơn giản như một sự thay đổi trạng thái từ màn hình trống sang một thông tin chứa nội dung. Nhưng để đạt được kết quả tốt hơn, có thể kết hợp các đặc tính thương hiệu độc đáo vào phản hồi trực quan. Dưới đây bạn có thể thấy một ý tưởng về trợ lý thoại Rokid AI. Hiệu ứng động phản ánh đặc tính của thương hiệu và thu hút người dùng tương tác với sản phẩm.

Thiết kế UI AI cho Rokid

Nhưng với tư cách là người dùng, chúng ta không chỉ muốn biết rằng một hệ thống đã nhận được yêu cầu, mà còn muốn cảm thấy hệ thống đã hiểu chúng ta. Cảm giác này đóng một vai trò quan trọng trong việc thiết lập một mức độ tin cậy lớn hơn.

Để đạt được trải nghiệm nhập vai rõ nét, có thể sử dụng giao tiếp trực quan động. Hãy xem nó hoạt động như thế nào trong thực tế; chuyển động có thể được sử dụng để xác nhận hành động. Ví dụ “Voice recognition” từ nghiên cứu điển hình của Rokid. Phản hồi trực quan làm cho nó hiển thị rõ ràng khi hệ thống nghe người dùng, vì sóng âm thanh chỉ hiển thị khi người dùng cung cấp lệnh. Ví dụ thứ hai là “System GUI”, vòng tròn tạo ra chuyển động ngang để biểu thị phản hồi “Không”.

Chuyển động có thể biểu thị các hành động mà người dùng đang thực hiện. Minh họa từ giao diện người dùng hệ thống Rokid Alien. 

Sự rõ ràng của các thay đổi trạng thái

Thay đổi trạng thái trong UI thường liên quan đến việc cắt giảm theo mặc định – người dùng chỉ thấy hai trạng thái – màn hình đầu tiên chấp nhận nhập liệu của người dùng và màn hình thứ hai là kết quả. Sự cắt giảm làm cho các thay đổi trạng thái khó theo kịp và tăng thêm tải nhận thức.

Có thể giải quyết vấn đề khó khăn này và làm cho trải nghiệm thân thiện hơn với người dùng bằng cách giới thiệu inbetweening, để tạo ra các khung trung gian giữa các trạng thái. Mục tiêu là làm cho màn hình đầu tiên chuyển đổi mượt mà sang màn hình thứ hai. Chuyển động đóng một vai trò quan trọng trong quá trình này – nó giúp người dùng nắm rõ nội dung được hướng dẫn giữa các lượt xem.

Trợ lý AI cá nhân động bởi Gleb Kuznetsov

Quy trình thực hiện (Process of Doing – POD)

Khi người dùng tương tác với một trợ lý AI, họ thường đi qua ba trạng thái: Thực hiện một yêu cầu, chờ kết quả và đọc kết quả mà hệ thống cung cấp.


Hệ thống đang tiến hành yêu cầu người dùng và hiển thị hiệu ứng động này. 
Hình ảnh: Gleb Kuznetsov

Hầu hết người dùng muốn biết điều gì xảy ra sau khi họ gửi lệnh và trước khi họ nhận kết quả. Thông tin này có thể giúp người dùng hiểu được liệu hệ thống có nhận ra mục đích ban đầu của người dùng hay không.

Ý tưởng về POD giúp các nhà thiết kế đạt được mục đích này. Thiết kế chuyển động lấp đầy những thiếu sót nhận thức, bằng cách cho người dùng một dấu hiệu về những gì sắp xảy ra. Đây là cách nó làm việc:

  • Khi người dùng gửi yêu cầu tới hệ thống, hệ thống sẽ ngay lập tức đơn giản hóa quy trình và hiển thị thông tin này cho người dùng.
  • POD không phải là hoạt ảnh loading; nó không chỉ hiển thị việc hệ thống đang thực hiện khi người dùng chờ đợi, mà nó còn cung cấp thông tin giá trị về những gì hệ thống làm.

Tôi làm cách nào để thiết kế POD cho sản phẩm của mình?

Thật không may, không có câu trả lời cụ thể cho câu hỏi này. Bản chất của sản phẩm là điều kiện để đưa ra giải pháp.

 Nhà thiết kế cần đặt mình vào vị trí của người dùng và nghĩ về những gì người dùng sẽ làm trong một tình huống cụ thể (hành trình của người dùng sẽ như thế nào, khi họ hoàn thành thao tác theo cách thủ công). Ví dụ, một POD cho lệnh kéo một file từ Dropbox có thể giống như cách tìm kiếm một file trong bộ lưu trữ Dropbox.

POD kéo file biểu mẫu Dropbox cho Brain.ai. Hình ảnh: Gleb Kuznetsov

Giao diện truyền tải tính cách

Nhiều nhà thiết kế rơi vào tình trạng tạo ra một sản phẩm, nhưng trông tương tự mọi sản phẩm khác trong cùng một hạng mục. Khi người dùng tương tác với các sản phẩm như vậy, bạn không thể biết sự khác biệt giữa chúng. Kết quả là, dễ gây ra nhầm lẫn giữa sản phẩm này với sản phẩm khác.

Chuyển động có thể giúp các nhà thiết kế giải quyết vấn đề này. Bằng cách thêm các chuyển động tinh tế vào một thiết kế, nhà thiết kế sẽ khiến người dùng cảm thấy như họ đang tương tác với thứ gì đó khác biệt.

Tăng cường sức mạnh của các chi tiết nhỏ

“Các chi tiết không chỉ đơn giản những gì bạn thấy. Chúng tạo nên một thiết kế.”

Trích dẫn vượt thời gian này của Charle Eames nhắc nhở chúng ta rằng mỗi chi tiết trong một sản phẩm đều có tác động đến cách người dùng cảm nhận nó. Chi tiết tuy đơn giản nhưng chúng có thể báo hiệu cho người dùng biết rằng: những người tạo ra sản phẩm này luôn quan tâm đến họ. Ngay cả những thứ nhỏ như icon cũng có thể đóng một vai trò quan trọng trong trải nghiệm người dùng.

Khi các nhà thiết kế dành thời gian để tạo ra các icon độc đáo cho dự án, nó sẽ khiến người dùng chú ý đến và làm cho trải nghiệm đáng nhớ hơn. Bằng cách kết hợp chuyển động vào các thiết kế icon tuyệt vời, bạn có thể tạo trải nghiệm người dùng thực sự thú vị.

Icon morphing animation cho trợ lý thoại Rokid AI

Ngôn ngữ của chuyển động

Chuyển động có thể làm cho thiết kế tương tác tăng lên một tầm cao mới. Đối với mỗi người dùng, khi gửi lệnh đến một trợ lý AI, khi có câu chuyện theo sau và thiết kế dựa trên chuyển động tốt sẽ giúp các nhà thiết kế “nói chuyện” với nó một cách hiệu quả. Ngôn ngữ chúng ta sử dụng để kể những câu chuyện có thể được kết nối sâu sắc với những cảm xúc mà chúng ta muốn truyền đạt cho người dùng của mình. 

Chúng ta muốn người dùng cảm thấy gì?
Được giải trí, cảm thấy vui vẻ, hay chỉ muốn truyền đạt sự tinh tế?

Bản chất của một sản phẩm
sẽ giúp chúng ta tìm ra ngôn ngữ thích hợp.

Thiết kế Visual Design cho tương tác di động tương lai của Gleb Kuznetsov cho Brain.ai.

AI cảm giác như con người

Điều gì làm cho một giao diện cảm giác như con người? Khi nói đến sự hỗ trợ của AI, có hai đặc tính đóng vai trò quan trọng trong cách mọi người cảm nhận giao diện – giọng nói và chuyển động. 

Giọng nói là một phần của tính cách và định hình. Khi chúng ta kết hợp giọng nói với một cái gì đó, nó sẽ trở thành một phần trong đặc tính của nó. Chúng ta trải nghiệm cảm xúc khi tương tác với một giao diện như vậy, giống như tương tác với người thật. Và chuyển động có thể góp phần mang lại cảm giác này.

Trong video 103EX, Rolls-Royce chứng minh cách họ làm thế nào để mang đến cho trí thông minh nhân tạo một “linh hồn”. Nhờ sự chuyển động, The Spirit of Ecstasy (trang trí nắp ca-pô trên xe Rolls-Royce) trở nên tuyệt vời chứ không đơn thuần là một thứ đồ trang trí nữa. Nó trở thành phần tự nhiên của trải nghiệm, một thành phần chức năng mà các tài xế trong tương lai sẽ đồng hành cùng chiếc xe.

Nhà thiết kế có thể áp dụng cùng nguyên tắc này cho công việc của mình. Ví dụ, nếu sản phẩm của bạn có một linh vật, bạn có thể làm cho nó trở thành một phần không thể thiếu của thiết kế sản phẩm, bằng cách tìm kiếm một giai điệu phù hợp, giọng nói và các hiệu ứng chuyển động phong phú.

Kết luận

Chuyển động rất quan trọng đối với thiết kế của tương lai. Nó giúp các nhà thiết kế giải quyết các vấn đề cơ bản, phát triển sự tin tưởng giữa máy móc và người dùng để nhân bản hóa các giao diện.


Biên tập: Thao Lee

Tác giả: Gleb Kuznetsov và Nick Babich

Nguồn: designmodo

Cùng tác giả

#Tag

AI trí thông minh nhân tạo artificial intelligence kỹ thuật số Process of Doing - POD thiết kế chuyển động thiết kế trải nghiệm người dùng VUI

iDesign Must-try

Mc Donald’s đã có hơn 5000 năm lịch sử?
Mc Donald’s đã có hơn 5000 năm lịch sử?
Ở một không gian khác, những bảo vật được trưng bày tại bảo tàng là hộp khoai tây McDonal’s bằng ngọc. Trong dự án sáng tạo cùng A.I mới nhất,…
Những chiếc ghế huyền thoại nhà Eames, qua góc của nhà thiết kế công nghiệp Vjeko
Những chiếc ghế huyền thoại nhà Eames, qua góc của nhà thiết kế công nghiệp Vjeko
Chắc hẳn những chiếc ghế nhà Eames (Eames chair) không hề xa lạ với những ai yêu nội thất. Hai chiếc ghế nổi tiếng Eames Lounge & Ottoman và Shell…
Tập 5 PURE NOW Show: Covid-19 có thực sự là cơ hội để đồ họa chuyển động lên ngôi?
Tập 5 PURE NOW Show: Covid-19 có thực sự là cơ hội để đồ họa chuyển động lên ngôi?
Trong tập 5 PURE NOW Show, chúng ta sẽ trò chuyện cùng William Chan – Creative Director/Founder TMRRW và PHUNK studio để lắng nghe về hành trình chinh phục công việc đồ…
William Chan: Người đứng sau hàng loạt thiết kế chuyển động của các thương hiệu quốc tế
William Chan: Người đứng sau hàng loạt thiết kế chuyển động của các thương hiệu quốc tế
Sáng tạo và con đường chinh phục sáng tạo chưa bao giờ là dễ dàng. Và hơn hết, để được các thương hiệu nổi tiếng chọn mặt gửi vàng đối…
Tương lai nào dành cho các nhà thiết kế UX và UI?
Tương lai nào dành cho các nhà thiết kế UX và UI?
Trong suốt thập kỷ qua, thế giới đã gắn liền với kỹ thuật số hơn bao giờ hết. Đại dịch toàn cầu chỉ càng đẩy nhanh xu hướng đó. Do…
Từ poster đến web: Mối tương quan giữa thiết kế in ấn và kỹ thuật số (Phần 2)
Từ poster đến web: Mối tương quan giữa thiết kế in ấn và kỹ thuật số (Phần 2)
Ở phần 1, chúng ta đã khám phá một số mối tương quan giữa thiết kế poster và thiết kế web. Trong phần hai này chúng ta sẽ tiếp tục…