Dan Akhirnya Pindah Blog

Akhirnya postingan setelah sekian lama gak ngeblog disini :D. Yap, artikel yang paling terakhir saya posting adalah artikel berjudul Highchart.js | Library Javascript untuk Membuat Chart yang Interaktif pada tanggal 30 Mei 2014. Setelah lebih dari satu tahun tidak membuat artikel di blog ini, pasti akan muncul pertanyaan ‘Apa alasan saya membuat artikel lagi?’.

Alasan yang paling utama adalah untuk memberi tahu kalian semua bahwa saya memutuskan untuk menggunakan media lain untuk ngeblog, tidak lagi menggunakan WordPress. Alamat blog saya sekarang di rahmandawibowo.com, dan artikel-artikelnya masih seputar pemograman, namun topiknya dipersempit lagi menjadi pemograman dan pengembangan website. Di website itu sudah terdapat beberapa artikel yang mungkin akan bermanfaat bagi teman-teman. Dan kedepannya saya akan lebih aktif lagi untuk ngeblog di website itu :).

Saya pindah media ngeblog bukan karena ngeblog di WordPress tidak nyaman, tapi saya membutuhkan kustomisasi lebih terhadap blog saya yang tidak bisa saya lakukan di WordPress. Siapa pula yang tidak nyaman dengan WordPress yang sudah menyediakan semuanya dengan cuma-cuma? (dan pada kenyataannya saya tetap menggunakan media yang gratis untuk membuat blog yang baru). Kustomisasi tersebut saya pikir perlu untuk menjalankan rencana saya yang ingin mengkhususkan blog saya pada topik yang saya telah ceritakan tadi.

Sebenarnya keberadaan postingan ini dipicu oleh kejadian yang agak unik. Jadi ceritanya setelah sekian lama tidak ngeblog di sini, tiba-tiba saya mendapat pemberitahuan lewat email bahwa ada pengunjung yang memberikan komentar baru berupa pertanyaan pada beberapa artikel saya. Saya pikir pertanyaan tersebut sudah tidak relevan untuk ditanyakan karena artikelnya sudah lama sekali (artikelnya tentang tugas kuliah) dan yang ditanyakan adalah format tugas kuliah.

Mungkin yang memberikan komentar itu tidak ngeh kalau artikel itu sudah lama, tapi mungkin saja sudah tahu. Tapi yang jelas adalah ternyata masih ada yang mengunjungi blog yang sudah ditumbuhi lumut dan dipenuhi sarang laba-laba ini. Dan mungkin beberapa artikel di blog ini bermanfaat bagi mereka.

Jadi dengan membuat artikel ini, saya mengajak teman-teman yang mengikuti blog ini atau yang baru saja membaca beberapa artikel di blog ini untuk mengunjungi blog saya yang baru. Harapannya adalah supaya para pembaca sekalian bisa menemukan artikel-artikel yang menarik dan bermanfaat dan masih berhubungan dengan topik yang sudah saya buat di blog ini pada blog yang baru.

Saya tetap membuat artikel, karena berbagi itu menyenangkan, apalagi kalau artikelnya dapat menjadi solusi bagi permasalahan orang lain.

Kunjungi rahmandawibowo.com untuk mendapatkan info-info dan tutorial menarik seputar pemograman website dari Rahmanda Wibowo!

catatan: Saya tetap akan menjawab pertanyaan dan komentar yang terkait dengan artikel-artikel di blog ini :).

Highchart.js | Library Javascript untuk Membuat Chart yang Interaktif

Untuk menampilkan data, biasanya kita memilih menggunakan grafik agar data lebih mudah dilihat dan dipahami. Apabila kita bekerja dengan menggunakan Microsoft Office, kita dapat dengan mudah membuatnya karena fitur grafik sudah tersedia pada aplikasinya. Namun untuk membuat sebuah grafik pada halaman web, kita perlu menggunakan library Javascript tambahan. Salah satu library yang mudah digunakan adalah Highcharts.js.

Highcharts.js menggunakan SVG untuk me-render grafiknya, sedangkan opsi tampilan grafiknya menggunakan objek JSON. Yang paling menarik adalah, library ini gratis untuk penggunaan non-komersil :D. Berikut penjelasan penggunaan Highcharts.js :

