• Tugas IMK: Antarmuka Website yang Kurang Efisien

    Date: 2010.09.19 | Category: Uncategorized | Tags:

    Postingan saya kali ini bertujuan untuk memenuhi tugas Interaksi Manusia & Komputer (IMK), yaitu menilai tampilan sebuah website.  Saya akan mengulas mengenai website sepatu remaja yang sudah sangat terkenal & banyak digemari, yakni http://goshshoes.com/.  Tampilan awal website ini adalah sebagai berikut:

    Kesan pertama pada saat saya membuka website ini, tampilannya yang serba pink, girlie dan cukup simpel sangat sesuai dengan kepribadian remaja putri pada umumnya.  Sayangnya, tampilan halaman awalnya kurang efisien atau bisa dibilang sedikit boros waktu dimana user harus meng-klik gambar hati bertuliskan Gosh untuk dapat masuk ke halaman berikutnya.  Selain itu, awalnya saya juga tidak menyadari kalau ternyata tulisan Rotelli dan Bellagio dibawahnya itu juga merupakan tombol yang berisi link menuju halaman website produk lain.  Hal tersebut dikarenakan tulisan Rotelli & Bellagio itu tidak terlihat seperti tombol, hanya seperti tulisan biasa.

    Setelah kita klik gambar hati bertuliskan Gosh tersebut, maka akan muncul halaman berikut ini:
    • Halaman tersebut dimaksudkan untuk memperkenalkan model sepatu terbaru kepada pelanggan.  Di sebelah kanan terdapat menu scroll ke bawah (yang tidak terlalu terlihat jelas oleh user) dan saat kita scroll ke bawah hanya terdapat tambahan tulisan:
    “Special Price
    Summer collection with special price”

    • Hal ini menunjukkan bahwa menu scroll ke bawah itu tidak penting.  Sebenarnya bisa saja tulisan singkat itu diletakkan di space kosong disamping gambar sepatu sehingga menu scroll ke bawah dapat dihilangkan.  Hmm, tampaknya dibutuhkan kesabaran untuk mencapai halaman utama.  Mau tidak mau, saya harus mengklik tombol close untuk menuju halaman berikutnya.  Setelah itu saya masih harus menunggu loading selama +/-  8 detik (itupun kalau koneksi internetnya lancar) untuk menuju halaman berikut ini:
    • Gambar sewaktu menunggu loading:
    • Halaman utama yang ditampilkan setelah selesai loading:

    Pada halaman utama ditampilkan hati yang dikelilingi oleh 10 berlian yang berputar-putar.  Ternyata hanya 5 diantara 10 berlian tersebut (berselang-seling) yang dapat di klik untuk menuju menu yang diinginkan user.  Selain itu, ada hal yang kurang efisien dimana untuk memilih menu yang diinginkan, user harus mengecek tombol berlian tersebut satu-persatu karena tidak ada tulisan jika kursor tidak diarahkan ke berlian tersebut.

    Ternyata ekstra kesabaran sangat diperlukan untuk melihat berbagai koleksi sepatu dan tas  beserta harga & pilihan warna yang tersedia.  Coba perhatikan tanda panah merah pada gambar diatas.  Ketika kursor diarahkan ke salah satu berlian, muncul  tulisan berwarna putih dan relatif kecil, serta kurang kontras dengan latar belakangnya sehingga kurang jelas terlihat oleh user.

    Kelima menu yang terdapat pada berlian yang berputar  dan bisa di klik diantaranya: contact, collection, boutique, company, dan newsletter.

    1. Saat mengklik contact, akan tampil halaman seperti berikut:

    • Sekilas tulisan diatas tidak jauh berbeda satu sama lain, karena berwarna putih semua.  Ternyata tulisan Contact Form yang terletak di paling bawah merupakan link untuk menuju halaman lain.  Menurut saya, hal ini membuat user sulit untuk membedakan tulisan mana yang berupa tombol dan mana yang bukan.
    • Jika tulisan Contact Form di klik, maka tampilan yang muncul adalah seperti berikut:
    • User dapat mengirimkan pesan ke customer service melalui layanan ini.  Saya tidak menyangka dalam  halaman yang terlihat sederhana ini, ternyata terdapat 8 tombol yang dapat di klik.
    • Tombol hati disebelah kanan atas yang saya beri tanda panah hitam adalah tombol menuju halaman utama.  Sedangkan 5 berlian yang saya beri panah kuning adalah tombol untuk memilih menu yang diinginkan user.
    • Dua tombol yang saya beri panah hitam (terletak dibawah) adalah tombol submit dan back.  Ketika kursor diarahkan ke tombol submit, tidak terjadi perubahan warna ataupun ukuran tombol sehingga kurang menunjukkan ciri sebuah tombol.  Awalnya, saya kira berlian dibawah tulisan back hanya hiasan yang tidak bisa di klik seperti halnya berlian dibawah tulisan contact yang memang hanya hiasan semata.  Ternyata jika ingin kembali ke menu sebelumnya, user harus meng-klik berlian itu.  Menurut saya tampilannya pada halaman ini kurang sesuai dengan apa yang dipikirkan user (non-affordance)


    2.   Saat meng-klik collection, akan tampil halaman seperti berikut:

    Pada halaman sebelumnya, kita menemukan bahwa berlian yang saya beri tanda panah hitam berfungsi sebagai tombol back. Namun tidak demikian pada halaman ini, padahal user sudah memiliki ingatan bahwa bentuk berlian merupakan tombol back, sehingga terjadi ketidakkonsistenan.  Misalkan user meng-klik tombol shoes, maka akan ditampilkan seperti dibawah ini:

    • Berbagai jenis sepatu akan berjalan dr kiri ke kanan atau sebaliknya, tergantung mouse digerakkan kearah mana.  Bila user mengarahkan kursor pada gambar sepatu yang ingin di-klik, maka gambar sepatu tersebut sedikit membesar dan warna yang timbul justru lebih buram diantara sepatu-sepatu lainnya.  Menurut saya, mungkin lebih enak dilihat jika yg buram itu adalah sepatu lain disebelahnya, bukan sepatu yang akan dipilh user untuk di klik.  Setelah gambar sepatu di-klik, akan muncul halaman berikut:

    Sekilas, user melihat ada 4 tombol yang bisa diklik, namun kenyataannya hanya 3 tombol yang bisa di klik.  Detail, color, dan back adalah tombol, sedangkan shoes bukan tombol.  Warna tulisan memang sudah dibedakan (shoes berwarna hitam, 3 lainnya berwarna merah), namun yang membuat sangat nirip adalah berliannya.

    3. Saat meng-klik boutique, maka akan ditampilkan:

    Tulisan berwarna putih yang saya lingkari itu tidak terlihat dengan jelas apalagi terbaca.

    4. Saat meng-klik  company, maka akan ditampilkan:

    Terlalu banyak tombol yang harus di klik dari halaman utama menuju halaman ini.  Terlebih lagi pada halaman ini, user disajikan 2 tombol (history & design)  yang tidak terlalu diperlukan.

    Misalnya, pada saat user meng-klik tombol history, informasi yang disajikan sangat singkat, sehingga untuk menghemat waktu bisa saja informasi mengenai history maupun design disatukan dalam satu halaman sehingga user tidak perlu terlalu banyak mengklik tombol.  Selain itu, terdapat tombol scroll ke bawah yang tidak terlihat fungsinya karena hanya membuat tulisan naik-turun saja (tidak terdapat penambahan tulisan lain, selain semua tulisan yang tadi sudah terlihat oleh user).   Tulisan yang ditampilkan juga terlalu kecil, padahal masih memungkinkan untuk sedikit diperbesar.

    Saya juga sempat bingung ketika mencari tombol back pada halaman ini.  Berlian yang saya beri tanda panah berwarna kuning, biasanya tidak dapat di klik. Ternyata, khusus pada halaman ini jika user mengarahkan kursor menuju berlian tersebut, muncullah tulisan back dan berlian bisa di klik. Padahal berdasar pengalaman saya menggunakan menu pada halaman sebelumnya, tombol berlian yang terletak sama persis disana tidak bisa di-klik.  (-_-“)

    Kesimpulan yang saya peroleh dari antarmuka website ini, yaitu website ini belum menerapkan user experience dimana tampilan yang serba pink memang menarik bagi remaja putri, tetapi cuma kesenangan sesaat saja.  Kenyamanan user lebih ditentukan oleh kemudahan dalam menggunakan website.  Website harus lebih efisien dan efektif sehingga user dapat melihat katalog sepatu & tas beserta harganya dengan waktu yang lebih cepat & tidak banyak tombol yang harus di-klik.

    Sekian ulasan singkat dari saya, silahkan menambahkan komentar dibawah ini ya teman-teman… ^_^