LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP – 2007/2008
Kajian Situs http://www.pertamina.com
oleh: Annisa G64052239 (http://annworld.wordpress.com)
INSTITUT PERTANIAN BOGOR 2008
DAFTAR ISI BAB I PENDAHULUAN.................................................................................................................2 Tujuan .............................................................................................................................................2 Ruang lingkup.................................................................................................................................2 Manfaat ...........................................................................................................................................2 BAB II PEMBAHASAN ..................................................................................................................3 1. Usability........................................................................................................................................3 1.1 Learnability.............................................................................................................................3 1.2 Throughput .............................................................................................................................3 1.3 Flexibility................................................................................................................................3 1.4 Attitude ...................................................................................................................................4 2. User Experience..........................................................................................................................4 2.1 Computer Literacy ..................................................................................................................4 2.2 System Experience..................................................................................................................4 2.3 Web Page Considerations .......................................................................................................4 2.4 Application Experience...........................................................................................................4 2.5 Task Experience......................................................................................................................4 2.6 Other System Use ...................................................................................................................4 2.7 Education ................................................................................................................................5 2.8 Reading Level .........................................................................................................................5 2.9 Typing Skill ............................................................................................................................5 2.10.Native Language and Culture ...............................................................................................5 3. User Interface..............................................................................................................................5 3.1 Web User Interface Control ....................................................................................................5 3.1.1 Radio button.......................................................................................................................5 3.1.2 Bullet dan Penomoran........................................................................................................5 3.1.3 Form...................................................................................................................................6 3.2 Navigation...............................................................................................................................7 3.2.1 Menu ..................................................................................................................................7 3.2.2 Breadcrumbs ......................................................................................................................7 3.2.3 Link....................................................................................................................................7 3.2.4 Search ................................................................................................................................8 3.3 Textual ....................................................................................................................................8 3.3.1 Judul/Subjudul ...................................................................................................................8 3.3.2 Face....................................................................................................................................8 3.3.3 Color ..................................................................................................................................8 3.3.4 Alignment ..........................................................................................................................8 3.3.4 Space..................................................................................................................................9 3.3.5 Bahasa................................................................................................................................9 3.3.6 Penekanan .........................................................................................................................10 3.3.7 Redudansi Kalimat.............................................................................................................10 3.3.8 Catatan Kaki ......................................................................................................................10 3.3.9 Useless Word .....................................................................................................................11 3.4 Graphic Design and Layout ....................................................................................................11 3.4.1 Logo, Nama dan Slogan.....................................................................................................11 3.4.2 Header................................................................................................................................11 3.4.3 Footer.................................................................................................................................12 3.4.4 Gambar ..............................................................................................................................12 3.4.5 Optimasi Halaman .............................................................................................................12 3.4.6 Pengurutan .........................................................................................................................13 3.4.7 Useless Symbol..................................................................................................................14 3.4.8 Pop-up Menu......................................................................................................................14 3.4.9 Anchor ...............................................................................................................................15 3.5 Interaction ...............................................................................................................................16 3.5.1 One Clicking ......................................................................................................................16 3.5.2 Fil-in Menu ........................................................................................................................16 BAB III DAFTAR PUSTAKA.........................................................................................................18
1
BAB I PENDAHULUAN Perancangan suatu website membutuhkan berbagai pertimbangan baik dipandang dari sisi pengenmbang (developer) maupun pengguna (user). Hal ini bertujuan untuk mendapatkan suatu hasil yang optimal, website yang user friendly dan informasi yang dalam.
Tujuan Pada kesempatan ini akan dibahas website pertamina (www.pertamina.com). Hal ini bertujuan untuk mengaplikasikan pengetahuan yang didapatkan pembahas dari mata kuliah Interaksi Manusia-Komputer, serta untuk mengukur sedalam apa ilmu yang telah diserap.
Ruang Lingkup Pembahasan hanya dilakukan pada website pertamina saja. Semua contoh dan penjelasan hanya mengacu pada website tersebut.
Manfaat Pembahasan website ini diharapkan dapat bermanfaat bagi siapa pun yang membacanya, dapat berbagi pengetahuan yang dimiliki user dan yang paling utama dapat digunakan oleh pengembang website pertamina sebagai acuan pertimbangan untuk pengembangan selanjutnya.
2
BAB II PEMBAHASAN 1. Usability 1.1 Learnability Website Pertamina (www.pertamina.com) agak sulit dimengerti karena peletakan content yang tidak jelas. Misalnya, jika seorang user ingin mencari apa saja produk pertamina maka menu apa yang harus dia klik. Pada halaman home memang terdapat link untuk melihat produk pertamina. Namun jika ingin diakses melalui menu bar maka menu manakah yang memuat hal tersebut? Yang paling relevan adalah menu our bisnis. Namun setelah di klik, pada halaman tersebut tidak terdapat ulasan tentang produk pertamina. Menu tersebut hanya membahas aktivitas pertamina di hulu (upstream) dan hilir (downstream). Setelah beberapa lama mencari, yang pastinya telah membuang waktu dan menguji kesabaran, ditemukanlah link yang dapat membawa user ke halaman produk pertamina. Link tersebut dapat dicapai dengan urutan berikut: downstream>marketing & trading>our produk. Cukup sulit dan panjang, karena user harus menunggu loading tiap halaman. Cara lain melalui halaman sitemap, berada di bawah hierarki our product yang tidak terdapat pada menu bar. Kemudian alternatif yang dapat dilakukan user adalah dengan melakukan pencarian yang terdapat di setiap halaman. Sebenarnya banyak cara menuju ke halaman tersebut, namun beberapa tidak tampak dipermukaan sehingga user tetap harus meraba-raba. Kemudian pada menu news room, terdapat beberapa submenu, yaitu: CyberNews, Warta Pertamina, Media Pertamina, Article, e-Magazine. Bagi user yang baru pertama kali berkunjung pasti akan kesulitan mengenai perbedaan dan batasan tiap submenu tersebut. Inti dari semua submenu tersebut adalah memberikan informasi tentang kegiatan yang dilakukan oleh pertamina. User yang mengakses website pertamina untuk kedua kali atau lebih akan lebih mengetahui kemana dia akan berjalan. Ini berarti walaupun website tersebut agak kacau pengaturan contentnya namun hal itu bisa dipelajari user. Sehingga untuk kunjungan selanjutnya user dapat menuju halaman yang diinginkan tanpa harus berpikir terlalu panjang (waktu berpikir tetap diperlukan).
1.2 Throughput Seperti yang telah diulas di atas, kesalahan yang banyak dilakukan oleh user pada saat mengakses website pertamina adalah seringnya menggunakan tombol back pada toolbar karena salah mengakses halaman. Karena hal tersebut user jadi lebih lama mendapatkan informasi yang dibutuhkan. Namun permasalahan tersebut dapat diatasi dengan pengaturan content yang lebih sesuai dengan menu yang tersedia, sehingga user tidak perlu lagi berpikir kemana dia harus pergi untuk mendapatkan informasi tertentu. Alternatif lain adalah menyediakan fungsi polling untuk mengetahui apa pendapat user tentang website tersebut. Polling yang dibuat sederhana saja karena jika terlalu kompleks userpun malas untuk mengisinya. Hasil yang polling tersebut dapat dijadikan bahan evaluasi untuk perbaikan website selanjutnya.
1.3 Flexibility Website pertamina cukup fleksibel bagi user, baik untuk pemula, menengah maupun mahir. Bahasa yang digunakan pun mudah untuk dipahami dan tidak terlalu banyak mengunakan istilah asing. Terdapat dua versi bahasa yang digunakan yaitu bahasa Indonesia dan bahasa Inggris. Untuk user menengah dan mahir, website pertamina mudah untuk diakses dan dieksplorasi. Namun bagaimana untuk user pemula? Untuk user yang tidak terbiasa menggunakan website, apalagi untuk user yang baru pertama kali melihat website, terdapat sedikit hambatan dalam menggunakan website pertamina. Misalnya, untuk user yang mengetahui apa itu site Map, maka dia akan lebih mudah untuk mencari halaman yang ingin dia tuju. Namun, user pemula yang tidak tahu apa itu sitemap, akan terus berputar-putar dan berulang kali menekan tombol back karena masuk ke halaman yang salah.
3
Hal tersebut bisa diatasi dengan mengubah kata site map dengan indeks misalnya. User sudah terbiasa mendengar kata indeks yang sering terdapat diakhir sebuah buku sehingga diharapkan user dapat mengerti konotasi kata tersebut.
1.4 Attitude Website pertamina sebenarnya menyediakan banyak informasi di dalamnya. Asalkan user kreatif dalam menentukan menu mana saja yang harus dia kunjungi. Kepuasan pengaksesan website tergantung pada user. Jika user cukup beruntung, maka ia akan langsung menemukan informasi yang dibutuhkannya. Tentu saja hal tersebut memberikan kepuasan yang besar pada user. Namun pada kasus sebaliknya, user tidak menemukan informasi yang diinginkan, maka hal ini memberikan rasa kecewa pada user. Dan kondisi terburuknya adalah user tidak akan pernah lagi mengakses web tersebut.
2. User experience 2.1 Computer Literacy Salah satu pertimbangan dalam pengembangan suatu website adalah kemampuan user menggunakan komputer. Halaman web biasanya dirancang untuk seluruh lapisan masyarakat sehingga mudah digunakan walaupun oleh user pemula sekalipun. Website pertamina merupakan halaman web yang tidak membutuhkan kemampuan khusus maupun expert dalam menggunakannya. Sebenarnya cukup mudah menggunakannya karena hanya berupa aktivitas baca dan klik saja.
2.2 System Experience Perkembangan teknologi yang pesat seharusnya menyebabkan naiknya standard kemampuan yang dimiliki seseorang. Penggunaan internet telah sering dilakukan sehingga dapat digeneralisasi bahwa user pasti dapat menggunakannya (familiar). Website pertamina tidak membutuhkan suatu pengalaman sistem yang khusus. Interaksi yang dibutuhkan sama seperti penggunaan internet biasa.
2.3 Web Page Considerations Dalam perancangan halaman web, user pemula membutuhkan pengarahan tentang button untuk memilih aksi dan guided tours. User menengah menginginkan struktur yang lebih teratur, penandaan yang jelas dan keamanan eksplorasi. User expert menyukai navigasi yang lancar, informasi yang rapi namun dalam dan kemampuan untuk mengubah interface. Website pertamina telah mencoba untuk menangani ketiga jenis user tersebut, walaupun belum semuanya dapat dilakukan. Namun secara umum sudah dapat ditangani. Terdapat guided tours, misalnya pada form yang terdapat pada halaman contact center. Struktur halaman web yang rapi dan teratur. Penandaan pun bisa dikatakan sudah jelas. Informasi yang disampaikan pun terstruktur dengan rapi walau agak sedikit membingungkan untuk mencapainya.
2.4 Application Experience Pertimbangan lain adalah apakah user pernah bekerja pada aplikasi sejenis. Banyaknya website yang telah dikembangkan bisa menjadi syarat cukup untuk mengasumsikan seorang user pernah bekerja pada aplikasi tersebut. Website pertamina mudah digunakan, sama halnya dengan penggunaan website pada umumnya.
2.5 Task Experience Pengalaman dalam menjalankan suatu task di website merupakan hal yang patut dipertimbangkan. Task-task yang familiar, seperti yang umumnya terdapat pada website, tidak akan menyulitkan user terutama untuk user menengah dan expert. Walaupun task tersebut mungkin saja sedikit menyulitkan user pemula, namun hal tersebut umumnya tidak sulit untuk dipelajari. Website pertamina tidak menggunakan task-task yang ‘aneh’. Task yang ada sama seperti yang dapat dijumpai pada website lainnya.
2.6 Other System Use Konfigurasi internet untuk mengakses website merupakan hal di belakang layar. User biasanya hanya tinggal menggunakan saja. Oleh karena itu, bagian ini tidak memerlukan perhatian yang lebih. Website pertamina pun juga berlaku sama seperti wabsite lainnya.
4
2.7 Education Seperti yang telah diulas sebelumnya, perkembangan teknologi yang pesat seharusnya membuat standard pengetahuan yang dimiliki seseorang meningkat. Pada tingkat sekolah dasar pun pengaksesan website menggunakan internet sudah mulai disosialisasikan. Hal ini mengakibatkan user tingkat sekolah dasar pun mulai dapat mempelajari penggunaan website sehingga tidak mustahil mereka telah familiar dengan bentuk dan cara kerjanya. Website pertamina bukanlah website yang sulit untuk dipelajari. Tidak dibutuhkan suatu tingkat user khusus untuk mengaksesnya.
2.8 Reading Level Untuk porsi textual dari interface, struktur vocabularry dan grammatical harus berada pada tingkat yang dimengerti oleh user. Reading level sering mewakili tingkat edukasi seorang user. Website pertamina mudah dipahami karena tidak menggunakan bahasa yang ‘aneh’ kecuali istilah di bidangnya, namun itu pun tidak terlalu banyak. Terdapat dua versi bahasa yaitu bahasa Indonesia dan bahasa Inggris membuat website ini semakin fleksibel digunakan user.
2.9 Typing Skill Apakah suatu kemampuan mengetik diperlukan untuk menggunakan website? Ini merupakan salah satu pertimbangan dalam perancangan sebuah website. Pengetik yang kompeten lebih memilih berinteraksi dengan sistem menggunakan keyboard, sedangkan yang lain lebih memilih menggunakan mouse. Website pada umumnya dirancang untuk mempermudah sehingga tetap dapat melakukan suatu task hanya dengan sekali klik. Begitu pula halnya website pertamina yang dirancang agar user hanya tinggal melakukan klik untuk mendapatkan informasi. Sedikit kegiatan mengetik hanya dibutuhkan jika user akan memberikan komentar dan juga pada saat user menggunakan fungsi search. Itu pun bukan suatu hal yang kompleks.
2.10 Native Language and Culture Perancangan website bertujuan untuk memudahkan user. Perancangan tersebut pun pada umumnya disesuaikan dengan budaya daerah di mana website tersebut dikembangkan. Misalnya, jika dikembangkan di Indonesia maka harus menggikuti budaya Indonesia dan bahasa Indonesia. Seperti yang telah diulas sebelumnya, website pertamina menggunakan bahasa Indonesia. Untuk menangani user dari luar Indonesia perancang menyiasatinya dengan membuat versi bahasa Inggris sehingga tetap dapat diakses
3. User Interface 3.1 Web User Interface Control 3.1.1 Radio button Website pertamina menyediakan polling mengenai produk elpiji 3 kg. dapat dilihat pada gambar di bawah. Penggunaan radio button untuk pilihan jawaban poling tersebut sudah sesuai karena hanya dibutuhkan satu jawaban.
3.1.2 Bullet dan Penomoran Bullet merupakan suatu karakter yang digunakan untuk menampilkan suatu daftar agar lebih mudah dibaca. Hal ini juga bisa menggunakan penomoran. Namun ada beberapa tipe bulet yang harus dihindari untuk halaman web.
5
Gambar di atas dapat ditemukan dalam halaman investor information. Lihat bullet yang digunakan. Bullet tersebut memberikan kesan seolah-olah adalah checkbox yang dapat di checklist. Bullet tersebut sebaiknya diganti untuk menghindari kerancuan dalam benak user.
Permasalahan yang hampir mirip juga ditemukan pada halaman program konversi seperti gambar di atas. Bullet yang digunakan mirip dengan radio button. User akan berpikir apakah daftar tersebut dapat dipilih atau tidak. Oleh karena itu, sebaiknya gunakan bullet yang lebih umum dan tidak rancu, atau lebih baik gunakan penomoran.
3.1.3 Form Form merupakan fungsi fill-in yang dapat diisi user, yang biasanya disertai feedback dari web itu sendiri. Form terdiri dari berbagai jenis seperti textfield, textarea, radio button, checkbox, button, drop-down menu dan sebagainya. Tiap jenis tersebut mempunyai format yang berbeda. Terdapat form yang digunakan untuk memberikan komentar mengenai gas elpiji 3 kg. Pengaturan form tersebut ada yang kurang sesuai. Misalnya untuk telp. Apakah perlu dimasukkan kode daerah (mis: 021) atau tidak. Kemudian form untuk alamat seharusnya digunakan textarea bukan text field. Lihat gambar berikut:
Terdapat kerancuan untuk tombol batal. Apakah itu maksudnya adalah menghapus kembali isi form yang telah diisi atau untuk batal memberi komentar? Ternyata tombal itu berfungsi untuk me-reset semua kolom (menghilangkan semua jawaban). Sebenarnya tombol tersebut bisa dihilangkan karena tidak perlu untuk me-reset jika tidak jadi memberikan komentar. Kemudian coba lihat gambar berikut
6
Gambar tersebut merupakan form yang terdapat pada halaman contact us. Textfield untuk tiap-tiap label tidak harus dipertahankan sama. Misalnya untuk city dan country bisa digunakan drop-down menu. Panjang textfield untuk jawaban label phone dan fax juga tidak harus sepanjang textfield untuk jawaban name. Kemudian textarea yang ada tidak jelas ditujukan untuk apa. Tidak ada label yang mengikutinya. User harus sedikit berpikir tentang fungsi textarea tersebut. Setelah dipikirkan (yang memakan waktu) dapat diambil kesimpulan bahwa textarea tersebut digunakan untuk menampung pertanyaan user. Persyaratan yang ditentukan sudah bagus, yaitu menambahkan simbol asteriks * di belakang form yang harus diisi. Sehingga user tidak harus mengisi semua form yang ia anggap tidak perlu.
3.2 Navigation 3.2.1 Menu
Kedua menu diatas merupakan menu-menu yang berada di bawah Company Profile. Hal yang ingin ditekankan disini adalah ketidakkonsistenan daftar menu. Gambar sebelah kiri merupakan gambar ketika vision and mision di bawah menu about us di klik. Namun lihat pada gambar di sebelah kanan. Gambar tersebut adalah ketika company activities di klik. Daftar menu berubah. Pada saat menampilkan halaman vission and mision menu-menu di bawah about us tetap ditampilkan. Namun hal tersebut tidak berlaku pada halamn company activities. Menu-menu dibawah about us tidak ditampilkan. Daftar menu tersebut tidak disusun berdasarkan abjad. Dalam hal ini tidak terlalu bermasalah karena daftar menu hanya sedikit. Namun hal ini harus menjadi pertimbangan jika daftar menu banyak. Kemudian ditinjau dari segi content, kedua halaman yang berbeda tersebut menampilkan informasi yang sama. Hanya berbeda bahasa yang digunakan. Padahal keduanya diakses menggunakan versi bahasa Inggris. Hal tersebut harus dipertimbangkan oleh perancang website pertamina agar tidak membuat redudansi informasi.
3.2.2 Breadcrumbs Breadcrumbs menunjukkan dimana Anda berada. Format yang digunakan adalah link yang dipisahkan oleh simbol >. Contohnya Home > Company Profile > About Us > Vission and Mission; dimana Home, Company Profile dan About Us merupakan link ke halaman yang sesuai dan Vission dan Mission adalah halaman dimana Anda berada. Sayangnya website pertamina tidak menggunakan breadcrumbs. Padahal ini sangat membantu user agar tidak tersesat di dalam website.
3.2.3 Link Link digunakan untuk menghubungkan atau shortcut ke halaman web yang lain. Format yang biasa digunakan adalah warna biru dengan underline. Website pertamina menggunakan format yang sedikit berbeda dengan format standard untuk link. Formatnya adalah warna biru tapi tanpa underline. Pada halaman yang lain digunakan warna merah dengan underline. Sebenarnya penggunaan format link yang tidak sesuai dengan format standard boleh saja dilakukan, namun harus konsisten agar tidak menimbulkan kesan rancu bagi user. Selain tulisan, gambar juga dapat digunakan sebagai link. Gambar di bawah merupakan link yang selalu terdapat di setiap halaman. Link tersebut merupakan shortcut ke submenu-submenu dalam news room.
7
Fungsi tersebut sebenarnya bisa dihilangkan karena halaman yang bersangkutan dapat diakses melalui menu news room. Ini juga dapat mengoptimasi layar sehingga dapat mengurangi scroll ke bawah.
3.2.4 Search Fungsi search biasanya digunakan oleh user yang tidak punya ide kemana harus mencari informasi tertentu. Search menyediakan sebuah ‘box’ yang dapat diisikan kata kunci yang sesuai, serta sebuah tombol untuk memulai pencarian. Search lebih baik jika dimunculkan di tiap halaman web sehingga bisa langsung digunakan pada saat user sudah mulai frustasi dan tersesat. Website pertamina telah menerapkan hal ini. Search terletak di sebelah kanan atas yang mudah ditemukan dan muncul di tiap halaman.
3.3 Textual 3.3.1 Judul/Subjudul Website Pertamina menggunakan format warna merah untuk judul dengan ukuran huruf yang lebih besar dari tubuh tulisan. Pengaturan ini bagus karena memudahkan user memisahkan judul dengan tubuh tulisan. Gambar diatas merupakan subjudul dalam halaman News Room. Tulisan tersebut dalam format underline. Hal tersebut membuat kerancuan bagi user mengenai apakah tulisan tersebut merupakan link atau bukan. Format underline merupakan salah satu cara yang biasanya digunakan untuk menandakan suatu link.
3.3.2 Face Jenis huruf yang digunakan tidak diketahui namun penggunaan jenis huruf sans sherif pada website sangatlah tepat karena tidak menimbulkan garis seperti ‘underline’ seperti yang ditimbulkan jenis huruf sherif.
3.3.3 Color Warna merah untuk judul dan hitam untuk tubuh tulisan. Pada weblink yang lain digunakan warna merah untuk judul dan biru untuk subjudul. Namun terdapat satu kekurangan yang dilakukan.
Warna abu-abu yang redup membuat informasi tersebut sulit untuk dibaca. Apalagi jika user mempunyai masalah dengan mata, seperti buta warna atau mata tua. Hal ini dapat dengan mudah ditangani. Hanya dengan mengganti warna, menjadi warna hitam misalnya. Tulisan yang terdapat dalam gambar di atas dapat dilihat dalam menu contact us. Tulisan di atas selalu terdapat di sebelah kiri bawah website pertamina termasuk pada halaman contact us. Ini menunjukkan suatu redudansi informasi. Masalah ini bisa ditangani dengan menhilangkan tulisan di atas pada halaman contact us. Namun hal ini akan menyebabkan ketidakkonsistenan. Bisa juga dilakukan trik lain seperti hanya menampilkan tulisan tersebut pada halaman home.
3.3.4 Alignment format alignment paragraf yang bagus digunakan pada website adalah left. Hal ini untuk mengantisipasi terbentuknya white flow di tengah paragraf.
8
Dari kedua gambar diatas dapat dilihat ketidakkonsistenan dari format alignment paragraf. Pada gambar di sebelah kiri digunakan format alignment justify dengan warna hitam, sedangkan gambar di sebelah kiri menggunakan format alignment left dengan warna biru. Namun secara umum pengaturan sudah baik. Terdapat spasi kosong yang memisahkan tiap paragraf, pengaturan font dan leading yang baik membuat informasi mudah dibaca.
3.3.4 Space Pengaturan space kosong pada halaman web sebenarnya bertujuan untuk memudahlkan user membaca informasi di dalamnya. Namun, halaman yang terlalu kosong juga sangat mengganggu karena hanya menyediakan sedikit informasi.
Gambar di atas merupakan content dari halaman our network. Teks yang terlalu sedikit dalam layar mengakibatkan seringnya membalik halaman, klik mouse yang tidak perlu akan menambah waktu tunggu.
3.3.5 Bahasa Banyak website di Indonesia yang menyediakan dua versi bahasa yaitu bahasa Indonesia dan bahasa Inggris. Ide ini sangat kreatif mengingat tidak semua orang Indonesia mengerti bahasa Inggris dan sebaliknya, orang asing yang mengunjungi website Indonesia tersebut dapat tetap memahami isinya. Ide ini pun digunakan oleh website pertamina. Namun ada beberapa kekurangan yang dilakukan.
Gambar di atas menunjukkan ketidakkonsistenan penggunaan bahasa. Gambar sebelah kiri menunjukkan halaman yang diakses dengan menggunakan versi bahasa Indonesia. Sedangkan gambar di sebelah kanan menunjukkan halaman yang diakses menggukana versi bahasa Inggris. Perbedaan terdapat hanya pada kata ‘seputar’ dan ‘about’, selebihnya murni menggunakan bahasa Indonesia. Coba lihat gambar berikut Tulisan pada gambar tersebut berada pada halaman contact us website pertamina. Tulisan tersebut menjelaskan anjuran membaca FAQ untuk memperoleh informasi seputar pertamina. Namun, Jika yang mengakses halaman ini adalah orang asing yang sama sekali tidak mengerti bahasa Indonesia, maka halaman FAQ ini sama sekali tidak membantu. Begitu juga dengan versi bahasa yang telah dibuat menjadi tidak berguna. Hal ini patut menjadi pertimbangan oleh perancang website pertamina untuk perbaikan selanjutnya. Hal lainnya dapat dilihat pada gambar berikut
Gambar di sebelah kiri diakses menggunakan versi bahasa Inggris. Gambar di sebelah kanan diakses menggunakan versi bahasa Indonesia. Kedua gambar diatas merupakan fungsi search/pencarian untuk website pertamina. Terdapat ketidakkonsistenan kata disini. Jika dalam versi bahasa Inggris (gambar kanan) kata dalam textfield dan tombol sama, mengapa hal yang sama tidak diterapkan pada versi bahasa
9
Indonesia. Seperti mengubah kata ‘pencarian’ dalam tombol menjadi kata ‘cari’ seperti yang tercantun di dalam textfield.
3.3.6 Penekanan Format yang biasanya digunakan untuk penekanan kalimat adalah format bold atau menggunakan huruf kapital. Bisa juga dengan penggunaan warna, seperti warna merah. Namun, coba lihat pada penekanan kalimat yang terdapat pada gambar di bawah.
Gambar di atas terdapat pada halaman jalur distribusi. Kalimat ‘Pertamina tidak memungut biaya dalam pembagian paket kompor gas dan tabung Elpiji 3 kg’ yang diformat dengan warna merah menimbulkan kesan rancu karena warna merah pada halaman ini telah digunakan sebagai format untuk judul. Lalu, apakah kalimat tersebut merupakan subjudul? Tidak. Karena kalimat tersebut berada pada baris terakhir halaman tersebut. Kalimat tersebut lebih mengarah ke kalimat penekanan. Pada kasus yang lain, website pertamina menggunakan blinking picture untuk penekanan menu baru. Ide tersebut bagus karena dapat menarik perhatian user.
3.3.7 Redudansi Kalimat
Gambar di atas terdapat pada halaman investor information. Terdapat redudansi kalimat, bahkan sampai tiga kali. Judul menu, judul content dan subjudul menggunakan kalimat yang sama. Hal ini harus dipertimbangkan ulang, apakah harus diganti kalimatnya atau malah sebaiknya dihilangkan saja (misal: hilangkan subjudul).
Gambar di atas terdapat pada halaman MSDS. Hal yang ditekankan di sini adalah daftar menu kembali dituliskan di content. Lagi-lagi terjadi redudansi. Judul menu dan judul content pun sama. Hal ini pun membutuhkan pertimbangan lagi untuk menghilangkan content yang lebih redundan.
3.3.8 Catatan Kaki Catatan kaki digunakan untuk memberi keterangan pada informasi yang disajikan, seperti referensi buku, nama pengarang buku, tanggal update informasi dan sebagainya. Format yang digunakan biasanya huruf yang lebih kecil dari isi tulisan. Penggunaan referensi sumber dari mana informasi berasal merupakan ide yang sangat bagus. Hal ini dapat memberikan keyakinan kepada user mengenai valid tidaknya
10
informasi yang didapatkan. Namun format yang digunakan sama dengan isi tulisan. Hal ini memang tidak terlalu mengganggu, namun ada baiknya jika dilakukan penyesuaian.
3.3.9 Useless Word Gambar di atas merupakan, entah judul, sub judul atau keterangan, yang terdapat pada halaman mengenal elpiji. Tulisan tersebut akan lebih baik jika dihilangkan karena user sudah mengerti makna kata mengenal elpiji pasti memuat informasi yang lebih dalam tentang elpiji. Tulisan seperti gambar di atas terdapat pada halaman home dari website pertamina. Jika dilihat, user tidak akan mempunyai suatu ide bahkan untuk menebak apa fungsinya. Apakah sebuah link? Tidak. Tulisan tersebut tidak berupa link, karena tidak dapat di klik. Tiga titik (…) yang berada di tiap akhir tulisan pun rancu. Apakah tulisan tersebut belum lengkap atau apa? Bila memang tulisan-tulisan tersebut tidak ada gunanya, sebaiknya dihilangkan saja agar tidak memusingkan user.
3.4 Graphic Design and Layout 3.4.1 Logo, Nama dan Slogan Logo, nama dan slogan digunakan untuk memberi tahu user identitas dari pemilik halaman web. Ketiga hal tersebut biasanya diletakkan di kiri atas karena arah pandang user biasanya dimulai dari sana.
Gambar di atas merupakan logo, nama dan slogan dari pertamina. Peletakannya di sebelah kiri atas sudah sesuai. User langsung tahu bahwa ia telah mengakses website pertamina.
3.4.2 Header Header, sesuai artinya, merupakan bagian atas web. Biasanya berisi logo, nama dan slogan pemilik halaman web, gambar-gambar yang sesuai, fungsi search, menu. Header biasanya muncul di tiap halaman dengan format yang konsisten.
Gambar di atas merupakan header website pertamina. Muncul di setiap halaman dan konsisten. Namun ada kekurangan. Bagian ini memenuhi hampir sepertiga halaman, terlalu besar. Terdapat cukup banyak space kosong di atas menu bar. Gambar di bawah menu bar sebenarnya dapat disiasati dengan meletakkannya di atas menu bar. Jika ini dilakukan dapat mengurangi scroll yang mengganggu. Kemudian coba lihat gambar berikut
11
Gambar ini berada dalam halaman home dari program konversi minyak tanah ke elpiji. Bagian ini lebih besar dari gambar sebelumnya. Hal ini menyebabkan lebih banyak scroll yang tidak perlu. Logo elpiji di sebelah kanan atas sudah bagus untuk menujukkan bahwa halaman ini merupakan halaman yang berkaitan dengan elpiji.
3.4.3 Footer Footer, sesuai artinya, merupakan bagian bawah web yang digunakan untuk membatasi akhir halaman web. Biasanya berisi link-link dari menu, informasi pemilik halaman (alamat, email, nomor telepon, dan sebagainya) dan hak cipta. Website pertamina menggunakan footer yang berisi informasi pertamina contact center.
3.4.4 Gambar Gambar biasanya digunakan sebagai ilustrasi informasi, penarik perhatian dan link. Penggunaan yang berbeda seharunya menggunakan format yang berbeda pula. Apalagi jika gambar tersebut terletak berdekatan.
Tiga gambar di atas terdapat pada halaman home dari program konversi minyak tanah ke elpiji. Bagian yang ingin ditunjukkan adalah ketidakkonsistenan format. Bagian wilayah konversi dan lokasi isi ulang dan pangkalan merupakan link ke halaman yang bersangkutan. Hal ini ditandai dengan perubahan bentuk cursor menjadi bentuk hand. Namun lihat pada bagian harga eceran tertinggi yang ditampilkan dalam format yang sama ternyata bukan merupakan link. Ini menimbulkan pertanyaan di benak user. Apakah gambar ini sebenarnya bisa di klik atau tidak? Sehingga user pasti akan mencoba mengklik gambar tersebut paling tidak satu kali.
3.4.5 Optimasi Halaman Halaman web dengan pengaturan halaman yang rapi dan optimal akan membuat user lebih nyaman. Oleh karena itu, perlu pertimbangan untuk menentukan apa saja yang akan ditampilkan pada suatu halaman web. Gambar di samping dapat ditemukan pada company prifile > about us > office address.
Gambar di samping muncul ketika link head office di klik.
12
Informasi yang terdapat pada halaman-halaman tersebut hanyalah seperti yang terlihat pada gambar. Sangat sedikit. Gambar di samping muncul jika link processing unit diklik.
Informasi yang ditampilkan cukup banyak. Hal yang perlu juga dipertimbangkan disini adalah menghilangkan link pada halaman office address dan menggantinya langsung dengan informasi yang terdapat pada masing-masing halaman. Hal ini lebih efisien karena mengurangi kerja user untuk melakukan klik dan menghemat waktu tunggu load halaman.
3.4.6 Pengurutan Pengurutan digunakan untuk menampilkan suatu daftar sesuai dengan aturan tertentu, seperti abjad, kepentingan dan sebagainya. Hal ini bertujuan untuk memudahkan mencari informasi.
Gambar di atas merupakan potongan dari halaman lokasi isi ulang. Kekurangan pada bagian tersebut adalah tidak tersusunnya daftar berdasarkan abjad maupun kepentingan. Ini akan menyulitkan pengguna. Kelebihannya, paging pada halaman ini telah diterapkan. Jadi tidak diperlukan scroll yang panjang untuk melihat semua daftar. Namun, lagi-lagi kekurangannya menjadi semakin menyulitkan karena user tidak bisa memprediksi letak informasi yang dibutuhkan. Apakah berada di halaman selanjutnya, atau bahkan terletak di akhir halaman? Hal tersebut akan memperpanjang waktu akses dan membuat user terusmenerus melakukan klik serta menunggu waktu loading halaman. Solusi bagi masalah ini mudah saja. Urutkan daftar berdasarkan abjad dengan pilihan kategori berdasarkan apa daftar tersebut diurutkan. Bisa berdasarkan nama, alamat, kota atau nomor telepon.
Gambar diatas memiliki permasalahan yang sama dengan sebelumnya, yaitu user tidak mengetahui disusun berdasarkan apa link-link tersebut. Format mengenai hal-hal seperti ini sebaiknya diatur konsisten agar memudahkan user.
13
Pengaturan perkembangan harga seperti yang terlihat pada gambar misalnya, telah disusun berdasarkan tahunnya. Link paling atas merupakan informasi terbaru. Hal ini sangat baik. Terlihat lebih rapi dan yang pasti tidak menyulitkan user.
3.4.7 Useless Symbol Simbol biasanya digunakan untuk merepresentasikan sesuatu. Namun simbol yang tidak berguna hanya akan mengganggu user. Gambar di atas merupakan menu bar pada halaman informasi kurs pertamina. Simbol <<>> sebaiknya dihilangkan. Menu bar tersebut dibuat sebagaimana menu bar pada halaman utama. Ini untuk mempertahankan konsistensi. Begitu juga pada gambar di bawah. Simbol >>> dan <<< sebaiknya dihilangkan. Pemberian background warna sudah memberikan arti penekanan. Kemudian pada halaman yang sama dengan kedua gambar di atas, terdapat gambar yang mirip dengan logo (lihat gambar di bawah). Padahal halaman tersebut juga memiliki logo pertamina di atasnya. Maka terdapat dua logo pertamina pada halaman tersebut.
Hal yang lain mengapa hanya pada logo pertamina ini dicantumkan juga alamat website pertamina (www.pertamina.com). Bila memang halaman ini ingin dijadikan halaman yang berbeda, maka dapat dilakukan fungsi pop-up. Ini akan jauh lebih efektif.
3.4.8 Pop-up Menu Pop-up menu adalah ‘halaman’ baru yang akan akan muncul bila suatu link di klik. Ini sangat efektif untuk menampilkan data dalam jumlah besar, yang tidak cukup dimuat dalam satu halaman web.
Gambar di atas merupakan potongan dari halaman perkembangan harga avtur. Dapat dilihat bahwa tabel yang disajikan menyertakan banyak scroll, baik scroll ke bawah maupun scroll ke samping. Scroll merupakan hal kecil namun tidak begitu disukai oleh user. Apalagi untuk scroll ke samping. Hal tersebut dapat membuat pengguna bolak-balik untuk melihat informasi yang ada, karena tidak mungkin pengguna dipaksa untuk mengingat. Solusi untuk permasalahan ini antara lain adalah membuat fungsi pop-up untuk menampilkan informasi tersebut. Ini akan lebih efektif dan efisien.
14
3.4.9 Anchor Anchor merupakan suatu fungsi dimana jika suatu link di klik maka akan merefers ke tujuan link tersebut yang berada di bawahnya pada halaman yang sama.
Gambar di atas merupakan halaman FAQ tentang pertamina. Pada halaman tersebut tiap pertanyaan harus di klik terlebih dahulu untuk mendapatkan jawabannya. Hal ini tentu menyulitkan karena user harus berulang kali load halaman. Ini tentu memakan waktu, apalagi jika halaman tersebut memakan waktu untuk loading yang lama. Kemudian coba lihat lagi gambar berikut
Gambar di atas adalah gambar FAQ tentang elpiji. Cara penggunaannya sama dengan FAQ untuk pertamina yaitu klik setiap pertanyaan untuk mendapatkan jawabannya. Namun coba dilihat gambar pertama menujukkan letak pertanyaan di atas dan letak jawaban di bawah. Hal ini menyebabkan tinggi halaman akan berubah sesuai dengan kebutuhan (panjang jawaban pertanyaan). Ini tidak konsisten namun efektif. Sedangkan pada gambar kedua, letak pertanyaan di sebelah kanan dan letak jawaban di sebelah kiri. Hal ini menyebabkan tinggi halaman tidak akan berubah, kecuali jawaban pertanyaan melebihi tinggi daftar pertanyaan. Ini menunjukkan konsistensi. Namun coba lihat scroll yang terdapat pada gambar kedua. Cukup panjang dan sangat mengganggu. Sehingga, lagi-lagi, tidak efektif. Kemudian pada kedua halaman FAQ di atas, ternyata tidak ada pembedaan pada pertanyaan yang telah dilihat jawabannya dan yang belum. Ini menyulitkan user untuk mengingat pertanyaan mana saja yang telah ia lihat jawabannya.
15
Semua masalah ini dapat disiasati dengan membuat anchor pada pertanyaanpertanyaan tersebut. Sehingga user dapat langsung mendapatkan jawaban setelah dia mengklik pertanyaan. Jawaban dari pertanyaan yang lain pun sudah ditampilkan.
3.5 Interaction 3.5.1 One Clicking Pada saat cursor menyoroti link biasanya akan berubah dari bentuk cursor ke bentuk hand atau akan terjadi perubahan warna. Ini suatu penandaan yang bagus bagi user bahwa bagian yang sedang disorot cursor dapat di klik. Klik untuk link biasanya berupa single click. Pembedaan warna untuk link yang belum atau telah dikunjungi merupakan suatu pertimbangan penting. Hal ini akan sangat efisien sehingga tidak memaksa user untuk mengingat, salah satu hal yang mengganggu user. Gambar menu bar di atas sudah bagus pengaturannya. Halaman yang sedang aktif, yang tidak aktif dan yang sedang disorot cursor dibedakan warna backgroundnya. Hal ini memudahkan user mengetahui halaman apa yang sedang ia kunjungi. Website pertamina tidak melakukan pembedaan warna untuk halaman yang telah dikunjungi. Ini cukup menyulitkan karena user ‘dipaksa’ mengingat halaman apa saja yang telah ia kunjungi sehingga ada kemungkinan ia akan berulang kali mengunjungi halaman yang sama.
Gambar diatas merupakan alur dari menu downstream ke menu-menu dibawahnya. Perhatikan, setelah downstream diklik menu processing dan marketing & Trading baru muncul. Lalu apa yang terjadi ketika menu processing diklik. Dapat dilihat pada gambar akan muncul satu menu lagi yaitu crude processing. Mengapa awalnya menu tersebut tidak muncul? Jawabannya adalah karena menu crude processing merupakan submenu dari menu processing. Hal yang perlu dipertimbangkan di sini adalah mengapa tidak ada perbedaan format untuk menu dan submenu. Seperti yang diketahui, submenu biasanya lebih condong ke dalam bila dibandingkan dengan menu. Namun dalam kasus diatas aturan ini tidak diberlakukan. Hal ini dapat membuat user berpikir juga. Contoh lainnya dapat dilihat pada gambar berikut
Gambar di atas juga merupakan alur dari menu downstream ke menu-menu dibawahnya. Namun menu marketing & trading yang diklik. Ada hal yang menarik. Pada navigasi menu tersebut diberikan format berbeda untuk submenu yang telah dikunjungi. Submenu tersebut akan berubah warna tulisannya menjadi merah. Ini adalah format yang baik dan tidak menyulitkan user.
3.5.2 Fil-in Menu
16
Gambar di atas merupakan fungsi search pada halaman lokasi isi ulang. Perhatikan, apakah user dapat tetap melakukan search jika propinsi tidak dipilih? Apakah ada optimasi query untuk kata kunci yang dimasukkan? Bagaimanakah format kata kunci yang harus dimasukkan? Apakah tombol batal berguna disini? Pertanyaan-pertanyaan ini mungkin muncul di benak user. Untuk beberapa saat user akan berpikir sebelum memutuskan kata kunci apa yang akan dimasukkan. Solusinya buat contoh di samping atau textfield format kata kunci yang harus dimasukkan untuk mendapatkan hasil pencarian yang optimal. Tombol batal sebaiknya dihilangkan untuk menghilangkan keraguan user mengenai fungsinya.
17
BAB III DAFTAR PUSTAKA Galitz, Wilbert O. 2007. The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Third Edition. Wiley Publishing, Inc.: Indianapolis, Indiana. Johnson, Jeff. 2003. Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them. Morgan Kaufmann Publishers: San Francisco. Krug, Steve. 2006. Don’t Make Me Think! A Common Sense Approach to Web Usability, Second Edition. New Riders Publishing: Berkeley, California USA.
18
