• Learnability

Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar ketika pertama kali mereka melihat/menggunakan hasil perancangan.

Laernabilty untuk website ini sulit. Contohnya untuk link dan button. Kebanyakan link tidak nampak seperti link, beberapa button tidak nampak seperti button. Padahal ini adalah masalah standar, yang tidak perlu terjadi.

• Eficciency

Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka mempelajari hasil perancangan.

Efficiency dari website ini rendah. Misalnya saja pada task konsultasi, tidak ada informasi field apa saja yang harus diisi, tidak ada pemberitahuan letak kesalahan apabila terjadi kesalahan penulisan/format dalam pengisian suatu field tertentu. Hal ini akan menyebabkan pengguna membutuhkan waktu yang lama untuk menyelesaikan tugasnya, walaupun sudah mempelajari perancangannya.

• Memorability

Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan baik, setelah beberapa lama tidak menggunakannya.

Memorability website ini sangat sulit, karena terlalu banyak link yang harus di-klik pengguna untuk mencapai tujuannya. Pengguna tidak akan mudah mengingat apabaila path/jalurnya terlalu panjang.

• Errors

Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error dan cara memperbaiki error.

Errors yang terjadi pada website ini sangat menjengkelkan. Paling fatal terjadi pada pencarian di halaman distribusi. Menimbulkan kesan tidak profesional untuk perusahaan ini.

• Satisfaction

Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

Saya tidak puas sekali dengan website ini. Uraian saya sebelumnya sudah cukup mewakili kejengkelan saya terhadap website ini.

2.  Jakob Nielsen’s Alertbox

Jacob Nielsen menyebutkan 10 kesalahan yang paling banyak terjadi dalam desain web yang bertentangan dengan teori usability.

• Bad Search (sistem pencarian yang buruk)

Ya, sistem pencarian pada website ini buruk. Ada form pencarian yang tidak berfungsi dan malah error. Form pencarian yang sudah baik pun bermaslah pada hasil pencariannya. Hasil pencarian disajikan dalam bentuk tabel yang tidak umum.

• PDF files for Online Reading

Website ini tidak menggunakan file PDF untuk menampilkan content dari suatu halaman tertentu.

• Not Changing the Color of Visited Links

Ya, website ini kebanyakan tidak mengganti warna dari link yang sudah dikunjungi.

• Non- Scannable Text (teks yang susah dibaca sekilas)

Ya, terkait masalah ukuran teks yang terlalu kecil dan ukuran space yang tidak sama untuk semua halaman.

• Fixed Font Size (ukuran font yang tidak bisa diubah)

Ya, ukuran font tidak bisa diubah untuk website ini.

• Page Titles With Low Search Engine Visibility

Title untuk setiap halaman sama.

• Anything That Looks Like an Advertisement

Menurut saya tidak ada sesuatu yang seperti iklan tidak ada di dalam website ini.

• Violating Design Conventions (melanggar kesepakatan desain)

Ya. Ada beberapa pelanggaran seperti masalah balance, alignment, ketidakonsistenan, whitespace yang terlalu banyak, dan lain-lain.

• Opening New Browser Windows (membuka jendela browser baru)

Semua halaman website ini tidak diarahkan ke jendela baru.

• Not Answering User’s Questions (tidak menjawab pertanyaan pengguna)

Ya, website ini tidak menjawab pertanyaan pengguna, karena banyak content halaman yang tidak di-update bahkan kosong.

3.  Dr. Pete’s 25 point Website Usability

Daftar ini dibagi menjadi 4 bagian yang kurang lebih sama, (I) Aksesibilitas, (II) Identitas, (III) Navigasi, dan (IV) Konten. Penilaian terbagi menjadi 3 jenis, yaitu

–> Bagus / Diterima

–> Butuh usaha, tapi bukan bencana

–> Buruk / Gagal

*Tidak semua poin tentu berlaku untuk semua situs.

Bagian I.  Accessibility

1.  Site Load-Time is Reasonable

Jika situs membutuhkan waktu yang lama untuk memuat halaman, maka kebanyakan orang akan meninggalkannya.

Pada website ini, waktu load tidak lama.  

2.  Adequate Text-to-Background Contrast

Abu-abu gelap di atas abu-abu terang mungkin kelihatannya stylish. Tapi kebanyakan orang tidak akan mau merusak penglihatannya untuk membaca isi dari situs anda.

Pada website ini, terdapat kontras antara teks dengan background. Pada halaman home, Warna background krem, dan tulisan hitam.

3.   Font Size/Spacing Is Easy to Read

Readibility yang buruk meningkatkan frustrasi, dan frustrasi mengarah ke ditinggalkannya suatu situs.

Pada website ini, ukuran font kecil, aligntment center pada saat di halaman profil mislanya menyebabkan informasi yang tertera menjadi agak sulit untuk dibaca.

4.   Flash & Add-ons Are Used Sparingly

Orang tidak akan mau menunggu sampai 5 menit untuk menunggu loading time untuk flash di suatu situs. Gunakan teknologi semacam flash dan lain-lain secukupnya saja dan hanya jika itu benar-benar meningkatkan tujuan Anda.

Pada website ini, flash digunakan pada halaman produk dan layanan. Menurut saya, biarpun flash tersebut tidak memberatkan waktu load, tapi sesungguhnya tidak ada manfaat yang dapat diambil dari animasi flash tersebut. Tidak ada makna yang ingin disampaikan. Jadi buat apa ada animasi, terkesan useless, lebih baik dihilangkan saja.

5.  Images Have Appropriate ALT Tags

Mesin pencari membutuhkan ALT Tags untuk memahami gambar pada suatu situs. Hal ini sangat penting bila Anda menggunakan gambar untuk konten utama, seperti item menu.

Semua gambar yang ada pada website ini tidak mempunyai tag alternative

6.   Site Has Custom Not-found/404 Page

Jika sebuah halaman di situs Anda tidak ada, halaman putih dengan ” 404 Not Found” adalah cara yang baik untuk kehilangan pelanggan. Sebaiknya buat satu halaman 404 yang memandu pengunjung Anda kepada isi website.

Pada website ini, pada saat mengunduh arsip di halaman arsipàfile details disajikan halaman “404 not found”.

Bagian II. Identity

Sebuah pertanyaan kunci ketika seseorang pertama kali datang ke situs Anda adalah “Siapa anda?”. Sangat penting untuk menjawabnya dengan cepat, dan membuat jalur yang mudah dimengerti untuk pertanyaan yang sejenis (“Apa yang anda lakukan?”. “Kenapa saya harus percaya pada anda?”), dan kemudian menjawabnya dengan jelas.

7.  Company Logo Is Prominently Placed

Letakkan logo atau merek di tempat yang mudah ditemukan, dan yang biasanya yaitu pada kiri atas layar. Orang-orang mengharapkan itu, dan mereka menyukainya ketika Anda membuat hidup mereka mudah.

Pada website ini, logo perusahaan sudah diletakkan pada kiri atas layar, dan mudah ditemukan.

8.   Tagline Makes Company’s Purpose Clear

Pertanyaan “Apa yang Anda lakukan?” dapat dijawab secara singkat dengan tagline yang deskriptif. Hindari jargon pemasaran dan tekankan pada proposisi nilai yang unik ke beberapa kata. Ini juga merupakan nilai tambah untuk SEO.

Pada situs viva cosmetics, tidak ada tagline.

9.  Home-page Is Digestible In 5 Seconds

Pengunjung website merupakan sekelompok orang yang berubah-ubah, dan mereka perlu untuk mendapatkan inti dasar dari halaman rumah Anda hanya dalam beberapa saat.

Pada situs viva cosmetics, saya perlu lebih dari 5 detik untuk mendapatkan maksud dari situs ini. Masalahnya, informasi yang tersedia pada halaman home yaitu informasi lowongan kerja, alamat HRD perusahaan, dan gambar-gambar yang kebanyakan tidak jelas maksudnya apa. Tidak ada satu pun yang mengindikasikan bahwa ini adalah suatu web informasi/berita tentang suatu produk kecantikan. Lebih seperti website untuk recruitment pegawai.

10.   Clear Path to Company Information

Halaman “Tentang Kami” mungkin terasa membosankan, tetapi kepercayaan diri merupakan hal yang penting untuk suatu website. Orang-orang memerlukan cara mudah untuk mempelajari lebih lanjut tentang Anda.

Pada situs viva cosmetics, informasi tentang perusahaan terdapat pada halaman profil.

11.  Clear Path to Contact Information

Pengunjung ingin tahu bahwa mereka bisa berhubungan dengan Anda jika mereka merasa perlu. Jika tida ada informasi kontak bisnis akan sulit untuk dilakukan karena tidak ada yang dapat menghubungi Anda. Sebaiknya, daftar informasi kontak berupa teks (bukan dalam gambar), hal itu akan diambil oleh mesin pencarian, termasuk pencarian lokal.

Pada website ini, informasi kontak berada pada halaman profil, jadi pengunjung harus ke halaman profil terlebih dahulu untuk mengetahui informasi kontak dari viva cosmetics ini. Sebenarnya, pada halaman home sudah tertera sebuah alamat, tapi menjadi rancu karena informasi yang tertera di halaman home tentang lowongan pekerjaan. Daftar informasi kontak berupa teks.

Bagian III. Navigation

Setelah orang umumnya tahu siapa Anda dan apa yang Anda lakukan, mereka membutuhkan jalur yang jelas untuk konten yang menarik bagi mereka. Informasi arsitektur adalah topik yang besar, tetapi titik-titik ini mencakup beberapa dasar-dasar.

12.   Main Navigation Is Easily Identifiable

Hampir setiap situs di web telah memiliki menu utama sejak browser pertama datang di pasar. Buat navigasi utama Anda mudah ditemukan, dibaca, dan digunakan. Jika Anda memiliki dua atau lebih area navigasi, jelaskan mengapa mereka berbeda.

Pada website ini, menu utama mudah ditemukan, lalu ada menu navigasi yang juga mudah ditemukan, tapi penempatannya agak aneh dan tidak familiar awalnya. Lalu jika kita mengunjungi halaman lain, maka struktur navigasi berubah.

13.  Navigation Labels Are Clear & Concise

Navigasi utama Anda harus pendek, to the point, dan mudah bagi manusia untuk memahami. Apakah “Berkomunikasi Online Dengan Tim Kami” lebih baik daripada “Hubungi Kami?”.

Pada website ini, label navigasi sudah singkat. Tidak ada yang lebih dari dua kata untuk menu utama dan menu navigasi.

14.  Number of Buttons/Links Is Reasonable

Informasi pada suatu website biasanya disediakan dalam bentul link. Kemampuan manusia untuk memproses informasi itu terbatas. Jangan terlalu banyak menyediakan link. Sediakan informasi yang benar-benar dibutuhkan saja.

Link pada website ini sangat banyak.

15.  Company Logo Is Linked to Home-page

Mungkin kelihatannya sepele, tetapi ekspektasi orang logo itu merupakan link untuk ke halaman home. Jika tidak, mungkin mereka bingung. Dr. Pete telah melihat video pengguna mengklik logo berulang-ulang, dan mereka tidak tahu apa yang harus dilakukan selanjutnya.

Pada website ini, logo perusahan tidak dibuat tautan ke halaman home.

16.  Links Are Consistent & Easy to Identify

Sesuatu yang digarisbawahi, link yang berwarna biru merupakan inti dari suatu website. Membuat link menjadi artistik boleh saja, tetapi pertimbangkan untuk setidaknya membuat link anda biru atau digarisbawahi.  Anda harus menggunakan link secara hemat, dan tidak akan mengganggu content dari website.

Tidak mudah menemukan link di website ini, karena link is not easy to identify. Banyak sekali link di website ini, tetapi tidak ada garis bawah, warnanya tidak biru, dan apabila disorot pointer mouse tidak berubah. Sangat sedikit link yang digarisbawahi dan berwarna biru.

17.  Site Search Is Easy to Access

Jika Anda memiliki situs pencarian, pastikan itu menonjol. Pedoman Usability cenderung memilih sudut kanan atas halaman. Jaga agar tombol pencarian sederhana dan jelas – “Search” masih yang terbaik untuk kebanyakan situs.

Pada website ini, pencarian tidak diletakkan di posisi yang menonjol. Pencarian diletakkan di halaman-halaman tertentu saja. Mungkin ingin menyesuaikan dengan kebutuhan. Tombol pencarian jelas dan sederhana.

18.  Major Headings Are Clear & Descriptive

Kebanyakan orang tidak membaca secara online, mereka membaca sekilas. Gunakan judul (besar dan kecil) untuk mengatur konten terpisah dan tetap terorganisir. Judul harus jelas, dan untuk pemanfaatan SEO, gunakan tag heading (<H1>, <H2>, dll).

Pada website ini, tidak ada tag heading, judul dibuat menjadi image, dengan icon dan tulisan yang terlalu kecil.

19.  Critical Content Is Above The Fold

“Fold” adalah garis imajiner di mana bagian bawah layar Anda memotong sebuah halaman. Content dapat berada di bawah fold. Content yang penting dan kritikal, yang dapat menjelaskan “Siapa Anda?” atau “Apa yang Anda Lakukan?” (terutama halaman home) harus sesuai di layar pertama (fit on that first screen). Sesuaikan dengan resolusi layar dari target pengunjung (kebanyakan masih menggunakan resolusi 1024×768),

Pada website ini dari halaman home sudah salah isinya. Halaman home tidak menjelaskan tentang identitas perusahaan ini. Pada halaman profil yang menjelaskan tentang perusahaan, penempatan content yang penting dan kritikal bagus, dicakup semuanya pada layar pertama, dan tidak perlu scrolling.

20.  Styles & Colors Are Consistent

Pastikan orang tahu bahwa mereka masih di situs Anda dengan menjaga kekonsistenan (membingungkan mereka maka Anda akan kehilangan mereka). Layout, judul, dan gaya harus situs konsisten, dan warna biasanya harus memiliki arti yang sama.

Pada website ini banyak sekali hal yang tidak konsisten. Layout, judul, breadcrumb, dan lain-lain.

21.  Emphasis (bold, etc.) Is Used Sparingly

Ini adalah fakta kognisi manusia: mencoba untuk menarik perhatian untuk segala sesuatu dan Anda secara efektif tidak akan menarik perhatian apa-apa. Jangan membuat website menjadi berlebihan (contohnya berkedip-kedip, menggarisbawahi “NEW!”, dan sebagainya).

Pada website ini, tidak ada sesuatu yang dilebih-lebihkan, misal ada running text, animasi-animasi yang berlebihan, dan sebagainya. Malah, jarang sekali ada penekanan untuk suatu content yang bisa menarik perhatian.

22.  Ads & Pop-ups Are Unobtrusive

Iklan adalah kenyataan hidup, tetapi integrasikan mereka dengan baik ke situs Anda. Jangan coba memaksakan iklan dan pop-up kepada pengguna. Jika Anda mengaburkan batas antara iklan dan konten yang terlalu banyak, konten Anda mungkin menyedihkan.

Pada website ini, penempatan content sudah sesuai, dan tidak menyedihkan.

23. Main Copy Is Concise & Explanatory

Ini bukan pelajaran di dalam copywriting, tapi lihat di halaman home Anda – bisa Anda mengatakan hal yang sama di setengah kalimat? Cobalah untuk menjadi konkrit dan deskriptif dan menghindari jargon. tak ada yang peduli jika Anda dapat “meningkatkan sinergi Anda”.

Pada website ini, tidak digunakan jargon dan perulangan kata-kata tidak terjadi.

24.  URLs Are Meaningful & User-friendly

Ini adalah titik perdebatan, tetapi kata kunci yang handal berbasis URL umumnya baik untuk pengunjung dan mesin pencari. Lakukan apa yang Anda bisa untuk membuat URL deskriptif dan ramah.

Website ini memiliku URL yang deskriptif dan mudah dicerna.

25.  HTML Page Titles Are Explanatory

