Sumber: http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html#ixzz3F4LX7wdq Under Creative Commons License: Attribution Non-Commercial Follow us: @SEOCiyus on Twitter Sumber: http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html#ixzz3F4KvPjWi Under Creative Commons License: Attribution Non-Commercial Follow us: @SEOCiyus on Twitter

Sunday 9 November 2014

Aturan Desain Aplikasi Mobile, Web dan Desktop

Pada postingan kali ini saya akan membahas mengenai desain aplikasi mobile, web dan desktop. Seperti yang kita ketahui dalam membuat desain pasti selalu ada aturannya. Berikut ini adalah aturan-aturan yang terdapat pada topik kita kali ini.

Aturan Aplikasi Mobile
Membuat aplikasi untuk mobile devices memilliki tantangan sendiri. Untuk membuat aplikasi mobile, kita perlu memikirkan berbagai keterbatasan yang dimiliki oleh perangkat kerasnya, salah satunya adalah ukuran layarnya yang terbatas. Ukuran layar yang relatif kecil jika dibandingkan dengan monitor komputer ini menjadi sebuah problem yang harus kita perhatikan dengan baik. Apalagi mengingat sebagian besar smartphone saat ini menggunakan teknologi touchscreen untuk navigasi, kita harus memperhitungkan icon apa yang harus diletakan, dimana dia diletakan, dan konten apa saja yang harus ditampilkan dalam satu layar. Poin-poin tersebut adalah salah satu tantangan besar dalam mendesain sebuah aplikasi mobile.
Untuk bisa mendesain aplikasi yang baik, kita harus memikirkan bagaimana user berinteraksi dengan aplikasi yang kita buat. Dari hasil penelusuran, ada tiga kebiasaan user saat memegang smartphonenya. Ada tipe yang menggunakan satu tangan dan melakukan input dengan satu jari (one handed), ada yang menggunakan dua tangan, satu tangan memegang handphone satu tangan untuk input (cradled), ada juga yang menggunakan dua tangan untuk input (two handed). Dari hasil penelitannya, ditemukan bahwa persentasi user memegang perangkat smartphonenya adalah 49% One Handed, 36% Cradled, dan 15% Two handed. Dari setiap user tersebut, bisa kita rancang sebuah area yang memudahkan user untuk memasukan input atau melakukan navigasi di aplikasi yang kita kembangkan. Mengingat persentasi paling besar adalah one handed, maka penting bagi kita untuk memastikan aplikasi kita friendly untuk one handed user.
One Handed
Cradled
Two Handed

Ada aturan main untuk mendesain aplikasi agar tombol dan konten yang kita buat mudah diakses oleh user, aturan tersebut bernama Thumb Zone. Scott Hurff, seorang ahli di bidang UX dengan pengalaman lebih dari 15 tahun membahas Thumb Zone dari beberapa aplikasi mobile dan menunjukan bagaimana UI dan UX sebaiknya dirancang. Dia mengambil contoh kasus navigasi yang kurang baik dari aplikasi Facebook Paper. Teori Thumb Zone ini menarik karena kita bisa mengatur peletakan icon dengan mengitui area yang mudah dijangkau untuk user. Atau jika kita merasa ada button yang akan jarang untuk dipencet, bisa kita letakan di area yang lain. Hal ini membantu kita membuat prioritas icon atau informasi mana yang penting untuk kita tampilkan di layar yang sangat terbatas.
Thumb Zone
Mobile Button Location

Kita dapat menilai sebuah aplikasi mobile itu baik atau tidak dalam hal UX-nya  salah satunya dari penempatan button/icon dan konten di dalam aplikasi tersebut. Saya ingin mencoba memberikan contoh penerapan thumb zone yang diterapkan pada aplikasi.
Pengaplikasian Thumb Zone pada aplikasi 6tag

