Senin, 24 Oktober 2011

Analisis Search Usability Pada Situs BPS

Sekarang saya akan menuliskan hasil analisis mengenai search availability pada fungsi search dan SERP (Search Engine Result Pages) dari situs BPS. Situs ini dapat diakses melalui www.bps.go.id. Analisis yang saya lakukan kali ini merujuk pada search availability yang terdapat pada http://www.userfocus.co.uk/resources/searchchecklist.html.
SERP di situs BPS ini masih kurang baik, karena ada beberapa kekurangan. Antara lain :
  • SERP tidak menunjukkan keyword apa yang kita gunakan sebelumnya dan kotak search yang ada pun menjadi kosong. Hasil pencarian kurang jelas karena keyword yang cocok di hasil tidak diberi tanda (blok warna). Sistem tidak memberikan saran untuk memperbaiki keyword pencarian, apabila ada kesalahan ketik, maka akan langsung tidak ada hasil.
  • SERP tidak mencantumkan berapa hasil pasti pencariannya. Misalnya, SERP akan menunjukkan ada 10 halaman, tapi setelah kita klik halaman ke-10, SERP akan menunjukkan ada 23 halaman hasil. Dan jumlah hasil yang ditampilkan tiap halamannya tidak bisa diubah oleh user. Lalu ukuran huruf antara judul artikel dan isi artikel sama besar, sehingga mempersulit pencarian artikel yang diinginkan.
  • Apabila kita mengklik tombol cari tanpa ada keyword, maka search engine akan mencantumkan seluruh artikel yang ada di situs BPS tersebut. Dan bila tidak ada hasil yang ditemukan SERP tidak menjelaskan hal tersebut, melainkan hanya menunjukkan kategori-kategori tanpa pilihan artikel di dalamnya.
  • Situs BPS tidak menyediakan fasilitas bantuan untuk menggunakan search enginenya secara efektif, dan tidak menyediakan pilihan search interface yang lebih mendalam, serta tidak bisa menyimpan hasil pencarian yang lebih mendalam tersebut.
  • Kotak pencarian yang disediakan situs BPS tergolong kecil. Batasan pencarian sudah jelas di SERP namun user tidak bisa menentukan kategori atau batasannya sendiri.
Dengan adanya poin-poin kesalahan hasil dari analisis, maka saya dapat memberikan saran perbaikan desain SERP sebagai berikut :
Gambar 1
Keterangan gambar 1 : disediakan drop-down box untuk memilih kategori pencarian (kata kategori kurang terlihat karena ruang yang kurang), kotak keyword lebih panjang, keyword sebelumnya ditulis di kalimat hasil pencarian, keyword sebelumnya dipertahankan, keyword yang sesuai diberi blok warna, diberikan link menuju ke penelusuran yang memiliki pilihan atau filter yang lebih spesifik. Link yang sudah pernah dikunjungi berwarna ungu.

Gambar 2

Keterangan gambar 2 : ketika terjadi kesalahan penulisan keyword, sistem akan memberikan saran untuk keyword yang lebih baik, dan langsung melakukan pencarian dengan keyword yang lebih baik itu. Link yang sudah pernah dikunjungi berwarna ungu.

Gambar 3
Keterangan gambar 3 : menunjukkan hasil pasti berapa jumlah halaman yang ditemukan.

Gambar 4
Keterangan gambar 4 : memberikan link menuju halaman bantuan bagaimana melakukan pencarian yang baik di situs ini.

Gambar 5
Keterangan gambar 5 : Apabila tidak ditemukan hasil apapun dari pencarian yang dilakukan.

Gambar 6

Keterangan gambar 6 : Judul artikel sebaiknya lebih besar dari isi artikel yang ditampilkan. Sehingga memudahkan user untuk mencari artikel yang tepat.

Sekian saran perbaikan untuk SERP pada situs BPS. Semoga dengan saran yang saya kemukakan maka penggunaan fungsi search tersebut akan menjadi lebih maksimal dan efisien.

Minggu, 23 Oktober 2011

Review 10 Kesalahan Dalam Desain Web

Kali ini dalam memenuhi bagian ujian dari mata kuliah Interaksi Manusia & Komputer, saya akan meninjau beberapa situs yang saya anggap memiliki kesalahan dalam desain webnya. Dasar yang saya gunakan pada peninjauan desain web adalah artikel Top 10 Mistakes in Web Design (http://www.useit.com/alertbox/9605.html).

Bad search
Salah satu situs yang memiliki pencarian yang buruk adalah situs DPR Indonesia, yang dapat diakses melalui www.dpr.go.id. Search engine yang ada di situs ini menurut saya kurang baik, karena tidak memberikan saran keyword yang tepat pada saat kita melakukan pencarian. Misal, disini saya melakukan pencarian dengan keyword “komisi 8”.
Halaman pertama dari hasil pencarian tidak ada yang tepat dengan apa yang diinginkan. Kita tidak diberi saran bahwa mungkin keyword yang kita inginkan adalah “komisi VIII”. Sehingga akan sulit bagi user untuk menentukan apa keyword yang dibutuhkan untuk mencari informasi yang dibutuhkannya, dalam hal ini komisi VIII.

Pdf files for online reading
Contoh situs yang menggunakan file pdf langsung untuk dibaca user antara lain adalah www.pdf-world.net. Situs ini memiliki fitur quick view pdf untuk membaca file pdf yang sudah dipilih. Tetapi file pdf yang pada dasarnya tidak cocok dengan ukuran dari browser, sehingga ukurannya jadi lebih kecil. Gambar di bawah adalah contoh penggunaan quick view di pdf-world.
Seperti yang dapat kita lihat pada gambar di atas, file pdf yang akan dilihat diberikan tempat tersendiri yang membuatnya semakin kecil. Meskipun telah disediakan tombol zoom in dan zoom out, navigasi untuk membaca file tersebut tetap sulit dilakukan.

Not changing the color of visited links
Hal lain yang dapat membantu kita dalam browsing di internet adalah perubahan warna pada link yang telah kita kunjungi sebelumnya. Meski begitu, ada beberapa situs yang tidak menyediakan fungsi tersebut. Misalnya adalah situs www.bps.go.id.
Gambar di atas adalah contoh hasil pencarian dari situs BPS. Apabila salah satu link hasil pencarian di-klik, maka akan terbuka di tab baru browser. Namun bila kita lihat kembali ke tab hasil cari BPS, link yang kita klik tadi tidak berubah warna. Link tersebut memang ada persegi dari sisa klik yang kita lakukan sebelumnya, namun bila kita klik di tempat lain di halaman itu, persegi tersebut akan hilang dan tidak ada yang membedakan antara link yang sudah kita kunjungi dengan yang lainnya.

Non-scannable text
Salah satu situs yang saya kunjungi dan memenuhi kriteria non-scannable text adalah http://evav4ever.wordpress.com/2008/05/29/website-maluku-tenggara-terburuk-seindonesia/. Kenapa? Coba kita lihat gambarnya terlebih dahulu.
Meskipun ini hanyalah sebuah postingan di blog, namun postingan tersebut tetap perlu di-edit dan dibuat sedemikian rupa sehingga bukan hanya teks tanpa ada penekanan dengan bold, italic, maupun underline. Seperti yang Jakob Nielsen bilang “Write for online, not print”.

Fixed font size
Berkat adanya CSS style, maka kebanyakan situs sudah menggunakan ukuran huruf/teks yang tetap. Hal tersebut dapat merugikan pengguna yang sudah berusia lebih dari 40 tahun. Karena hanya sedikit situs yang memberikan fungsi memilih ukuran teks, maka solusinya bisa dengan menggunakan fitur zoom dan memilih ukuran teks dari aplikasi browser. Salah satunya adalah dengan Internet Explorer yang dapat memilih ukuran teks dari menu view-nya. Disini saya contohkan dengan halaman dari : http://sport.id.msn.com/football/okezone/article.aspx?cp-documentid=5433931.
Contoh halaman dengan pilihan text size “Largest” :
Contoh halaman dengan pilihan text size “Smallest” :
Dapat dilihat bahwa keduanya menghasilkan ukuran teks yang berbeda, namun dengan tingkat zoom yang sama yaitu 100%. Kebanyakan browser lainnya hanya memiliki fitur zoom, yang memang memiliki kesamaan dengan memilih ukuran teks. Yaitu, bila kita zoom in, maka teks akan bisa terlihat lebih besar. Walaupun di Internet Explorer ada fitur text size, tetap ada fitur zoom yang gunanya memperbesar halaman yang dilihat, bukan hanya teks.

Page titles with low search engine visibility
Pernah membuka banyak tab lalu ditinggal ke kamar kecil, dan saat kita kembali kita lupa apa saja yang telah kita buka. Sedangkan seluruh head di tab browser memiliki nama yang sama. Misal seperti di bawah ini?
Ya, itulah yang kadang terjadi pada beberapa situs yang title tiap pagenya sama. Biasanya hal ini terjadi pada situs-situs yang menyediakan hosting untuk file dokumen, video, musik, dll. Contohnya saya coba di www.megavideo.com. Mereka membuat title tiap page sama dengan mengharapkan rendahnya search visibility, atau dengan kata lain, sulit ditemukan menggunakan search engine. Sehingga file yang diunggah oleh member mereka lebih terlindungi.

Anything that looks like an advertisement
Berikut ini adalah contoh dari banner berita di www.bps.go.id yang lebih terlihat seperti iklan.
Setiap banner di gambar di atas memiliki animasi yang seperti fungsi transisi. Namun hal itu justru membuat mereka terlihat seperti iklan dan user akan kurang memperhatikan banner-banner tersebut. Karena kebanyakan user sudah mengembangkan mental model bahwa hal-hal yang berkedip, bertransisi, dan juga pada posisi-posisi tertentu adalah iklan dan mereka akan menghindari atau tidak memerhatikannya.

Violating design conventions
Melanggar mungkin bukan kata yang tepat untuk situs yang satu ini, melainkan tidak mempedulikan seluruh konvensi desain website yang ada. Situs ini dapat diakses melalui http://www.ingenfeld.de/. Berikut tampilan dari situs tersebut.
Pertama ini adalah tampilan apabila browser kita zoom out hingga maksimal. Hal ini berarti bahwa tampilan website yang nampaknya sudah berantakan itu hanya sebagian kecil dari yang ia buat.
Sedangkan, gambar diatas adalah seluruh tampilan utama yang ada di situs ini. Kita bisa lihat betapa berantakannya isi situs ini. Semua dikeluarkan di halaman awal, bertumpuk-tumpuk, betapa banyaknya scroll kebawah dan kesamping yang ada, serta pewarnaan yang begitu banyak dan kontras. Semua alasan itu menyebabkan user sulit untuk menentukan mana yang bisa dan harus diakses terlebih dahulu.
Apabila pertanyaan utama dari suatu situs yang melanggar konvensi akan membuat user tidak tertarik untuk melanjutkan tujuannya karena sulit untuk digunakan, maka situs ini bahkan akan menghilangkan niat user dalam menggunkannya, karena tidak jelasnya tujuan dari situs ini. Saat kita menggerakkan pointer ke seluruh bagian situs, terlihat pointer berbentuk penunjuk link untuk sebagian besar area. Dan setelah saya coba menerjemahkan title dari situs ini, saya dapatkan artinya adalah motor yang dijual. Namun di situs ini tidak terlihat unsur-unsur jual-beli atau melihat katalog motor atau mobil. Situs ini diperparah dengan adanya animasi yang menggangu dan tidak jelas tujuannya.

Opening new browser windows
Hal yang kadang menggangu kita saat berinternet adalah terbukanya window baru browser tanpa kita sadari. Mungkin saat kita mengklik suatu link lalu kita langsung mengklik tempat lain lagi di halaman tersebut, lalu kita menunggu dan bertanya-tanya apa sebenarnya yang terjadi saat kita mengklik pertama kali. Ternyata ada window baru yang terbuka namun langsung tertutupi lagi, karena kita mengklik yang kedua kali. Apalagi karena fitur pada windows7 yang melakukan grouping, sehingga kita makin sulit untuk menyadari ada window baru. Contohnya seperti gambar di bawah.
Inilah bagian tampilan dari halaman memasukkan balasan di www.kaskus.us. Saat kita ingin melihat seluruh pilihan smiley yang disediakan, maka kita harus klik [more], namun kadang kita langsung melanjutkan mengetik pesan. Yang terjadi adalah window smiley yang terbuka akhirnya tertutupi window penulisan pesan yang lebih besar, sehingga kurang efektif dalam penggunaanya.

Not answering users’ questions
Hal ini biasanya lebih ke e-commerce, lebih spesifik lagi adalah saat kita tidak mendapat apa yang kita ingin tahu pada saat kita membuka halaman tersebut. Melainkan kita harus menghubungi sang penjual terlebih dahulu, sedangkan kita kadang merasa tidak nyaman bila menghubungi tapi lalu batal. Ini salah satu contohnya.
Dapat kita lihat bahwa ia menjual smartphonenya. Namun ia tidak mencantumkan harganya. Kita harus bertanya dahulu ke penjual. Misal, kita mengirimi pesan melalui forum tersebut atau kita langsung menghubungi penjual dari kontak yang diberikannya.
Mungkin muncul pertanyaan, “Apa masalahnya dengan harus bertanya dahulu? Rasanya tidak masalah”. Tapi apakah semua orang akan berpikiran seperti itu? Tidak. Dengan harus bertanya berarti kita harus menunggu. Sedangkan user tidak mau menunggu, mungkin user akan mencari thread atau tempat lain yang menjual barang yang sama. Maka hal ini dapat merugikan kedua belah pihak. Maka diperlukan suatu peraturan standar jual-beli, yang kira-kira berisi: penjual harus mencantumkan harga, spesifikasi barang, foto barang, dll.

Demikianlah hasil peninjauan dari beberapa situs yang saya temukan. Semoga apa yang saya tulis akan cukup untuk memenuhi kebutuhan penilaian ujian dan berguna bagi para pembaca yang lain.

Rabu, 28 September 2011

Serba-serbi kode QR

Akhirnya ada tugas lagi. Loh kok? Kayanya emang baru mau nulis disini kalo mau ngerjain tugas doang dong? Ga gitu juga sih, cuma kalo bukan tugas rasanya susah ngeluangin waktu untuk nulis di blog gini. hehe. Oooke. Anyways, sekarang gw mau ngomongin tentang kode QR, yang merupakan singkatan dari kode Quick Response (respons cepat). Jadi langsung aja disimak bacaan berikut.


Kode QR pada papan iklan di jepang

APA ITU KODE QR?
Kode QR adalah suatu jenis kode matriks atau kode batang dua dimensi yang dikembangkan oleh Denso Wave, sebuah divisi Denso Corporation yang merupakan sebuah perusahaan Jepang dan dipublikasikan pada tahun 1994 dengan fungsionalitas utama yaitu dapat dengan mudah dibaca oleh pemindai QR merupakan singkatan dari quick response atau respons cepat, yang sesuai dengan tujuannya adalah untuk menyampaikan informasi dengan cepat dan mendapatkan respons yang cepat pula. Berbeda dengan kode batang, yang hanya menyimpan informasi secara horizontal, kode QR mampu menyimpan informasi secara horizontal dan vertikal, oleh karena itu secara otomatis Kode QR dapat menampung informasi yang lebih banyak daripada kode batang.

BUAT APA SIH KODE QR ITU?
Awalnya kode QR digunakan untuk pelacakan kendaraan bagian di manufaktur, namun kini kode QR digunakan dalam konteks yang lebih luas, termasuk aplikasi komersial dan kemudahan pelacakan aplikasi berorientasi yang ditujukan untuk pengguna telepon selular. Di Jepang, penggunaan kode QR sangat populer, hampir semua jenis ponsel di Jepang bisa membaca kode QR sebab sebagian besar pengusaha di sana telah memilih kode QR sebagai alat tambahan dalam program promosi produknya, baik yang bergerak dalam perdagangan maupun dalam bidang jasa. Pada umumnya kode QR digunakan untuk menanamkan informasi alamat situs suatu perusahaan. Di Indonesia, kode QR pertama kali diperkenalkan oleh KOMPAS. Dengan adanya kode QR pada koran harian di Indonesia ini, pembaca mampu mengakses berita melalui ponselnya bahkan bisa memberi masukan atau opini ke reporter atau editor surat kabar tersebut.

Kode QR berfungsi bagaikan hipertaut fisik yang dapat menyimpan alamat dan URL, nomer telepon, teks dan sms yang dapat digunakan pada majalah, surat harian, iklan, pada tanda-tanda bus, kartu nama ataupun media lainnya. Atau dengan kata lain sebagai penghubung secara cepat konten daring dan konten luring. Kehadiran kode ini memungkinkan audiens berinteraksi dengan media yang ditempelinya melalui ponsel secara efektif dan efisien. Pengguna juga dapat menghasilkan dan mencetak sendiri kode QR untuk orang lain dengan mengunjungi salah satu dari beberapa ensiklopedia kode QR .

KEPENTINGAN KOMERSIAL
Selain itu, desain QR memungkinkan penggunanya untuk memasukkan logo perusahaan, klip video ataupun foto ke kode QR, tanpa menghilangkan substansi informasi apapun dari sumber yang dimasukkan. Contoh penggunaan kode QR yang didalamnya memuat konten klip video adalah kode QR yang digunakan oleh kelompok penyanyi dari Inggris bernama Pet Shop Boys pada tahun 2007. Ketika kode dipindai dengan benar, maka pengguna akan diarahkan ke situs Pet Shop Boys. Selain itu pada tahun 2009 kode QR digunakan untuk kampanye pemasaran Movie 9 di San Diego Comic Con. Pada saat itu, pelanggan diberikan kartu yang menampilkan kode QR yang telah terintegrasi dengan karya seni yang bersangkutan. Jadi, pelanggan dapat mengakses cuplikan film melalui kode QR tersebut.

KEPENTINGAN UMUM

Kode QR dapat dimanfaatkan sebagai keamanan makanan dengan cara menambahkan kode QR yang berisikan data-data mengenai kandungan nutrisi dan masa kadaluarsa pada tiap label makanan sehingga pelanggan dapat merasa lebih aman dalam memilih makanan yang dibeli sebab mereka dapat mengetahui informasi-informasi tentang makanan tersebut. Di Jepang, hal ini telah diterapkan oleh McDonald. Terdapat 19 jenis " sandwich " yang diberi kode QR yang mengandung informasi alergi, jumlah kalori dan nutrisi yang terkandung dalam sandwich tersebut. Selain itu kode QR juga dapat diberikan di halte bus, sehingga penumpang dapat mengetahui keberadaan bus yang sedang ditunggu. Cara kerjanya adalah dengan memberikan hipertaut ke kamera CCTV di setiap jalan melalui koneksi internet pada ponsel. Lebih lanjut lagi, kode QR dapat dipasang pada kartu pelajar, sehingga akan mempermudah proses absensi siswa, dan mempermudah akses bagi para siswa,guru, dan orang tua murid kepada informasi proses belajar mengajar.

CARA MEMBUAT QR CODE
Kode QR bisa kita buat dengan mengunjungi Kaywa QR code. Cara membuatnya sebagai berikut:
Pada bagian Content type, silakan pilih kode yang ingin kamu tampilkan. Ada 4 pilihan, yaitu URL, Text (teks), Phone Number (No. telepon), atau SMS (pesan singkat)
Pada bagian Content, isilah sesuai tipe konten (content type) yang tadi sudah kamu pilih
Untuk Size, terdapat 4 pilihan, S (Small/kecil), M (Medium/sedang), L (Large/besar), dan XL (Xtra Large/sangat besar)
Setelah itu tekan tombol Generate
Pada jendela sebelah kiri akan tampil QR Code sesuai dengan konten yang kamu pilih
Di bagian bawah QR Code atadi terdapat kode HTML. Salin (Ctrl+C) kode tersebut dan tempel (Ctrl+V) di
blog kamu untuk menampilkan QR Code tersebut.

CARA PENGGUNAAN KODE QR
Kode QR dapat digunakan pada ponsel yang memiliki aplikasi pembaca kode QR dan memiliki akses internet GPRS atau WiFi atau 3G untuk menghubungkan ponsel dengan situs yang dituju via kode QR tersebut. Pelanggan, yang dalam hal ini adalah pengguna ponsel hanya harus mengaktifkan program pembaca kode QR, mengarahkan kamera ke kode QR, selanjutnya program pembaca kode QR akan secara otomatis memindai data yang telah tertanam pada kode QR. Jika kode QR berisikan alamat suatu situs, maka pelanggan dapat langsung mengakses situs tersebut tanpa harus lebih dulu mengetikkan alamat dari situs yang dituju. Jika ingin mengakses kode QR dengan ponsel tanpa kamera, maka hal pertama yang harus dilakukan oleh pengguna adalah dengan menjalankan terlebih dahulu aplikasi peramban yang ada pada ponsel, lalu masukkan URL halaman yang bersangkutan, selanjutnya masukkan “ID” atau 7 digit nomor yang tertera di bawah kode dan klik tombol Go, maka pengguna akan memperoleh konten digital yang diinginkan. Hal ini tentu mempermudah pelanggan dalam mendapatkan informasi yang ditawarkan oleh pemilik usaha. Jenis-Jenis aplikasi yang dapat membaca kode QR antara lain misalnya Kaywa Reader , yang dapat di instal pada ponselnokia,iMatrix, aplikasi untuk iPhone dan ZXing Decoder Online yang dapat digunakan untuk mendekode kode QR berupa imaji dengan memasukkan URL image maupun dengan menguploadnya.

KELEBIHAN KODE QR
Kode QR memiliki kapasitas tinggi dalam data pengkodean, yaitu mampu menyimpan semua jenis data, seperti data numerik, data alphabetis, kanji,kana,hiragana,simbol,dan kode biner. Secara spesifik, kode QR mampu menyimpan data jenis numerik sampai dengan 7.089 karakter, data alphanumerik sampai dengan 4.296 karakter, kode binari sampai dengan 2.844 byte, dan huruf kanji sampai dengan 1.817 karakter. Selain itu kode QR memiliki tampilan yang lebih kecil daripada kode batang. Hal ini dikarenakan kode QR mampu menampung data secara horizontal dan vertikal, oleh karena itu secara otomatis ukuran dari tampilannya gambar kode QR bisa hanya seperspuluh dari ukuran sebuah kode batang. Tidak hanya itu kode QR juga tahan terhadap kerusakan, sebab kode QR mampu memperbaiki kesalahan sampai dengan 30%. Oleh karena itu, walaupun sebagian simbol kode QR kotor ataupun rusak, data tetap dapat disimpan dan dibaca. Tiga tanda berbentuk persegi di tiga sudut memiliki fungsi agar simbol dapat dibaca dengan hasil yang sama dari sudut manapun sepanjang 360 derajat.

Nah sekian info mengenai kode QR. Jadi kode QR itu sangat berguna karena dapat menyimpan informasi yang cukup besar dan cara penggunaannya yang cukup mudah. Misal jika kita ingin berbagi pin BB, mengirimkan URL, atau mungkin mau berbagi cerita pendek, dll. Maka kita cukup membuat kode QR, lalu kita post, share, tweet, apa aja kali ya yang bisa upload image. Sekarang gw ucapkan selamat ber-QR ria!

Source : Wikipedia dan allfreetips4u