UI Design for Mobile Device

uidesign

Walapun sudah ada framework seperti Yahoo Blueprint , design UI tidak menjadi masalah simple dalam dunia mobile. Wacananya tidak lagi berada pada isu teknis bagaimana bisa tampil bagus di semua mobile device, tapi bagaimana menata elemen-elemen UI supaya usable dan efektif.
Ada beberapa masalah dalam desain untuk mobile UI. Yang utama tentu saja soal ukuran layar. Tidak banyak yang bisa ditaruh dalam layar kecil padahal fungsi yang ingin diakomodasi berjumlah jauh lebih banyak. John Gruber dari Daring Fireball merekomendasikan 5 hal. Rekomendasi ini spesifik untuk iPhone tapi konsepnya bisa dibawa ke mobile device lain.

  • Each screen should display one thing at a time. That “thing” may be a list, but it should just be a list. Hal ini untuk menghindari kebingungan pada pengguna dan mengarahkan pengguna pada satu aktivitas saja.
  • Minimize the number of on-screen elements. Anda mungkin akan pusing mendapati toilet dengan lebih dari 2 tombol . Selain untuk menghemat tempat, lagi-lagi hal ini bisa diterapkan untuk mengurangi distraksi pada pengguna.
  • Make UI elements large enough to be easy to tap; place them far enough apart that there is little risk of tapping the wrong target by mistake. Mobile device sudah berlayar kecil, jadi tidak perlu mempersulit pengguna dalam memakainya. Dengan mematuhi poin sebelumnya, space yang tersisa bisa dipakai untuk menaruh UI element yang mudah diajak berinteraksi.
  • Eschew preferences as much as possible, and assume that nearly all users will use the default settings. Too many preferences will kill you. Upayakan dengan setting minimal, pengguna bisa mendapatkan manfaat sebanyak-banyaknya dari aplikasi.
  • As you show more detail, conceptually you move from left to right — but it’s best to minimize how deep you can get while drilling down to the right. Akali kompleksitas dengan langkah bertingkat. Namun jangan terjebak dalam persarangan (nested) yang terlalu dalam.

Bagi seorang non-designer, setelah mengetahui 5 prinsip di atas, tidak ada jaminan seseorang akan bisa membuat UI yang bagus. Untungnya, ternyata banyak UI samples dan stencils yang bisa dipakai dalam membuat mockup mobile app. Selain stencil YUI-compatible yang dikeluarkan oleh Yahoo, ada stencil lain yang dikhususkan untuk iPhone. Jika sampai poin ini Anda masih kesulitan membuat mockup,jangan khawatir. Masih ada layanan wireframing gratis yang bsia dipakai untuk membuat mockup semisal iPlotz.com.

Okay, sekarang apa lagi yang menghalangi Anda untuk terjun ke dunia mobile app? 😉