Đưa hoạt động tương tác vi mô & giao diện người dùng vào cuộc sống thông qua sự hợp tác của nhà thiết kế

Chúng tôi có thể tạo ra trải nghiệm thú vị cho người dùng thông qua tương tác vi mô và hoạt hình UI!

Xin chào, tên tôi là Kyo Kim và tôi đã làm việc như một nhà thiết kế sản phẩm tại Capital One được khoảng hai năm. Tôi đã sử dụng các tương tác vi mô và hoạt hình trong suốt quá trình làm việc của tôi ở đây, kể cả trên một số dự án di động mà bạn có thể đã sử dụng cho mình. Trước khi tôi bắt đầu làm việc trong lĩnh vực công nghệ, nền tảng của tôi là về phim ảnh. Trong phim, trọng tâm là tất cả về cách kể chuyện và chỉnh sửa để tạo ra một câu chuyện thu hút khán giả; và phần lớn được thực hiện thông qua việc sử dụng các hiệu ứng chuyển tiếp. Tôi thấy những kỹ năng này hữu ích ngày hôm nay khi tôi tạo ra kinh nghiệm và câu chuyện cho các công cụ kỹ thuật số.

Khi tôi thiết kế, tôi nghĩ về các yếu tố sẽ mang đến cho người dùng trải nghiệm tuyệt vời, thú vị với các hiệu ứng chuyển cảnh và kể chuyện.

Để một sản phẩm mang đến cho người dùng trải nghiệm thú vị, nó phải cung cấp nhiều hơn thiết kế thẩm mỹ và hiệu ứng hoạt hình ấn tượng.

Bất kể sản phẩm đó là dựa trên ứng dụng, dựa trên web hay bất kỳ hình thức sản phẩm kỹ thuật số nào khác, nó phải thu hút người dùng, thích thú khi họ sử dụng và cho họ cơ hội tham gia trực tiếp và có ý nghĩa đường.

Tương tác vi mô có sức mạnh khiến trải nghiệm người dùng trở nên thú vị và thỏa mãn theo cách mà nhiều yếu tố thiết kế không thể có. Trước khi chúng ta tham gia vào các tương tác vi mô trong bối cảnh thiết kế sản phẩm, hãy bắt đầu với các nguyên tắc cơ bản.

Họ là ai? Tại sao nó tốt cho trải nghiệm người dùng? Tại sao các nhà thiết kế và nhà phát triển nên kết hợp chúng vào công việc của họ? Làm thế nào các nhóm thiết kế sản phẩm có thể làm việc cùng nhau để cải thiện chúng?

Tương tác vi mô là gì và tại sao chúng ta nên quan tâm đến chúng?

Tương tác vi mô hoặc hoạt ảnh UI là gì? Mọi người thường gọi chúng là hình ảnh động đẹp, đồ họa chuyển động hoặc thiết kế hình ảnh chuyển động. Tuy nhiên, họ còn nhiều hơn thế.

Không giống như các hình thức hoạt hình khác chỉ tồn tại để tạo ảo giác chuyển động, các tương tác vi mô trực tiếp thu hút người dùng, cho phép anh ấy / cô ấy thực hiện nhiều nhiệm vụ khác nhau và tương tác với sản phẩm một cách trực quan và hiệu quả.

Nếu chúng ta buộc điều này trở lại với các nguyên tắc thiết kế hệ thống tốt, thì điều này sẽ nâng cao và cho phép phản hồi hệ thống cho người dùng. Nếu được thực hiện chính xác, người dùng sẽ lấy các tương tác vi mô làm thông báo từ người dùng rằng nó (hệ thống) đang làm những gì cần làm để đáp ứng với những gì người dùng cần.

Ngay cả khi bạn không biết các tương tác vi mô là gì, bạn vẫn thường xuyên tham gia với chúng. Mỗi khi bạn sử dụng một ứng dụng hoặc sản phẩm dựa trên web để hoàn thành một nhiệm vụ cụ thể - cho dù đó là đọc tin tức, mua hàng, chơi trò chơi, tạo hồ sơ hoặc điều chỉnh cài đặt và tùy chọn thông báo của bạn - mỗi hành động riêng lẻ bạn thực hiện một tương tác vi mô. Các tương tác vi mô được dệt liền mạch thành một nền tảng sản phẩm, làm cho các chức năng của chúng trở nên trong suốt và dễ tiếp cận, cải thiện hiệu quả trải nghiệm chung của người dùng.

