Salah satu tantangan yang dihadapi desain web interaktif adalah bahwa ada begitu banyak cara pengguna dapat berinteraksi dengan halaman, dan bahkan lebih banyak cara halaman dapat merespons. Beberapa desain interaktif akan menciptakan pengalaman pengguna yang mulus, memberikan umpan balik kepada pengguna dan mengarahkan mereka tentang apa yang harus dilakukan selanjutnya.

Untuk mempelajari cara membedakan pengalaman situs web interaktif yang baik dari yang buruk, kali ini akan mengambil pelajaran dari para profesional. Ada tip berguna untuk desain web interaktif dengan mengumpulkan beberapa contoh favorit dan mendiskusikan apa yang membuatnya bekerja.

1. Manfaatkan waktu Loading

Waktu Loading / Memuat dapat menjadi salah satu hambatan terbesar untuk pengalaman menjelajah web. Sebuah bisnis dapat menghabiskan begitu banyak uang dan upaya untuk membangun situs web yang luar biasa dan indah, tetapi jika dibutuhkan lebih dari dua detik untuk memuat, penelitian telah menunjukkan bahwa pengunjung secara eksponensial lebih mungkin untuk pergi sebelum melihatnya. Adil untuk berasumsi bahwa pengguna mengalami waktu pemuatan sebagai pengalaman negatif.

Tetapi memuat layar juga bisa menjadi peluang, jika memiliki perhatian pengguna Momen-momen ini memberikan kesempatan yang tidak terduga dan, oleh karena itu, untuk mengesankan pengguna dibuatlah animasi. Kesempatan baru untuk memamerkan merek dan melibatkan serta menggairahkan pengguna. Seringkali, animasi benar-benar memberi pengguna rasa kemajuan visualisasi progres bar, untuk menunjukkan berapa banyak waktu yang tersisa sebelum pengguna mengakses halaman berikutnya. Idealnya, layar pemuatan ini menawarkan sesuatu kepada pengguna untuk dilakukan, seperti game / permainan untuk dimainkan saat mereka menunggu, yang menciptakan pengalaman interaktif menyenangkan. Intinya adalah bahwa loading / memuat tidak selalu berarti pengalaman negatif bagi pengguna. Loading bahkan tidak hanya harus cepat dan merupakan bagian paling menarik dari sebuah situs web.

2. Atur informasi melalui Scrolling / pengguliran animasi

Scroll / menggulir adalah salah satu interaksi paling sederhana dan paling intuitif yang dapat dilakukan pengguna. Tetapi hanya karena pengguna mungkin tidak berpikir untuk menggulir, bukan berarti perancang web tidak boleh meniadakannya. Ada banyak cara yang dimanfaatkan desainer untuk menggulir animasi untuk memberi pengguna rasa gerakan dinamis di seluruh situs web.

Teknik yang populer adalah memicu animasi tertentu untuk diaktifkan saat pengguna scrooling / menggulir situs web. Hal ini cukup ajaib dalam menghidupkan visual dan menciptakan ilusi bahwa halaman yang diakses pengguna sebenarnya sedang dibangun, secara real time, sebagai tanggapan atas interaksi mereka.

Teknik serupa yang telah mendapatkan daya tarik adalah scrolling / pengguliran paralaks . Jenis gerakan ini melibatkan katakanlah dua objek di layar bergerak dengan dua kecepatan berbeda, saat pengguna menggulir halaman ke bawah. Hasilnya adalah simulasi kedalaman gerakan 3D, karena objek di latar depan biasanya bergerak lebih cepat daripada objek di latar belakang. Akhirnya, desainer dapat menggunakan transisi halaman penuh, di mana scroll / gulir halus tradisional diganti dengan lompatan ke layar berikutnya atau perubahan halaman. Hal ini dapat menciptakan efek dramatis, memperkenalkan tidak hanya elemen halaman baru tetapi terkadang skema warna yang sama sekali berbeda, membuat situs web terasa baru di setiap gulir.

Secara keseluruhan, animasi bergulir ini memberikan umpan balik penting kepada pengguna tentang interaksi mereka, memberi tahu mereka bahwa mereka baru saja memasuki bagian baru situs web dan akan mengharapkan perubahan dalam jenis informasi yang disampaikan. Singkatnya, mereka menyediakan hierarki dan organisasi yang jelas dalam paket interaktif yang mengesankan.

3. Perpisahan gerakan vertikal dengan slider dan carousel / komidi putar

Disebut demikian karena carousel memadatkan konten situs web menjadi bagian-bagian berputar yang dapat dilalui pengguna, seperti gerakan pintu putar dari karnaval di kehidupan nyata. Teknik ini menjadi lebih umum di situs web karena meningkatnya popularitas interaksi gesekan di aplikasi seluler. Karena pada dasarnya adalah bentuk scroll / pengguliran horizontal, pengguliran ini memberikan waktu istirahat yang sangat dibutuhkan pengguna daripada pengguliran vertikal yang monoton tanpa akhir.

