Kali ini kita akan membahas beberapa hal yang perlu diperhatikan saat mengubah sebuah design versi desktop menjadi design versi mobile.
Mari kita lihat design dibawah ini…
Sebelum mengubah menjadi design versi mobile, yang perlu kita perhatikan adalah komponen nya.
Dari design diatas, berikut komponen nya:
- Daftar Project
- Elemen pencarian
- Elemen untuk menambahkan task
- Burger Menu
- Teks sapaaan
- Tempat untuk menampilkan daftar task dari suatu project
Setelah membuat daftar komponen, langkah selanjutnya adalah membuat urutan elemen yang harus dilihat oleh user dari atas sampai bawah. Urut berdasarkan prioritasnya.
Dari design diatas, berikut urutan komponen berdasarkan prioritas nya:
- Burger Menu
- Teks sapaaan
- Elemen pencarian
- Daftar Project
- Tempat untuk menampilkan daftar task dari suatu project
- Elemen untuk menambahkan task
Setelah mengetahui urutan elemen yang akan kita tempatkan pada design versi mobile, langkah selanjutnya adalah membuat canvas untuk design versi mobile.
Biasanya saya menggunakan ukuran canvas 320 x 600 untuk design versi mobile
Setelah itu mari kita mulai mendesign. Dimulai dengan mengubah warna background menjadi hitam lalu menempatkan burger menu di sebelah kanan atas
Kok burger menu nya di sebelah kanan? bukan nya di versi desktop di sebelah kiri ya?
Menjaga konsistensi itu bagus. Tapi, tujuan meletakkan burger menu di sebelah kanan pada versi mobile adalah agar user mudah menjangkau burger menu nya dengan jempol. (Asumsi nya banyak pengguna yang memegang handphone menggunakan tangan kanan)
Setelah itu kita lanjutkan dengan menempatkan teks sapaan,elemen pencarian dan juga ornamen nya.
Kok “Hi Samantha” nya jadi kecil? Padahal di versi desktop lebih besar
Jika kita menggunakan ukuran yang sama dengan yang digunakan di desktop, akan terlalu besar dan memakan banyak ruang. Sehingga pada design versi mobile adalah hal yang wajar mengecilkan ukuran font asalkan tetap dapat terbaca dengan jelas.
Lalu setelah itu kita tempatkan daftar project nya
Hmmm… tempat untuk menampilkan daftar task nya diletakkan dimana?
Kita bisa saja meletakkan tempat untuk menampilkan daftar task di bawah daftar project, menjadi seperti ini….
Tapi ada baiknya, kita cari tahu dulu bagaimana interaksi nya agar kita paham bagaimana nanti user memakai nya.
Jadi interaksinya adalah…
Ketika user meng-klik salah satu project, maka pada bagian sebelah kanan akan menampilkan daftar task sesuai dengan project yang diklik
Sehingga…
Pada versi mobile, sebaiknya tidak meletakkan tempat menampilkan daftar task di bawah daftar project
Kenapa?
Coba kita lihat gambar dibawah ini…
Tempat untuk menampilkan daftar task nya tidak terlihat.
Lalu Bagaimana?
Kita pikirkan interaksi lain yang bisa berfungsi dengan baik dan memudahkan user. Kita bisa membuat interaksi tempat untuk menampilkan daftar task nya akan muncul ketika user meng-klik salah satu project.
Seperti dibawah ini….
Setelah itu, kita bisa fokus pada bagian menampilkan task nya. Pertama, kita bisa menempatkan judul dan deskripsi nya. Oiya, jangan lupa tombol close nya.
Lalu setelah menempatkan elemen daftar orang orang yang tergabung dalam project tersebut
Lalu setelah itu menempatkan header untuk kategori task
Lalu setelah itu menempatkan daftar task nya
Hmmm… kok kepanjangan ya?.
Karena keterbatasan area, maka nama task nya bisa kita jadikan 2 baris seperti dibawah ini
Setelah itu kita bisa menempatkan status task nya
Waduh, mepet banget
Karena keterbatasan area, kita bisa mengubah status task hanya dengan menggunakan indikator warna, seperti dibawah ini
Setelah itu kita bisa menempatkan semua task nya
Lalu setelah itu kita bisa tempatkan tombol untuk menambah task nya
Lengkaplah sudah
Berikut adalah design versi desktop…
Dan berikut design versi mobile nya…
Semoga bermanfaat 🙂
sumber : medium.com – dwinawan