Lebih penting lagi, judul halaman Anda (pada tag <TITLE>) harus deskriptif, unik, dan tidak penuh sesak dengan kata kunci. Judul halaman adalah hal pertama  yang dilihat mesin pencari, dan jika judulnya tidak masuk akal atau terlihat sebagai spam, mesin pencari akan beralih ke hasil berikutnya.

Tag title untuk website ini seragam untuk setiap halaman (kecuali halaman home). Tag title yang mereka pakai yaitu “Viva Cosmetics”. Cukup unik, karena itu merupakan brand dari perusahaan.

Tidak ada informasi di halaman ini (content tidak pernah di-update).

• Artikel

Tidak ada informsasi di halaman ini (content tidak pernah di-update).

• Arsip

Gambar 14  tampilan halaman arsip

Informasi ditampilkan dalam bentuk tabel kembali, dengan isi dari kolom deskripsi kosong. Sama seperti yang sudah dibahas, isi dari kolom kategori/arsip yang merupakan suatu link juga tidak nampak seperti link, karena jika disorot, pointer mouse tidak berubah. Setelah isi dari kolom kategori/arsip di-klik, maka akan diarahkan ke file details.

Gambar 15  tampilan halaman file details pada halaman arsip

Pengguna harus mengunduh arsip ini untuk melihat informasi yang ada didalamnya. Hal yang menarik perhatian yaitu pada bagian informasi ukuran 0.00 kB. Ini berarti tidak ada apa-apa, file kosong. Tetapi ada link “download sekarang”. Setelah mencoba mengunduh, yang terjadi justru halaman “Not Found”, seperti terlihat pada gambar di bawah ini.

Gambar 16  tampilan halaman Not Found

• Katalog

Gambar 17  tampilan halaman katalog

Tampilan informasi untuk katalog online sudah cukup baik. Dimunculkan logo-logo dari varian-varian produk kosmetik yang tersedia. Tetapi tetap saja, pengunjung harus meng-klik link yang tidak sedikit untuk mendapatkan produk yang diinginkan. Misalnya saja seorang pengunjung ingin melihat deskripsi tentang produk Compact Powder Lilac, maka jalur yang harus dilewati yaitu Katalog Online – VIVA Standard – Tata Rias Wajah – Compact Powder. Sebenarnya bagus sudah dikelompokkan, tapi tetap saja memerlukan ingatan dari pengunjung.

Bagusnya, pencarian disini dapat membantu untuk pengunjung yang sudah mengetahui produk apa yang ingin dicari. Tetapi tidak langsung diarahkan ke halaman deskripsi dari produk yang dicari. Secara lebih jelas, dapat dilihat pada gambar di bawah ini.

Gambar 18  tampilan halaman hasil pencarian katalog

Hasil pencarian disajikan dalam bentuk tabel. Menurut saya, kolom tanggal, deskripsi/ukuran, downloads itu tidak penting.

• Agenda

Gambar 19  tampilan halaman agenda

Informasi yang dikemas pada halaman agenda ini kurang menarik. Tidak ada bagian-bagian yang ditekankan untuk informasi-informasi yang saya rasa cukup penting atau menarik. Seperti kata “Promo”, kata tersebut bagi saya akan sangat menarik perhatian pengunjung.

• Konsultasi Online

Pada halaman ini, kembali terdapat informasi berupa tabel. Konsultasi terbagi menjadi tiga kategori yaitu perawatan rambut, perawatan kulit, dan perawatan badan.

Gambar 20  tampilan halaman konsultasi

Link baru nampak seperti link pada halaman ini. Pointer mouse berubah jika pada bagian yang diberi kotak hijau disorot. Setelah meng-klik salah satu link tersebut, maka akan ada resume konsultasi-konsultasi yang telah terjadi.

Gambar 21  tampilan halaman konsultasi bagian perawatan rambut

Menampilkan daftar konsultasi berupa tabel ini menurut saya buruk karena tidak sesuai konteks. Jika pengunjung ingin berkonsultasi, pengunjung harus meng-klik link “Klik disini untuk konsultasi”.

Gambar 22  tampilan form konsultasi

Sama, tidak ada pemberitahuan field mana saja yang harus diisi. Sebenarnya sudah ada validasi field, tetapi tidak diberitahukan field mana yang salah, hanya ditampilkan pesan error saja. Tetapi ketika semua field sudah diisi dengan benar, tidak ada pesan konfirmasi mengenai pesan yang telah dikirim. Apakah masih pending atau langsung ditampilkan. Setelah dicek, ternyata tidak langsung tampil. Informasi tentang seberapa lama pengguna harus menunggu balasan juga tidak diberikan.

Ada tombol preview disini yang menurut saya bagus agar pengguna dapat melihat kembali pesan yang telah di-input-kan.

Gambar 23  tampilan preview konsultasi

Ketidakkonsistenan kembali terjadi. Pada waktu pengisian, ada inputbox dengan keterangan “permasalahan”. Tetapi di hasil preview, keterangan permasalahan itu berubah menjadi subject.

Gambar 1  tampilan halaman awal PT. Vitapharm

Gambar di atas merupakan tampilan halaman awal dari website PT. Vitapharm. Menurut saya posisi website yang berada di sebelah kiri ini kurang indah (sangat jelas terlihat pada web browser). Nampak tidak seimbang, lebih berat ke sebelah kiri (pelanggaran prinsip desain yaitu Balance). Prinsip utama dalam segala macam komposisi adalah keseimbangan (balance). Kenyamanan estetika yang dihasilkan oleh keseimbangan nampaknya memiliki sesuatu yang berhubungan dengan kualitas gerakan mata sewaktu bergerak dari satu sisi ke sisi yang lain. Dengan posisi website ini yang rata kiri, pergerakan mata manusia menjadi tidak seimbang

Penempatan menu utama dari website ini, sudah baik, terlihat jelas, dan langsung bisa ditangkap oleh mata. Hal yang menjadi masalah disini menurut saya yaitu pada menu navigasinya. Tidak umum jika diletakkan di bagian kanan atas. Biasanya menu navigasi diletakkan pada sisi kiri dari website.

Sesuatu yang mengagetkan juga terlihat pada bulatan-bulatan hijau pada gambar 1 di atas. Ternyata itu semua merupakan tombol, yang berfungsi sebagai jalan pintas untuk mengakses halaman tertentu. Cobalah sorot salah satu bulatan tersebut, seseorang pasti tidak akan mengira bahwa itu merupakan suatu tombol yang dapat di-klik. Karena pada saat menyorot bulatan tersebut, tidak ada perubahan pada pointer mouse, dan tidak ada perubahan bentuk tombol, tetapi itu bisa di-klik. Tombol-tombol ini sekiranya menjadi sesuatu yang useless, karena tidak semua pengunjung dapat mengetahui bahwa semua itu merupakan tombol yang bisa di-klik.

Hal lain yang mengurangi estetika dari website ini yaitu gambar background yang terpisah-pisah. Kelihatannya sepele, tetapi bagi sangat mengganggu mata dan merusak keindahan dengan tampaknya satu potongan gambar yang terpisah.

Gambar 2  background image yang terpotong

Breadcrumb untuk halaman home ini juga tidak ada. Bagaimana seseorang mengetahui kalau saat ini dirinya sedang berada pada halaman home? Satu-satunya indikasi yang bisa menunjukkan terlihat pada tag title dari halaman ini yaitu “Welcome to VIVA Cosmetics”. Itupun jika pengunjung jeli dengan mau memperhatikan title dari sebuah website.

Content yang terdapat pada halaman awal ini juga kurang cocok untuk suatu website informasi/berita dari sebuah perusahaan produk kecantikan. Tidak memberikan informasi ke pengunjung bahwa ini merupakan suatu website sebagai media promosi untuk produk-produk kecantikan. Informasi yang tertera pada halaman awal malah info lowongan kerja, pengumuman pemenang, dan beberapa gambar yang tidak jelas maksudnya apa. Singkatnya, halaman awal ini tidak menjelaskan identitas dari website itu sendiri.

• Halaman Profil

Susunan website berubah semua. Terjadi ketidakkonsistenan disini. Mulai dari susunan menu utama, menu navigasi, gambar dan lain-lain sangat berbeda dengan halaman awal tadi.

Gambar 3  tampilan halaman profil

Whitespace untuk halaman ini terlalu banyak, karena content diletakkan pada bagian tengah. Text alignment yang di tengah juga tidak cocok untuk menampilkan content suatu halaman website. Sebaiknya content diposisikan pada bagian kiri, sehingga whitespace tereduksi, dan lebih baik alignment yang digunakan adalah justify (rata kanan-kiri), dan informasi pun bisa dipadatkan menjadi beberapa baris saja sehingga dapat mengurangi horizontal scrolling.

Content dari halaman profil sudah cukup menjelaskan “Perusahaan seperti apa PT. Vitapharm itu”, dan terdapat informasi kontak yang cukup lengkap meliputi alamat, nomor telpon, fax, email dan alamat website.

Breadcrumb pada halaman ini ditunjukkan dengan sebuah icon dan tulisan “profil” di awal. Tetapi icon dan tulisannya terlalu kecil.

• Halaman Produk dan Layanan

Ketidakkonsistenan terjadi kembali. Tipe font, posisi dan text alignment berubah. Posisi content berada di sebelah kiri, yang menyebabkan banyaknya whitespace pada bagian kanan, dan text aligntment juga berubah menjadi rata kiri yang disusun menjadi beberapa baris, walaupun area kanan masih kosong.

Gambar 4  tampilan halaman produk dan layanan

• Halaman Berita

Halaman berita tidak mengandung content apa-apa, hanya whitespace yang nampak. Terlihat bahwa content website ini tidak pernah di-update, dan ini bisa sangat merusak ekspektasi pengunjung.

Gambar 5  tampilan halaman berita

• Halaman Distribusi

Gambar 6  tampilan halaman distribusi

Pada halaman distribusi, terjadi ketidakonsistenan kembali. Pada halaman ini terdapat path navigasi yang jelas yang tidak terdapat pada menu-menu sebelumnya.

Ada beberapa alternatif pilihan untuk menampilkan informasi dari halaman distribusi ini, yaitu list, detail, dan thumbnails.

• List

Secara harfiah, list berarti daftar. Ada tiga daftar yang ditampilkan. Tapi kenapa dalam bentuk tabel dua kolom? Anehnya kolom alamat tidak mengandung informasi apa-apa. Tiga list tersebut ternyata merupakan link, fatalnya itu tidak nampak seperti link, karena jika pengguna menyorot salah satu dari list tersebut, pointer mouse tidak berubah, hanya warna background dan warna tulisan yang berubah.

Informasi yang disajikan pada halaman ini sangat buruk. Pengguna tidak akan cepat paham maksud dari kolom nama/lokasi. Apakah “Perwakilan PT. VITAPHARM”, “Distributor”, dan “Counter” bisa diketegorikan sebagai nama/lokasi? Pemilihanama kolom yang buruk.

Nilai yang terdapat diantara tanda kurung di setiap list juga membingungkan. Apakah itu menunjukkan suatu kuantitas? Tapi masih belum jelas kuantitas untuk apa.

Penyampaian informasi untuk halaman distribusi ini sangat buruk. Terlalu bnayak link, sehingga memerlukan waktu yang lama untuk pengunjung dalam mencapai tujuannya (dalam hal ini mendapatkan informasi distribusi).

• Details

Gambar 7  tampilan details dari halaman distribusi

Saat memilih details, terlihat hampir sama, hanya tabel memiliki lebih banyak kolom. ada tambahan kolom tanggal dan hits. Tetapi sama saja, isinya kosong. Sebenarnya informasi akan muncul ketika kita selesai meng-klik link-link yang terhubung, tetapi alangkah indahnya bila jika memang suatu informasi tidak akan ditampilkan pada kolom, maka kolomnya dihilangkan saja.

• Thumbnails

Gambar 8  tampilan thumbnails dari halaman distribusi

Jika memilih thumbnails, tidak ada lagi tabel, diganti dengan icon-icon yang tidak merepresentasikan apa-apa. Hanya logo Viva Cosmetics. Anehnya, jika kita memilih salah satu thumbnails, tampilan list yang akan muncul, dan breadcrumb-nya juga menunjukkan bahwa kita sedang di bagian list. Jadi dari thumbnails, kembali lagi ke list. Sepertinya tidak berguna. Jika kita memilih thumbnails lagi, tampilan berubah menjadi icon-icon kembali. Menyesatkan.

Selanjutnya, bagian pencarian. Pengguna tidak bisa tahu pencarian dalam distribusi ini berdasarkan apa. Lokasi, nama atau apa? Misalnya pengguna memasukkan query “makassar”. Fatal sekali, halaman error. Sangat tidak memuaskan.

Gambar 9  tampilan error hasil pencarian pada halaman distribusi

• Halaman Peta Situs

Pada halaman ini lagi-lagi terjadi ketidakkonsistenan. Ketidakkonsistenan dalam hal perubahan warna link setelah dikunjungi. Gambar di bawah ini menjelaskan link mana saja yang berubah warna setelah dikunjungi dan yang tidak berrubah warna setelah dikunjungi.

Gambar 10  tampilan halaman peta situs

Garis bawah untuk setiap link juga tidak konsisten. Icon  1 dan 2juga tidak mempunyai arti. Semula saya mengira bahwa icon 1 memiliki makna bisa di-expand dan icon 2 memiliki makna sudah di-expand.

• Halaman Hubungi Kami

Gambar 11  tampilan halaman hubungi kami

Seperti pada umumnya, disediakan form untuk pengunjung dengan isian tertentu. Ada bebarapa yang harus diperhatikan.

1. Tidak ada info mengenai field mana saja yang wajib diisi.
2. Hal terpenting disini adalah tidak adanya validasi terhadap field-field isian. Seperti email, phone, fax.
3. Adanya tombol reset dan diletakkan berdampingan/berdekatan dengan tombol kirim, padahal dua tombol ini memiliki aksi yang saling berlawanan. Jika dilihat dari arah mouse yang akan terjadi, sepertinya pengguna akan mengunjungi tombol reset terlebih dahulu, setelah itu baru tombol kirim. Padahal task utama pengguna disini yaitu mengirimkan suatu pesan kepada PT. Vitapharm, bukan reset.
4. Tidak ada peringatan apabila seumpamanya pengguna tidak sengaja memencet tombol reset.
5. Tidak ada penanganan untuk pengguna di luar Indonesia. Sebagai contoh, jika memilih “United States” pada dropdown negara, tidak ada perubahan terhadap form. United States adalah negara yang mempunyai 50 negara bagian, mestinya setelah memilih United States, ada perubahan semisal keterangan kota berubah menjadi negara bagian.

Gambar di bawah ini menunjukkan tidak ada validasi terhadap isian dari masing-masing field.

Gambar 12  tampilan setelah pengguna memencet tombol kirim

Satu-satunya validasi disini yaitu pada saat kita hanya mengisikan pesan saja. Maka akan muncul pesan peringatan seperti gambar di bawah ini.

Gambar 13  pesan validasi

Tapi ini juga aneh, bagian pesan sudah diisi, tetapi mengapa peringatannya justru “pesan is required”?

Saya akan melakukan analisis usability terhadap website ini dengan tiga referensi yaitu lima komponen usability yang dikemukakan Jakob Nielsen, Jakob Nielsen’s Alertbox, 25-point website usability yang dibuat oleh Dr. Peter J. Meyers dari situs www.usereffect.com.

What is Usability?

Secara sederhana, Usability adalah ilmu yang membuat teknologi bekerja untuk manusia. Website usability adalah seni dan ilmu pengetahuan untuk membangun situs yang efisien, mudah digunakan, memenuhi harapan pengunjung, dan pada akhirnya membantu orang mencapai tujuan mereka.

Menurut Jacob Nielsen, usability adalah sebuah atribut kualitas yang menjelaskan atau mengukur seberapa mudah penggunaan suatu interface. Usability juga mengacu kepada metode untuk meningkatkan kemudahan penggunaan selama proses perancangan.

Why Does Usability Matter?

Usability yang buruk dapat mengusir pelanggan dan bisa disimpulkan menjadi hilangnya pendapatan. Satu studi menemukan bahwa sampai 60% dari pengunjung situs meninggalkan keranjang belanja mereka selama proses pembelian (MarketingSherpa.com, 2006). Usability yang kuat memungkinkan orang dengan mudah mencapai tujuan mereka, termasuk mencari informasi produk, meminta penawaran, atau melakukan pembelian.

Pertama, saya akan menganalisis bagian menu utama. Kedua saya akan menganalisis bagian menu navigasi. Setelah ke dua hal tersebut selesai dilakukan, selanjutnya saya akan membuat penilaian berdasarkan lima komponen usability yang dikemukakan Jakob Nielsen, Jakob Nielsen’s Alertbox, 25-point Website Usability.

Tapi ini masalahnya, cuma karena film. Bandingkan kasih dengan film? Wew, film yang menang. I don’t really understand. Pernah denger istilah “white lie”? Mending saya di white lie daripada harus sejujur itu bilang lagi asyik nonton tivi (PS: Gue nulis sms 2 halaman, dan dapet balesan seperti itu).

Well, saya harap cuek itu masih hak paten-nya si bebek

Lucuuu banget kan. Salut deh buat masova, good job, love it

Tipe pengguna selanjutnya yang akan saya bahas adalah Customer. Bingung sih sebenarnya. Kenapa? Karena pada situs ini sepertinya Customer = Transactor, karena transactor harus login dahulu sebelum bertransaksi, dan begitupun customer, sudah pasti harus login. Lalu apa keuntungan yang bisa didapat oleh customers dari situs ini? Apa keuntungan customer = keuntungan transactor? Oke, let’s start the analyze.

Untuk memulainya, saya pake acuan Submit Now – Andrew Chak secara eksplisit. Hehe sebenarnya, dari evaluator sampai transactor juga pake acuan ini, Cuma secara implisit :-p

Lihatlah gambar ini, biar ga ribet . Gambar ini merupakan gambaran umum, “how the customer looks like”.

Give me a reason to do businnes with you again

Ini nih yang menarik. Apa alasannya saya harus kembali ke toko ini untuk kembali berbelanja?

1.  I want to receive special deals and perks

On hand Ahad, tanggal 13 Maret 2011 saya mendapatkan newsletter dari situs ini yang berisikan informasi diskon produk tertentu.

2.  I have a VIP pass for identification and access to special areas

Ini mah setuju banget. Situs ini tuh lebih ramah untuk customer atau transactor. Bukti pertama, setelah saya login jadi bisa klik kanan, walaupun kalau balik lagi ke halaman Home balik lagi ga bisa klik kanan.

Bagian kotak merah menunjukkan area istimewa yang dapat diakses oleh seorang customer.

3.  I wanna know the status of my orders

Ada. Status pemesanan ditampilkan.

————————————————————————————————————————————————–

————————————————————————————————————————————————–

The Online Receipt

Setelah saya mendaftar, ada confirmation page ke email saya. Tapi itu bukanlah suatu confirmation email.

Fix-It-Yourself Transactions

• Situs ini menyediakan informasi untuk membantu customer dalam proses bertransaksi. Ada informasi perjanjian transaksi dan informasi pengiriman produk.

• Pembatalan order dapat dilakukan dengan syarat barang belum dikirim, hanya dapat dilakukan via telepon, dan pembatalannya dikarenakan kenaikan harga, stok habis, atau kesalahan spesifikasi produk. Ketentuan ini terdapat pada Perjanjian Transaksi poin ke tiga. Perjanjian transaksi terdapat pada menu kiri bawah, pada bagian INFORMASI terdapat link “agreement”

• Setelah saya membaca informasi tentang aturan-aturan yang berlaku di shopping online ini, sepertinya tidak ada kebijakan pertukaran dan pengembalian barang. Disini hanya dijelaskan perihal garansi barang.

• Ada kontak untuk menghubungi customer service dari shopping online ini, yaitu chat, nomor telepon, pin BB, dan form hubungi kami.

• Tracking barang masih samar-samar disini. Karena saya belum melakukan pembayaran. Sebenarnya, saya itu belum menerima nomor rekening dari shopping online ini. Saya hanya menerima email berisi proses pemesanan. Disitu tertera bahwa nomor rekening akan dikonfirmasikan melalui email dan lakukan pembayaran setelah dikonfirmasikan besarnya ongkos kirim.

Setelah tiga jam, ada email masuk lagi. Isinya perihal ketersediaan barang, harga promosi dan waktu pengiriman.

Saya bingung, kenapa pengirimannya tanggal 1 April 2010? Ini informasi menurut sya sangat penting, tapi kenapa masih saja ada kesalahan tidak penting seperti ini? Sangat menyebalkan. Dengan adanya kesalahan ini berarti saya harus menghabiskan waktu untuk bertanya, entah itu lewat email, chat, BBM, atau telepon. Grrrr, saya ini customer, ingin dilayani dengan sebaik-baiknya (kan biasanya customer itu jutek, kaya ilustrasi gambar di awal :p)

• Histori pemesanan disediakan pada link Account Saya –> Lihat pesanan yang telah dibuat atau Account Saya –> Tampilkan Semua Pesanan. Histori pemesanan juga ditempatkan pada area pojok kanan atas dan posisi ini static (ada terus anytime anywhere).

Cara 1

Cara 2

• Form login tidak langsung nampak pada situs ini. Jadi melalui link “Account Saya” terlabih dahulu.

Setelah di-klik “Acoount Saya”

Fasilitas logout juga tersedia. Terletak pada area yang statis, pada menu atas.

Setelah kita melakukan logout, maka akan muncul pesan konfirmasi.

Oh ya, bagaimana kalau saya lupa password?

Ada fasilitas “Lupa Password” di bawah form login.

Lalu klik link tersebut, maka kita akan diminta memasukkan email.

Klik “Lanjutkan”.

Mari cek email

Setelah itu saya login dengan password yang baru, dan sukses

• Session diterapkan untuk situs ini. Saya mencoba membuka dua tab (status saya sedang aktif/login), lalu di salah satu tab, saya lakukan signout dan berhasil. Lalu saya tutup tab-nya. Di tab yang satunya lagi, saya coba mengakases salah satu menu untuk user yang sudah login, ternyata tidak bisa, saya diarahkan ke halaman login kembali.

• Pada situs ini, customer disediakan fasilitas untuk mengubah akun.

• Customer bisa memilih apakah ingin subscribe newslatter atau subscribe newslatter.

• Customer dapat melihat daftar belanjaan dengan mudah lewat link “Keranjang Belanja”

My Words:

Cukup bagus fasilitas yang diberikan situs ini untuk tipe pengguna Customer. Tapi saya rada jengkel juga waktu ada kesalahan pada tanggal pengiriman barang, padahal sepele, tapi itu krusial sekali. Saya rasa untuk situs e-commerce profesional tidak seharusnya ada kesalahan kecil semacam tadi. Lalu, yang saya sesalkan, kenapa pengirimannya lama sekali, hampir 15-17 hari. Itupun tidak jelas 15-17 hari kerja atau bagaimana, jika memang tidak ready saat ini, alangkah baiknya kalau diberitahukan sebelumnya bahwa barang ready pada tanggal/bulan apa. Lalu tidak ada kejelasan masalah nomor rekening dan ongkos kirim.

Oh ya, disini bisa saya simpulkan bahwa customer = transactor.

Selanjutnya analisis untuk tipe pengguna Transactor. Kalau berbicara mengenai transactor, saya paling ingat bahwa pakemnya adalah “Membership is not Required”, Don’t force your users to register or create an account with you just to make a purchase. Memang jengkel kadang-kadang kalau cuma mau beli baterai modem 1 biji saja harus menjadi member *tepokjidat.

Ya sudah, lanjutin postingan tentang evaluator, my decision was Mamas and Papas Urbo in Stone. Langsung ke halaman pembelian.

Tuh kan vertical scrolling-nya terlalu banyak. Sedangkan tombol “Simpan ke Keranjang” terletak paling bawah. It means, menambah pekerjaan pengguna. Just remember,  Make user’s transactions quick. Gambar-gambar penunjang sepertinya bisa dijajarkan secara horizontal, agar tidak terlalu banyak whitespace. Selanjutnya, tekan tombol “Simpan ke Keranjang”.

Lalu, tiba-tiba terbersit di benak saya “Wah si Anthy kan kemarin baru saja melahirkan, ngadoin stroller aja deh, kembaran aja, biar seru”. Okay saya putuskan untuk membeli stroller tersebut sebanyak dua buah. Saya ubah bagian pcs menjadi 2.

Untuk mempercepat pembelian, saran saya kolom Total sebaiknya bisa langsung berubah ketika ada perubahan pada input box pada kolom pcs. Lebih efisien sepertinya, jadi pengguna tidak perlu melakukan update secara terus menerus.

Lalu saya kembali berpikir “Wah kalo strollernya sama persis, ga asik juga, nanti monoton”. Ok, model sama, warna bedain. Tanpa pikir panjang, saya centang checkbox pada kolom Hapus, lalu klik tombol “Lanjutkan Belanja”. Ke menu kiri, cari merek Mamas and  Papas, click it. Cari model yang sama, ketemu –> Mamas and Papas Urbo in Lavender, nice color by the way.

Sip, klik “Beli”. Dan keranjang belanja saya bertambah. So far, nice flow.

Well, selesaikan proses ini. Klik tombol “Selesai Belanja”. Ternyata harus login . Yup seperti yang saya utarakan di awal, jangan paksa pengguna untuk registrasi hanya karena mereka ingin membeli. Jengkel, walaupun sekarang kasusnya bukan baterai modem.

Terpaksalah saya pilih “Lanjutkan” pada bagian Pelanggan Baru. Seperti yang sudah-sudah, isi form.

Lalu klik Lanjutkan.

Klik lanjutkan lagi

Klik Lanjutkan lagi.

Kok tidak ada nama saya ya? Perubahannya hanya ada tambahan link Sign Out. Walah, tidak seperti biasanya ini. Lalu saya bingung, saya kan membeli dua baby stroller, satu buah untuk saya, satu lagi untuk kado. Bisakah dua item ini dikirim sekaligus ke dua alamat yang berbeda? Sepertinya tidak. Tapi lebih baik dicoba dulu. Klik tombol “Rubah Alamat” (maksudnya “Ubah” mungkin ya). Lalu saya diminta mengisi form untuk alamat yang akan dituju. Lalu saya klik lanjutkan.

Yup, benar. Tidak mendukung multiple address dalam satu waktu. Ya sudah deh, balik lagi, kirim ke alamat saya saja. Ubah alamat lagi. Ada pilihannya, jadi saya tinggal memilih saja. Oh ya, saya rasa kotak untuk alamat email dan nomor handphone itu terlalu besar, memakan banyak tempat.

Lalu lanjutkan. Sekarang saya berada di halaman Informasi Pembayaran. Toko online ini melayani dua metode pembyaran yaitu transfer bank dan paypal. Tetapi disitu tertulis, bahwa jika pembayaran menggunakan paypal, mata uang harus diganti ke $US. Jika saya ingin membayar dengan paypal, dimanakah saya harus mengkonversi mata uang? Dari halaman Informasi Pembayaran, tidak ada tanda-tanda ada fasilitas untuk konversi mata uang. Tapi saya pernah liat itu sewaktu pertama mengunjungi situs ini.

Lalu saya coba kembali ke halaman Home/Katalog. Saya klik kanan pada link Home/Katalog, loh kok bisa? Padahal sewaktu pertama tadi, klik kanan tidak bisa dilakukan. Saya coba lakukan klik kanan untuk menu lain, ternyata bisa juga. Oh saya sadar, mungkin karena saya sudah login. Hmm, betul-betul, situs ini tidak ramah untuk tipe pengguna Browser dan Evaluator (mungkin juga transactor, apabila keanggotaan bukan menjadi persyaratan). Pada halaman ini muncul nama saya, ok nama hanya muncul pada halaman Home saja. Lalu saya lihat pada bagian bawah, fasilitas konversi mata uang itu tersedia. Well, cukup membingungkan.

Lalu saya ubah mata uang menjadi US Dollar. Lalu saya kembali ke keranjang belanja. Saya klik kanan link Keranjang Belanja, dan tidak bisa lagi. Muncul dialog box seperti yang sudah-sudah. Apa maksudnya ini, saya sungguh tidak mengerti. Prosesnya berulang lagi. Saya harus mulai dari halaman “Apa saja isi keranjang belanja saya?” –> “Informasi Pengiriman” –> “Informasi Pembayaran”.

Ada langkah-langkah prosedur, yang mengindikasikan keberadaan saya saat ini. Dan saya juga bisa kembali ke halaman Informasi Pengiriman sebelumnya. Indikator ini cukup jelas menurut saya.

Lalu klik lanjutkan. Masuk ke halaman Konfirmasi Pesanan.

Dalam halaman ini, alamat pengiriman, produk, metode pembayaran dapat diubauh kembali. Dan mata uang sudah berubah menjadi US Dollar. Klik Confirm Order.

Saya diarahkan ke halaman dari paypal dan diharuskan mengisi form-form yang dibutuhkan untuk melengkapi persyaratan. Karena ini hanya pura-pura (dan saya tidak punya paypal), sampai disini saja

Lalu saya mencoba menggunakan metode pembayaran transfer bank. Situs ini hanya melayani untuk dua bank konvensional, yaitu Mandiri dan BCA. Tapi setelah saya mengganti dengan transfer bank, mata uangnya tidak otomatis berubah. Saya harus kembali ke Home, konversi mata uang, dan seterusnya.

Karena saya malas mengkonversi mata uang, saya langsung melakukan confirm order.

Klik lanjutkan. Saya dibawa ke halaman Home. Selanjutnya, mari cek email.

Tunggu email deh (skip saja bagian ini).

Lalu bagaimana kalau saya mau membeli, tapi tidak untuk saat ini alias wishlist? Kalau dilihat dari keseluruhan, situs ini tidak mendukung fasilitas wishlist. Sepertinya lebih baik ada fasilitas wishlist, agar memudahkan pengguna untuk menyimpan history dari item yang diinginkan dan tidak perlu secepatnya malakukan pembayaran.

Oh ya, pada situs ini juga menyediakan fasilitas request produk tertentu.

Setelah diklik

KESIMPULAN:

1.      Tombol beli sudah ada pada setiap produk.

2.      Penempatan kontak konsisten pada setiap halaman, yaitu pada area kiri bawah.

3.      User bisa melihat keranjang belanjanya dan melakukan checkout kapan saja.

4.      Penempatan login hanya pada halaman Home. Jadi kalau user ingin login, ya harus ke halaman Home terlebih dahulu.

5.      Pada situs ini tidaka ada pengelompokkan kategori. Baik itu whitespace sebagai pembeda atau label untuk mengetahui termasuk bagian manakah produk baby ini (apakah transport, permainan, dan lain-lain)

6.      Ada fasilitas search untuk membantu user dalam menemukan item yang diinginkan.

7.      Pada situs ini, membership is required.

8.      Situs ini hanya melayani pembelain online. Tidak memiliki “real store”.

9.      Ada dua metode pembayaran yang berlaku di situs ini yaitu melalui transfer bank (BCA dan Mandiri) dan paypal.

10.  Ada informasi diskon. Tapi sayang, berbentuk teks berjalan (running text).

11. Privacy Policy nampak setelah diarahkan ke halaman pembayaran.

12.  Ada konfirmasi email setelah user menyelesaikan transaksi.

13.  User bisa merequest pada toko ini untuk produk yang belum tersedia.

My Words:

Fasilitas login menurut saya ini kurang baik penempatannya, karena ingat “It all starts at home”. Lebih baik login ditempatkan pada area yang dapat dijangkau anytime and anywhere. Dan sebaiknya form dari login itu langsung ditampilkan di awal, bukan hanya sebuah link login, karena user harus bekerja lagi untuk mengklik link tersebut untuk menemukan form login. Untuk informasi diskon, tidak perlu berbentuk running text seperti itu, sudah ganti zaman. Jika ingin menarik perhatian, besarkan saja hurufnya, atau kontras dengan cara lain. Karena sejujurnya, tadinya saya tidak begitu peduli dengan bacaan pada running text tersebut, padahal informasi diskon itu sangat menarik untuk user yang mau membeli.

EVALUATOR

Kasus disini ceritanya saya ingin membeli baby stroller di salah satu shopping online dan ingin melakukan komparasi terlebih dahulu. Saya sudah mempunyai daftar kriteria baby stoller yang saya inginkan. Kriteria-kriteria tersebut antara lain modelnya simpel, harga kisaran 5 juta, warnanya tidak neko-neko, kap tahan air dan bobotnya ringan.

Lalu saya mengunjungi www.is****b***.com. Wah tepat sekali, pada halaman Home/Katalog dari situs ini menampilkan update produk terbaru untuk bulan Maret yang ternyata baby stoller. Setelah melihat sepintas, sepertinya ada baby stoller yang pas dengan kriteria yang saya inginkan. Baby stroller yang saya maksud yaitu stroller dengan merek  Mamas and Papas Urbo in Stone, harga Rp. 5.490.000. It is so simple, dilihat dari warnanya, dan juga harganya pas dengan bujet. Well suited

Tapi saya ingin mencari-cari tipe lain selain yang saya suka itu. Lalu saya berpikir untuk ke halaman katalog baby stroller, dengan harapan bisa puas mencari stroller yang lain yg sesuai dengan keinginan, dan mungkin harganya lebih murah *amiiin.

Beralihlah saya ke menu kategori sebelah kiri.

Wah bingung juga melihat begitu banyak kategori yang disediakan. Hmm, karena saya tidak mau repot mencari, maka saya gunakan jurus ctrl+f untuk menumukan kategori stroller. Ketemu link baby stroller yang saya inginkan (dalam hati komat kamit –> Alhamdulillah ada ctrl+f). Pertama saya berpikir, bahwa sorting kategori tersebut berdasarkan abjad, tapi setelah saya mencoba menulusuri dari atas ke bawah, ternyata tidak sesuai abjad. Maka dari itu jurus ctrl+f memiliki kontribusi tersendiri bagi saya

Lalu saya klik kanan link stroller tersebut (karena saya terbiasa menggunakan klik kanan untuk membuka link), lalu apa yang terjadi? Muncul dialog window. Ya ampun, ada apakah ini? Saya merasa telah membuat kesalahan. Lalu saya membaca tulisan pada dialog window tersebut. Well, isinya “Mohon hubungi kami jika anda berminat dengan properti kami”. Wow! Setelah itu saya berasa dituduh sebagai orang yang mau mencuri, haha. But it’s okay, akhirnya saya meng-klik link tersebut.

Setelah itu, saya melihat banyak merek-merek baby stroller yang ditampilkan. Nah ini baru mereknya terurut berdasarkan abjad. Oh ya, saya lupa, merek yang cocok sewaktu sya berada di halaman Home apa ya? Lalu saya scrolling ke bawah, ternyata disini ada juga info update terbaru tentang stroller yang ada di halaman Home . Merek yang saya cari itu adalah Mamas and Papas. Langsung meluncur ke TKP.

Eh sebentar, saya baru sadar ketika link stroller di-klik, maka pada menu kiri tersebut akan berubah dengan  memunculkan merek-merek dari stoller. Hmm, kenapa ga dari awal saja ya? Atau dibuat menu drop ke samping (kaya dropdown menu, tapi ini ke samping). Entahlah.

Saya buka link Mamas and Papas (lagi-lagi karena terbiasa, saya kembali melakukan klik kanan), and guess what? Hal yang tadi terjadi terulang kembali, dan saya sungguh kesal. Saya tiba-tiba berpikir, pesan yang terkandung pada dialog window yang muncul itu kok sepertinya tidak ada hubungannya dengan tujuan saya ingin membeli barang atau tidak. Ini kan situs online, kenapa ya jika ada dialog box seperti itu kesannya user dibatasi dalam melakukan suatu aktifitas tertentu. Kritaria minat pembeli apa yang hendak dituju untuk website ini? Agak menyulitkan rasanya jika klik kanan saja tidak diperkenankan *sigh.

Okay, lanjut. Klik link Mamas and Papas. Saya melihat sekilas, lalu saya mencari-cari, dimanakah Mamas and Papas Urbo in Stone? Ketemu, di bagian paling bawah. Pada tampilan di halaman ini tidak disediakan fasilitas untuk mambandingkan (product comparison) antara item yang satu dengan item yang lain. Lalu kenapa produk -produk disusun dari atas ke bawah? Terlihat banyak whitespace jika disusun seperti itu. Ada 20 item, bisa memakan 7-8 kali vertical scrolling untuk worst case produk yang dicari terletak paling bawah (seperti saya ini). Sepertinya lebih baik ika disusun dari kiri ke kanan. Lebih hemat tempat dan juga mengurangi eye movement rasanya. Kemudian tidak ada resume sedikit mengenai produk yang ditampilkan tersebut. Menurut saya sih, daripada whitespacenya kebanyakan, lebih baik diisi dengan review sekilas tentang produk tersebut. Lalu tidak ada pilihan sorting berdasarkan harga, tipe, dan sebagainya. Cukup repot apabila orientasi pencarian kita adalah harga.

Ok, klik  Mamas and Papas Urbo in Stone. Yang saya amati pertama adalah gambar dari stroller Stones yang berada pada pojok kanan. Ketika saya klik link New Window (dengan harapan gambar yang ditampilkan akan lebih besar dan dapat dengan jelas terlihat), ternyata gambarnya tetap segitu (ukurannya masih kecil) tanpa ada perubahan yang berarti *fiuh. Padahal dibawah juga ada gambar yang lebih besar yang lebih jelas terlihat. Menurut saya, gambar di pojok kanan dan link New Window itu useless. Kemudian saya mulai membaca informasi-informasi mengenai strolle Stone ini. Wah menarik, ada informasi “Why Buy Me“. Disitu diinformasikan bahwa beratnya 9 kg (cukup berat). Lalu ada informasi “Features & Benefits”. Baik sekali, karena ini termasuk informasi penting. Di bawahnya ada informasi bahwa pembelian termasuk Chassis, unit tempat duduk, tudung yang bisa dilepas dan penutup hujan deluxe. Saya rasa, informasi yang disajikan disini cukup komplit. Lalu apabila saya scroll ke bawah maka akan ada gambar-gambar penunjang lain yang menurut saya bermanfaat. Terlihat bagaimana bentuk stroller ketika tampak samping, ketika chassis diturunkan, dan ketika stroller dilipat, Nice ^_^. Tapi, ada yang aneh, masa gambar hood/tudung stroller-nya beda dengan yang diawal? *nah loh. Okay, sebenarnya ini sudah mencakup kriteria yang saya utarakan di awal, namun bagi saya terlalu berat. Berinisiatiflah saya untuk mencari merek lain.

Karena tidak ada fasilitas compare dan stroller dengan merek yang sama dikelompokkan menjadi satu bagian, maka rencananya, saya akan membuat tab baru dan mulai menulusuri stroller yang hampir sama dengan Stone tetapi memiliki berat yang lebih ringan. Lalu, saya beralih ke menu kiri, dan yang saya lupa bahwa disini klik kanan itu tidak bisa. Ealah, bagaimana caranya saya tetap bisa membuka halaman detail stroller Stone ini, tapi saya juga ingin membuka halaman stroller dengan merek yang lain? Fiuh, dengan berat hati saya mambuka tab baru di browser, lalu kembali mengetikkan www.is …….. Alhamdulillah ada history-nya, jadi langsung muncul, langsung klik. Ke menu kiri lagi, cari link stroller lagi pake ctrl+f , klik link stroller, muncul berbagai merek, lalu saya putuskan untuk membandingkan stroller merek Mamas and Papas Urbo in Stone dengan merek stroller Maclaren. Klik link Maclaren.

Lucky Me Hanya ada satu item, dan itu cocok sekali harganya. Begitupun warnanya. Sekarang coba lihat halaman detailnya. Let’s go click on it!

Kok hanya segini saja informasi yang disediakan? Apakah memang dari situs resminya tidak menyediakan info yang lebih detail daripada ini? Beda sekali dengan Mamas and Papas Urbo in Stone tadi. Tidak ditampilkan pula gambar-gambar penunjang yang lain. Kalau begini mari cari perbandingan lagi. Let’s go surfing, because I have comfortable shoes and still wanna walk around to find the information I need

Ulangi lagi. Buka tab baru, ketik www.is ……., klik url lengkapnya, ctrl+f stroller, klik link stroller (berapa banyak menu tab di browser saya kalo begini caranya?), lalu saya memilih merek Aprica. Klik Aprica, banyak sekali pilihannya.

Karena ada pertimbangan bujet, saya langsung fokus pada harga (coba ada filter menurut harga). Langsung saya tertarik dengan Aprica Stick Flat in Black.

Tanpa casciscus, langsung klik. Lengkap. Itu yang saya lihat. Informasi yang ditampilkan hampir sama dengan Mamas and Papas Urbo in Stone. Informasi cukup detail, dan ada gambar-gambar penunjang. Bahkan Aprica lebih baik, gambarnya menggunakan model beserta bayinya. Cool. Tapi sayangnya, tidak ada infrormasi bahwa tudung/hood dari stroller itu tahan air.

Well, finally the decision is Mamas and Papas Urbo in Stone

———-Done, Evaluator task is Finished———-

Kesimpulan:

1. Menu kategorinya terlalu banyak, sulit untuk menemukan link produk tertentu, karena tidak ada pengurutan yang spesifik.
2. Disable klik kanan merupakan suatu keputusan yang kurang bermanfaat, karena user (khususnya browser dan evaluator) terlalu dibatasi karena hal ini.
3. tidak didukungnya perbandingan belanja.
4. Tampilan gambar produk disusun dari atas ke bawah, itu sangat boros tempat dan membutuhkan scrolling yang lumayan.
5. Informasi-informasi penting seperti fitur produk, keunggulan produk dan lain-lain ditampilkan secara tidak konsisten untuk masing-masing produk yang tersedia. Padahal informasi-informasi tersebut merupakan elemen yang penting untuk suatu produk.
6. Masalah gambar juga tidak konsisten, dibeberapa halaman ada yang menyediakan gambar dengan kualitas yang bagus dan detail. Tapi, dibeberapa halaman yang lain yang saya amati, hanya ada satu gambar dan itupun kecil, dan fungsi new window pun tidak menjadi berguna karena gambar tidak menjadi lebih besar.
7. Fasilitas filter untuk membedakan produk dengan kriteria tertentu tidak semua tersedia. Pada produk stroller tidak ada filter untuk merek (karena dari awal sudah dikelompokkan berdasarkan merek), tapi untuk produk lain, misal baby bag, fasilitas filter berdasarkan mereak ada (karena di awal tidak dikelompokkan berdasarkan merek).
8. Selain tidak ada perbedaan, tidak ada fasilitas untuk menampilkan produk yang model atau fiturnya hampir sama. Setiap produk dikumpulkan menjadi satu grup berdasarkan merek.
9. Tidak ada ranking produk untuk masing-masing produk. Ranking produk mungkin dapat digunakan untuk membandingkan produk berdasarkan pilihan banyak orang.
10. Perihal keamanan transaksi tidak dipaparkan.

1. Harga sudah ditampilkan pada setiap produk yang ada.
2. Sudah menggunakan gambar untuk membedakan produk (misal produk sejenis tapi berbeda warna).
3. Informasi kontak (seperti YM, nomor telepon, pin BB) ditampilkan.
4. Ada penjelasan bagaimana proses pengiriman dan perjanjian transaksi. Tapi tidak ada privacy policy.

My Words:

Sebagai evaluator untuk situs e-commerce ini, sungguh sangat menyebalkan. Trully, jika saya benar-benar ingin mencari sebuah baby stroller dan ingin membandingkan antar produk yg ada, toko online ini pasti saya tinggalkan. Bagaimana tidak, situs ini sungguh menguras ingatan saya –> ONLY 1 item in  1 time. Klik kanan saja tidak bisa. Apa yang membuat mereka berpikir bahwa disable klik kanan itu dapat menguntungkan mereka?  Tidak membantu sama sekali. Perlu diperhatikan bahwa klik kanan itu menurut saya suatu kebiasaan yang sulit untuk diubah (kerena saya terus-terusan klik kanan walaupun saya tahu kalau itu tidak bisa). Big Question Why.

Oh ya, menurut saya, untuk situs ini, lebih baik ada fasilitas untuk memvisualisasikan konteks. Misalnya saja seperti situs http://www.us.maclarenbaby.com/from-birth/techno-xlr. Sepertinya multimedia akan menguntungkan pengunjung.

Fiuh akhirnya pagi ini saya memutuskan untuk menyelesaikan tugas KomGraf. Okay dokay, harus semangat, ga boleh loyo, walaupun kepala agak sedikit berputar-putar T_T

Lanjut dari postingan kemarin, sekarang saya akan melanjutkan Clipping Polygon dan contoh kasusnya. Saya akan menggunakan algoritma Sutherland-Hodgman dalam hal ini.

Polygon adalah bentuk yang disusun dari serangkaian garis. Titik sudut dari polygon disebut vertex dan garis penyusun polygon disebut edge.

Poligon dapat dipotong terhadap setiap edge polygon tersebut yang melewati clipping window. Jika ada perpotongan pada edge dan koordinat X dan Y sudah diketahui, maka mudah untuk menemukan dimana titik perpotongan tersebut. Verteks yang disimpan setelah perpotongan akan menjadi titik perpotongan untuk edge yang berada di luar clipping window, dan edge yang berada di luar clipping window tersebut akan dipangkas. Nilai dari verteks sebenarnya biasanya berubah setelah menemukan verteks perpotongannya.

Dibawah ini merupakan contoh penyelesaian untuk polygon clipping menggunakan algoritma Sutherland-Hodgman.

Keterangan Gambar :

Jika melihat dari gambar, maka akan ada 8 titik perpotongan yang akan terjadi. Pada clipping window sebelah kiri akan dihasilkan 2 titik baru yaitu titik perpotongan antara A-B dan titik perpotongan antara A-D. Lalu pada clipping window sebelah bawah akan ada 2 titik baru pula yaitu titik perpotongan antara D-A dan titik perpotongan antara D-C. Begitu juga dengan clipping window sebelah kanan yaitu titik perpotongan antara C-B dan titik perpotongan antara C-D. Lalu terakhir, pada clipping window sebelah atas yaitu titik perpotongan antara B-A dan titik perpotongan antara B-C.

Di bawah ini merupakan langkah-langkah untuk menentukan 8 titik perpotongan yang telah diuraikan di atas tadi.

Interseksi Bagian Bawah

• Mencari titik potong antara D dan A (perpotongan edge pada sisi bawah pada clipping window)

Mencari Slope

Maka lokasi perpotongan edge pada sisi bawah window antara D dan A adalah:

• Mencari titik potong antara D dan C (perpotongan edge pada sisi bawah pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi kanan window antara D dan C adalah:

Interseksi Bagian Kanan

• Mencari titik potong antara C dan B (perpotongan edge pada sisi kanan pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi kanan window antara C dan B adalah:

• Mencari titik potong antara C dan D (perpotongan edge pada sisi kanan pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi kanan window antara C dan B adalah:

Interseksi Bagian Atas

• Mencari titik potong antara B dan A (perpotongan edge pada sisi atas pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi atas window antara B dan A adalah:

• Mencari titik potong antara B dan C (perpotongan edge pada sisi atas pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi atas window antara B dan A adalah:

Interseksi Bagian Kiri

• Mencari titik potong antara A dan D (perpotongan edge pada sisi kiri pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi kiri window antara A dan D adalah:

• Mencari titik potong antara A dan B (perpotongan edge pada sisi kiri pada window)

Mencari Slope

Maka lokasi perpotongan pada edge pada sisi kiri window antara A dan B adalah:

Alhamdulillah..
Akhirnya selesai juga tugas Clipping saya. Cape.
Sekian dulu ya postingan dari saya, semoga bermanfaat. Ciao…