Image

QUICK CONTACT













Image

Kunci Dalam Menerapkan Animasi ke UI Design

10 Jul 2019 by Billy Gani

Dengan cepatnya perkembangan teknologi pada saat ini, animasi sudah tidak terlalu diperhatikan dalam tampilan visual yang mewah tetapi banyak digunakan sebagai fungsi yang diharapkan oleh para pengguna. Animasi menyelesaikan berbagai masalah fungsional dalam tampilan antarmuka dan membuatnya terasa lebih nyata dan responsif.

Maka dari itu, berikut ini, kami mengeksplor beberapa taktik dan kunci dari penggunaan animasi untuk meningkatkan fungsi dan emosi dari tampilan antarmuka:

1. Status Sistem

Selalu ada angka proses dari apa yang terjadi dalam aplikasi anda, seperti data yang sedang diunduh dari server, kalkulasi dan sebagainya yang mengambil waktu pengguna. Anda haruslah memberitahu pengguna bahwa aplikasi anda bukanlah sedang tidak bekerja, tetapi mengindikasikan mereka tentang status proses sistem yang sedang berjalan. Tampilan visual dari proses ini dapat memberikan pengguna rasa kontrol akan aplikasi yang mereka miliki. 

  • Waktu Memuat

Waktu memuat (loading time) merupakan situasi yang tidak dapat dihindari dari setiap produk digital. Animasi tidaklah menghilangkan semua problem memuat ini, tetapi dapat membuat waktu menunggu pengguna lebih dinikmati. Indikator dari proses memuat yang dibuat dengan menggunakan animasi dapat mengurangi persepsi pengguna akan waktu yang mereka habiskan. Animasi dapat mempengaruhi persepsi pengguna tentang produk anda, membuatnya terlihat lebih menarik. Jika sebuah aplikasi memberikan pengguna hal menarik untuk dilihat saat menunggu, hal ini dapat membuat pengguna tidak terlalu memperhatikan waktu menunggu itu sendiri.

  • Pull to refresh

Sebuah animasi dalam kategori ini didefinisikan ke dalam “pull down to refresh” yang menjelaskan proses pembaruan dari konten dalam sebuah perangkat. 

Tips: Animasi Pull-to-refresh haruslah dirancang sesuai dengan garis besar tampilan visual dari aplikasi - jika aplikasi nya mengambil tema minimalis, maka animasi yang digunakan juga harus mengusung minimalis sebagai dasarnya. 

  • Notifikasi

Karena perpindahan dapat menarik perhatian pengguna secara natural, membuat animasi dari notifikasi anda merupakan cara untuk memberi tahu pengguna tentang apapun tanpa mempengaruhi UX atau kenyamanan mereka dalam menggunakan aplikasi anda. 

Navigasi & Transisi

Penggunaan animasi paling dasar adalah di bagian transisi. Logika di balik tipe animasi ini adalah untuk membantu pengguna memahami perubahan yang terjadi dalam tampilan halaman, apa yang membuat perubahan itu terjadi dan bagaimana cara memulai perubahan tersebut ke depannya. 

  • Perpindahan Antar Konteks 

Para designer menggunakan animasi untuk memindahkan pengguna melalui navigasi konteks secara perlahan dan menjelaskan perubahan apa saja yang terjadi pada setiap elemen visual. 

  • Hierarki Visual & Hubungan Antar Elemen

Animation is perfect for describing objects of the interface and illustrating how they interact with each other. Animasi merupakan pilihan yang tepat dalam mendeskripsikan objek dari tampilan antarmuka dan mengilustrasikan bagaimana setiap elemen di dalamnya berhubungan. Animasi dapat menggambarkan bagaimana setiap elemen terhubung. 

  • Perubahan Fungsi 

Dalam beberapa kasus, para designer dituntut untuk merancang action button yang fungsinya dapat berubah dalam kondisi tertentu. Kita dapat melihat hal ini dalam desain yang memiliki ruang terbatas. Tipe animasi seperti ini menunjukkan bagaimana suatu elemen berganti saat pengguna berinteraksi dengannya. 

3. Visual Feedback

Respon Balik visual penting bagi setiap tampilan antarmuka. Hal ini dapat membuat pengguna merasa bahwa mereka memiliki kontrol yang berarti mereka memahami serta mengerti konteks mereka dalam sistem setiap waktunya. 

Elemen dari tampilan antarmuka seperti tombol haruslah terlihat nyata, meskipun berada di belakang lapisan kaca. Dalam dunia nyata, tombol, kontrol dan objek lainnya merespon setiap tindakan yang kita lakukan. Pengguna berekspektasi dengan tingkat responsif yang sama dari kontrol tampilan antarmuka. 

  • Memvisualisasikan Hasil Dari Setiap Tindakan

Animasi dapat meningkatkan setiap poin interaksi dan memperkuat tindakan dari yang dilakukan sebelumnya. 

 

Melihat beberapa tips dalam menggunakan animasi diatas, sudahkah anda menemukan desain yang tepat bagi website dan aplikasi anda agar bisa berkompetisi dengan kompetitor anda di tahun 2019 ini? Atau malah anda belum menemukan desain yang tepat untuk page website anda?

Untuk membantu mendapatkan visualisasi UI UX di Jakarta yang sesuai dengan keinginan anda, Eannovate kini hadir sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik  dalam bidang UI UX Design di Jakarta.

Atau sebenarnya anda hanya memerlukan website yang sederhana tetapi tetap berkualitas dengan harga yang terjangkau? Kami hadir dengan ExpressWeb sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan website dan UI UX Design di Jakarta dengan harga terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.

Jika ada memiliki pertanyaan mengenai UI UX Design Jakarta dan tentang web development di Jakarta, jangan sungkan untuk langsung menghubungi kami di

Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,

Email : hello@eannovate.com atau menggunakan contact form.

 

 

 

Article Reference: UXPlanet



AYO BUAT IDEMU JADI KENYATAAN!

Hubungi kami untuk membicarakan ide anda. Ayo bersama membuatnya menjadi kenyataan!

AYO MULAI!

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.


Image
TELEPON
INDONESIA
+6221 5437 5601
+62813 8251 8448


Whatsapp no of Eannovate
WHATSAPP
+62813 8251 8448
Click number above

Whatsapp of Web, UI UX Design, Mobile App Development, SEO in Jakarta,Indonesia
E-MAIL
hello [at] eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta,Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm