Desain Adaptif dan Desain Responsif, Simak Perbedaannya

Apa perbedaan antara desain responsif dan adaptif?

Dua pendekatan untuk mendesain di beragam perangkat adalah desain adaptif dan responsif. Dalam istilah yang paling sederhana, desain responsif menggunakan satu tata letak dan menyesuaikan konten, navigasi, dan elemen halaman agar sesuai dengan layar pengguna. Desain responsif akan mengkonfigurasi ulang semua elemen desain apakah itu dilihat di desktop, laptop, tablet, atau ponsel. Dengan desain adaptif, tata letak tetap yang berbeda dibuat yang beradaptasi dengan ukuran layar pengguna. Berbeda dengan pendekatan yang lebih responsif, desain adaptif menggunakan berbagai ukuran desain tetap.

Serangkaian perangkat dan ukuran layar.  Dari kiri ke kanan: arloji pintar, 2 perangkat seluler, tablet, laptop, monitor desktop.

Mayoritas situs web baru sekarang menggunakan desain responsif. Saat mendesain tata letak yang responsif, Anda harus memperhitungkan semua layar dan perangkat yang dapat dilihat pengguna. Elemen-elemen tertentu dapat bekerja dan menyelaraskan tampilan desktop yang besar tetapi jika Anda belum mempertimbangkan ukuran layar yang lebih kecil, tata letak akan berubah ukuran dengan buruk.

 Grid responsif 800x400 divisualisasikan pada monitor desktop, tablet, dan perangkat seluler.
Kredit gambar Komunitas SAP UX .

Dengan desain adaptif, situs web akan mendeteksi tipe perangkat pengguna dan menyesuaikan template yang digunakan agar sesuai dengan layar itu. Keuntungannya adalah bahwa perancang dapat memiliki kontrol yang lebih besar terhadap elemen dan pengalaman, dengan pertukaran proses yang lebih memakan waktu untuk menyesuaikan untuk setiap jenis perangkat.

“Breakpoints” adalah istilah yang biasanya digunakan untuk merujuk pada berbagai ukuran layar yang digunakan dalam desain adaptif. Misalnya, halaman arahan situs web akan dirancang seperti yang dilihat pada perangkat seluler, tablet, dan desktop. Ini adalah 3 breakpoints dan menggambarkan bagaimana desain akan beradaptasi. Karenanya Anda tidak perlu mendesain perangkat yang tepat, tetapi Anda dapat menargetkan template untuk grup perangkat tertentu.

Saat memutuskan pendekatan, kuncinya adalah mempertimbangkan audiens Anda terlebih dahulu dan terutama apa pun teknik desain yang Anda pilih. Setelah Anda tahu persis siapa mereka dan perangkat apa yang cenderung mereka akses ke situs, maka lebih mudah untuk merancang konten dan tata letak Anda dengan mempertimbangkan pengguna tersebut. Anda juga mungkin memiliki kendala yang dipaksakan oleh pengembang atau klien. Misalnya, jika pengaturan waktu atau anggaran ketat, responsif mungkin merupakan pilihan yang lebih baik.

Merancang untuk berbagai perangkat

Desain produk digital terus berubah. Kemajuan baru muncul sepanjang waktu yang memengaruhi pengalaman pengguna dan mengubah industri. Tidak cukup hanya dengan faktor ukuran layar yang berbeda. Kita harus memperhitungkan perangkat dan bagaimana itu berinteraksi. Dari sistem operasi yang berbeda dan fungsi aslinya ke lingkungan, pengguna berinteraksi dengan perangkat. Semua ini dapat berdampak pada bagaimana suatu desain dialami oleh pengguna.

Perangkat yang berbeda memberikan layanan berbeda tergantung pada konteksnya. Merancang untuk mempertahankan pengalaman pengguna yang sama di seluruh perangkat bisa menjadi tugas yang menantang. Konteks perangkat yang digunakan dapat mempengaruhi keputusan desain. Misalnya, tablet terutama digunakan untuk konsumsi konten sementara komputer desktop biasanya digunakan sebagai alat untuk alur kerja yang lebih terlibat seperti mengedit video, atau entri data. Untuk menciptakan pengalaman terbaik bagi pengguna, penting untuk mengembangkan strategi yang efektif.

Untungnya kami telah mengembangkan berbagai pendekatan untuk mendesain dalam lanskap digital yang semakin kompleks ini. Desainer harus mulai dengan memahami audiens dan konteks perangkat, dan kemudian menggunakan metode yang berbeda ini untuk mencapai pengalaman terbaik.

Pertimbangan untuk desain lintas platform

Penting untuk mempertimbangkan memanfaatkan berbagai fungsi perangkat saat merancang produk digital. Perangkat seluler memiliki kemampuan untuk memanfaatkan fungsionalitas seperti GPS, ID biometrik, pemindaian kartu bank, dan pembacaan kode QR yang dapat sangat meningkatkan UX.

Gestures

