INTERAKSI MANUSIA DAN KOMPUTER

ANALISA WEBSITE WWW.KLIKBCA.COM

NAMA

KASMIRUS BHIA

NPM

120210227

KELAS

132-IF118-MI

UNIVERSITAS PUTERA BATAM

KATA PENGANTAR

Puji syukur ke hadirat Tuhan Yang Maha Esa karena atas karunia-Nya, Penulis dapat
menyelesaikan Tugas Mandiri Interaksi Manusia dan Komputer
Tugas mandiri ini disusun untuk memenuhi tugas Interaksi Manusia dan Komputer. ini
adalah bentuk penerapan dari materi yang telah dipelajari, diajarkan , dan pembelajaran
langsung dari fakta atau implementasi nyata. Di samping itu, penulis juga berharap semoga
makalah ini mampu memberikan kontribusi dalam menunjang pengetahuan kami penulis pada
khususnya dan pihak lain pada umumnya.
Dengan terselesaikannya makalah ini, penulis mengucapkan terimakasih kepada semua
pihak yang telah membantu dan memberikan bantuan dalam pembuatan makalah ini.Penulis
menyadari bahwa makalah ini masih jauh dari sempurna. Oleh karena itu saran dan kritik yang
membangun sangat penulis harapkan demi kesempurnaan makalah ini.Semoga makalah ini
bermanfaat bagi semua.

Batam, 13 Juni 2014

Penyusun

PENDAHULUAN

Tugas analisa user interface (UI) pada website ini adalah agar dapat memenuhi tugas
mata kuliah Interaksi Manusia dan Komputer (IMK). Selain itu dapat mengetahui cirri-ciri
website yang baik dan kurang baik dan dapat membandingkan analisa yang dilakukan dengan
teori yang telah diterima.
Seperti yang kita ketahui bahwa web informasi yang beralamat www.klikbca.com adalah
salah satu website yang dibuat untuk informasi berupa online. Disini kami akan menganalisa
website ini dan akan menguraikan analisis yang sudah kami lakukan di web klikbca.com sebagai
bagian tugas dari kuliah kami.
PEMBAHASAN
kami menganalisa website informasi ini, dengan melihat enam prinsip yang ada dalam
materi Design Grafis pada mata kuliah IMK. Prinsip-prinsip Design Grafis yaitu :
1. Metaphor (Metafora)
Adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan
secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang
berkaitan.
Contoh : Metafora tampilan desktop.

2. Clarity (Kejelasan)
Adalah alasan yang kuat / masuk akal digunakannya setiap elemen yang berada
dalam suatu interface yang dibuat. Penggunaan yang sedikit akan lebih baik. Pada
tampilan web klikbca.com dari segi Clarity cukup baik karna tidak terlalu banyak
memasukan elemen yang tidak terlalu penting. Susunan halaman web klikbca.com yang
teratur dan disertai link-link yang jelas akan menjadi daya tarik kepada pengunjung.
Semua data dan informasi disusun agar terkemas dengan baik. Ini akan memudahkan
pengunjung untuk mendapatkan berbagai informasi yang diinginkan mereka. Para
pengunjung pasti akan kembali ke halaman web jika web tersebut dapat memenuhi apa
yang diinginkan.

3. Consistency (Ketetapan)
Adalah konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography, teks, dll.
Terdapat konsistensi yang baik dalam layar maupun antar layar. Dan harus selalu ada metafora
dimanapun juga. Setiap platform mungkin memiliki panduannya.
Tampilan website konsisten
Website ini termasuk konsisten, terlihat dari segi pewarnaannya. Penggunaan warna latar
belakang sama untuk setiap page, yaitu putih. Warna teks yang mendominasi pada setiap
halaman, yaitu hitam untuk indikasi link biru dan putih untuk selainnya (header, navigasi, dan
footer pengecualian). Website ini mengguanakan jenis huruf Calibri dengan ukuran tulisan yang
sama untuk setiap halamannya. Terlampir contoh yang dimaksud :

a. Warna
Warna merupakan salah satu elemen yang penting dalam tampilan sebuah situs.
Situs dengan pemilihan warna yang baik akan membuat pengakses nyamann dah
mempunyai kesenangan tersendiri pada saat mengakses situs dan menbaca isi dalamnya.
Halaman-halaman yang ada di situs klikbca.com. memiliki kekonsistensian dapat
di lihat yakni dalam hal. Pemberian warna background untik tiap halaman yang selalu
sama. Peletakan navigation bar yang sama untuk setiap halaman yaitu di tepi paling atas
dan paling bawah tiap-tiap halaman. Warna yang dominan putih mencerminkan warna
yang
baik dengan kombinasi huruf / teks hitam karena orang
yang
sekalipun buta warna dapat membaca isi dari informasi
yang ada di klikbca.com.
Latar belakang

Garis Tipis dan Teks

