Analisis Website Www

LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER

SEMESTER GENAP – 2007/2008

Kajian Situs http://www.al-aisar.com

oleh: Diyan Kurniawan

G64052539 (www.abuabdillahibnusani.wordpress.com)

INSTITUT PERTANIAN BOGOR 2008

2

�

Kata Pengantar

Website www.al-aisar.com adalah salah satu website yang memasarkan berbagai macam jenis produk-produk islam, diantaranya kaset Mp3, Vcd, Buku, Kitab dan lain-lain. Website juga menyediakan berbagai kategori artikel islam yang bisa dibaca langsung oleh user. Demi memberikan kepuasan yang maksimal pada user, sudah seharusnya suatu website disajikan dalam performa terbaiknya. Untuk itu, haruslah diketahui kekurangan-kekurangan dari website sehingga kekurangan tersebut bisa segera diperbaiki. Beberapa kekurangan tersebut dan solusinya akan dibahas dalam laporan ini.

Adapun tujuan utama dari penulisan laporan ini adalah sebagai implementasi dari tugas akhir mata kuliah Interaksi Manusia dan Komputer. Selain itu, penulis juga berharap agar tulisan ini bisa menjadi bahan pertimbangan bagi author website demi meningkatkan kualitas website itu sendiri. Dalam laporan ini akan dibahas tentang user interface, usability dan user experience dari website di atas.

Penulis sadar bahwa masih ada kekurangan atausesuatu yang berlebihan dari penulisan laporan ini, karena itu penulis harap para pembaca sekalin bisa ikut berpartisipasi dengan memberikan kritik ataupun saran yang sifatnya membangun. Untuk memberikan kritik atau saran pembaca sekalian bisa menyaampaikannya melalui www.abuabdillahibnusani.wordpress.com atau ke [email protected] .

�Bogor, 16 Juni 2008

Penulis

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

3

�

Daftar Isi

Kata Pengantar….………………………………………………………………………………….....2 Daftar Isi……….…………………………………………………………………………………...….3 Pendahuluan………………………………………………………………………………………..….4

A. User Interface…………………………………………………………………………………..4 B. Usability………………………………………………………………………………………...4 C. User Experience………………………………………………………………………………..4

Halaman Utama Website………………………………………………………………………….......5 Pembahasan

1. Pembahasan User Interface ...………………………………………………………….………6 1.1. Pembahasan fungsi-fungsi yang ada di Header…………………………………….….…..6 1.2. Pembahasan pada kolom pertama ( kolom sebelah kiri )……………………………...….6 1.3. Pembahasan kolom 3 ( kolom paling kanan )………………………………………….…..6 1.4. Pembahasan kolom kedua ( Halaman Isi )…………………………………………………7 1.5. Pembahasan Tambahan……………………………………………………………………10

• Webspace………………………………………………………………………..…10 • Link…………………………………….………………………………………..…11 • Voting………………………………….…………………………………………...11 • Konsistensi Bahasa………………………………………………………………..11 • Member dan nonMember……………….………………………………..............11

2. Pembahasan Usability dan User Experience………………………………………………...11 Penutup……………………………………………………………………………………………….14

1. Kesimpulan………………………………………………………………………...……………14 2. Saran……………………………………………………………………………………….……14

Daftar Pustaka……………………………………………………………………………..………....15

4

�

Pendahuluan

A. User Interface User interface merupakan tampilan perangkat lunak yang berhadapan langsung dengan

pengguna. User interface memiliki peranan yang sangat penting dalam menentukan kemudahan user menjalankan program. Tujuan dari user interface adalah :

1. Mengurangi pekerjaan a) Visual b) Intelektual c) Ingatan d) motor/gerakan

2. Meminimalkan/menghilangkan kekhawatiran gaptek

B. Usability Usability adalah sebuah atribut kualitas yang menilai tingkat kemudahan user interface

untuk digunakan ( Jakob Nielsen ). Web usability adalah salah satu faktor penting dalam mengembangkan sebuah situs. Pengembang harus memahami prinsip-prinsip usability sebelum mengimplemen-tasikannya pada sebuah situs . 5 komponen yang mendefinisikan Usability, yaitu : a. Efficiency

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

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

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

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

e. Satisfaction Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

Tujuan dari usability adalah : 1. Efektif digunakan 2. Efisien digunakan 3. Aman digunakan 4. Punya utility yang baik 5. Mudah dipelajari 6. Mudah diingat bagaimana menggunakannya

C. User Experience User experience bisa berupa kesan yang diperoleh user setelah menggunakan suatu

perangkat lunak (juga termasuk website). Tujuan dari user experience adalah : 1. Memuaskan 9. Mengejutkan ( positif ) 2. Menyenangkan 10. Memotivasi 3. Menghibur 11. Menantang 4. Menarik 5. Menumbuhkan kreatifitas 6. Bermanfaat 7. Mempengaruhi 8. Membantu user

Hindari hal-hal yang menyebabkan user : 1. Bosan 3. Frustasi 2. Jengkel

5

�

Halaman Utama Website

6

�

1. Pembahasan User Interface 1.1 Pembahasan fungsi-fungsi yang ada di Header

Pada Fungsi Login ada hal yang perlu menjadi

pertimbangan bagi developer dalam penggunaan icon user dan password. Hal tersebut mungkin tidak akan menjadi masalah bagi user yang sudah terbiasa dengan icon-icon tersebut, akan tetapi bagi user yang masih awam dengan icon tersebut, ia akan kebingungan

dengan maksud dari icon tersebut. Sebaiknya developer mengganti icon tersebut dengan kata user dan password saja seperti pada fungsi login di email. Developer juga bisa membuat halaman tersendiri untuk fungsi login dengan tetap menggunakan kata dan bukan icon.

Pada fungsi Cari, posisi button Cari tidak simetris dan terlalu rapat dengan textfield. Pindahkan saja button cari ke sebelah kanan icon cari dan jangan dibawahnya.

Posisi button Logout dan pesan tidak simetris

dengan fungsi cari. Simetriskan pesan dengan batas kiri fungsi cari dan pindahkan button Logout ke sebelah kanan fungsi Cari. Fungsi icon setting di sebelah fungsi Cari dibuang saja karena

membingungkan user dan tidak terlalu bermanfaat. 1.2 Pembahasan pada kolom pertama ( kolom sebelah kiri )

Pada menu kategori terdapat kesalahan: • Subkategori memiliki posisi sejajar dengan kategorinya sehingga sulit dibedakan

meskipun dijadikan list. • Subkategori tidak terurut berdasar alphabet sehingga

akan menyulitkan user dalam melakukan pencarian produk berdasarkan kategori. Untuk memudahkan user, buatlah agar list pada subkategori terurut berdasarkan alphabet.

• Adanya kesalahan penomoran (no 5 hilang), seolah-olah ada kategori yang hilang sehingga user akan kebingungan. Kategori juga diberi tanda bullet sehinga seolah-olah ia merupakan bagian dari sebuah list padahal bukan.

• Kolom untuk menu kategori kurang lebar sehingga ada beberapa karakter yang hilang / tertutup. • Kategori bahasa (Bahasa Indonesia dan Bahasa Arab) mengesankan seolah-olah web bisa

ditampilkan dalam dua bahasa. Padahal kategori tersebut untuk menampilkan produk-produk yang menggunakan bahasa Indonesia atau bahasa Arab. Developer harus memperbaiki kedua kesalahan tersebut.

1.3 Pembahasan kolom 3 ( kolom paling kanan )

Link “selengkapnya…” jangan di blok tapi cukup di beri warna biru karena warna biru secara

umum merepresantiskan sebuah link.

Tampilan layanan pemesanan via sms tidak simetris dengan tampilan dibawahnya sehingga

7

�

menghasilkan white space yang cukup besar dan mengganggu penglihatan. Buat agar tampilannya simetris dengan tampilan dibawahnya.

Tanda panah sebaiknya dibuang karena seolah-olah memiliki fungsi tertentu padahal ia hanyalah sebuah icon.

• Dalam Website ini, link kebanyakan menggunakan warna merah padahal sebaiknya sebuah link

diberi warna biru karena mayoritas link direpresentrasikan oleh warna biru. • Hindari penggunaan garis bawah disertai bold karena hal tersebut mengesankan bahwa seolah-

olah kalimat tersebut merupakan sebuah link. Jika ingin memberikan sebuah penekanan maka cukup di Bold saja tanpa garis bawah.

• Penggunaan kalimat dalam satu baris terlalu banyak sehingga sebaiknya dikurangi (maksimal 15 kata perbaris).

• Posisi kalimat juga tidak rapi sehingga mengganggu pembaca. Hal ini bisa diatasi dengan membuatnya menjadi sama rata kanan dan kiri.

1.4 Pembahasan kolom kedua ( Halaman Isi )

Hindari pewarnaan yang berbeda-beda pada background teks karena dapat menimbulkan

kebingungan bagi user. User mungkin akan berpikir bahwa background yang berbeda merepresenasikan sesuatu yang berbeda pula. Untuk font size sebaiknya sama karena ia berada dalam satu halaman yang sama, menu yang sama dan saling berdekatan.

Posisi link selengkapnya jangan terlalu

jauh sehingga user tidak perlu terlalu jauh menggerakkan mouse. Letakkan saja link tersebut di sebelah bawah kata ” mereka…”. Hal ini juga akan menghemat lebih banyak space.

Pada tampilan di bawah terlihat banyak sekali kesalahan yang terjadi antara lain :

• Posisi antara gambar dan judul produk berantakan sehingga user akan kesulitan membaca produk tersebut dan sangat menggangu.

• Icon button BELI sangat tidak cocok karena menggunakan icon sepatu padahal produk yang ditawarkan merupakan buku / CD / MP3 sehingga terjadi ketidaksinkronan dengan produk

8

�

yang dijual. Icon sebaiknya diganti dengan icon button yang lain yang lebih sesuai. • Tidak ada space antar produk atau posisi antar produk terlalu berdekatan. Beri sedikit space

agar terlihat lebih rapi. • Penempatan keterangan produk tidak simetri. • Penempatan harga dan jumlah vertikal padahal posisi horizontal lebih baik. • Jumlah sulit dimengerti apakah ia merepresentasikan jumlah stok atau jumlah yang ingin

dibeli jika kita mengklik beli.

Pada gambar disamping ada info “ You Save “ yang sulit dipahami secara

langsung padahal yang dimaksud adalah diskon, jadi kata “ You Save ” lebih baik diganti dengan “ Diskon ”.

Fungsi “ display ” sebaiknya dibuang saja alasannya adalah :

• Karena sudah dihandle oleh fungs “halaman”. • Jika user sampai menggunakan display

maksimum maka akan ada scroll yang cukup panjang sehingga memaksa user untuk terus scroll naik – turun, sementara tidak ada fungsi yang bisa menghandlenya seperti fungsi “kembali ke atas” atau yang lainnya.

Bagian more categories seperti disamping cukup membantu akan tetapi, susunannya tidak terlalu rapi sehingga perlu diperbaiki. Perbaikan bisa dilakukan dengan membuat posisinya menjadi rata kiri dan susunannya dibuat agar terurut berdasarkan alphabet. Link jangan diberi warna merah tapi berilah warna biru.

Pada gambar di samping terlihat bahwa posisi “ berikut >” terlalu jauh ke bawah. Begitu juga posisi

“ [ kembali ] ” yang terlalu jauh dari “ berikut > ” sehingga banyak sekali white space yang terbuang. Pemberian tanda juga tidak sinkron antara berikut dan kembali ( > dan [ ] ). Buat agar posisi “berikut >” dan “[ kembali ] ” tidak terlalu jauh ke bawah dan buat agar keduanya saling berdekatan. Posisikan “berikut >” di sebelah kanan “[ kembali ] ” serta sinkronkan tanda diantara keduanya

Pemberian gambar tidak usah terlalu banyak jika tidak begitu penting, Untuk masalah di atas,

gambar cukup 1 saja posisikan disebelah kiri seperti yang ada di atas dan ukurannya sedikit diperbesar.

Pada gambar di samping terdapat penggunaan

breadcrumb yang terlalu banyak sehingga terjadi pemborosan dalam pemanfaatan space. Untuk menghemat space gunakan saja breadcrumb yang atas karena lebih memberikan informasi kepada user daripada yang bawah.

9

�

Penggunaan icon untuk fungsi update sulit dimengerti oleh user karena user baru bisa mengetahui

fungsi icon tersebut setelah menyorotnya terlebih dahulu. Sebaiknya developer menambahkan kata pada icon atau mengganti icon tersebut dengan kata saja sehingga user tidak perlu menyorotnya terlebih dahulu untuk mengetahui fungsi dari icon tersebut. Icon hanya akan berguna bagi user yang sudah terbiasa.

Pada gambar di atas terlihat ketidakkonsistenan tampilan dari proses pembelian. Gambar

sebelah kiri ditampilkan dalam 2 kolom, akan tetapi gambar sebelah kanan ditampilkan dalam 3 kolom. Penempatan tanda panah untuk gambar di sebelah kiri seharusnya ada di sebelah kanan kata “ PROSES TRANSAKSI ” bukan di sebelah kirinya. Pada gambar di atas terlihat bahwa pemilihan kata terlalu panjang dan posisinya pun tidak simetris. Kata “Lanjutkan pembelian” bisa diganti dengan “ Tambah”. Kata” PROSES TRANSAKSI” sebaiknya jangan huruf kapital semua. Pemilihan warna link pun jangan merah/hijau karena warna merah memberikan kesan peringatan / adanya kesalahan.

Pada tabel Informasi Pengiriman penggunaan radio button sebaiknya diberi default jangan dibiarkan

kosong. Sebaiknya di sebelah kiri button Next ditambahkan pula button Back sehingga jika terjadi kesalahan pengisian pada form sebelumnya, user yang bisa memperbaikinya. Tambahkan pula button Cancel karena mungkin saja user ingin membatalkan pembelian. Buat agar button Cancel di paling kanan, button Next di tengah dan button Back di kiri lalu posisikan ketiganya di sebelah kanan sesuai urutan tadi.

Pada tabel informasi pelanggan, posisi detail informasi tidak stabil sehingga tampak berantakan,

yang mana posisi perusahaan tidak sama dengan nama perusahaan dan “ : ” berada dibawah. Posisi detail informasi pada tabel ” informasi pelanggan” dan “informasi tagihan” tidak konsisten di mana pada tabel “informasi pelanggan” menggunakan rata kiri sedangkan pada “informasi tagihan” menggunakan rata kanan.

Text field “ Alamat” masih terlalu pendek sehingga sebaiknya di buat agar lebih panjang lagi karena

alamat yang dibutuhkan merupakan alamat lengkap yang tentunya harus memiliki textfield yang panjang.

Pada menu Lupa Password, posisi antara text field Username dan Alamat E-Mail telalu rapat

sehingga tampak seperti sebuah tabel. Hal serupa juga terdapat pada menu registrasi member. Untuk mengatasi masalah tersebut sebaiknya posisi antar text field diberi jarak dan jangan terlalu rapat atau terlalu jauh. Posisi button Kirim Password dan

Kirim Registrasi (pada menu registrasi) sebaiknya diletakkan di sebelah kanan bawah.

10

�

Gambar di atas terdapat pada bagian akhir tulisan artikel –artikel yang ada pada halaman Artikel Da’wah . Kalimat About the Author ditambah background berwarna mengesankan seolah-olah ia adalah sebuah button yang me-link suatu halaman yang menjelaskan tentang author. Setelah dicoba meng-klik ternyata ia bukan button tapi hanya sebagai kalimat penutup yang diberi background berwarna saja. Oleh karena itu, sebaiknya tampilan tersebut dihilangkan saja karena akan membingungkan user.

Bullet yang digunakan tidak sinkron dengan

bullet kategori lain padahal berada pada halaman yang sama ( halaman Artikel Dakwah). Jangan gunakan bullets yang menyerupai radio button

karena bisa membingungkan user. Semua user yang sedang online ditampilkan. Hal ini menyebabkan pemborosan webspace pada

kolom di sebelah kolom user online. Webspace yang terbuang sebanding dengan banyaknya nama user yang ditampilkan, makin banyak nama user yang ditampilkan maka makin banyak pula webspace yang terbuang. Karena itu, cukup

tampilkan saja jumlah dari user yang sedang online dan tidak perlu manampilkan namanya.

gambar1 gambar2

Tampilan hasil fungsi Cari sangat berbeda. Gambar yang di sebelah kanan merupakan hasil pencarian di katalog dan gambar sebelah kiri adalah hasil pencarian pada fungsi Cari yang ada di sebelah kanan atas website.

Logo dan nama perusahaan menjadi link ke home ( logo dan nama dibuat menggunakan satu file

image). Sebaiknya hanya logo yang menjadi link ke home; nama perusahaan sebaiknya dibuat dengan teks menggunakan HTML atau file image yang terpisah dari logo.

1.5 Pembahasan Tambahan

• Webspace Pada kolom pertama ( kolom Kategori Produk ) terdapat banyak webspace yang

terbuang dan kurang dimanfaatkan secara optimal. Pada satu sisi terdapat webspace yang terbuang sementara di sisi lain terjadi kesalahan penempatan pada subkategori dimana ada beberapa karakter dari subkategori yang hilang contohnya: seharusnya keluarga & pendidikan malah menjadi keluarga & pendidik. Kedua hal tersebut dapat diatasi sekaligus dengan menempatkan menu kategori lebih ke kiri lagi sehingga webspace bisa lebih dioptimalkan dan karakter yang hilangpun bisa dihindari.

Space pada header pun dapat lebih dioptimalkan dengan memperbesar font size nama perusahaan dan logonya.

11

�

• Link Terdapat kekurangan lainnya dalam masalah link, yaitu link-link yang telah

dikunjungi sebelumnya tidak berubah warna. Hal ini memaksa user untuk mengingat-ingat link-link mana yang telah ia kunjungi padahal hal tersebut sedapat mungkin harus dihindari. Selain itu mayoritas link berwarna merah, warna tersebut masih bisa diubah dengan meng-klik icon “ Setting ” yang ada di sebelah kanan fungsi “ Cari”. Ada tiga pilihan warna yang disediakan yaitu merah (default), hijau dan biru. Semua link yang semula berwarna merah akan berubah secara otomatis sesuai dengan warna yang dipilih oleh user. Penggantian warna juga akan mengubah warna background pada header.

• Voting

Developer sebaiknya menambahkan fungsi untuk voting agar user bisa mengetahui bagaiman tanggapan user lainnya atas suatu produk dalam website tersebut. Hal ini akan memberikan masukan tambahan bagi user dalam memilih barang berkualitas dan yang banyak diminati.

• Konsistensi Bahasa

Sebagian besar bahasa yang digunakan adalah bahasa indonesia. Akan tetapi, masih ada beberapa istilah yang menggunakan bahasa inggris padahal istilah tersebut lebih baik menggunakan bahasa indonesia saja, seperti “more categories” akan lebih sesuai jikadiganti dengan “kategori lainnya”. Ketidaksinkronan bahasa terkadang bisa membuat bingung user.

• Member dan nonMember Perbedaan di antara keduanya adalah dalam hal proses transaksi. Member bisa

melakukan proses transaksi pembelian, akan tetapi tidak demikian dengan nonmemeber. Adapun selebihnya member dan nonmember mempunyai hak akses yang sama. Dalam hal ini author kurang melakukan inovasi untuk menarik minat user agar menjadi member. Untuk menarik minat user agar menjadi member, author dapat berinovasi dengan cara memberikan layanan plus bagi para member seperti pemberian layanan milist atau pengiriman informasi tentang produk-produk terbaru.

2. Pembahasan Usability dan User Experience Website www.al-aisar.com merupakan sebuah website yang menjual produk-produk islami seperti buku, kitab, mushaf, kaset ( Mp3 dan VCD ) dan sebagainya. Bagi orang yang hendak membeli produk-produk islam secara online website ini cukup mudah untuk digunakan. Untuk bisa melakukan transaksi user harus login terlebih dahulu. Jika user belum memiliki account user bisa mendaftar terlebih dahulu dan gratis. Setelah memiliki account dan login, user bisa memilih kategori produk pada menu kategori di sebelah kiri dan produkpun akan ditampilkan di halaman isi, selanjutnya user tinggal mengikuti petunjuk-petunjuknya. Salah satu hambatan adalah jika user belum terlalu familiar dengan icon-icon yang ada di dalamnya sehingga user perlu mempelajarinya terlebih dahulu. Website ini bisa dipakai oleh user yang sudah memiliki pengalamn menggunakan internet dengan usia antara 7-50 tahun, karena orang yang lebih tua dari umur tersebut akan kesulitan membacanya mengingat huruf yang cukup kecil dan kebanyakan dari mereka tidak kuat duduk di depan komputer. Adapun yang agak berbeda dari web-web kebanyakan adalah pemakaian warna untuk link, yang mana pada saat memasuki website ini, mayoritas link memakai warna merah dan bukan biru. Hal ini mungkin membutuhkan sedikit waktu bagi user untuk menyesuaikan diri.

Untuk dapat melakukan pembelian di web ini dengan baik user setidaknya pernah membeli atau melakukan uji coba pembelian minimal satu kali dan berhasil, jika user sudah melakukannya maka untuk yang berikutnya user pasti bisa menggunakannya dengan baik dan lebih cepat. Ada beberapa masalah yang bisa mengurangi kepuasan user di antaranya : a) Ada beberapa bagian pada website yang sulit untuk dipahami maksud dan kegunaannya,

diantaranya adalah seperti pada halaman Artikel dakwah. Bagian tersebut adalah seperti pada gambar berikut ini

12

�

Selain posisisnya yang agak berjauhan, link-link tersebut sulit dipahami. maksud dan tujuannya kecuali dengan mencobanya terlebih dahulu. Link “Selanjutnya >>” akan me-link ke halaman selanjutnya tapi masih dalam judul artikel yang samat. Link “ < Sebelum ” atau “ Berikut> ” akan me-link ke artikel sebelum atau sesudah yang erbeda judul dengan artikel yang sedang dibaca. Adapun link “ [ Kembali ] ” akan me-link ke halaman yang dibuka sebelumnya. User tidak akan tahu perbedaan dari link-link tersebut kecuali dengan mencoba semuanya dan ini akan menghabiskan banyak waktu.

b) Pada bagian produk ada task detail produk yang memberikan penjelasan lebih detail tentang produk. Hal ini tidak akan menjadi masalah jika informasi yang lebih detail memang ditampilkan untuk semua produk. Akan tetapi, ada beberapa produk yang tidak menampilkan informasi tentang detail produk. Hal ini bisa menimbulkan kekecewaan terhadap user yang ingin melihat detail produk akan tetapi yang ditampilkan sama saja dengan sebelumnya. Jika memang tidak memiliki informasi tentang detail barang, sebaiknya tidak perlu diberi task detail produk.

c) Icon setting di sebelah menu cari sulit dipahami secara langsung bagi user yang tidak terbiasa dengan icon tersebut. Untuk mengetahuinya fungsinya, user harus mencobanya terlebih dahulu. Adapun fungsinya tidak terlalu berguna bagi user yang masih bisa membaca pada font size normal adapun user yang membutuhkan font size yang lebih besar maka menu tersebut akan sangat membantu. Jadi manfaatnyatergantung pada user yang menggunakan website.

d) Konsistensi yang buruk antara gambar produk, nama produk serta detailnya akan

menyebabkan user merasa tidak nyaman dan malas untuk melanjutkan langkah-langkah berikutnya dan selanjutnya meninggalkan website dan beralih ke website lain yang lebih tertata.

e) User bisa melihat status pembelian hanya selama melakukan proses transaksi. Di luar

itu user tidak bisa melihat status pemesanan produk dan hal ini akan menyulitkan user untuk mengetahui produk-produk apa saja yang telah dipesannya. Karena itu developer sebaiknya menyediakan fungsi khusus yang bisa memberikan informasi tentang status pemesanan.

f) Butuh waktu yang cukup lama bagi user untuk memahami dan menggunakan fungsi

pada menu “Kaetgori Produk” karena pengaturan posisi yang tidak konsisten, diantaranya: • Posisi yang sejajar antara subkategori dengan list dari subkategori

Hal ini menyebabkan user sulit untuk membedakan antar subkategori. Use baru akan tahu setelah menelitinya satu demi satu.

• Pemberian nomor yang tidak jelas Sebagian subkategori diberi tanda bullets di sebelah kiri angka sehingga user bingung apakah ia termasuk dalam subkategori atau list dari subkategori.

• Nomor hilang Adanya nomor yang hilang membingungkan user. User akan berpikir bahwa ada salah satu menu yang hilang padahal tidak. User baru akan menyadari bahwa terjadi kesalahan pemberian nomor setelah memperhatikan dengan lebih teliti. Hal ini tentu membuang-buang waktu user.

g) Makna ganda pada subkategori Bahasa Indonesia dan Bahasa Arab Makna pertama adalah bahwa website bisa ditampilkan dalam dua bahasa yaitu Indonesia Arab. Makna kedua adalah produk-produk dengan Bahasa Indonesia atau Arab. User baru akan tahu mana makna yang benar setelah meng-klik kedua subkategori tersebut.

13

�

h) Sulitnya menemukan link About Us merupakan masalah besar. Bagi user yang ingin membeli produk langsung ke tokonya atau mengetahui alamat toko pada website ini, maka user harus mencarinya. User tidak akan menemukannya pada halaman utama, akan tetapi user dapat mengetahuinya dengan mengklik detail produk � klik Vendor Information. Bagi user yang belum mengetahuinya mereka akan berasumsi bahwa di halaman utama seharusnya ada fungsi seperti About Us. Jika mereka tidak menemukannya maka satu-satunya cara adalah lewat telepon / handphone. Hal ini tentu akan merugikan user baik dari segi waktu maupun biaya. Hal seperti ini sedapat mungkin harus dihindari demi menjaga kepuasaan konsumen dan agar konsumen tidak lari dari kita.

i) Terkadang user / konsumen dikecewakan, karena produk yang dipesannya telah habis / kosong. Hal ini murni kesalahan pihak penjual karena mereka tidak menambahkan informasi mengenai sisa stok sehingga user berasumsi bahwa produk yang dipesannya ada dan akan segera dikirim.

j) Rata- rata tampilan di dalam Website meminta user untuk melakukan scrolling. Hal ini

akan menyulitkan user dalam menggunakan website ini, terutama bagi user yang menggunakna mouse yang tidak ada scrollnya. Scrolling berlebihan merupakan salah satu kekurangan yang bisa mengurangi nilai situs di mata user. Sedapat mungkin developer harus meminimalkan scrolling tersebut tanpa merusak maksud dari situs

k) Apa user merasa aman ? Pada situs ini author kurang memperhatikan hal ini, karena

