Thursday, 13 April 2017

Desain User Interface Aplikasi E-Commerce

Growdhes

(Gambar 1)


Di postingan ini saya akan menjelaskan tentang desain user interface aplikasi e-commerce untuk platform mobile yang saya buat dan saya beri nama Growdhes, gambar diatas (Gambar 1) adalah tampilan dari splash screen aplikasi growdhes. Untuk tampilan beranda/home nya bisa dilihat di (Gambar 2). Kemudian untuk tampilan kategori bisa dilihat di (Gambar 3) dan tampilan detail produk bisa dilihat di (Gambar 4).


                            (Gambar 2)                                (Gambar 3)                                 (Gambar 4)


Tema
Tema pada aplikasi growdhes ini adalah fashion, growdhes yang saya desain ini adalah sebuah aplikasi belanja online yang menjual berbagai macam produk sepatu. Karena target audience untuk aplikasi ini adalah usia 17th keatas dan produk yang dijual adalah fashion sepatu, Jadi tema interface untuk aplikasi ini saya desain modern, simple, dan elegan.


Font
Di dalam desain UI growdhes ini saya menggunakan font Arial, font ini termasuk dalam jenis huruf sans serif. Font arial adalah font yang simple dan sangat mudah dibaca, terlihat tegas dan modern. User bisa membaca tulisan-tulisan yang ada di aplikasi dengan cepat.


Warna
Untuk warna disini saya menggunakan kombinasi warna hitam, putih dan abu-abu. Saya menggunakan warna tersebut karena, didalam aspek psikologi warna hitam itu bermakna mewah, kuat, elegan, kokoh dan canggih. Sedangkan untuk bagian background di antara konten saya menggunakan warna putih. Salah satu alasannya ialah supaya mata user bisa beristirahat tidak jenuh dan tidak membuat user bingung, karena yang dilihat oleh user disini ialah gabungan antara gambar dan text, maka dari itu saya menggunakan warna putih. Untuk makna positif psikologinya ialah suci, bersih, sederhana, damai, baik, dan disiplin. Sedangkan untuk warna abu-abu disini saya menggunakan nya karena warna ini cocok untuk di kombinasikan dengan warna hitam dan putih hingga terlihat simple, modern, dan elegan. Untuk makna positifnya abu-abu ini modern, cerdas, bersih, kokoh, masa depan, dan intelektual. Jadi pemilihan warna ini sangat sesuai dengan tema interface yang saya bangun.


Layout
Ini adalah langkah pertama saya sebelum mendesain aplikasi growdhes. Untuk layout home/beranda di bagian header sebelah kiri saya meletakkan desain logo kemudian di bagian kanan saya meletakkan button cari dan keranjang meletakkan logo, button cari dan keranjang di header tujuannya ialah agar mudah untuk dilihat oleh user. kemudian dibawah header saya meletakkan slider untuk produk-produk dengan penawaran harga yang khusus. Karena pada dasarnya mata akan lebih fokus di bagian-bagian atas. Setelah itu dibagian tengah saya meletakkan konten-konten untuk produk-produk baru. Dan di bagian footer saya meletakkan button home, kategori, favorit, dan profil. Bisa dilihat di (Gambar 5).


(Gambar 5)


Di Layout detail produk untuk bagian headernya tetap sama dengan yang ada di layout beranda/home. Kemudian dibawah header saya meletakkan slider gambar produk dengan besar supaya user bisa melihat produk/barang yang dia inginkan dengan jelas kemudian dibawahnya saya ikuti dengan informasi detail produk seperti nama produk, ulasannya, dan harganya. Kemudian dibawahnya lagi diikuti informasi detail stok produk/barang. Detail stok produk/barang disini ialah seperti informasi jumlah stok barangnya ada berapa, informasi jumlah barang yang sudah terjual, kemudian sudah berapa kali barang ini dilihat. Setelah itu di bagian footer ada button untuk kembai ke tampilan sebelumnya, saya meletakkan button kembali di footer bagian kiri tujuannya supaya user mudah menekan tombol kembali karena dekat dengan jari. Kebanyakan tombol kembali di aplikasi seperti ini biasanya diletakkan di bagian kiri atas, menurut saya pribadi itu sangat kurang mudah untuk di oprasikan karena letaknya terlalu jauh dari jempol kanan. Dan ada button beli di footer bagian kanan  yang menurut saya sangat mudah untuk di operasikan. Bisa dilihat di (Gambar 6).

(Gambar 6)



*Jika ada kritik, saran, pertanyaan, dan tanggapan dari pembaca silahkan berkomentar, bertanya, dan berdiskusi dengan sopan pada bagian komentar yang telah disediakan. Terimakasih

1 comment: