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? ;)

7 comments
Andre Lukmana
Andre Lukmana

Hemmm...kalo untuk mobile web biasa(murni xhtml tanpa framework or js)gmn mas?soalny lan skrg trendny kan semua web bikin yang versi mobile, kyk facebook, digg, dll. oh iya ada satu mobile web yang menarik, namanya statuzz.com. desainnny mirip facebook, tp ada tambahan layanan kyk chat n share file gitu

BudiTyas
BudiTyas

Metode2 di atas mungkin benar jika dipandang dlm paradigma bahwa ponsel adlh miniatur pc, dimana yg ada hanya tekan dan tekan. Dgn cara pandang lain, pendapat aerialsky cukup mewakili. Konsep 2 jari, satu tekan satu geser, atau satu slide vertikal satu slide horisontal, bisa mewakili banyak opsi, dan beberapa tombol bisa dihilangkan. Hal lain lagi, misal dgn ajax intensif, dgn layar yg mengenali arah geser ibu jari, pindah antar halaman akan semudah dan secepat ibu jari membagi kartu poker, dan tombol up down prev next, atau link page pun bisa dimutilasi. Durasi penekanan pun bisa dimaksimalkan manfaatnya, tekan skian detik, lalu muncul opsi, misalkan.

Media baru, cara pikir baru, nampaknya masih bnyk hal yg bisa diexplorasi.

Amal Cahyadi
Amal Cahyadi

Salam,

saya gak tahu menahu tentang mobile app development.
saya cuma mau komentari gambarnya aja

bagus sekali gambarnya.
"supermum" dengan cargo bike-nya.

trims.

Aerialsky
Aerialsky

Orang lebih mudah mengingat bentuk gerakan jari tertentu di atas layar dibandingkan mengingat shortcut dengan kombinasi tombol.

Aerialsky
Aerialsky

Disinilah peran dari teknologi Multitouch

Fungsi-fungsi yang biasanya ditampilkan dlaam bentuk ikon atau tulisan, kini sudah digantikan dengan gerakan2 jari di atas layar. Multitouch memungkinkan banyak fungsi dapat diakomodir ke dalam bentuk sentuhan tertentu. Layar jadi lebih lapang...

IPhone is The Pioner

ariawan
ariawan

Nice info.. ;)
btw, ini blom hari jumat mas...
kok artikelnya udah JuTek aja... :p

Locca
Locca

Wow.. Nice one. Kedengaranya oke juga tuch. I'll dig into it, though i dont know a thing bout it . But it's never late to start. Thanks bro..