LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN ... - WordPress.com

4 downloads 222 Views 1MB Size Report
M.K INTERAKSI MANUSIA DAN KOMPUTER. SEMESTER .... Halaman keranjang belanja jika buku belum dipilih namun form biodata diisi……...11. Gambar 15.
LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP - 2007/2008

Kajian Situs http://www.inibuku.com

oleh Sri Danuriati G64051452 (http://sridanuriati.wordpress.com)

INSTITUT PERTANIAN BOGOR 2008

DAFTAR ISI DAFTAR ISI ………………………………………………………………………………………..i DAFTAR GAMBAR ………………………………………………………………………………ii BAB 1. PENDAHULUAN…………………………………………………………………………1 1.1 Web usability …………………………………………………………………………………..1 1.2 Web Inibuku.com……………………………………………………………………………....1 BAB 2. ANALISIS WEN INIBUKU.COM………………………………………………………..3 2.1 Menu ……………………………………………………………………………………………3 2.2 Breadcrumb……………………………………………………………………………………..6 2.3 Link ……………………………………………………………………………………………..6 2.4 Navigasi yang tidak sesuai ……………………………………………………………………..7 2.5 Konten…………………………………………………………………………………………..7 2.5.1 Home………………………………………………………………………………………….7 2.5.2 Detail kategori dan penerbit…………………………………………………………………..7 2.6 Prose Pemesanan………………………………………………………………………………10 2.6.1 Fungsi link “pesan” dan “baca selengkapnya” tidak berbeda………………………………10 2.6.2 Penggunaan beberapa tombol tidak tepat …………………………………………………...10 2.6.3 Tidak ada navigasi pada halaman keranjang belanja………………………………………...11 2.6.4 Muncul halaman “not found” setelah transaksi berakhir…………………………………….11 2.6.5 Tanpa melakukan pemilihan buku pemesanan bisa dilakukan………………………………11 2.7 Searching………………………………………………………………………………………12 2.7.1 Notification yang diberikan jika hasil pencarian tidak ada………………………………….12 2.8 Hubungi Kami…………………………………………………………………………………13 BAB 3. PENUTUP………………………………………………………………………………..14 3.1 Kesimpulan ……………………………………………………………………………………14 3.2 Saran …………………………………………………………………………………………..14 DAFTAR PUSTAKA……………………………………………………………………………...15

ii

DAFTAR GAMBAR Gambar 1. Halaman utama web inibuku.com....................................................................................5 Gambar 2. Link pada halaman home.................................................................................................6 Gambar 3. Text yang mirip dengan link.............................................................................................6 Gambar 4. Link pada halaman detail kategori....................................................................................6 Gambar 5. Menu penerbit setelah dikunjungi……………………………………………………...7 Gambar 6. Paging link pada detail kategori resep masakan...............................................................8 Gambar 7. Navigasi berbentuk logo………………………………………………………………..8 Gambar 8. Tombol ”submit” pada detail kategori fotografi...............................................................8 Gambar 9. Konfirmasi ketika menekan “submit” setelah mengisi kolom email…………………...8 Gambar 10. Paging link yang ada di atas list tabel buku resep masakan…………………………..9 Gambar 11. Tombol “Join Now!” pada detail kategori lain...............................................................9 Gambar 12. Halaman yang muncul jika link “pesan” di-klik……………………………………...10 Gambar 13. Halaman mengubah jumlah pemesanan……………………………………………...10 Gambar 14. Halaman keranjang belanja jika buku belum dipilih namun form biodata diisi……...11 Gambar 15. Hasil pencarian dari kata kunci “fuzzy”……………………………………………...12 Gambar 16. Notification setelah menekan tombol “sent” pada halaman hubungi kami………….13

iii

BAB 1 PENDAHULUAN 1.1 Web usability Web usability adalah salah satu faktor penting dalam mengembangkan sebuah web. Pengembang harus memahami prinsip-prinsip usability sebelum mengimplemen-tasikannya pada sebuah web. 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 : a.

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

b.

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

c.

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

d.

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

e.

Satisfaction 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 Inibuku.com

Inibuku.com merupakan web yang menawarkan dan menjual produk berupa buku. Jenis buku yang ditawarkan bermacam-macam, mulai dari buku fiksi sampai non fiksi yang dikarang oleh pengarang dalam negeri maupun luar negeri. Informasi rinci mengenai masing-masing produk juga diberikan. Seperti halnya web e-commers lainnya, web ini menyediakan fasilitas untuk proses pemesanan dan pembayaran produk. Secara garis besar tujuan utama adanya web ini, yaitu : Menjual buku-buku secara on-line selain untuk memudahkan customer dalam proses pembelian buku, juga menguntungkan pemilik “toko buku” inibuku.com karena tidak perlu menyediakan tempat untuk menjajakan produknya untuk dipasarkan.

1

Memudahkan customer dalam proses pencarian buku yang diinginkan karena web ini menyediakan fasilitas search dan menu-menu yang merepresentasikan kategori buku yang ada. Memberikan informasi mengenai buku-buku ter-update. Menyediakan informasi mengenai alamat dan nomor telepon yang dapat dihubungi oleh pengguna (informasi kontak).

2

BAB 2 ANALISIS WEB INIBUKU.COM Analisis terhadap web inibuku.com yang beralamat di www.inibuku.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 : 1. Nothing to Hide 2.

The Web User Experience

3.

Revisiting Early Web Usability Findings

4.

Prioritizing Your Usability Problems

5.

Search

6.

Navigation and Information Architecture

7.

Readability & Legibility

8.

Writing for the Web

9.

Providing Good Product Information

10. Presenting Page Elements 11. Balancing Technology with People's Needs 12. Design That Works Pembahasan pada makalah ini tidak dikelompokkan berdasarkan dua belas poin di atas. Pembahasan akan dikelompokkan berdasarkan sub-poin dari tiap-tiap poin sesuai dengan kondisi yang ditemukan pada web inibuku.com. Selain merujuk kepada buku Prioritizing Web Usability, analisis juga merujuk kepada buku The Essential Guide toUser Interface Design karangan Wilbert O. Galitz.

2.1

Menu

Menu merepresentasikan fasilitas yang disediakan sebuah web untuk membantu user dalam menemukan informasi yang dibutuhkan. Nama dari menu-menu navigasi sebuah web biasanya berkaitan dengan fungsi dan tujuan dari web itu sendiri. Web ini di-grab pada tanggal 28 mei 2008. Permasalahan yang dijumpai pada menu web ini adalah : a.

Menu buku baru yang berada di sebelah kiri atas (tepatnya dibawah logo) yang terdapat menu link bulan dan tahun terbit buku.

b.

Menu penerbit yang berada dibawah menu kategori. Terdiri dari banyak sekali kategori sehingga membuat web memanjang ke bawah dan membutuhkan scrolling.

c.

Tidak ada menu bestseller yang berisi buku-buku dengan penjualan terbaik. Padahal konten halaman home memuat buku-buku bestseller yang belum terkategori.

d.

Menu Hot New Releases dan Hot Bestseller dari amazon.com

e.

Ketika user berada pada halaman dari menu yang dipilih, warna huruf dari menu utama yang dipilih tersebut tidak berbeda dengan warna menu yang lain.

Solusi untuk permasalahan di atas adalah : a.

Nama menu buku baru tidak sesuai dengan menu link dibawahnya (bulan dan tahun) karena salah satu nama link tersebut yaitu desember 2007 tidak sesuai dengan waktu sekarang. Sebaiknya tidak perlu dikategorikan berdasarkan bulan dan tahun, tetapi langsung saja ditampilkan buku-buku terbaru. Menu tersebut berada pada konten

3

halaman web. Ketika user berada pada halaman selain home, link menu buku baru juga ditampilkan. Sehingga memudahkan user ketika ingin melihat buku-buku terbaru dari halaman manapun. b.

Submenu dari menu penerbit tidak perlu ditampilkan karena akan membuat halaman memanjang ke bawah. Sebaiknya hanya diberikan menu penerbit saja, dan ketika user menekan menu tersebut, web akan menampilkan halaman yang berisi penerbit dan berupa menu link. Hal tersebut akan mengurangi panjang halaman web sehingga user tidak perlu melakukan scrolling terlalu panjang.

c.

Menambahkan menu bestseller pada menu-menu yang berada di sebelah kiri konten. Menu tersebut menginformasikan buku-buku dengan predikat bestseller dan ketika user menekan menu bestseller, web akan menampilkan halaman dari bestseller.

d.

Menu tersebut seharusnya diletakkan paling bawah setelah menu kategori, buku baru, bestseller,dan penerbit, karena menu tersebut bukan menu yang akan ditampilkan oleh inibuku.com melainkan menu yang berada pada web amazon.com. ketika user menekan kedua menu tersebut akan langsung menuju web amazon.com.

e.

Memberikan warna yang berbeda pada menu yang dipilih oleh user ketika user berada pada halaman menu tersebut.

Gambar di bawah ini merupakan tampilan halaman utama (home) web inibuku.com :

4

Gambar 2. Halaman utama web inibuku.com.

5

2.2 Breadcrumb Breadcrumb digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini. Dengan menggunakan breadcrumb, pengguna juga dapat menelusuri path yang telah dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Pada web ini tidak terdapat breadcrumb. Breadcrumb memang dibutuhkan pada web ini karena setiap page rata-rata hanya memiliki jarak yang cukup panjang dari halaman home. Untuk melakukan suatu task, user juga harus melalui beberapa halaman. Sehingga user membutuhkan Breadcrumb untuk mengetahui halaman yang telah dilalui dan keberadaan saat itu. Pengembang web ini seharusnya memberikan breadcrumb untuk memudahkan user.

2.3

Link Pada web ini ada beberapa kekurangan dalam penggunaan link, yaitu :

Link-link pada web ini tidak konsisten dan ambigu. Contoh pada kasus ambigu terdapat pada halaman home. Link yang ditunjukkan pada gambar 2 mirip dengan teks (berwarna merah seperti link) yang ditunjukkan pada gambar 3. Sedangkan contoh kasus ketidakkonsistenan terdapat pada halaman detail kategori. Link kategori pada halaman detail kategori berwarna kuning (gambar 4). Sedangkan link pada halaman home berwarna merah, sehingga tidak konsisten dan bisa membingungkan user.

Gambar 2. Link pada halaman home.

Gambar 3. Text yang mirip dengan link.

Gambar 4. Link pada halaman detail kategori. Perbaikan yang dapat dilakukan untuk mengatasi kekurangan di atas adalah : Setiap link sebaiknya dibuat berwarna biru dan digarisbawahi karena telah menjadi konvensi umum bagi pengguna bahwa teks yang berwarna biru dan digarisbawahi merupakan sebuak link yang dapat di-klik. Perbaikan di atas dapat dilakukan oleh pengembang web dengan mengubah style web yang terdapat pada file CSSnya.

6

2.4 Navigasi tidak konsisten Navigasi merupakan petunjuk untuk mengetahui bahwa user berada pada halaman tertentu. Beberapa navigasi pada web ini sudah sesuai, namun masih ada navigasi yang tidak konsisten dan tidak sesuai. Seperti ketika kita me-klik gambar “The girls of riyadh” pada halaman home, maka akan muncul navigasi kategori khusus >. kemudian klik link “arab story”, maka akan muncul navigasi daftar buku berdasarkan kategori > arab story >. Padahal ”arab story” tidak terdapat pada daftar buku berdasarkan kategori. Solusi dari permasalah diatas seharusnya navigasi yang muncul ketika link “arab story” diklik adalah kategori khusus > arab story >.

2.5

Konten

2.5.1 Home Saat memasuki halaman home web ini, user akan menemukan halaman web yang cukup panjang karena berisi informasi buku dengan jumlah buku yang cukup banyak. Hal ini akan menyebabkan user melakukan proses scrolling yang cukup panjang, seperti pada gambar 1. Konten halaman home tersebut menampilkan buku-buku bestseller dan buku-buku ter-update lainnya. Solusi untuk permasalahan konten tersebut yaitu : a.

Buku-buku yang ditampilkan pada konten home jangan terlalu banyak agar user melakukan scrolling terlalu panjang. Tampilkan beberapa buku saja baik berdasarkan menu-menu tertentu maupun tidak.

b.

Menampilkan beberapa isi (buku) dari menu bestseller pada konten halaman home. Judul dari isi menu tersebut merupakan link menu bestseller itu sendiri. Ketika user menekan menu tersebut web akan menampilkan halaman dari bestseller.

c.

Menampilkan beberapa isi (buku) dari menu buku terbaru pada konten halaman home. Judul dari isi menu tersebut merupakan link menu buku terbaru itu sendiri. Ketika user menekan menu tersebut web akan menampilkan halaman dari buku terbaru.

2.5.2 Detail Kategori dan Penerbit Beberapa kekurangan pada halaman detail kategori dan penerbit : 1.

Jika kita memilih menu penerbit dan telah kita kunjungi halamannya, warna dari menu tersebut berubah warna. Ditunjukkan pada gambar 5. Namun pada menu kategori tidak demikian. Menu kategori yang telah kita pilih dan halamannya telah kita kunjungi tidak berubah warna.

Gambar 5. Menu penerbit setelah dikunjungi 2.

Detail pada kategori “anak” dan “pustaka muslim” dan beberapa halaman lain tidak konsisten dengan detail pada kategori lainnya. Misalnya pada detail kategori “anak” menampilkan detail dari tiap buku beserta gambarnya. Namun pada detail kategori lainnya hanya menampilkan list buku-buku saja tanpa penjelasan detail buku dan gambar.

7

3.

List buku-buku dari detail kategori dan penerbit tidak ada judul kolomnya. Selain itu list buku tersebut tidak terurut, sehingga menyulitkan user dalam mencari buku yang diinginkan.

4.

Pada beberapa kategori misalnya busana dan kecantikan tidak ada buku yang tersedia, namun tidak ada klarifikasi.

5.

Pada detail kategori “pustaka muslim” dan “anak”, rincian buku yang ditampilkan terlalu banyak sehingga muncul scrolling.

6.

Pada detail kategori “pustaka muslim” dan “anak, tidak ada menu dari semua kategori. Sehingga menyulitkan pengguna saat ingin kembali ke menu semua kategori.

7.

Bentuk paging link yang terdapat pada detail kategori dan penerbit tidak umum dan sulit dikenali. Pada kategori yang mengandung banyak informasi buku, misalnya “resep masakan”, paging link yang ditampilkan terlalu panjang.

Gambar 6. Paging link pada detail kategori resep masakan 8.

Navigasi yang berbentuk logo dari detail penerbit seolah bisa di-klik dan tidak umum.

Gambar 7. Navigasi berbentuk logo. 9.

Tombol ”submit” pada detail kategori “fotografi” dan pada beberapa kategori tidak konsisten dengan detail kategori lainnya.

Gambar 8. Tombol ”submit” pada detail kategori fotografi. 10. Jika kita memilih kategori komunikasi , maka akan muncul list buku pada kategori tersebut. Di atas list buku yang ditampilkan terdapat textbox untuk memasukkan email user jika ingin mendapatkan info buku komunikasi, seperti pada gambar 8. Jika user mengisikan alamat email pada kolom tersebut kemudian menekan “submit”, maka akan muncul konfirmasi bahwa pesan telah terkirim seperti pada gambar 9. Padahal user tidak memberikan pesan apapun melainkan hanya alamat email. Pesan pada konfirmasi tersebut tidak sesuai dengan task yang dilakukan user. Tombol “close” yang ada pada halaman konfirmasi tersebut juga tidak sesuai.

8

Gambar 9. Konfirmasi ketika menekan “submit” setelah mengisi kolom email 11. Jika saya memilih kategori resep masakan maka akan muncul list buku resep masakan dan paging link yang berada diatas dan dibawah list tabel buku, seperti pada gambar 6. Jika saya me-klik paging link terakhir maka tampilan paging link yang berada diatas list tabel akan berubah seperti pada gambar 10.Hal itu tidak sesuai dengan tampilan sebelumnya dan paging link yang berada dibawah list tabel.

Gambar 10. Paging link yang ada di atas list tabel buku resep masakan Solusi untuk permasalahan diatas : 1.

Detail kategori dan penerbit harus konsisten. Jika ingin menampilkan list buku (untuk detail kategori) atau list penerbit (untuk detail penerbit) , maka seluruh detail juga harus menampilkan detail dalam bentuk list tabel. List tabel tersebut juga harus ada judul kolom, misalnya pada kasus web ini, berikan judul kolom dengan judul buku dan pengarang. List pada salah satu kolom (sebaiknya kolom pengarang) juga harus terurut berdasarkan alphabet. Sehingga memudahkan user dalam pencarian buku yang dibutuhkan.

2.

Jika ingin manampilkan detail pada tiap buku beserta gambarnya, maka seluruh detail kategori dan penerbit juga harus menampilkan detail tiap buku. Untuk kategori yang memiliki subkategori (yang muncul setelah kategori dipilih), seharusnya dijadikan submenu kategori (disebelah kiri konten) pada halaman home. Sehingga konsisten dengan kategori lain yang tidak mempunyai subkategori.

3.

Jika maintainer belum bisa melengkapi tabel-tabel yang ada, sebaiknya diberikan klarifikasi bahwa pada kategori tersebut, buku belum tersedia.

4.

Tampilkan maksimal 5 detail buku, jika buku yang tersedia lebih dari itu maka lakukan paging link.

5.

Terkait dengan solusi point 2. Jika solusi tersebut diterapkan maka tidak akan muncul kekurangan pada point 5.

6.

Tampilkan menu-menu kategori seperti pada halaman home.

7.

Bentuk paging link sebaiknya angka terurut yang digarisbawahi (satu per satu) tergantung pada banyaknya buku yang ingin ditampilkan. Jika buku yang ditampilkan cukup banyak sehingga membutuhkan paging link yang banyak, maka paging link dibuat seperti : 1 2 ….. 9 10

8.

Navigasi sebaiknya menggunakan text saja.

9.

Tombol harus konsisten seperti pada halaman yang lain. Seperti gambar dibawah ini:

Gambar 11. Tombol “Join Now!” pada detail kategori lain. 10. Pesan yang muncul , jika user mengisikan alamat email pada kolom tersebut kemudian menekan “submit” seharusnya adalah “terima kasih karena sudah bergabung dengan kami”. Mengenai tombol “submit” juga seharusnya adalah tombol “join” seperti pada gambar 11. Sedangkan tombol “close” yang terdapat dalam halaman konfirmasi seharusnya adalah “kembali ke home”.

9

11. Bentuk paging link seharusnya adalah angka terurut yang digarisbawahi seperti yang diuraikan pada solusi no.6. Tampilannya seperti : 1 2 …. 12 13. Ketika paging link diklik maka tampilannya akan berubah seperti : 1 2 …. 12 13.

2.6 Proses Pemesanan 2.6.1 Fungsi link “pesan” dan “baca selengkapnya” tidak berbeda Ketika link “pesan” yang berada pada halaman home di-klik, web menampilkan halaman dari detail buku tersebut. Begitu juga ketika user me-klik link “baca lebih lengkap”, web akan menampilkan halaman dari detail buku tersebut. Kedua link tersebut memiliki fungsi yang sama yaitu menampilkan halaman dari detail buku. Kesalahan pada web ini berada pada halaman yang ditampilkan setelah user me-klik link “pesan”. Karena halaman yang ditampilkan oleh link “pesan” seharusnya bukan halaman detail buku tersebut melainkan halaman konfirmasi pemesanan. Seperti pada gambar dibawah ini :

Gambar 12. Halaman yang muncul jika link “pesan” di-klik Seharusnya ketika user me-klik link “pesan”, web ini menampilkan halaman keranjang belanja dengan tabel pemesanan berisi buku yang dipesan tersebut.

2.6.2

Penggunaan beberapa tombol yang tidak tepat

Jika user ingin membeli buku yang ada pada web ini, maka user bisa menekan tombol “Beli/Buy” yang terletak dibawah detail buku yang ingin dibeli yang berada pada halaman info rinci buku. Kekurangan yang ada pada tombol tersebut adalah labelnya, yaitu “Beli/Buy” . Karena keseluruhan web ini menggunakan bahasa indonesia, maka penamaan tombol-tombolnya juga dengan menggunakan bahasa indonesia sehingga konsisten. Maka solusi dari ketidakkonsistenan tombol tersebut adalah dengan memberikan label “Beli” pada tombol tersebut. Begitu juga dengan tombol “reset” yang berfungsi untuk menghapus informasi pemesanan. Seharusnya fungsi tombol tersebut bukan untuk menghapus informasi pemesanan, tapi mengubah informasi pemesanan. Sehingga label tombol tersebut adalah “ubah”, dan text yang ada diatasnya yang merupakan tulisan “ diubah menjadi Permasalahan lain juga terdapat pada halaman mengubah jumlah pemesanan. Jika user sudah melakukan pemesanan dan berada pada halaman keranjang belanja, dan ingin melakukan perubahan jumlah pada buku yang dibeli, maka user bisa me-klik link “ubah jumlah”. Web akan menampilkan halaman “mengubah jumlah pemesanan”, seperti pada gambar dibawah ini :

Gambar 13. Halaman mengubah jumlah pemesanan bentuk tombol “koreksi” tidak nampak seperti tombol yang bisa di-klik, karena jika kita menyorot tombol tersebut dengan meletakkan pointer mouse kita diatas tombol tersebut, tidak terlihat warna yang berbeda ataupun tidak ada perbedaan pada pointer mouse kita.Penggunaan nama / label pada tombol tersebut juga kurang tepat.

10

Solusi untuk permasalah diatas adalah dengan memberikan warna yang sedikit berbeda ketika pointer dari mouse user berada diatas tombol tersebut. Atau dengan memberikan bentuk pointer mouse seperti “hand tool”, ketika user menyorot tombol tersebut. Sedangkan solusi untuk penamaan tombol tersebut adalah dengan memberikan label “simpan”. Karena setelah user memasukkan angka yang diinginkan dan menekan tombol simpan, maka angka terbaru yang dimasukkan user akan disimpan pada tabel dan akan ditampilkan pada tabel keranjang belanja setelah user me-klik tombol “simpan”.

2.6.3 Tidak ada navigasi pada halaman keranjang belanja Ketika user melakukan pembelian buku dengan me-klik button “buy/beli” yang ada pada halaman info rinci buku yang ingin dibeli, maka web ini akan menampilkan halaman keranjang belanja. Namun pada halaman tersebut user tidak mengetahui keberadaannya karena tidak ada navigasi yang menunjukkan bahwa user berada pada halaman keranjang belanja. Solusi dari permasalah ini adalah dengan memberikan navigasi pada halaman keranjang belanja sehingga user mengetahui saat itu berada pada halaman keranjang belanja.

2.6.4. Muncul halaman “Not Found” setelah transaksi berakhir Setelah user memilih buku yang ingin dibeli dan mengisikan form mengenai biodata, jika user ingin menyelesaikan proses pemesanan maka user bisa menekan button “selesai” yang berada disebelah kanan bawah dari halaman keranjang belanja. Setelah itu Web akan menampilkan halaman dengan tampilan berbeda dengan halaman lain dari web yang berisi notification bahwa proses pemesanan sudah selesai. Dibawah notification tersebut ada tombol “close”, yang jika diklik maka akan muncul halaman “not foud”. Berikut ini kekurangan-kekurangan dari web tersebut: 1. Tampilan halaman notification tidak konsisten 2. Isi notification juag belum tepat 2. Penggunaa tombol “close” pada halaman notification tidak sesuai. 3. Munculnya halaman “not found” ketika salah satu tombol di-klik mengindikasikan bahwa web ini belum berfungsi dengan baik. Solusi untuk permasalah diatas adalah: Tampilan halaman notification seharusnya diseragamkan seperti halaman “mengubah jumlah pemesanan “ yang terdapat pada gambar 13. Notification yang lebih tepat yaitu “terima kasih atas pemesanan anda”. Yang seharusnya ada pada halaman tersebut bukan tombol melainkan link “kembali ke home”, yang jika user me-klik link tersebut maka web akan menampilkan halaman home dari inibuku.com.

2.6.5. Tanpa melakukan pemilihan buku, pemesanan bisa dilakukan Jika user menekan menu keranjang belanja dan belum melakukan pemilihan buku satupun, maka web akan tetap menampilkan halaman keranjang belanja. Namun pada tabel pemesanan ada notification bahwa user belum melakukan pemilihan buku. Jika user mengisi form data pemesanan dan menekan tombol “kirim data pemesanan”, maka akan muncul halaman konfirmasi informasi pemesanan. Jika tombol “kembali ke keranjang belanja” yang ada pada halaman konfirmasi tersebut di-klik, maka web akan menampilkan halaman keranjang belanja namun dengan tampilan yang berbeda seperti gambar dibawah ini.

11

Gambar 14. Halaman keranjang belanja jika buku belum dipilih namun form biodata diisi Jika tombol “selesai” di-klik maka akan muncul notification bahwa proses pemesanan telah selesai. Padahal kita belum memilih satupun buku yang ingin dipesan. Hal itu tidak sesuai , karena user belum melakukan pemilihan buku namun web menyatakan bahwa proses pemesanan telah selesai. Seharusnya jika user belum melakukan pemilihan buku, dan user me-klik keranjang belanja, web hanya memberikan notification “anda belum memilih barang yang dipesan”. Dan dibawah notification tersebut terdapat tombol “kembali ke home” sehingga user hanya punya pilihan untuk me-klik tombol tersebut. Halaman tersebut hanya berisi notification dan tombol “kembali ke home” tanpa ada form pengisian untuk informasi pemesanan. Sehingga dapat dipastikan bahwa user yang mengisi form pengisian biodata tersebut adalah user yang sudah melakukan pemilihan buku sebelumnya.

2.7 Searching Searching merupakan salah satu fungsi yang harus ada pada sebuah website. Fungsi searching akan memudahkan pengguna untuk menemukan informasi tertentu yang ada di web sehingga lebih mudah dan cepat. Pengguna hanya memasukkan beberapa kata sebagai kata kunci dan sistem web akan menampilkan halaman hasil yang sesuai dengan kata kunci. Penggunaan fungsi ini tentu lebih menghemat waktu pengguna daripada harus browsing ke semua halaman web untuk mendapatkan informasi tertentu. Ada beberapa bentuk searching, salah satunya adalah searching berdasarkan kategori tertentu, sehingga membatasi pilihan kata yang akan dimasukkan oleh user ke dalam textbox yang tersedia. Pada web inibuku.com, fungsi searching termasuk dalam pencarian berdasarkan kategori yaitu judul buku dan pengarang. Sebelum memasukkan input, user terlebih dahulu memilih kategori judul buku atau pengarang. Setelah kategori pencarian sudah dipilih, user bisa memasukkan input yang sesuai dengan keinginan. Dengan fungsi searching berdasarkan kategori, user dimudahkan dalam menentukan kata yang akan dimasukkan. Permasalahan fungsi searching pada web inibuku.com:

2.7.1 Notificaton yang diberikan jika hasil pencarian dari kata kunci yang dimasukkan tidak ada. Misalkan user memilih kategori pencarian “judul buku” dan memasukkan kata kunci Fuzzy. Maka akan muncul hasil pencarian seperti pada gambar 13. Begitu juga dengan pencarian berdasarkan kategori pengarang. Kekurangannya yaitu ; 1.

Textbox pencarian tidak berisi kata kunci yang telah dimasukkan dan diproses dalam fungsi pencarian.

2.

Tombol “GO” tidak konvensional.

3.

Navigasi dan notification yang diberikan tidak informatif.

12

Gambar 15. Hasil pencarian dari kata kunci “fuzzy” Solusi dari permasalah diatas yaitu textbox berisi katakunci yang dimasukkan, misalnya pada contoh diatas adalah “Fuzzy”. Mengenai masalah tombol, secara konvensional label dari tombol pencarian adalah “search”. Namun karena konten pada web ini berbahasa Indonesia, maka harus disesuaikan yaitu dengan memberikan label “cari” pada tombol pencarian. Sedangkan navigasi dari pencarian tersebut seharusnya adalah “ ”. Dan notification yang diberikan seharusnya adalah “hasil pencarian dengan kata kunci Fuzzy tidak ditemukan”.

2.8 Hubungi kami Pada menu utama web ini ada menu “hubungi kami” yang didalamnya terdapat form untuk mengisikan pesan, nama dan alamat email user. Selain itu ada tombol “sent” yang digunakan untuk mengirimkan pesan dan data user ke database web ini. Kesalahan pertama pada halaman menu ini adalah tombol “sent” tidak konsisten dengan konten web yang menggunakan bahasa Indonesia. Permasalah kedua adalah ketika saya mencoba untuk tidak mengisikan satupun form pada halaman hubungi kami, kemudian tombol “sent” saya klik, maka akan muncul konfirmasi seperti gambar 16. Padahal saya belum mengisikan satupun form yang ada pada halaman hubungi kami.

Gambar 16. Notification setelah menekan tombol “sent” pada halaman hubungi kami Seharusnya label dari tombol “sent” tersebut diubah menjadi “kirim” sehingga penamaan tombol tersebut sesuai dengan yang lainnya. Sedangkan solusi untuk permasalah kedua adalah notification bahwa user belum mengisikan kolom pada form tersebut. Jika yang belum diisikan hanya kolom email saja sedangkan kolom yang lainnya sudah terisi,maka notification yang muncul adalah “kolom email belum terisi, silakan klik disini untuk kembali”. Begitu juga jika kolom yang lain belum terisi.

13

BAB 3 PENUTUP 3.1

Kesimpulan

Dalam tugas akhir mata kuliah Interaksi Manusia dan Komputer ini, saya hanya menganalisis kekurangan dan permasalah yang ada pada web inibuku.com. Kelebihan dan fungsifungsi yang sudah sesuai secara konvensional tidak saya bahas. Pada pengembangan web inibuku.com masih terdapat banyak kekurangan menyangkut masalah usability. Kekurangan-kekurangan yang ditemukan pada web ini, antara lain : menu-menu yang belum sesuai, tidak terdapat breadcrumb, teks yang mirip link, navigasi yang tidak sesuai, beberapa permasalah pada konten home dan detail kategori dan penerbit, permasalah pada proses pemesanan dan fungsi searching dan kekurangan pada halaman “hubungi kami” . Kekurangankekurangan ini membuat web terlihat kurang profesional. Kondisi ini dapat membuat kepercayaan pengguna/pelanggan terhadap perusahaan berkurang.

3.2

Saran

Tugas akhir ini diharapkan menjadi bahan masukan bagi pengembang untuk mengembangkan web inibuku.com dengan lebih memperhatikan faktor-faktor usability. Selain itu harapan saya, dengan adanya tugas akhir ini bisa menjadi referensi bagi siapapun yang ingin membangun dan mengembangkan web. Bagi pengembang web inibuku.com, kekurangankekurangan yang masih ditemui, sebaiknya segera diperbaiki agar web dapat terlihat profesional. Dengan demikian, kepercayaan pengguna/pelanggan terhadap inibuku.com akan meningkat.

14

DAFTAR PUSTAKA Chak A. 2003. Submit Now. New Riders Publishing Nielsen J. 2003. Introduction to Usability. http://www.useit.com/alertbox/20030825.html Nielsen J & Loranger H. 2006. Prioritizing Web Usability. Berkeley : New Riders.

15