Tips Membuat Mobile Wireframe

Saat Anda mempelajari  saat mendesain rancangan website untuk mobile Anda, Anda harus memikirkan tentang berbagai perangkat yang digunakan audiens Anda, termasuk desktop, tablet, dan perangkat seluler seperti ponsel cerdas.


Tetapi ketahuilah bahwa tidak ada tempat yang benar atau salah untuk memulai: Mendesain wireframe seluler membuat Anda berpikir tentang prioritas - kartu atau elemen apa yang akan menumpuk saat pengguna menggulir layar kecil. Jadi, mungkin masuk akal untuk memulai dari yang kecil dan ke atas, atau lebih besar. Kemudian lagi, merancang wireframe desktop terlebih dahulu mungkin memungkinkan Anda memulai dengan lebih banyak ruang dan membuatnya lebih mudah untuk memvisualisasikan bagaimana gambar itu bisa runtuh atau menumpuk di layar yang lebih kecil.

Tidak peduli di urutan mana Anda memulai, selalu disarankan agar Anda menyediakan waktu untuk membuat wireframes untuk ukuran layar yang Anda harapkan ditemukan pengguna - sehingga Anda dan tim Anda dapat secara akurat menangkap UX yang dimaksud di banyak platform. Berikut Tipsnya untuk mendesain wireframe untuk mobile.

Desain ramah jari

Saat melakukan wireframing untuk aplikasi seluler, pastikan Anda mematuhi standar platform iOS dan Android sangatlah penting. Bahkan sebelum Anda memulai wireframing, pastikan artboard Anda sudah diatur dengan rasio yang benar.

Sama pentingnya untuk memastikan gambar rangka Anda sesuai dengan ukuran target ketuk standar industri. Target ketuk mengacu pada elemen apa pun di perangkat layar sentuh yang berinteraksi dengan pengguna menggunakan jarinya. Ini termasuk apa saja mulai dari tautan ke tombol — atau bahkan formulir. Target ketuk harus cukup besar untuk mengakomodasi ukuran rata-rata ujung jari, sementara juga dikelilingi oleh ruang yang cukup sehingga pengguna dapat mengetuk target yang diinginkan tanpa sengaja mengetuk sesuatu yang lain (kita semua tahu betapa frustrasinya hal itu.) Tidak yakin dari mana memulainya? Perusahaan seperti Google telah membuat panduan ukuran target ketuk dalam sistem desain mereka 'Desain Material' yang telah menjadi pedoman industri saat merancang produk untuk seluler.

Meski tampak teliti, inklusi awal ini akan memungkinkan Anda untuk mengukur bagaimana produk yang Anda wireframing "cocok" dengan standar platform itu. Namun, perlu diingat bahwa gambar rangka aplikasi seluler Anda masih bisa berukuran berapa pun.

Batasan ukuran layar

Oke, jadi kami telah menetapkan bahwa ponsel lebih kecil dari desktop. Jauh lebih kecil, dalam hal ini. Tentu saja, wireframe pada dasarnya sederhana — tetapi terutama ketika wireframing untuk aplikasi seluler, lebih sedikit lebih baik. Memiliki antarmuka kecil dengan ruang terbatas berarti desain Anda harus ringkas, dengan navigasi yang jelas dan jelas.

Itu tidak berarti desainnya harus minimalis secara eksplisit, tetapi fitur yang berantakan dapat mengakibatkan situasi 'pengguliran tanpa akhir' - dan tidak ada yang menginginkannya. Mengetik di ponsel sama-sama membuat frustrasi, jadi pastikan Anda melakukan wireframing untuk jumlah minimal masukan pengguna dengan membuat formulir sesingkat mungkin.

Untuk halaman dengan jumlah konten informasi yang padat, Anda mungkin ingin menggunakan menu yang dapat diciutkan yang dikenal sebagai akordeon. Ini adalah teknik yang disebut "pengungkapan progresif" di mana detail penting dapat disembunyikan dari tampilan dalam judul, yang kemudian dapat disadap atau diklik untuk menampilkan isinya.

Konvensi interaksi seluler

Karena ponsel dirancang untuk digunakan dengan dua tangan, ini memungkinkan beberapa gerakan tertentu yang tidak akan Anda temukan menggunakan komputer desktop. Selain itu, layar kunci ponsel memperkenalkan beberapa peluang interaksi yang unik. Misalnya, pemberitahuan dapat diperluas menggunakan dua jari untuk melihat pratinjau konten, dan menampilkan ajakan bertindak utama.

Bagaimana pemberitahuan push Anda akan diaktifkan, dan bagaimana waktunya? Bagaimana pengguna berinteraksi dengan aplikasi saat offline? Bagaimana Anda akan mendorong pengguna Anda untuk memberikan izin untuk menggunakan lokasi, kamera atau akses foto? Akankah menolak izin berarti pengguna Anda akan kehilangan bagian-bagian penting dari pengalaman? Bagaimana Anda akan menyampaikan pesan itu?


Sekarang, Anda seharusnya sudah memiliki pemahaman konkret tentang perbedaan antara wireframing untuk aplikasi seluler dan wireframing untuk situs web. Meskipun prinsip inti wireframing - melakukan penelitian pengguna, memetakan aliran pengguna Anda dan mengandalkan alat desain modern - mungkin berlaku untuk kedua platform, interaksi kontras yang dimiliki pengguna dengan setiap platform pada akhirnya akan mengarah pada proses wireframing yang sangat berbeda dengan pertimbangan yang berbeda. . Untuk situs web, cukup banyak waktu yang perlu dihabiskan untuk mengkonfigurasi tata letak dan navigasi. Untuk aplikasi seluler, ruang terbatas berarti menghilangkan konten apa pun yang tidak penting.

Terlepas dari platform yang dimaksud, wireframing adalah bagian penting dari proses desain produk. Wireframing akan memungkinkan Anda dan pemangku kepentingan Anda untuk mengklarifikasi fitur mana yang akan disertakan dalam aplikasi, penempatan elemen, dan bagaimana mereka berinteraksi satu sama lain - yang berarti Anda akan mendapatkan desain yang lebih terarah yang benar-benar sesuai dengan kebutuhan.

Posting Komentar

0 Komentar