6Tag adalah aplikasi instagram untuk windows phone buatan Rudy Huyn. Developer ini cukup ternama di Windows Phone karena sering membuat aplikasi dengan UX yang luar biasa cantik. Dulu ketika Instagram Official belum masuk di WP, 6Tag adalah andalan banyak user WP. Bahkan saya sendiri saat ini masih prefer 6tag dibandingkan yang official. Kalau kita mau membedah 6Tag dari sisi UX, sesuai dengan teori Thumb Zone, bisa kitap erhatikan bahwa tombol yang paling penting dari instagram diletakan di natural zone, yakni tombol untuk mengambil gambar dan untuk melakukan navigasi (scrolling). Tombol search adalah fitur yang cukup jarang digunakan, oleh karena itu berada di stretch zone. Lalu tombol menu tambahan (yang lingkaran ada tiga) diletakan di red zone karena termasuk tombol yang tidak jadi prioritas. Lalu kita lihat di atas ada empat buah tab yang berada di red zone dan stretch zone, tab ini bisa diakses dengan mudah menggunakan gesture swipe di layar, tanpa perlu klik tombol tersebut. Kalaupun harus klik, default ketika apps ini di buka berada di home sehingga tidak masalah

Aturan Icon Desktop
Sebelum membahas desain ikon, ada beberapa aturan dan prinsip-prinsip yang patut dipelajari. Jika kita ingin membuat desain icon yang efektif, maka kita harus mengambil pendekatan holistik untuk isu-isu seperti audiens, ukuran, kesederhanaan, pencahayaan, sudut pandang, dan gaya. Artikel ini memberi Anda tempat awal yang baik untuk membuat ikon yang bekerja sama dengan baik dan sesuai dengan desain yang kita rancang.
1. Pendekatan Icon Desain Secara holistik
Ikon adalah salah satu dari banyak elemen grafis yang harus bekerja sama secara harmonis. Carry logika ini di icon set juga. Ikon dapat dihargai untuk solusi estetika mereka secara individual, tetapi mereka tidak berfungsi sendirian. Evaluasi desain icon yang sesuai terhadap sistem grafis yang kita gunakan. Pastikan bahwa setiap ikon berbeda dari ikon lainnya agar dapat bekerja sama sebagai satu kesatuan.
Dalam artikel Designing an iconic language di Turbo Milk penulis Yegor Gilyov menyatakan, "Jika Anda perlu untuk menarik beberapa ikon, Anda harus berpikir di atas gambar untuk seluruh set ikon sebelum melanjutkan dengan kegiatan yang menggambarkan." Ini adalah salah satu dari dua poin utama yang dibuat dalam artikel ini pada desain icon. Dia melanjutkan dengan menjelaskan bagaimana jika kita gagal merencanaka set ikon yang dapat bekerja sama dari awal maka akan sangat membuang waktu dan membuat desain ulang tak akan terhindarkan.


2. Pertimbangkan Audiens Anda
Anda akan memiliki pertimbangan yang berbeda jika Anda merancang sebuah intranet untuk perusahaan kecil, bukan untuk produk yang dapat dijual secara internasional. Ketika membuat icon, pertimbangan budaya sangatlah penting. Simbol mungkin berbeda untuk elemen umum yang dapat kita gunakan untuk desain kita.
Turbo Milk memiliki artikel bagus lain yang disebut 10 Kesalahan di Desain Icon. Di dalamnya, mereka menunjukkan beberapa contoh yang jelas bagaimana banyak desain icon yang salah. Mereka membahas karakteristik nasional dan sosial di titik ke tujuh dalam artikel. "Itu selalu diperlukan untuk memperhitungkan kondisi di mana icon Anda akan digunakan. Sebuah aspek penting di sini adalah karakteristik nasional. Tradisi budaya, lingkungan dan gerakan dapat berbeda secara radikal dari Negara ke Negara." Mereka melakukannya untuk memberikan contoh bagaimana perbedaan kotak pesan diberbagai Negara. Apple menggunakan contoh yang sama di perusahaannya dalam Pedoman Human Interface.
Jadi merancang ikon internasional berdasarkan desain kotak pedesaan satu negara adalah contoh ide yang buruk dari apa yang tidak dapat dilakukan. Mereka menunjukkan bagaimana icon Mail Apple lebih dikenali sebagai prangko karena memiliki universalitas yang lebih budaya.


