Match Between System and The Real World - ratugalery.com

Pada kesempatan kali ini saya akan membahas tentang Match Between System and The Real World dari website ratugalery.com. Match Between System and The Real World menyatakan bahwa Sistem  harus  berbicara  sesuai  dengan  bahasa  penggunanya,  menggunakan  kata,  kalimat,  dan konsep yang biasa digunakan oleh pengguna. itu artinya sistem harus dibuat sedemikian rupa sehingga pengguna mengerti tanpa perlu mencari informasi bagaimana cara melakukan aksi pada sistem.


kali ini saya akan mencoba untuk menganalisis beberapa bagian dari web ratugalery.com terkait dengan Match Between System and The Real World.

Ekspetasi Warna

Berikut adalah gambar dari halaman Contoh Produksi pada ratugalery.com

Gambar halaman Contoh Produksi

Dapat dilihat bahwa judul postingan berwarna pink, yang mungkin menandakan bahwa itu adalah judul postingan. namun saat saya hover, ternyata berubah, terdapat garis bawah (underline) pada judul postingan yang berarti adalah yang tadinya saya pikir judul postingan, ternyata adalah sebuah link yang menunjuk kehalaman lain.

saat di hover ke judul postingan

Rekomendasi :

Untuk mempertegas bahwa judul pengguna tersebut adalah sebuah link, adabaiknya judul tersebut langsung diberikan garis bawah (underline). Sehingga pengguna akan langsung mengetahui bahwa judul postingan tersebut adalah link. dan juga biasanya warna untuk suatu link adalah warna biru dan terdapat underline . namun, jika tidak mau diganti warna, ada baiknya langsung diberi underline saja.

Severity Rating :0

Visibility of System Status - ratugalery.com

Pada kesempatan kali ini saya akan membahas tentang Visibility of System Status. perlu diketahui bahwa visibility of system status adalah bahwa sistem harus selalu menginformasikan pada pengguna apa yang sedang terjadi, melalui pesan yang baik dan waktu yang sesuai.

Dan pada kesempatan kali ini saya akan menganalisis website ratugaleri.com.

1. Posisi Pengguna

Berikut adalah halaman utama dari website ratugaleri.com

halaman utama dari ratugalery.com

Pada bagian atas ada terdapat beberapa menu bar seperti home, foto pabrik dan lainnya. saya mencoba untuk mencari informasi tentang cara pembelian barang, jadi saya mencoba untuk mengklik menu Harga Konveksi. Saat  belum diklik atau dihover, warna menu masih tetap berwarna biru, namun setelah di hover menu berubah menjadi berwarna putih. hal itu didemonstrasikan seperti berikut.

font sebelum di hover

font setelah di hover

namun, setwelah saya mengklik menu tersebut, font menu Harga Konveksi tidak tetap berwarna putih, namun berubah menjadi berwarna biru dan saya telah berada pada halaman Harga Konveksi. Sebenarnya yang demikian sudah bisa memberikan informasi kepada pengguna bahwa posisi pengguna sekarang berada pada menu Harga Konveksi akan tetapi apabila melihat ke bagian atas tidak cukup jelas menunjukkan keberadaan dari pengguna.

 2. Ikon dan Skema Design web

Pada halaman utama ratugalery.com, terdapat ikon (-) yang terdapat di sisi atas postingan NEWS & UPDATE seperti pada gambar berikut..

ikon pada pos dan widget

Pada postingan NEWS & UPDATE terdapat ikon (-), saya mencoba untuk mengklik ikon tersebut, dan saya pikir ikon tersebut bekerja seperti acordion, yaitu ketika saya klik ikon tersebut maka postingan NEWS & UPDATE akan tertutup dan menyisakan postingan-postingan yang lain, namun yang terjadi adalah seluruh pos menjadi tertutup, seperti yang diperlihatkan gambar berikut.

Seetelah Ikon (-) ditekan

3. Keberadaan Pengguna
Pada halaman Contoh Baju Konveksi,  saya mencoba mencari contoh baju, lalu saya mengklik judul Contoh Hasil Produksi Seragam Kemeja untuk melihat contoh seragam kemeja yang ratugalery  buat. 

halamn contoh baju konveksi

saya dibawa ke halaman contoh seragam kemeja, disana ada banyak foto dan saya mencoba mengklik salah satu gambar. namun, saya malah dibawa kehalaman lain dimana gambar tersebut di postingkan.

saat mau memilih salah satu foto

 

potingan foto

lalu baru saya bisa mengklik foto tersebut.

masalah:
- tidak adanya pemberitahuan atau breadcrumb dimana posisi user saat ini. ini membuat user harus mengingat kemana saja dia harus menuju.
- saat dihover ke area foto pada saat mau memilih foto tidak diberitahu foto ini namanya apa, melainkan hanya tooltip yang bertuliskan "contoh dan design seragam kemeja". seharusnya diberitahu namanya dan saat pindah halaman, judul halaman juga berganti sehingga jika user tidak ingat foto yang mana yang diklik maka akan menyebabkan kebingunangan bagi pengguna