1. Unduh terlebih dahulu library-nya di http://www.highcharts.com/download. Hasil unduhannya akan berupa file berekstensi .zip.
2. Ekstrak file unduhannya ke dalam direktori komputer Anda. Hasil ekstrak tadi akan memunculkan beberapa folder seperti examples, exporting-server, gfx, graphics, js dan file index.htm. Buka folder js, lalu copy file highcharts.js ke dalam folder proyek web Anda.
3. Unduh jQuery di http://jquery.com/download/, pilih yang compressed. Save ke folder proyek web Anda.
4. Pada kodingan html proyek web Anda, tambahkan kodingan dibawah ini pada bagian tag <head> :

   	<script src="jquery-x.xx.x.min.js" type="text/javascript"></script> // xx tergantung versi jquery yang diunduh
   	<script src="highcharts.js" type="text/javascript"></script>
   

5. Dibawah kodingan sebelumnya, tambahkan kodingan dibawah ini :

   <script>
   $(function () {
   // container adalah id tag html yang menampung gambar grafik yang dibuat
    $("#container").highcharts({
               chart: {
                   type: 'line' //tipe grafik, ada beberapa opsi seperti bar, area, column, line dll. Defaultnya line
               },
               title: {
                   text: 'Monthly Average Temperature', // title grafik, opsional
                   x: -20
               },
               subtitle: {
                   text: 'Source: WorldClimate.com', // subtitle dari grafik, opsional
                   x: -20
               },
               xAxis: {
                   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // indeks dari sumbu x grafik 
               },
               yAxis: {
                   title: {
                       text: 'Temperature (°C)'
                   },
                   plotLines: [{
                       value: 0,
                       width: 1,
                       color: '#808080'
                   }]
               },
               tooltip: {
                   valueSuffix: '°C'
               },
               legend: {
                   layout: 'vertical',
                   align: 'right',
                   verticalAlign: 'middle',
                   borderWidth: 0
               },
               series: [{ // data grafik, strukturnya array
                   name: 'Tokyo',
                   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
               }]
           });
   });
   </script>
   

6. Pada bagian body, jangan lupa tambahkan tag <div id=”container></div> untuk menampung grafik.
7. Tampilkan halaman web Anda pada browser.

Tampilan grafiknya akan seperti dibawah ini:

Tampilan grafik highcharts

Apabila kurang jelas, Anda dapat mengunduh file tutorialnya di sini. Selamat mencoba :)

FileHub – File Sharing App for Windows Phone 8

FileHub adalah aplikasi yang memungkinkan kita untuk melakukan managemen file di Windows Phone 8 (WP 8). Aplikasi ini dapat membaca penyimpanan di smartphone, baik localstorage maupun SD card. Sayangnya kita hanya dapat melakukan managemen file (copy, move, paste, delete) dalam satu storage saja, tidak bisa antar storage. Agak miris mengingat ini adalah fitur utama yang harus ada pada setiap aplikasi file manager…

isolated storage based File Manager, yeah isolated

Setelah dicek lagi ke windowsphone.com, deskripsi aplikasinya memang file manager, tetapi isolated. Jelas sudah bahwa memang aplikasi file manager ini memiliki keterbatasan dalam hal managemen file antar storage.   

Mindset user untuk sebuah aplikasi file manager pastinya adalah dapat memanagemen file sesuka hati dong. Tetapi kenyataannya memang pihak Microsoft mempunyai kebijakan untuk membatasi kemampuan aplikasi seperti file manager ini demi menjaga keamanan device. Oleh sebab itu semua aplikasi file manager yang ada di store tidak seperti file manager di Android maupun IOS (baca Security Considerations in the Windows Phone 8 Application Environment).

Dibalik semua kekurangan itu, aplikasi ini hebat dalam hal file sharing. FileHub mendukung ftp sharing untuk berbagi file dengan PC via Wifi dan cloud storage sharing untuk upload ke berbagai akun cloud storage.  Fitur ini merupakan alternatif yang cukup keren mengingat WP 8 juga membatasi user dalam mengakses file localstorage dari PC meskipun lewat USB sekalipun.

mendukung cloud storage

ftp file sharing dengan wifi

Sedikit cerita, karena saya suka membuat sketsa desain secara manual, saya selalu berurusan dengan scanner di rumah. Apabila saya menggambar di luar rumah (misal di kampus), saya harus menunda pekerjaan edit digital hingga saya sampai ke rumah untuk dapat scan gambar yang telah saya buat. Dengan menggunakan FileHub, saya bisa mentransfer hasil foto scan gambar saya dengan Camscanner (aplikasi scan dokumen dengan kamera smartphone) ke PC dengan mudah, sehingga saya tidak perlu repot-repot scan dokumen lewat scanner.  Meskipun masih bergantung kepada internet, setidaknya alternatif ini telah cukup memberikan solusi terhadap salah satu masalah saya.

Tentu saja akan lebih membantu apabila ada file manager yang memiliki fitur lengkap seperti transfer data antar localstorage dan SD card yang tidak bergantung dengan koneksi internet. Dan sepertinya memang banyak pengguna WP 8 yang menunggu aplikasi seperti itu hadir di store (ada thread yang menarik tentang perdebatan urgensi aplikasi file manager pada WP 8 di forum.wpcentral.com). Pertanyaannya adalah, akankah WP 8 mengeluarkan aplikasi file manager? :)

Visibility of System Status – focusnusantara.com

Artikel ini adalah serial dari Heuristic Evaluation – focusnusantara.com.

Pada poin ini, suatu sistem web harus dapat memperlihatkan proses apa yang sedang terjadi apabila user melakukan aksi terhadap web tersebut. Misalnya pada suatu proses upload harus memperlihatkan progres bar sehingga user dapat memperkirakan berapa lama proses tersebut berjalan.

progress bar dengan info persentase progresnya

Untuk website focusnusantara.com, ada beberapa hal yang akan dibahas pada poin ini, yaitu:

1. Tidak menyediakan info jumlah barang yang telah masuk shopping cart

Shopping cart tidak menunjukkan jumlah barang yang sudah dalam cart

Pada gambar diatas terlihat bahwa saya telah memasukkan satu item, namun tidak ada info pada web yang menunjukkan sudah berapa barang yang ada di shopping cart saya. Setelah mengklik tombol cart pun saya tidak mengetahui apakah item yang saya pilih sudah berhasil masuk shopping cart atau belum karena tidak muncul pemberitahuan apapun. Satu-satunya jalan untuk mengetahui hal itu adalah masuk ke halaman shopping cart (menu shopping cart ditandai dengan kotak biru).

Untuk sebuah web e-commerce, sangat penting menyediakan informasi shopping cart yang dapat dilihat secara cepat tanpa harus meninggalkan halaman belanja. Biasanya menu shopping cart dan info kuantitasnya diletakkan di paling atas dekat navigation bar. Namun pada web ini menu shopping cart terletak agak di bawah dan user perlu scroll ke bawah untuk melihatnya.

Shopping cart pada navigation bar, jumlah cartnya akan berubah setiap kita memilih item

Saran : Menambahkan info jumlah barang pada shopping cart yang diletakkan di setiap halaman web akan sangat membantu user.  Dengan kemudahan akses terhadap info tersebut, user tidak perlu mengecek ke halaman shopping cart setiap memasukkan item.

2. Halaman pemesanan sangat kurang informatif

Saat saya mencoba untuk checkout pada shopping cart, yang tampil adalah halaman pemesanan. Pada halaman ini terdapat form pengisian identitas pemesan dan tabel berisi list item yang akan dipesan. Setelah mengisi lengkap form dan mengklik submit, yang muncul adalah ucapan terimakasih.

Thank you for your order

Tidak ada informasi yang menerangkan bagaimana saya harus transaksi, dan bagaimana kelanjutan pemesanan saya (meskipun cuma testing saja). Saya juga menjadi agak ragu apakah ini benar-benar web e-commerce. Namun setelah menjelajah kembali website ini, saya menemukan menu “cara bertransaksi” yang selama ini terdapat di navigation bar.

Pada halaman “cara bertransaksi”, ada informasi mengenai tata-cara bertransaksi online dengan Focus Nusantara.

cara bertransaksi dengan Focus Nusantara

Setelah membaca seluruh instruksi di halaman tersebut, saya berkesimpulan bahwa peran administrator pada sistem penjualan online di focusnusantara.com masih sangat besar. User tidak bisa melakukan pemesanan sekali jalan pada web ini, karena cara pembayaran dan pengiriman item diberitahukan lewat email. Mungkin keputusan membuat sistem yang seperti ini adalah karena mempertimbangkan keamanan bertransaksi (tapi saya malah merasa kurang nyaman menggunakan e-commerce yang seperti ini).

Saran: apabila fungsi sistem e-commerce nya ingin ditingkatkan, maka informasi transaksi harus sangat jelas dan tidak diletakkan pada halaman web yang terpisah (tetap diletakkan di halaman checkout/pemesanan).

3. Title page sesuai dengan halaman web yang sedang dibuka

Hal ini sangat membantu mengetahui dimana posisi user saat ini. Title page yang sama untuk semua halaman web akan membingungkan user.

4. Penanda pada multipage

Saat menjelajahi e-commerce adakalanya kita menemukan halaman yang multipage untuk kategori item tertentu. Agar user dapat mengetahui halaman ke berapa yang sedang dibuka, maka perlu adanya penanda pada list nomor halaman. Pada focusnusantara.com, kurung siku pada nomor tertentu merupakan penanda halaman yang sedang dibuka saat ini.

navigasi halaman

Severe Ratings = 3

Keterangan Severe Ratings (Nielsen 1995):

0 = Bukan masalah

1 = Masalah yang tidak terlalu penting

2 = Minor usability problem. Perlu diperbaiki dengan prioritas rendah.

3 = Major usability problem. Sangat perlu diperbaiki  dengan prioritas tinggi.

4 = Usability catastrophe.  Masalah yang sangat besar, perlu penanganan dengan prioritas paling tinggi.

Match Between System and Real World – focusnusantara.com

Artikel ini adalah serial dari Heuristic Evaluation – focusnusantara.com.

Pada poin ini, suatu sistem web sebaiknya menggunakan bahasa yang mudah dimengerti dan familiar untuk user. Dengan menggunakan bahasa yang baik, user akan lebih mudah menggunakan sistem web yang dibuat.

Untuk website focusnusantara.com, ada beberapa hal yang akan dibahas pada poin ini, yaitu:

1. Penggunaan istilah “customer service” dan “service & used eq.”

customer service dan service & used eq.

Pada awalnya saya sempat bingung kenapa customer service nya ada dua, dan apa perbedaan dari keduanya. Setelah diamati mungkin customer service untuk melayani pemesanan online, sedangkan service & used eq. mungkin untuk melayani reparasi kamera. Penggunaan istilah ini akan membingungkan user yang baru pertama kali menggunakan web ini (karena biasanya hanya ada customer service).

Saran: ganti istilah “service & used eq.” dengan “reparasi” atau istilah lain yang memiliki maksud yang sama sehingga tidak membingungkan dengan istilah “customer service”.

Severe Ratings = 1

 

Keterangan Severe Ratings (Nielsen 1995):

0 = Bukan masalah

1 = Masalah yang tidak terlalu penting

2 = Minor usability problem. Perlu diperbaiki dengan prioritas rendah.

3 = Major usability problem. Sangat perlu diperbaiki  dengan prioritas tinggi.

4 = Usability catastrophe.  Masalah yang sangat besar, perlu penanganan dengan prioritas paling tinggi.

Aesthetic and Minimalist Design – focusnusantara.com

Artikel ini adalah serial dari Heuristic Evaluation – focusnusantara.com.

Suatu desain yang minimalis dapat membuat user focus terhadap informasi utama tanpa harus bingung dengan informasi lain yang tidak relevan. Untuk web focusnusantara.com, desain informasi dan navigasinya sudah cukup baik, namun ada beberapa hal yang perlu dibahas, yaitu:

1. Pemilihan warna

Kombinasi warna merah dan hitam dengan teks putih terlalu kontras membuat user kurang nyaman untuk melihat web ini. Lebih baik gunakan kombinasi warna yang soft dan yang tidak membuat mata cepat lelah saat melihatnya.

Saran : untuk teks, gunakan warna abu-abu. Untuk header, coba untuk mengganti warna merah dengan warna yang tidak mencolok dengan background.

2. Penggunaan big menu untuk sub category yang terlalu banyak dan terlalu sedikit

Untuk kategori yang banyak, penggunaan big menu sangat efektif sehingga user lebih leluasa untuk memilih kategori pada halaman yang sama. Tetapi apabila terlalu banyak kategori pada satu menu dan membuat big menu menjadi sangat besar sehingga kita tetap harus scroll ke bawah untuk melihat item tertentu, hal ini tentu malah menjadi kurang efektif.

big menu yang sangat besar

Selain itu big menu untuk informasi yang sedikit juga sangat tidak disarankan. Pada web ini, big menu digunakan untuk  main navigation sehingga demi kekonsistenan, semua dibuat menjadi big menu meskipun informasinya tidak terlalu banyak. Terlalu banyak space kosong pada big menu.

big menu dengan informasi yang sedikit, terlihat kurang efektif

Pada gambar di atas terlihat bahwa kategori yang ada pada satu menu kurang banyak, dan tidak ada sub kategori (hanya menunjuk ke halaman lain).

Saran : Susunan kategori diganti menjadi berdasarkan jenis item, bukan merek. Misalkan untuk menu “lenses & accessories”, kategori disusun menjadi Prime lenses, Zoom lenses, E-mount lenses dan Accessories, dan sub kategorinya berdasarkan merek. Misalkan untuk kategori Prime lenses, sub kategorinya adalah Canon, Nikon, Olympus, Samsung dll. Hal ini akan lebih efektif.  Untuk menu “used equipment” dengan informasi yang sedikit, hapus link “more” karena tidak terlalu banyak membantu. Lebih baik buat sub kategori tambahan. Misalkan kategori “used camera”, sub kategorinya adalah digital camera dan video camera dsb.

3. List menu dengan bullet yang tidak meaningful

Pada gambar sebelumnya kita dapat melihat list menu yang terletak disebelah kiri dengan desain tiap item memiliki penanda gambar logo yang sama dan berwarna mencolok. Hal ini hanya akan membuat user kurang nyaman.

Saran: Ganti gambar dengan logo yang menunjukkan kategori masing-masing menu atau hapus saja.

4. Penggunaan select option untuk list item.

Select option biasanya digunakan pada form, bukan untuk bernavigasi. Pada web focusnusantara.com, di halaman digital camera terdapat item dengan berbagai merek dan select option yang mendaftarkan semua item yang terdapat pada masing-masing merek.

penggunaan select option yang tidak sesuai

Hal ini selain tidak sesuai dengan semantic web, juga sangat kurang efektif.

Saran: hapus penggunaan select option, ganti dengan link yang menunjuk ke halaman yang sesuai dengan kategori item yang dipilih.

 

Severe Ratings = 2

 

Keterangan Severe Ratings (Nielsen 1995):

0 = Bukan masalah

1 = Masalah yang tidak terlalu penting

2 = Minor usability problem. Perlu diperbaiki dengan prioritas rendah.

3 = Major usability problem. Sangat perlu diperbaiki  dengan prioritas tinggi.

4 = Usability catastrophe.  Masalah yang sangat besar, perlu penanganan dengan prioritas paling tinggi.

User Control and Freedom – focusnusantara.com

Artikel ini adalah serial dari Heuristic Evaluation – focusnusantara.com.

Untuk membuat website yang baik sebaiknya mempertimbangkan kebiasaan user dalam menggunakan website. User biasanya sering melakukan kesalahan saat memilih suatu fungsi. Untuk itu website harus dilengkapi dengan fungsi untuk membatalkan suatu aksi. Misalkan pada proses upload, ternyata user salah memilih file dan file itu terlanjur masuk ke proses upload. Seharusnya dalam fitur upload tersebut ada pilihan untuk membatalkan proses upload tersebut.

tombol cancel untuk membatalkan proses upload

Fungsi undo dan redo juga masuk kedalam poin ini.

Untuk focusnusantara.com, ada beberapa hal yang akan dibahas, yaitu :

1. Tidak ada pilihan undo setelah menghapus item pada shoppping list

Pada halaman shopping list saya mencoba menghapus item yang telah saya masukkan. Setelah item dihapus, tidak ada pilihan undo untuk mengembalikan item yang telah saya hapus tadi. Andaikan saja ada seorang user yang ingin mengklik tombol edit (icon pensil) tetapi malah tombol delete yang terklik, user harus kembali mencari item yang tadi dipilih. Kesalahan seperti ini sangat mungkin terjadi karena tombol delete dan tombol edit letaknya sangat berdekatan.

letak tombol edit dan delete berdekatan (kotak biru)

Selain itu tombol delete dan edit hanya menggunakan icon tanpa ada tulisan penjelas sehingga kemungkinan kesalahan klik akan lebih besar apabila halaman web tidak terload dengan sempurna pada bagian tombol tsb (tidak muncul icon delete dan edit).

Saran : Perlu ditambahkan fitur undo setelah user menghapus item pada shopping cart. Solusi lainnya adalah dengan dialog konfirmasi agar user masih dapat membatalkan aksi tsb.

2. Terdapat breadcrumb pada setiap halaman web

Breadcrumb digunakan untuk mengetahui posisi kita saat menjelajahi sebuah web. Selain itu breadcrumb juga dapat digunakan untuk kembali ke halaman parent dari posisi kita saat ini. Web focusnusantara.com telah menggunakan breadcrumb pada setiap halaman webnya sehingga user mudah untuk kembali ke halaman sebelumnya.

breadcrumb pada focusnusantara.com

3. Tidak terdapat option untuk mengurutkan item

Pada web focusnusantara.com, item yang ditawarkan sangat banyak. Untuk membantu user memilih item yang akan dipesan, option untuk mengurutkan item akan sangat membantu. Namun hal ini belum diterapkan pada web focusnusantara.com.

Saran: tambahkan option untuk mengurutkan item berdasarkan harga, tipe dll untuk membantu user dalam memilih item. Implementasinya bisa dengan select option maupun radio button.

Severe Ratings = 2

Alasan: Perlu diperbaiki untuk mempermudah user menggunakan web ini.

 

Keterangan Severe Ratings (Nielsen 1995):

0 = Bukan masalah

1 = Masalah yang tidak terlalu penting

2 = Minor usability problem. Perlu diperbaiki dengan prioritas rendah.

3 = Major usability problem. Sangat perlu diperbaiki  dengan prioritas tinggi.

4 = Usability catastrophe.  Masalah yang sangat besar, perlu penanganan dengan prioritas paling tinggi.

Error Prevention – focusnusantara.com

Artikel ini adalah serial dari Heuristic Evaluation – focusnusantara.com.

Mencegah user melakukan kesalahan itu lebih baik daripada memberikan pesan error kepada user. Oleh karena itu, web harus di desain agar user tidak melakukan kesalahan dalam menggunakannya. Selain itu, error prevention juga membantu pengelola web sehingga tidak harus banyak memvalidasi ulang input dari user secara manual.

Pada web focusnusantara.com, ada beberapa hal yang akan dibahas, yaitu:

1. Input alamat pada form checkout

Input alamat hanya terdiri dari satu teks area, dan tidak ada keterangan format pengisiannya. Padahal alamat yang lengkap sangat diperlukan untuk pengiriman barang yang dipesan. Ukuran teks areanya juga relatif kecil sehingga untuk alamat yang panjang, user tidak dapat melihat secara keseluruhan. Hal ini akan membuat user mudah melakukan kesalahan pengisian, dan pengelola e-commerce akan sedikit kerepotan karena harus mengkonfirmasi ulang alamat setiap ada pemesanan yang masuk.

Saran: Input alamat dibagi menjadi alamat, kecamatan, kota/kabupaten, provinsi, dan kodepos untuk mencegah kesalahan user melakukan kesalahan pengisian. Solusi lain adalah dengan membuat teks informasi format alamat yang benar.

2. Input mobile phone pada form checkout

Sebenarnya pada input ini telah ada fungsi validasinya. Sayangnya validasinya hanya sampai ke mencegah user mengisi dengan selain angka.

alert muncul saat mencoba mengisi input phone dengan teks

Dengan format yang salah saya dapat mengisi input mobile phone, dan saat disubmit tidak error.

mengisi input phone dengan format yang tidak lazim, error tidak muncul

Saran: buat validator yang mengecek apakah nomor telepon sudah sesuai formatnya atau belum. Selain itu tambahkan pula teks keterangan format nomor telepon yang benar.

3. Tidak ada pesan konfirmasi checkout

Meskipun semua format pengisian telah benar, kesalahan pengisian masih bisa muncul. Karena itu perlu adanya pesan konfirmasi pemesanan yang memperlihatkan semua data yang telah diinputkan sebelum akhirnya user benar-benar yakin semua informasinya benar. Pada focusnusantara.com, setelah menekan tombol submit hanya menampilkan pesan terima kasih.

Thank you for your order

Saran: alihkan tombol submit ke halaman konfirmasi yang memperlihatkan semua informasi yang telah diinputkan.

 

 

Severe Ratings = 3

Alasan: Form checkout sangat penting pada e-commerce, sehingga masalah ini sangat perlu untuk diperbaiki.

 

Keterangan Severe Ratings (Nielsen 1995):

0 = Bukan masalah

1 = Masalah yang tidak terlalu penting

2 = Minor usability problem. Perlu diperbaiki dengan prioritas rendah.

3 = Major usability problem. Sangat perlu diperbaiki  dengan prioritas tinggi.

4 = Usability catastrophe.  Masalah yang sangat besar, perlu penanganan dengan prioritas paling tinggi.

 

Heuristic Evaluation – focusnusantara.com

Postingan ini adalah hasil Heuristic Evaluation (Nielsen 1995) terhadap web focusnusantara.com sebagai take home test mata kuliah Interaksi Manusia dan Komputer, Ilmu Komputer Institut Pertanian Bogor. Ada 5 poin yang akan dibahas, yaitu:

1. Visibility of system status

2. User control and freedom

3. Match between system and real world

4. Aesthetic and minimalist design

5. Error prevention

Referensi:

10 Heuristics for User Interface Design by Jakob Nielsen

Severity Ratings for Usability Problems by Jakob Nielsen

Jquery Mobile, Sebuah Alternatif yang Asik

Jquery Mobile

Pada zaman sekarang teknologi mulai berpusat pada pengembangan aplikasi mobile. Untuk mengakses berita online, melihat timeline social media sekarang tidak perlu repot dengan membuka browser, mengetikan alamat urlnya dan menunggu webserver mengirimkan homepagenya. Dengan tapping icon aplikasi di smartphone, kita sudah dapat langsung berinteraksi dengan informasi-informasi yang tersedia di internet. Sangat mudah dan efisien.

Peralihan teknologi dari desktop ke mobile mungkin membuat kebanyakan developer kesulitan, terutama dalam menyesuaikan aplikasinya dengan device tertentu. Developer ‘harus’ belajar lagi untuk melakukan hal itu karena sistem operasi pada device mendukung bahasa pemograman yang berbeda dengan desktop atau web. Contohnya Android yang menggunakan bahasa Java, IOS yang menggunakan Objective-C, Windows Phone yang menggunakan .Net dan lain-lain. Bagi kita yang sudah terlanjur terbiasa dengan bahasa pemograman lain, tentunya ini akan sangat membuang waktu untuk belajar bahasa pemograman baru.

Jquery Mobile adalah salah satu solusi bagi para developer web yang terbiasa menggunakan Javascript dan tidak mau susah-susah untuk belajar pemograman baru (seperti saya). Jquery Mobile ini berbasis Jquery, library andalan developer web di seluruh dunia. API ini sangat menarik karena kita benar-benar membuat aplikasi mobile seperti yang kita lakukan untuk membuat web. Interfacenya tentu saja menyesuaikan dengan desain tampilan aplikasi mobile pada umumnya. Kita juga tidak perlu khawatir dengan kontrol interaksi user karena Jquery Mobile mendukung interaksi touchscreen. Untuk kustomisasi tampilan kita tinggal utak-atik di CSS-nya.

Untuk deploy ke devicenya, kita tinggal gunakan Phonegap atau IBM Worklight yang support dengan Jquery Mobile. Sekali coding, langsung bisa deploy ke berbagai platform sesuai kehendak kita. Dan aplikasi kita dijamin berjalan di device yang kita gunakan. Asik sekali bukan? :D

multiplatform dengan phonegap

Bagi saya pribadi, setelah mengenal Jquery Mobile ini saya menjadi lebih semangat untuk mengembangkan aplikasi-aplikasi mobile. Terima kasih kepada Jquery Mobile yang sangat membantu saya dan tim saya untuk membuat aplikasi mobile pada Compfest 2013 (sekarang sedang tahap final, semoga bisa menang hehe).

Kedepannya saya akan membahas lebih dalam mengenai penggunaan Jquery Mobile ini. Bagi yang tertarik untuk belajar Jquery Mobile, tetap follow blog saya ya :D

—keep sharing and coding