Pengguna cenderung mengasosiasikan pengguliran ke bawah dengan maju ke bagian baru situs web. carousel dan slider, di sisi lain, memungkinkan perancang web untuk memasukkan lebih banyak konteks ke setiap bagian, karena pengguna secara teknis tidak meninggalkannya. Ini berarti daripada mengacaukan halaman dengan semua informasi yang diperlukan sekaligus, carousel meruntuhkan elemen situs menjadi segmen yang lebih kecil, memungkinkan pengguna untuk menggilirnya sedikit demi sedikit.

Teknik ini berfungsi paling baik jika kontennya serupa dalam format, jadi kelompokkan bersama gambar produk, profil atau testimoni pelanggan. Teknik ini juga berguna untuk menampilkan variasi, seperti produk yang datang dalam warna yang berbeda. Dalam hal menganimasikan carousel ini, gaya transisi yang menarik adalah kiri-ke-kanan langsung, simulasi pengocokan kartu, hingga animasi roda berputar.

4. Meledakkan menu navigasi

Cara ini seperti menggesek, menu seperti hamburger adalah tren umum lain dari desain seluler/aplikasi yang telah masuk ke situs web desktop. Bahkan jika ikon hamburger itu sendiri tidak ada, pengguna umumnya akrab dengan gagasan bahwa navigasi tidak perlu ditampilkan setiap saat. Pengguna tahu bahwa itu ada dan mereka dapat berinteraksi dengannya saat dibutuhkan. Menyembunyikan menu dapat memberi sisa ruang halaman web untuk bernafas dan pada saat yang sama, pengungkapan menu adalah peluang desain web interaktif lainnya. Karena pengguna sekarang memilih untuk membuka menu, banyak desainer menjawab panggilan itu dengan navigasi yang mengambil alih seluruh layar. Ini memungkinkan tipografi besar, gambar deskriptif, dan animasi hover yang keren.

Menjadi besar dengan interaksi menu adalah masuk akal: navigasi adalah tentang kontrol. Pengguna secara efektif mengarahkan alurnya dan menekankan menu akan membantu pengguna memvisualisasikan bobot kekuatannya di atas halaman.

5. Ganti formulir dengan kuesioner pengguna

Salah satu bagian terberat dalam berinteraksi dengan situs web adalah memasukkan informasi. Pengguna umumnya berhati-hati dalam memberikan informasi mereka di situs web. Cara terbaik untuk menguranginya adalah dengan membuat prosesnya tidak seperti mengisi formulir di kantor dokter dan lebih seperti sesi tanya jawab untuk mengenal pengunjung. Untuk tujuan ini, banyak situs web yang mengubah proses orientasi menjadi kuesioner interaktif, di mana pertanyaan diungkapkan dengan cara yang jelas dan menarik, menggunakan jawaban pilihan ganda yang sesuai untuk mengurangi beban interaktif pada pengguna. Mengajukan pertanyaan-pertanyaan ini satu per satu membuat pengguna tidak merasa kewalahan dan lebih seperti mereka berpartisipasi dalam percakapan bolak-balik.

Faktanya, contoh utama dari teknik ini dalam tindakan datang dari layanan pajak seperti beberapa perusahaan persiapan pajak yang memecah formulir pajak menjadi pertanyaan sederhana dan mudah dipahami. Teknik ini sangat membantu untuk layanan yang memiliki banyak produk potensial untuk dijual kepada pengunjung situs dan perlu membantu mempersempit pilihan mereka dengan memahami kebutuhan, selera, anggaran, dan lainnya.

6. Jangan abaikan interaksi mikro

Ketika datang ke animasi dalam desain web interaktif, gerakan kecil adalah apa yang benar-benar menjadi faktor yang menjual. Tujuan animasi situs web sering kali adalah umpan balik (seperti memberi tahu pengguna apa yang dapat dan tidak dapat mereka gunakan untuk berinteraksi atau apakah mereka telah melakukan hal yang benar), masuk akal bahwa umpan balik ini berfungsi paling baik pada tingkat bawah sadar.

Animasi yang menarik terlalu banyak perhatian pada diri mereka sendiri dapat mengganggu pengguna, menutupi umpan balik apa pun yang dimaksudkan untuk diberikan untuk memamerkan keterampilan animator. Di sinilah interaksi mikro masuk.

Interaksi mikro adalah kategori luas yang menjelaskan semua cara kecil yang mungkin dilakukan pengguna untuk berinteraksi dengan halaman. Beberapa contoh interaksi mikro termasuk mengarahkan kursor ke sesuatu, menutup jendela, menarik untuk refresh /menyegarkan halaman, dan mengklik ikon seperti peringkat bintang, bookmark, lonceng notifikasi, atau tambahkan ke keranjang.

Dalam hal menganimasikan interaksi mikro, beberapa gaya populer termasuk mengubah tombol menjadi hijau, mengubah ikon menjadi tanda centang, atau lingkaran keluar yang menyertai klik seperti gelombang kejut yang menggemaskan. Tujuannya adalah untuk memberi tahu pengguna bahwa mereka telah berhasil membuat perubahan pada halaman dan desain interaksi mikro harus sederhana dan memuaskan.

Gambar Ilustrasi : Interactive Map Isometric Design Concept dari dreamstime.com

Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-ansi-language:EN-US; mso-fareast-language:EN-US;}