Pertimbangan UI Teratas untuk Desain PWA Terbaik

Jika Anda belum pernah mendengar tentang PWA, Anda harus mempelajari yang satu ini terlebih dahulu: “Apa itu PWA? Yang Perlu Anda Ketahui Tentang Aplikasi Web Progresif” . Singkatnya, mereka adalah aplikasi web yang dibuat dengan maksud untuk menawarkan antarmuka pengguna dan pengalaman yang jauh lebih unggul daripada pengalaman yang ditawarkan oleh yang tradisional.

Pada artikel ini, kami akan menyarankan masalah UI (Antarmuka Pengguna) teratas saat mendesain PWA. Baca terus untuk mengetahui bagaimana Anda dapat memiliki antarmuka pengguna terbaik untuk Aplikasi Web Progresif Anda.

Font Sistem

Jika Anda ingin pengguna merasa nyaman saat menggunakan Progressive Web App (PWA), gayanya harus sedikit ditingkatkan agar sesuai dengan Sistem Operasi (OS) mereka. Sebelum menerapkan menu dan tombol yang berbeda per platform, Anda bisa memulai dengan font pilihan sistem, untuk iOS, Android, Windows secara terpisah.

Dengan kata lain, biarkan kerja keras Microsoft (Segoe), Google (Roboto), Apple (San Francisco) atau bahkan Mozilla (Fira Sans) membuat pekerjaan Anda lebih mudah dengan meningkatkan pengalaman bagi pengguna. Akibatnya, font sistem adalah salah satu item yang tidak boleh Anda tinggalkan dari daftar.

 /* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Jenewa, sans-serif;

Ikon Aplikasi

Memang benar bahwa desainer aplikasi seluler memberikan perhatian khusus pada desain ikon. Dan karena PWA Anda (dengan menambahkannya ke layar beranda) akan berada di sebelah aplikasi asli lainnya, beberapa pemikiran juga harus diberikan pada desain ikonnya.

Ada alasan bagus untuk ini. Kesan pertama selalu sangat penting, dan ikon aplikasi adalah kesan pertama yang dibuatnya pada pengguna. Untuk menjelaskan, pengguna mungkin ragu untuk mengetuk ikon yang memiliki tampilan berbeda di tengah ikon aplikasi asli di ponsel mereka.

Untuk membuat ikon PWA Anda berbaur dengan aplikasi lainnya di perangkat Anda, ikon tersebut harus fleksibel agar sesuai dengan platform yang berbeda – seperti Android, iOS dan Windows – dan mengakomodasi elemen gaya (bentuknya, tampilannya dengan/tanpa latar belakang atau dalam warna yang berbeda, dll). Cara yang baik untuk melakukannya adalah dengan membuat desain ikon PWA Anda cocok– atau setidaknya mendekati– standar visual ikon aplikasi asli. Salah satu sumber inspirasi adalah pedoman Desain Material Google, Ikon Material Google.

 Bacaan yang disarankan: PWA vs Aplikasi Asli: Mana yang Lebih Cocok untuk Anda?

Interaksi sentuh

Interaksi sentuhan harus diterapkan dengan sangat baik, atau tidak sama sekali.

Meskipun ini bukan tidak mungkin, terlalu sulit untuk menggabungkan interaksi sentuh tingkat lanjut, seperti "geser untuk menutup" atau "tarik untuk menyegarkan". Meskipun menurut Anda interaksi seperti itu akan membuat pengguna kagum, ini hanya terjadi jika mereka berfungsi seperti yang diharapkan. Jika tidak maka Anda dalam masalah.

Jika PWA Anda memerlukan interaksi sentuh tingkat lanjut, pastikan interaksi tersebut berfungsi dengan baik di perangkat nyata. Biasanya, ini menandakan bahwa Anda telah menemukan implementasi fitur ini yang telah dikembangkan oleh orang lain dengan susah payah, seperti tampilan reaksi-swappable yang brilian.

Sementara itu, Anda dapat sepenuhnya menghindari masalah ini dengan memodifikasi desain, cara ini tidak akan menyarankan interaksi sentuh lanjutan, misalnya, Anda dapat menggunakan tab navigasi bawah sebagai pengganti tab.

Konten yang dapat dibagikan

Dalam kasus Aplikasi Web Progresif, seringkali URL saat ini tidak mudah diakses; maka Anda harus memastikan bahwa pengguna dapat membagikan apa yang mereka lihat, dengan mudah. Tombol bagikan dapat diintegrasikan yang memungkinkan pengguna menyalin URL ke papan klip sehingga dapat dibagikan di situs jejaring sosial terkemuka.

Tip kecil untuk kasus ini: Jika Anda menerapkan tombol berbagi sosial, pastikan untuk menunda pemuatan JavaScript pihak ketiga hingga konten utama di halaman dimuat.

Sentuh umpan balik

Pertama, area yang dapat diketuk harus memberikan umpan balik sentuhan . Saat tombol atau area yang dapat diketuk diketuk, pengguna tidak perlu bertanya-tanya apakah ketukan itu dikenali.

Bertujuan untuk segera memperjelas bahwa keran dikenali. Misalnya, ini dapat dilakukan dengan menyorot wilayah yang disadap dalam warna abu-abu (terang), menunjukkan riak material atau memulai transisi halaman dengan segera.

Contoh umpan balik sentuhan yang dilakukan dengan baik:

Aplikasi web Google I/O 2016 memberikan sorotan abu-abu langsung saat pembicaraan diketuk dan warna keran biru default dinonaktifkan (secara default beberapa browser menampilkan sorotannya sendiri saat elemen diketuk. Gaya default ini tidak menarik dan mungkin bertentangan dengan Anda kualitas visual merek).

Kedua, menyentuh elemen saat menggulir seharusnya tidak memicu umpan balik sentuh .

Kapan pun Anda menerapkan umpan balik sentuh, penting untuk tidak memicu kesalahan saat pengguna hanya menyentuh elemen untuk MENGGULIR halaman.

Contoh umpan balik sentuhan yang diberikan pada waktu yang salah:

Versi awal pustaka Material-UI yang populer memicu riak pada elemen yang dapat disentuh saat disentuh selama pengguliran.

Masalah telah diperbaiki dengan membatalkan animasi riak jika lokasi sentuh pengguna bergerak lebih dari 6 piksel ke segala arah dalam beberapa ratus milidetik pertama.

Pertahankan posisi gulir pada halaman daftar sebelumnya

Menekan kembali dari halaman detail akan mempertahankan posisi gulir pada halaman daftar sebelumnya

Saat pengguna menekan kembali dari suatu detail, halaman harus mempertahankan posisi gulir pada halaman daftar sebelumnya. Saat pengguna mengambil item dari daftar dan melihat detailnya, maka mengetuk kembali TIDAK boleh membawa mereka ke bagian atas daftar. Tujuan utamanya adalah ketika pengguna mengetuk, dia harus dibawa kembali ke halaman daftar "dengan posisi gulir yang sama" sebelum menekan item.

Lagi pula, menelusuri daftar produk, artikel, atau item lain menjadi sulit ketika menekan kembali membawa pengguna ke daftar teratas lagi.

Jelas, ketika Anda membuat navigasi lebih sulit bagi pengguna, mereka cenderung tidak kembali lagi.

Hindari desain yang terlalu "seperti web"

Desain web "Klasik" sangat bergantung pada tautan dalam teks, dan elemen statis yang tersedia di setiap halaman seperti header dan footer. Faktanya, elemen desain ini jarang ditemukan di aplikasi asli, jadi untuk mencocokkan model mental pengguna, disarankan untuk menghindari ini dan menggunakan lebih banyak desain seperti aplikasi.

Misalnya, tautan harus digunakan dengan hemat. Anda harus menempatkan tombol atau area yang dapat diketuk dengan hati-hati.

Selain itu, footer halaman statis yang berisi tautan navigasi dan informasi hak cipta harus dihindari. Ambil inspirasi dari desain aplikasi asli untuk melihat bagaimana informasi serupa dapat dipindahkan ke menu atau tidak disertakan di setiap halaman.

Tema gelap

Tema gelap akan tetap ada dan hanya akan menjadi lebih baik.

Menurut Pengembang Android, tema gelap memiliki banyak manfaat : Dapat mengurangi penggunaan daya dalam jumlah yang signifikan (tergantung pada teknologi layar perangkat). Meningkatkan visibilitas untuk pengguna dengan penglihatan rendah dan mereka yang sensitif terhadap cahaya terang. Memudahkan siapa saja untuk menggunakan perangkat di lingkungan dengan cahaya redup.

Mereka yang dapat menemukan keseimbangan antara aksesibilitas UI gelap dan respons emotif warna mencolok akan menjadi yang teratas tahun depan. Ada panduan dari Google Material yang dapat membantu Anda.

Kesimpulannya

Aplikasi Web Progresif adalah kebutuhan saat ini karena memungkinkan pengembang untuk memberikan pengalaman web yang intuitif kepada pengguna di ponsel mereka. Hanya dengan menerapkan rekomendasi ini, Anda dapat dengan mudah memberikan antarmuka dan pengalaman hebat seperti aplikasi kepada pengguna saat mereka menggunakan PWA Anda.

SimiCart hadir untuk menjawab setiap pertanyaan dan kebutuhan Anda terkait PWA. Dan terutama untuk pedagang online yang mencari solusi PWA Magento yang sempurna untuk toko web eCommerce Anda, kami menawarkan solusi lengkap dan hemat biaya untuk Anda dan toko Anda.