Cara Mengintegrasikan Desain Gerak Dalam Alur Kerja UX

Sebagai profesional UX, kami memainkan peran kunci dalam meningkatkan standar pengalaman pelanggan. Perhatian sederhana terhadap detail sering kali merupakan sinyal bagi pelanggan bahwa kita memikirkan mereka. Di ruang digital, kami fokus pada interaksi pengguna dalam perangkat dan proses aplikasi.

Dengan kekuatan komputasi desktop yang terus meningkat, kecanggihan browser, dan penggunaan aplikasi asli, setiap hari kami mempelajari cara-cara baru untuk mendorong batas dari apa yang mendefinisikan UI yang dibuat dengan baik. Ketika digunakan dengan benar, gerakan dapat menjadi utilitas utama dalam membantu pengguna Anda mencapai tujuan mereka.

Bacaan Lebih Lanjut tentang SmashingMag:

• Rangkuman Tutorial Grafis Gerak Terbaik
• Memasang After Effects Ke Alur Kerja UX
• Seni Desain Judul Film Sepanjang Sejarah Sinema
• Membuat Animasi Tingkat Lanjut Di Photoshop
  

Kapan Harus Mempertimbangkan Animasi

Sebagai seorang desainer UX, kemungkinan besar Anda adalah bagian dari, jika tidak menjalankan, fase penemuan proyek Anda. Ini mungkin termasuk wawancara pemangku kepentingan, persona, wawancara merek, tes kegunaan, pemetaan perjalanan, pertanyaan kontekstual, dll. Selama fase ini, Anda akan belajar banyak tentang pengguna Anda, tetapi kemungkinan besar mereka tidak akan pernah langsung keluar dan memberi tahu Anda bahwa mereka membutuhkan animasi atau gerak. Jadi, bagaimana Anda tahu apakah animasi layak dipertimbangkan dalam desain UI?

Saat berbicara dengan pengguna, Anda mungkin mendengar umpan balik seperti:

• “Saya tidak tahu harus fokus ke mana.”
• "Apa yang paling penting di sini?"
• "Saya tidak punya keinginan untuk menggunakan alat ini."
• “Bagaimana saya tahu apa yang harus saya lakukan selanjutnya?”
• “Bagaimana saya tahu saya telah menyelesaikan tugas saya?”
• “Saya tidak mengerti apa yang dikatakan data ini kepada saya.”

Pernyataan seperti ini mungkin mengungkapkan peluang untuk menggunakan gerakan untuk meningkatkan pengalaman.

Mendapatkan Dukungan Dari Tim

Pada titik ini sebagai seorang desainer, Anda mungkin mempertimbangkan beberapa ide awal tentang bagaimana gerakan dapat meningkatkan pengalaman. Bagaimana Anda mendapatkan dukungan untuk ide-ide Anda? Mencoba meyakinkan tim pemangku kepentingan, manajer produk, klien, dan pengembang bahwa menghabiskan waktu dan uang ekstra untuk peningkatan animasi "hanya terasa seperti hal yang benar untuk dilakukan" hanya akan membuat Anda sejauh ini. Bagaimana Anda meluangkan waktu untuk upaya ekstra dalam jadwal proyek tipikal Anda yang sudah menuntut? Bagaimana Anda meyakinkan tim bahwa animasi adalah solusi yang tepat untuk skenario UX tertentu?

Jalur tercepat dan paling universal untuk mendapatkan dukungan dari tim Anda adalah menyelaraskan ide animasi Anda dengan kebutuhan dan sasaran pengguna. Ini akan memastikan bahwa Anda tidak hanya membuat animasi untuk diri sendiri, tanpa manfaat apa pun bagi pengguna.

Cara Menyelaraskan Animasi Dengan Kebutuhan Pengguna

Ketika konsep animasi diselaraskan dengan kebutuhan pengguna tertentu, mereka mulai mengungkapkan nilainya. Ini juga mencegah Anda merenungkan animasi yang tidak berarti dan terlalu rumit. Hindari membuang-buang waktu dan usaha semua orang, terutama jika animasi tidak memberikan nilai bagi audiens Anda.

Fungsi Utama Animasi

Animasi memiliki fungsi sebagai berikut:

