Perbandingan 2 aplikasi berdasarkan 8 golden rules & 6 key interface design

User Experience

User Experience Design atau yang biasa disebut UX Design adalah Proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan produk. Lebih mudahnya, UX Design adalah proses membuat sebuah website atau aplikasi yang dibuat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna.

User experience sangat dinamis, seiring perjalanan waktu persepsi yang dirasakan pengguna bisa berubah sejalan berubahnya lingkungan, kebiasaan dan nilai-nilai. Dalam konteks ini user experience yang kita bicarakan adalah bentuk interaksi antara manusia dan komputer (human-computer interaction (HCI)) yang meliputi website, aplikasi smartphone dan aplikasi desktop. User experience disini berkaitan dengan apa yang dirasa oleh pengguna yang berhubungan dengan kemudahanan, kenyamanan, efisiensi, kemanfaatan saat mereka menggunakan web, aplikasi smartphone dan aplikasi desktop

8 golden rules

No.	Konten	Elevenia	Blanja.com
1.	Strive for consistency	Pada website ini menerapkan prinsip consistensy yaitu pada header terdapat fitur pencarian produk dan berbgai menu kategori yang ketika berpindah halaman tidak berubah	Pada website blanja.com juga menerapkan prinsip consistensy yaitu pada header terdapat fitur pencarian produk dan cart, sign in, live Support, download app, dan kategori yang ketika berpindah halaman tidak berubah
2.	Cater to universal usability	Pada website terdapat fitur ganti mode ke versi mobile dan ganti bahasa, dan best seller  sehingga memudahkan pengguna untuk paham	Pada website ini juga terdapat fitur ganti bahasa, promo pilihan, hot product, sehingga memudahkan pengguna untuk paham ketika baru pertama kali berkunjung pada website ini
3.	Offer informative feedback	Pada website elevenia menerapkan prinsip feedback, pada fitur menu dan kategori ketika cursor di arahkan ke menu, teks menu kan berubah menu	Pada website blanja.com juga menerapkan prinsip ini ketika cursor di arahkan pada fitur kategori teks pada kategori akan berubah warna, dan ketika cursor di arahkan ke fitur chart terdapat notif “keranjang belanja saat ini kosong”.
4.	Design dialogs to yield closure	Pada web ini ketika menambahakan produk ke keranjang/cart ketika di klik terdapat notifikasi “Produk telah ditambahkan ke dalam Cart. Apakah ingin melihat Cart Anda?” untuk meyakinkan pengguna dalam memilih dan sebagai interaksi	Pada web blanja.com ketika akan memlih produk dan membelinya terdapat dialog untuk memilih warna produk terlebih dahulu.
5.	Prevent errors	Pada menu registrasi terdapat pengisian form dan ketika salah satu kolom form yang tidak terisi maka terdapat notifikasi eror untuk mengisi kolom semua form registrasi.	Pada web blanja.com pada menu login terdapat beberapa kolom form login, jika salah satu kolom tidak terisi maka terdapat pesan eror, “username dan password salah, mohon coba kembali”
6.	Permit easy reversal of actions	Pada fitur cart terdapat menu ubah kuantitas hitung ulang produk yang di pilih, ubah kurir, dan mencancel produk yang udah masuk ke dalam chart.	Pada fitur cart terdapat menu ubah jumlah produk dan mencancel produk yang udah masuk ke dalam chart.
7.	Support internal locus of control	Pada web ini terdapat menyediakan fitur seller office, my store, seller zone yang pengguna bisa mengatur informasi dan aktifitas yang ada di dalam fitur tersebut.	Pada web ini juga terdapat menu sign in untuk di gunakan penggna sebagai pengguna yang terdaftar member dan engguna bisa melakukan edit informasinya.
8.	Reduce short-term memory load	Pada web ini juga menerapkan prinsip ini, pengguna dengan sangat mudah ketika akan membeli suatu produk dengan adanya fitur recommended for you, new seller dan beberapa kategori yang populer, sehingga pengguna dengan mudah mengaksesnya	Pada web ini juga menerapkan prinsip ini, pengguna dengan sangat mudah ketika akan membeli suatu produk dengan adanya fitur promo pilihan, super deals, best seller dan kolom searchin produk sehingga pengguna dengan mudah mengaksesnya

6 Keys Interface Design

