Heuristic Evaluation

Online book Store websites

&

By Group 3

KEMENTRIAN RISET, TEKNOLOGI, DAN PENDIDIKAN

TINGGI UNIVERSITAS JENDERAL SOEDIRMAN
FAKULTAS TEKNIK
JURUSAN TEKNIK INDUSTRI
PURBALINGGA
2018
 Daftar Isi

Daftar Isi ................................................................................................................................................. ii

Members of Group 3 .............................................................................................................................. iii

Heuristic Evaluation Review .................................................. 1

A. Qualitative Evaluation................................................................................................................. 1
B. Quantitative Evaluation............................................................................................................. 13

Heuristic Evaluation Review .................................................. 15

A. Qualitative Evaluation............................................................................................................... 15
B. Quantitative Evaluation............................................................................................................. 28
References ............................................................................................................................................. 29

ii
Members of Group 3

1. Umi Suci Melinda HIE016005

2. Diki Ahmad M. H1E016007
3. Destry Aulia H1E016017
4. Nidya Pangestika H1E016019
5. Ilham Maulana R. HIE016029

iii
 Heuristic Evaluation Review

A. Qualitative Evaluation

Tabel 1. Hasil evaluasi Heuristik dari Grobmart.com

Grobmart
aspek dan variabel Responden
Kode
heuristik
KELEBIHAN KEKURANGAN

H1 visibilitas status sistem (visibility of system status)

ada konsistensi antar Konsistensi icon-icon
Penempatan promo terlalu
tampilan mulai dari warna sangat menarik sesuai
1 besar dan sering bergonta-
sampai pada icon-icon dengan kategori yang akan
ganti
yang dipakai kita cari
Tampilan feedback kurang
ada feedback yang Feedback yang di berikan
bagus karna produk yang
2 diberikan sistem setiap sesuai dengan kategori
muncul ditampilkan
kali sebuah aksi di lakukan yang dipilih
terlalu bawah
setelah pengguna
menyelesaikan suatu tahap Feedback yang diberikan
ada feedback yang langsung mengidentifikasi
Tidak ada menunjukan
3 diberikan sistem yang langkah selanjutnya yaitu
status loading
mengindikasikan bahwa bisa ditambah ke “wist
tahap selanjutnya dapat list”
dilakukan
kecocokan antara sistem dengan dunia nyata (match between system and real
H2
word)
Ikon segitiga terbalik dan
setiap ikon mudah ikon 3 strip yang berada
Icon sesuai dengan
1 dimengerti dan dipahami pada kategori tidak
kategori yang dimaksud
maksudnya (familiar) berfungsi sama sekali saat
di menu “home”
Menu lain yang tak kalah
menu-menu berada pada
Menu dari kategori penting di buat dengan
posisi yang logis dan
2 ditampilkan berjejeran font kecil dan di
sesuai dengan langkah
membuat mudah di akses tempatkan di palling atas
kerja sebenarnya
interface
H3 kebebasan dan kendali pengguna terhadap system
Pengguna dapat Tidak ada tombol undo
pengguna dapat mengedit
1 mengurutkan kategori dan redo yang
data pada sistem atau
1

sesuai dengan kebutuhan menyebabkan user harus

 dapat melakukan copy- mulai dari mengurutkan memulai mencari barang
paste dari abjad, mengurutkan dari halaman awal.
dari harga dsb
H4 konsisten dan standar (consistency and standard)
Setiap ikon diberi label
sesuai dengan ikon Ikon terlalu sederhana dan
1 setiap ikon diberi label
tersebut dan tetap kurang berwarna (hitam)
konsisten
Perintah pada setiap
kategori buku sama,
memudahkan untuk Perintah login hanya
perintah digunakan dengan
2 mencari buku yang digunakan pada saat ingin
cara yang sama
diinginkan dengan cara men “chekout barang”
yang sama pada kategori
lain
H5 pencegahan kesalahan (error prevention)
Peringatan dibuat dengan
animasi atau gambar yang
Kesalahan seperti
unik.
sistem memperingatkan kesalahan memasukan
Pada kolom pencarian
pengguna jika aksi yang kata sandi dibuat terlalu
1 diberi sugesti apa yang
mereka buat berpotensi mainstream.
akan pengguna cari
menimbulkan kesalahan. Fitur lupa kata sandi tidak
sehingga mengurangi
membantu sama sekali
resiko menimulkan
kesalahan pencarian
sistem mengingat hal apa yang sering di lakukan user (recognition rather than
H6
recall)
Sistem menyimpan produk
sistem mengingat hal apa yang kita masukan ke
Tidak menampilkan
saja yang sering dilakukan keranjang belanja sesuai
1 histori pencarian yang
user (saat melakukan aksi dengan urutan dimana
telah kita lakukan
tertentu) yang lebih dulu di simpan
diletakan di paling atas
Tidak ada konfirmasi
pengingat dan pesan Pengingat dimunculkan
2 ketika memasukan buku
seringkali dimunculkan dengan word sugestion
ke keranjang.
H7 flexible and efficience
Walaupun merupakan
Tidak menyediakan
aplikasi beli buku
pembayaran ditempat
grobmart juga
sistem fleksibel dan ataupun pembayaran tanpa
1 menyediakan layanan
efisiensi saat digunakan. self transfer seperti
login dengan akun G+,
pembayaran melalui kasir
facebook, dan banyak
minimarket ternama.
akun sosial media lainnya
H8 Estetika dan desain minimalis (esthetic and minimalist design).
Hanya informasi penting Informasi penting selalu Informasi tentang promo
1 saja yang ditampilkan di ditampilkan pada saat web memakan tempat untuk
layar dibuka menjadikan produk buku yang baru
2
 pengguna langsung terbit yang ditampilkan
mengetahuinya dibawahnya

Membantu pengguna untuk mengenal, mendiagnosa dan menghilangkan

H9
kesalahan (help users recognize, diagnose, and recover from error).
Pesan kesalahan Pesan kesalahan
Tidak ada bantuan atau
dinyatakan jelas akibat ditampilkan dengan ikon
animasi bantuan ketika
dari kesalahan pengguna ? unik selain jelas juga
1 pengguna melakukan
Sehingga pengguna disuguhi dengan hal yang
kesalahan dan tidak tau
mengerti kesalahan apa bagus sehingga pengguna
cara memperbaikinya
yang telah diperbuat ? tau kesalahannya
Pesan kesalahan Pesan kesalahan sesuai Pesan kesalahan hanya
2 memberikan informasi dengan kesalahan yang ada di pencarian dan
sintaksis yang sesuai dibuat pembayaran
H10 Adanya bantuan dan dokumentasi (Help And Documentation).
Menu help di tempatkakan Menu help hanya bisa
Terdapat menu HELP
1 di tempat yang mudah untuk mengkontak
dalam memandu pengguna
dilihat peladen (server)
Mudah di akses karna
Mudah mengakses menu Menu help tidak
2 ditempatkan di bawah
HELP mencakup FAQ
pojok dan selalu muncul

1. H1 : Visibility of System Status

Pada website penjualan buku online yaitu Grobmart.com ini, Visibility of System
Status sangat terlihat dengan baik contohnya saat sedang mencari buku yang diinginkan
terdapat status loading yang ditampilkan, selain itu saat memasukan buku kedalam wish
list atau pun keranjang, sistem menampilkan pesan/pemberitahuan jika buku yang dipilih
berhasil/sudah masuk kedalam wish list.
3
 Gambar 1. Terdapat pesan yang memberitahukan jika buku berhasil dimasukan
kedalam wish list

Gambar 2. Terdapat ikon loading yang memberitahukan status sistem saat mencari buku

2. H2 : Match Between System And Real World

Pada Grobmart.com bahasa yang digunakan mudah dimengerti bagi segala

4

kalangan. Terlebih ditambah ikon yang mendukung menu tersebut. Ikon yang digunakan
juga sangat merepresentasikan menu itu dengan baik, contohnya ikon berbentuk
keranjang belanjaan untuk buku-buku yang akan dibeli. Menu-menu yang ditampilkan
juga berada pada posisi yang logis dan sesuai dengan langkah kerja sebenarnya.

Gambar 3. Ikon-ikon yang digunakan dalam Grobmart.com

Gambar 4. Menu yang ditampilkan logis dan sesuai langkah kerja

5
3. H3 : User Control and Freedom

Pada Grobmart.com user memiliki kebebasan dan kontrol penuh pada hal yang
akan dilakukannya pada sistem seperti dapat mengedit, menghapus, atau membatalkan
apa yang telah dikerjakannya. Sebagai contoh user dapat mengedit data diri mereka saat
akan check out. Seperti merubah alamat penerima dan mode pembayaran. User juga
diberi kebebasan untuk menyortir buku yang akan di pilih berdasarkan

Gambar 5. Terdapat pilihan merubah data alamat atau memakai yang lama
6
 Gambar 6. Contoh kebebasan User dalam sistem

Gambar 7. Fitur sort by untuk mensortir buku yang dicari

7
4. H4 : Consistency and Standard

Dalam Grobmart.com salah satu bentuk konsistensi dalam sistem ini dapat dilihat
dari pemilihan warna dan font huruf yang sama dalam setiap menu. Header dan menu bar
juga selalu berada di tempat yang sama. Begitu pula dengan fitur Help atau bantuan yang
memiliki ikon tanda tanya (?) yang selalu muncul di pojok kiri bawah saat user membuka
menu apapun.