Garis Tebal dan Teks

Putih

Biru,Hitam,

Putih,Biru

b. Screen Resolution
Website klikbca.com menggunakan screen resolution 1012 x 4600 pixel dan web
bersifat rata tengah, sehingga pengguna yang mengguanakan screen resolution 800 x 600
pixel harus scrolling beberapa kali supaya bisa melihat semua halaman website. Lebih
baik pengembang menggunakann ukuran web yang dinamis. Lebar halaman didefinisikan
dengan menggunakan ukuran presentase. Cara ini lebih baik karena tidak bergantung
kepada resolusi computer.
c. Grafik
Teknologi terkini internet mengizinkan bukan saja teks malah grafik dipamerkan
didalam halaman web. Hal ini akan memperlihatkan keceriaan di dalam halaman web dan
membuatnya sekaligus tampak menarik. Pilihlah gambar yang dapat menyampaikan
maksud dan tidak membebani. Buatkan gambar yang kecil dan fast-loading karena
pengunjung tidak suka menunggu terlalu lama agar suatu tampilan muncul kesemuanya.
Untuk mengoptimakan gambar, gunakan gambar di dalam format 16 color. Menggunakan
icon dan gambar yang kecil dan relevan adalah pilihan terbaik terutama pada navigation
bar. Grafik bagi navigation bar akan muncul di setiap tampilan halaman web untuk
membolehkan proses load setiap tampilan lebih cepat dengan adanya chace. Kita juga
boleh merancang memberi pilihan kepada pengunjung yang ingin memlihat halaman web
di dalam versi teks saja untuk menghindari kelambatan.
d. Font

Dari segi penggunaan font tulisan tercermin web klikbca.com bertujuan untuk
member informasi karena menggunakan jenis tulisan Calibri yang biasa digunakan untuk
hal yang formal. Tetapi design web klikbca.com mencerminkan tujuan pengembang
untuk berbagi informasi berita melalui web ini dan ditambahkannya banner yang
menggambarkan ketertariakan sebuah isi dari informasi. Meskipun web ini tidak bersifat
komersial tapi bukan berarti di web ini tidak ada sesuatu yang menjadi menarik perhatian
pemgunjung. Hampir kebanyakan orang tahu klikbca.com media online.
e. Texk (Moving Text)
Pengembang menggunakan teks bejalan mungkin untuk menarik perhatian
pengguna atau membuat tampilan website lebih menarik perhatian pengguna. Di lain
pihak, pengguna biasanya menganggap bahwa teks berjalan merupakan sesuatu yang
tidak penting (iklan dan sejenisnya) sehingga diabaikan. Di dalam klikbca.com juga hal
itu dianggap tidak penting karena di dalam content sudah terdapat animasi text dari iklaniklan yang di pasang dengan menggunakan animasi yang interaktif. Pengguna teks
berjalan juga menyulitkan pengguna untuk mendapatkan informasi karena mereka harus
menunggu sampai semua teks ditampilkan. Jika ada informasi yang terlewat mereka
harus menunggu sampai teks berjalan looping kembali.

f. Bahasa
Bahasa yang digunakan pada web klikbca ini terdapat dua pilihan bahasa. Pada
pertama kali membuka website ini sudah dalam bentuk bahasa Indonesia, selanjutnya ada

pilihan untuk bahasa Inggris. Berikut tampilan contoh untuk mengubah ke bahasa Inggris
:

Logo dan Nama website

Logo dan nama website biasanya terletak di pojok kiri atas dan posisinya konsisten di
semua halaman. Logo dan nama website merupakan identitas utama yang di gunakan untuk
memberikan informasi kepada pengguna tentang web yang sedang mereka kunjungi. Website
klikbca.com memiliki logo dan nama website seperti tampilan berikut ini :

Link
Link biasanya digunakan oleh pengguna untuk pergi ke halaman lain
sebuah website. Link pada website ini dibuat berwarna biru di bagian body
dan huruf berwarna putih dan link-link tersebut ada yang diberi garis bawah
dan ada yang tidak, dan link tersebut diberikan popup yaitu ketika kita
menggeser kursor kita maka secara otomatis akan memeperbesar judul dari
link tersebut. Dibawah ini tampilan link di website klikbca.com :

Konten selalu di update

Analisis terhadap www.klikbca.com adalah cukup update. Website klikbca.com update
untuk artikel-artikel dan berita-berita seputar kegiatan yang dilakukan oleh pihak Bank BCA.
Database berita secara otomatis akan bertambah dan tergantikan dengan yang baru dalam waktu
yang ditentukan yaitu setiap hari.

home page, content page 1, content page 2

www.klikbca.com
4. Alignment (Perataan)

Untuk perataan dalam website klikbca.com menggunakan rata kiri kiri atas.

Dapat mengijinkan matauntuk menguraikan tampilan dengan lebih mudah.

5. Proximity
Item-item yang berkaitan ditampilkan bersama. Karena jarak yang jauh
mengimplikasikan bahwa tidak ada hubungan antar item-item tersebut.

Grids
Garis horisontal dan vertikal (tersembunyi) untuk membantu.
Mengalokasikan komponen-komponen jendela.

Meratakan konteks yang berkaitan.

Mengelompokan item-item secara logis.
Meminimalisasi banyaknya kendali, mengurangi kekacuan.

Interaktifitas kurang baik

Karena pada menu Q & A tidak terdapat form atau forum untuk nasabah mengirimkan feedback
(kritik dan saran) atau komentar.

Searching
Searching merupakan salah satu fitur yang harus ada jika website tersebut memiliki lebih besar
sama dengan 100 halaman. Fitur searching akan memudahkan pengguna untuk menemukan
informasi tertentu yang terdapat dalam website tersebut dengan mudah dan cepat. Di dalam
klikbca.com pengguna kata kunci dalam search box yang tersedia di website sehingga
menghemat waktu pengguna untuk browsing di dalam website. Fitur search terdapat di bagian
body website, sebaiknya fitur search terletak di pojok kanan, sehingga memudahkan pengguna
untuk menemukan fitur ini saat mengunjungi website. Search box terlalu pendek, panjangnya

hanya sekitar 20 karakter. Hal ini akan menyulitkan pengguna jika memasukkan kata kunci yang
panjang. Disarankan panjang box search adalah 27 karakter karena memenuhi 90% dari kata
kunci pengguna. Pada searching klikbca.com tidak adanya konektifitas ke layanan search angine
semacam google atau yahoo. berikut tampilan hasil search pada search klikbca.com :

6. Contrast (Keserasian Tampilan)

Membuat anda tertarik, memandu mata anda melihat keseluruhan interface. Keuntungan
dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface. Contrast
dapat digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men set item
yang paling utama. Item yang paling utama di beri highlight. Guanakan geometri untuk
membantu pengurutan.
Contoh :

Model Antar Muka (User Interface) Objek Aksi

Model sintaktik semantik dari kelakuan manusia digunakan untuk menggambarkan
pemrograman, manipulasi database, dan manipulasi langsung.
Rincian Sintaktik :
Harus sering diperbaharui dengan GUI menggantikan bahasa perintah, fokus pada manipulasi
langsung objek aksi, di hafal, tidak punya aturan jelas. Aspek sintaktik tidak dihapuskan tetapi di
minimalis.
Konsep Semantik :
Stabil di memori, tersusun rapi.
Hierarki antar muka objek dan aksi :
Contohnya : penyimpanan informasi pada komputer .
Objek antar muka :
File (baris, field, karakter, font, dsb). Direktori (nama, tanggal, penciptaan, dll).
Aksi antar muka :
Simpan (simpan file, back-up, mengganti nama, menimpa versi sebelumnya, dsb) hilangnya
sintaks. Konsep tingkat tinggi (mengedit file, membuka file).

Perkembangan teknologi di Indonesia tidak membuat website klikbca.com menggunakan

flash, multimedia dan videos. Website ini cukup ramah untuk pengguna yang tidak memiliki
aplikasi untuk membuat tampilan browser kompitibel dengan halaman web sebenarnya dan

pengguna yang menggunakan bandwith rendah tentu tidak perlu menuggu lama loading website
ini. Website klibca.com memiliki loading yang cepat karena website ini tidak menabahkan fiturfitur yang memerlukan bandwith yang tinggi jika pengguna ingin cepat melihat halaman
keseluruhan web mungkin untuk pengguna yang menggunakan bandwith rendah harus agak
mengggu untuk moving text di recent arcive link.
Website klikbca.com dibuat menggunakan HTML (Hypertext Markup Language), flash,
java script, PHP Hypertext Preprocessor yaitu bahasa pemrograman web server side.

KESIMPULAN

Kesimpulan yang dapat diambil dari analisis yang dilakukan adalah sebagai berikut :
Kekurangan yang terdapat dalam website klikbca.com yaitu :
Tidak terdapatnya search engine yang menyediakan untuk pencarian yang lebih luas.
Tidak memiliki ruang komen, sehingga tidak dapat melakukan feedback atau tidak
memiliki timbale balik yang informative.
Tidak adanya form atau saran dan kritik.
Website yang bagus umunya memiliki komponen :
Informasi yang disajikan menarik dan berbobot serta update.
Menarik dan fast loading.
Konsisten.
Navigator bar yang konsisten dan tidak menyesatkan.
Memiliki tampilan profil, sehingga situs dapat berkembang.
Peta site (site map) yang jelas.

Kriteria penilaian bagus tidaknya website yang paling utama adalah ada tidaknya kenyamanan
yang dirasakan oleh pengunjung website ini. Serta info yang diberikan website ini sudah
membantu oleh pengunjung atau belum.