No.	Konten	Elevenia	Blanja.com
1.	Visibility	Pada laman web elevenia, tampilan yang disajikan sangat friendly sehingga user dapat memahami dengan jelas tampilan serta mapping yang disajikan tanpa merasa kebingungan.	User dapat mengerti dengan mudah karena kejelasan fisik serta mapping yang tersusun dengan rapih seperti menu yang disertai dengan icon sehingga user dapat mengerti fungsi yang terdapat dalam website tersebut.
2.	Feedback	Feedback yang diberikan oleh elevenia berfungsi dengan baik dalam arti setiap fungsi yang terdapat didalamnya dapat menampilkan aksi yang sesuai. Semua fungsi atau aksi yang diberikan bekerja dengan baik. Contoh : Ketika user memasukkan kata baju dalam fitur pencarian di elevenia, makan aplikasi akan merespon dengan baik yaitu menampilkan seluruh daftar serta kateri baju mulai dari pakaian wanita, pria, anak-anak, paaian olahraga dan lain sebagainya	Respon dari setiap tombola tau aksi yang berada pada website elevenia berfungsi dengan baik sehingga dapat memberikan feedback yang memuaskan pelanggan. Contoh : ketika user mengklik tombol cart yang terdapat pada bagian atas website blanja.com maka situs ini akan menampilkan daftar keranjang belanja yang telah dimasukkan/dipilih oleh user.
3.	Affordance	Contohnya yaitu icon love yang berarti yaitu isi dari wishlist yang telah user tambahkan atau masukkan ke dalam akun nya	Jika di akun blanja.com, affordance yang termasuk dalam hal ini yaitu icon yang menggambarkan suatu perangkat handphone yang berarti ketika user klik gambar itu, maka website tersebut akan menunjukkan perintah untuk mendownload aplikasi via mobile
4.	Constraint	contoh constraint yang terdapat pada website elevenia.co.id pada proses register adalah keterangan akan muncul ketika pengguna memasukkan suatu isian yang salah pada suatu field. Contoh : user sengaja memasukkan email dengan format yang salah yaitu hanya memasukkan huruf saja. Ketika user beralih pada field berikutnya, maka pesan untuk pencegahan error baru tampil. Jadi dalam hal ini, pencegahan error akan tampil setelah user melakukan suatu aksi.	Contoh constraint atau batasan yang terdapat pada website blanja.com salah satunya adalah pada saat user melakukan proses registrasi. Ketika user akan memasukkan atau mengisi field username, aplikasi menampilkan keterangan bahwa batas panjang yang digunakan adalah 5 hingga 35 karakter serta aturanlain yang tertera untuk memenuhi kriteria username yang seharusnya dipergunakan. Jadi pada aplikasi blanja.com, pesan untuk pencegahan error tampil sebelum user melakukan suatu aksi
5.	Mapping	Mapping yang digunakan pada web ini sama halnya dengan website ecommerce lainnya. Contohnya, terdapatnya fitur kategori yang menampilkan seluruh kategori belanja yang berada pada bagian kiri atas website e-commerce yang ketika user mengklik lihat kategori, maka akan menampilkan seluruh kategori secara menurun	Sama halnya dengan website e-commerce lainnya, mapping yang disajikan pada website blanja.com pun serupa. Yaitu terdapatnya fitur untuk melihat all category yang terdapat pada bagian kirri atas website yang ketika user memencet itu, makan seluruh kategori yang tersedia kan ditampilkan secara menurun
6.	Consistency	Terdapatnya fitur cart pada bagian kanan atas yang terdapat pada setiap halaman di website elevenia.com yang berisi list daftar keranjang belanja.	Pada website blanja.com juga serupa. Terdapatnya fitur cart pada setiap halaman.

Usability Design

Elevania 

-          Jika pada halaman utama ada review produk terdapat tombol lingkaran kecil jika user memindahkan cursor ke ikon buletan tersebut akan berpindah kekanan jadi user tidak harus memencet tombol buletan tersebut.

-          Disebelah kanan tampilan terdapat kotak hitam yang memiliki fitur wistlist,my view, dan back to top.fitur tersebut jika user mengklik akan loncat ke halaman lainnya

Blanja.com

-          Jika user meng-klik salah satu produk, di atas produk terdapat tulisan pilihan yang langkah-langkah user dari mulai halaman home hingga ke produk. Jadi user bisa memilih jika ingin kembali kemana.

-          Dibawah gambar produk terdapt ikon media sosial yang dapat menshare keberbagai media sosial yang user punya jika user memencet ikon tersebut akan dapat menshare ke berbagai media sosial tersebut.

User Experience

Elevania

