Merancang User Interface Berbasis Web E-commerce

Diajukan Sebagai Syarat Untuk Memebuhi Tugas Pertemuan 9

Disusun Oleh :
Nama

:Roy Rinaldi

NIM

:41514110130

Fakultas

: Ilmu Komputer

Jurusan

: Teknik Informatika

Mata Kuliah : Interaksi Manusia dan Komputer

Semester

: III (Tiga)

Dalam membangun sebuah layanan Web tentunya yang pertama di perhatikan atau dilihat
oleh pengguna adalah tampilan awal atau antarmuka nya, oleh sebab itu para developer web
bukan hanya melihat dari sisi scripting saja melainkan dari sisi UI (User Interfaces).
kemudian bagaimana cara membuat pengguna merasa nyaman dalam melihat antarmuka
sebuah halaman web..? dalam hal ini penulis akan membahas bagaimana cara merancang user
interfaces berbasis web e-commerce atau web jual beli.
Pengertian User Interface
User interface adalah cara program dan user berkomunikasi. Istilah user interface atau
interface kadang-kadang digunakan sebagai penggati istilah HCI (Human Computer
Interaction). HCI (Human Computer Interface) adalah semua aspek dari interaksi pengguna
dan computer, tidak hanya hardware. Semuanya yang terlhat dilayar, membaca dalam
dokumentasi dan dimanipulasi dengan keyboard (atau mouse) merupaka bagian dari user
interface. User Interface berfungsi untuk menghubungkan atau penterjemah informasi antara
pengguna dengan system operasi, sehingga computer dapat digunakan. Dengan demikian,
user interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari
perangkat keras dan lunak yang membentuk pengalaman bekomputer. Use interface dari sisi
software bias berbentuk Graphical User Interface (GUI) atau Command Line Interfae (CLI),
sedangkan dari sisi hardware bias berbentuk Aplle Desktop Bus (ADB), USB, dan fire wire.
Konsep User Interface
Mengkonsep user interface secra benar tidaklah mudah. Terdapat begitu banyak aspek yang
pelu diperhatikan. User interface akan mengacu pada beragam aplikasi teknologi mulai dari
electronic display, software aplikasi computer,aplikasi web, aplikasi mobile,hingga aplikasi
kiosk Informasi public. Kioks adalah peralatan sistem informasi publik yang dirancang
sedemikian rupa yang ditujukan untuk beragam kondisi user, baik secara usia, gender, latar
belakang kultural, tingkat pemahaman dan pendidikan bahkan kondisi keterbatasan fisik yang
berbeda.
Tehnik antar muka /interface
Terdapat tiga teknik antar muka / inter face:
1. Linguistic styles
2. Key modal styles
3. Direct manipulation styles

LINGUISTIC STYLES
Linguistic styles adalah penyampaian aksi melalui bahasa yang dimengerti oleh computer.
Cirri teknik ini antara lain:

Masukan aksi melalui papan ketik alphabet yang ditulis atau diketik.
Bahasa yang dimengerti oleh computer merupakan bagian kecil dari bahasa manusia
Adanya aturan penulisan (syntax) dan semantic untuk menyatakan perintah

KEY MODALS STYLE

Key Modals Style adalah penyampaian aksi melalui penekanan tombol-tombol yang
deprogram sebelumnya untuk menjalankan fungsi-fungsi. Cir teknik ini antara lain:

Masukan aksi melalui tombol fungsi atau tombol alphabet

Instruksi langkah demi langkah
Digunakan dalam system berjalan

DIRECT MANIPULATION STYLE

Direct Manipulation Style adalah penyampaian perintah melalui manipulas objek tertentu.
Cirri teknik ini antara lain:

Ditampilkannya objek untuk interaksi pengguna

Ditampilkannya penunjuk untuk memanipulasi objek
Perintah diterapkan langsung pada objek
Respon seketika pada fungsi objek

Ada beberapa hal yang perlu di perhatikan dalam merancang tampilan web e-commerce
yaitu :
1.
2.
3.
4.
5.
6.

Pemilihan font
Pemilihan warna
Tata letak konten
Pemilihan gambar konten
Tata letak menu
Penggunaan Icon web

Pemilihan font
Font atau tulisan pada halaman web berpengaruh sekali kepada pengguna umum dalam
rancangan web sebaiknya hindari penggunaan tulisan yang kurang enak dilihat dan kurang
pantas jika disajikan pada halaman web e-commerce
seperti contoh berikut (Mengambil situs bukalapak sebagai contoh) :

penggunaan font "Lucida grande" pada iklan tersebut bagi pengunjung web akan terkesan
rapi dan terkesan menarik bagaimana jika font tersebut dirumah menjadi font "Magneto"

tentu pengunjung web akan kesulitan untuk membaca dan enggan membaca iklan tersebut
kemudian penggunaan font pada menu

Pada menu harus menggunakan font yang terlihat lembut serta tidak kaku tapi terlihat
mencolok agar pengunjung begitu membuka sebuah halaman web, akan langsung tertuju
pada menu kemudian membuat pengunjung merasa termudahkan, tidak perlu mencari menu
dimana. tapi apa jadinya jika menu menggunakan font yang tekesan tidak tegas seperti contoh
menggunakan menu "Arial"

Bagaimana perbedaannya? tentunya pengunjung lebih nyaman ketika melihat penggunaan

font yang pertama daripada penggunaan font arial pada menu, menu menjadi lebih kecil serta
kurang menarik minat pengunjung.
alasan itulah mengapa font dianggap sebagai komponen dalam web yang sangat penting,
disisi lain agar pengguna betah dalam mengunjungi web tersebut, juga agar web terlihat rapi
dan elegan
Pemilihan Warna

Pada level ini developer dituntut untuk memilih warna yang sesuai dengan konten serta
melihat dari sisi pengunjung juga apakah yang mengakses situs ini hanya orang tertentu atau
semua orang (umum) kemudian di sesuaikan warna yang pas untuk level web public, tidak
banyak warna serta tidak mencolok dan gunakan warna yang netral. Seperti contoh :

pada halaman web tersebut terlihat bahwa background pada konten menggunakan warna
putih yang membuat halaman menjadi hidup dan tidak merusak pandangan apabila
antarmuka tersebut menggunakan warna yang mencolok akan sangat mengganggu user
seperti contoh sebagai berikut :

bandingkan dengan antarmuka yang sebelumnya, tentu lebih nyaman dilihat adalah
antarmuka yang pertama, sebab penggunaan warna pada halaman web juga mempengaruhi
psikis pengguna, coba kita ke halaman web yang background nya berwarna terang, tentu kita
tidak akan bertahan lama untuk mengunjungi halaman web tersebut, bisa jadi pelanggan kita
bisa kabur karena tampilan web yang terlalu mencolok dan tidak nyaman untuk di lihat.
Tata Letak Konten

Posisi sebuah merupakan pokok dalam pembuatan antarmuka sebuah web sebab, konten
merupakan inti utama atau isi pada halaman web yang pasti dibaca oleh pengunjung. oleh
sebab itu tata letak konten perlu diatur senyaman mungkin, jangan malah membuat konten
susah untuk di pahami karena tata letak yang kurang pas. contoh peletakan konten yang
kurang efektif bagi pengunjung web

pada kasus ini peletakan konten tidak beraturan, karena margin rata kiri dan tentu terlihat
gepeng atau cembung kemudian perhatikan juga pada iklan, iklan menjadi tidak beraturan
serta kurang enak untuk dilihat dan membuat pengunjung tidak tertarik dan menimbulkan
efek yang kurang nyaman. Lalu bagaimana tampilan yang efektif dan nyaman ....?
seharusnya sebuah web sudah menerapkan teknik 960 grid system, 960 grid system
merupakan alat untuk membuat lay-out website. 960 artinya lebar halaman web sebesar 960
pixels. Lebar tersebut di zaman sekarang sudah bagus mengingat minimal, display sekarang
menggunakan resousi lebar sebesar 1024 pixels. Bahkan kini sudah banyak monitor yang
menggunakan resolusi lebih luas lagi yakni 1280 pixels. Kalau dulu mungkin maximal lebar
akan di bawah 800 pixels karena banyak monitor yang menggunakan resolusi 600800
pixels. Namun kini rasanya sudah jarang ya yang menggunakan resolusi itu kecuali untuk
kepentingan tertentu.

Jadi ukuran lebar 960 pixels kemungkinan besar akan muat di monitor pengguna komputer
zaman

sekarang.

berikut contohnya :

serta

membuat

tampilan

lebih

nyaman

jika dibandingkan dengan gambar sebelumnya, antarmuka ini lebih rapi dan lebih nyaman
dilihat konten tersusun dengan rapi serta jarak antar konten tidak terlalu jauh dan tidak terlalu
dekat sangat efektif untuk user. Pada zaman sekarang pengembangan halaman web sudah
dibilang lebih modern dan lebih efisien banyak framework - framework yang dikembangakan
guna memudahkan struktur dan perancangan pada halaman web.
Pemilihan gambar pada konten
Sebuah web e-commerce tentu harus mempunyai visual konten yang menarik , agar bisa
menggaet pengunjung, tampilan visual menjadi yang utama oleh sebab itu gambar pada
konten web tentu harus yang menarik dan asli , atau bila perlu ada sumber gambarnya agar
pengunjung percaya

Tata letak menu

Peletakan sebuah menu juga penting, karena sebuah menu harus jelas serta mudah dimengerti
pengunjung web, menu yang efektif adalah peletakannya tidak acak - acakan serta tidak

membuat bingung pengunjung web dan mudah dalam pencarian. Berikut adalah menu yang
benar.

pada gambar tersebut peletakan menu terlihat rapi serta mudah dipahami dan dimengerti,
kemudian sebaliknya menu yang salah akan sulit dimengerti oleh pengunjung, sebagai contoh

letak menu tidak beraturan serta kurang nyaman jika dilihat. Kemudian Penulisan menu juga
mewakili konten yang ada pada web tersebut tidak mungkin web e-commerce terdapat menu
yang tidak berkaitan dengan layanan tersebut.
Penggunaan Icon web
Icon web merupakan gambar kecil yang mewakili sebuah perintah, penggunaan icon web
yang tepat sangat penting, mengingat tidak semua menu dalam web hanya berupa tulisan
saja, perlu di beri sentuhan design yang baik guna meningkatkan pengunjung web serta
membuat efek nyaman pada pengunjung. Pada icon web juga perlu di tampilkan alternative
teks ketika pointer mengarah pada icon tersebut agar pengunjung mengetahui fungsi icon
tersebut untuk apa.

contoh pada gambar di atas ada icon troli belanja yaitu icon yang mewakili menu apa saja
barang yang sudah kita beli atau masuk ke daftar beli kita, coba jika pada icon tersebut tidak
ada alternative teks nya maka sebagian pengunjung web akan bingung apakah fungsi icon
tersebut.