Mặc dù các hành động của người Viking này có một số dạng khác nhau, một số ví dụ phổ biến bao gồm:

  • Khi chúng tôi di chuyển một mặt hàng vào một giỏ mua hàng ảo.
  • Khi chúng tôi chọn giữa hai tùy chọn trên nút chuyển đổi giống như CTA.
  • Khi chúng tôi kéo xuống, hạ xuống để làm mới một nguồn cấp tin tức và xem bản cập nhật mới nhất.
  • Khi chúng tôi di chuyển lên và xuống, trong trang nguồn hoặc trang dài.

Khi chúng tôi thiết kế một tương tác vi mô, chúng tôi cần kiểm tra xem nó có thực sự cần thiết và quan trọng đối với trải nghiệm của người dùng hay không. Mặt khác, nó có khả năng đánh lạc hướng hình thức người dùng bằng cách sử dụng sản phẩm của bạn một cách hiệu quả hoặc trở thành nhiễu hình ảnh.

Nguyên tắc tương tác vi mô

Có ba nguyên tắc mà tôi luôn cân nhắc khi thiết kế các tương tác vi mô.

  1. Tính liên tục (và tinh tế)

Các yếu tố tương tác vi mô phải tinh tế để khi người dùng thực hiện một hành động, sẽ có một dòng chảy liên tục trong trải nghiệm của anh ấy / cô ấy. Ví dụ: nếu chúng ta đang tạo hoạt hình cuộn trong nguồn cấp dữ liệu dài, người dùng sẽ có thể tập trung vào nội dung của trang thay vì chính hoạt hình cuộn.

2. Dự đoán

Các tương tác vi mô chất lượng có yếu tố dự đoán cho phép người dùng điều hướng một sản phẩm hiệu quả và hiệu quả. Người dùng có thể dự đoán chính xác các tác động của hành động của họ, cảm thấy thoải mái khi đảo ngược chúng và tự tin vào khả năng thực hiện như mong đợi.

3. Khả năng biến đổi

Chuyển đổi chất lỏng giữa nhiều màn hình và các phép biến đổi được xác định rõ ràng của các đối tượng khác nhau trong chúng là các khía cạnh chính của các tương tác vi mô chất lượng. Chúng cho phép người dùng phát triển sự hiểu biết trực quan về mối quan hệ giữa các màn hình và các yếu tố bên trong chúng.

Khi được thiết kế theo các nguyên tắc này, các tương tác vi mô cung cấp bối cảnh cho một thiết kế bằng cách giúp người dùng biết cách tương tác với nó. Một tương tác vi mô là một sự kiện nhất thời hoàn thành một nhiệm vụ duy nhất. Có thể cho rằng các yếu tố tương tác nhỏ nhất của thiết kế trang web hoặc ứng dụng, tương tác vi mô là một trong những yếu tố quan trọng nhất vì chúng phục vụ nhiều chức năng cốt lõi.

Kích hoạt (chạm, vuốt, kéo, v.v.) bắt đầu mọi hành động được liệt kê trong phần trên (tính liên tục, dự đoán và khả năng biến đổi). Người dùng thực hiện một hành động trên một trang web hoặc ứng dụng để bắt đầu quá trình (ngay cả khi nó tiếp tục sau bước ban đầu). Điều này tuân theo mô hình kêu gọi hành động từ người dùng, quy tắc tương tác được xác định bởi giao diện (điều gì sẽ xảy ra và làm thế nào), phản hồi từ người dùng (có hoạt động hay không) và các mẫu hoặc vòng lặp (thực hiện hành động xảy ra một lần hoặc lặp lại theo lịch trình).

-Làm thế nào các nhà phát triển và nhà thiết kế có thể làm việc cùng nhau để mang lại các tương tác vi mô vào cuộc sống

Như bạn có thể thấy, các tương tác vi mô có vai trò quan trọng trong việc định hình trải nghiệm người dùng. Vì điều này, họ đã trở thành một phần ngày càng quan trọng trong công việc của tôi với tư cách là một nhà thiết kế sản phẩm. Đã làm việc trên nhiều dự án khác nhau trên nhiều nền tảng và sử dụng, tôi nhận thấy rằng không phải ai cũng nhận ra giá trị của các yếu tố này hoặc cách tạo ra chúng hiệu quả. Quan trọng hơn, các thành viên trong nhóm thường không biết cách thể hiện ý tưởng của mình với nhau về việc thiết kế các chuyển tiếp và tương tác vi mô.

Tôi nhận ra tất cả đã sôi sục trong giao tiếp - một cái gì đó đã bị mất trong bản dịch khi tôi giải thích ý tưởng thiết kế của mình cho các nhà phát triển của tôi. Có thể bạn đã nghe câu nói này của Khổng Tử trước đây, Hãy nói với tôi, và tôi sẽ quên. Chỉ cho tôi, và tôi có thể nhớ. Liên quan đến tôi, và tôi sẽ hiểu. Và đó là thông qua sự tham gia nơi chúng tôi, với tư cách là một nhóm các nhà thiết kế và phát triển, tạo ra những trải nghiệm tuyệt vời.

Đầu tiên, hãy để Lướt qua một mô tả nhanh về quy trình thiết kế

Trong một tình huống lý tưởng, khi một nhà thiết kế nảy ra ý tưởng về tương tác vi mô, quy trình làm việc truyền thống sẽ tiến hành theo thứ tự sau:

  1. Nhà thiết kế phát triển các yếu tố hình ảnh và hiệu ứng hoạt hình cần thiết để hiện thực hóa ý tưởng của anh ấy / cô ấy.
  2. Nhà thiết kế trình bày mô hình cuối cùng và các khái niệm cơ bản của nó cho các thành viên khác trong nhóm.

Nhưng điều gì sẽ xảy ra nếu quá trình thiết kế không diễn ra trong thực tế giống như trong lý thuyết? Điều gì sẽ xảy ra nếu chúng tôi trình bày một bảng phân cảnh hoặc một mô hình không hoàn chỉnh? Hoặc ai đó trong nhóm đang thiết kế mô hình?

Khi điều này xảy ra, các vấn đề có khả năng phát sinh trong việc trình bày hoặc phát triển. Những vấn đề này thường rơi vào một trong ba loại:

  1. Ý tưởng hoạt hình không được truyền đạt đủ rõ ràng.

Nếu bạn đang cố gắng mô tả một khái niệm hoạt hình bằng các từ hoặc hình ảnh tĩnh, bạn có thể thấy các nếp nhăn trên khuôn mặt của khán giả. Điều này có nghĩa là họ đang cố gắng hết sức để hiểu ý tưởng của bạn, nhưng họ không thực sự hiểu được. Ngay cả khi họ hiểu khái niệm cơ bản, bức tranh mà họ gợi ra trong tâm trí họ có lẽ không phù hợp với những gì bạn hình dung. Bởi vì mọi người có xu hướng cảm nhận hình ảnh chuyển động, hình ảnh tĩnh và mô tả bằng lời nói theo những cách khác nhau, dựa vào từ ngữ hoặc hình ảnh để truyền đạt ý tưởng hoạt hình tạo ra chỗ cho sự truyền thông và thường căng thẳng không cần thiết giữa các thành viên trong nhóm của bạn.

2. Nhà thiết kế không biết liệu hoạt hình có hoạt động tốt hay không cho đến khi họ kiểm tra và thử nghiệm nguyên mẫu của nhà phát triển.

Khi các nhà thiết kế không có kỹ năng tạo mẫu, họ đã giới hạn trong việc đưa ra ý tưởng của mình cho các nhà phát triển thông qua bảng phân cảnh. Ngay cả khi một nhà thiết kế tin tưởng mạnh mẽ vào một mô hình tương tác vi mô, anh ta hoặc cô ta không thể nói liệu nó có hoạt động hết tiềm năng hay không cho đến khi nhà phát triển hoàn thành nguyên mẫu. Đây là vấn đề vì một số lý do, nguyên nhân chính là khả năng truyền thông sai lệch cao mà cách tiếp cận như vậy đưa vào quy trình. Ngoài ra, nó mở ra cánh cửa nghi ngờ từ các thành viên của nhóm, và dẫn đến các câu hỏi về tính khả thi của ý tưởng. Điều này có thể tốn kém về thời gian từ góc độ phát triển.

3. Nhà thiết kế và nhà phát triển không ở cùng một trang

Khi các nhà thiết kế tạo hoạt hình UI hoặc tương tác vi mô, họ cố gắng đưa vào các chi tiết thiết kế phức tạp như tùy chỉnh, kịch bản, biểu thức và các hiệu ứng khác. Khi trình bày những ý tưởng này cho các nhà phát triển, họ có thể nghe thấy, không thể thực hiện ý tưởng này trong dòng thời gian của chúng tôi, chúng tôi không thể thực hiện chính xác như vậy nhưng chúng tôi sẽ cố gắng băm. ra các chi tiết khác nhau và các vấn đề kỹ thuật với các nhà phát triển. Tuy nhiên, các cuộc thảo luận này có thể sẽ không có kết quả nếu nhà thiết kế không có kiến ​​thức làm việc về các công cụ hoặc ngôn ngữ mà các nhà phát triển sử dụng. Các yếu tố này cần được xem xét khi xây dựng và thảo luận về ý tưởng để các tương tác vi mô tương thích với các cài đặt mặc định của nhà phát triển, tăng khả năng sản phẩm cuối cùng sẽ đáp ứng các tiêu chuẩn của nhà thiết kế (và mọi người khác).

