Web Usability Review on E-commerce

Well kali ini saya akan membahas mengenai web usability pada petersaysdenim.com. Tetapi sebelum kita membahas lebih dalam, ada baiknya jika kita pelajari dulu apa itu web usability.

Web Usability

Secara umum web usability merupakan suatu pendekatan untuk membuat website yang mudah digunakan oleh user tanpa harus melakukan pelatihan khusus, sehingga user dapat berinteraksi secara alami untuk menyelesaikan tugas yang ia miliki pada website tersebut. Sebagai contoh, jika user melihat sebuah tombol pada halaman website, maka ia akan mengklik tombol tersebut untuk mengantarkan user ke halaman/tujuan berikutnya. Tujuan  dari usability meliputi :

1. Menyajikan informasi kepada pengguna dengan cara yang jelas dan ringkas.
2. Memberikan pilihan yang tepat kepada pengguna, dengan cara yang sangat jelas
3. Menghindari semua ambiguitas mengenai konsekuensi dari suatu tindakan misalnya mengklik pada hapus / menghapus / pembelian.
4. Meletakan hal yang paling penting di tempat yang tepat  pada halaman web

Jika kita meninjau pada teori yang diberikan oleh Jacob Neilsen, usability didefinisikan oleh 5 komponen kualitas :

– Learnability
Learnability menjelaskan tingkat kemudahan pengguna untuk melakukan task-task dasar ketika pertama kali mereka melihat atau menggunakan hasil perancangan.
– Efficiency
Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka mempelajari hasil perancangan.
– Memorability
Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan baik, setelah beberapa lama tidak menggunakannya.
– Errors
Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error dan cara memperbaiki error.
– Satisfaction
Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

Untuk dapat memenuhi kelima komponen di atas, maka diperlukan suatu desain antarmuka yang baik dan benar serta mempermudah user untuk mengerjakan tugas mereka. Ada 10 prinsip umum yang harus diperhatikan jika kita ingin membuat antar muka yang baik dan benar, yaitu :

1. Visibility of system status

Sistem harus dapat menginformasikan kepada pengguna mengenai apa yang sedang terjadi pada sistem. Ada 2 hal pentung yang mendasari visibility of system status, yaitu

Where am a i? : dimana pengguna saat ini berada

Where can i go next? : kemana pengguna dapat pergi dari suatu state

2. Match between system and the real world

Sistem harus dapat ‘berbicara’ menggunakan bahasa yang akrab dan sesuai dengan bahasa yang digunaka user pada kehidupan sehari-hari.

3. User control and freedom

User dapat kembali ke suatu kondisi setelah mereka mengakses ke sebuah menu atau kondisi lain. Kadang user memilih pilihan yang salah dan perlu diberikan opsi emergency exit, sehingga user dapat keluar dari pilihan yang salah tersebut tanpa harus menanggung resiko yang tidak diinginkan.

4. Consistency and standards

Rancang sistem dengan suatu standar tertentu dan konsisten, sehingga pengguna tidak perlu bertanya-tanya.

5. Error prevention

Lakukan pencegahan jika terjadi eror yang disebabkan oleh pengguna. Dapat dikakukan dengan menghilangkan kondisi yang rawan eror, periksa kesalahan untuk user, atau berikan konfirmasi sebelum user ingin melakukan suatu tindakan.

6. Recognition rather than recall

Minimalkan beban pengguna untuk mengingat dengan membuat objek, tindakan, dan pilihan terlihat jelas. Pengguna tidak perlu mengingat informasi dari satu bagian ke dialog yang lain. Instruksi untuk penggunaan sistem harus terlihat jelas.

7. Flexibility and efficiency of use

Permudah pengguna dalam menggunakan sistem, sehingga user dapat menyelesaikan tugasnya dengan lebih cepat. Sajikan fitur-fitur pada website yang mudah digunakan oleh semua level user.

8. Aesthetic and minimalist design

Hindari informasi yang tidak relevan.

9. Help users recognize, diagnose, and recover from errors

Ketika user melakukan kesalahan beri pesan yang jelas dan mudah dimengerti menggunakan bahasa yang sederhana serta berikan solusi yang tepat.

10. Help and documentation

Meskipun lebih baik jika sistem tersebut dapat digunakan tanpa dokumentasi, mungkin perlu untuk memberikan bantuan dan dokumentasi. Setiap informasi tersebut harus mudah dicari, fokus pada tugas pengguna, mendaftar langkah-langkah konkret yang akan dilakukan, dan tidak terlalu besar.

Review yang dilakukan pada petersaysdenim.com akan merujuk berdasarkan penjelasan di atas. Sekarang mari kita beranjak ke www.petersaysdenim.com

The Review

Gambar di atas adalah halaman utama dari petersaysdenim.com. Menurut saya halaman home ini di buat dengan cukup sederhana. Foto-foto besar yang hampir memenuhi layar ketika pertama di buka memperlihatkan produk-produk terbaru di tampilkan secara bergantian. Hal ini cukup menarik user untuk mengetahui lagi lebih dalam mengenai produknya. Tetapi ada satu fitur penting yang tidak ditemukan pada web ini, yaitu pencarian. Saya tidak tahu apa alasan pembuat web ini tidak memberikan fitur pencarian, padahal menurut saya fitur itu sangat penting untuk mempermudah tugas user.Sekarang mari kita lihat web ini berdasarkan 10 usability heuristic.

1. Visibility of system status

Ketika pertama masuk ke web ini saya sedikit kebingungan untuk mencari lokasi saya saat ini. Setelah saya masuk ke halaman shop akhirnya saya menemukan breadcumb (path penunjuk posisi user pada website). Namun sayangnya fitur tersebut hanya ada ketika kita sedang berada di halaman utama. Dari halaman shop pengguna dapat langsung memilih produk kesukaannya.

Selain itu masih ada sedikit kekurangan juga pada tombol navigasi yang menunjukan menu utama pada web ini. Tombol utama tidak diberikan perubahan ketika mouse berada di atasnya. Hal ini dapat mempersulit dalam memilih menu yang diinginkan.

2. Match between system and the real world

Lagi-lagi saya terjebak dengan desain antar muka pada web ini. Saya mengira tombol dengan icon bendera yang terletak di bagian kanan atas adalah tombol kontrol untuk mengubah bahasa inggris atau indonesia. Setelah saya pelajari ternyata tombol tersebut hanya digunakan untuk menentukan lokasi kita (nasional / internasional). zzzzz (-_-“)

menurut saya bahasa yang digunakan untuk menyampaikan informasi terlihat sedikit kaku dan tidak konsisten, seakan-akan bahasa yang digunakan hanya bertujuan untuk menjual produk saja tidak untuk melayani. Hal ini menimbulkan kesan yang kurang ramah terhadap user.

3. User control and freedom

Pada web ini telah diberikan kontrol untuk kembali ke keadaan sebelumnya. Tetapi sayangnya kontrol ini tidak diberikan di setiap kondisi. Salah satu contohnya saya temukan setelah saya menekan tombol “send to friend” pada detail produk.

4. Consistency and standards

Ada beberapa ketidakkonsistenan yang saya temukan pada website ini dan hal ini cukup mempersulit saya dalam menyelesaikan tugas. Tombol kontrol pemilihian regional (icon bendera di kanan atas) tidak diberikan disemua halaman. Kemudian bahasa yang digunakan pun sangat tidak konsisten. Di beberapa bagian menggunakan bahasa Inggris dan lainnya menggunakan bahasa Indonesia. hmmmm cukup labil juga ya web ini hehehe.

5. Error prevention

Untuk menguji berdasarkan prinsip ini, dapat dilihat pada bagian pendaftaran member baru. Ada beberapa pertanyaan yang harus diisi sebagai informasi umum mengenai user. Salah satunya user di haruskan mengisi kata sandi dengan karakter minimal 5 karakter. Kali ini saya sengaja melakukan kesalahan, yaitu mengisi kata sandi hanya 3 karakter. Hasilnya, sistem memberikan peringatan bahwa sandi yang saya masukan salah. Nice job dude 🙂

6. Recognition rather than recall

Informasi yang disajikan pada website ini sudah cukup baik. Sistem sudah memberikan informasi yang mengurangi beban user untuk mengingat. Hal tersebut terbukti ketika saya ingin meneruskan proses transaksi dan berada di tahap pemilihan metode pembayaran, sistem memberikan informasi berapa jumlah biaya transaksi yang harus saya tanggung.

7. Flexibility and efficiency of use

Menurut saya masih ada beberapa fitur yang kurang efisien dan belum mendukung untuk semua level user. Salah satunya yang telah saya bahas di awal, web ini tidak menyediakan fitur pencarian. Hal ini dapat memperlambat user dalam menyelesaikan tugasnya. Selain itu pada halaman detail produk terdapat navigasi yang kurang efisien. Ketika saya ingin melihat gambar dengan mengklik opsi gambar seperti ilustrasi di bawah ini.

Maka akan mucul gambar yang lebih besar seperti gambar di bawah ini

Kemudian jika ingin merubah gambar, saya harus mengklik terlebih dahulu baru dapat kembali memilih gambar lainnya. Cukup melelahkan jika saya ingin melihat semua gambar. Munngkin akan lebih baik jika diberikan tombol next dan back pada bagian gambar yang telah di perbesar.

8. Aesthetic and minimalist design

Semua informasi yang disajikan pada web ini sudah cukup relevan dengan tujuan awalnya, yaitu menjual produk. Informasi berupa teks dan gambar sudah saling mendukung, sehingga user tertarik untuk melakukan transaksi pada web ini.

9. Help users recognize, diagnose, and recover from errors

Seperti pada bagian 5 (error prevention) ketika user melakukan kesalah input/aksi, maka akan diberikan peringatan/konfirmasi mengenai kesalahan yang telah dibuat. Namun informasi tersebut masih kurang efisien, karena sistem memeriksa kesalahan pengisian secara berurutan dari atas ke bawah dan informasi kesalahnya hanya akan ditampilkan satu per satu.

10. Help and documentation

Sangat disayangkan pada web ini tidak ditemukan help documentation atau FAQ. Padahal fitur ini akan cukup membantu user jika menemukan kesulitan dalam menggunakan web ini. 😦

The Conclusion

Setelah melakukan evaluasi berdasarkan 10 usability heuristic, sekarang saatnya untuk meninjau apakah petersaysdenim.com sudah memenuhi 5 komponen kualitas dengan baik :

– Learnability
Pada dasarnya web ini menggunakan desain dan interaksi yang sudah umum digunakan di banyak e-commerce lainnya, sehingga setiap proses mudah untuk dipelajari bahkan oleh user baru sekalipun
– Efficiency
Secara umum fungsionalitas dari web ini sudah cukup efisien, walaupun ada beberapa bagian yang masih kurang efisien. Seperti tidak disediakannya fungsi pencarian. Hal ini cukup memperlambat user jika ingin langsung mencari informasi yang ia butuhkan dengan cepat.
– Memorability
User dapat dengan mudah mengenali kembali fitur/informasi yang diberikan pada web ini. Karena grouping informasi pada web ini sudah cukup baik, sehingga mudah untuk diingat.
– Errors
Sebenarya pada web ini tidak ditemukan eror kecuali jika user salah memberikan perintah atau inputan. Itupun sudah dapat di atasi dengan adanya pesan eror yang sesuai dengan kesalahan yang dilakukan. Tetapi ada kejanggalan jika mengunjungi halaman LINK. Ketika halaman ini di akses yang muncul di layer hanya tampilan polos berwarna putih. Entah halaman ini masih dalam pengembangan atau memang belum tersedia, ada baiknya jika memberikan informasi mengenai hal ini.
– Satisfaction
Overall dalam penggunaan web ini saya merasa masih kurang puas. Hal tersebut dikarenakan masih adanya ketersedian menu yang tidak konsisten di semua halaman. Bahasa yang digunakan juga masih inggris setengah matang alias campur aduk antara Inggris dan Indonesia. Penggunaan tombol/link masih sulit dibedakan antara teks biasa atau link/tombol.

Sekian review dari saya, saran dan kritik sangat saya terima untuk perbaikan saya di post berikutnya 🙂

Bilingual Flash Application

well ini kali ini saya akan membuat tutorial untuk membuat fitur 2 bahasa dalam company profile berbasis flash. Tutorial ini saya buat berdasarkan pengalaman saya, jadi kalau ada kekurangan mohon dikoreksi. Semoga bisa bermanfaat,,let’s begin!!!!

Sebenarnya untuk membuat fitur 2 bahasa pada flash dapat menggunakan beberapa teknik, yaitu

• external database oriented
• keyframe oriented

Teknik external database oriented merupakan teknik pembuatan 2 bahasa dengan memanfaatkan file external sebagai library bahasa yang akan digunakan.Dalam implementasinya teknik ini akan mempercepat pengerjaan kita, karena kita hanya perlu membuat satu file library untuk satu bahasa yang nantinya dapat digunakan di bagian manapun pada company profile. Sedangkan keyframe oriented adalah teknik dimana libary bahasa akan diletakan di keyframe yang berbeda. Teknik keyframe oriented memang bisa digunakan, tetapi dalam implementasinya memerlukan pekerjaan yang lebih banyak. Ko bisa?ya karena kita harus membuat 2 konten yang berbeda untuk satu halaman. Sehingga teknik external database oriented lebih efisien dibanding teknik keyframe oriented. Oleh karena itu kali ini saya akan membahasa pembuatan fitur 2 bahasa menggunakan teknik database oriented. Berikut ini adalah tahapannya

1. Persiapan Database

Hal pertama yang harus dilakukan adalah membuat library bahasa. Ada beberapa jenis file yang dapat kita manfaatkan sebagai library, yaitu file text, xml, mysql. Kali ini saya akan menggunakan file xml sebagai library. Berikut ini contoh struktur file xml yang akan digunakan.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<content>

 <contentPath MENU="Home">
    ini merupakan isi dari node contentPath untuk menu home
 </contentPath>

 <contentPath MENU="Profile">
    ini merupakan isi dari node contentPath untuk menu profile
 </contentPath>

...

</content>

Ini merupakan struktur yang standar, anda bisa mengembangkannya jika perlu. <content></content> merupakan node root yang akan menjadi bagian utama dari library. <contentPath MENU=””></contentPath> merupakan node yang akan di akses untuk menampilkan konten dari setiap menu. Sekarang buatlah 2 buah file xml dengan struktur seperti di atas. Pada bagian isi dari node contentPath di file pertama di isi dengan konten dalam bahasa indonesia dan save dengan nama ina.xml. Kemudian untuk file kedua di isi dengan konten dalam bahasa inggris dan save dengan nama eng.xml. Contoh :

file ina.xml :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<content>
 <contentPath MENU="Home">
    Selamat datang di Profil Perusahan Kami. Semua informasi dapat anda
    dapatkan dengan menjelajahi aplikasi ini. Terima Kasih
 </contentPath>
 <contentPath MENU="Profile">
    Perusahaan Kami Bergerak di bidang desain grafis dan sudah berdiri
    dari tahun 2005. Kami akan memberikan solusi yang terbaik untuk
    masalah desain anda. Karena Kami adalah rekan bisnis Anda
 </contentPath>
</content>

file eng.xml :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<content>
 <contentPath MENU="Home">
    Welcome to Our Company Profile. All information can be found
    by exploring this application. Thank You
 </contentPath>
 <contentPath MENU="Profile">
    Our Company Specialized in graphic design and has stood
    from 2005. We will provide the best solutions for your
    design problems. Because we are your business partner
 </contentPath>
</content>

Kemudian simpan kedua file tersebut di folder yang sama pada file swf yang akan di buat.

2. Pemanggilan xml menggunakan ActionScript 2.0

Tahap selanjutnya adalah memanggil file xml tersebut ke dalam file swf dengan menggunakan AS 2.0. Pada tutorial ini saya menggunakan macromedia flash profesional 8. Pertama buatlah new flash document. Kemudian tambahkan 1 layer baru. Beri nama Action pada layer atas dan Object pada layer bawah.

Kemudian buatlah 2 buah dynamic text pada layer object frame 1. Text pertama digunakan untuk menampung judul menu dan text kedua digunakan untuk menampung konten dari menu tersebut.

 

object

Berikan instance name = homeTitle_txt untuk text pertama, lalu instance name = homeContent_txt untuk text kedua. Khusus untuk text kedua ubah menjadi multiline dan berikan nilai line spacing = -3 pada format option ( ). Anda dapat mengatur line spacing sesuai dengan ukuran font yang anda gunakan.Lalu buat keyframe baru pada layer object, untuk menu profile buat 2 buah dynamic text lagi dan letakan pada layer object frame 2. Berikan pengaturan yang sama, hanya saja ganti instance name home dengan profile.

jika sudah masukan action script di bawah ini pada frame 1 di layer action

