Permasalahan yang dijumpai :

• Di menu bar terlihat bahwa halamannya berjudul Technical info dan di dalam headlines dari halaman ini adalah Technical Equipment.

Solusi dari permasalahan di atas :

• Sebaiknya memberikan judul yang sama dengan yang ada di menu bar ataupun

sebaliknya memberikan judul yang sama dengan yang berada di headlines-nya.

Gambar 3.1

Groupings, Line Separator, Folded-Menu dan Tab-Menu

Di dalam membuat pengelompokkan ada beberapa kategori diantaranya :

Buatlah Groupings yang logis, khusus, bersifat membedakan, dan bermakna.
1. Kategorikanlah seperti :
   • Memperbesar item yang mirip ke dalam suatu kategori.
   • Memperkecil item yang mirip mendatar dari sebuah kategori.
2. Tampilkan dengan tidak lebih dari 6 atau 7 groupings di layar.
3. Tata groupings sesuai dengan maknanya.
4. Pisahkan tiap groupings dengan menggunakan space yang lebar ataupun dengan
   menggunakan garis pemisah yang tipis (Line Separator).
5. Tampilkan untuk suatu hal yang sangat sering dipilih atau yang sangat berperan.

Gambar 3.2

Permasalahan pengelompokkan yang dijumpai :

• Dapat dilihat pada Gambar 3.2 dimana terdapat beberapa pilihan dari room fact sheet yang dapat dipilih oleh penggunjung. Dan ketika salah satu pilihan di klik maka halaman akan menuju kepada tulisan yang dituju. Sub menu ataupun informasi yang ditampilkan seperti pada Gambar 3.2.a tidak sampai melebihi batas dari halaman yang dapat ditampilkan. Dalam arti masih dapat ditampilkan semua dan langsung dapat dilihat pengunjung. Tetapi disini semua sub-menu ditampilkan satu halaman dan dengan ditambahkan scrolling untuk melihat ke bawah.
• Seperti yang telah dibahas (Menu 2.5) di atas tampilan yang disediakan lebih menyerupai breadcrumbs yang dimana semua tahap tersebut adalah urutan yang harus dilalui untuk mendapatkan kategori terakhir yang berada paling kanan (Gambar 3.2.b). dan ternyata itu hanya terdapat pada satu halaman saja.

Solusi untuk permasalahan di atas :

• Sebaiknya Sub-Menu yang ada dapat digabung menjadi folded menu. Dimana technical info mempunyai Sub-Menu Room Fact Sheet dan Floor plan. Untuk the planary hall, the cendrawasih room, The Assembly Hall, The Exhibiton Hall A, The Exhibition Hall B, dan Lower Lobby Meeting Room dikelompokkan sebagai Sub-Menu dari Room Fact Sheet. sub-menu dapat dibuat karena masih memenuhi aturan Grouping dimana jumlahnya ada 6 sub-menu dari sub-menu Room Fact Sheet.
• Sebaiknya setiap sub-menu yang ditampilkan dari menu utama dapat dipisahkan dengan Line separator yang tipis maupun dengan spacing yang lebar. Sebaiknya tiap bagian penjelasan dari Sub-Menu seperti The Planary Hall, The Cendrawasih Room dibuat dengan halaman yang berbeda tetapi masih satu bagian dari bagian menu Room Fact Sheet. Seperti pada Gambar 3.2.a dapat dipisahkan. Agar tidak membingungkan, pengunjung dapat memilih pilihan dari folded menu seperti yang dijelaskan di atas dan setiap kategori yang telah dipilih akan menjadi sebuah tab menu (Gambar 3.3) pada bagian yang terletak pada Gambar 3.2.b. ini akan mempermudah pengguna yang ingin melihat kembali yang telah dilihatnya karena setiap yang telah di klik akan menjadi menu bar ke samping dan jumlah yang ada masih mencukupi sebanyak 6 sub-menu. Contoh gambar 3.3 adalah tab menu dengan asumsi bahwa menu telah dipilih semua.

Gambar 3.3

Centering Bullets and Text

Bullets seharusnya sebagai pertanda sebagai suatu list dari item yang ada. Adapun beberapa yang ketentuan dari centering bullets and text :

1. Jangan membuat sebuah prose text dengan rata tengah. Seharusnya buatlah text dengan rata kiri atapun rata kanan-kiri. Dan hanyalah line headings yang seharusnya dibuat dengan rata tengah.
2. Buatlah bullets dengan rata kiri dan item listnya jangan dibuat dengan rata tengah pula.
3. Jangan menerima default dari web development tools bahwa harus menggunakan rata tengah.

Permasalahan Centering Bullets dan Text yang dijumpai :

• Ketika pengunjung melihat halaman press office -> testimonial maka akan muncul tampilan seperti pada Gambar 3.4.a
• Link Houver yang diberikan berwarna hitam (Gambar 3.4.b). Sehingga tidak kontras dengan background dari halaman ini.



Gambar 3.4

Solusi dari permasalahan di atas :

• Seperti yang telah dijelaskan bahwa bullets seharusnya dibuat dibuat dengan rata kiri karena dengan memakai bullets berarti merupakan sebuah list dari item yang ada.
• Dan text yang merupakan list dari bullets haruslah menggunakan rata kiri atapun rata kanan-kiri.
• Warna Link houver haruslah kontras dengan background yang ada sehingga pengunjung dapat melihat textnya.

Menu title harus dapat memberikan konteks yang sama dengan pilihan yang sedang diakses. Dan sebuah title harus dapat mencerminkan menu yang dipilih sebelumnya juga.

Permasalahan Menu Title yang dijumpai :

Gambar 2.1

• Menu title tidak mengalami perubahan teks di setiap halaman yang diakses.
  Contoh : saat mengakses sebagai visitor dapat kita lihat bahwa title tetap dengan tulisan Balai Sidang Jakarta Convention Center.

Solusi dari permasalahan di atas :

• Sebaiknya jika berpindah halaman dari tampilan awal dapat diberikan judul dari halaman tersebut dengan tetap mengikutsertakan halaman sebelumnya atau dapat disingkat dari menu title di atas menjadi “:: JCC – location ::”. Jika sub menu lebih baik hanya menampilkan nama dari halaman yang dikunjungi saja.

Menu Bar

Berfungsi untuk mengenali, menyediakan akses secara umum, dan seringkali digunakan sebagai perpindahan dari suatu halaman ke halaman yang berbeda.

Permasalahan Menu Bar yang dijumpai :

Gambar 2.2

• Terdapat link pada setiap halaman yang bertujuan sebagai penjelasan yang lebih spesifik dari menu web yang ditampilkan.
• Peletakan home yang tidak wajar.

Solusi untuk permasalahan di atas :

• Sebaiknya ditampilkan dengan dynamic menu / folded menu. Selain lebih rapi
  dan juga agar pengguna dapat melihat dengan jelas.
• Umumnya home ditempatkan pada bagian kiri dari menu bar website. Karena
  telah menjadi konvensi umum.
  

  Gambar 2.3

Text image

Text image biasanya digunakan oleh pengembang web untuk membuat tombol. Text image biasanya juga digunakan untuk membuat font-font yang tidak standar di web browser sehingga hal-hal yang berkenaan dengan browser compatibility dapat diatasi. Walaupun penggunaan text image dapat mengatasi masalah browser compatibility, penggunaan text image menimbulkan beberapa masalah, antara lain :

1. File gambar dapat menyebabkan pembengkakan ukuran file. Sebagian besar pengguna web di dunia masih menggunakan koneksi dial-up dan tidak sabar jika loading dari web yang dibuka sangat lambat. Hal ini menyebabkan pengguna akan meninggalkan web sebelum loadingnya selesai.
2. Teks berbasis gambar tidak dapat diakses dengan menggunakan fitur searching.
3. Teks berbasis gambar tidak dapat dipilih sehingga pengguna tidak mungkin melakukan copy and paste.
4. Teks berbasis gambar tidak dapat diubah ukurannya, padahal sebagian pengguna melakukan perubahan ukuran pada browsernya agar lebih mudah membaca informasi yang ada di web.
5. Screen reader tidak dapat membaca teks yang berbasis teks.
6. Informasi yang ditampilkan dengan menggunakan teks berbasis gambar tidak akan muncul jika pengguna mematikan pilihan load image pada browsernya. Sebagian pengguna mematikan pilihan load image karena alasan koneksi. Jika image tidak diload maka halaman web akan ditampilkan lebih cepat dan bandwidth yang digunakan akan jauh lebih hemat; terutama untuk pengguna yang mengakses web dengan koneksi yang mengharuskannya membayar per- kb terhadap bandwidth yang digunakannya.

Permasalahan text image yang dijumpai :

• Menu bar dan teksnya memakai gambar. Teks tidak diinput dengan HTML (Gambar 2.2).

Solusi untuk permasalahan di atas :

• Sebaiknya menu bar dan text tidak dijadikan sebuah image. Text ditulis dengan HTML. Ini dimaksud untuk menghindari bagi para pengguna yang tidak ingin menampilkan image ketika sedang berkunjung ke situs ini. Sehingga pengguna tidak kehilangan navigation dalam melakukan browsing ataupun mencari tujuannya.

Fonts

Gunakanlah font yang umum, sederhana, dan wajar. Dan pilihlah ukuran font minimal 12 atau 14 points. Dan gunakan font yang proporsional.
Permasalahan Font yang dijumpai :

• Font yang diberikan terlalu kecil dan jenis font yang digunakan tidak umum sehingga terlihat kurang jelas. Ini akan berakibat kepada pengunjung dewasa yang umurnya 30 tahun ke atas akan kesulitan untuk melihat dan membaca menunya (Gambar 2.2). lebih jelasnya klik disini.

Solusi untuk permasalahan di atas :

• Pengembang web ini sudah memberikan pop-up di setiap link yang ada. Sebaiknya menggunakan ukuran minimal dari font 12 atau 14 points dan memilih jenis font yang mudah dibaca, umum, sederhana seperti jenis sherif ataupun sans-sherif. Dianjurkan untuk lebih memilih tipe sans-sherif.

Breadcrumbs

Breadcrumbs digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini. Dengan menggunakan breadcrumbs, pengguna juga dapat menelusuri path yang telah

Gambar 2.4

dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Pada web ini tidak terdapat breadcrumbs. Breadcrumbs memang kurang dibutuhkan pada web ini karena setiap page rata-rata hanya memiliki jarak path satu klik dari halaman utama. Lalu, bagaimana pengguna mengetahui dimana posisinya sekarang? Pengembang web ini membuat judul pada setiap halaman sehingga pengguna bisa mengetahui dimana posisinya sekarang.
Permasalahan Breadcrumbs yang dijumpai :

• Pemberian judul pada setiap link yang di klik akan terasa sulit jika kedalaman sudah lebih dari 2. Jika pengguna membuka halaman event space ? link ke room capacity chart. Dimana room capacity chart adalah sebuah link yang berhubungan sebelumnya dengan halaman venue map. Di halaman tersebut terdapat link Venue Map – Main Lobby dan terdapat dua link yang sama karena ada dua gambar pada halaman tersebut.

Gambar 2.5

Solusi dari permasalahan di atas :

• Sebaiknya (Gambar 2.4 kotak merah) yang sudah ditandai dipindahkan menjadi breadcrumbs dan breadcrumbs dari tiap halaman dapat di klik. Kira-kira perubahan yang dimaksud seperti pada Gambar 2.5.

Untuk pembahasan lebih lanjut Anda dapat mendownloadnya pada link berikut : download pdf.

Analisis yang dijumpai pada website JCC :

Logo dan Nama Perusahaan

Logo dan nama perusahaan merupakan identitas utama sebuah website. Identitas ini digunakan untuk menginformasikan kepada pengguna tentang web yang sedang mereka kunjungi. Pada web ini, logo dan nama perusahaan sudah diberikan dengan jelas. Selain itu, juga ada slogan (tagline) dari perusahaan.
Permasalahan yang dijumpai pada logo dan nama perusahaan pada web ini adalah :

• Logo gambar 1.1(b) terdapat di tengah atas dari web.
• Adanya gambar 1.1(a dan c)menyerupai logo yang lebih besar dari logo utama JCC dan akan membingungkan pengunjung tentang logo yang sesungguhnya dari web JCC.
• Logo dan teks nama perusahaan dibuat menjadi satu image dan tidak dapat di klik.

Gambar 1.1

Solusi untuk permasalahan di atas :

• Umumnya logo ditempatkan pada bagian kiri atas dari website karena telah menjadi konvensi umum.
• Sebaiknya gambar di kanan dan kiri dari logo JCC lebih diperkecil ukurannya dan logo JCC lebih diperbesar agar fokus area pengunjung dapat melihat ke tengah dengan logo yang lebih besar.
• Sebaiknya logo dan teks nama perusahaan dipisah image-nya ataupun teks dapat ditulis di dalam HTML. Dan logo dapat di klik sebagai link untuk kembali ke tampilan awal (home) dari website ini.

Pemakaian Jenis Huruf

Perkataan dan jenis huruf merupakan dasar dari sebuah komunikasi dengan pengguna. Pemilihan kata, pesan, isi tulisan yang jelas dan bermakna dapat menambah penilaian dari kemudahan user interface yang digunakan dan meminimalkan pengguna untuk melakukan kesalahan yang mengacu kepada error dan kemungkinan kesalahan yang lain.

Yang harus diperhatikan dalam pemakaian dan pemilihan kata dan jenis huruf yang akan digunakan :

1. Readability

Adalah suatu taraf yang dapat dimengerti dan dengan kerumitan dari kata maupun kalimat.

2. Memilih kata yang layak.
3. Penulisan kata dan kalimat.
4. Penggunaan alfabet yang standar.
5. Singkat dan penggunaan kata yang umum.
6. Kekonsistenan kata.
7. Penulisan kalimat dan pesan.

Permasalahan yang dijumpai pada pemakaian dan pemilihan kata dan jenis huruf adalah :

• Penggunaan jenis huruf yang tidak umum di dalam tampilan awal web JCC. Pengguna pada umumnya akan kesulitan membaca informasi yang diberikan JCC dengan maksud untuk memperkenalkan website yang sedang mereka kunjungi. Tampak seperti pada Gambar 1. 2


Gambar 1.2

• Situs ini merupakan situs berbahasa inggris. Dan sesuai dengan tujuan mereka untuk memperkenalkan ke masyarakat lokal maupun mancanegara.

Solusi untuk permasalahan di atas :

• Gunakan jenis huruf yang standar seperti jenis huruf sherif dan sans-sherif. Dianjurkan untuk lebih memilih jenis huruf sans-sherif.
• Ada baiknya jika situs ini juga disediakan versi bahasa Indonesia karena situs ini berada di Indonesia dan mungkin banyak orang Indonesia yang mengunjungi situs ini untuk lebih mengetahui informasi yang ada di dalamnya.

Button

Dapat dideskripsikan sebagai bentuk kotak, persegi panjang yang berisikan label
di dalamnya yang akan melakukan sebuah aksi. Label haruslah dengan teks, grafis
atau keduanya.
Permasalahan button yang dijumpai :

• Pengguna dibingungkan dengan diberikan tiga pilihan untuk memulai website JCC. Meskipun kelihatannya tampak jelas bahwa pengunjung akan masuk sesuai dengan kategori yang ada. Tampak seperti pada Gambar 1.3.
• Pengguna akan berpikir apakah tulisan tersebut hanya sebuah title atau button yang dapat di klik karena dari teks yang ditulis menyerupai sebuah title.
• Background dari button sama dengan background dari web dan tidak ada houver ketika kursor mengarah ke tulisan.

Gambar 1.3

Solusi untuk permasalahan di atas :

• Sebaiknya dibuat semua menjadi satu tampilan saja agar tidak membingungkan pengguna karena kenyataannya jika sudah mengunjungi berulang kali ketiga pilihan tersebut pengguna akan menyadari tidak terlalu ada perbedaan yang berarti yang menjadi pembeda dari ketiganya sebab yang berbeda hanyalah menu bar-nya saja ada yang tidak dimunculkan pada setiap pilihan yang tersedia.
• Sebaiknya tulisan dibuat dengan align rata tengah dan tidak memakai titik dua dan juga ditambahkan houver dengan warna berbeda dari teks link-nya.