• mengarahkan pengguna dalam lingkungan mereka,
• memberikan tingkat kejelasan yang lebih dalam,
• memberikan umpan balik yang berguna bagi pengguna,
• memungkinkan penggunaan real estat layar yang lebih imajinatif (di dalam dan di luar kanvas),
• memperkuat hierarki elemen,
• mengarahkan fokus pengguna,
• petunjuk apa yang harus dilakukan selanjutnya,
• mengangkut pengguna dengan lancar di antara konteks navigasi,
• menjelaskan perubahan susunan elemen pada layar,
• memberikan isyarat visual yang mengakui masukan pengguna dengan segera,
• mengkomunikasikan pesan merek dengan lebih baik,
• buat keterjangkauan yang terlihat dan terasa seperti manipulasi langsung layar,
• menciptakan estetika dan daya tarik mendalam yang mendorong penggunaan dan meningkatkan adopsi.

Matriks ini menggambarkan cara memetakan umpan balik riset pengguna ke fungsi animasi:

“Animasi UX memiliki kekuatan untuk mengatasi banyak kebutuhan umum pengguna untuk membantu orang menyelesaikan tujuan mereka. Matriks ini menyelaraskan sampel umpan balik penelitian pengguna (atas) dengan fungsi animasi (samping).

Ketika diprioritaskan dengan cara ini, ini menunjukkan bagaimana animasi terutama dapat menjadi alat untuk meningkatkan UX dan bukan cara baru untuk menciptakan daya tarik.”

— Mark Di Sciullo

Cara Mengintegrasikan Animasi Ke dalam Alur Kerja UX

Berikut ini adalah strategi yang disarankan untuk mengintegrasikan animasi dalam alur kerja UX. Jika proyek Anda gesit, pendekatan ini harus dilakukan dalam durasi siklus sprint.

Temukan Dan Jelajahi

Hanya setelah Anda memahami audiens Anda dengan baik dan dapat memastikan bahwa desain Anda cocok dengan pemahaman itu, Anda harus melakukan upaya kolaboratif dengan tim Anda. Jadi, meletakkan dasar pertama.

• Riset Konsumsi dan biasakan diri Anda dengan semua informasi yang tersedia tentang audiens target Anda. Ini bisa berupa artefak seperti persona, peta perjalanan pelanggan, riset pengguna, pedoman branding, panduan gaya, dll.
• Sejajarkan Pastikan animasi Anda memenuhi kebutuhan dan sasaran pengguna tertentu. Jika memungkinkan, sejajarkan fungsi animasi yang Anda usulkan dengan umpan balik pengguna tertentu (seperti yang diilustrasikan dalam bagan di atas), dan tunjukkan bagaimana hal itu akan meningkatkan kemampuan pengguna untuk menyelesaikan tujuan mereka.
• Jelajahi Luangkan waktu untuk menjelajahi berbagai sumber inspirasi yang menampilkan animasi. Ada banyak situs web portofolio, seperti Dribbble, Behance, dan CodePen, tempat Anda dapat menemukan banyak contoh untuk dipelajari.
• Berkomunikasi Bagikan niat Anda lebih awal dengan tim pengembangan dan klien Anda. Biarkan mereka tahu bahwa Anda sedang mempertimbangkan solusi yang membutuhkan gerakan. Persiapkan diri Anda dengan hasil kerja keras Anda dalam meneliti dan menyelaraskan ide Anda dengan kebutuhan dan tujuan pengguna. Melakukannya sendiri lebih menantang; bekerja dengan pengembang Anda. Teknologi dapat memperluas apa yang mungkin. Berkomunikasi lebih awal akan mengurangi kemungkinan ide gagal sebelum waktunya.

Desain dan Papan Cerita

• Sketsa Seperti halnya proses desain, tempat terbaik untuk memulai adalah dengan kertas, papan tulis, dan/atau aplikasi menggambar. Media ini membuat jus kreatif mengalir dengan cara yang berulang tanpa hambatan. Kamu akan membutuhkan:
  • selembar kertas atau buku catatan (templat storyboard ideal);
  • papan tulis;
  • program atau aplikasi menggambar apa pun (SketchBook Pro, Mischief, Photoshop);
  • poin bonus jika Anda menggunakan tampilan pena (stylus) atau tablet pena.
• Storyboard Setelah Anda memiliki beberapa pemikiran dan ide, buat storyboard dari status utama animasi Anda. Andalkan anotasi sederhana untuk membayangkan alurnya. Ini adalah cara yang efektif untuk mengomunikasikan ide-ide Anda dengan orang lain di awal proses.
• Bagikan Sketsa dan papan cerita adalah alat yang hebat untuk mendapatkan umpan balik awal dari tim Anda. Jangan malu untuk membagikan sketsa dan papan cerita Anda. Mereka adalah alat yang hebat untuk membuat tim Anda memahami apa yang Anda rencanakan untuk dibuat dan mengumpulkan wawasan kolaboratif yang berharga.
• Putuskan Berdasarkan waktu yang tersedia, putuskan apa yang perlu dibuat prototipe dan bagaimana animasi Anda akan ditinjau dan/atau diuji oleh pengguna. Anda kemudian harus memilih pendekatan yang tepat untuk membuat prototipe Anda.

Animasi Prototipe

Prototipe dengan cepat mewujudkan ide Anda sebelum Anda menghabiskan banyak waktu untuk coding. Dari perspektif UX, tujuan utama prototipe adalah untuk menyampaikan ide Anda kepada pengguna di awal proses desain, saat penyempurnaan dan iterasi lebih mudah dan lebih murah.

Ada dua cara utama untuk mendekati animasi prototyping. Spektrum berkisar dari prototipe yang sangat eksploratif menggunakan salah satu dari banyak aplikasi di pasar, untuk melompat langsung ke prototipe kode yang memberikan representasi paling akurat dari apa yang layak dalam lingkungan produksi.

Pilihan apakah akan menggunakan aplikasi prototipe atau membuat prototipe kode bermuara pada hal berikut:

• Berapa banyak kesetiaan yang diperlukan untuk menjelaskan interaksi?
• Berapa banyak waktu yang tersedia? (Waktu sama dengan biaya. Apakah Anda punya waktu untuk mempelajari alat baru?)
• Alat atau pendekatan apa yang paling nyaman bagi Anda saat ini?
• Seberapa kompleks atau canggih gerakannya?

Gunakan penilaian Anda sendiri untuk menentukan pendekatan yang tepat. Jika Anda dapat dengan mudah dan cepat mengomunikasikan gerakan menggunakan animasi garis waktu Photoshop sederhana, itu akan sama efektifnya dengan prototipe yang sepenuhnya dikodekan.

Aplikasi untuk Pembuatan Prototipe

Aplikasi untuk membuat prototipe menyederhanakan cara kita berpikir tentang animasi dalam sebuah antarmuka. Setiap hari, semakin banyak alat tersedia untuk desainer. Alat-alat ini berkembang pesat untuk memasukkan fitur-fitur untuk membuat transisi, transformasi, dan remaja.

Aplikasi yang Anda pilih akan tergantung pada apakah konsep gerak lebih eksploratif. Juga, pertimbangkan seberapa cepat prototipe perlu dibuat, bagaimana itu akan ditinjau, bagaimana akan diuji dengan pengguna, dan tingkat kenyamanan desainer dengan aplikasi.

Berikut ini adalah daftar aplikasi prototyping populer untuk animasi UX:

• Adobe Photoshop Melalui penggunaan timeline, comps yang dimulai di kanvas Photoshop dapat dengan mudah dikonversi ke animasi frame. Photoshop sangat berguna untuk eksplorasi gerak di atas comps yang ada.
• Adobe After Effects Alat ini adalah pembangkit tenaga listrik untuk eksplorasi kreatif tanpa batas. Bahaya dari penggunaan alat ini secara berlebihan adalah sangat mudah untuk membuat sesuatu yang tidak layak untuk dibangun dengan teknologi front-end saat ini. Selain risiko, ada baiknya mempertimbangkan bagaimana After Effects cocok dengan alur kerja UX, karena alat ini memiliki banyak kegunaan kreatif, terutama untuk menjelajahi kemungkinan baru dan mendorong amplop dengan gerakan.
• Keynote Ya, Keynote. Presentasi yang dapat diputar sendiri yang memanfaatkan properti "Magic Move" adalah cara cepat untuk menunjukkan interaktivitas dan gerakan UI. Thoughtbot memiliki ikhtisar yang luar biasa tentang pembuatan prototipe animasi dengan Keynote.
• Adobe Edge Animate Lingkungan ini memungkinkan desainer untuk mengeksplorasi konsep gerak UI menggunakan animasi seperti keyframe. Keluaran yang dihasilkan bergantung pada pustaka JavaScript berpemilik, yang akan membuat banyak pengembang curiga terhadap kesiapan produksi animasi yang dihasilkan dengan alat ini.
• Axure 8 (dalam versi beta) Axure versi baru yang menarik ini menambahkan lebih banyak pola animasi dengan banyak opsi easing yang menarik. Axure membuat Anda berpikir tentang gerakan selama upaya wireframing awal Anda. Animasi dilakukan terutama melalui acara ( onPageLoad , OnClick , OnHover , OnMouseOver , dll.) dan tidak menyertakan keyframing apa pun. Namun, itu membuat seorang desainer berpikir dengan cara yang memudahkan mereka untuk berkomunikasi dengan pengembang.
• InVision Aplikasi berbasis browser yang sangat kolaboratif ini mencakup serangkaian transisi dan gerakan animasi. Alat prototipe aliran layar (di mana Anda membuat prototipe di sekitar serangkaian layar yang terhubung melalui interaksi) sangat ideal untuk menyiapkan hotspot yang dapat diklik dengan cepat tanpa menjadi terlalu rumit. Semua gerakan terjadi pada peristiwa klik atau pengalihan halaman. Pratinjau desain Anda dengan mudah di perangkat apa pun. Bahkan termasuk fitur pengujian pengguna seluler gratis sehingga Anda dapat melakukan studi pengguna Anda dalam InVision. Ada rencana untuk memasukkan lebih banyak fitur animasi berbasis garis waktu juga. Sangat keren.
• Flinto Alat pembuatan prototipe aplikasi seluler untuk Mac ini memungkinkan Anda menautkan layar dengan cepat dan menerapkan transisi animasi. Ini memiliki banyak properti transisi animasi yang dapat disesuaikan untuk mendapatkan gerakan yang tepat. Iterasi dalam alat prototyping aliran layar ini mudah dengan menyeret dan menjatuhkan layar baru di atas yang lama.
• Prinsip Alat prototipe untuk aplikasi seluler ini, juga untuk Mac, memungkinkan Anda menggunakan garis waktu untuk membingkai transisi animasi.
• Proto.io Aplikasi berbasis browser ini mencakup beberapa kemampuan animasi yang canggih. Melalui penggunaan "interaksi" dan "status", seorang desainer dapat membuat prototipe gerakan kompleks dan bahkan dapat membuat animasi seperti keyframe.