(a)

(b)
Gambar 8. Perbandingan layout tema, warna, Header, dan menu yang sama saat (a)
8

Interface Home dan (b) Interface Book Category Novel & Sastra
5. H5 : Error Prevention

Pencegahan terhadap kesalahan atau error pada Grobmart.com adalah dapat

dilihat dari adanya tanda bintang merah kecil saat kita harus mengisi data diri, alamat, dll.
Tanda bintang ini mengindikasikan bahwa text box tersebut harus diisi agar tidak
menimbulkan error.

Gambar 9. Tanda bintang merah kecil sebagai bentuk error prevention

Lalu pencegahan lainnya adalah adanya emergency exit atau menu home atau bisa
juga logo Grobmart.com itu sendiri yang jika di tekan akan mengalihkan user ke interface
awal (home) saat user tidak ingin melanjutkan/ingin menyudahi apa yang dikerjakan
sebelumnya atau saat secara tidak sengaja memilih tautan yang tidak diinginkan tanpa
melalui langkah yang rumit. Tetapi pada website ini tidak terdapat auto correct spelling
check saat menulis nama buku yang ingin di cari.
9
 Gambar 10. Logo dan menu home sebagai emergency exit

6. H6 : Recognition Rather Than Recall

Suatu sistem yang baik adalah sistem yang mengingat apa yang biasanya
dilakukan user selama memakai sistem tersebut sehingga meminimalisir apa yang harus
diingat user. Pada Grobmart.com terdapat fitur order history yang dapat memberitahukan
apa saja yang telah kita beli pada website ini. Tetapi pada website ini tidak ada sistem
pengingat hal-hal apa saja yang biasa user cari di kolom pencarian.

Gambar 11. Fitur order history untuk membantu user mengigat apa saja yang telah di
beli.
10
7. H7 : Flexibility and Efficiency To Use

Pada website Grobmart.com dapat dilihat interface home nya yang telah terlihat
efisien sebab pada interface depannya hanya memuat hal-hal yang penting saja dan
terlihat juga pada menu pilihan buku telah dipisahkan berdasarkan kategori bukunya
sehingga terlihat rapih dan efisien. Dalam pengisian data saat checkout juga telah otomatis
terisi dengan data yang telah disimpan pada menu akun sehingga tidak perlu mengisi data
secara berulang. Fleksibilitas dapat dirasakan saat user dapat menggunakan website ini
dimana saja dan dapat dengan mudah membuka menu-menu yang diinginkan. Tapi
website ini dirasa masih kurang fleksibel dikarenakan tidak terdapat fitur login dengan
akun G+, Facebook, dan sosial media yang lainnya.

8. H8 : Esthetic and Minimalist Design

Pemilihan warna pada interface Grobmart.com sangat enak dipandang ditambah

desain yang simple dan efisien membuat user betah berlama-lama memakai website ini.

Gambar 12. Desain interface Grobmart.com

11
9. H9 : Help Users Recognize, Diagnose, and Recover From Error

Pada Grobmart.com sistem memberitahukan jika terjadi kesalahan contohnya

seperti pada saat user tidak dapat login dikarenakan belum memverifikasi akun pada
Gmail, sistem memberitahukan apa yang harus user lakukan.

Gambar 13. Sistem memberitahukan error yang terjadi dan bagaimana cara
memperbaikinya.

10. H10 : Help and Documentation

Dalam Grobmart.com terdapat menu help yang mudah ditemukan dan

digunakan. Untuk semakin mempermudah pengguna, terdapat pula fitur panduan
pendaftaran, panduan berbelanja, panduan pembayaran, lupa password, selain itu
disediakan juga informasi mengenai perlindungan konsumen. Terdapat juga dokumentasi
testimoni pelanggan Grobmart.com yang dapat dilihat dan diisi.
12
 Gambar 14. Fitur Help dan komentar pelanggan

B. Quantitative Evaluation

Tabel 2. Skala Likert

Skala Likert keterangan
1 Sangat tidak setuju
2 Tidak setuju
3 Biasa saja
4 Setuju
5 Sangat setuju
13
 Tabel 3. Score skala Likert

Grobmart
Responden Score
Kode Aspek dan variabel heuristik
Nidya Destry Diki Ilham Umi Isti Dinia 1 2 3 4 5

H1 visibilitas status sistem (visibility of system status)

Ada konsistensi antar tampilan mulai dari
1 5 5 5 4 5 5 5
warna sampai pada icon-icon yang dipakai
Ada feedback yang diberikan sistem setiap
2 5 5 4 3 4 4 5
kali sebuah aksi di lakukan
0 5% 14% 38% 43%
Setelah pengguna menyelesaikan suatu
tahap ada feedback yang diberikan sistem
3 3 4 4 2 4 3 4
yang mengindikasikan bahwa tahap
selanjutnya dapat dilakukan
H2 kecocokan antara sistem dengan dunia nyata (match between system and real word)
Setiap ikon mudah dimengerti dan dipahami
1 5 5 5 5 5 5 5
maksudnya (familiar)
Menu-menu berada pada posisi yang logis 0 0 0 43% 57%
2 dan sesuai dengan langkah kerja 4 4 4 5 4 4 4
sebenarnya
H3 kebebasan dan kendali pengguna terhadap sistem
Pengguna dapat mengedit data pada sistem
1 atau dapat melakukan copy-paste serta 5 5 5 4 5 5 3 0 0 14% 14% 72%
dapat undo dan redo
H4 konsisten dan standar (consistency and standard)
1 Setiap ikon diberi label 4 4 4 3 4 4 4
0 0 7% 50% 43%
2 Perintah digunakan dengan cara yang sama 3 3 3 2 3 3 3

H5 pencegahan kesalahan (error prevention)

Sistem memperingatkan pengguna jika aksi

1 yang mereka buat berpotensi menimbulkan 4 4 3 3 3 3 3 0 0 71% 29% 0
kesalahan.

H6 sistem mengingat hal apa yang sering di lakukan user (recognition rather than recall)
Sistem mengingat hal apa saja yang sering
1 dilakukan user (saat melakukan aksi 2 2 3 2 3 2 3
tertentu) 0 29% 57% 14% 0

2 Pengingat dan pesan seringkali dimunculkan 3 3 3 3 3 4 4

H7 flexible and efficience

Sistem fleksibel dan efisiensi saat
1 4 4 3 4 4 3 4 0 0 29% 71% 0
digunakan.
H8 Estetika dan desain minimalis (esthetic and minimalist design).
Hanya informasi penting saja yang
1 4 4 4 4 5 3 4 0 0 14% 72% 14%
ditampilkan di layar
Membantu pengguna untuk mengenal, mendiagnosa dan menghilangkan kesalahan (help user s recognize, diagnose, and recover from
H9
error ).
Pesan kesalahan dinyatakan jelas akibat dari
kesalahan pengguna ? Sehingga pengguna
1 4 5 3 3 4 3 3
mengerti kesalahan apa yang telah diperbuat
? 0 0 64% 29% 7%

Pesan kesalahan memberikan informasi

2 3 3 3 4 4 3 3
sintaksis yang sesuai

H10 Adanya bantuan dan dokumentasi (Help And Documentation).

Terdapat menu HELP dalam memandu
1 5 5 3 3 4 5 5
pengguna
0 0 29% 14% 57%
2 Mudah mengakses menu HELP 5 5 3 3 4 5 5
14
 Heuristic Evaluation Review
A. Qualitative Evaluation

Tabel 4. Hasil Evaluation Kualitatif BukaBuku

HEURISTIK KELEBIHAN KEKURANGAN

Pada Halaman awal ditampilkan
berbagai icon dan warna yang beragam,
H1 : visibilitas status
menampilkan sistem sukses (setelah Tidak ada tanda/keterangan
sistem (visibility of
login), selalu meng-update informasi loading pada sistem atau halaman
system status)
tentang 20 buku dengan rating tertinggi
pada setiap minggunya
H2 : kecocokan Beberapa icon yang ditampilkan sesuai
Beberapa menu tidak disertakan
antara sistem dengan dengan kategori dan mudah dipahami,
dengan gambar (icon) dan
dunia nyata (match seperti keranjang di tunjukan dengan
penggunaan warna yang terlalu
between system and gambar “keranjang” beserta keterangan
sederhana pada icon yang ada.
real word) namanya.
Dapat melakukan pengeditan data pada
Tidak ada featur close (X) ketika
sistem atau melakukan copy paste,
H3 : kebebasan dan ingin langsung keluar dari
pengguna dapat melakukan pemilihan
kendali pengguna sesuatu. Tidak ada tombol undo
buku dengan mensortir berdasarkan
terhadap sistem (user dan redo sehingga user harus
terbaru, best seller, harga terendah,
control and freesom) memulai mencari barang dari
harga tertinggi, review terbanyak,
halaman awal
rating, A-Z, dan Z-A
H4 : konsisten dan
Beberapa icon di beri label, ukuran Warna pada label terlalu
standar (consistency
tulisan mudah dibaca sederhana
and standard)
H5 : pencegahan Pada kolom pencarian tidak
Terdapat peringatan jika terdapat data
kesalahan (error disediakan/ditampilkan word
yang belum diisi/akan di isi
prevention) suggestion
Karena kemudahan penggunaan yang
disajikan dari situs ini maka tidak sulit
H6 : sistem bagi pengguna untuk mengingat
mengingat hal apa kembali fitur-fitur yang disediakan situs
yang sering di ini, Dengan cepat pengguna dapat Tidak menyimpan history
lakukan user menggunakan situs ini kembali pencarian yang pernah dilakukan
(recognition rather walaupun telah lama tidak
than recall) memasukinya karena hampir semua
menu dapat ditemukan pada halaman
awal.
Dapat login dengan beberapa akun Biasanya pesanan agak lama
seperti email, twitter, dan facebook, diproses karena buku tidak
halaman awal sudah disediakan semua tersedia di gudang Bukabuku
H7 : flexible and
fitur-fitur yang dapat digunakan oleh melainkan gudang supplier.
efficience
pengguna jadi pengguna tidak usah Akibatnya, perlu waktu untuk
repot-repot untuk mencari dan memilih Bukabuku mendatangkan buku
15

buku yang diinginkan. pesanan.

 H8 : Estetika dan
Peletakan beberapa menu yang
desain minimalis Hanya informasi penting saja yang
terlalu mepet keatas dan ukuran
(esthetic and ditampilkan di layar
font yang terlalu kecil
minimalist design).
H9 : Membantu
pengguna untuk
Akan ditampilkan peringatan /
mengenal, Tidak ada pemberitahuan kepada
keterangan atas kesalahan yang terjadi
mendiagnosa dan pengguna tentang ketidaksediaan
, pengguna dapat membatalkan
menghilangkan buku (stock) yang di pesan,
pemesanan buku karena situs ini
kesalahan (help users terkadang stock tersedia tetapi
menggunakan sistem Wish List dan
recognize, diagnose, sebenarnya kosong
Cart
and recover from
error).
Pada halaman bantuan (help)
Belum ada panduan yang tertera
H10 : Adanya
Terdapat menu bantuan untuk di dalamnya, pengguna harus
bantuan dan
membantu pengguna menanyakan menghubungi kontak yang
dokumentasi (Help
kesulitan/ketidakfahaman. disediakan terlebih dahulu untuk
And Documentation).
menanyakan
kesulitan/ketidakfahaman.

1. H1 : Visibility of System Status

Sebuah sistem yang baik seharusnya dapat memberikan informasi kepada

pengguna terhadap apa yang sedang terjadi. Pada halaman awal bukabuku.com terdapat
pilihan menu yang tertata rapih. Pada gambar 15 terdapat tampilan dari laman saat
pertama kali kita mengaksesnya. Dibagian tengahnya terdapat iklan promo yang sedang
berjalan di laman tersebut. Selain itu iklan promo dapat bergerak berganti menuju promo
berikutnya. Terdapat 8 slide promo yang akan diputar terus secara bergilir. Pada bagian
atas terdapat menubar daftar buku yang dikategorikan buku terbaru, buku pre-order, best
seller, promosi hari ini, Pojok pengarang dan pencarian detail. Menubar ini memudahkan
bagi pelanggan untuk menemukan buku-buku sesuai dengan kategorinya. Disebelah kiri
laman terdapat menubar beraneka macam pilihan buku berdasarkan genre buku.
Menubar ini digunakan untuk memudahkan pelanggan untuk mencari jenis buku apa yang
sedang dicari. Disebelah kanan situs terdapat iklan dan panduan bagaimana cara
melakukan belanja buku yang akan dibeli. Dengan adanya cara belanja maka akan
memudahkan bagi pelanggan yang baru pertama kali membuka laman dalam berbelanja.
Selain itu dibagian bawahnya terdapat list buku saran dari staff laman, buku-buku terbaru,
buku-buku yang pre-order dan testimoni. Semua buku buku yang ditampilkan adalah
16

buku-buku yang sedang diskon.

 Gambar 15. Laman dari bukabuku.com saat pertama kali diakses

Selanjutnya, pengguna dapat mengetahui keberadaan terbaru dari laman yang

diakses ketika mengunjungi fitur yang berbeda. Contohnya ketika mengakses fitur
sejarah transaksi, laman memberi tahu bahwa kita sedang berada dalam fitur tersebut
(lihat Gambar 16).

Gambar 16. Status yang sedang diakses pada laman

17
2. H2 : Match Between System and Real World

