Pada kesempatan kali ini saya akan membahas tentang User Control and Freedom dari situs ratugalery.com. User Control and Freedom adalah Pengguna harus dapat secara bebas memilih dan melakukan pekerjaan (sesuai kebutuhan). Pengguna harus dapat mengambil keputusannya sendiri (dengan informasi yang jelas) berkaitan dengan pekerjaan yang sedang/akan dilakukan. Sistem harus memiliki kemampuan untuk undo dan redo.
Biasanya kemampuan undo dan redo digunakan saat pengisian form atau inputan yang bersifat penting dan biasanya kritikal jika sudah di laksanakan / di input. Undo dan Redo menjaga agar user yang kurang yakin mampu melakukan perbaikan / mengecek inputan sebelumnya (Undo) dan setelah merasa bahwa saat mengecek inputan tidak ada perubahan, maka bisa kembali lagi (Redo).
Pada ratugalery.com terdiri dari serangkaian halaman saja. tidak ada proses untuk menginput form seperti halnya situs jual beli lainnya. sehingga tidak diperlukan fungsi seperti Undo dan Redo. Namun, fungsi ini masih berjalan pada browser, sehingga jika user tidak yakin akan halaman yang saat itu dibuka, jadi pengguna bisa mengklik tombol undo atau redopada browser.
Minggu, 08 Juni 2014
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
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.
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
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 |
 |
| 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
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.
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..
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.
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.
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.
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
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 |
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 |
 |
| 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
Selasa, 13 Mei 2014
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. 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/
kondisi-kondisi tersebut adalah
- Waktu dan Sumber Daya yang terbatas
- Tidak ada cara untuk meng-akses user
- Terbatasnya Skill atau Keahlian
- Planning and Feasability
- Requirement
- Design
- Implementation
- Test and Measure
- Post Release
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/
Senin, 12 Mei 2014
Langganan:
Postingan
(
Atom
)