Adel's blog
Free Your Mind
26
Jun

Web Usability ~A Conclusion~

Posted in Academic  by ADELINA PARAMITA H

Setelah analisis web usability dari website Dastan Books yang diposting dalam beberapa postingan (tepatnya total 10 posting), akhirnya kita mencapai tahap conclusion, dimana saya akan sedikit me-review website ini secara keseluruhan.

Dastan Books, sebagai salah satu sarana e-commerce yang dimiliki oleh penerbit Dastan, memiliki beberapa keunggulan dan juga kekurangan. Secara garis besar, Dastan cukup menarik dan memudahkan user dalam pembelian. Akan tetapi, terdapat beberapa kekurangan, diantaranya yang cukup sering dilakukan oleh Dastan adalah tombol/button yang berwarna abu-abu pudar yang tampak sepert non-aktif, kurangnya informasi untuk tanda *, penggunaan warna biru yang tidak tepat pada tulisan, dan animasi yang memusingkan karena terlalu banyak dan terlalu cepat.

Sekian analisis dari saya, semoga dapat bermanfaat.

Arigatou Gozaimasu.

Merci.

Xie xie.

Thank You.

Terima Kasih !

Adelina P.H. (F24070038)

http://adelinap07.student.ipb.ac.id/

http://adelfavblog.blogspot.com/

Tags:

26
Jun

Web Usability Part 8 ~Halaman Shopping Cart~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Halaman shopping cart adalah salah satu halaman yang penting dalam situs yang digunakan untuk menjual produk (e-commerce). Tampilan halaman shopping cart di Dastan adalah sebagai berikut

Terlihat bahwa tabel yang terdapat pada halaman ini telah cukup lengkap. Akumulasi dari harga diskon untuk non-member dan member serta ongkos kirim ke alamat penerima per berat total memudahkan user sehingga user dapat langsung memasukkan/memilih barang ke shopping cart dan biaya dihitung secara otomatis. Tetapi yang menyulitkan, setelah user meng-klik icon beli, user akan dibawa ke halaman ini dimana barang yang dipilih langsung diakumulasikan tetapi setelah selesai, user tidak dapat langsung kembali ke halaman sebelum dia memilih barang. Hal ini tentu merepotkan user karena jika halaman sebelumnya adlaha halaman pencarian dan user lupa key wordsnya, user akan cenderung malas melanjutkan transaksi apalagi jika user hanya memiliki sedikit waktu (buru-buru).

Tags:

26
Jun

Web Usability Part 7 ~Halaman Login, Pendaftaran, dan Member Card~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Kali ini, saya akan membahas banyak halaman sekaligus tetapi saling berhubungan.

Kotak login, terdapat di sebelah kiri setiap halaman. Kotak ini sebenarnya memudahkan user karena juga dilengkapi dengan kereta belanja (dapat digunakan untuk melihat apa saja yang telah user pilih) dan bantuan. Sayangnya, kotak di area ini termasuk untuk daftar baru, menggunakan huruf berwarna abu-abu yang tidak terlalu gelap sehingga terlihat seperti non-aktif.. Di bawahnya, terdapat link berupa gambar dan tulisan untuk mendapatkan member card. Gambar dan tulisan ini cukup eye-catching dan memudahkan pengguna jika ingin mendapatkan member card.

Jika kita tidak mengisi email, akan muncul notification seperti ini

Notificatin semacam ini (berupa pop up) kurang cocok digunakan dalam sebuah aplikasi berbasis website. hal ini karena selain pop up lebih familiar pada aplikasi berbasis dekstop, juga mengganggu kenyamanan user selama browsing.

Apabila kita mengisi password yang tidak cocok, maka yang keluar adalah seperti ini

Halaman yang muncul seperti gambar di atas. Hal ini memudahkan user karena langsung disediakan kotak loginnya. Selain itu, notificationnya ditulis dengan warna merah yang menandakan adanya kesalahan. Sedangkan bila tidak mempunyai account, terdapat notification yang me-link langsung ke halaman daftar. Hal ini tentu memudahkan bagi user. akan tetapi, tidak disediakan notification apabila user lupa akan passwordnya. Hal ini tentu tidak efektif dan menyulitkan user.

Link lupa password terdapat pada kotak login yang ada di sebelah kiri, tepatnya terletak di bawah daftar. Hal ini jelas menyulitkan usr karena user harus scroll ke bawah dulu (tidak langsung di bawah tombol login/masuk). Gambar halaman yang muncul/link halaman saat kita meng-klik lupa password yaitu

Terdapat ketidakkonsistenan yang akan membingungkan user yaitu penggunaan username, padahal pada kotak login, yang selama ini diminta adalah email.

Apabila user melakukan pendaftaran baru, pada halaman daftar, akan muncul seperti ini

Tanda * berwarna orange merupakan penanda bahwa field tersebut required. Sayangnya Dastan tidak menyediakan tulisan/keterangan tersebut. Untuk tanggal lahir menggunakan dropdown list. Tetapi tanggal lahir, ada baiknya menggunakan default tanggal 1 dan bulan Januari tetapi dalam bahasa Indonesia (Dastan menggunkan bahasa Inggris untuk nama bulan) supaya konsisten. Kotak isian yang sejajar juga memudahkan user, akan tetapi sebaiknya tulisannya jangan menyambung ke bawah, tetapi ke samping (arah pemotongan kata). Tombol submit berwarna abu-abu pudar dan terlihat seperti non-aktif. Hal ini jelas mengganggu dan membingungkan user. Sebaiknya digunakan warna yang lebih cerah/kuat.

Jika user ingin mendaftarkan member card, halaman yang akan muncul adalah halaman ini

Terdapat ketidakkonsistenan yang akan membingungkan user yaitu penggunaan username, padahal pada kotak login, yang selama ini diminta adalah email. Tanda * berwarna orange merupakan penanda bahwa field tersebut required. Sayangnya Dastan tidak menyediakan tulisan/keterangan tersebut. Tombol submit berwarna abu-abu pudar dan terlihat seperti non-aktif. Hal ini jelas mengganggu dan membingungkan user. Sebaiknya digunakan warna yang lebih cerah/kuat. Tetapi terdapat link pada tulisan ‘disini’ dan ditandai dengan garis bawah (yang memang menunjukkan adanya link). Jika tulisan ‘disini’ di-klik, akan ter-link ke halaman Daftar Baru.

Tags:

26
Jun

Web Usability Part 6 ~Halaman Metode Pembayaran~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Kita masuki halaman metode pembayaran……

Nah, ini dia halaman khusus yang menyediakan informasi tentang cara pembayaran. Sayangnya, di halamn ini, hanya beberapa jenis pembayaran yang ada link yang menuju keterangan/penjelasan tentang cara pembayaran. Selain itu, tulisan linknya juga kecil (kalah dibandingkan gambar) sehingga mudah terlewatkan oleh user.

Tags:

26
Jun

Web Usability Part 5 ~Halaman Buku Tamu~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Melanjutkan postingan sebelumnya, sekarang kita kan mengulas tentang buku tamu di Website Dastan…..

Ini adalah gambar dari halaman Buku Tamu Dastan. Jenis huruf yang digunakan memudahkan untuk dibaca. Tetapi, ukuran (Caps Lock)nya tidak seragam (tergantung si penulis buku tamu). Sayangnya, nama pengirim berwarna biru tetapi ketika dicoba untuk di-klik, tidak bisa di-link. Begitu pula tulisan website dan email tidak semua dapat langsung dibuka ketika di-klik (tergantung si penulis menuliskan website dan emailnya apa tidak). Penanda dapat di-klik (di-link) pada tulisan website/email adalah ketika di dekatkan, kursor berbentuk tangan dan tulisan ada garis bawahnya. Hal ini memudahkan user.

Tulisan Isi Buku Tamu yang berwarna biru dapat di-klik dan me-link ke halaman form isian. Akan tetapi, karena tulisan ini ukurannya sama dengan nama pengisi di bawahnya, sehingga hampir telewat/tidak mencolok, yang jelas akan membuat user yang ingin mengisi kebingungan dan harus mencari-cari terlebih dahulu hingga menyadari bahwa tulisan tersebut dapat di-link. Akan lebih baik jika jenis dan ukuran tulisan untuk kata-kata tersebut dibedakan dari yang lainnya untuk memudahkan user.

Setelah di-klik, akan ter-link ke halaman form isian.

Tidak ada keterangan field mana saja yang required sehingga membingungkan user untuk mengisi. Selain itu, terlihat ketidakkonsistenan dimana selain kata ‘website’ kata lainnya diawali dengan huruf besar. Selain itu, tombol submit dan reset yang menggunakan warna abu-abu pudar yang terlihat seperti non-aktif akan membingungkan user.

Melanjutkan postingan sebelumnya, sekarang kita kan mengulas tentang buku tamu di Website Dastan…..

Ini adalah gambar dari halaman Buku Tamu Dastan. Jenis huruf yang digunakan memudahkan untuk dibaca. Tetapi, ukuran (Caps Lock)nya tidak seragam (tergantung si penulis buku tamu). Sayangnya, nama pengirim berwarna biru tetapi ketika dicoba untuk di-klik, tidak bisa di-link. Begitu pula tulisan website dan email tidak semua dapat langsung dibuka ketika di-klik (tergantung si penulis menuliskan website dan emailnya apa tidak). Penanda dapat di-klik (di-link) pada tulisan website/email adalah ketika di dekatkan, kursor berbentuk tangan dan tulisan ada garis bawahnya. Hal ini memudahkan user.

Tulisan Isi Buku Tamu yang berwarna biru dapat di-klik dan me-link ke halaman form isian. Akan tetapi, karena tulisan ini ukurannya sama dengan nama pengisi di bawahnya, sehingga hampir telewat/tidak mencolok, yang jelas akan membuat user yang ingin mengisi kebingungan dan harus mencari-cari terlebih dahulu hingga menyadari bahwa tulisan tersebut dapat di-link. Akan lebih baik jika jenis dan ukuran tulisan untuk kata-kata tersebut dibedakan dari yang lainnya untuk memudahkan user.

Setelah di-klik, akan ter-link ke halaman form isian.

Tidak ada keterangan field mana saja yang required sehingga membingungkan user untuk mengisi. Selain itu, terlihat ketidakkonsistenan dimana selain kata ‘website’ kata lainnya diawali dengan huruf besar. Selain itu, tombol submit dan reset yang menggunakan warna abu-abu pudar yang terlihat seperti non-aktif akan membingungkan user.

Tags:

26
Jun

Web Usability Part 4 ~Halaman Segera Terbit~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Next… Halaman Segera Terbit !

Keterangan yang ada di halaman segera terbit terdiri dari cover novel, judul, nama pengarang serta sinopsis dari novel tersebut. Pemilihan jenis huruf dan warna membuat informasi yang ingin disampaikan mudah terbaca. Juga terdapat icon berupa kereta belanja yang bertuliskan pesan untuk memudahkan (navigasi) pemesanan bagi user.

Gambar di atas adalah form pemesanan yang disediakan. Tanda * berwarna orange merupakan penanda bahwa field tersebut required. Sayangnya Dastan tidak menyediakan tulisan/keterangan tersebut. Untuk jenis kelaimn, sudah tepat menggunakan radio button, dan untuk tanggal lahir menggunakan dropdown list. Tetapi untuk tanggal lahir, ada baiknya menggunakan default tanggal 1 dan bulan Januari tetapi dalam bahasa Indonesia (Dastan menggunkan bahasa Inggris untuk nama bulan) supaya konsisten. Kotak isian yang sejajar juga memudahkan user, akan tetapi sebaiknya tulisannya jangan menyambung ke bawah, tetapi ke samping (arah pemotongan kata). Tombol submit berwarna abu-abu pudar dan terlihat seperti non-aktif. Hal ini jelas mengganggu dan membingngkan user. Sebaiknya digunakan warna yang lebih cerah/kuat.

Tags:

26
Jun

Web Usability Part 3 ~Halaman Katalog~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Sekarang waktunya ke halaman katalog !

Halaman katalog di website Dastan disusun berdasarkan abjad judul (berurutan sesuai abjad). Akan tetapi hal ini agak menyulitkan juga bagi user karena hanya dikelompokkan berdasarkan urutan abjad. Ada baiknya, di atas katalog, di beri opsi untuk memilih sesuai abjad judul buku, berdasarkan pengarang, atau kategori buku. Selain itu, sebaiknya warna latar untuk tabel jangan abu-abu, tetapi warna yang lebih menarik lainnya. Tetapi baik pemilihan jenis huruf maupun keterangan tentang buku (judul. pengarang, harga, dan berat) sudah cukup membantu user. Selain itu, di bawah katalog terdapat penunjuk halaman yang juga akan berubah warna saat kita berada di halaman katalog tertentu.

Tags:

26
Jun

Web Usability Part 2 ~Halaman Muka~

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Akhirnya kita mengulas tentang halaman website Dastan Books. Pertama-tama, yang akan kita ulas adalah halaman Muka.

Nah, gambar-gambar di atas adalah halaman muka dari website Datan Books (selanjutnya akan disebut Dastan). Jika dilihat sekilas, halaman muka Dastan sangatlah panjang (lebih dari satu halaman screenful), dimana user harus men-scroll ke bawah untuk melihat keseluruhan isi tampilan Muka. Hal ini tentu tidak tidak efektif bagi user yang hanya ingin melihat sekilas (bukan pengunjung tetap/member Dastan).

Di bagian kiri atas halaman, terdapat logo Dastan ter-link ke halaman Muka. Logo ini memudahkan user untuk mengenali website tersebut, akan tetapi, ukuran logo yang lebih kecil dibandingkan banner dan banyaknya gambar lain, membuat logo terlihat tidak menonjol dan tersembunyi (logo dapat terlewat saat user hanya melihat website secara sekilas).

Mesin pencarian yang digunakan oleh Dastan cukup membantu karena adanya dropdown list yang berisi kategori buku yang telah diurutkan sesuai abjad di depan kotak kosong tempat user mengetikkan key word. Selain itu, keterurutan yang baik, dari tulisan pencarian, dropdown list kategori, kotak key words, lalu tombol ‘go’, memudahkan user dalam menggunakan mesin pencarian ini.

Tab menu Dastan menggunakan bahasa yang konsisten (Bahas Indonesia). Selain itu, terdapat kontras antara tulisan (putih) denganĀ  latar (abu-abu gelap). Dan tulisan yang digunakan mudah terbaca oleh user. Sayangnya, saat user berada di halaman tertentu, tidak ada perubahan apapun pada tab menu yang menunjukkan keberadaan user.

Animasi alamat (alamat Dastan yang bergerak dari kanan ke kiri) sayangnya sangat mengganggu user saat melakukan browsing. Hal ini karena selain berwarna biru (yang menandakan suatu tulisan dapat di-link tetapi dalam kasus Dastan tidak bisa di klik/link), tulisan tersebut bergerak terlalu cepat (hanya 30 detik untuk tulisan yang amat panjang) dengan jeda tak lebih dari 2 detik antara akhir tulisan menghilang hingga awal tulisan muncul kembali.

Selain animasi alamat, yang agak menggangu juga adalah animasi novel-novel Dastan (bergerak dari kanan ke kiri) yang berada tepat di bawah animasi alamat. Adanya dua animasi yang terletak berurutan membuat mata user menjadi cepat lelah dan pusing. Apalagi ukuran gambar animasi novelnya cukup besar dan memakan banyak tempat, jarak antara satu gambar ke gambar novel yang berdekatan (berdempetan), dan gambar bergerak terlalu cepat. Selain itu, waktu loading halaman Muka Dastan menjadi lebih lama akibat banyaknya animasi dan gambar.

Animasi pada halaman Muka tidak hanya itu. Ada satu animasi lagi yaitu animasi novel segera terbit yang berganti tiap 3 detik sekali. Hal ini tentu membuat user harus buru-buru membaca judul dan nama pengarangĀ  yang tertera di bawah animasi gambar. Hanya judul dan nama pengarang saja yang tertera di bawah animasi ini. Jika ingin membaca sinopsis novel, user harus meng-klik gambar cover novel, judul buku, atau tulisan ‘lanjut’ yang ada di bawah nama pengarang.

Untuk login, user dapat menggunakan kotak login yang ada di sebelah kiri. Kotak ini sebenarnya memudahkan user karena juga dilengkapi dengan kereta belanja (dapat digunakan untuk melihat apa saja yang telah user pilih) dan bantuan. Sayangnya, kotak di area ini termasuk untuk daftar baru, menggunakan huruf berwarna abu-abu yang tidak terlalu gelap sehingga terlihat seperti non-aktif.. Di bawahnya, terdapat link berupa gambar dan tulisan untuk mendapatkan member card. Gambar dan tulisan ini cukup eye-catching dan memudahkan pengguna jika ingin mendapatkan member card.

Tulisan dan warna tulisan untuk headline news juga memudahkan user dalam membacanya. Tetapi ada 6 baris kalimat yang ditampilkan. Sebaiknya hanya 3 baris saja yang ditampilkan, sehingga memudahkan user yang hanya membaca secara scan.

Cara pembayaran yang dicantumkan berupa gambar juga memudahkan user dalam menentukan pilihan dan keputusan. akan tetapi, akan lebih baik jika ada tulisan opsional cara pembayaran di atas gambar-gambar tersebut sehingga user dapat langsung menangkap maksud penempatan gambar-gambar tersebut.

Penempatan buku baru, yang berupa cover buku, judul, pengarang dan sekilas sinopsisnya juga dapat menarik perhatian user. Baik cover, judul dan pengarang dapat lansung di-klik untuk me-link langsung ke halaman yang berisi tentang penjelasan lebih lanjut mengenai buku. Hal ini juga memudahkan user. Adanya gambar kereta belanja yang juga disertai tulisan beli, memudahkan user dalam menggunakan website ini (kemudahan navigasi). Baik tulisan maupun warna tulisan yang digunakan juga memudahkan user. akan tetapi, pemilihan warna untuk harga (warna biru) akan membingungkan user karena warna biru identik dengan link sementara ketika harga dicoba untuk di-klik, tidak dapat me-link kea halaman apapun. Selain itu, terdapat dua tiga harga tanpa ada keterangan yang tentu akan membiingungkan user.

Kategori buku juga menggunakan warna abu-abu yang terkesan non-aktif. Ada baiknya jika warna yang digunakan adalah warna yang tidak mengesankan non-aktif. Tetapi pemilihan jenis hurufnya sesuai karena memudahkan user dalam membacnya. Selain itu, untuk keterangan diskon, diberi dengan warna dan bentuk yang eye-catching sehingga menjadi salah satu poin yang baik saat user membaca secara scan.

Tags:

26
Jun

Web Usability Part 1

Posted in Academic  by ADELINA PARAMITA H

Dastan Books -A Web Usability Analysis-

Sebelum kita benar-benar mengulas tentang halaman suatu website, ada baiknya kita mengetahui dulu tentang web usability terlebih dahulu…

Apa sih web usability itu?? Berdasarkan webcredible, Web usability adalah suatu cara yang sedemikian rupa sehingga user dapat menemukan apa yang mereka cari dengan cepat dan efisien. Ada beberapa kriteria dalam web usability, diantaranya yaitu

Website harus mudah dinavigasikan

User mulai terbiasa dengan layout dan frasa tertentu yang sering digunakan di internet. Jangan pernah meremehkan hal ini. Jika pada suatu website, navigasinya buruk, hanya akan membuat user tidak puas dan akan membuat website itu ditinggalkan oleh user.

Halaman dapat di-download secara cepat

Sangat penting agar halaman suatu website dapat didownload dengan cepat. Studi tentang usability menunjukkan bahwa 8.6 detik adalah waktu maksimum web user akan menunggu sebuah halaman untuk di-download (Sumber : Andrew B. King – Speed Up Your Site). Pada Maret 2004, hanya 25% UK web users yang telah broadband (Sumber : National Statistics).

Mudah dalam mendapatkan informasi

Berbeda dengan cara kita membaca sebuah hasil print atau buku, dalam membaca sebuah website, kita dan user lainnya cenderung membaca dalam metode scan, dimana tidak semua informasi kita baca, tetapi hanya poin-poin tertentu yang menonjol. Sehingga akan lebih baik pada suatu website, informasi yang ingin ditonjolkan, diletakkan pada tempat-tempat tertentu (headings, link text, bold text, bulleted lists).

Pembatasan tidak harus ditempatkan pada user

Jangan pernah membatasi ataupun melarang user untuk melakukan navigasi sesuai dengan keinginan mereka. Pembatasan hanya akan membuat user tidak nyaman bahkan kesal yang akan berakibat user enggan mengunjungi suatu website.

Sumber : webcredible dengan beberapa penyesuain

Selain kriteria-kriteria yang disebutkan di atas, masih banyak kriteria lain. Akan tetapi, kriteria-kriteria itu akan langsung kita bahas pada saat mengulas website.

Jadi, tunggu postingan selanjutnya ya….

Tags:

25
Jun

Web Usability ~An Intro~

Posted in Academic  by ADELINA PARAMITA H

Posting ini dan posting-posting selanjutnya dengan tags yang sama akan membahas mengenai tugas mata kuliah interaksi manusia dan komputer yang berupa ulasan mengenai sebuah situ yang telah terpilih dari tiga situs yang diajukan. Kebetulan, saya mendapatkan tugas untuk mengulas situs Dastan Books.
Dastan Books adalah salah satu lini dari Zahra Publishing House. Dastan merupakan lini yang berfungsi untuk menerbitkan dan menjual novel. Melalui situs Dastan, user dapat membeli novel-novel baik terjemahan maupun asli Indonesia yang diterbitkan Dastan. Pembelian ini dilakukan secara online, sehingga memudahkan user yang tidak dapat langsung pergi ke toko buku untuk mendapatkan buku-buku keluaran Dastan.
Mau tau kelanjutan analisisnya… Baca postingan selanjutnya ya!!

Tags:


 
LinkDock.com You found linkdock.com, so will your customers. It's a great label for your website and will help you define your identity on the Web.