Một số giải pháp cho những vấn đề này là gì?

Mặc dù tất cả các nhà thiết kế và nhà phát triển có cách truyền đạt riêng về các khái niệm hoạt hình của họ, tôi muốn chia sẻ một trong những phương pháp mà nhóm của tôi đang sử dụng. Phương pháp này đã khá thành công và dẫn đến ít cuộc họp hơn và đã cải thiện đáng kể thông tin liên lạc nhóm của chúng tôi.

Bây giờ, chúng tôi không còn tranh cãi về việc có nên bao gồm các tương tác vi mô hay không, chúng tôi đã khám phá những cách để làm cho chúng trở nên tốt hơn nữa!

Khái niệm tương tác Skeleton & Hướng dẫn tương tác

Khái niệm tương tác bộ xương và hướng dẫn tương tác không có chỗ cho việc diễn giải cho phép tôi bắt đầu công việc ngay lập tức và tự tin phù hợp với tầm nhìn của nhà thiết kế. Cuộc hẹn với kỹ sư IOS

Quy trình chuẩn mà chúng tôi sử dụng để truyền đạt về các thiết kế UX không dịch tốt cho hoạt ảnh UI. Trước hết, các thiết kế và luồng UX vẫn được thiết kế theo màn hình và tĩnh. Hình ảnh động UI là dòng chảy trong chính chúng, chúng là chất lỏng và dựa trên thời gian. Khi chúng tôi tạo ra một thiết kế tĩnh, chúng tôi tạo ra một khung dây thô để chúng tôi có thể hiểu ý tưởng và thảo luận về dòng chảy. Điều này cho phép chúng tôi dễ dàng sửa đổi và tinh chỉnh thiết kế trước khi chúng tôi tạo phiên bản cuối cùng. Khi mọi thành viên trong nhóm đồng ý rằng thiết kế đã sẵn sàng để trao cho các nhà phát triển, nhà thiết kế cung cấp cho nhà phát triển một hướng dẫn về kiểu dáng và một dòng màu đỏ chứa các chi tiết, thông số kỹ thuật và các thông tin quan trọng khác về thiết kế.

Nếu chúng tôi sử dụng một quy trình tương tự cho hình ảnh động, quy trình của chúng tôi có thể nhanh hơn và tốt hơn nhiều.

  1. Khái niệm tương tác bộ xương (Nghiên cứu chuyển động)

Một khái niệm tương tác bộ xương tương tự như khung dây bạn sẽ tạo khi thiết kế luồng, sự khác biệt chính là đây là bản thử nghiệm nguyên mẫu có thể chơi / có thể nhấp. Nếu chúng tôi mang điều này đến một cuộc họp, các thành viên trong nhóm của chúng tôi đã giành chiến thắng phải sử dụng trí tưởng tượng của họ để hiểu khái niệm này. Nhà thiết kế có thể sử dụng bản demo có thể chơi / có thể nhấp hoặc bảng câu chuyện tĩnh để tham chiếu trực tiếp các yếu tố hình ảnh và hoạt hình của thiết kế. Điều này sẽ cho mọi người cảm nhận rõ ràng và chính xác về ý tưởng của anh ấy / cô ấy. Đổi lại, các đối tác có thể cung cấp thông tin phản hồi rất cụ thể và do đó, có giá trị cao cho nhà thiết kế. Đồng thời, các nhóm quản lý và phát triển sản phẩm sẽ có được thông tin cho phép họ cải thiện thông tin liên lạc nội bộ và ước tính thời gian cho dự án.

2. Hướng dẫn tương tác

Khi nhóm đồng ý về khái niệm này, người thiết kế sẽ tạo ra hướng dẫn tương tác. Điều này tương tự như một hướng dẫn phong cách ở chỗ nó phác thảo vị trí, góc quay, tỷ lệ và thời gian của các yếu tố. Chúng tôi có thể thêm mọi chi tiết về hình ảnh động, điều này sẽ giúp các đối tác của chúng tôi hiểu rõ về nó. Khi nhà thiết kế hiển thị hướng dẫn tương tác cho các đối tác của họ, anh ấy hoặc cô ấy có thể rõ ràng hơn về chuyển động và đo lường của khái niệm hoạt hình. Điều này rất hữu ích để hoàn thiện công việc thông qua sự hợp tác. Nó cũng giúp các nhà thiết kế chu đáo hơn trong thiết kế hoạt hình / tương tác vi mô.

