Rabu, 15 Februari 2017

Tugas IMK - Review Good Design UI dan Bad Design UI

GOOD DESIGN VS BAD DESIGN


Hallo teman-teman semua, kali ini saya akan membahas mengenai good design vs bad design pada sebuah aplikasi atau website berdasarkan usability goal dan user experience goal. langsung saja, mari kita lihat contohnya :

Good Design User Interface

1. Website http://www.morehazards.com/
More hazards merupakan sebuah situs website musik yang memiliki tampilan mengagumkan, pembuat situs ini terlihat sangat paham bahagimana mendesain website dengan baik dengan mengedepankan kenyamanan pengguna karena berfokus pada pengalaman kebanyakan pengguna ketika sedang mendengarkan musik. Pada situs ini terdapat tombol dimana kita dapat mendengarkan lagu sebelum, selanjutnya dan tombol pause. Selain itu, bagi anda yang tidak tahu dengan liriknya tidak perlu khawatir! karena situs ini menyediakan semua lirik lagunya dan dapat kita lihat terdapat kepingan cd yang berputar ketika musik dimainkan. Situs ini sederhana tetapi memberikan kenyamanan bagi penggunanya.



a. Efektif
Efektif karena user menekan tombol play untuk mendengarkan lagu, website langsung memainkan lagu dengan memutarkan kepingan cd yang ada pada website.

b. Efsien
Efisien dalam pencarian lirik, dikarenakan ketika lagu sedang diputar terdapat icon play berwarna orange pada bagian atas lirik yang menandakan bahwa lagu tersebut sedang diputar. sehingga user tidak perlu kebingungan saat mencari lirik lagu.

c. Learnability
Pada tampilan ini memenuhi aspek learnability, dimana informasi didesain dengan baik sehingga user dapat dengan mudah memahami meskipun belum pernah mengakses sebelumnya.

d. Memorability
Pada saat menggunakan website ini user dapat dengan cepat memahami kegunaan setiap fungsionalitas yang tersedia selain itu informasi yang diberikan mudah untuk dimengerti, seperti button play, button next, button previous, button dowload lagu, sehingga aspek memorability pada website musik ini dapat terpenuhi.

e. User Experience
Website ini memiliki desain yang menarik walaupun terlihat sederhana, kepingan cd dan button play pun ditempatkan dengan penempatan yang sesuai sehingga memberikan rasa nyaman kepada user, dan user dapat melihat lirik ketika lagu tersebut diputar.


Bad Design User Interface

1. Website http://www.arngren.net/
Bad design merupakan suatu desain yang buruk, baik dari segi tulisan, warna ataupun tampilan keseluruhannya terlihat menganggu mata atau tidak enak dipandang. Selain itu bisa juga dalam bentuk suatu aplikasi yang cara kerjanya tidak dijelaskan secara detail. Berikut ini saya akan memberikan salah satu contoh website yang menurut saya mempunyai desain dengan tampilan yang buruk, seperti inilah tampilan website nya.

Arngren.net adalah website jual beli berbagai macam produk, terdapat banyak sekali jenis produk pada website ini. Akan tetapi tampilan yang ada pada website tersebut sangatlah buruk, dikarenakan penempatan produk disimpan full pada tampilan laman website, hal ini tidak memberikan rasa nyaman kepada pengguna karena pengguna akan merasa kebingungan melihat gambar produk yang terlalu ramai, selain itu tulisan list produknya pun tidak mudah dibaca. Bagaimana menurut anda? Apakah anda senang dengan contoh tampilan website seperti ini?



a. Efektif
Pada website ini tidak memenuhi aspek efektif karena informasi produk diletakan secara penuh pada halaman website, dan harga produk tidak terlihat oleh user sehingga membuat user merasa kesulitan.


b. Efsien
Pada website terdapat aspek yang kurang memenuhi karena informasi tidak  dapat dilihat dengan baik oleh user, sehingga user akan merasa kesulitan ketika mencari produk yang diinginkan.


c. Learnability
Pada tampilan website terdapat banyak sekali gambar dan tulisan membuat user merasa kebingungan ketika mengakses website tersebut, sehingga informasi yang ditampilkan pada website tidak dapat ditangkap dengan baik oleh user.


d. Memorability
Ketika user menggunakan website ini, user sulit mengingat letak produk yang diinginkan karena produk tidak dikelompokan sesuai jenisnya.


e. User Experience
Ketika user menggunakan website ini, user akan merasa tidak nyaman karena website tidak memenuhi kebutuhan user dengan baik, salah satunya tidak memberikan kemudahan, dan tidak memberikan kenyamanan kepada user.



Interaksi Manusia dan Komputer




Interaksi Manusia dan Komputer

Interaksi manusia dan komputer adalah sebuah disiplin yang berkaitan dengan desain, evaluasi dan implementasi sistem-sistem komputasii interaktif. Antarmuka interaksi manusia dan komputer menekankan pengembangan pemahaman yang dalam menyangkut karakteristik pengguna dan kepekaan yang jernih terhadap tugas yang harus dikerjakan oleh seorang pengguna.

A. Manusia VS Komputer
     Manusia mencampurkan emosi dan pikiran dalam bersikap dan bertindak, sedangkan komputer mengikuti arahan atau pemikiran dari manusia.

B. Usability Goal
Usability adalah konsep utama interaksi manusia dan komputer dimana sistem di rancang untuk mempermudah ketika digunakan. Cara untuk mempermudah penggunaan tersebut diantaranya :
1.  Mempelajari faktor yang mempengaruhi manusia menggunakan dan mengoperasikan komputer      secara efektif    ( psikologi, ergonomic, sosial dan organisasi )
a. Psikologi: memberikan dasar pengetahuan tentang persepsi user, kognitif, kemampuan
    memecahkan masalah.
b. Ergonomi: ilmu yang mempelajari karakter fisik lingkungan saat terjadi sebuah interaksi,
    sekaligus kualitas dari lingkungan itu sendiri.(kemampuan fisik user).
c. Sosiologi: kemampuan memahami konsep interaksi
d. Organisasi: tempat kerja bagi para pengguna.
2.  Mengembangkan tools dan teknik yang membantu desainer


C. User Experience Goal


D. Prinsip Desain
  1. User Compatibility
  2. Seorang perancang sistem harus benar-benar paham tentang pengetahuan, cara berpikir dan cara menerima informasi dari user sehingga sistem yang nantinya akan digunakan oleh user dapat membuat user lebih produktif. Dan yang harus diperhatikan juga adalah bahwa perancang (designer) atau developer tidak sama dengan user
  3. Product Compatibility
  4. Selalu memperhatikan dan mempertahankan kompatibilitas antar produk, misalnya mampu mengorbankan User Interface yang memungkinkan sistem lebih kompatibel.
  5. Task Compatibility
  6. Rancanglah interface sistem sesua dengan tugas dari user, jangan samapi user kesulitan untuk menggunakannya, karena hal ini dapat menyebabkan aplikasi yang kita buat tidak akan terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user.
  7. Work Flow Compatibility
  8. Selalu mengorganisasikan setiap fungsinya sesuai dengan kategori fungsinya sehingga dapat memfasilitasi sega perubahan tugas user.
  9. Consistency
  10. Prinsip ini sudah jelas, bahwa sistem harus  konsisten terhadap fungsionalitas / kegunaan dari sistem tersebut. Contoh sederhananya adalah ketika user menekan tombol “save” maka proses yang terjadi adalah penyimpanan bukan hapus data.
  11. Familiarity
  12. Gunakanlah konsep, terminologi dan pengaturannya yang mudah dipahami oleh user. Seperti ikon atau gambar “Recycle Bin” pada Sistem Operasi Windows, ini membuktikan bahwa fokus user terhadap gambar tersebut adalah file-file yang sudah dihapus sebelumnya.
  13. Simplicity
  14. Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu gunakan system default pada aplikasi yang dirancang. Maksudnya adalah sediakan dan utamakanlah fungsi – fungsi yang benar-benar sesuai dengan tugas dari user. Usahakan agar tidak menampilkan semua fungsionalitasnya.
  15. Direct Manipulation
  16. Maksud dari prinsip ini adalah user dapat langsung menyaksikan aksi sistem pada suatu objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf “A” maka di layar akan langsung muncul huruf “A”.
  17. Control
  18. Sistem yang digunakan oleh user jangan sampai membuat user merasa frustasi dan dikontrol oleh user. Seperti memberikan komentar pada saat user melakukan kesalahan dengan bahasa yang tidak membuat user merasa dikontrol oleh sistem tersebut.
  19. WYSIWYG
  20. WYSIWYG (What You See Is What You Get), artinya adanya korespondensi satu ke satu antara informasi di layar dengan informasi di printed-output atau file. Contoh, pada saat kita membuat laporan menggunakan Microsoft Office lalu mencetaknya (print out) laporan tersebut, maka hasil print out harus sama dengan yang ada pada lembar kerja Microsoft Office.
  21. Flexibility
  22. Prinsip ini merupakan prinsip yang sangat penting bagi user dengan keterbatasan fisik. Ini berarti mengijinkan banyak kontrol dari user yang mendukung untuk menggunakan aplikasi yang kita rancang dan mampu mengakomodir kemampuan user yang lain. Seperti aplikasi yang dapat didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).
  23. Responsiveness
  24. Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user. Seperti menampilkan Progress Bar.
  25. Invisible Technology
  26. Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat direkomendasikan dalam membuat User Interface. Sehingga user tidak memiliki rasa khawatir dan ketakutan untuk menggunakan aplikasinya.
  27. Robustness
  28. Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang baik untuk mengimplementasikan prinsip ini.
  29. Protection
  30. Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya memproteksi kesalahan-kesalahan umum manusia. Seperti pada saat kita menutup lembar kerja Microsoft Office yang belum kita simpan sebelumnya, maka Office akan secara otomatis memberikan konfirmasi untuk menyimpannya atau tidak.
  31. Ease of Learning
  32. Buatlah sistem yang mudah dipelajari bagi user novice (awam). Hal ini akan memberikan motivasi kepada user tersebut untuk menggunakannya.
  33. Ease of Use
  34. Buatlah sistem yang mudah digunakan untuk expert user. Sehingga sistem yang kita bangun tidak hanya dipakai untuk novice user tetapi bisa juga dipakai untuk user yang sudah ahli (berpengalaman).