Saran Praktis Untuk Meningkatkan Kegunaan Halaman Arahan Dengan Animasi Dari Slide

(Ini adalah posting bersponsor.) Untuk waktu yang lama, animasi UI merupakan renungan bagi para desainer. Bahkan saat ini, banyak desainer menganggap animasi sebagai sesuatu yang menyenangkan tetapi tidak serta merta meningkatkan kegunaan. Jika Anda berbagi sudut pandang ini, maka artikel ini untuk Anda. Saya akan membahas bagaimana animasi dapat meningkatkan pengalaman pengguna halaman arahan, dan saya akan memberikan contoh terbaik dari animasi yang dibuat menggunakan kerangka Slides.

Kerangka kerja Slides adalah alat yang mudah digunakan untuk membuat situs web. Ini memungkinkan siapa saja untuk membuat halaman arahan yang ramping dalam beberapa menit. Yang perlu Anda lakukan adalah memilih desain yang sesuai dari daftar slide yang telah ditentukan.

Animasi Empat Cara Mendukung Kegunaan Halaman Arahan

Desain halaman arahan lebih dari sekadar presentasi visual; ini tentang interaksi. Detail desain interaksi membuat perbedaan mendasar di situs web modern. Dan efek animasi dapat memperkuat interaksi. Untuk meningkatkan kegunaan halaman arahan, animasi harus menjadi elemen fungsional, bukan hanya dekorasi. Ini harus melayani tujuan fungsional yang jelas. Berikut adalah beberapa cara umum agar animasi dapat meningkatkan kegunaan.

1. Buat Narasi

Setiap desainer adalah pendongeng. Saat kami membuat situs web, kami menceritakan sebuah kisah kepada pengunjung kami. Dan dimungkinkan untuk menceritakan kisah yang jauh lebih menarik dengan menggunakan animasi.

Animasi dapat membantu menghidupkan konten. Salah satu contoh bagus dari animasi tersebut dapat ditemukan di Ikonet. Animasi di sana membuat pengguna tetap terlibat saat mereka menggulir halaman dan belajar tentang perusahaan.

Animasi juga dapat digunakan untuk menarik perhatian pengunjung pada sesuatu yang harus mereka perhatikan dan lakukan. Misalnya, jika Anda memiliki bagian teks penting atau ajakan bertindak, menggesernya (alih-alih membuatnya muncul begitu saja) dapat membantu pengunjung memahami di mana mereka harus fokus. Lihatlah contoh Preston Zeller di bawah ini. Cara elemen muncul di halaman mengarahkan fokus pengguna ke area tersebut. Hal yang hebat tentang animasi ini adalah ia menarik perhatian ke informasi penting tanpa mengganggu.

2. Berikan Umpan Balik

Interaksi manusia-komputer didasarkan pada dua dasar: masukan pengguna dan umpan balik sistem. Semua objek interaktif harus bereaksi terhadap masukan pengguna dengan umpan balik visual atau audio yang sesuai.

Di bawah ini Anda dapat melihat efek Custom Checkbox yang dibuat menggunakan kerangka Slides. Animasi memantul halus yang dilihat pengguna saat mereka mengubah status sakelar memperkuat perasaan interaktivitas.

Dengan Slides, Anda dapat membuat animasi hover yang bagus dan mendorong pengguna untuk berinteraksi dengan objek. Lihatlah Berry Visual. Saat Anda mengarahkan mouse pada "Kirim Pesan" atau pada menu hamburger di sudut kanan atas, efek animasi yang bagus terjadi. Ini menciptakan perasaan bahwa elemen-elemen ini bersifat interaktif.

Buf Antwerp adalah contoh bagus lainnya tentang bagaimana umpan balik animasi melayang dapat meningkatkan pengalaman pengguna. Saat pengunjung mengarahkan kursor ke ubin, hamparan semi-transparan muncul, dan teks memberikan informasi tambahan tentang item tersebut.

3. Ciptakan Hubungan

Tempat yang bagus untuk menambahkan animasi ke halaman arahan adalah pada saat-saat perubahan. Terlalu sering, momen perubahan terjadi secara tiba-tiba &mdahs; misalnya, ketika pengguna mengklik tautan, layar baru tiba-tiba muncul. Karena perubahan mendadak sulit untuk diproses oleh pengguna, perubahan seperti itu biasanya mengakibatkan hilangnya konteks — otak harus memindai halaman baru untuk memahami bagaimana konteks baru terhubung dengan yang sebelumnya.

Pertimbangkan contoh perubahan mendadak ini:

Bandingkan dengan contoh berikut, di mana transisi animasi yang mulus memandu pengguna ke berbagai bagian layar:

Jelas bahwa dalam contoh kedua, animasi mencegah perubahan mendadak — itu mengisi celah dan menghubungkan dua tahap. Alhasil, pengunjung paham bahwa kedua tahapan itu saling berkaitan. Prinsip ini berlaku sama ketika Anda memiliki hubungan parent-to-child antara dua objek:

Ini juga berlaku saat Anda membuat transisi antar tahapan. Transisi mulus antara slide dalam contoh di bawah ini menciptakan kesan urutan, daripada memisahkan bagian halaman yang tidak terkait.

4. Membuat Tugas Membosankan Menjadi Menyenangkan

Mungkin sulit untuk membayangkan bagaimana memasukkan elemen menyenangkan ke dalam pengalaman sehari-hari. Tetapi dengan menambahkan sedikit kejutan di tempat yang paling tidak terduga, kita dapat mengubah interaksi yang akrab menjadi sesuatu yang tidak terduga dan, dengan demikian, mudah diingat.

Saat Anda mengunjungi Pameran Ruang 3D Tympanus, sepertinya situs galeri lain yang pernah Anda kunjungi sebelumnya. Tetapi kesan Anda tentang situs web berubah segera setelah Anda berinteraksi dengan halaman. Saat Anda memindahkan kursor, halaman bergerak, dan efek ini menciptakan kesan ruang 3D. Perasaan ini diperkuat ketika Anda berpindah dari satu halaman ke halaman lain; sepertinya Anda bepergian dari satu ruangan ke ruangan lain dalam ruang 3D.

Sekarang mari kita bicara tentang sesuatu yang jauh lebih akrab daripada efek 3D: formulir web. Siapa yang suka mengisi formulir? Mungkin bukan siapa-siapa. Namun, mengisi formulir adalah salah satu tugas paling umum di web. Dan adalah mungkin untuk mengubah aktivitas membosankan ini menjadi latihan yang menyenangkan. Lihatlah karakter Yeti Darin Senneff, yang digunakan dalam bentuk. Ketika pengguna mulai mengetik kata sandi mereka, maskot menutupi matanya. Efek animasi seperti itu membawa banyak kesenangan saat Anda melihatnya untuk pertama kali.

Last but not least, mungkin untuk membuat pengalaman menggulir tidak hanya lebih menarik secara visual, tetapi juga bermanfaat bagi pembaca. Di bawah ini adalah Storytelling Map, sebuah perjalanan interaktif di mana jalan di sepanjang peta dianimasikan sesuai dengan konten yang digulir di halaman. Idenya mengikat teks, visual, dan lokasi bersama-sama; pengunjung membaca informasi dan melihatnya dalam konteks peta).

Enam Praktik Terbaik Untuk Animasi Halaman Arahan

Mengidentifikasi tempat-tempat di mana animasi memiliki kegunaan hanyalah setengah dari cerita. Desainer juga perlu mengimplementasikan animasi dengan benar. Di bagian ini, kita akan mengetahui cara membuat animasi seperti seorang profesional.

1. Jangan Menganimasikan Beberapa Elemen Sekaligus

Ketika beberapa objek dianimasikan secara bersamaan, itu akan mengganggu pengguna. Karena otak dan mata manusia dirancang untuk memperhatikan objek yang bergerak, fokus pengguna akan melompat dari satu elemen ke elemen lainnya, dan otak akan membutuhkan waktu ekstra untuk mencari tahu apa yang baru saja terjadi (terutama jika gerakan itu terjadi dengan sangat cepat). Jadi, penting untuk menjadwalkan animasi dengan benar.

Sangat penting untuk memahami konsep koreografi transisi: urutan gerakan terkoordinasi yang mempertahankan fokus pengunjung saat antarmuka berubah. Minimalkan jumlah elemen yang bergerak secara independen; hanya beberapa hal yang harus terjadi pada saat yang sama (biasanya, tidak lebih dari dua atau tiga). Jadi, jika Anda ingin memindahkan lebih dari tiga objek, kelompokkan beberapa objek bersama-sama dan ubah menjadi satu unit, daripada menganimasikannya secara independen.

Slide menawarkan manfaat luar biasa bagi desainer web: Ini mencegah mereka menggunakan gerakan berlebihan dalam desain. Setiap efek animasi yang tersedia di Slide telah dirancang dengan cermat untuk menghadirkan konten dengan cara terbaik.

2. Animasi Seharusnya Tidak Bertentangan Dengan Kepribadian Halaman Arahan

Setiap kali Anda menambahkan animasi ke desain, Anda memperkenalkan kepribadian. Kepribadian ini akan sangat bergantung pada efek animasi yang Anda pilih untuk digunakan.

Ketika orang berinteraksi dengan suatu produk, mereka memiliki harapan tertentu. Bayangkan merancang halaman arahan untuk layanan perbankan, dan Anda memutuskan untuk menggunakan animasi memantul untuk memperkenalkan formulir yang mengumpulkan informasi pribadi pengguna. Banyak pengguna akan ragu untuk memberikan detail mereka karena formulir tersebut bertentangan dengan harapan mereka.

Kerangka kerja Slide memungkinkan Anda memilih dari 10 gaya animasi, seperti Stack, Zen, Film, Cards, dan Zoom. Bereksperimenlah dengan berbagai efek, dan pilih yang terbaik untuk kasus Anda.

3. Tonton Waktunya

Ketika datang untuk mendesain animasi, waktu adalah segalanya. Waktu animasi Anda dapat berarti perbedaan antara interaksi yang baik dan yang buruk. Saat mengerjakan animasi, Anda biasanya akan menghabiskan sepertiga waktu Anda untuk menemukan efek animasi yang tepat dan dua pertiga lainnya menemukan waktu yang tepat untuk membuat animasi terasa halus.

Secara umum, buat animasi tetap pendek. Animasi tidak boleh menghalangi pengguna menyelesaikan tugas, karena bahkan animasi yang dieksekusi paling indah pun akan sangat mengganggu jika memperlambat pengguna. Kecepatan optimal untuk animasi UI adalah antara 200 dan 500 milidetik. Animasi yang berlangsung kurang dari 1 detik dianggap instan, sedangkan animasi yang lebih lama dari 5 detik dapat menyampaikan perasaan penundaan.

Ketika datang untuk membuat efek animasi, satu parameter memiliki dampak langsung pada bagaimana animasi dirasakan: easing, atau fungsi pengaturan waktu dalam istilah CSS. Easing membantu desainer membuat gerakan lebih alami.

Kerangka kerja Slides memungkinkan desainer web untuk menyesuaikan easing. Anda akan menemukan easing bersama dengan efek lain di bagian "Pengaturan Efek".

4. Pikirkan Tentang Aksesibilitas

Animasi adalah pedang bermata dua. Itu dapat meningkatkan kegunaan untuk satu kelompok pengguna, sementara menyebabkan masalah bagi kelompok lain. Rilis Apple iOS 7 adalah contoh terbaru dari yang terakhir. iOS 7 penuh dengan efek animasi, dan tak lama setelah dirilis, pengguna iPhone melaporkan bahwa transisi animasi membuat mereka pusing.

Tanggung jawab Anda sebagai seorang desainer adalah memikirkan bagaimana orang-orang dengan gangguan penglihatan akan berinteraksi dengan desain Anda. Periksa pedoman WCAG tentang animasi, dan pastikan desain Anda selaras dengannya. Lacak apakah pengguna ingin meminimalkan jumlah animasi atau gerakan. Fitur media CSS khusus, "prefers-reduced-motion", mendeteksi apakah pengguna telah meminta agar sistem meminimalkan jumlah animasi atau gerakan yang digunakan. Ketika diatur ke "kurangi", maka lebih baik untuk meminimalkan jumlah gerakan dan animasi (misalnya, dengan menghapus semua gerakan yang tidak penting).

Juga, lakukan pengujian kegunaan untuk memeriksa bahwa semua kemampuan pengguna, termasuk orang dengan gangguan penglihatan, tidak akan memiliki masalah dalam berinteraksi dengan desain Anda.

5. Prototipe Dan Uji Keputusan Desain Anda

Animasi menyenangkan untuk dimainkan. Sangat mudah untuk berlebihan dan berakhir dengan desain yang membanjiri pengguna dengan terlalu banyak gerakan. Sayangnya, tidak ada peluru perak untuk animasi yang hebat; sulit untuk menetapkan kriteria yang jelas tentang apa yang "cukup". Bersiaplah untuk menghabiskan waktu untuk membuat prototipe, menguji, dan mengoptimalkan efek animasi.

Berikut adalah beberapa tips yang patut dipertimbangkan selama pengujian:

• Uji pada perangkat keras yang berbeda.
  Banyak faktor perangkat keras yang secara drastis dapat memengaruhi kinerja animasi: ukuran layar, kepadatan layar, kinerja GPU, dan masih banyak lagi. Akibatnya, pengguna di layar definisi tinggi mungkin memiliki pengalaman yang sama sekali berbeda dari pengguna di layar yang lebih lama. Pertimbangkan faktor-faktor tersebut saat merancang animasi untuk mencegah kemacetan kinerja. Jangan salahkan perangkat keras yang lambat; optimalkan animasi Anda agar berfungsi dengan baik di semua jenis perangkat.
• Tes di ponsel.
  Sebagian besar situs web dibuat dan diuji di desktop; pengalaman seluler dan kinerja animasi sering dianggap sebagai renungan. Kurangnya pengujian di seluler dapat menyebabkan banyak masalah bagi pengguna seluler, karena beberapa teknik animasi berfungsi dengan baik di desktop tetapi tidak begitu baik di seluler. Untuk menghindari pengalaman negatif, konfirmasikan bahwa desain Anda berfungsi dengan baik di desktop dan seluler. Uji di ponsel lebih awal dan sering.
• Tonton animasi dengan kecepatan lambat.
  Mungkin sulit untuk melihat masalah saat animasi (terutama yang kompleks) berjalan dengan kecepatan penuh. Saat Anda memperlambat animasi (misalnya, dengan kecepatan sepersepuluh), masalah seperti itu menjadi jelas. Anda juga dapat merekam video gerak lambat dari animasi Anda dan menunjukkannya kepada orang lain untuk mendapatkan perspektif lain.

Dengan kerangka kerja Slide, Anda dapat membuat prototipe interaktif fidelitas tinggi dalam hitungan menit. Anda dapat menggunakan editor WYSIWYG untuk membuat efek animasi, memublikasikan desain, dan melihat cara kerjanya di desktop dan perangkat seluler.

6. Animasi Tidak Harus Dipikirkan

Ada alasan mengapa begitu banyak desainer menganggap animasi sebagai fitur yang tidak perlu yang membebani antarmuka pengguna dan membuatnya lebih rumit. Dalam kebanyakan kasus, itu benar ketika desainer memperkenalkan animasi di akhir proses desain, sebagai lipstik untuk desain — dengan kata lain, animasi demi animasi. Gerakan acak tanpa tujuan apa pun tidak akan banyak menguntungkan pengunjung, dan dapat dengan mudah mengalihkan perhatian dan mengganggu.

Untuk membuat animasi yang bermakna, luangkan waktu di awal proyek untuk memikirkan area di mana animasi akan cocok secara alami. Hanya dengan cara ini animasi akan alami bagi aliran pengguna.

Kesimpulan

Animasi fungsional yang baik membuat halaman arahan tidak hanya lebih menarik, tetapi juga lebih bermanfaat. Jika dilakukan dengan benar, animasi dapat mengubah halaman arahan dari urutan bagian menjadi pengalaman koreografi yang cermat dan tak terlupakan. Kerangka kerja Slides membantu desainer web menggunakan animasi untuk berkomunikasi dengan jelas.