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. Pemilihan font

2. Pemilihan warna

3. Tata letak konten

4. Pemilihan gambar konten

5. Tata letak menu

6. 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 600×800

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. serta membuat tampilan lebih nyaman

berikut contohnya :

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.