xmlData = new XML(); // membuat objek xml dengan nama xmlData
xmlData.ignoreWhite = true; // menghiraukan spasi
xmlData.onLoad = function(success){ // pada saat xml di load
if(success){ // jika berhasil

// memanggil atribut MENU dengan nilai home
homeTitle_txt.text = xmlData.childNodes[0].childNodes[0].attributes.MENU;

// memanggil isi pada node dengan atribut MENU = Home
home_txt.text = xmlData.childNodes[0].childNodes[0].childNodes[0].nodeValue;

// memanggil atribut MENU dengan nilai profile
profileTitle_txt.text = xmlData.childNodes[0].childNodes[1].attributes.MENU;

// memanggil isi pada node dengan atribut MENU = Profile
profile_txt.text = xmlData.childNodes[0].childNodes[1].childNodes[0].nodeValue;

} else { // jika tidak
// do nothing
}
}
onLoad = function() // pada saat aplikasi pertama diload
{
_root.bahasa = “indonesia”; // variable yg menampung bahasa
onEnterFrame = function() // ketika frame aktif
{
if(_root.bahasa == “indonesia”) // jika bahasa = indonesia
{
lang = “ina.xml”;
}
else
{
lang = “english.xml”;
}
xmlData.load(lang); // load xml tergantung bahasa yg diinginkan
}
}

Pengaksesan suatu node pada xml sama halnya dengan pengaksesan node pada tree. Tetapi pada xml pengaksesan slalu dimulai melalui root node baru berlanjut ke node yang berada di level bawahnya. Format pengaksesan pada xml adalah nama_object_xml.node Untuk lebih jelasnya perhatikan ilustrasi berikut ini :

 

xml tree

Jika kita ingin mengakses node 2 maka pengaksesan dilakukan dengan xmlData.childNodes[0].childNodes[0]. Setelah itu barulah kita bisa mengakses attribut atau nilai node yang ada pada node tersebut.

3. Kontrol

Berikutnya adalah membuat tombol untuk berindah dari menu home ke menu profile. Buatlah layer baru di antara kedua layer yang ada dan beri nama control. Lalu mudah saja buat dua buah tombol yang dapat melakukan link ke menu masing-masing dan letakan di layer control. Berikut ini contoh tombol yang saya buat

 

tombol menu

Berikan action berikut pada button home

on(release) // ketika tombol di klik
{
gotoAndStop(1); // pergi ke frame 1 dan berhenti disini
}

Berikan action berikut pada button profile

on(release) // ketika tombol di klik
{
gotoAndStop(2); // pergi ke frame 2 dan berhenti disini
}

Langkah terakhir yang harus dilakukan adalah membuat tombol yang mengkontrol perubahan bahasa. Kemudian buat 2 buah button dan letakan pada layer control. Button pertama digunakan untuk merubah konten ke dalam bahasa Indonesia sedangkan button kedua sebaliknya.

Toggle Button

Selanjutnya berikan action berikut pada button indonesia

on(release) // ketika tombol di klik
{
_root.bahasa = “indonesia”;  // nilai variable bahasa yang ada di root akan menjadi indonesia
}

dan berikian action berikut pada button English

on(release) // ketika tombol di klik
{
_root.bahasa = “english”;  // nilai variable bahasa yang ada di root akan menjadi english
}

Cara kerja tombol tersebut adalah merubah nilai variable bahasa yang ada pada root dengan nilai sesuai dengan bahasa yang diinginkan. Karena pada action yang ada di layer action terdapat perintah jika variable _root.bahasa = indonesia maka file xml yang akan dipanggil adalah ina.xml yang berarti bahasa akan berubah ke bahasa Indonesia.

Jika anda sudah menyelesaikan tahap ini maka fitur 2 bahasa sudah dapat anda gunakan. Selamat mencoba 🙂

Jika anda ingin melihat contoh yang sudah di buat silakan download disini

E-commerce dan Tipe Penggunanya

Demi kelangsungan hidup saya di kampus, kali ini saya akan membahas mengenai interaksi antara manusia dan komputer pada suatu e-commerce berdasarkan tipe penggunanya. Menurut Chak (2002) pada bukunya yang berjudul “Submit Now: Designing Persuasive Websites”, tipe pengguna pada suatu e-commerce dikelompokan menjadi 4, yaitu Browser, Evaluator, Transactor, Customer. Untuk lebih jelasnya mari kita evaluasi istanabayi.com berdasarkan tipe penggunanya.

1. Browser

Browser merupakan tipe user yang baru pertama kali mengunjungi suatu website, sehingga belum memiliki pengetahuan apapun mengenai website yang dia kunjungi, here’s come the newbie^^. Oleh karena itu user tipe ini memerlukan banyak petunjuk yang jelas agar bisa lebih tertarik untuk menjelajahi website yang ia kunjungi. Browser dapat diibaratkan sebagai seseorang yang sedang berjalan-jalan di pasar dan masuk ke sebuah toko hanya untuk melihat-lihat saja. Berdasarkan hal tersebut saya akan menempatkan diri saya sebagai Browser pada istanabayi.com, mari kita lihat tampilan awal dari istanabayi.com di bawah ini.

home screen istana bayi

Sebagai seorang Browser, awalnya saya mengalami cukup kesulitan untuk memulai surfing di website ini. Mengapa demikian? karena saya tidak menemukan menu utama atau link yang cukup jelas untuk menuntun saya menjelajahi fasilitas yang ada pada website ini. Ternyata setelah saya melakukan scroll ke bawah, barulah ada petunjuk dan informasi lebih mengenai website ini. Hal ini harus diperhatikan, karena tidak semua user akan melakukan scroll. Terutama bagi para Browser yang hanya datang untuk sekedar melihat-lihat sekilas saja. Oleh karena itu peletakan informasi dan fasilitas yang penting harus berada pada area ketika user pertama kali masuk ke website.

Selain itu kunci utama untuk dapat menarik para Browser adalah eye-catching dan ease access, itu berarti kita harus memberikan presentasi yang menarik dan mudah dimengerti oleh user hanya dengan melihatnya saja. Pada istanabayi.com saya masih menemukan kekurangan berdasarkan hal berdasarkan 2 hal tersebut, yaitu pada bagian tulisan login dan promo. Untuk dapat login/register ke website ini saya harus membaca terlebih dahulu tulisan sambutan yang ada,,zzzzzz -_-. Itu merupakan hal yang jarang dilakukan oleh para Browser, karena mereka cenderung melihat sekilas saja. Pengaksesan login/register akan jauh lebih mudah jika dikelompokan seperti ilustrasi pada gambar di bawah ini.

Selain itu pada bagian promo saya juga mengalami kebingungan ketika melihat bagian tersebut. Hal tersebut dikarenakan pengelompokan yang kurang tepat. Awalnya saya mengira bahwa tulisan promo dengan warna background kuning tersebut tidak memiliki kaitan dengan gambar di bawahnya. Berhubung saya belum punya bayi jadi saya tidak tahu apa itu stroller???. Ternyata setelah saya cari apa itu stroller pada web ini yang muncul adalah gambar-gambar seperti yang berada di bawah tulisan promo tersebut (-_-“). Sayangnya tidak semua Browser akan melakukan pencarian lebih mendalam seperti yang saya lakukan. Masalah ini  akan teratasi jika pengelompokan antara gambar dan teks dilakukan dengan benar, seperti gambar di bawah ini.

promo

Jika semua kebutuhan para Browser telah dipenuhi maka, mereka akan berlanjut ke tahap yang lebih tinggi yaitu tipe user evaluator.

2. Evaluator

Evaluator adalah tipe user yang sudah memiliki informasi dasar mengenai suatu website dan ingin melihat lebih detail. User dengan tipe ini akan rela meluangkan waktunya untuk mencari informasi sebanyak-banyaknya dari suatu website yang dapat dijadikan sebagai pertimbangan dalam melakukan transaksi. Oleh karena itu poin penting yang harus diperhatikan untuk dapat memenuhi kebutuhan para evaluator adalah informasi yang selengkap-lengkapnya dan informasi yang mudah dimengerti.

Baiklah sekarang saatnya saya berubah menjadi seorang evaluator yang sedang mencari informasi di  istanabayi.com. Tujuan utama dari seorang evaluator adalah mencari informasi, nah salah satu hal termudah yang pertama dilakukan untuk mencari adalah???ya tepat sekali menggunakan fasilitas pencarian. mmmmm tapi dimana ya menu pencariannya?? Ternyata menu pencarian berada di bagian bawah.

Menurut saya peletakan menu pencarian tersebut tidak biasa seperti pada umumnya yang berada di bagian header dari website. Itu berarti untuk melakukan pencarian saja saya harus melakukan 1 tambahan pekerjaan, yaitu scroll. Hal yang sederhana tapi cukup menghambat bukan?. Tetapi untuk penataan pada bagian menu pencarian ini sudah cukup baik, disitu juga terdapat menu “Advanced Search” yang memungkinkan user mencari barang dengan kriteria tertentu.

Setelah menu pencarian ditemukan, sekarang saatnya mencari. Sebagai contoh kasus pertama saya akan mencari potty dan mengetikannya pada bagian pencarian untuk melakukan pencarian standar.lets search!!!!. Tak lama kemudian munculah hasil pencarian potty sebagai berikut :

hasil pencarian

Pembuatan antar muka untuk pencarian sudah cukup baik dan mudah dimengerti. Pada bagian ini saya dapat langsung melihat gambar, nama, dan harga dari jenis produk yang saya cari, bahkan saya bisa langsung membeli jika ingin. Pengaksesan untuk melihat produk lebih detil pun sudah di berikan dengan cukup mudah, yaitu dengan mengklik nama atau gambar produk. Tetapi ada sedikit kekurangan pada antar muka ini, yaitu judul pencarian yang telah saya ketikan di awal. Hal ini memaksa user untuk mengingat apa yang telah dia cari dan akan cukup menyulitkan bagi para user yang malas mengingat.

Judul Pencarian

Selain itu pada awalnya saya tidak mengetahui kalau ternyata hasil pencarian tersebut dapat saya sortir berdasarkan nama atau harga produk. Beruntunglah saya yang secara tidak sengaja meng-hover cursor ke judul kolom nama produk. Pada saat itu barulah muncul tooltips untuk melakukan sortir. Tools tip hanya akan muncul jika cursor tepat berada di atas judul kolom. Mungkin fasilitas ini akan lebih mudah dimengerti jika diberikan icon seperti di bawah ini :

icon

Langkah seorang evaluator tidak hanya berhenti disini sekarang saatnya saya melihat lebih detil mengenai produk yang saya cari. Sebagai contoh saya akan melihat informasi detil mengenai produk bernama “Fisher Price Royal Stepstool Potty”. Kemudian akan muncul antarmuka di bawah ini.

Detail Produk

Pada bagian ini informasi sudah dikemas dengan cukup baik, pengelompokan informasinya pun sudah baik. Tetapi jika membaca semua informasi yang ada pada bagian ini akan terasa janggal, karena penyampain informasi menggunakan 2 bahasa yang di campur aduk,,mungkin yang dikenal dengan inggris setengah matang,, 😀 . Hal tersebut menyebabkan ketidakkonsistenan dalam penyampain informasi. Jadi ada baiknya diberikan fasilitas bilingual yang dapat merubah bahasa sesuai dengan kebutuhan user.

Perlu diingat bahwa kebutuhan dari seorang evaluator adalah informasi yang digunakan untuk memutuskan, jadi akan jauh lebih baik terdapat suggested produk yang merupakan kumpulan produk-produk yang berkaitan dengan produk pilihan user di awal. Sayangnya fasilitas ini tidak ditemukan di semua informasi detail dari sebuah produk. Contohnya pada produk yang saya pilih tadi, tetapi ketika saya lihat detail produk yang lain ada fasilitas suggested produknya.

 

Detail Produk lainnya

Selain itu pengemasan informasinya pun tidak konsisten, kadang ada produk yang lengkap informasinya kadang ada produk yang sama sekali tidak memiliki informasi detail,,(-_-“). Ini menimbulkan sedikit kekecawaan bagi saya sebagai seorang evaluator. Untuk lebih mempermudah tugas seorang evaluator dapat juga diberikan fasilitas untuk membandingkan produk-produk yang ada pada istanabayi.com, dimana pada fasilitas ini akan diberikan informasi detail dari beberapa produk secara bersamaan beserta pilihan mana produk yang lebih baik dari segi harga maupun kualitas.

Sebagai contoh kasus lainnya saya akan melakukan pencarian menggunakan fasilitas “Advanced Search” yang ada di istanabayi.com, berikut ini tampilan antarmukanya

 

advanced search

Pertama melihat tampilan ini saya sudah merasa tidak nyaman dengan peletakan tombol cari yang ada di tengah-tengah. Akan jauh lebih baik jika tombol tersebut diletakan di bawah, setelah user selesai mengisi semua baris yang ada. Selain itu input text box yang digunakan untuk memasukan tanggal juga sedikit merepotkan. User harus mengingat format tanggal yang benar jika ingin melakukan input data. Masalah ini dapat di atasi dengan menggunakan date picker sebagi control tool box atau memberikan contoh penulisan format yang benar di samping textbox tersebut.

Apabila informasi yang diterima sudah cukup, maka saatnya berlanjut ke tahap berikutnya yaitu transactor untuk melakukan transaksi.

3. Transactor

Transactor adalah tipe user yang memang sudah siap untuk melakukan transaksi, atau dengan kata lain sudah siap untuk membeli produk yang ditawarkan di suatu website. Ia ingin transaksinya berjalan dengan mudah, cepat, dan aman. User tipe ini tentu saja sudah melakukan browsing dan evaluasi terhadap produk-produk yang ditawarkan. Mungkin saja ia memang berniat membeli dari awal, atau hendak melanjutkan transaksi yang sempat tertunda sebelumnya, so let’s shopping \(^o^)/..

Pada istanabayi.com user diperbolehkan melakukan pencarian produk yang mereka inginkan tanpa harus mendaftar di awal. Teknik ini cukup baik, karena jika user sudah menemukan produk yang disukai, maka ia akan dengan senang hati mendaftar sebagai member di website anda. Apalagi jika diberikan promosi dan keuntungan lainnya jika menjadi seorang member. Sebagai contoh kasus yang menggambarkan seorang transactor, saya akan melakukan pembelian produk yang informasinya telah saya dapatkan dari hasil pencarian pada bagian evaluator di atas. Setelah saya tekan tombol beli maka secara otomatis produk yang saya pilih akan masuk ke kerangjang belanja saya.

Shopping Cart

Pada bagian ini terdapat informasi mengenai apa saja produk yang telah saya beli, berapa jumlahnya, dan sub-totalnya. Pada bagian ini juga diberikan tombol update yang dapat digunakan untuk memperbaharui jumlah dan total harga yang saya beli. Menurut saya informasi ini sudah cukup jelas. Kemudian saya ingin tetap melanjutkan belanja, maka saya menekan tombol “lanjutkan belanja”. Kemudian saya akan di antar ke halaman pencarian sebelumnya. Lalu saya beli produk laiinya, dan isi keranjang belanja saya akan menjadi seperti ini.

 

Shopping Cart 2

Yup sejauh ini tidak ada masalah dalam proses transaksi. Setelah puas memilih produk saya menekan tombol belanja yang ada di bagian kanan bawah. Lalu oppss!! saya harus melakukan login/pendaftaran untuk dapat menyelesaikan belanja saya disini.

 

Pendaftaran

Baiklah karena saya sudah mendapatkan produk yang saya inginkan, maka saya pun melakukan pendaftaran. Setelah akun saya selesai dibuat, maka saya harus melewati beberapa langkah lagi untuk dapat mempercepat proses transaksi saya berikutnya.Pertama saya akan ditanya mengenai email dan no hp yang saat ini sering saya gunakan serta alamat pengiriman

 

tahap 1

Kemudian berlanjut ke metode pembayaran apa yang akan saya gunakan, pada bagian ini juga akan ditanyakan alamat tagihan untuk transasksi yang telah dibuat.

Tahap 2 : Metode Pembayaran

Setelah selesai memilih metode pembayaran, maka pada tahap selanjutnya akan diberikan konfirmasi transaksi yang telah dilakukan.

Tahap 3 : Konfirmasi Transaksi

Hingga pada tahap ini menurut saya semua informasi telah di presentasikan dengan cukup baik. Jika semua pemesanan sudah benar maka saya menekan tombol confirm order dan akan muncul tampilan sebagai berikut

Tahap 4 : Selesai

Dengan munculnya tahap ini, itu berarti proses transaksi telah selesai dengan baik. Begitu pula dengan tugas seorang transactor. Secara keseleruhan mengenai tahapan pemesanan ini menurut saya sudah cukup untuk membantu saya sebagai seorang transactor. Prosesnya mudah diikuti dan informasi yang diberikan pun sudah cukup jelas. Tetapi mungkin akan lebih baik jika ada tombol batal yang berfungsi untuk membatalkan proses transaksi, bagi saya itu akan membantu menenangkan, karena sekarang yang menjadi masalah adalah bagaimana jika barang yang saya pesan benar-benar masuk ke tagihan rekening saya T.T ( Help me Sir !! ).

Jika kita telah menjadi transactor, maka pada kunjungan berikutnya kita akan menjadi seorang customer

4. Customer

Customer adalah user yang sudah pernah bertransaksi atau sudah beberapa kali melakukan transaksi. Ia juga merupakan member yang memiliki hak akses tertentu atas website, oleh karena itu seorang customer harus diberikan fasilitas untuk bisa mengetahui status dari pesanan yang sudah pernah dipesannya. User tipe ini juga termasuk Transactor, namun sudah memiliki pengalaman yang cukup untuk melakukan transasksi berikutnya.

Dengan memperhatikan ketentuan tersebut, kebutuhan seorang customer pada istanabayi.com sudah cukup terpenuhi. Ketika seorang member ingin melanjutkan transaksinya yang tertunda, ia hanya perlu melakukan proses login. Dengan begitu akan muncul semua informasi mengenai dirinya dan transaksi yang telah ia selesaikan maupun yang belum. Seperti tertera pada tampilan di bawah ini.

Informasi Member

Menu yang tersedia sudah cukup representatif dan mudah dimengerti. Dengan adanya informasi mengenai alamat member, maka seorang customer tidak perlu mengisi alamat pengiriman/tagihan jika alamatnya sama dengan alamat member. Hal ini sangat membantu dan mempercepat dalam melakukan transaksi. Poin plus untuk istanabayi.com (nice work dude!!).

Kesimpulan

1. Untuk dapat membantu dan mempermudah user dalam melakukan tugasnya perlu diperhatikan peletakan informasi penting, ease of access, dan petunjuk yang jelas.

2. Pada istanabayi.com perlu banyak hal yang diperhatikan untuk dapat menarik para Browser.

3. Masih ada beberapa pengelompokan informasi yang membingungkan pada istanabayi.com

4. Ada beberapa ketidakkonsistenan dalan penyampain informasi

5. Alur penuntun bagi para transactor sudah cukup baik

6. Fasilitas yang diberikan bagi para customer sudah cuk baik.

SEARCH ENGINE OPTIMAZATION

I. APA ITU SEO?

SEO singkatan dari Search Engine Optimazion (Optimasi Mesin Pencari) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas kualitas kunjungan  melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Secara umum proses yang dapat dilakukan pada SEO dikategorikan menjadi dua, yaitu on-site dan off-site.

A. Optimasi On-Page

On-page SEO lebih mengarah kepada optimasi sisi desain]n maupun konten website. Dengan kata lain On-page SEO adala upaya agar website kita tampil optimal. Sama sekali tidak ada campur tangan pihak luar. Pada proses ini dilakukan tindakan spesifik pada website anda untuk meningkatkan peringkatnya di mesin pencari, seperti memilih kata-kata yang tepat untuk link navigasi, metatags, dan isi dari website. Dengan melakukan hal tersebut, akan mempermudah mesin pencari dalam menentukan tema dari website tersebut. Sehingga mesin pencari akan menampilkan dokumen yang relevan ketika menerima keywords dari user.

B. Optimasi Off-Page

Optimasi ini dilakukan untuk mendongkrak popularitas dan PageRank blog anda atau juga mempertahankan PR yang telah didapat oleh blog anda. Optimasi off-page SEO meliputi jumlah backlink, backlink yang berkualitas dan backlink natural yaitu yang berasal dari search engine melalui keyword yang anda bidik.

II. SEJARAH

Menurut Danny Sullivan (pendiri situs web Search Engine Watch), istilah search engine optimization pertama kali digunakan pada 26 Juli tahun 1997 oleh sebuah pesan spam yang diposting di Usenet. Pada masa itu algoritma mesin pencari belum terlalu kompleks sehingga mudah dimanipulasi.

Versi awal al goritma pencarian didasarkan sepenuhnya pada informasi yang disediakan oleh webmaster melalui meta tag pada kode html situs web mereka. Meta tag menyediakan informasi tentang konten yang terkandung pada su atu halaman web dengan serangkaian katakunci (keyword). Sebagian webmaster melakukan manipulasi dengan cara menuliskan katakunci yang tidak sesuai dengan konten situs yang sesungguhnya, sehingga mesin pencari salah menempatkan dan memeringkat situs tersebut. Hal ini menyebabkan hasil pencarian menjadi tidak akurat dan menimbulkan kerugian baik bagi mesin pencari maupun bagi pengguna internet yang mengharapkan informasi yang relevan dan berkualitas.

Larry Page dan S ergey Brin, dua mahasiswa doktoral ilmu komputer Universitas Stanford, berusaha mengatasi permasalahan tersebut dengan membangun Backrub, sebuah mesin pencari sederhana yang mengandalkan perhitungan matematika untuk memeringkat halaman web. Algoritma tersebut, yang dinamakan PageRank, merupakan fungsi matematika yang kompleks berupa kombinasi antara perhitungan jumlah link yang mengarah pada suatu halaman web dengan analisis atas kualitas masing-masing link tersebut.

Berdasarkan prinsip kerja PageRank, secara umum bisa dikatakan bahwa halaman web yang memperoleh peringkat tinggi adalah halaman web yang banyak di-link oleh halaman web lain. Nilai PageRank juga akan semakin tinggi apabila halaman web yang mengarah kepadanya juga memiliki kualitas yang tinggi. Nilai sebuah link dari situs berkualitas tinggi seperti Yahoo! atau DMOZ dapat bernilai lebih tinggi daripada kombinasi nilai link dari seratus situs web berkualitas rendah.

Backrub hanyalah sebuah permulaan. Pada tahun 1998 Page dan Brin mendirikan Google yang merupakan versi tingkat lanjut dari Backrub. Dalam waktu singkat Google memperoleh reputasi dan kepercayaan dari publik pengguna internet karena berhasil menyajikan hasil pencarian yan

g berkualitas (tidak dimanipulasi), cepat, dan relevan. PageRank lantas menjadi standar baik bagi mesin pencari lain maupun bagi webmaster yang berusaha agar situs webnya memperoleh nilai PageRank setinggi mungkin sehingga menempati posisi tertinggi pada hasil pencarian.

III. WHITE HAT VS BLACK HAT

Teknik SEO dapat dikategorikan menjadi 2, yaitu

A. White hat

White Hat merupakan optimasi suatu keyword sesuai yang dianjurkan pada TOS (Terms Of Service) mesin pencari, yaitu menerapkan cara-cara natural dengan proses offpage dan onpage optimization natural menggunakanproses backlinking standar, normal, dan tanpa rekayasa. Berikut ini adalah beberapa contoh yang dapat dilakukan untuk mengimplementasikan white hat SEO :

• Internal Linking
  Internal lingking adalah upaya untuk mengaitkan satu halaman/posting ke halaman/posting yang lainnya. Satu konten halaman posting biasanya pasti berhubungan dengan posting halaman lain. Contoh mudah Internal Linkin g adalah bila sesekali membuka satu halaman web dengan judul tertentu, Anda akan disuguhi pula dengan halaman atau posting lain yang berkaitan dengan halaman yang sedang Anda baca.

• Reciprocal Linking
  Bertukar link dengan webmaster lain adalah cara yang baik (bukan yang terbaik, tapi baik) dalam upaya untuk mendapatkan tambahan link masuk ke situs Anda. Sebenarnya dalam teknik bertukar link ini ada satu hal yang perlu diperhatikan, yaitu tentang relevansi. Apa maksudnya? Relevansi adalah hal dimana link yang masuk dan juga link keluar relevan dengan tema utama. Sebagai contoh, link pada situs tertentu yang bertema bisnis akan lebih baik bila dapat melakukan link ke situs lain yang juga bertema sama. Meskipun demikian bukan berarti link dari situs tertentu yang tidak berhubungan sama sekali tidak bermanfaat. Ini akan bermanfaat pada penciptaan traffic meskipun tidak begitu signifikan, kemudian dari traffic ada harapan bahwa beberapa pengunjung yang datang adalah target.

• Content Creation
  Isi content sebuah web merupakan inti. Jika konten yang terdapat di dalamnya benar benar sesuai yang dicari pengunjung, maka prospek semakin bagus. membuat konten yang menarik dan bagus mungkin, informatif, mudah dimengerti dan difahami, termasuk di dalamnya menggunakan huruf yang mudah dibaca dan lain sebagainya merupakan hal yang tepat dalam mengoptimasi website anda pada mesin pencari.

B. Black Hat

Black Hat Optimasi suatu keyword menggunakan cara-cara atau teknik yang tidak sesuai dengan TOS mesin pencari, biasanya menggunakan bantuan software-software tertentu dan script-script yang dirancang khusus untuk black hat. Jika mesin pencari menemukan situs terlibat yang dalam black hat SEO ini akan menghapus situs dari Index.

Black hat SEO melibatkan beberapa metode, seperti mengulangi ungkapan-ungkapan yang tidak terkait, untuk memanipulasi relevansi atau keunggulan sumber daya diindeks oleh mesin pencari, dengan cara yang tidak konsisten dengan tujuan dari sistem pengindeksan. Beberapa orang menganggap itu menjadi bagian dari optimasi mesin pencari, meskipun ada banyak metode optimasi mesin pencari yang dapat meningkatkan kualitas dan tampilan isi situs web dan konten melayani berguna untuk banyak pengguna. Mesin pencari menggunakan berbagai algoritma untuk menentukan peringkat relevansi. Beberapa di antaranya adalah menentukan apakah istilah pencarian muncul dalam kata kunci META tag, yang lain apakah istilah pencarian muncul dalam tubuh teks atau URL dari suatu halaman web. Banyak mesin pencari memeriksa contoh spamdexing tersangka dan akan menghapus halaman dari indeks mereka. Juga, orang yang bekerja untuk sebuah organisasi mesin pencari dapat dengan cepat memblokir hasil-listing dari seluruh situs web yang menggunakan spamdexing, mungkin diperingatkan oleh keluhan pengguna pertandingan palsu. Bangkitnya spamdexing pada pertengahan 1990-an membuat mesin pencari terkemuka sepanjang waktu kurang berguna.

IV. Tips SEO

Ada banyak teknik SEO yang dapat dilakukan untuk mengoptimasi  blog ato website anda agar SEO friendly. Salah satu teknik paling tua tetapi masih juga efektif adalah dengan melakukan optimasi pada html meta tags, baik meta title tag, meta keyword tag maupun meta description tag. Umumnya mesin crawler search engine semisal google akan terlebih dahulu mengunjungi bagian ini dibanding dengan bagian-bagian yang lain. Jadi bisa dikatakan, HTML Meta Tag ini merupakan penuntun untuk crawler ketika mereka mengakses dan kemudian mengindeks website atau blog di mesin pencari. Berikut ini adalah tips untuk melakukan SEO pada blog berplatform blogspot.

• Meta Title Tag
  1. Login ke account blogger anda,
  2. Pada dashboard, pilih edit layout–> edit HTML
  3. Cari kode title tag bawaan blogspot seperti dibawah ini, lebih mudah bila anda menggunakan ctrl+F 

  <title><data:blog.pageTitle/></title>

  4. Setelah kode tag tadi ketemu, highlight (blok) lalu ganti dengan kode dibawah ini:

  <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

  5. Klik Save Template untuk menyimpan perubahan.
  

• Meta Description Tag
  Meta Description Tag ini berfungsi memberi tahu  crawler mesin pencari tentang garis besar dari keseluruhan isi web atau blog kita.  Deskripsi yang baik adalah yang singkat, padat dan jelas, sebisa mungkin kata kunci utama diletakkan ada awal kalimat deskripsi ini. Selain itu, hindari pengulangan keyword yg berlebihan, sebaiknya deskripsi ini tidak lebih dari 160 karakter. cara memasang Meta Description Tag sebagai berikut :1. Login ke account blogger anda,
  2. Pada dashboard, pilih edit layout–> edit HTML
  3. Cari kode <head>, lalu masukkan kode berikut ini dibawahnya, sebelum kode </head>, lebih mudah bila anda menggunakan ctrl+F<meta content='disini tempat anda menuliskan deskripsi blog anda secara singkat dan jelas' name='description'/> 

  ganti tulisan berwarna merah diatas dengan deskripsi blog anda, lalu klik save template untuk menyimpan perubahan

• Meta Keyword Tag
  Meta Keyword Tag ini adalah tempat anda menaruh daftar keyword atau kata kunci yang anda tuju pada web atau blog anda, dengan tujuan agar crawler search engine menaruh perhatian lebih pada kata kunci atau keyword2 tersebut. Keyword sebaiknya terdiri dari dua kata atau lebih (keyphrase), karena orang mengetikkan kata kunci pada kotak pencarian di mesin pencari umumnya lebih dari satu kata, misal kata kunci “belajar ngeblog” atau “tutorial blogspot“. cara memasang meta keyword tag ini adalah sebagai berikut.1. Login ke account blogger anda,
  2. Pada dashboard, pilih edit layout–> edit HTML
  3. Cari kode <head>, lalu masukkan kode berikut ini dibawahnya, sebelum kode </head>, lebih mudah bila anda menggunakan ctrl+F<meta content='keyword1, keyword2, keyword3, keyphrase1, keyphrase2, keyphrase3' name='keywords'/> 

  ganti tulisan berwarna merah diatas dengan keyword atao keyphrase yang anda bidik pada blog anda, lalu klik save template untuk menyimpan perubahan

V. 7 HAL PENTING DALAM SEO

Ada 7 hal penting yang perlu diperhatikan dalam SEO agar website anda dapat berada pada posisi teratas di mesin pencari seperti Google, Yahoo!, Bing dan lainya.

1. Konten dan Struktur Website

Saat website Anda memiki konten yang terbanyak di internet, maka website Anda, jika Website Anda tidak tersruktur dengan baik maka saat Informasi dicari diwebsite Anda, Pengunjung akan meninggalkan Anda. Jadi buat terstruktur website Anda. Pasang Sitemap yang mempermudah pengunjung untuk memperoleh informasi dengan cepat

2. Teknis Pengembangan Website.

Hal ini yang mengetahuinya adalah Programmer Website Anda, sehingga hal-hal seperti lokasi penempatan hosting yang terbaik untuk target market Anda, redirect pages, error pages, penggunaan javascript dan hal-hal teknis lainnya sebaiknya diperhatikan. Sehingga saat seseorang tidak memperoleh informasi dari halaman Anda yang Error, dia dapat dialihkan kebagian lain yang dapat memberikan dia Informasi lainnya yang tentunya Informatif bagi pengunjung Anda. Gunakan juga Webmaster Tools untuk mengembangkan Optimasi terhadap Website Anda.

3. Pengembangan Content

Lagi-lagi masalah isi … content Anda harus informatif, benar, aktual, berguna bagi pengunjung Anda yang mencari informasi. Jadi perhatikan benar-benar pengembangan Contentnya. Content Anda juga sebaiknya selalu uptodate alias tidak ketinggalan jaman. Pastikan website Anda selalu di Update, karena Search Engine sangat menyukai hal ini, sesuatu yang selalu up to date.

4. Promo/Iklan

Promosikan Website Anda di Direktori-Direktori Website di Internet, Juga Submit Website Anda ke Search Engine, promosikan secara Online maupun Offline (stiker, spanduk, dan lain sebagainya) karena ini akan meningkatkan traffic ke website Anda. Bila perlu pasang iklan berbayar di Internet (seperti google adwords dll).

5. Riset Keyword

Riset Keyword sangat menentukan posisi Anda di Mesin Pencari. Tentukan Keyword-keyword yang berhubungan dengan website Anda atau informasi yang akan Anda berikan kepada pengunjung Anda. Gunakan Tools-Tools pencari keyword dan juga Search Engine Keyword Tools untuk optimasi keyword atau kata kunci yang biasa digunakan pengunjung untuk mencari informasi yang mereka perlukan.

6. Training SEO

Ini juga diperlukan agar Anda selalu update terhadap informasi terbaru dari orang-orang yang mungkin lebih dahulu tahu tentang Optimasi Mesin Pencari. Banyak Training SEO bahkan kontes SEO yang diadakan yang bisa membantu Anda untuk berimprovisasi secara teknik-teknik Optimasi Mesin Pencari.

7. Target Market yang Spesifik

Ini penting, karena saat Anda menentukan Target Anda dengan tepat, lokasi geografis pengunjung Anda, dan target-target bisnis Anda maka ini akan menentukan Profit yang bisa Anda dapatkan.

Sumber :

http://en.wikipedia.org/wiki/Search_engine_optimization

http://id.wikipedia.org/wiki/SEO

http://siswoutomo.wordpress.com/2010/07/11/blogging-tips-seo-bisnis-online-pengertian-seo-white-hat-black-hat/

http://id.shvoong.com/internet-and-technologies/business-economy/2090412-white-hat-seo/

http://www.linkexchangesystem.net/selected_news_52_id

http://www.belajarngeblog.com/tips-seo-optimasi-mesin-pencari-dengan-html-meta-tag

http://www.ilpeng.com/2010/01/rahasia-seo-2010-cara-terbaik-optimasi.html

http://inilahkita.com/files/2009/09/7-POIN-PENTING-OPTIMASI-SEARCH-ENGINE.pdf

 

imisasi mesin pencari (bahasa Inggris: Search Engine Optimization, biasa disingkat SEO) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Computer Graphics – Clipping Algorithm

Teknik Clipping

Oleh

Aditya Riansyah Lesmana

G64096002

I. Definisi Clipping

Dalam kehidupan sehari-hari saat kita ingin menggambar sesuatu pada sebuah bidang, tentunya kita tidak akan bisa menggambar melebihi bidang tersebut. Dengan kata lain suatu bidang gambar pasti memiliki batas wilayah maksisum. Seperti halnya komputer, untuk melakukan proses penggambaran suatu objek di monitor, komputer tidak akan bisa menampilkan gambar melebihi batas maksisum yang telah ditentukan. Untuk dapat melakukan hal tersebut, maka digunakanlah proses clipping.

Clipping berasal dari kata clip, yang secara umum memiliki arti memotong. Dalam ilmu grafika komputer, clipping merupakan proses pemotongan objek sehingga hanya bagian objek yang berada di dalam area tampil(viewport) yang dapat dilihat oleh user, sedangkan bagian objek yang berada di luar area tampil akan disembunyikan. Hal tersebut dilakukan agar proses perhitungan koordinat pixel pada layar tidak terlalu rumit. Tetapi sebelum melakukan proses clipping terlebih dahulu harus ditentukan bentuk dan ukuran clipping window, yaitu area dimana suatu objek dapat diproses dan ditampilkan. Clipping window dapat berupa segi empat, segi tiga, lingkaran, elips, poligon, dan lain-lain.

Proses clipping dapat digunakan untuk membuat aplikasi-aplikasi sebagai berikut :

1. Identifikasi permukaan yang dapat dilihat dalam pandangan 3 Dimensi.
2. Antialiasing segmen garis atau bagian suatu objek,
3. Membuat objek dengan prosedur solid modelling.
4. Menampilkan beberapa window.
5. Membuat gambar dengan kemampuan memindahkan dan menghapus sebagian

Ada beberapa teknik yang dapat digunakan untuk melakukan proses clipping, diantaranya adalah sebagai berikut :

1. Vertex Clipping
2. Line Clipping
3. Polygon Clipping

II. Vertex Clipping (Clipping Titik)

Teknik yang digunakan untuk mengimplementasikan Vertex Clipping cukup sederhana yaitu dengan menggunakan rumus umum sebagai berikut :

X_min ≤ x ≤ X_max

Y_min ≤ y ≤ Y_max

X_min, X_max, Y_min, dan Y_max merupakan batas maksimum untuk clipping window yang berbentuk persegi empat dengan posisi standar. Agar teknik ini dapat di jalankan, kedua kondisi di atas harus terpenuhi. Jika ada sebuah titik yang tidak memenuhi kedua kondisi tersebut, maka titik tersebut tidak akan muncul pada viewport.

Contoh kasus :

Terdapat 2 buah titik, yaitu P1(2,2) dan P2(3,6) dengan X_min = 1, X_max = 5, Y_min = 1, dan Y_max = 5.

contoh kasus 1 (vertex clipping)

Dari gambar di atas dapat dilihat bahwa titik P2 tidak memenuhi kedua kondisi umum dari vertex clipping berada sehingga titik P2 tidak akan di tampilkan.

Clipping titik dapat diaplikasikan pada scene yang menampilkan ledakan atau percikan air pada gelombang laut yang dibuat dengan mendistribusikan beberapa partikel.

III. Line Clipping (Clipping Garis)

Line clipping diproses dengan melakukan inside-outside test, yaitu memeriksa kedua titik ujung dari garis tersebut . Berdasarkan tes tersebut garis dapat dikategorikan menjadi 4 jenis, yaitu :

Jenis Line Clipping

1. Invisible       : Garis yang tidak terlihat sepenuhnya / berada di luar clipping window.

2. Half-partial    : Garis yang terpotong sebagian oleh clipping window.

3. Full-partial    : Garis yang terpotong penuh oleh clipping window dan melintasi clipping window.

4. Visible          : Garis yang terletak di dalam clipping window.

Proses clipping tidak berlaku pada garis dengan kondisi invisible dan visible, karena kedua kondisi tersebut tidak memotong clipping window.

Secara umum algoritma line clipping dapat digambarkan sebagai berikut :

Line Clipping Algorthm Flowcarth

Dalam melakukan teknik line clipping dapat menggunakan beberapa algoritma, seperti : Cohen-Sutherland, Liang-Barsky, Cyrus-Beck, dan Nicholl-Lee-Nicholl. Algoritma yang paling terkenal adalah algoritma Cohen-Sutherland. Pada algoritma ini setiap titik ujung (endpoint) dari garis direpresentasikan ke dalam 4 digit angka biner yang disebuy region code. Masing-masing digit tersebut akan menentukan posisi titik relatif terhadap batas clipping yang berbentuk segiempat. Untuk lebih jelas dapat dilihat pada bagan dan tabel di bawah ini.

Region Code

Bit ke-1 : Region Kiri (L)

Bit ke-2 : Region Kanan (R)

Bit ke-3 : Region Bawah (B)

Bit ke-4 : Region Atas (T)

Bit dengan nilai 1 menandakan bahwa titik berada pada region yang bersangkutan. Jika tidak maka akan diset dengan nilai 0.

Region Table

Contoh Kasus :

Diketahui dua buah garis yaitu garis AB dengan titik A(2,2) dan titik B(3,5). Kemudian garis CD dengan titik C(2,7) dan titik D(5,7). Lalu titik E(0,-1) dan titik F(7,7). Clipping window dengan X_min = 1, X_max = 6, Y_min = 1, dan Y_max = 6.

Langkah penyelesaian :

Lakukan pengecekan pada setiap titik terhadap window

a. Garis AB

Titik A(2,2)

Region	Kondisi
L = 0	X > Xmin ; 2 > 1
R = 0	X < Xmax ; 2 < 6
B = 0	Y > Ymin ; 2 > 1
T = 0	Y < Ymax ; 2 < 6

Titik B(3,5)

Region	Kondisi
L = 0	X > Xmin ; 3 > 1
R = 0	X < Xmax ; 3 < 6
B = 0	Y > Ymin ; 5 > 1
T = 0	Y < Ymax ; 5 < 6

Dari kedua tabel di atas terlihat bahwa garis AB berada pada region 0000, yaitu terletak di dalam clipping window dan bersifat visible. Oleh karena itu garis AB dapat dilihat sepenuhnya tanpa melalui proses clipping. Hal tersebut dapat dibuktikan dengan menggunakan operator logika AND terhadap kedua titik yang menyusun garis AB, yaitu 0000 AND 0000 = 0000.

b. Garis CD

Titik C(2,7)

Region	Kondisi
L = 0	X > Xmin ; 2 > 1
R = 0	X < Xmax ; 2 < 6
B = 0	Y > Ymin ; 7 > 1
T = 1	Y > Ymax ; 7 < 6

Titik D(5,7)

Region	Kondisi
L = 0	X > Xmin ; 5 > 1
R = 0	X < Xmax ; 5 < 6
B = 0	Y > Ymin ; 7 > 1
T = 1	Y < Ymax ; 7 > 6

Dari kedua tabel di atas terlihat bahwa garis CD berada pada region 1000, yaitu terletak di sebelah atas clipping window dan bersifat invisible. Oleh karena itu garis CD tidak dapat dilihat sepenuhnya dan tidak melalui proses clipping. Hal tersebut dapat dibuktikan dengan menggunakan operator logika AND terhadap kedua titik yang menyusun garis CD, yaitu 1000 AND 1000 = 1000.

b. Garis EF

Titik E(2,-1)

Region	Kondisi
L = 0	X > Xmin ; 2 > 1
R = 0	X < Xmax ; 2 < 6
B = 1	Y < Ymin ; -1 < 1
T = 0	Y < Ymax ; -1 < 6

Titik F(3,7)

Region	Kondisi
L = 0	X > Xmin ; 3 > 1
R = 0	X < Xmax ; 3 < 6
B = 0	Y > Ymin ; 7 > 1
T = 1	Y > Ymax ; 7 > 6

Dari kedua tabel di atas terlihat bahwa garis EF memiliki titik yang berada di luar clipping window, namun kedua titik tersebut dihubungkan dengan sebuah garis yang melalui clipping window, sehingga garis EF bersifat Full-partial dan harus melalui proses clipping. Hal tersebut dapat dibuktikan dengan menggunakan operator logika AND terhadap kedua titik yang menyusun garis EF, yaitu 0100 AND 1000 = 0000. Untuk melakukan proses clipping dapat mengikuti langkah-langkah berikut ini :

1. Menentukan titik potong yang dihitung berdasarkan bit yang bernilai 1 dari region code dengan menggunakan panduan tabel berikut ini :

Region Bit	Berpotongan dengan	Dicari	Titik Potong
L = 1	Xmin	yp1	( Xmin , yp1 )
R = 1	Xmax	Yp2	( Xmin , yp2 )
B = 1	Ymin	xp1	( yp1 , Ymin )
T = 1	Ymax	Xp2	( yp2 , Ymax )

Dengan nilai xp₁ , xp₂ , yp_{1 ,} yp₂ yang dapat dihitung dengan menggunakan persamaan :

xp₁ = x₁ + ( Y_min – y₁ ) / m

xp₂ = x₁ + ( Y_max – y₁ ) / m

yp₁ = y₁ + m * ( X_min – x₁ )

yp₂ = y₁ + m * ( X_max – x₁ )

dimana nilai m adalah sebagai berikut :

m = ( y₂ – y₁ ) / ( x₂ – x₁ )

Sehingga untuk garis EF (2,-1) dan (3, 7) dapat dilakukan perhitungan :

m = 7 – (-1) / 3 – 2 = 8/1 = 8

Region code untuk titik E(2,-1) adalah 0100, maka R = 1. Pada titik ini akan dicari xp_1.

xp₁ = x₁ + ( Y_min – y₁ ) / m

= 2 + (1 – (-1)) / 8 = 2,25

Maka titik potongnya adalah (2,25 ; 1)

Region code untuk titik F(3, 7) adalah 1000, maka T = 1. Pada titik ini akan dicari xp_1.

Xp₂ = x₁ + ( Y_max – y₁ ) / m

= 3 + (6 – 7) / 8 = 2,875

Maka titik potongnya adalah (2,875 ; 6)

Dari perhitungan di atas dapat disimpulkan bahwa garis EF akan di representasikan melalui titik E(2,25 ; 1) dan titik F(2, 875 ; 6)

Hasil Clipping

III. Polygon Clipping

Polygon merupakan bidang yang tersusun dari verteks (titik sudut) dan edge (garis penghubung setiap verteks). Untuk dapat melakukan proses clipping pada polygon diperlukan algoritma yang lebih kompleks dari kedua teknik clipping yang telah di bahas sebelumnya. Salah satunya adalah algortima Sutherland-Hodgman .Ide dasarnya adalah memperhatikan edge pada setiap arah pandang, lalu clipping polygon dengan persamaan edge, kemudian lakukan clipping tersebut       pada semua edge hingga polygon terpotong sepenuhnya. Berikut ini ketentuan dari algoritma Sutherland-Hodgman :

1. Polygon dapat dipotong dengan setiap edge dari window sekali pada satu waktu.
   1. Vertex yang telah terpotong akan disimpan untuk kemudian digunakan untuk memotong edge yang masih ada.
   2. Perhatikan bahwa jumlah vertex biasanya berubah-ubah dan sering bertambah.

Pada saat mengimplementasikan algoritma akan dilakukan tahap interseksi pada setiap sisi window, yaitu sebagai berikut :

1. Asumsikan bahwa kita akan memotong edge pada titik(x_1, y₁) dan (x_2, y₂) dengan clipping window pada titik (x_min, y_min) dan (x_max, y_max).
2. Tentukan nilai slope = (y₂ – y₁) / (x₂ – x₁) pada setiap interseksi
3. Lokasi (IX,IY) dari interseksi edge dengan sisi kiri window adalah

IX = x_min

IY = slope * (x_{min –} x₁) + y₁

1. Lokasi (IX,IY) dari interseksi edge dengan sisi kanan window adalah :

IX = x_max

IY = slope * (x_{max –} x₁) + y₁

1. Lokasi (IX,IY) dari interseksi edge dengan sisi atas window adalah :

IX = x₁ + (y_max – y₁) / slope

IY = y_max

1. Lokasi (IX,IY) dari interseksi edge dengan sisi bawah window adalah :

IX = x₁ + (y_min – y₁) / slope

IY = y_min

Contoh Kasus :

Diketahui sebuah polygon ABC dengan titik A(4,7), B(10,4), dan C(2,0). Clipping window memiliki nilai X_min = 1, X_max = 8, Y_min = 1, dan Y_max = 6.

Contoh Kasus Polygon Clipping

Dari gambar di atas dapat dilihat bahwa terdapat 6 buah titik potong yang akan dicari. Pada bagian atas clipping window terdapat 2 buah titik potong, yaitu perpotongan garis AC dengan Y_max dan garis AB dengan Y_max. Lalu pada bagian kanan clipping window terdapat 2 buah titik potong, yaitu perpotongan garis BA dengan X_max dan garis BC dengan X_max. Kemudian pada bagian bawah window clipping juga terdapat 2 buah titik potong, yaitu perpotongan garis CA dengan Y_min dan garis CB dengan Y_min. Oleh karena itu akan dilakukan 3 kali interseksi.

1. Interseksi bagian atas

• Mencari titik potong antara garis AC [(4,7) ; (2,0)] dan Y_max .

slope = (y₂ – y₁) / (x₂ – x₁).

= (0 – 7) / (2 – 4) = -7 / -2 = 3,5

IX = x₁ + (y_max – y₁) / slope

= 4 + (6 – 7) / 3,5 = 3,714

IY = y_max = 6

Maka titik potongnya adalah (IX, IY) = (3,714 ; 6)

• Mencari titik potong antara garis AB [(4,7) ; (10,4)] dan Y_max .

slope = (y₂ – y₁) / (x₂ – x₁).

= (4 – 7) / (10 – 4) = -3 / 6 = -0,5

IX = x₁ + (y_max – y₁) / slope

= 4 + (6 – 7) / -0,5 = 6

IY = y_max = 6

Maka titik potongnya adalah (IX, IY) = (6, 6)

1. Interseksi bagian kanan

• Mencari titik potong antara garis BA [(10,4) ; (4,7)] dan X_max .

slope = (y₂ – y₁) / (x₂ – x₁).

= (7 – 4) / (4 – 10) = 3 / -6 = -0,5

IX = x_max = 8

IY = slope * (x_{max –} x₁) + y₁

= -0,5 * (8 – 10) + 4 = 5

Maka titik potongnya adalah (IX, IY) = (8, 5)

• Mencari titik potong antara garis BC [(10,4) ; (2,0)] dan X_max .

slope = (y₂ – y₁) / (x₂ – x₁).

= (0 – 4) / (2 – 10) = -4 / -8 = 0,5

IX = x_max = 8

IY = slope * (x_{max –} x₁) + y₁

= 0,5 * (8 – 10) + 4 = 3

Maka titik potongnya adalah (IX, IY) = (8, 3)

1. Interseksi bagian bawah

• Mencari titik potong antara garis CA [(2,0) ; (4,7)] dan Y_min.

slope = (y₂ – y₁) / (x₂ – x₁).

= (7 – 0) / (4 – 2) = 7 / 2 = 3,5

IX = x₁ + (y_min – y₁) / slope

= 2 + (1 – 0) / 3,5 = 2,286

IY = y_min = 1

Maka titik potongnya adalah (IX, IY) = (2,286 ; 1)

• Mencari titik potong antara garis CB [(2,0) ; (10,4)] dan Y_min.

slope = (y₂ – y₁) / (x₂ – x₁).

= (4 – 0) / (10 – 2) = 4 / 8 = 0,5

IX = x₁ + (y_min – y₁) / slope

= 2 + (1 – 0) / 0,5 = 4

IY = y_min = 1

Maka titik potongnya adalah (IX, IY) = (4, 1)

Dari perhitungan yang telah dilakukan di atas, maka akan dibuat polygon baru dengan titik A(3,714 ; 6), B(6, 6), C(8, 5), D(8, 3), E(2,286 ; 1), dan F(4, 1).

Hasil Polygon Clipping

IV Kesimpulan

Dari semua algoritma yang telah dibahas di atas, dapat disimpulkan bahwa ide dasar dalam proses clipping adalah dengan menyembunyikan sementara bagian dari objek yang berada di luar viewport. Hal tersebut bermanfaat untuk mengurangi kerja CPU dalam melakukan komputasi gambar, sehingga CPU akan berkerja dengan lebih efisien. Saat ini penelitian mengenai algoritma clipping masih terus dikembangkan untuk mencari cara yang paling efisien dalam melakukan proses tersebut. Setelah membaca artikel ini, saya sangat berharap anda dapat mencari dan mengembangkan algoritma clipping terbaik dari yang pernah ada sebeumnya.