Sebagai pengantar, User
Interface Design adalah suatu bentuk komunikasi pengguna (user) dengan
komputer. User Interface menggambarkan bagaimana pengguna dapat berinteraksi
dengan komputer melalui tampilan antarmuka yang ada di layar komputer.
Desain User Interface yang akan saya bahas kali ini
adalah sebuah e-commerce barang elektronik yang bernama “Well Commerce”.
1)
Analisis Homescreen
Tema dari desain
interface ini adalah simpel dan informatif. Tidak menggunakan terlalu banyak
warna sehingga dapat dikatakan simpel, tetapi tetap menyajikan informasi
segeneral mungkin sehingga user dapat melihat informasi dalam 1 layar.
Dari bagian atas terdapat header dengan warna putih, dan
logo WellCommerce di sebelah kiri atas. Logo biasanya diletakan di kiri atas dikarenakan
bagian kiri atas adalah bagian yang pertama kali terlihat oleh layar, sehingga
logo adalah pembuka dari interface homescreen ini. Kemudian di sebelah kanan
terdapat tombol navigasi yang bersifat general dengan combo box. Apabila tombol
tersebut ditekan, maka akan menampilkan pilihan-pilihan di bawahnya yang lebih
spesifik sehingga memudahkan pengguna dalam mencari produk yang diinginkan
berdasarkan kategori tertentu. Dan di sebelah kanan atas terdapat tombol cart.
Di bawah header, terdapat pilihan jenis produk beserta Big Picture yang bisa
dislide, yang menampilkan produk-produk terbaik baik dari segi value maupun
kualitas. Perbandingan tombol dengan picture adalah 1:3 karena picturenya
diharapkan menjadi sorotan utama user ketika website dibuka. Di bawahnya,
terdapat pilihan-pilihan produk yang disajikan dalam bentuk row (baris per
baris), disajikan pula nama beserta harganya.
Font yang digunakan adalah Georgia dengan ukuran 12 untuk
paragraf dan 14 untuk Titlenya. Hal ini dikarenakan Georgia menyajikan tulisan
yang jelas dan tidak terlalu kaku agar tidak bosan dilihat oleh pengguna. Warna
layout yang digunakan adalah warna putih dikarenakan putih adalah warna default
dan dapat dipadukan dengan warna apa saja terutama hitam. Sehingga tidak akan
menyulitkan pengguna dalam membaca nama ataupun harga produk. Warna tulisan
untuk “promotion” adalah merah karena merah merupakan warna yang menarik
perhatian dan menimbulkan kesan waw. Untuk new item, digunakan warna hijau yang
melambangkan barang yang fresh dan sejuk untuk dilihat. Dan best seller
diberikan warna kuning karena kuning melambangkan warna kebaikan/good.
Untuk layoutnya, diberikan susunan komponen dengan
perbandingan 2:5. Dimana 2 mewakili bagian header dan headline news, dan 5
mewakili isi dari websitenya. Isi website dipilah menjadi sebuah persegi, yang
menampilkan maksimal 5 produk dalam 1 baris. Terdapat tombol See More untuk
menampilkan produk di kategori tertentu secara keseluruhan. Desain layout
seperti ini memungkinkan user untuk dapat melihat isi keseluruhan website tanpa
harus menscroll ke bawah terlalu banyak, sehingga dapat dikatakan simpel dan
informatif.
2)
Analisis Page Product
Halaman produk dapat diakses ketika sebuah produk diklik
dan akan menampilkan spesifikasi produk secara picture maupun teks. Dengan
komponen font, layout dan warna yang sama seperti homescreen, perbedaannya
terletak pada susunan layoutnya. Halaman produk memiliki perbandingan 1:1 untuk
layoutnya. Dimana setengah layar diisi oleh header, gambar produk secara besar
serta deskripsi singkat mengenai produk. Di sebelah kanan juga disediakan harga
dan pilihan untuk membeli. Dan setengah layar di bawah diisi oleh spesifikasi
details dari sebuah produk dan di sebelah kanan terdapat contact information
apabila terdapat kendala secara teknis dalam mengakses website tersebut. Di
bagian bawah juga terdapat opinion atau review, bagian ini diletakan di bawah
karena memang bagian ini hanya diakses apabila seseorang sudah tertarik pada
deskripsi atau spesifikasi yang dijelaskan sebelumnya.
Sekian analisa user interface dari website e-commerce
Well Commerce, tujuan dari tulisan ini adalah untuk memenuhi tugas dari mata kuliah
IMK (Interaksi Manusia dan Komputer).
Sumber :
Link tambahan :