author tidak memberikan suatu informasi tentang jaminan keamanan bagi user yang akan melakukan pembelian di situs ini. Jaminan keamanan merupakan salah satu faktor terpenting yang harus dimiliki oleh suatu website E-Commerce. Dengan adanya jaminan keamanan, maka user akan merasa aman dan tidak perlu khawatir untuk melakukan proses pembelian. Akan tetapi, jika user tidak merasa aman maka user akan merasa ragu untuk melakukan pembelian bahkan mungkin user tidak akan membeli.

l) Tidak adanya fungsi download katalog memaksa user untuk melakukan pencarian yang cukup rumit dengan melakukan pencarian yang lebih banyak. Hal ini tentu akan menyulitkan dan membuang waktu user. Jika produk yang dicarinya tidak ditemukan maka user akan beranggapan bahwa barang tersebut memang tidak ada padahal barang yang dicari tersebut ada, hanya saja user salah memasukkan keyword atau tidak melihat dengan lebih teliti. Dengan adanya fungsi download katalog, user bisa memastikan ada atau tidaknya produk tersebut sehingga user akan lebih mudah untuk memilih produk-produk yang ingin dibelinya.

m) User sempat dibuat bingung oleh perbedaan yang sangat kontras antara hasil pencarian di katalog dengan hasil pencarian pada fungsi “Cari” di kanan atas ( lihat gambar 1 & 2 pada pembahasan user interface). Pada gambar1 produk ditampilkan dalam bentuk detail produk dan tidak disertai gambar dan harga. Gambar1 juga memberikan informasi kata kunci yang telah dimasukkan oleh user sehingga user tidak akan lupa kata kunci yang telah ia masukkan. Pada gambar1 informasi kata kunci terlalu banyak ditampilkan padahal cukup ditampilkan satu saja. Adapun pada gambar2 produk ditampilkan dalam bentuk 2 kolom yang disertai gambar dan tanpa detail. Akan tetapi, pada gambar2 user tidak diberitahu kata kunci apa yang telah ia masukkan sehingga user harus mengingatnya.

14

�

PENUTUP

1. Kesimpulan Website merupakan sarana untuk memberitahukan kepada dunia luar tentang keberadaan

kita. Oleh karena itu sebuah webeite haruslah tampil dengan performa terbaik sesuai dengan fungsinya agar memperoleh perhatian masyarakat pengguna internet. Performa suatu website bisa ditinjau dari tiga sisi, yaitu dari sisi User Interface, Usability dan User Experience.

User adalah salah satu faktor yang menentukan keberhasilan dari suatu website. Suatu website bisa dikatakan baik jika user bisa menjalankan paling tidak 70% tugas dari web tersebut. Website di atas bisa dikategorikan baik meskipun masih banyak hal yang perlu diperbaiki, karena user sudah bisa melakukan minimal 70% tugas yang ada. Meskipun demikian developer tetap harus memperbaiki kekurangan-kekurangan tersebut agar tujuan dari pembuatan website bisa terealisasi dengan sempurna.

2. Saran

Laporan ini diharapkan bisa menjadi bahan masukan dan pertimbangan bagi developer untuk lebih mengembangkan website dari Maktabah Al Aisar . Kekurangan-kekurangan yang masih ditemui dan disebutkan di atas, sebaiknya segera diperbaiki agar web dapat menghasilkan performance terbaiknya baik bagi user maupun author. Dengan demikian, kepercaya user / pelanggan terhadap perusahaan akan membaik dan pendapatan perusahaan pun juga akan semakin meningkat.

15

�

DAFTAR PUSTAKA

Ardiansyah, F. 2008. 4_WebUsability.pdf. Bogor Johnson, J. 2008. GUI Bloopers 2.0 : Common User Interface Design Don’ts and Dos. USA : UI

Wizard.Inc Nielsen, J & Loranger, H. 2006. Prioritizing Web Usability. Berkeley : New Riders.