-          Dalam Elevania terdapat fitur rating pada setiap produknya dari seller sehingga user dapat mengetahui berapa ratting jika ingin membeli produk.dan dalam website elevania terdapat menu kirim pesan sehingga user dapat berhubungan dengan seller lalu didalam website ini juga bisa ditambahkan ke favorite jadi produk tersebut tersimpan dikeranjang user.

Blanja.com

-          Dalam website Blanja jika user ingin membeli produk user harus registrasi dahulu jika belom punya id. Jika user sudah bikin id langsung akan muncul notifikasi bahwa telah selesai menyelesaikan registrasi dan bahwa user bisa berbelanja.

Continue

8 Golden Rules and 16 Prinsip UI (Studi kasus Elevenia)

1.       Strive for consistency

Strive for consistency pada web e-commerce elevenia bisa dilihat pada halaman home dan register yang tetap mempertahankan header dan icon elevenia

Gambar 1. Tampilan homepage

Gambar 2. Tampilan halaman register

2.       Cater to universal usability

Menu pemilihan Bahasa termasuk kedalam Cater to universal usability karena user bisa menyesuaikan Bahasa yang dimengertinya. Selain itu terdapat juga shortcut My Views yang berguna untuk melihat barang mana saja yang telah dilihat oleh user, Wishlist yang berguna untuk melihat barang mana yang masuk kedalam keinginan user, dan Back To Top untuk melihat halaman paling atas tanpa harus men-scroll mouse.

Gambar 3. Menu pemilihan bahasa

Gambar 4. Shortcut My Views, Wishlist, dan Back to Top

3.       Offer informative feedback

Salah satu Offer Informative feedback pada elevenia adalah ketika user menambahkan produk ke wishlist maka akan muncul pop-up notifikasi bahwa produk tersebut telah berhasil masuk kedalam wishlist.

Gambar 5. Pop-up notifikasi

4.       Design dialogs to yield closure

Elevenia sudah menerapkan prinsip ini, contohnya ketika user telah melakukan registrasi dan konfirmasi email, maka akan muncul pop-up notifikasi bahwa konfirmasi email sudah berhasil. Ini menunjukan bahwa proses registrasi sudah berhasil dan selesai.

Gambar 6. Notifikasi konfirmasi email

5.       Prevent error

Contoh prinsip ini diimplementasikan pada halaman registrasi, saat user memasukkan password tidak sesuai format, maka akan muncul feedback bagaimana format password yang benar .

6.       Permit easy reversal of actions

Prinsip ini diterapkan ketika user yang telah memilih barang untuk dibeli, ingin membatalkan barang tersebut. User dapat memilih menu hapus pada cart untuk membatalkan.

Gambar 7. Menu hapus cart barang

7.       Support internal locus of control

Pada elevenia terdapat menu untuk merubah tampilan web menjadi tampilan mobile, ini termasuk kedalam prinsip Support internal locus of control karena dapat mengatur tampilan sesuai preferensi user.

8.       Reduce short-term memory load

Penerapan prinsip ini terletak pada menu yang memiliki icon-icon, contohnya menu profile yang memiliki icon user, cart dengan icon keranjang, ini memudahkan user untuk mengenali system tanpa harus mempelajarinya secara berulang ulang

16 Prinsip User Interface Design

1.      Accessibility

Website Elevania dapat diakses dengan kalangan 17 tahun keatas karena terdapat transaksi yang menggunakan via bank transfer.

a.       Perceptibility : User dapat mengerti dengan mudah dengan masuk dihalaman utama karena akan ada beberapa pilihan category.jadi user akan dengan mudah memilih barang yang akan mau dibeli.

b.      Operability : Website Elevania dapat dioperasikan dengan mudah tanpa membuat user kebingungan.

c.       Simplicity : Website ini cukup simple karena user dapat memilih semua katagori barang didepan halaman utama tanpa harus masuk kehalaman selanjutnya.

2.      Aesthetically Pleasing

Website Elevania tidak menampilkan full color tapi justru memainkan warna-warna yang simple disini Elevania memainkan warna pada halaman utama berwarna putih dan beberapa font yang berwarna orange lalu dengan garis pembatas berwarna abu- abu.

3.      Availability

Di dalam Elevania terdapat banyak menu-menu utama yang tersedia diatas halaman utama website  dan menu kategori disamping kiri halaman website, agar dapat memudahkan user dalam mengakses link baru. setiap objek yang terdapat pada halaman nya dapat diakses dan tersedia page nya.

4.      Clarity

