UI Design for Mobile Device

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 thoughts on “UI Design for Mobile Device

  1. 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..

  2. 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

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

  4. Salam,

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

    bagus sekali gambarnya.
    “supermum” dengan cargo bike-nya.

    trims.

  5. 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.

Comments are closed.

Comments are closed.