Sebuah sistem harus menggunakan bahasa yang dapat dimengerti oleh pengguna.
Bahasa yang digunakan pada bukabuku.com merupakan bahasa indonesia yang cukup
mudah dimengerti. Contohnya adalah pada halaman awal (lihat gambar 17) disebelah
kanan atas terdapat tulisan keranjang yang isinya adalah buku yang sudah dipilih untuk
dibeli. Bgitu juga dengan bahasa untuk genre buku. Genre buku ditulis semua dalam
bahasa indonesia sehingga memudahkan orang awam yang mengakses laman akan
merasa nyaman dan tidak perlu takut salah pilih akibat tidak mengerti bahasa yang
digunakan oleh laman.

Gambar 17. Bahasa yang digunakan oleh lama mudah dimengerti

3. H3 : User Control and Freedom

Pada situs ini, pengguna dapat mengakses dan menggunakan fitur-fitur yang
tersedia. Misalnya ketika melakukan pencarian buku, pengunjung dapat melakukan
pemilihan buku dengan mensortir berdasarkan terbaru, best seller, harga terendah, harga
tertinggi, review terbanyak, rating, A-Z, dan Z-A. Namun sayangnya laman ini ketika
dilakukan pencarian tidak akan menyimpan hasil pencarian sehingga kita tidak dapat
mengetahui pencarian sebelumnya yang kita lakukan pada laman tersebut.
18
 Gambar 18. Sistem pengurutan buku agar mempermudah pencarian

4. H4 : Consistency and Standard

Sistem yang baik pada dasarnya tidak membuat bingung pengguna.

Bukabuku.com memiliki konsistensi yang cukup baik karena semua halaman memiliki
desain, warna, dan tema yang sama seperti pada homepage. Header dan menu bar juga
selalu berada di lokasi yang sama dan juga menubar ditampilkan dengan cukup jelas, serta
dengan ukuran huruf yang pas (lihat gambar 16). Daris segi tulisan, bukabuku.com
memiliki ukuran tulisan yang mudah dibaca karena warna yang digunakan pada setiap
halaman berwarna hitam. Ada beberapa halaman yang tidak menggunakan warna hitam
seperti Judul buku, stok pada gudang dan harga promosi. Namun ini membuat
pengunjung lebih tertarik karena warna tulisan yang berbeda dari tulisan lain.
19

Gambar 19. Tulisan pada laman pencarian terdapat tulisan yang berbeda warna
5. H5 : Help Users Recognize, Diagnose, and Recover from Error

Pesan kesalahan harus ditampilkan berupa bahasa pengguna (bukan berupa kode),
secara langsung mengidentifikasi masalah, dan memberikan solusi. Pada laman sign up,
terdapat kolom yang berisikan tanda (*) dan (**) dimana (*) berarti bahwa kolom harus
diisi dan (**) kolom diisi salah satu.

Gambar 20. Terdapat pemberitahuan untuk mencegah eror pad saat sign in

6. H6 : Error Prevention

Sebuah sistem yang baik adalah mencegah terjadinya kesalahan bagi pengguna
atau bagi sistem tersebut baik sebelum, sesudah, dan ketika menggunakan sistem. Ketika
pengguna mengakses bukabuku.com, pengguna diberikan kebebasan untuk mengakses
fitur - fitur yang tersedia. Namun terkadang, pengguna dapat secara tidak sengaja memilih
20

halaman yang tidak diinginkan. Oleh karena itu, dibutuhkan sebuah “pintu darurat” bagi
pengguna untuk keluar dari halaman tersebut tanpa melalui langkah yang rumit. Seperti
yang terlihat pada Gambar 21, setiap halaman di bukabuku.com memiliki sebuah logo
yang terletak dibagian pojok kiri atas dan mengandung tautan ke menu Home, yang akan
memandu pengguna secara langsung.

Gambar 21. Logo yang dapat berfungsi sebagai pintu darurat yang akan membawa
pengguna kembali ke homepage

Selain itu terdapat peringatan eror pada saat kita mendaftar sebagai pengguna baru
di situs bukabuku.com. Dapat dilihat pada gambar 22 terdapat kolom-kolom yang kosong.
Ketika di klik tombol setujui maka peringatan akan muncul di setiap kolom yang kosong.
Bila ada salah satu kolom tidak diisi maka keluarlah pemberitahuan bahwa sistem eror
(karena data (*) dan (**) ada yang tidak diisi) dan tidak dapat maju ke langkah berikutnya.
Begitu juga dengan peringatan bila email sudah terdaftar yang berarti bahwa email
tersebut telat terdaftar sebagai pengguna bukabuku.com.
21
 Gambar 22. Form sign in bila data tidak diisi maka sistem akan mengeluarkan
peringatan

7. H7 : Recognition Recognition Rather Than Recall

Pengguna tidak harus mengingat informasi dari satu bagian dialog ke bagian
lainnya. Instruksi dari sistem seharusnya jelas dan dapat diperbaiki dengan mudah. Pada
saat kita melakukan pencarian pada bukabuku.com, akan keluar beberapa kemungkinan
pencarian dimana ini akan memudahkan pengguna untuk mencari buku dan mengecek
apakah buku itu ada di situs tersebut. Namun bukabuku.com tidak memfasilitasi search
history pada kolom pencarian. Tidak terdapat history pencarian sebelumnya akan
membuat pengguna harus menulis ulang apa yang sebelumnya dicari. 22

Gambar 23. Kemungkinan pencarian yang diberikan oleh bukabuku.com

8. H8 : Flexibility and Efficiency of Use

Pengembang web sangat memfasilitasi kemudahan pengguna dalam proses

mengakses, misalnya untuk kolom semua kategori, tanpa harus meng-klik tombol nya
maka daftar semua kategori buku akan terbuka secara otomatis. Ini tentu saja
memudahkan pengguna agar tidak perlu mengklik untuk mengetahui buku kategori apa
yang terdapat di laman bukabuku.com. Selain kolom semua kategori ada beberapa kolom
yang akan muncul listnya dengan mengarahkan pointer ke kolom yaitu Sign In My
Bukabuku, Keranjang, dan Daftar Keinginan.

Gambar 24. Kategori buku yang terdapat di laman bukabuku.com

Selain itu dibagian atas homepage terdapat nomor kontak dari bukabuku.com
dimana bila ada keluhan dapat langsung mengubungi call-center nya. Kemudian
disampingnya terdapat cara belanja, konfirmasi pengiriman, status pengiriman, dan
bantuan. Ini memudahkan pengguna bila akan membeli buku dan ingin mengetahui status
dari pembelian dan perkiraan buku sampai ketangan pengguna. Dengan adanya informasi
ini diharapkan pelanggan tidak perlu takut terhadap penipuan disitus bukabuku.com.
23
 Gambar 25. Efisiensi pelacakan pengiriman buku dan jaminan keaslian barang

Selanjutnya adalah terdapatnya iklan promo pada hari itu di bukabuku.com. Setiap
harinya ada diskon yang diberikan dan akan ditampilkan pada tengah laman. Ini membuat
pengguna yang baru memasuki laman akan tertarik pada gambar tersebut karena selain
gambarnya yang bergeser, gambar tersebut mendominan sehingga tak mungkin pengguna
tidak melihat iklan tersebut. Ketika gambar diklik pada iklan tersebut, pengguna akan
dibawa ke laman yang berisi semua buku diskon.

Gambar 26. Salah satu promo yang sedang berlangsung pada situs bukabuku.com

Ini tentunya mengefisiensikan waktu karena tidak harus mencri kembali buku-
buku yang sedang diskon. Cukup mengklik gambar yang terdapat di tengah laman. Dan
berikut adalah salah satu promo yang sedang berlangsung di bukabuku.com pada
tanggal 17 Desember 2018.
24
 Gambar 27. Buku-buku yang sedang diskon di bukabuku.com

9. H9 : Aesthetic and Minimalist Design

Warna pada situs ini kebanyakan berwarna putih. Tidak terdapat warna iconic
yang membuat orang-orang akan mengingat warna identik situs bukabuku.com. Warna
putih sebagai dasar agar pengguna dapat membaca tulisan di setiap halamannya. Desain
tampilan pada situs ini sangat minimalis sehingga pengguna akan cepat merasa bosan bila
terlalu lama disitus ini. Tampilan minimalis ditunjukkan dengan penggunaan bentuk
persegi dan persegi panjang sebagai bentuk dasar konten gambar dan tulisan. Tampilan
gambar cover buku dapat mebuat situs menjadi sedikit menarik, ditambah warna tulisan-
tulisan tertentu yang diberi warna lain sebagai pembeda agar pengguna tidak bingung.
Meskipun begitu, laman ini bebas iklan yang berarti tidak terdapat iklan yang dapat
mengganggu pandangan pengguna.
25
 Gambar 28. Kolom daftar buku best seller dengan desain yang minimalis

10. H10 : Help and Documentation

Fungsi “bantuan” berada di bagian atas laman dan ketika kita mengklik fungsi
tersebut akan terbuka laman baru yang berisi kontak dari staff bukabuku.com. Kontak
tersebut berisi email, nomor telepon, SMS/WhatsApp, Line, Twitter, dan waktu kerja.
Disebelah kanan juga terdapat sebuah form mengenai kendala apa yang pengguna alami.
Ketika pengguna mengisi form tersebut, form akan dikirimkan ke pihak bukabuku.com.
Waktu dibalas adalah hari kerja sesuai dengan waktu kerja yang telah dicantumkan.
Dengan adanya fitur bantuan ini pengguna tidak perlu takut untuk melakukan pembelian
secara online di situs ini.
26
 Gambar 29. Kolom bantuan untuk diajukan kepada staff bukabuku.com