3. Desain untuk Ukuran Icon yang akan Digunakan
Jika kita gunakan vektor dan membuat ikon kita di Illustrator, ada ganguan yang melekat dalam skala pada desain, dan mencoba untuk menggunakannya di berbagai ukuran. Ini tidak akan bekerja dengan icon. Apa yang terlihat baik pada 512px tampak seperti noda kabur di 16px. Icon harus memiliki desain dasar yang digunakan sebagai titik awal, tetapi masing-masing ukuran keluaran perlu dioptimalkan agar memiliki desain sendiri.
Desain icon bukan salah satu desain yang sama seperti media solusi scalable sekalipun. Inilah salah satu alasan yang membuat Photoshop  lebih baik dari program lain. Untuk desainer yang membuat icon di Illustrator, mereka masih akan menyelesaikannya di Photoshop, atau melompat melalui beberapa rintangan untuk agar icon mereka terlihat baik pada ukuran yang kecil saat menjadi output dari Illustrator. Jadi, jangan percaya mitos bahwa desain icon adalah media yang murni berbasis vektor.
Ada juga alat-alat vektor di Photoshop dan Mask yang dapat kita ambil keuntungan dari itu sama seperti lapangan bermain scalable antara program. Jika kita sama-sama berpengalaman dengan Illustrator dan Photoshop, kita mungkin menemukan alur kerja yang berjalan dengan baik antara kedua program. Pertimbangkan untuk menggunakan Smart Objects. Kita juga dapat mempertimbangkan menggunakan Photoshop add-on yang disebut Icon Builder juga.
Pendekatan yang diambil untuk icon kecil dan desain icon yang besar  sangatlah berbeda. Firewheel memiliki artikel bagus yang mencakup subjek skala yang disebut Icon Desain: Bitmap vs Vector . Juga, meninjau artikel ini pada Icon Desain Sizing pada Mezzoblue. Ini mencakup beberapa masalah yang melekat dengan rancangan icon untuk ukuran kecil.


4. Pertahankan Icon Sederhana dan Iconic
Dengan sistem operasi sekarang, memiliki ikon dengan skala untuk ukuran besar (512x512px), gangguan muncul untuk mendapatkan ilustrasi dari desain icon kita. Selain itu pada tingkat realisme dapat menambah minat untuk desain icon, tapi seharusnya tidak menggantikan kemampuannya yang berfungsi sederhana dan efektif.
Smashing Magazine memiliki ringkasan besar dari pedoman Apple Human Interface pada Icon Desain. Bagian tentang Realisme di Aqua membuat beberapa poin yang baik tentang batasan realisme dalam desain icon dan menunjukkan ketika simbolisme diperlukan. Bagian ini membahas isu-isu bertentangan antara realisme dan kesederhanaan dalam desain icon.
Cobalah untuk tidak memperumit desain icon. Berhati-hatilah saat menempatkan terlalu banyak item ke dalam desain icon, atau terlalu menggambarkan icon. Saya yakin semua orang akrab dengan simbol umum untuk icon RSS. Lihat contoh di bawah ini dari Smashing Magazine. Icon-icon ini berbatasan pada ilustrasi namun tetap mempertahankan kualitas simbolik yang kuat dari icon. Terlalu mengilustrasikan dan menghiasi hasil ikon membuat penilaian menjadi rendah meskipun pada ukuran kecil. Jadi, berhati-hati saat menempatkan banyak item ke dalam desain icon.
Mungkin ada kalanya kepentingan estetika icon kehilangan beberapa unsur iconik. Itu selalu menjadi panggilan penghakiman, dan kebutuhan akan bervariasi dengan masing-masing desain. Bandingkan salah satu icon set di bawah ini untuk desain icon RSS sederhana, seperti yang di sini di PSDTUTS +. Ada tindakan penyeimbangan dengan membawa icon ke dalam gaya desain situs Web kita. Kita ingin menambahkannya untuk mendapat perhatian dan pujian atas desain tersebut, tetapi tidak kehilangan dampak iconic dari icon tersebut.
Ikon di bawah ini terlihat benar-benar keren. Hal ini membutuhkan penilaian, meskipun, apakah hilangnya beberapa pengakuan cepat simbol bernilai desain ditambahkan sekitar simbol. Pada ukuran besar bekerja dengan baik, karena mereka berfungsi mirip dengan ilustrasi. Pada ukuran yang lebih kecil meskipun solusi kurang hiasan yang lebih.


