florist.indokado.

com G64050766
_____________________________________________________________________

DAFTAR ISI

DAFTAR ISI.....................................................................................................................................................
BAB 3 KESIMPULAN....................................................................................................................................
BAB 1 PENDAHULUAN................................................................................................................................
1.1
Web usability...................................................................................................................................
1.2
Web PT. Indonesia Global Gema Gemilang...................................................................................
BAB 2 ANALISIS WEB PT. INDONESIA GLOBAL GEMA GEMILANG.................................................
2.1
Natural Language............................................................................................................................
2.2
Fill in Form.....................................................................................................................................
2.3
Question and Answer......................................................................................................................
2.4
Function Key...................................................................................................................................
2.5
Menu...............................................................................................................................................
2.5.1 User Profile............................................................................................................................
2.5.2 Knowledge and Experience...................................................................................................
2.5.3 Job and Task...........................................................................................................................
2.6
Waktu Download Membuka Halaman Web.................................................................................
2.7
Halaman Utama...............................................................................................................................
2.8
Logo Perusahaan.............................................................................................................................
2.9
Screen Resolution...........................................................................................................................
2.10 Penempatan Menu dan Link...........................................................................................................
2.10.1 Beritahu Teman....................................................................................................................
2.10.2 List Menu.............................................................................................................................
2.10.3 Penjabaran Link List pada Menu Terlaris............................................................................
2.11 White Space....................................................................................................................................
2.12 Konsistensi......................................................................................................................................
2.11.1 Ukuran Halaman..................................................................................................................
2.11.2 Penggunaan Bahasa..............................................................................................................
2.13 Penggunaan Huruf Kapital..............................................................................................................
2.14 Informasi yang Tidak ter-Update..................................................................................................
2.15 Menu Help dan Informasi Penting................................................................................................
2.16 Logout pada Menu Account..........................................................................................................
2.17 Pelabelan Button Teruskan dan Sebelumnya.............................................................................
2.18 Efektivitas .....................................................................................................................................
2.18.1 Account vs Checkout.........................................................................................................
2.18.2 Link-link yang Tidak Efektif..............................................................................................
2.18.3 Penyajian Menu Utama..........................................................................................
2.19 Penjelasan Icon (Informasi Detail) - Frame..................................................................................
2.20 Show Me the Money.....................................................................................................................
2.21 Makna Kata yang Ambigu............................................................................................................
2.22 Penggunaan Graphics....................................................................................................................
2.23 Perubahan Link.............................................................................................................................
2.24 Breadcrumb...................................................................................................................................
2.25 Pencarian.......................................................................................................................................
2.26 Sapaan kepada Pengguna..............................................................................................................
2.27 Penggunaan Rollover....................................................................................................................
2.28 Penggunaan Icon Graphics............................................................................................................
2.29 Penomoran....................................................................................................................................
2.30 Jaminan Keamanan.......................................................................................................................
2.31 Task Compatibility........................................................................................................................
2.32 Work Flow Compatibility.............................................................................................................
2.33 Consistency...................................................................................................................................
2.34 Familiarity.....................................................................................................................................

florist.indokado.com G64050766
_____________________________________________________________________

2.35
2.36
2.37
2.38
2.39
2.40
2.41

Simplicity......................................................................................................................................
Direct Manipulation......................................................................................................................
Control..........................................................................................................................................
What You See Is What You Get ...................................................................................................
Flexibility......................................................................................................................................
Responsiveness.............................................................................................................................
Invisible Technology.....................................................................................................................

BAB 3 KESIMPULAN..................................................................................................................................
BAB 4 DAFTAR PUSTAKA.........................................................................................................................

florist.indokado.com G64050766
_____________________________________________________________________

BAB 1 PENDAHULUAN

1.1

Web usability

Web usability merupakan salah satu faktor penting dalam pengembangan suatu aplikasi web.
Pemahaman terhadap prinsip-prinsip usability sangat membantu pengembang dalam proses
implementasi yang bertujuan menghasilkan suatu aplikasi web yang user friendly. Menurut Jacob
Nielsen, usability adalah sebuah atribut kualitas yang menilai tingkat kemudahan user interface untuk
digunakan. Usability juga mengacu kepada metode untuk meningkatkan kemudahan penggunaan
selama proses perancangan. Usability didefenisikan melalui lima komponen, yaitu :
Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar
ketika pertama kali mereka melihat/menggunakan hasil perancangan.
Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah
mereka mempelajari hasil perancangan.
Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan
dengan baik, setelah beberapa lama tidak menggunakannya.
Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan
terhadap error dan cara memperbaiki error.
Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.
Sebuah web dengan usability yang buruk akan ditinggalkan oleh penggunanya. Berikut ini adalah
beberapa kondisi yang akan membuat pengguna meninggalkan sebuah web :
Web sulit digunakan.
Homepage tidak menjelaskan tentang apa yang ditawarkan oleh perusahaan dan apa saja
yang dapat dilakukan oleh pengguna pada web tersebut.
Pengguna mendapatkan adanya kesalahan pada web.
Informasi web sulit dibaca dan tidak mampu menjawab pertanyaan-pertanyaan pengguna.

1.2

Web PT. Indonesia Global Gema Gemilang

PT Indonesia Global Gema Gemilang, seperti perusahaan pada umumnya, memiliki sebuah website.
Web perusahaan ini beralamat di www.florist.indokado.com. Secara garis besar tujuan utama adanya
web ini, yaitu :
Memperkenalkan PT Indonesia Global Gema Gemilang secara umum kepada masyarakat
luas melalui media komunikasi internet.
Memperkenalkan bidang usaha yang ada di PT Indonesia Global Gema Gemilang serta
produk-produk yang dihasilkan.
Menyediakan fasilitas agar pengguna dapat meminta informasi mengenai service atau produk
tertentu secara on-line.
Menyediakan informasi mengenai alamat dan nomor telepon yang dapat dihubungi oleh
pengguna (informasi kontak).
Media pemasaran produk dari PT Indonesia Global Gema Gemilang
Target pemasaran dari aplikasi web ini adalah semua kalangan baik di dalam negeri maupun luar
negeri. Hal ini terlihat dari gaya bahasa yang digunakan dan kategori event yang disajikan, seperti
mother day, anniversary, kelahiran, minta maaf, dan ulang tahun, serta pilihan negara tujuan pada
bagian kategori.

florist.indokado.com G64050766
_____________________________________________________________________

BAB 2 PEMBAHASAN
Analisis terhadap web PT. Indonesia Global Gema Gemilang yang beralamat di
www.florist.indokado.com dilakukan dengan menganalisis penerapan kaidah web usability
berlandaskan pada buku Prioritizing Web Usability karangan Jakob Nielsen. Di dalam buku ini, ada
dua belas poin penting yang harus dicermati dalam mendesain dan membangun sebuah website, yaitu :

Nothing to Hide

The Web User Experience

Revisiting Early Web Usability Findings

Prioritizing Your Usability Problems

Search

Navigation and Information Architecture

Readability & Legibility

Writing for the Web

Providing Good Product Information

Presenting Page Elements

Balancing Technology with People's Needs

Design That Works

Selain itu juga dilakukan analisis berlandaskan pada buku The Essensial Guides of User Interface
Design karangan Wilbert O. Galitz. Pada buku ini dijelaskan karakteristik GUI (Graphic User
Interface) dan Web Interface yang terdiri dari :
The concept of direct manipulation
The characteristics of graphical interfaces
The characteristics of Web interfaces
Web page versus Web application design
The general principles of user interface design
Namun, pembahasan pada makalah ini tidak dikelompokkan berdasarkan poin-poin di
atas. Pembahasan akan dikelompokkan berdasarkan sub-poin dari tiap-tiap poin
sesuai dengan kondisi yang ditemukan pada web PT. Indonesia Global Gema
Gemilang.

2.1 Natural Language

Web ini menggunakan bahasa Indonesia secara umum dan beberapa istilah asing dalam bahasa
Inggris. Bahasa yang digunakan dalam web ini tidak baku (sesuai EYD), namun hal ini bukanlah
merupakan gangguan. Penggunaan bahasa pergaulan yang santai justru memberikan kesan yang
nyaman bagi pengguna saat mengunjungi web ini.
2.2 Fill in Form
Penggunaan fill in form pada situs ini terdapat pada menu account, saat akan membuat accout untuk
menjadi anggota. User mudah melakukan pengisian pada form karena hanya sedikit form yang harus
diisi, serta bahasa yang digunakan sangat sederhana dan familiar. Field-field yang harus diisi telah
dikelompokkan dengan terstruktur berdasarkan semantiknya serta sintaksisnya. Adapun kekurangan
pada gaya dialog fill in form di situs ini terletak pada pesan eror yang diberikan pada saat terdapat

florist.indokado.com G64050766
_____________________________________________________________________

user yang salah menginputkan data, dimana hanya ditampilkan pesan melalui sebuah kalimat tanpa
menunjukkan secara langsung pengisian pada field mana yang masih salah. Seperti yang
diilustrasikan pada gambar di bawah ini :
Pada gambar pengisian form di samping
dapat dilihat, bahwa pengguna tidak
melakukan pengisian field secara
lengkap. Saat pengguna menekan button
teruskan, maka muncul warning. Pesan
error tersebut juga menampilkan list
kesalahan yang dilakukan oleh pengguna.
Kekurangan dari cara semacam ini
adalah:
- Tulisan (teks) yang dicantumkan
terlalu banyak. Sementara aktivitas
yang bisa dilakukan oleh pengguna
adalah menekan tanda silang atau
menekan
(meng-klik)
enter.
Pengguna awam mungkin saja malas
membaca kemudian memilih OK.
- Kalaupun
pengguna
membaca
informasi ini, mungkin saja ketika ia
menutup pesan error ini, pengguna
yang memiliki ingatan yang terbatas lupa dengan isi pesan error sebelumnya. Bagaimana cara
untuk mendapatkannya kembali? Maka satu-satunya cara adalah menekan button teruskan. Dan
waktu pun menjadi tidak efisien.
Solusi yang ditawarkan dalam kasus ini adalah :
- Cantumkan peringatan tepat di samping field atau letak kesalahan pengguna. Dengan cara seperti
ini diharapkan pengguna dapat segera menyadari kesalahannya dan langsung melakukan
perbaikan.

2.3 Question and Answer

Web ini tidak memiliki gaya dialog Question and Answer.
2.4 Function Key
Situs ini menggunakan dialog style function keys. Pada web ini, tombol tab dapat digunakan untuk
berpindah field dalam proses pengisian form.
2.5 Menu
2.5.1 User Profile
- (Learning) Aplikasi ini cukup mudah digunakan oleh pengguna yang memiliki pengalaman
sebelumnya dalam menggunakan aplikasi web, namun tidak mudah bagi user pemula yang
jarang menggunakan aplikasi semacam ini. Web ini memiliki beberapa menu utama dengan
list-list menu di dalamnya, termasuk penerapan flash dalam menyebunyikan link-link
tertentu. Hal ini menyebabkan pengguna harus melakukan penjelajahan melalui menu-menu
tersebut untuk dapat memperoleh seluruh informasi yang terdapat dalam web ini.
- Web ini membutuhkan respon yang cukup banyak dari user. User harus menggerakkan
mouse untuk memilih menu-menu yang ada, melakukan pengisian form untuk dapat
memiliki account, mengisi form pengisian pemesanan, dan dapat mengetikkan saran dan
kritik pada sesi testimonial.
- High motivation : isi menu sangat bervariatif.
2.5.2 Knowledge and Experience
- Typing skill
: web ini membutuhkan beberapa operasi pengetikan.

florist.indokado.com G64050766
_____________________________________________________________________

System experience
: web ini membutuhkan pengalaman menggunakan aplikasi web
dari pengguna.
Application experience
: pengguna membutuhkan pengalaman untuk membuka dan
memahami isi web ini.
Dibutuhkan waktu yang relatif lebih dari banyak untuk proses pembelajaran untuk dapat
menggunakan web ini bagi pengguna yang belum berpengalaman.
Namun setelah dapat memahami cara penggunaannya, web ini memberikan pengalaman
yang menyenangkan. Hal ini terlihat dari testimonial yang diberikan pelanggan, dan
banyaknya transaksi yang berhasil dilayani melalui web ini.

2.5.3 Job and Task

- Little or no training
: tidak membutuhkan pengetahuan khusus untuk dapat
menjalankan aplikasi web ini.
- Low turnover rate
: situs florist.indokado.com ini tidak menyebabkan user harus
bolak-balik untuk membuka page atau memilih menu yang ada.
2.6 Waktu Download Membuka Halaman Web
Saat pertama kali membuka halaman situs ini, salah satu kekurangan dari situs ini adalah waktu
download yang lama. Waktu download situs ini untuk dapat tampil sepenuhnya lebih dari 4 detik
untuk keadaan bandwidth yang baik dan dapat mencapai lebih dari 5menit saat kondisi jaringan
sedang padat. Kemungkinan yang mengakibatkan web ini memiliki waktu download yang cukup
banyak adalah, database yang dimiliki web ini. Yaitu beberapa gambar yang menggunakan format
jpeg. Selain itu, web ini juga menggunakan flash untuk mempercantik penampilan web ini. Flash
digunakan untuk iklan dan menu utama.
Solusi yang ditawarkan :
- Ganti flash dengan imege biasa, karena dalam web ini, ornamen flash tidak memiliki peranan
yang cukup besar dalam mempercantik web ini. Tidak banyak keuntungan yang dihasilkan dari
flash. Memakai imege cantik pun cukup untuk mempercantik tampilan sekaligus menyalurkan
informasi
- Gunakan imege dengan format .png atau .gif. Sesuaikan dengan ukuran gambar.

2.7 Halaman Utama

Halaman utama merupakan halaman pembuka dimana pemilik situs dapat memberikan penjelasan
singkat mengenai latar belakang perusahaan dan tujuan dari situs tersebut. Kekurangan dari web ini
adalah web tidak memiliki home atau halaman utama. Saat pertama kali membuka web, yang pertama
kali ditampilkan adalah halaman katalog. Berikut adalah tampilan saat web pertama kali dibuka.

florist.indokado.com G64050766
_____________________________________________________________________

Gambar 1
2.8 Logo Perusahaan
Pada Gambar 1, dapat dilihat bahwa peletakkan logo perusahaan sudah mengikuti kaidah peletakkan
yang berlaku selama ini. Logo perusahaan ini juga merupakan link menuju halaman awal web bila
diklik. Yang menjadi kekurangan dari logo pada web ini adalah logo yang berupa gabungan gambar
maupun tulisan menimbulkan kerancuan. Gambar bunga tidak memberikan pengaruh apa-apa saat
diklik. Begitu pula saat memasuki area tulisan indokado.com. Ternyata, yang benar-benar mewakili
suatu link hanyalah indokado. Padahal secara sepintas, indokado.com merupakan suatu kesatuan.
Solusi yang ditawarkan :
- Perluas area logo yang dapat digunakan sebagai perwakilan suatu link.
2.9 Screen Resolution

florist.indokado.com G64050766
_____________________________________________________________________

Salah satu bagian penting yang harus diperhitungkan dalam pengembangan suatu web adalah resolusi
layar. Data statistik menunjukkan bahwa komputer saat ini memiliki resolusi 800 x 600 piksel atau
1024 x 768 piksel. Bila suatu halaman dibuat melebihi resolusi 1024 piksel maka kemungkinan
adanya pemakaian scrollbar ke samping sangatlah besar. Tentu saja ini akan mengurangi kenyamanan
penguna saat sedang menggali informasi pada suatu aplikasi web.
Masalah semacam ini biasanya disiasati oleh pihak pengembang web dengan cara membuat lebar
halaman web sesuai dengan ukuran terkcil resolusi monitor yaitu 800 piksel atau lebih kecil dari itu.
Dengan ukuran tersebut diharapkan semua komputer dapat memperoleh tampilan web tanpa harus
mengunakan scroll menyamping. Cara lain yang digunakan oleh pengguna adalah menggunakan
ukuran yang dinamis. Lebar halaman web didefinisikan dengan menggunakan ukuran persentase.
Misalnya, jika lebar halaman didefinisikan 90% maka ketika dibuka pada komputer dengan resolusi
berapapun, maka lebar halaman akan memenuhi 90% dari lebar layar.
Pengembang web PT. Indonesia Global Gema Gemilang cukup baik dalam memperhatikan faktor
screen resolution yang telah dibahas di atas. Yaitu dengan menggunakan ukuran yang dinamis. Ini
merupakan salah satu keunggulan dari web in. Namun, hal ini justru mengantarkan kita pada masalah
lain yang akan dibahas pada point berikutnya.
2.10Penempatan Menu dan Link
2.10.1
Beritahu Teman
Web ini memiliki fasilitas untuk mengecek email dan memberitahukan teman tentang
keberadaan web ini. Posisi keterangan beritahu teman, tidak begitu terlihat. Pengguna bisa
saja tidak sadar atau mungkin saja lupa untuk berinteraksi dengan fasilitas ini. Padahal cara
semacam ini cukup membantu untuk menyebarluaskan web ini. Memindahkan link beritahu
teman, agar berdekatan dengan check email, memperbesar peluang pengguna untuk
beraktivitas dengan fasilitas ini.
2.10.2
List Menu Yang Baru
Seperti halnya beritahu teman, informasi tentang adanya menu baru juga kurang terlihat.
Padahal promosi suatu produk baru cukup penting dalam bidang pemasaran. Dengan kejelasan
informasi mengenai adanya menu baru yang ditawarkan juga memberikan kepercayaan
tambahan dari pelanggan bahwa perusahaan bersikap aktif baik dalam berkreasi maupun
mengupdate informasi.
Solusi yang ditawarkan :
- Tambahkan halaman utama (home) pada web ini untuk mempilkan deskripsi singkat
mengenai perusahaan, informasi mengenai produk terbaru ataupun rekomendari terhadap
produk terlaris.
2.10.3
Penjabaran Link List pada Menu Terlaris
Penjabaran ini tidak begitu efektif. Solusi yang ditawarkan untuk penataan tampilan secara
umum pada web ini adalah :
- Asumsi : halaman utama telah ditambahkan
- Perjelas button menu terlaris agar diklik oleh pengguna
- Link list menu terlaris ditampilkan pada halaman utama.
Untuk halaman selain halaman utama, jalan singkat untuk melihat menu terlaris selain kembali
ke halaman utama adalah dengan mengklik menu di samping kanan.
2.11White Space
Seperti yang dapat dilihat pada Gambar 1, yaitu halaman katalog. Terlihat adanya white space dalam
proporsi yang relatif berlebih, yaitu pada jarak antar icon apada bagian tengah halaman. Hal ini terjadi
saat web dibuka pada lebar 1024 piksel. Begitu juga pada bagian content, yaitu adanya jarak antara
icon-icon katalog yang berada dalam frame dengan keterangan alamat perusahaan beserta iklan.
Solusi yang ditawarkan :

florist.indokado.com G64050766
_____________________________________________________________________

Asumsi : melanjutkan penjelasan penjelasan (Penempatan Menu dan Link), maka menu terlaris
sudah diperbaiki, produk terbaru sudah dipindahkan ke halaman utama, dan beritahu teman
dipindahkan pada bagian bawah check email (sisi kanan halaman web)
Pindahkan kata pelanggan ke sisi kanan
Pindahkan dua iklan pada sisi kiri bawah ke bagian sisi kanan bawah
Maka secara otomatis white space akan berkurang pada halaman utama. Karena iklan pada bagian
bawah halaman dapat dinaikkan.

2.12Konsistensi
2.12.1
Ukuran Halaman
Keunggulan dari web ini adalah ukuran halaman yang relatif konsisten. Setiap halaman
memiliki format tampilan yang sama berupa menu dan pencarian pada sisi kiri dan link-link
pada sisi kanan. Selain itu juga dengan adanya alamat perusahaan sekaligus beberapa iklan
tertentu yang selalu muncul pada tiap halaman. Namun konsistensi ini justru memberikan
dampak negatif dengan munculnya kesan memaksakan saat kita mengklik icon berikut pada
bagian kanan tampilan. Solusi yang ditawarkan dalam kasus ini adalah :
- Alamat dan iklan tidak perlu ditampilkan pada halaman
tersebut bila memang ingin mempertahankan konsistensi
ukuran halaman
- Gunakan paging untuk membagi jumlah list yang akan
ditampilkan. Dalam kasus ini memang sudah digunakan
paging. Seluruh list yang ada dibagi menjadi 3 halaman.
Namun pembagian ini dirasa masih kurang dengan
banyaknya scroll ke bawah yang harus dilakukan pengguna. Ketidak rapihan (kesan
dipaksakan) yang dimaksud pada penjabaran di atas ditunjukkan pada gambar di bawah ini.

Gambar 2
2.12.2
Penggunaan Bahasa
Dilihat dari jenis produk dan pelayanan yang ditawarkan melalui web ini, memang sangat
memungkinkan untuk menggunakan bahasa Inggris serapan. Namun, ada ketidak cocokan
penggunaan bahasa pada list menu katgori seperti yang dapat dilihat pada Gambar 1.
Solusi yang ditawarkan :
- Gunakan pilihan bahasa dominan. Misal kita memilih bahasa natural adalah bahasa
Indonesia dengan bahasa serapan bahasa Inggris. Maka,gunakan bahasa Indonesia untuk
kata-kata yang selain masih bisa diterjemahkan juga familiar dalam bahasa Indonesia.
Seperti Internasional untuk kata International.
2.13Penggunaan Huruf Kapital
Pada bagian list link (sisi kanan web), mengacu pada Gambar 1, yaitu Informasi Lain.... Jenis huruf
kapital digunakan untuk urutan kalimat link bagian atas, sementara beberapa kalimat bawah
menggunakan huruf biasa.
Solusi yang ditawarkan :
- Hindari penggunaan huruf kapital dalam kalimat.

florist.indokado.com G64050766
_____________________________________________________________________

2.14Informasi yang Tidak Ter-Update

Informasi yang selalu diperbaharui merupakan hal yang cukup penting untuk dapat memperoleh
kepercayaan dari seorang pelanggan (pengguna). Misal dalam kasus kali ini adalah, pada bagian
komentar dari customer. Tanggal testimonial yang dicantumkan menunjukkan tahun 2002. Hal ini
dapat membuka peluang customer tertentu untuk sangsi dengan kondisi perusahaan saat ini. Apakah
masih sama dengan yang dulu atau tidak.
Solusi yang ditawarkan :
- Selalu lakukan update terhadap informasi termasuk testimonial
2.15Menu Help dan Informasi Penting
Tidak ada menu help yang ditampilkan secara jelas pada web ini untuk menjelaskan bagaimana cara
menggunakan web ini. Penjelasan mengenai cara menggunakan web seperti cara memilih barang dan
melakukan pembayaran dijelaskan pada menu informasi (info >> cara pembayaran). Letaknya pun
tersembunyi, dan cara untuk dapat menemukan web ini tidak familiar bagi orang awam. Berikut ini
adalah ilustrasi untuk dapat memperoleh informasi :
Tampilan awal menu adalah seperti pada Gambar 1. Tampilan Gambar 5 diperoleh setelah menyorot
menu informasi.

Gambar 3

Gambar 4

Gambar 5
Dikatakan tidak biasa bagi orang awam karena penggunaan flash pada menu utama. List menu baru
muncul saat kita mengarahkan kursor pada menu tersebut. Dan akan hilang, begitu kursor dijauhkan.
Dengan cara seperti ini, mungkin saja pengguna lupa, misal saat ia mencari informasi untuk
melakukan pembayaran. Pengguna harus mencoba mengunjungi menu utama satu persatu. Label
menu yang digunakan juga tidak tepat. Apalagi Kata Informasi juga digunakan pada sisi kanan yaitu
Informasi Terkini.
Solusi yang ditawarkan :
- Gunakan label HELP untuk menggantikan informasi

10

florist.indokado.com G64050766
_____________________________________________________________________

2.16Loggout Pada Menu Account

Gambar 6

Gambar 7
Account untuk logout letaknya tersembunyi. Hal ini melanggar prinsip Nothing to Hide. Pengguna
awam mungkin saja kebingungan mencari dimana fungsi untuk logout, hingga akhirnya memilih
untuk keluar dari situs ini tanpa logout.
Solusi yang ditawarkan :
- Letakkan Logout pada bagian atas halaman account saya untuk memudahkan pengguna.
2.17Pelabelan Button TERUSKAN dan SEBELUMNYA
Pemakaian kata kurang tepat. Biasanya teruskan diterjemahkan dengan forward yaitu masuk ke tahap
selanjutnya, ataupun menyalurkan berita yang ada kepada teman. Sementara sebelumnya diartikan
sebagai before yang biasa dipakai untuk lembali ke tahap sebelumnya. Namun pada kasus kali ini
teruskan dan sebelumnya berperan tidak konsisten. Untuk beberapa halaman teruskan dan sebelumnya
berperan seperti pada umumnya. Namun di halaman pencarian, teruskan berarti memberikan
informasi detail untuk barang yang telah dipilih. Mengklik button teruskan pada beberapa halaman
membawa kita kembali ke halaman utama.
2.18Efektivitas
2.18.1 Pada situs ini ditemukan beberapa cara untuk masuk ke halaman account. Yaitu dari menu
utama, link account saya pada bagian atas pinggir halaman, dan secara tidak langsung
pengecekan email akan membawa kita pada halaman account. Ini sangatlah tidak efektif. Begitu
pula dengan menu utama Checkout yang menampilkan halaman yang persis sama dengan
Account >> Login
Solusi yang ditawarkan :
- Pilih salah satu antara menu utama account atau link account saya
2.18.2 Link-link yang Tidak Efektif
- Saat pengguna pertama kali berselancar pada situs ini, ada 3 link yang menuju halaman yang
sama, yaitu : Account, Check Out, dan Account Saya. Secara tidak langsung terdapat kesan
memaksa pengguna secara halus untuk menjadi member pada situs tersebut. Hal ini justru
mengurangi kenyamanan pengguna, yang murni berkunjung ke web tersebut hanya untuk
mendapatkan informasi.
-

Pada gambar di samping terlihat tiga area yang ditunjuk oleh

tanda panah. Ketiga area tersebut menuju ke halaman yang
sama, yaitu untuk menulis komentar. Kekurangan dari cara
penulisan link adalah, jumlah kata dalam satu kalimat terlalu
banyak untuk digunakan sebagai satu link. Kemudian, setelah
masuk ke halaman kata pelanggan, terdapat kalimat link :
Tulis komentar anda tentang layanan Indokado.com, dan
setelah di klik, membawa kita ke halaman Account. Dan bila
kita belum memiliki account, kita harus mendaftar terlebih
dahulu.
Solusi yang ditawarkan :
Pilih salah satu antara Account dan Check Out

11

florist.indokado.com G64050766
_____________________________________________________________________

- Gunakan satu button, area atau link sederhana yang mewakili mengisi
komentar
pada
halaman kata pelanggan.
2.18.3 Penyajian Menu Utama
Menu Phone Order bila disorot akan memberikan list alamat perusahaan. Namun tidak
seperti menu-menu lainnya, list alamat ini hanya ditampilkan, tidak bisa diklik. Cara
penyajian semacam ini tentu saja mengurangi kenyamanan pengguna. Sementara itu, akses
lain menuju alamat perusahaan pada alamat ini terletak pada bagian bawah halaman. Harus
melakukan scroll ke bawah untuk melihatnya. Jika pengguna lupa mengenai hal ini, maka ia
harus menahan kursor pada menu utama sambil mencatat alamat. Pengguna yang awam
terhadap komputer, mungkin saja merasa kesulitan dengan hal ini.
Solusi yang ditawarkan :
- Tampilkan alamat dan akses ke perusahaan pada suatu halaman tersendiri.
2.19Penjelasan Icon (informasi detail) Frame
Pada bagian katalog. Kelemahan lain dari web ini adalah penggunaan frame dan cara menampilkan
informasi detail. Untuk mendapatkan
informasi detail mengenai suatu
produk, cara umum yang biasa
dilakukan adalah :
- mengklik icon/gambar
- kemudian
akan
keluar
halaman baru yang khusus
berisi
informasi
detail
produk yang telah dipilih.
Pengembang situs ini juga
melakukan cara yang sama
seperti situs lain pada umumnya.
Namun, pada kasus ini, frame
rupanya menjadi masalah. Gambar di
atas adalah kondisi awal. Halaman
terbagi menjadi dua bagian. Satu
frame (atas) untuk rincian, dan frame
lainnya (bawah) untuk icon produk.
Yang menjadi masalah adalah saat kita memilih salah satu produk dengan mengklik salah satu icon.
Sepintas tidak ada perubahan yang berarti. Pengguna pertama kali web ini akan kebingungan. Hal ini
disebabkan oleh :
- Frame secara psikis mempengaruhi mata kita untuk fokus melihat terhadap suatu area. Sehingga
ketika terjadi perubahan pada daerah di luar area tidak terlihat oleh pengguna.
- Perubahan yang terjadi di bagian detail (di atas icon-icon dalam frame) tidak terlihat berarti saat
minformasi berganti. Pada kedua gambar di atas dapat dibandingkan, perubahan hanya terjadi
dengan gambar bunga dan harga pada sisi kanan.
Maka solusi yang ditawarkan adalah :
- Hindari penggunaan frame
- Tampilkan informasi detail secara pop-up
2.20Show Me the Money
Pada dasarnya, informasi harga merupakan informasi yang tergolong penting dan sering dibutuhkan
oleh kebanyakan pengguna. Kekurangan pada web ini adalah seperti yang dapat dilihat pada gambar
di atas. Icon-icon di bawah tidak memiliki keterangan harga. Untuk hanya mendapatkan informasi
harga, pengguna harus melakukan suatu tindakan yaitu mengklik icon gambar. Hal ini tentu saja
mengurangi nilai efektivitas.
Solusi yang ditawarkan :
- Tambahkan keterangan informasi harga pada gambar / icon.

12

florist.indokado.com G64050766
_____________________________________________________________________

2.21Makna Kata yang Ambigu

Pada gambar di atas, pada bagian frame list katalog produk terdapat kalimat : pelanggan yang
membeli produk ini juga membeli . Saat saya mengawali melakukan analisa terhadap web ini,
membaca kalimat ini yang muncul pada pikiran saya adalah :
1. ini produk apa yang dibeli pelanggan? Hal ini terjadi karena seperti penjelasan yang telah
diberikan di atas, pengguna tidak menyadari dengan perubahan yang terjadi di bagian atas.
Peletakkan kalimat juga tidak tepat dan sesuai dengan objek yang dituju.
2. membeli kalimat ini mengatung. Ini seperti kalimat yang menggantung dan justru kehilangan
makna.
Solusi yang ditawarkan :
- Ganti kata ini dengan kata di atas
- Tambahkan tanda titik dua ( : ), atau lanjutkan dengan produk di bawah ini
- Sehingga alternatif kalimat yang dapat digunakan adalah :
o pelanggan yang membeli produk di atas juga membeli :
o pelanggan yang membeli produk di atas juga membeli produk di bawah ini.
2.22Penggunaan Graphics yang Tidak Tepat
Pada web ini digunakan beberapa icon yang mewakili kategori suatu produk. Namun, icon yang
digunakan justru tidak tepat. Selain itu terdapat icon yang ditempatkan tidak sesuai pada tempatnya,
terlihat janggal pada tampilan halaman. Ukurannya pun terlihat kurang proporsional dengan ukuran
halaman secara keseluruhan. Untuk lebih jelasnya dapat dilihat pada gambar di bawah ini sebagai
salah satu contohnya :

Gambar 10
Gambar pada pojok kanan atas, hanyalah gambar biasa. Tidak dapat diklik (atau bukan merupakan
link). Sementara untuk dijadikan hiasan, gambarnya pun kurang mewakili kata tanaman hias. Begitu
pula dengan icon-icon di bawah. Memang merupakan suatu link, namun gambar tersebut kurang
mewakili penjelasan berupa teks di bawahnya. Sehingga memberi kesan dipaksakan.
Solusi yang ditawarkan :
- Ganti icon dengan gambar yang lebih mewakili
- Tidak usah dipaksakan, lebih baik menggunakan link berupa teks daripada gambar tetapi
memaksakan.
- Perbesar ukuran gambar.
2.23Perubahan Link
Web ini memiliki cukup banyak link yang dapat dikunjungi pengguna. Pengguna memiliki ingatan
yang terbatas untuk dapat mengingat link mana yang sudah dikunjungi maupun yang belum. Untuk itu
pengembang web berusaha untuk membantu pengguna dengan cara memberikan perbedaan antara
link yang sudah dikunjungi dan yang belum. Dengan cara demikian, diharapkan dapat mengefisienkan
waktu dan mengurangi tingkat stres pengguna dalam menggunakan web ini. Dalam hal ini, web ini
memiliki kekurangan.
Solusi yang ditawarkan :
- Beri perubahan (contoh : perubahan warna) terhadap link yang sudah dikunjungi oleh pengguna.
2.24Breadcrumb

13

florist.indokado.com G64050766
_____________________________________________________________________

Pada situs ini, breadcrumb tidak menunjukkan posisi kita secara tepat sampai posisi kita terakhir.
Contohnya saat kita memilih info pada menu utama. Pada informasi terdapat pilihan : Tentang
Indokado, Kebijaksanaan, Metode Pembayaran, Wlayah Pengiriman, dan FAQ. Misal kita memilih
Kebijaksanaan, maka breadcrumb yang ditampilkan seharusnya : Katalog >> Informasi >>
Kebijaksanaan. Sehingga pengguna benar-benar tahu secara jelas di mana posisinya dan bagaimana
caranya untuk kembali. Namun pada web ini, breadcrumb yang ditampilkan adalah : Katalog >>
Info.
2.25Tampilan Pencarian

Gambar 11
Perhatikan yang ditunjuk oleh tanda panah pada Gambar 11. Saat pertama kali mengunjungi halaman
ini, pengguna awam harus berpikir terlebih dahulu apa yang harus dilakukan dengan halaman ini. Hal
ini diakibatkan oleh :
- Label teks di atas tidak terlihat seperti tempat yang bisa diketikkan
- Warna yang digunakan untuk memberikan kesan area terlalu halus (soft) bahkan nyaris tidak
begitu terlihat
- Cara pengisian yang benar itu seperti apa, apalagi dengan mempertimbangkan posisi button cari.
Apakah digunakan untuk pengisian bagian atas saja atau secara keseluruhan.
Solusi yang ditawarkan :
- Tambahkan keterangan pada bagian dalam kolom (contoh : mohon isi)
- Tambahkan tingkat kotras warna untuk batasan area, atau tidak usah menggunakan warna sama
sekali
- Pindahkan button cari sesuai kebutuhan sesuai kebutuhan dengan pertimbangan sebagai berikut :
Bila button cari digunakan untuk keseluruhan halaman (setelah melakukan perngisian semua
field), pindahkan button ke bagian paling bawah.
Bila button cari digunakan untuk per area, tambahkan button cari. (jadi pada halaman
pecarian rinci terdapat dua button cari)
2.26Sapaan kepada Pengguna
Salah satu keunggulan dari web ini adalah sapaan kepada pengguna yang terletak pada sisi kanan atas
(lihat Gambar1) Strategi semacam ini dapat memberi kesan hangat perusahaan pada pengguna.
Namun pengembang web kurang memanfaatkan kesempatan ini dengan baik. Peletakannya kurang
tepat sebagai kesan pertama. Dan sapaan semacam ini, sebaiknnya tidak dibawa ke setiap halaman.
Solusi yang ditawarkan :
- Letakkan sapaan yang dipercantik dengan gambar dan jenis tulisan pada halaman utama (dengan
asumsi : web ini memiliki halaman utama)
2.27Penggunaan Rollover yang Tidak Tepat
Pilihan mata uang yang tersedia hanya satu, tidak cocok untuk
menggunakan Rollover semacam ini.
Gambar 12

14

florist.indokado.com G64050766
_____________________________________________________________________

Solusi yang ditawarkan :

- Pilihan terhadap mata uang yang digunakan tidak perlu dicantumkan. Keterangan mengenai mata
uang yang digunakan dapat ditampilkan pada halaman informasi pembayaran.
2.28Penggunaan Icon yang Tidak Konsisten
Pada bagian Katalog >> International disajikan icon-icon bendera yang mewakili suatu negara.
Seperti ditunjukkan pada gambar di bawah ini :

Gambar 13
Icon pada baris pertama dan ketiga adalah icon bergerak (memberi kesan bendera berkibar), namun
icon pada baris kedua tidak. Dan dapat dilihat bahwa ukuran bendera pun tidak konsisten. Pada
bendera Inggris bahkan perpanjangan (atau perbesarannya) tidak proporsional. Hal-hal kecil semacam
ini mempengaruhi penilaian pengguna mengenai keprofesionalan perusahaan. Dari isi yang diwakili
setiap icon bendera ini, tidak ada perbedaan, tidak ada produk yang cenderung lebih spesial antara
suatu negara dengan negara lain. Perbedaan icon semacam ini memberi kesan merekomendasikan
produk pada suatu negara. Kelemahan semacam ini berpengaruh secara tidak langsung terhadap
pemasaran produk antara negara yang satu dengan negara yang lain.
Solusi yang ditawarkan :
- Samakan jenis gambar pada icon dan gunakan gambar dengan perbesaran yang proporsional.
2.29Penomoran
Pada web ini digunakan urutan angka 01,02,03, dst. Cara penomoran semacam ini kuranglah tepat.
Solusi yang ditawarkan :
- Gunakan penomoran 1,2,3, dst (tanpa nol di bagian depan)
2.30Jaminan Keamanan
Situs ini tidak memberikan jaminan keamanan atau sesuatu yang dapat memberikan kepercayaan
terhadap pengguna untuk melakukan transaksi secara online dengan aman.
Solusi yang ditawarkan :
- Tunjukkan suatu jenis sertifikasi ataupun suatu informasi yang meyakinkan pengguna
mengenai keamanan bertransaksi.
2.31Task Compatibility
Penugasan yang diberikan pada situs ini cukup compatible, hal ini disebabkan dengan menu yang
disajikan sesuai dengan pengelompokkan informasi/kategori pada menu (Tree View)
2.32Work Flow Compatibility
Work Flow pada situs ini cukup compatible, karena kita tidak harus kembali ke menu pada suatu layar
untuk dapat ke page lainnya.
2.33Consistency
Web ini konsisten dilihat dari pemakaian template yang dipakai, option yang disediakan, ukuran atau
proporsi dalam design layar, serta menu yang selalu berada di posisi yang sama di setiap halaman
layaknya pada halaman utama. (Dalam situs ini, tidak ada halaman utama, halaman yang muncul saat
pertama kali membuka web ini adalah halaman katalog)

15

florist.indokado.com G64050766
_____________________________________________________________________

2.34Familiarity
Secara keseluruhan baik dari sisi tampilan penataan, baik untuk content, menu, link, maupun
penggunaan bahasa yang digunakan, pada situs ini cukup familiar. Menu bar dan bahasa yang
digunakan sangat familiar karena menggunakan bahasa Indonesia dan beberapa istilah serapan dari
bahasa Inggris yang sudah tidak asing lagi. Begitu pula dengan link-link yang memakai icon ataupun
logo tidak mempersulit pengguna. Walaupun ada beberapa kasus yang tidak sesuai dengan fungsi dan
penempatannya.
2.35Simplicity
Situs ini memiliki halaman, link, dan list menu yang cukup banyak, namun tidak semua link
ditampilkan dalam suatu halaman. Menu-menu sudah dikelompokkan menurut kategorinya, menumenu list akan terlihat setelah meng-klik menu utama Tree View, sehingga web ini terlihat lebih
sederhana dan rapi. Web ini (mengacu pada gambar 1) terdiri dari 3 kolom, dimana content terletak
pada bagian tengah. Content tertata dengan cukup rapi melalui barisan berupa kolom dan baris, yang
membantu web ini terlihat lebih sederhana.
2.36Direct Manipulation
Web indokado.com cukup menerapkan hal ini. Terlihat dari adanya headline dari tiap informasi
terbaru yang dimuat di web, sehingga user dapat mengerti secara cepat tentang informasi yang ada.
2.37Control
Ada beberapa link yang tidak dapat diakses oleh user umum, seperti, untuk dapat mengisikan
komentar harus mendaftarkan diri menjadi anggota atau member. Begitu juga saat kita akan
melakukan transaksi pembelian, harus mendaftarkan diri menjadi anggota.
2.38What You See Is What You Get (WYSIWYG)
Tiap informasi yang ingin kita cari, disediakan sesuai dengan menu yang diberikan, tidak lari atau
menyimpang ke informasi lain. Seperti judul yang dijadikan link pada informasi yang disesuaikan
dengan isinya
2.39Flexibility
Secara umum web ini kurang fleksibel karena masih didominasi dengan penggunaan mouse sebagai
penunjuknya.
2.40Responsiveness
Situs ini kurang responsiveness, hal ini ditunjukkan dengan tidak adanya peringatan yang diberikan
bila pengguna melakukan suatu requirement. Misalnya kita ingin mencari informasi berdasarkan
kategori tertentu. Web tidak menampilkan reaksi bahwa Web tersebut sedang melakukan proses
pencarian.
2.41Invisible Technology
Dalam kasus web kali ini ditunjukkan dengan user yang tidak mengetahui teknis bagaimana web
berjalan, contohnya apabila kita menemukan sebuah link, user tidak perlu mengetahui nama file yang
dituju, tetapi langsung menampilkan halaman web yang dituju.

16

florist.indokado.com G64050766
_____________________________________________________________________

BAB 3 KESIMPULAN
Dikutip dari Web Pages That Suck
List di bawah ini diperoleh dari pengujian web melalui meni Checklist 1 dan Checklist 2 mengenai
web ini :
- The man from Mars cannot quickly find the focal point of the home page
Web ini bahkan tidak memiliki halaman utama
-

The man from Mars cannot quickly find the focal point of the current page
Terjadi pada kasus informasi detail icon yang telah dibahas di atas. Hal ini diakibatkan
oleh perubahan yang kurang dirasakan pengguna dan penggunaan frame yang membuat
pengguna fokus terhadap area di dalam frame

Our home page or any page- tajes more than four seconds to load
Hal ini dapat disimpulkan melalui percobaan langsung terhadap web ini. Penyebab dari
hal ini telah dijelaskan di atas pada bagian Waktu Download

We dont put design elements where our visitor expect them

Adanya icon-icon yang diletakkan tidak tepat pada tempatnya dengan ukuran yang
kurang proporsional. Begitu juga pada penataan posisi menu yang telah dijelaskan di
atas.

Our pages have to much / too little white space

Aplikasi web ini memiliki terlalu banyak white space pada bagian content.

Our site doesnt provide clear instructions on how to perform tasks like ordering, pilling out
form, etc
Situs ini tidak memiliki menu help. Informasi mengenai cara pemesanan, pembayaran,
dan informasi lainnya terletak pada menu informasi. Pengguna baru mungkin akan
kesulitan saat pertama kali menggunakan situs ini

Our site mixes and matches text size on the page

Adanya kombinasi huruf yang digunakan dalam situs ini untuk menekankan headline.

Our site has links consisting of 10-20 words.

Saya sangat puas dengan servis Indokado. Fast shipping, great communication, and
good stuff...

Clicking the logo doesnt lead to the home page

Situs ini tidak memiliki halaman utama. Klik logo membawa kita pada halaman katalog.

Our sites usesUnder Construction graphics

Pada halaman internasional, icon bendera yang mewakili suatu negara tidak/belum
semuanya menggunakan flash.

Our sites symbols are not logical. Our shopping cart symbol doesnt look like a shopping chart
Penggunaan icon-icon graphics yang tidak pas untuk mewakili suatu item.

Our site uses a background graphic that repeats it self on large screen monitor
Background yang diugunakan pada situs ini adalah dinamis. Hal ini telah dijabarkan
pada penjelasan mengenai Screen Resolution di halaman sebelumnya.

Our site doesnt use color to convey meaning red tex signifies this is important
Kata-kata seperti klik di sini tidak berwarna merah kecuali disorot oleh kursor.

17

florist.indokado.com G64050766
_____________________________________________________________________

We understand ow our sites navigation works so everybody else probably understand how it
works
Kenyataannya adalah pengguna baru mengalami beberapa masalah dalam menggunakan
navigasi situs ini. Seperti headline menu yang terlihat seperti bisa di klik, menu
keranjang yang tempatnya tersembunyi, button selanjutnya dan sebelumnya yang tidak
berfungsi seperti pada situs lain pada umumnya. (Pada beberapa halaman selanjutnya
dan sebelumnya membawa pengguna ke halaman catalog)

Our site uses flash navigation

Menu utama menggunakan flash.

A man from Mars cannot quickly understand our navigation

Terjadi pada list menu utama yang telah dijelaskan di atas

Our site uses frames

Frame digunakan untuk memisahkan menu dengan content maupun link. Pada bagian
content pun digunakan frame untuk memisahkan antara informasi yang satu dengan
informasi yang lain.

Our search engine is not at top-right of a page

Search engine terletak pada pojok kiri atas

Our site uses graphics as a link

Penggunaan graphics untuk menuju ke suatu kategori atau halaman diterapkan pada situs
ini

Our paragraphs have too much text

Hal ini terjadi pada bagian pengalaman dan latar belakang perusahaan yang terdapat
pada Informasi Lain. Dapat diperoleh dengan mengunjungi link Biarkan Bunga
Berkelana

18

florist.indokado.com G64050766
_____________________________________________________________________

DAFTAR PUSTAKA
Johnson Jeff. 2003. Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them.
Morgan Kaufmann Publishers
Nielsen J. 2003. Introduction to Usability. http://www.useit.com/alertbox/20030825.html
Nielsen J & Loranger H. 2006. Prioritizing Web Usability. Berkeley : New Riders.

19