Serangkaian gambar tangan yang menggambarkan gerakan perangkat seluler yang umum seperti mengetuk, menggesek, mencubit, memperbesar, dll.
Kredit gambar Powermockup .

Perangkat dan tablet seluler memungkinkan pengguna berinteraksi dengan konten dengan cara yang unik. Kemampuan untuk mencubit, memperbesar, menggeser gambar melintasi layar, dan elemen sentuhan-paksa memberdayakan pengguna untuk terlibat dengan konten dengan cara baru. Baris konten yang berulang berulang mungkin terlihat bagus di komputer desktop, tetapi untuk perangkat seluler, mungkin lebih masuk akal untuk memungkinkan pengguna meluncur melalui carousel satu per satu. Penting juga untuk memikirkan ukuran jari seseorang dan bagaimana hal itu diterjemahkan ke dalam interaksi seluler. Elemen UI harus merupakan ukuran yang nyaman disentuh. Jika seorang pengguna berjuang untuk memilih atau mengetuk suatu elemen, hal itu cenderung mengarah pada pengalaman yang membuat frustrasi.

Hirarki

UI konsep untuk layar aplikasi hipotek divisualisasikan pada breakpoint desktop dan seluler.
Kredit gambar Ryan Johnson .

Saat mendesain untuk perangkat yang berbeda, perancang harus selalu melihat hierarki tata letak. Pengalaman seluler memiliki ruang terbatas. Perancang ingin memastikan bahwa pesan utama mempertahankan keunggulan yang sama di seluruh perangkat. Penting untuk bertanya apa tindakan paling penting dari halaman tersebut. Jika ajakan bertindak halaman adalah tombol pendaftaran, pastikan ini mempertahankan keunggulannya di semua perangkat.

Navigasi

Saat merancang navigasi lintas perangkat, penting untuk mengikuti konvensi untuk perangkat yang dimaksud. Konsistensi penting untuk memastikan bahwa pengguna tidak merasa tertantang mencoba mempelajari paradigma navigasi baru.

Desain navigasi rumit. Untungnya ada banyak pola desain yang dapat digunakan kembali untuk meningkatkan ketika merancang pengalaman pengguna. Tidak ada satu pola yang lebih baik daripada yang lainnya. Setiap pola yang Anda gunakan dalam produk Anda harus dipertimbangkan dan diuji sebelum diterapkan. Ini memastikan bahwa pola navigasi yang Anda pilih tepat untuk produk Anda, tetapi yang lebih penting bahwa itu sesuai untuk pengguna Anda.

Baik itu dalam bentuk menu remah roti, dropdown atau tab, setiap produk harus memiliki aliran pengguna yang dapat ditelusuri seseorang untuk mencapai tujuan mereka. Karena mode interaksi bervariasi antar perangkat, pola desain ini dapat membantu kami menerjemahkan navigasi lintas pengalaman dan mempertahankan konsistensi.

Templat kerangka gambar responsif untuk desktop dan perangkat seluler.
Kredit gambar Chris Bannister .

Dengan menggunakan salinan yang sesuai dan akrab untuk elemen navigasi Anda, pengguna Anda akan merasa lebih nyaman terlibat dengan situs web Anda pada platform yang berbeda. Ketika konsistensi dipertahankan dan kejelasan dipromosikan, itu membuat navigasi lebih mudah dipahami.

Tab

Dalam antarmuka obrolan pada tab perangkat seluler digunakan untuk navigasi.
Kredit gambar Adrian Goia .

Tab adalah pola navigasi populer yang biasa ditemukan di perangkat seluler, dan tab itu dapat ditemukan di bagian bawah atau atas layar. Prioritas diberikan pada tindakan yang paling penting, atau lebih sering digunakan karena ruang horizontal terbatas, dan hanya banyak tab yang dapat ditampung.

Ikon Menu

Di beranda ShipBob, navigasi utama diubah menjadi menu hamburger di perangkat seluler.
Kredit gambar Flip Justic .

Menu hamburger sering ditemukan di perangkat seluler, meskipun semakin populer dengan pengalaman web desktop. Ikon menu hamburger adalah 3 baris dan dapat diklik atau disadap untuk mengungkapkan lebih banyak opsi navigasi. 

Elemen navigasi ini harus digunakan dengan bijak, dan dicadangkan untuk situasi di mana menu yang lebih rinci tidak dapat ditampilkan, seperti pada perangkat seluler. Menggunakan hamburger, atau ikon menu lainnya untuk menyembunyikan tindakan navigasi dapat membuatnya kurang dapat ditemukan, dan membuat pengguna tidak yakin ke mana harus pergi.

Kesimpulan

Ada banyak hal yang bisa digunakan untuk merancang pengalaman hebat di berbagai perangkat. Dengan menyelaraskan tujuan pengguna, strategi konten, dan desain navigasi, Anda akan dapat menciptakan pengalaman pengguna yang kohesif dan konsisten yang akan disukai pengguna Anda.

sumbe: xd.adobe.com

Latest articles

12.6k Followers
Follow

Related articles