Merancang User Interface Berbasis Web E-commerce Diajukan Sebagai Syarat Untuk Memebuhi Tugas Pertemuan 9 Disusun Oleh : Nama :Roy Rinaldi NIM :41514110130 Fakultas Jurusan : Ilmu Komputer : 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.