Rekomendasi:
1. Untuk mempertegas keberadaan pengguna bisa dengan membedakan warna font atau warna background font yang berada pada menu bar -saat pengguna berada pada disana- sehingga terrlihat jelas dimana keberadaan pengguna saat itu

2. Teknik akordion itu sebenarnya sudah bagus, namun tidak digunakan pada satu widget yang menampung semua postingan. namun ditaruh disetiap posting saja. sehingga saat pengguna mau menutup salah satu pos, ia tidak akan menutup semua postingannya.

3. Berikan breadcrumb pada halaman Contoh Baju Konveksi. sehingga pengguna tidak perlu kembali mengklik menu Contoh Baju Konveksi saat dia sudah diposisi yang jauh dari sana, ini mencegah user untuk melakukan kegiatan yang tidak perlu

4. Tidak perlu membuat postingan lagi yang berisi foto, cukup memberikan foto dengan tooltip nama fotonya. sehingga user tidak perlu pergi ke halaman lain untuk melihat fotonya.


Severity Rating 3

Method for Usability

    Usability adalah bagaimana memberikan kualitas yang bagus dalam pelayanan. Namun untuk mendapatkan good services, maka sangat dibutuhkan metode-metode untuk menghasilkan hal tersebut. Sayangnya metode-metode ini memiliki kekurangan dan kelebihan masing-masing karena hanya bisa digunakan dalam kondisi-kondisi tertentu saja.

kondisi-kondisi tersebut adalah

1. Waktu dan Sumber Daya yang terbatas
2. Tidak ada cara untuk meng-akses user
3. Terbatasnya Skill atau Keahlian

metode-metode tersebut dibagi enam bagian:

1. Planning and Feasability
2. Requirement
3. Design
4. Implementation
5. Test and Measure
6. Post Release

Tentu saja anda menginginkan untuk mendapatkan good services walau ketiga kondisi diatas terjadi kepada anda. Dan beruntungnya,  anda bisa mendapatkan hal tersebut. ada sekitar 6 metode yang dapat anda gunakan. yaitu:

1. CONTEXT
    metode ini digunakan untuk melihat requirements dari perangkat yang akan anda buat. keunggulannya adalah anda mampu memastikan bahwa semua faktor-faktor yang berhubungan dengan sistem diidentifikasi sebelum pekerjaan desain dimulai.

    penjelasan lengkap dapat dilihat disini.

2. AFFINITY DIAGRAMMING
    metode ini digunakan juga untuk melihat requirement, namun affinity diagram sangat mudah atau simple dan teknik biaya yang sangat effective untuk mendapatkan ide-ide dari serangkaian grup dan memperoleh tentang bagaimana informasi harus di strukturkan.
 
penjelasan lengkap dapat dilihat disini.

3. SCENARIOS OF USE (USE CASE)
    metode ini adalah menentukan bagaimana pengguna melaksanakan tugas-tugas mereka. metode ini akan mampu merancangkan dan menyediakan dasar untuk pengujian kegunaan berikutnya. metode ini berorientasi pada tugas yang akan dilaksanakan oleh user.
      metode ini memiliki keunggulan bahwa anda mampu melihat bagaimana user akan beraktivitas pada perangkat yang akan anda buat. 

penjelasan lengkap dapat dilihat disini.

4. REQUIREMENT MEETING 
     metode ini adalah membuat suatu workshop yang dihadiri oleh sekumpulan user dan para developer yang akan mengidentifikasi tentang usability requirement yang dapat diuji kemudian dalam proses development. keunggulannya adalah dapat mengetahui kepentingan suatu usability diawal pengerjaan perangkat.

penjelasan lengkap dapat dilihat disini.

5. PAPER PROTOTYPING  
     metode ini atau metode penggunaan mockups digunakan untuk memperjelas bagaimana interaksi antarmuka yang akan dihadapi oleh pengguna. keunggulannya adalah jika ada masalah dengan usability dapat langsung diketahui di awal bahkan sebelum code di tulis.

penjelasan lengkap dapat dilihat disini.

6. STYLE GUIDES 
      metode ini digunakan untuk menyediakan tampilan yang konsisten. keunggulannya adalah bisa menjadi latihan dalam membuat design interface.

penjelasan lengkap dapat dilihat disini.

source: http://www.usabilitynet.org/

Australia vs Indonesia (Infografic)

source: http://www.globalfirepower.com/countries-listing.asp

how to install driver mikon in win8 (has been tested)

1. go to settings (when you want to shutdown or restart)
2. go to change pc settings
3. go to general tab