Prototipe Berkode

Desainer yang lebih cenderung teknis dapat memotong untuk mengejar dan melompat langsung ke perpustakaan yang tersedia di kerangka UI front-end mereka untuk memulai proses pembuatan prototipe. Jika tidak, bagian dari proses ini akan membutuhkan kolaborasi dengan pengembang.

Mengandalkan perpustakaan pola gerak standar yang tidak biasa mungkin dapat membatasi eksplorasi solusi Anda, sehingga menghasilkan hasil yang hambar. Pada saat yang sama, tidak mempertimbangkan apa yang layak adalah berisiko dan dijamin akan menghasilkan kekecewaan dan waktu yang terbuang percuma.

Seorang desainer UX yang nyaman menyingsingkan lengan baju mereka dan menggali ke dalam kode akan lebih mengontrol detailnya. Mereka juga akan tetap membumi dalam kenyataan. Ini membutuhkan tingkat kenyamanan dengan HTML dan CSS dan terkadang JavaScript. Desainer harus memiliki pemahaman yang baik tentang bagaimana bekerja di lingkungan pengembangan front-end modern. Ketika seorang desainer dan pengembang dapat berkolaborasi dengan cara ini, kemungkinan sukses selalu tinggi.

Berikut ini adalah contoh kecil dari banyak kerangka kerja dan pustaka UI yang tersedia untuk mengkodekan prototipe UX.

• Animasi CSS3 Ini adalah cara paling dasar untuk memulai. Seorang animator UX yang ingin membuat prototipe berkode harus memiliki dasar yang kuat dalam CSS3 dan HTML5 untuk memahami dasar-dasar cara kerja UI web.
• Motion UI, ZURB Pustaka Sass ini, awalnya untuk Foundation for Apps ZURB, akan membantu Anda membuat transisi dan animasi CSS dengan cepat. Membuat prototipe elemen dan gerakan animasi dengan cepat dengan class sederhana atau mixin Sass.
• Transit Pustaka transisi dan transformasi CSS sederhana ini adalah untuk mereka yang akrab dengan jQuery.
• Velocity Pustaka JavaScript yang lebih kuat dan terdokumentasi dengan baik, yang satu ini dirancang khusus untuk desainer gerak.
• GSAP (GreenSock Animation Platform) Platform animasi lengkap ini akan menganimasikan apa pun yang dapat disentuh JavaScript (properti CSS, objek perpustakaan kanvas, SVG, objek generik, dll.). Direkomendasikan oleh Google untuk animasi JavaScript.
• Famous Kerangka aplikasi lengkap (terutama untuk seluler), Famous dibangun di atas mesin tata letak 3D sumber terbuka, terintegrasi penuh dengan mesin animasi fisika 3D. Ide di balik Famous adalah bahwa browser tidak pernah dibuat untuk merender aplikasi — game dibuat untuk merender aplikasi. Jika Anda menginginkan grafik dan animasi yang halus (60 FPS), Anda memerlukan akselerasi GPU, yang dimungkinkan oleh Famous dengan merender ke DOM, kanvas, atau WebGL.
• Framer Framer adalah kerangka kerja prototyping mandiri dan lingkungan pengkodean. Ini terintegrasi dengan Photoshop dan Sketch. Meskipun tidak menghasilkan kode siap produksi (dan peralihan dari JavaScript ke CoffeeScript dipertanyakan), ini membantu desainer berbagi prototipe yang terasa nyata. Mendukung kontrol halus dari interaksi gestur dan gerakan, ini memungkinkan desainer untuk secara akurat mengomunikasikan interaksi ini dengan pengembang.
• React Dikembangkan oleh Facebook, React adalah library JavaScript untuk membangun antarmuka pengguna yang besar, dinamis, berbasis data, dan siap produksi.

