Desain Web Reaktif: Rahasia untuk membangun aplikasi web yang terasa luar biasa

Pada tahun lalu saya telah mengamati dua teknik halus yang digunakan oleh beberapa pengembang yang mengambil aplikasi web dari merasa lambat dan janky menjadi sangat reaktif dan dipoles.

Saya percaya teknik ini cukup penting sehingga mereka perlu nama: Desain Web Reaktif.

Singkatnya, desain web reaktif adalah serangkaian teknik yang dapat digunakan untuk membangun situs yang selalu terasa cepat dan responsif terhadap input pengguna terlepas dari kecepatan atau latensi jaringan.

Sebagai pengembang web dan penulis kerangka kerja, saya percaya menemukan cara untuk membuat pola-pola ini menjadi standar dalam segala hal yang kami bangun adalah prioritas utama untuk meningkatkan UX dan kinerja yang dirasakan di web.

Teknik 1: Muatan instan dengan layar kerangka

Ketika digunakan dengan baik, teknik ini hampir tidak pernah diperhatikan, tetapi memiliki dampak besar pada persepsi kinerja suatu situs.

Menariknya, teknik ini digunakan oleh hampir semua aplikasi asli dan membuatnya terasa sangat reaktif bahkan pada jaringan yang mengerikan, tetapi hampir tidak pernah digunakan di web!

Peluang dengan cara ini terletak!

Singkatnya, layar kerangka memastikan bahwa setiap kali pengguna mengetuk tombol atau tautan apa pun, laman bereaksi segera dengan mentransisikan pengguna ke laman baru itu dan kemudian memuat konten ke laman itu saat konten tersedia.

Facebook menggunakan layar kerangka untuk meningkatkan kinerja yang dirasakan saat Anda pertama kali membukanya

Layar kerangka adalah teknik kinerja utama yang dirasakan karena membuat aplikasi terasa lebih cepat, secara dramatis mengurangi jumlah momen di mana pengguna dibiarkan bertanya-tanya:

Apa yang sedang terjadi? Apakah bahkan memuat? Apakah saya mengetuknya dengan benar?

Flipkart.com adalah contoh langka dari situs web yang menggunakan pendekatan ini. Oleh karena itu, menelusuri kategori atau mengetuk produk terasa sangat cepat, bahkan ketika hasil aktual memerlukan beberapa detik untuk memuat:

Screencapture dari flipkart.com diluncurkan dari layar beranda dalam mode mandiri di Android

Ketika teknik ini digunakan terbaik, konten yang sudah tersedia seperti thumbnail atau judul artikel dapat digunakan kembali untuk meningkatkan kinerja yang dirasakan lebih jauh, membuat banyak merasa benar-benar instan.

app.jalantikus.com menggunakan pola Skeleton Screens dan menggunakan kembali judul dan thumbnail di seluruh transisi

Situs pengujian dengan layar kerangka

Menguji seberapa baik situs menggunakan teknik ini mudah: cukup gunakan emulasi jaringan Chrome untuk membuat jaringan selambat mungkin dan kemudian klik di sekitar situs. Jika berhasil dengan baik, situs akan tetap merasa tajam dan responsif terhadap masukan Anda.

Kecepatan paling lambat didukung dalam emulasi jaringan Chrome

Teknik 2: “Beban stabil” melalui ukuran yang telah ditentukan pada elemen

Anda tahu perasaan di mana situs web melompat-lompat saat Anda mencoba menggunakannya? Anda hanya mencoba membaca artikel dan teksnya terus bergerak? Itulah yang kami sebut "beban tidak stabil", dan kami perlu membakarnya dengan api .

konten slate.com melompat sangat agresif saat halaman dimuat. Semakin lambat jaringan yang Anda gunakan, semakin lama ia akan melompat.

Muatan yang tidak stabil membuat situs web sulit untuk berinteraksi dengan, dan membuat mereka merasa ... yah ... Tidak stabil!

Menjelajahi situs yang tidak stabil selalu mengingatkan saya pada bagaimana saya membayangkan rasanya berjalan-jalan saat gempa bumi

Pemuatan yang tidak stabil disebabkan oleh gambar dan iklan yang disematkan ke dalam halaman tetapi tidak termasuk informasi ukuran. Secara default browser hanya mengetahui ukuran ini setelah mereka memuat, jadi segera setelah gambar dimuat, THUNK !, seluruh halaman meluncur ke bawah .

Untuk mencegah hal ini, semua tag pada halaman harus secara proaktif menyertakan dimensi gambar yang akan dikandungnya.

Dalam banyak kasus gambar yang digunakan pada halaman tertentu selalu memiliki ukuran yang sama dan ukurannya dapat dengan mudah dimasukkan dalam template HTML, tetapi dalam beberapa kasus ukuran gambar dinamis dan dengan demikian ukurannya harus dihitung ketika gambar diunggah kemudian templated ke dalam HTML saat dibuat.


Hal yang sama berlaku untuk iklan, seringkali menjadi biang keladi ketika menyangkut pemuatan yang tidak stabil. Jika memungkinkan, buat div yang akan berisi iklan, dan dalam templating Anda setel dengan ukuran tebakan terbaik Anda seberapa besar iklan ini.

Perhatikan bahwa muatan yang tidak stabil berada pada kondisi terburuknya di jaringan lambat karena Anda baru saja membaca konten ketika tiba-tiba melonjak, dan Anda tidak pernah yakin bahwa Anda aman.

Menyatukan semuanya

Saya telah membangun situs demo kecil di reactive.surge.sh untuk menunjukkan perbedaan antara desain web konvensional dan reaktif.

Memuat artikel konvensional

Perhatikan bagaimana rasanya lamban dan lompatan konten yang membuat frustrasi. Menariknya saya menemukan pesanan ini lebih mengganggu pada perangkat mobile ketika mengetuk layar dan tidak melihatnya bereaksi.

Memuat artikel dengan desain web reaktif

Dengan desain reaktif, beban terasa instan dan situs tetap reaktif saat mengetuk ikon belakang dan judul artikel beberapa kali

Membungkus

Semakin lambat jaringan, pengalaman pengguna menjadi lebih buruk ketika transisi halaman diblokir pada jaringan dan halaman melompat-lompat untuk waktu yang lama.

Dengan Desain Web Reaktif, kami dapat membuat pengalaman kami terasa tajam dan responsif ("Desain Responsif" karena nama sudah digunakan, ya!) Bahkan di jaringan yang lambat dan menyakitkan.

Saya ingin sekali mendengar tentang data dari komunitas tentang pengaruh kinerja yang dirasakan pada KPI seperti keterlibatan dan pendapatan!

Selain itu, saya akan mendorong penulis kerangka dan pustaka untuk mempertimbangkan cara membuat layar kerangka dan pemuatan yang stabil sebagai default, juga dikenal sebagai lubang keberhasilan.

Jika Anda memiliki pemikiran tentang ini, tolong tweet saya @owencm, dan jika Anda menikmati ini tolong beri dia ♥!

P.S. pastikan untuk memeriksa situs demo reactive.surge.sh di perangkat seluler untuk mendapatkan kejayaan penuh!