Pendahuluan Analisis Web mobilbabe  

Posted by Boan Tua Pasaribu

1.Pendahuluan

1.1 Web Usability

Web usability adalah Efektivitas dari proses transfer informasi via Internet. Lebih detail lagi tentang interaksi antara pengguna dengan software online dan offline yang merupakan salah satu faktor penting dalam mengembangkan sebuah web. Pengembang harus memahami prinsip-prinsip usability sebelum mengimplemen-tasikannya pada sebuah web.

Mengapa Usability Penting? :

· Persaingan di era digital semakin berat

· Pengunjung semakin sedikit memiliki waktu

· Pengunjung semakin malas untuk berpikir

– jika ada situs lain yang lebih mudah, kenapa harus bertahan pada satu situs yang lebih rumit?

· Sedikit kesalahan bisa menyebabkan kehilangan yang besar

· Situs yang tidak menarik akan ditinggalkan

· Usability meningkatkan nilai tambah situs

· Menentukan hidup mati sebuah bisnis

– Pada Ecommerce, jika pengguna tidak bias menemukan produk, maka tidak terjadi transaksi

– Jika situs bertahan dengan iklan, maka tanpa pengunjung, iklan tidak akan dilihat dan diklik

– Pengguna yang tersesat akan menghabiskan resource dan meningkatkan biaya operasional

Faktor Usability :

· Ease of learning – Seberapa cepat pengguna menyelesaikan tugas dasar

· Efficiency of use – Setelah terbiasa, seberapa cepat dia menyelesaikan tugas?

· Memorability – Seberapa efektif pengguna menggunakan aplikasi di lain waktu?

· Error frequency and severity – Seberapa sering kesalahan terjadi dan seberapa fatal?

· Subjective satisfaction – Apakah pengguna suka menggunakan sistem?

Usability Misconceptions :

· Usability mahal

– Riset memang mahal, tetapi untuk proyek harian, usability sangatlah murah dan fleksibel

– Alokasikan 10% dana desain untuk usabilitas Usability engineering akan delay jadwal rilis

– Cukup fokus pada fitur yang dibutuhkan

– Mendapatkan konsensus dari developer lebih cepat

– Usability testing tidak akan memakan waktu lebih lama dari 1 minggu

· Usability membunuh kreativitas

– Anggapan: Usability menambah satu constraint: sistem harus mudah digunakan oleh pengguna.

· Fakta: baik dilakukan usability atau tidak, constraint tetap ada

– Jangan biarkan pengguna terlalu banyak berpikir

– Memahami fakta justru meningkatkan kreativitas untuk proses peningkatan

· Kita tidak perlu usability, cukup dari feedback

· Seringkali pengguna menggunakan metode yang salah untuk mengumpulkan data

Web Usability mempunyai tujuan agar:

  1. Web menjadi lebih efektif dan efisien digunakan.
  2. Web juga aman.
  3. Mempunyai utility yang baik.
  4. Pengguna tidak perlu mempelajari web terlebih dahulu.
  5. Dan pengguna dapat mudah mengingat.

Sebuah web dengan usability yang buruk akan ditinggalkan oleh penggunanya. Berikut ini adalah beberapa kondisi yang akan membuat pengguna meninggalkan sebuah web :

  1. Web sulit digunakan.
  2. Homepage tidak menjelaskan tentang apa yang ditawarkan oleh perusahaan dan apa saja yang dapat dilakukan oleh pengguna pada web tersebut.
  3. Pengguna mendapatkan adanya kesalahan pada web.
  4. Informasi web sulit dibaca dan tidak mampu menjawab pertanyaan-pertanyaan pengguna.

1.2 Web www.mobilbabe.com

Mobilbabe.com adalah media otomotif online 24 jam dengan menggunakan sarana internet (Web/Portal) yang menyajikan segala hal berkaitan dengan dunia otomotif. Berdiri sejak Maret 2000, mobilbabe.com telah menjadi portal otomotif terbesar dan terpercaya di Indonesia, dan terus berkembang hingga ke seluruh dunia. Mobilbabe.com adalah “One Stop Automotive Information Media”, dengan hanya berkunjung ke Mobilbabe.com, dapatkan informasi selengkapnya mengenai otomotif. Tempat terjadinya interaksi langsung antara penjual mobil/motor dengan pembeli, dimana penjual akan melakukan pemasangan mobil/motor yang akan dijual secara detil lengkap dengan photo, Halaman khusus untuk showroom mobil atau motor di seluruh Indonesia, lengkap dengan photo-photo mobil atau motor yang dijual dan selalu up-date, katalog-katalog mobil baru dan lokasi showroom. Sebagai media online 24 jam, banyak mata akan melihat mobil yang sedang dicari oleh peminat. Sebagai media informasi otomotif terlengkap, informasi iklan jasa dan produk otomotif adalah keharusan.. Pada Web ini memiliki Web Layout yang kurang baik. Seharusnya Web Layout adalah sebagai berikut.

Web Layout

· Layout yang baik bisa membantu pengguna

– Konsisten (template)

– Pembagian kategori yang jelas

· Sediakan navigasi yang jelas dan konsisten

– Hindari navigasi yang terlalu atraktif

– Vertical dropdown menu : short is sweet

– Multilevel menu : less is more

Analisis Web mobilbabe.com  

Posted by Boan Tua Pasaribu

Analisis terhadap web www.mobilbabe.com dilakukan dengan menganalisis penerapan kaidah web Bloopers berlandaskan pada buku Jeff Johnson - Web Bloopers—60 Common Web Design Mistakes and How to Avoid Them.. Di dalam buku ini, ada delapan poin penting yang harus dicermati dalam mendesain dan membangun sebuah website, yaitu :

1 Content Bloopers

2 Task Support Bloopers

3 Navigation Bloopers

4 Form Bloopers

5 Search Bloopers

6 Text and Writing Bloopers

7 Link Appearance Bloopers

8 Graphic and Layout Bloopers

Pembahasan pada makalah ini tidak dikelompokkan berdasarkan delapan poin di atas dan akan ditambahkan sesuai kebutuhan . Pembahasan akan dikelompokkan berdasarkan sub-poin dari tiap-tiap poin sesuai dengan kondisi yang ditemukan pada web mobilbabe.

Content Bloopers  

Posted by Boan Tua Pasaribu

1.Content Bloopers

  • Home Page Identity Crisis

Home Page harus membuat pengunjung dapat mengerti dengan cepat tujuan dari site tersebut dengan penelusuran yang cepat. Orang ingin dengan cepat mencari sesuatu yang apakah ada sesuatu yang menarik di site tersebut .Website harus dapat menjelaskan identitas dan tujuannya dengan baik.sekarang kita lihat pada home page mobilbabe.com berdasarkan identitas dan tujuannya apakah tersampaikan dengan baik atau tidak?.

Seharusnya pada Home page adalah :

Nama Web ditempatkan secara mencolok.

Nama Web dapat diberikan suatu penjelasan

Tujuan Web dituliskan.

Gambar yang mengilustrasikan pelayanan yang ditawarkan web tersebut

Label dari links ke halaman lain tersedia dengan overview yang baik dari isi site tersebut

Pada mobilbabe nama Web kurang ditempatkan secara mencolok, tak ada penjelasan mengenai arti dari mobilbabe, Logo dari web mobilbabe tak menggambarkan bahwa itu adalah Logo dari site tersebut melainkan mirip seperti iklan yang terlalu banyak pada site tersebut. Lalu label dari link ke halaman lain sangat buruk karena tak konsistennya penandaan suatu link.

  • Confusing Classification

Salah satu hal penting dari web content adalah bagamaina pengorganisasiannya. Skema yang digunakan untuk menggolongkan dan mengklasifikasikan produk, jasa, informasi pada suatu website dapat berhasil atau merusak sekali dalam site tersebut. Karena hal tersebut mempengaruhi pengunjung untuk menemukan apa yang mereka sedang cari. Seharusnya content kategori adalah : Terstruktur secara hirarki, Independen, mendalam(lengkap), tak sewenang-wenang atau berubah-ubah

Pada mobilbabe sangat tak terstruktur ada pada bagian home iklan dibawah logo lalu dibawah ada link iklan jasa atau iklan produk, lalu peletakan iklan yang sewenang-wenang.(arbitary).

  • Unhelpfull description

uraian dan nama item mestinya tidak terdiri dari dalam pemasaran kata-kata, seperti baru, lebih besar, hebat, dan secara penuh berfungsi! Mereka perlu terdiri dari uraian jujur dari apa yang item bisa lakukan dan tidak lakukan. uraian item tidak bisa masing-masing ditulis secara terpencil,. Kamu tidak bisa mendaftar 10 produk semua yang mengakui " Segalanya yang kamu perlukan!" .item Uraian harus tertulis bersama-sama, dengan pertimbangan untuk bagaimana mereka akan ditafsirkan dalam konteks dan bagaimana mereka membandingkan satu sama lain.

  • Conflicting Content

Terlihat pada banner tertulis bahwa mobilbabe.com adalah cara cepat jual dan beli mobil, tapi terlihat juga jual dan beli motor walaupun tertulis adalah iklan motor tapi cara penyajiannya sama seperti iklan mobil. Lalu dikarenakan tak ada gambar asli kendaraan maka dipakai logo mobilbabe berupa mobil padahal yang dijual adalah motor.

Task-Support Bloopers  

Posted by Boan Tua Pasaribu

2.Task-Support Bloopers

  • Requiring unneeded data

Dari gambar diatas pada saat Pasang iklan mobil membutuhkan pernyataan pelanggan baru atau tidak, sebenarnya ini adalah hal kurang dibutuhkan oleh repuirement pasang iklan mobil.

  • Pointless Choice

Pada Gambar disamping adalah pada saat requirement pasang iklan mobil dimana kita harus mengisi label model dan Tipe dimana option yang diberikan tidak terlalu berbeda untuk membuat perbedaan(No significant difference).

Navigation Bloopers  

Posted by Boan Tua Pasaribu

3.Navigation Bloopers

  • Site Reflects Organizational Chart

Apakah masih berada di Website yang sama?, halaman ini keluar sewaktu ingin membuka tips N trik, seharusnya tetap ada tanda dimana kita berada apakah masih ada di mobilbabe atau tidak. Tapi disana hanya informasi dan terlihat kata TOYOTA i-Unit Konsep dan tidak ada penanda kita berada di mobilbabe. Sehingga kita tahu kalau kita berada di perusahaan yang sama.

  • Numerous Navigation Schemes

Terlihat pada gambar home page di atas bahwa navigasi yang terlalu banyak yang berulang-ulang, sehingga membuat home page menjadi rusak. Seharusnya cukup dengan menaruh primary navigasi pada tempat yang mudah ditemukan atau dilihat(noticeable),lalu kelompokan item di area navigasi sehingga item yang sama tidak ditemukan pada lokasi yang sama pada navigasi yang berbeda, jangan menyediakan multiple navigasi untuk link yang sama.

  • Deceptive Duplicate Links

pada gambar disamping untuk link mobil dicari

memiliki link yang sama dengan pasang(warna merah) sedangkan mobil dicari yang berwarna hitam bukanlah sebuah link lalu dicari Suxuki Baleno………….adalah link yang sama dengan yang diatas. Seharusnya pada home page menggunakan true duplicate saja, dan harus menghindari duplikasi pada navigasi bars yang berbeda.

  • Lost in Space: Current Page Not Indicated

Kita tidak tahu sedang berada di halaman mana, soalnya tidak memiliki page title, lalu jika kita dekatkan cursor dengan navigasi maka navigation marked berwarna putih sehingga

sukar terlihat. Jadi seharusnya navigation bar nya harus sama namanya dengan page title yang ada sehingga kita tahu berada pada halaman tertentu. Sama pula jika kita megklik text chat J diatas kiri maka kita mengira berada di home page padahal kita sudah berda di halaman chat tetapi tidak langsung terlihat(unnoticeable).

  • The Circle Game: Active Link to Here

Seperti gambar yang ada di home page dengan navigasi yang banyak diatas, pada link mobil dicari pada navigsi paling bawah di home page sama dengan navigasi ditengah mobil dicari Suzuki baleno, maka akan meng-link pada halaman yang sama. Seharusnya jangan memasukan link active pada mobil dicari di home page dengan adanya link active juga di home page yang mengarah ke halaman yang sama.

Form Bloopers  

Posted by Boan Tua Pasaribu

4.Form Bloopers

  • Intolerant data field

Pada contoh tertulis 7.1 juta padahal dibelakang textfield tertulis Juta, lalu jika kita tuliskan 7.1 ju maka tak ada ruang lagi untuk meneruskan tulisan tersebut karena maks 6 spasi. Seharusnya help user enter data tanpa membuatnya bingung karena adanya kesalahan coding,membuat input field kurang.cocokan field length to data, menyediakan pattern dengan contoh yang salah.field ini ada pada form pasang iklan mobil.


  • No Defaults

Pada saat kita ingin membeli mobil tidak menggunakan default ,hal ini boleh saja jika web designers mengikuti guide line berikut :1.jika menu tersebut tidak terlalu membutuhkan default,2.jelas dengan apa yang akan dipilih. Kan tidak mungkin langsung tampil di daftar paling atas kota jayapura karena terlalu jauh unuk dijadikan pasaran. Sehingga sebaiknya menyediaan default value jika memungkinkan,buat user yang berkunjung ke website anda dapat langsung dengan cepat mendapatkan goalnya.


  • Compulsory Clicking: No Default Text Input Focus

Tanpa Set text input focus pada username,ketika ada form pada webpage yang membutuhkan tipe data seharusnya text input focusnya langsung ada pada text field yang pertama.

Hal ini membuat user langsung memulai menulis secara langsung.

  • Lame Label Placement

penjajaran vertical yang tidak rapi, hal yang paling sering untuk form label akan misplaced dari textfieldnya, untuk menghindari hal itu maka, label harus dekat dengan text field dan control, meluruskan garis dasar label dengan garis dasar dari textfield.

  • Looks Editable but Isn't

Terlihat bisa diedit soalnya drop down menu ternyata pas kita klik dropdown menu maka akan tetap pilih model atau pilih tipe, seperti setting default.Seharusnya menu yang harusnya tak bisa diedit tidak boleh ada di homepage.

  • Mysterious Control

Pada Textfield pertama dia langsung meng-load atau melakukan progress padahal kita belum melakukan searching model , tahun , dan harga.

Search Bloopers  

Posted by Boan Tua Pasaribu

5.Search Bloopers

  • Baffling search control

Pada Searching diatas Terlihat sangat aneh dmana pertama letaknya yang biasa search ada diatas kanan, kalau di mobilbabe letaknya tak mudah disadari(unnoticeable). Pada Textfield pertama dia langsung meng-load atau melakukan progress padahal kita belum melakukan searching model , tahun , dan harga. Seharusnya kita membuat 3 batas

Yang pertama label dengan text field hanya untuk kategori mobil saja, dan dua dibawahnya untuk pengklasifikasian lagi untuk merk, tahun, dan harga, kita tak membutuhkan spesifikasi model pada search jarena tak terlalu dibutuhkan.dan terakhir akan lebih baik dengan tombol GO saja tak perlu attribute lainnya

  • Hits Look Alike

Pada home page dan chat page bukanlah suatu halaman yang berbeda secara signifikan dikarenka pada halaman chat hanya merubah bagian tengah yang berisi iklan menjadi tempat chating,permasalahannya pas kita meng-klik Chat maka akan ada scrolling dan kita masih ada di scroll atas maka kita tak akan melihat perbedaan antara home page denga halaman chat.

  • Number of Hits Not Revealed

Dari hasil pencarian pada search tidak memberikan informasi mengenai berapa total hasil pencarian yang ditemukan dengan keyword tertentu,misalkan pencarian pada mobilbabe untuk BMW maka akan tampak pada hasil pencarian hanya item saja tanpa sorting.

Text & Writing Bloopers  

Posted by Boan Tua Pasaribu

6.Text & Writing Bloopers

  • Too Much Text

Pada gambar disamping(pasang iklan mobil) terlihat bahwa terlalu banyak kata yang memungkinan visitor sulit untuk scanning untuk dapat mencari goal mereka secepat mungkin . usahakan buat label link pendek, maksimal 3 kata.buat yang saling berkaitan contoh pembayaran dalam segala cara, dibuat dengan subheading sehingga visitor dalam scaning dapat dengan cepat, jika berhubungan dengan pembayaran cukup dengan mengklik konfirmasi pembayaran lalu keluar subheading mengenai cara2 pembayaran.lalu jika hal tersebut ingin menjadi link

  • Variable Vocabulary: Different Words for the Same Thing

2 tombol berbeda yang memiliki fungsi yang sama, 2 tombol sama dengan kata yang berbeda dengan fungsi yang sama, seharusnya jangan menggunakan Tombol yang berbeda untuk hal yang sama.

  • Inconsistent Style

Hal yang pertama adalah kapitalisasi yang tak konsisten, lalu untuk satu fungsi yang sama-sama drop down menu memiliki ukuran yang berbeda-beda

  • Typos and Grammos: Sloppy Writing

Sama seperti gambar pada bab text and writing bloopers diatas Terlihat penulisan yang tidak rapi dan adanya penulisan kata yang kurang tepat atau ada yang lebih baik tapi tidak digunakan contoh merek akan lebi baik jika menggunakan bahasa inggris merk, Karena dari awal sudah ada penggabungan dengan bahasa inggris seperti kata account, atau banner dan kita juga bisa ganti kata setoran dengan kata pembayaran.

Link Appearance Bloopers  

Posted by Boan Tua Pasaribu

7.Link Appearance Bloopers

  • Non-Links Look Like Links

Terlihat kata CHATJ tersebut hanyalah text biasa dan ternyata text itu adalah link menuju chat pada mobilbabe. Dan juga yang dikotakan merah berupa kata adalah link, seharusnya jika itu link warna berubah jika disentuhkan cusor atau ada garis link dibawah kata tesebut.lalu kebanyakan dari kata-kata yang panjang di website ini bisa menjadi link, lalu banyak pula warna-warna yang cerah bisa menjadi link dan ternyata bukan,lalu ada juga tanda Go! Dibawah ini jika didekatkan cursor tidak berubah .

  • Wrapped Links: How Many?

Terlihat pada gambar disamping adalah link semua meskipun ada mobil yang tak memiliki database(0) akan lebih baik jika link tersebut di jadikan drop down menu dengan mobil tersusun secara alphabet,sehingga home page menjadi tak perlu discrolling terlalu panjang bahkan tanpa scroll akan lebi baik.begitu juga pada iklan utama akan lebi baik tampilan hanya 5 mobil saja lalu ada link yang bisa membrowse semua mobil sehingga pada home page tak perlu scrolling sepanjang yang ada sekarang ini.

  • "Click Here": Burying Links in Text

Ini adalah sebuah Link dengan isi syarat dan ketentuan iklan kategori C, lalu untuk kembali ke home kita harus mengklik ikon rumah atau tulisan home di pojok kiri atas pada halaman anda saat itu.

  • Been There, Done That? Can't Tell

Pada saat kita telah masuk link yang berkotak merah lalu kita kembali ke home maka link berupa paragraph itu tak berupa warna , maka kita tidak akan tahu apa kita pernah berkunjung ke link tersebut atau tidak?

Graphical and Layout Bloopers  

Posted by Boan Tua Pasaribu

8.Graphical and Layout Bloopers

  • Centering Everything

Babechat ada pada tengah halaman padahal chat berada pada navigasi utama, sehingga jika kita klik chat maka kita akan mengira tetap berda di home page karena chat ada di tengah-tengah tapi jika kita melakukan scrolling baru kita baru sadar kalau kita sudah berda di chat,begitu juga dengan iklan produk atau jasa seharusnya sudah cukup di navigasi bawah tetapi dikumpulkan lagi ditengah membuat home page begitu buruk

  • Pewarnaan Text

Pewarnaan text sangat penting dalam aplikasi web. Karena warna memiliki arti yang berbeda-beda. Seperti contoh, warna merah sering digunakan untuk memberikan text error suatu aplikasi. Jika pengembang salah memberi pewarnaan suatu text, pengguna aplikasi tersebut bisa saja salah mengartikan informasi yang diberikan.

Pada web mobilbabe ada beberapa kesalahan pewarnaan text atau pewarnaan yang tidak pada tempatnya, antara lain dapat dilihat dibawah ini.

dapat dilakukan pengembang untuk mengatasi permasalahan – permasalahan diatas antara lain:

Kita berada pada page pasang iklam mobil dimana semua warna vercampur disini diatas menggunakan warna merah untuk iklan tapi di bawah ada warna merah untuk warning , lalu warna biru yang digunakan sebagai link untuk iklan mobil lainnya digunakan iklanC padahal untuk link email juga menggunakan warna biru, dan penggunaan warna hijau dan merah yang membuat tampilan terlihat menggangu mata.

  • Scrolling

Pengguna web kebanyakan malas untuk melakukan scrolling dan kalaupun mereka melakukan scrolling, maka mereka hanya melakukannya sedikit saja (satu atau dua kali scrolling). Web ini kuran baik dalam penggunaan scrolling karena rata-rata membutuhkan scrolling yang cukup panjang untuk menampilkan semua informasi yang ada pada setiap halaman.kalau bisa diberikan drop down menu dengan mengurutkan monil secara alphabet , sehingga tidak perlu melakukan scrolling yang sangat panjang tersebut.

  • Screen resolution

Salah satu hal penting yang harus diperhatikan oleh pengembang web adalah mengenai lebar (width) halaman web. Statistik menunjukkan bahwa kebanyakan komputer pengguna saat ini memiliki resolusi 800 x 600 atau 1024 x 768 piksel. Jika lebar dari halaman web melebihi resolusi komputer pengguna, maka ketika pengguna mengakses halaman web, pengguna harus melakukan scrolling ke samping untuk melihat seluruh konten. Hal ini tentu saja kurang baik karena pengguna membutuhkan usaha yang lebih untuk mendapatkan informasi dari web. Hal terburuknya, bukannya tetap mencoba scrolling ke samping, tetapi pengguna malah memilih untuk meninggalkan web. Jika hal ini terjadi, perusahaan juga yang menanggung kerugiannya.

Jika dari sisi browser untuk Website mobibabe.com tidak mengalami perubahan,namun saya hanya mencoba dari segi browser untuk firefox dan juga internet explorer.karena jika Web tidak konsisten bentuknya untuk browser yang berbeda maka Perusaahan akan mengalami kerugian yang cukup besar karena browser di dunia ini cukup banyak.