Dari situs Elevania terdapat banyak fungsi-fungsi yang didalam halaman utama tersebut memiliki fungsi yang jelas dan user dengan mudah dapat memahami fungsi tersebut karena dalam pemilihan kata untuk fungsinya cukup jelas dan user dapat mudah memahami. Tampilan textnya pun simple dengan memainkan warna putih dan hitam.

5.      Compatibility

Situs Elevania mempunyai banyak fitur-fitur tampilan karena Website ini bergerak di bidang e-comerce dan harus menampilkan banyak kategori-kategori produk. Fitur-fitur tersebut sesuai kebutuhan user dalam memilih, jika user memilih fitur electronic akan muncul kehalaman electronic tidak menampilkan halaman yang lain yang dapat membuat user kebingungan. Dihalaman utama akan banyak fitur yang akan memberitahu info kepada user tentang harga yang sedang promo/diskon dan sebagainya.alur dari perpindahan halaman 1 ke halaman berikutnya juga cukup mudah tidak ter-acak membuat user tidak kebingungan jika mengklik salah satu fitur.

6.      Configurability

Dalam website Elevania ini tidak dapat ditemukan prinsip uid karena tampilan web tidak dapat dikonfigurasi oleh user.

7.      Consistency

Dalam website Elevania ini bersifat konsisten karena dalam menjalankan aksi 1 ke aksi lainnya tidak berubah atau tetap sama dengan aksi sebelumnya dari segi text font dan warna pada tampilan website. Fungsi-fungsinya pun hampir sama semua dengan diarahkan berbagai kategori belanja yang mudah sehingga user tidak kebingungan dan akan mengetahui apa yang harus dilakukan.

8.      Control

Dalam website Elevania ini user dapat mengontrol sepenuhnya karena user dapat menentukan dia ingin melakukan apa, bagaimana cara menyelesaikannya dan dengan cara mudah untuk menyelesaikannya. Elevania sangat memanjakan user karena fast respons dalam berpindah halaman dan juga halaman yang tidak berubah seperti sama sebelumnya sehingga user dapat control dengan mudah sepenuhnya. Disini juga user dapat mencari informasi yang dibutuhkan dengan mudah karena terdapat fitur search dan lainnya sehingga user mampu mencapai hasil yang diinginkannya.

9.      Directness

Dalam website Elevania ini mempermudah user dalam menyelesaikan masalahnya atau informasi yang user butuhkan contohnya jika user mencari pakaian pria dan user mengklik pilihan pakaian pria website akan menampilkan aksi ke halaman pakaian pria semua. Jadi sangat membantu untuk menyelesaikan tugas user.

10.  Efficiency

Dalam website Elevania ini efisien karena user dapat memperkecil pergerakkan mata dan juga tangan dalam pengoperasian karena jalur navigasi yang singkat dan website ini hanya memiliki halaman tergantung sesuai kebutuhan user dalam memilih informasi yang dia inginkan. User juga akan dimudahkan dengan tersedianya berbagai macam tools dalam mencari informasi dan mengumpulkan informasi tersebut.

11.  Familiarity

Dalam website elevenia menggunakan prinsip familiarity sebagai contoh mengunakan logo elevenia di pojok kiri dan menggunakan kategori supaya dapat memudahkan pengguna mencari barang yang sesuai dengan kategori, menampilkan logo di dalam web sehingga lebih mudah di kenal .

12.  Flexibility

Pada web elevenia menggunakan prinsip UI flekxibility yaitu dengan membuat tombol pada logo elevenia ketika di klik nanti akan tampil ke layer home, dan terdapat pilihan menggunakan metode dalam menggunakan android jadi tidak hanya bisa di akses melalui web saja tapi smartphone android pun bisa.

13.  Forgiveness

Pada website elevenia sudah menerapkan prinsip forgiveness yaitu dengan menyediakan halaman bantuan sehingga memudahkan website tersebut dalam menangani kesalahan.

14.   Obviousness

Website elevenia sudah menggunakan prinsip obviousness karene pada tampilan awal terdapat kategori dan klom pencarian memudahkan pengguna untuk paham yang akan di lakukan oleh penguna.

15.  Immersion

Pada web elevenia sudah menerapkan prinsip Immersion yaitu ketika pada tampilan awal terdapat tampilan seperti barang atau iklan promosi sehingga pengunjung dapat melihat barang yang dia inginkan.

16.  Operability

Disini elevenia juga menggunakan pinsip operability karena menggunakan perangkat mobile sehingga memudahhkan pengguna ketika mengakses melalui handphone.

Continue