5. Memberi Pencahayaan Tetap, Reflections, dan Shadows
Sangat penting bahwa unsur realisme yang kita tambahkan ke desain kita memiliki fungsi koheren. Pertimbangkan sumber cahaya dari desain ikon yang akan ditempatkan. Jika sumber cahaya dari ikon bertentangan dengan situs Web atau aplikasi desain yang mereka gunakan, maka desain akan terliat amatir.
Dalam Panduan Pengguna Windows Vista ada bagian pada icon pencahayaan dan shading. Buku panduan ini memberikan aturan yang benar-benar khusus untuk Vista Icon set. Hal ini memberikan standar yang lebih menuntut untuk icon desainer dan memastikan sistem icon terpadu. Ada banyak aturan dalam buku panduan ini, salah satu contoh aturan khususnya adalah "Gunakan bayangan untuk mengangkat benda-benda secara visual dari latar belakang, dan untuk membuat objek 3D muncul membumi, bukan canggung melayang di luar angkasa."


6. Memanfaatkan Perspektif yang Terbatas
Kisaran perspektif dalam desain icon set kita harus bekerja sama. Jika kita telah melihat icon secara lurus ke depan kemudian melewatinya. Bayangkan jika kita menempatkan satu pada sudut tertentu, maka pastikan semua icon berfungsi seperti itu. Bayangkan kamera yang ditempatkan dari sudut pandang tertentu dan melihat semua benda dari perspektif yang sama. Hal ini membantu untuk menjaga konsistensi dalam desain ikon Anda.
Sebuah desain sistem skala besar, sesuatu seperti perangkat lunak sistem operasi, mungkin perlu lebih banyak fleksibilitas dari itu, meskipun Apel meliputi Icon Perspektif dalam Surat Pedoman Human Interface, Mereka memiliki penggunaan yang fleksibel dan lebih perspektif. "Berbagai perspektif yang dicapai dengan mengubah posisi kamera imajiner untuk menangkap icon." Gambar di bawah menunjukkan perbedaan perspektif antara Icon Aplikasi (Top) dan Toolbar Icon (Bawah).


7. Buat Icon Set Styles yang Konsisten
Pencahayaan dan Perspektif tentu berkontribusi terhadap gaya icon, meskipun ada banyak faktor lain yang dapat berkontribusi pada gaya juga. Jika kita mencoba untuk menyesuaikan icon kita ke dalam desain situs web Grunge-Style, kita mungkin akan menambah tekstur dengan gaya desain icon.
Icon set memiliki fitur unik yang membuat mereka lebih menonjol. Di Echo Icon Guidline set digambarkan sebagai "satu set baru ikon yang diusulkan untuk dimasukkan ke dalam Fedora. Dirancang dengan perspektif dinamis, ikon Echo bertujuan untuk tampil lebih realistis sambil tetap mempertahankan desain yang bersih dan sederhana dengan memanfaatkan kontras dan warna yang hidup." Cara lain yang ditetapkan ini adalah melalui penggunaan garis yang konsisten. Lihat contoh gambar di bawah ini.


8 Aturan Emas dari Website Design
Ben Shneiderman, seorang professor ilmu komputer di University of Maryland menulis 8 aturan emas (8 golden rules) mengenai desain antarmuka antara manusia dengan komputer. 8 golden rules yang ditulis Shneiderman merupakan hasil dari penelitiannya dan bukti-bukti empiris lain yang ditemukannya. 8 golden rules tersebut adalah:
1. Strive for consistency
Dalam desain antarmuka segala sesuatunya harus dirancang secara konsisten, mulai dari tema, penggunaan bahasa, terminologi, menu, fitur help hingga urutanurutan proses harus diusahakan untuk konsisten.
Contoh:

2. Enable frequent users to use shortcuts
Seiring meningkatnya tingkat penggunaan seseorang dengan aplikasi, maka semakin tinggi juga keinginan mereka untuk mengurangi interaksi dan mempercepat pekerjaan. Untuk masalah tersebut perlu disiapkan fitur shortcuts atau bahkan automation untuk mengurangi interaksi tersebut.
Contoh:
shortcuts ctrl+c untuk fungsi copy pada Ms. Windows
atau

3. Offer informative feedback
Berikan feedback yang informatif pada setiap operasi yang dijalankan. Apabila operasi yang dijalankan bersifat frequent seperti save atau delete, respon yang diberikan dapat secara sederhana. Namun, semakin penting suatu operasi dan bersifat jarang, maka respon yang diberikan harus semakin informatif. Hal yang perlu diperhatikan dalam memberikan respon suatu operasi adalah informasi yang diberikan harus komprehensif dan bermakna, serta memperhatikan timing kemunculannya secara tepat. Respon dapat berupa dialog box, alert, progress bar atau yang lainnya.
Contoh:

4. Design dialogs to yield closure
Saat suatu operasi telah selesai, berikan informasi kepada pengguna bahwa operasi tersebut telah selesai dan pengguna dapat melanjutkan ke operasi selanjutnya atau dapat menggunakan fitur yang lain. Informasi kepada pengguna dapat berupa dialog box yang menyatakan suatu operasi telah selesai atau dengan action grouping agar pengguna mendapatkan informasi operasi-operasi apa yang sudah dilakukan dan operasi apa selanjutnya.
Contoh:


5. Offer error prevention and simple error handling
Sedapat mungkin suatu aplikasi dirancang agar pengguna tidak menghasilkan kesalahan (error) yang signifikan. Untuk memandu pengguna agar tidak menghasilkan error, maka perlu adanya mekanisme pencegahan error sebelum suatu operasi dijalankan. Apabila pada akhirnya user menghasilkan error, penyebab kesalahan tersebut harus diinformasikan (aturan nomor 3). Pencegahan error dapat dilakukan dengan proses validasi input sebelum mengirimkan (submit) atau dengan menampilkan petunjuk (hints) saat pengguna berinteraksi dengan aplikasi.
Contoh:


6. Permit easy reversal of actions
Saat suatu operasi sudah dijalankan, sebaiknya disediakan suatu fitur untuk mengembalikan operasi tersebut. Fitur ini dapat mengurangi kecemasan pengguna aplikasi apabila melakukan kesalahan dan menghindari pengguna untuk mencobacoba fitur yang tidak mereka pahami. Hal tersebut dapat diimplementasikan dengan adanya fitur undo, baik untuk single action ataupun group action.
Contoh:


7. Support internal locus of control
Pada umumnya pengguna selalu memiliki keinginan untuk memegang kendali atas apa yang dilakukan oleh aplikasi. Oleh karena itu, perlu adanya fitur-fitur yang menunjukkan bahwa penggunalah yang memegang kendali dan aplikasi bekerja sesuai apa yang diperintahkan oleh pengguna. Hal ini dapat dilakukan salah satunya dengan memberikan fitur cancel pada operasi yang sedang berjalan atau form pengaturan.
Contoh:


8. Reduce short-term memory load
Secara alamiah manusia memiliki keterbatasan dalam memproses suatu informasi pada ingatan jangka pendeknya. Oleh karena itu, tampilan dan proses pada suatu aplikasi juga harus memperhatikan hal tersebut. Tampilan harus dirancang sesederhana mungkin, namun berisi informasi yang komprehensif. Sistem kognitif manusia akan lebih mudah untuk mengenali dibandingkan dengan mengingat. Oleh karena itu, penggunaan iconography, warna dan visual lainnya akan membantu pengguna aplikasi menemukan fungsi yang dibutuhkan. Jika operasi pada aplikasi terdiri atas beberapa proses, maka informasi penting dari proses sebelumnya harus dapat terlihat pada proses setelahnya. Rata-rata ingatan manusia dapat menampung hingga plus minus tujuh (7) informasi pada ingatan jangka pendeknya.




Sumber:
http://alcobindonesia.org/downlot.php?file=Golden%20Rules%20Dalam%20Desain%20Antarmuka.pdf

1 comment: