florist.indokado.com – G64050766 _____________________________________________________________________

DAFTAR ISI

DAFTAR ISI............................................................................................................................................1BAB 3 KESIMPULAN............................................................................................................................2BAB 1 PENDAHULUAN.......................................................................................................................3

1.1 Web usability..........................................................................................................................31.2 Web PT. Indonesia Global Gema Gemilang..........................................................................3

BAB 2 ANALISIS WEB PT. INDONESIA GLOBAL GEMA GEMILANG........................................42.1 Natural Language....................................................................................................................42.2 Fill in Form.............................................................................................................................42.3 Question and Answer..............................................................................................................52.4 Function Key..........................................................................................................................52.5 Menu.......................................................................................................................................5

2.5.1 User Profile....................................................................................................................52.5.2 Knowledge and Experience...........................................................................................52.5.3 Job and Task..................................................................................................................6

2.6 Waktu Download – Membuka Halaman Web........................................................................62.7 Halaman Utama......................................................................................................................62.8 Logo Perusahaan.....................................................................................................................72.9 Screen Resolution...................................................................................................................72.10 Penempatan Menu dan Link...................................................................................................8

2.10.1 Beritahu Teman...........................................................................................................82.10.2 List Menu.....................................................................................................................82.10.3 Penjabaran Link List pada Menu Terlaris...................................................................8

2.11 White Space............................................................................................................................82.12 Konsistensi..............................................................................................................................9

2.11.1 Ukuran Halaman..........................................................................................................92.11.2 Penggunaan Bahasa.....................................................................................................9

2.13 Penggunaan Huruf Kapital.....................................................................................................92.14 Informasi yang Tidak ter-Update..........................................................................................102.15 Menu Help dan Informasi Penting........................................................................................102.16 Logout pada Menu Account.................................................................................................112.17 Pelabelan Button – Teruskan dan Sebelumnya....................................................................112.18 Efektivitas ............................................................................................................................11

2.18.1 Account vs Checkout.................................................................................................112.18.2 Link-link yang Tidak Efektif.....................................................................................112.18.3 Penyajian Menu Utama....................................................................................10

2.19 Penjelasan Icon (Informasi Detail) - Frame..........................................................................102.20 Show Me the Money.............................................................................................................132.21 Makna Kata yang Ambigu....................................................................................................132.22 Penggunaan Graphics...........................................................................................................132.23 Perubahan Link.....................................................................................................................132.24 Breadcrumb...........................................................................................................................142.25 Pencarian...............................................................................................................................142.26 Sapaan kepada Pengguna......................................................................................................142.27 Penggunaan Rollover............................................................................................................142.28 Penggunaan Icon Graphics...................................................................................................152.29 Penomoran............................................................................................................................152.30 Jaminan Keamanan...............................................................................................................152.31 Task Compatibility...............................................................................................................152.32 Work Flow Compatibility.....................................................................................................152.33 Consistency...........................................................................................................................152.34 Familiarity.............................................................................................................................16

1

florist.indokado.com – G64050766 _____________________________________________________________________

2.35 Simplicity..............................................................................................................................162.36 Direct Manipulation..............................................................................................................162.37 Control..................................................................................................................................162.38 What You See Is What You Get ..........................................................................................162.39 Flexibility..............................................................................................................................162.40 Responsiveness.....................................................................................................................162.41 Invisible Technology............................................................................................................16

BAB 3 KESIMPULAN..........................................................................................................................17

BAB 4 DAFTAR PUSTAKA................................................................................................................19

2

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.

3

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

4

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 LanguageWeb 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 FormPenggunaan 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 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 AnswerWeb ini tidak memiliki gaya dialog Question and Answer.

2.4 Function KeySitus ini menggunakan dialog style function keys. Pada web ini, tombol tab dapat digunakan untuk berpindah field dalam proses pengisian form.

2.5 Menu2.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.- 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 WebSaat 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 UtamaHalaman 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.

Gambar 1

2.8 Logo PerusahaanPada 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 ResolutionSalah 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 Link2.10.1 Beritahu TemanWeb 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 BaruSeperti 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 TerlarisPenjabaran 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 SpaceSeperti 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 :- 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.12Konsistensi2.12.1 Ukuran HalamanKeunggulan 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 BahasaDilihat 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 KapitalPada 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.

2.14Informasi yang Tidak Ter-UpdateInformasi 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 PentingTidak 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

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 SEBELUMNYAPemakaian 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

- Gunakan satu button, area atau link sederhana yang mewakili mengisi komentar pada halaman kata pelanggan.

2.18.3 Penyajian Menu UtamaMenu 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) – FramePada 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.

2.21Makna Kata yang AmbiguPada 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 TepatPada 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 10Gambar 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 LinkWeb 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.24BreadcrumbPada 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 11Perhatikan 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 PenggunaSalah 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 TepatPilihan mata uang yang tersedia hanya satu, tidak cocok untuk menggunakan Rollover semacam ini.

Gambar 12Solusi 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 KonsistenPada bagian Katalog >> International disajikan icon-icon bendera yang mewakili suatu negara. Seperti ditunjukkan pada gambar di bawah ini :

Gambar 13Icon 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.29PenomoranPada 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 KeamananSitus 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 CompatibilityPenugasan 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.33ConsistencyWeb 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)

2.34FamiliaritySecara 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.35SimplicitySitus ini memiliki halaman, link, dan list menu yang cukup banyak, namun tidak semua link ditampilkan dalam suatu halaman. Menu-menu sudah dikelompokkan menurut kategorinya, menu-menu 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 ManipulationWeb 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.37ControlAda 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.39FlexibilitySecara umum web ini kurang fleksibel karena masih didominasi dengan penggunaan mouse sebagai penunjuknya.

2.40ResponsivenessSitus 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 TechnologyDalam 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.

BAB 3 KESIMPULAN

Dikutip dari Web Pages That SuckList 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 don’t 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 doesn’t 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 doesn’t lead to the home page Situs ini tidak memiliki halaman utama. Klik logo membawa kita pada halaman katalog.

- Our sites uses”Under Construction” graphics Pada halaman internasional, icon bendera yang mewakili suatu negara tidak/belum

semuanya menggunakan flash.

- Our site’s symbols are not logical. Our shopping cart symbol doesn’t 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 doesn’t use color to convey meaning –red tex signifies ”this is important” Kata-kata seperti “klik di sini” tidak berwarna merah kecuali disorot oleh kursor.

- We understand ow our site’s 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”

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.