3. Kỹ năng tạo mẫu cho nhà thiết kế

Theo kinh nghiệm của tôi, để thiết lập cho mình một sự hợp tác thiết kế thành công, người thiết kế sản phẩm nên là người điều khiển hoạt hình và nhà phát triển nên cung cấp hỗ trợ. Điều này có nghĩa là nhà thiết kế sản phẩm chịu phần lớn trách nhiệm trong quan hệ đối tác. Họ không chỉ chịu trách nhiệm giải thích ý tưởng của họ rất rõ ràng, họ phải chứng minh rằng chúng khả thi bằng cách cung cấp bằng chứng về khái niệm. Điều đó cũng có nghĩa là các nhà thiết kế sản phẩm cần có khả năng tạo ra các nguyên mẫu hoạt hình của riêng họ. Nếu một nhà thiết kế sản phẩm có thể tạo ra một nguyên mẫu và trình bày nó trong một cuộc họp, cuộc thảo luận sau sẽ rõ ràng hơn và ít tốn thời gian hơn, dẫn đến một quá trình giao tiếp hiệu quả hơn nói chung.

Vì vậy, những loại công cụ tạo mẫu nên các nhà thiết kế nên làm quen với chúng? Có nhiều công cụ hiện có nhưng không phải ai cũng biết những gì hoạt động tốt nhất cho các tác vụ tương tác vi mô cụ thể. Dưới đây là các khuyến nghị của tôi dựa trên kinh nghiệm cá nhân của tôi khi thiết kế các yếu tố này.

Nếu bạn làm quen với mã hóa:

  • Di động: Xcode, studio Android
  • Di động hoặc Web: Framer
  • Web: Hoạt hình CSS

Nếu bạn muốn thiết kế sự tương tác giữa một lần đẩy giống như màn hình và mô-đun:

  • Invision và Marbel

Nếu bạn muốn tạo các tương tác chi tiết hơn:

  • Nguyên tắc, Adobe CC, origami Studio và Pixate

Nếu bạn muốn tạo tương tác chi tiết + hoạt hình:

  • Sau hiệu ứng

Hiện tại, tôi là một người hâm mộ sử dụng After Effect cho việc tạo mẫu của tôi. Ngay cả khi nó không tương tác (nghĩa là có thể nhấp), thì đó là cách hoàn hảo để trình bày một khái niệm hoạt hình. Ngoài ra, không có giới hạn về hiệu ứng và bạn có thể kiểm soát chuyển động chi tiết. Nó thậm chí còn có thể sử dụng nó để tạo tương tác trong không gian 3D, như đối với AR và VR.

Tương tác nhóm thú vị Làm cho sản phẩm thú vị

Các tương tác vi mô đã trở nên ngày càng quan trọng - nếu không nói là quan trọng - yếu tố của web, thiết kế di động và hơn thế nữa. Ngay cả khi cả nhà thiết kế và nhà phát triển nhận ra giá trị của hình ảnh động UI và được thúc đẩy để tạo ra chúng, họ vẫn thường đấu tranh để hợp tác theo cách hiệu quả, hiệu quả. Nó cần một đội ngũ mạnh để vận chuyển các tương tác vi mô lớn đúng thời gian; các nhóm như vậy đòi hỏi phải phân định rõ ràng về vai trò, kỹ năng giao tiếp hiệu quả và các công cụ tạo mẫu phù hợp cho các nhiệm vụ trong tay.

Để thiết lập các tương tác vi mô của bạn thành công, hãy đảm bảo nhóm của bạn sở hữu các đặc điểm này và tham gia vào các quy trình này. Và chúc may mắn với hành trình tương tác vi mô của riêng bạn!

TUYÊN BỐ TIẾT LỘ: Những ý kiến ​​này là của các tác giả. Trừ khi có ghi chú khác trong bài đăng này, Capital One không liên kết với, cũng không được chứng thực bởi bất kỳ công ty nào được đề cập. Tất cả các nhãn hiệu và tài sản trí tuệ khác được sử dụng hoặc hiển thị là quyền sở hữu của chủ sở hữu tương ứng của họ. Bài viết này là © 2017 Capital One.

Để biết thêm về API, mã nguồn mở, các sự kiện cộng đồng và văn hóa nhà phát triển tại Capital One, hãy truy cập DevExchange, cổng thông tin dành cho nhà phát triển một cửa của chúng tôi: developer.capitalone.com.