Uji Dengan Pengguna

Berikut adalah proses dasar untuk pengujian dengan pengguna:

1. Jadwal Kumpulkan sekelompok kecil peserta yang mewakili audiens target Anda (lima peserta ideal).
2. Melakukan tes Sesi pengujian pengguna ideal untuk memvalidasi apakah animasi Anda efektif. Jalankan peserta melalui tugas-tugas umum yang akan dilakukan di aplikasi Anda. Amati apakah animasi Anda membantu atau merugikan pengalaman tersebut. Idealnya, sesi UX direkam dengan video sehingga dapat dirujuk dan ditinjau setelahnya. Jika Anda melakukan sesi dari jarak jauh, manfaatkan fitur perekaman layar yang tersedia di aplikasi konferensi web seperti GoToMeeting dan WebEx.
3. Tinjau umpan balik Luangkan waktu untuk merenungkan wawasan yang dikumpulkan dari sesi pengujian pengguna. Pastikan bahwa kebutuhan dan kekhawatiran pengguna dari fase penemuan awal ditangani dengan benar.
4. Putuskan Setelah pengujian pengguna selesai dan umpan balik telah ditinjau, Anda dapat membuat penilaian berdasarkan informasi apakah penyempurnaan lebih lanjut diperlukan atau Anda siap untuk pindah ke produksi.

Catatan Akhir

Desainer UX yang mempertimbangkan gerakan dalam desain mereka akan menemukan diri mereka di bawah tekanan untuk menjelaskan, mengomunikasikan, dan membela mengapa upaya ekstra diperlukan.

Kenali audiens Anda, dan komunikasikan niat Anda kepada tim sejak dini. Manfaatkan semakin banyak pendekatan yang tersedia saat ini, mulai dari kertas hingga kode, yang akan membantu Anda mendapatkan dukungan yang diperlukan untuk mengintegrasikan animasi dengan lancar dalam alur kerja Anda.

Dengan animasi UX, kehalusan adalah kuncinya. Berfokus pada membantu pengguna mencapai tujuan mereka adalah yang terpenting.

Sumber daya

• “Animasi Fungsional dalam Desain UX,” Amit Daliot, Smashing Magazine Daliot memberikan gambaran tentang bagaimana animasi dalam desain UX adalah alat untuk menciptakan kejelasan dan logika dalam sebuah pengalaman, termasuk banyak contoh berguna.
• “UI Anda Bukan Animasi Disney,” Sophie Paxton, Medium Paxton menawarkan wawasan yang luar biasa tentang cara menghindari pembuatan animasi yang hanya menghalangi pengguna.
• Animate.css, Daniel Eden Berikut adalah sekumpulan animasi keren, menyenangkan, dan lintas-browser yang dapat Anda gunakan dalam proyek Anda.
• Contoh animasi CodePen Tempat bermain animasi UI yang inspiratif dari CodePen dapat dibedah dan bercabang untuk membuat konsep baru atau hanya untuk bereksperimen.
• “Menganimasikan SVG Dengan CSS,” Chris Coyier, CSS-Trik Mulailah menggunakan kode SVG sebaris, tepat di dalam HTML, dan menganimasikan elemen melalui CSS.
• “Alur Kerja Desainer Web Modern” (video), Chris Coyier, CSS-Tricks Meskipun berumur beberapa tahun, ini masih merupakan contoh yang relevan dari alur kerja front-end modern.
• “Contoh Animasi,” react.rocks Galeri ini menunjukkan kekuatan React untuk animasi.