Kekurangannya adalah bantuan ini tidak dapat digunakan 24 jam sehingga

pengguna hanya dapat mengadukan keluhan pada waktu kerja dari staff bukabuku.com
saja. Selain bantuan terdapat juga kolom cara belanja. Disini dijelaskan bagaimana cara
untuk melakukan pembelian pada situs ini dari pencarian buku hingga cara pembayaran.

Gambar 30. Cara belanja yang disajikan bukabuku.com agar memudahkan pelanggan
melakukan pembelian di situs tersebut
27
B. Quantitative Evaluation

Tabel 5. Hasil evaluasi kuantitatif

BukaBuku.com
Kode Aspek dan variabel heuristik
responden Score
Nidya Destry Diki Ilham Umi Isti Dinia 1 2 3 4 5
H1 Visibilitas status sistem (visibility of system status)

A+H11:T16da konsistensi antar tampilan mulai

1 5 5 5 4 5 5 5
dari warna sampai pada icon-icon yang dipakai

Ada feedback yang diberikan sistem setiap kali

2 5 4 5 5 4 4 5
sebuah aksi di lakukan 0 0 4% 48% 48%
Setelah pengguna menyelesaikan suatu tahap
ada feedback yang diberikan sistem yang
3 4 3 4 4 4 4 4
mengindikasikan bahwa tahap selanjutnya
dapat dilakukan
H2 Kecocokan antara sistem dengan dunia nyata (match between system and real word)
Setiap ikon mudah dimengerti dan dipahami
1 5 4 5 4 5 5 5
maksudnya (familiar)
0 0 0 64% 36%
Menu-menu berada pada posisi yang logis
2 4 4 4 4 4 4 4
dan sesuai dengan langkah kerja sebenarnya

H3 kebebasan dan kendali pengguna terhadap sistem

Pengguna dapat mengedit data pada sistem

1 5 5 3 3 4 5 3 0 0 43% 14% 43%
atau dapat melakukan copy-paste

H4 konsisten dan standar (consistency and standard)

1 Setiap ikon diberi label 5 5 4 5 4 4 4
0 14% 36% 29% 21%
2 perintah digunakan dengan cara yang sama 3 2 3 2 3 3 3

H5 pencegahan kesalahan (error prevention)

sistem memperingatkan pengguna jika aksi
1 yang mereka buat berpotensi menimbulkan 4 4 3 3 3 4 3 0 0 57% 43% 0
kesalahan.

H6 recognition rather than recall

sistem mengingat hal apa saja yang sering

1 2 2 3 3 3 2 4
dilakukan user (saat melakukan aksi tertentu)
0 21% 64% 15% 0

2 pengingat dan pesan seringkali dimunculkan 3 3 3 4 3 3 3

H7 flexibility and efficiency to use

1 sistem fleksibel dan efisiensi saat digunakan. 4 3 3 4 4 4 4 0 0 29% 71% 0

H8 Estetika dan desain minimalis (esthetic and minimalist design).

Hanya informasi penting saja yang ditampilkan
1 4 4 3 5 4 4 4 0 0 14% 72% 14%
di layar
Membantu pengguna untuk mengenal, mendiagnosa dan menghilangkan kesalahan (help user s recognize, diagnose, and recover from
H9
error ).

Pesan kesalahan dinyatakan jelas akibat dari

1 kesalahan pengguna ? Sehingga pengguna 3 3 3 3 5 4 4
mengerti kesalahan apa yang telah diperbuat ?
0 0 71% 21% 8%

Pesan kesalahan memberikan informasi

2 3 3 3 3 4 3 3
sintaksis yang sesuai

H10 Adanya bantuan dan dokumentasi (Help And Documentation).

Terdapat menu HELP dalam memandu
1 4 4 4 4 5 5 5
pengguna
0 0 14% 50% 36%
28

2 Mudah mengakses menu HELP 4 3 4 3 5 4 5

References

Sherry Y. Chen, R. D. (2005). The assessment of usability of electronic shopping: A heuristic

evaluation. International Journal of Information Management; Elsevier, 516–532,
17.

Caesaron, Dino. 2015. Evaluasi Heuristic Desain Antar Muka (Interface) Portal
Mahasiswa (Studi Kasus Portal Mahasiswa Universitas X); Jurnal Metris, 16
(2015): 9 – 14

Online book Store websites: GrobMart.com dan BukaBuku.com

29