Anda di halaman 1dari 31

ANALISIS E-COMMERCE

(LAZADA, ELEVENIA, dan ZALORA)







KELOMPOK 7 :
I GUSTI BAGUS HADI WIDHINUGRAHA (1208605010)
NI PUTU SINTYA DEWI (1208605007)
I GEDE SETYAHADI PARAMARTHA (1208605025)
KADE NYOMAN ADHISURYA YOGA PRIANGAN (1208605031)
I GM SURYA A DARMANA (1208605039)







JURUSAN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS UDAYANA
2013

2

DAFTAR ISI

1. LAZADA ............................................................................................................................ 4
1.1. Useability ................................................................................................................. 4
1.1.1. Layout ................................................................................................................ 4
1.1.2. Menu ................................................................................................................. 4
1.1.3. Design ................................................................................................................ 6
1.2. User Experience ....................................................................................................... 7
1.2.1. Bagaimana User Berinteraksi Saat Melakukan Order ....................................... 7
1.2.2. Pengalaman User dalam Menggunakan Situs lazada.co.id............................. 10
1.2.3. Tingkah Laku User Terhadap Menu yang Ada ................................................ 11
1.3. System Compatibility ............................................................................................. 11
1.3.1. Respon User Interface lazada.co.id Versi Desktop ......................................... 11
1.3.2. Respon User Interface lazada.co.id Versi Mobile ........................................... 12
1.3.3. Deskripsi Layout, Menu, dan Design untuk Desktop dan Mobile ................... 12
2. ELEVENIA ....................................................................................................................... 13
2.1. Useability ............................................................................................................... 14
2.1.1. Layout .............................................................................................................. 14
2.1.2. Menu ............................................................................................................... 15
2.1.3. Design .............................................................................................................. 18
2.2. User Experience ..................................................................................................... 18
2.2.1. Bagaimana User melakukan interaksi saat melakukan order ......................... 18
2.2.2. Pengalaman User dalam Menggunakan Situs lazada.co.id............................. 20
2.2.3. Tingkah Laku User Terhadap Menu yang Ada ................................................ 20
2.3. System Compatibility ............................................................................................. 20
2.3.1. How the respons of the UI for the desktop .................................................... 20
2.3.2. How the respons of the UI for the mobile gadget .......................................... 21
2.3.3. Describe the layout, menu or design for desktop and mobile ....................... 21
3. ZALORA .......................................................................................................................... 22
3.1. Useability ............................................................................................................... 23
3.1.1. Layout ( Tata Letak ) ........................................................................................ 23
3.1.2. Menu ............................................................................................................... 24
3.1.3. Desain .............................................................................................................. 26
3.2. User Experience ..................................................................................................... 27
3

3.2.1. User berinteraksi ............................................................................................. 27
3.2.2. Pengalaman pengguna .................................................................................... 28
3.2.3. User preference .............................................................................................. 28
3.3. System Compatibility ............................................................................................. 28
3.3.1. How the respons of the UI for the desktop .................................................... 28
3.3.2. How the respons of the UI for the mobile gadget .......................................... 29
3.3.3. Describe the layout, menu or design for desktop and mobile ....................... 30















4

1. LAZADA
Lazada.co.id merupakan salah satu situs belanja online yang popular di
Indonesia. Sebagai toko online, lazada.co.id menjual berbagai macam produk
yang dibagi ke dalam berbagai macam kategori yang berfungsi untuk
memudahkan user dalam melakukan pemilihan dan pembelian produk. Berikut ini
adalah hasil analisis yang kami lakukan pada situs lazada.co.id dari segi interaksi
manusia dan komputer yang dibagi kedalam 3 kategori, yaitu :
1.1. Useability
1.1.1. Layout
Berikut adalah tampilan utama dari lazada.co.id

Dapat dilihat bahwa desain dari lazada.co.id tertata dengan baik. Pada bagian
kiri merupakan kategori dari produk yang dijual. Dan barang-barang sesuai
kategori yang dipilih user akan dimunculkan pada bagian tengah sehingga user
akan lebih terfokus kepada barang-barang tersebut. Pada bagian kanan merupakan
menu informasi dan tips tentang berbelanja di situs tersebut.
1.1.2. Menu
Pada bagian atas halaman lazada.co.id terdapat menu sebagai berikut

Pada menu bagian atas terdapat menu lazada.co.id, menu pencarian, menu
troli, menu customer care, menu status order, menu login & daftar. Dan pada
5

menu ini lebih menonjolkan pada bagian pencarian produk, terlihat jelas bahwa
pada bagian tersebut lebih besar darpida bagian yang lainnya.
a. Menu lazada.co.id berfungsi untuk membuka situs home dari lazada.co.id.
b. Menu pencarian berfungsi untuk melakukan pencarian terhadap barang-barang
yang ada di dalam lazada.co.id.
c. Menu troli merupaka menu yang berisi tentang barang-barang yang telah
dipesan namun belum dilakukan transaksi pembayaran.
d. Menu customer care berisi tentang informasi dan tips tentang berbelanja di
lazada.co.id.

e. Menu status order berisi tentang status dari barang yang telah dibeli, untuk
melihat status tersebut user harus memasukkan nomor pemesana dan email dari
user.

f. Menu login & daftar berfungsi untuk melakukan login bagi user yang telah
memiliki akun dan pendaftaran bagi user baru.
6



Pada bagian kiri halaman ini terdapat menu kategori. User hanya perlu
mengarahkan kursor ke kategori yang diinginkan maka barang-barang sesuai
kategorinya akan tampil pada bagian tengah.

1.1.3. Design
Tampilan desain dari situs lazada.co.id ini sederhana. Penggunaan warna latar
putih tidak mengganggu user dalam melihat content yang ditampilkan. Walaupun
terlihat penuh namun penataannya tersusun dengan rapi sehingga user dapat
melihat dan menikmati dengan nyaman.

7

1.2. User Experience
1.2.1. Bagaimana User Berinteraksi Saat Melakukan Order
Untuk melakukan order dalam situs lazada.co.id sama seperti took online
pada umumnya. User dapat dengan mengarahkan kursor ke kategori dalam menu
kategori produk yang diinginkan, kemudian user akan dapat memilih produk apa
saja yang akan diorder. Misalkan seorang user ingin membeli sebuah handphone,
maka user hanya perlu mengarahkan kursor ke kategori handphone & tablet dalam
menu kategori.

User juga dapat mengklik menu tersebut untuk membukanya dalam halaman
yang lebih spesifik lagi.

8

Pada halaman ini akan tampil lebih spesifik tentang produk dengan kategori
handphone & tablet. User dapat men-scroll ke bawah untuk mencari barang yang
diinginkan atau memilih menu pada bagian sebelah kiri untuk melakukan
pencarian yang lebih spesifik lagi.
Misalkan user ingin membeli Nokia X Dual Sim 4 GB, maka user
mengarahkan kursor ke Nokia X Dual Sim 4 GB dan gambar akan muncul tulisan
BELI SEKARANG. User dapat mengklik BELI SEKARANG tersebut atau
mengklik Nokia X Dual Sim 4 GB untuk melihat detail dari barang tesebut.

Apabila user mengklik Nokia X Dual Sim 4 GB maka user akan dibawa ke
halaman baru yang beri detail dari Nokia X Dual Sim 4 GB. Selain terdapat detail
harga, juga terdapat detail produk, spesifikasi produk, dan ulasan produk yang
membantu user lebih mengenali barang yang akan dipesan.
9


Apabila user mengklik BELI SEKARANG maka akan muncul item, harga,
kuantitas, serta subtotal harga seperti gambar di bawah. Item tersebut juga akan
langsung dimasukkan ke dalam menu troli. User kemudian dapat memilih
melanjutkan ke pembayaran atau menutup tampilan tersebut untuk melnjutkan
berbelanja.

Jika user langsung melanjutkan pembayaran maka akan muncul tampilan
seperti di bawah. Langkah pertama user diharuskan untuk login terlebih dahulu.
Langkah kedua adalah pengisian alamat dari user atau tujuan pengiriman barang
yang di pesan. Di bagian kanan ditampilkan kembali detail dari barang yang
dipesan.
10


Langkah ketiga adalah metode pembayaran yang akan dilakukan user.
Terdapat beberapa pilihan metode yaitu bayar di tempat, kartu kredit, bank
transfer, dan BCA KlikPay. Di bagian kanan, selain ditampilkan detail barang
yang dipesan, ditampilkan juga tujuan pengiriman yang diisi oleh user
sebelumnya.

1.2.2. Pengalaman User dalam Menggunakan Situs lazada.co.id
Dari segi pengalaman user, user tentunya akan lebih nyaman dalam
melakukan pencarian produk dan transaksi produk. Selain karena desain yang
11

menarik, user juga dibantu dengan serta banyak kategori yang dapat dipilih atau
dengan fitur pencarian. Sehingga user dapat dengan mudah menemukan produk
yang diinginkan. Pada proses transkaksi juga user tidak akan frustasi karena
proses transaksi yang dilakukan sangat sederhana dan terdapat kalimat-kalimat
bantu yang membantu user dalam mengisi informasi yang dibutuhkan dalam
proses transaksi.
1.2.3. Tingkah Laku User Terhadap Menu yang Ada
Dalam situs lazada.co.id ini, menurut kami menu yang paling sering
digunakan oleh user adalah menu pencarian, menu kategori, menu troli, dan menu
login & daftar. Karena menu pencarian dan menu kategori merupakan menu untuk
melakukan pencarian atau penggolongan produk sesuai yang diinginkan oleh user.
Menu troli juga digunakan user untuk melihat produk apa saja yang akan dibeli
oleh user. Sedangkan menu login & daftar digunakan oleh user karena untuk
melakukan sebuah transkasi, user harus login terlebih dahulu.
1.3. System Compatibility
1.3.1. Respon User Interface lazada.co.id Versi Desktop
a. Perubahan gambar kursor saat kursor diletakan pada tulisan atau gambar yang
dapat memunculkan halaman baru.
b. Munculnya beberapa pilihan menu saat kursor diarahkan ke beberapa tempat
atau text, menu tersebut akan muncul tanpa harus text tersebut di klik terlebih
dahulu.
c. Adanya menu pencarian pada menu utama yang digunakan untuk mencari jenis
produk, ataupun brand. Respon UI yang terdapat pada menu pencarian ini
berupa saran-saran nama dari produk ataupun brand yang mirip atau
bersesuaian dengan kata yang diketikkan di dalam kotak search tersebut
d. Pada menu kategori tampilan produk akan berubah-ubah sesuai dengan arahan
kursor ke pilihan kategori dalam menu kategori tersebut. Ini dapat membantu
user melihat beberapa produk sesuai kategori tanpa harus mengkliknya.
e. Menu utama pada setiap halaman akan terus ada di atas halaman anda
walaupun halaman tersebut anda scroll ke bawah, menu utama akan tetap
terlihat dan berada di atas tampilan anda. Menu utama yang terus tampil ini
berguna untuk memudahkan user jika ingin berganti menu.
12

f. Saat sudah memilih produk dan mereview produk akan terdapat respon UI.
Respon tersebut berupa gambar yang lebih detail saat cursor diarahkan pada
produk yang kita review.

1.3.2. Respon User Interface lazada.co.id Versi Mobile
a. Hampir sama seperti pada desktop, pada menu utama terdapat menu pencarian
yang dilengkapi saran produk ataupun brand saat kita mengetik pada menu
tersebut.
b. Pada mobile, respon UI seperti pergantian halaman dilakukan dengan cara
mengetuk layar pada perangkat mobile tersebut.
c. Pada saat scroll ke bawah, akan terdapat tanda panah ke atas pada pojok kanan
bawah di tampilan. Tanda tersebut berguna untuk langsung kembali ke atas
tanpa harus scroll berulang kali.
d. Terdapat gambar yang menunjukan menu utama pada bagian pojok kiri atas.
Respon UI nya adalah jita gambar tersebut di ketuk maka akan muncul pilihan
menu utama, menu utama yang disembunyikan ini bertujuan untuk menghemat
atau meminimaliskan tampilan

1.3.3. Deskripsi Layout, Menu, dan Design untuk Desktop dan Mobile
a. Deskripsi Layout, Menu, dan Design untuk Desktop
a) Layout
Layout dari versi desktop sangat lengkap dan tertata dengan baik. Pada
bagian kiri merupakan kategori dari produk yang dijual. Dan barang-barang
sesuai kategori yang dipilih user akan dimunculkan pada bagian tengah
sehingga user akan lebih terfokus kepada barang-barang tersebut. Pada
bagian kanan merupakan menu informasi dan tips tentang berbelanja di situs
tersebut.

b) Menu
Menu-menu pada versi desktop sangat lengkap dan sangat terlihat, jadi
sangat mudah untuk ditemukan. Menu-menu tersebut terutama menu utama
selalu berada di bagian atas dari layar user, jadi user sangat mudah jika ingin
13

memilih menu-menu lain. Banyak menu yang disediakan pada versi desktop
ini, menu-menunya juga sangat mendetail dan peletakannya tepat, seperti
menu utama terletak di bagian atas dan berukuran lebih besar dari pada
menu-menu pendukung lainnya.
c) Design
Design dari versi desktop ini sangat bagus dan menarik. Pada versi desktop
menampilkan gambar yang berukuran sedang dengan warna-warna yang
tidak terlalu mencolok serta tulisan-tulisan informasi tersusun rapi di bawah
gambar-gambar tersebut, sehingga user tidak merasa bosan saat
menggunakan situs ini.
b. Deskripsi Layout, Menu, dan Design untuk Mobile
a) Layout
Jika dibandingkan dengan layout dari versi desktop, layout versi mobile
sangat minimalis, lebih sederhana, lebih mengutamakan keefektifan atau
keefisienan penggunaan layar. Layout versi mobile tidak selengkap versi
desktop karena versi mobile merupakan versi minimalisnya dari versi
desktop, jadi versi mobile tidak perlu terlalu lengkap tetapi hanya berisikan
hal-hal yang penting saja.
b) Menu
Menu-menu pada versi mobile hanya berisikan menu-menu yang penting
saja. Menu ini juga terkesan disembunyikan dengan tujuan keefektifan layar
dan keefisienan layar.
c) Design
Design dari versi mobile ini sangat efisien serta minimalis namun tetap
menarik, semua halaman baru biasanya diwakilkan dengan gambar.



2. ELEVENIA
Elevenia.co.id merupakan salah satu situs belanja online yang mulai
dibuka pada tanggal 1 Maret 2014. Elevenia dipimpin oleh James Lee yang
14

menjabat sebagai CEO. Elevenia menyediakan 600.000 produk yang dijual oleh
sekitar 7.000 penjual. Sebanyak 90 persen lebih penjual merupakan usaha kecil
menengah, baik korporasi maupun perorangan (data Maret 2014).
Elevenia sendiri merupakan perusahaan patungan antara XL dengan SK
Telecom Planet, Korea Selatan. Perusahaan patungan ini diberi nama PT XL
Planet dan didirikan 11 Juli 2013 lalu. Kedua perusahaan bersinergi dan
membangun Elevenia dengan komposisi investasi 50-50.
Ada delapan kategori produk yang ditawarkan, yakni fesyen, kecantikan
dan kesehatan, bayi dan anak, rumah, gadget dan komputer, elektronik, hobi,
layanan dan makanan. Untuk pilihan pembayaran, Elevenia menyediakan
beberapa pilihan, mulai dari pembayaran online, transfer antar bank, pembayaran
melalui ATM dan juga kartu kredit.
Elevenia bekerja sama dengan Visa, Bank Mandiri, Bank BCA dan juga
Bank Danamon. Sedangkan untuk jasa pengiriman, kami sudah bekerjasama
dengan JNE. Elevenia dapat diakses melalui aplikasi yang tersedia untuk
perangkat Android dan iOS.
Berikut ini adalah hasil analisis yang kami lakukan pada situs elevenia.co.id
dari segi interaksi manusia dan komputer yang dibagi kedalam 3 kategori, yaitu :
2.1. Useability
2.1.1. Layout
Berikut ini adalah tampilan utama dari elevenia.co.id
15


Dilihat dari design halaman utama elevenia.co.id sudah tertata dengan
baik. Sehingga user menjadi mudah mengerti dan tertarik untuk membuka situs
dan berbelanja di elevenia.co.id. Di bagian kiri atas terdapat menu menu all
categories yang memudah kan user untuk mencari barang barang berdasarkan
kategori nya. Dan dibagian lainnya terdapat barang barang yang dipromosikan
yang dibagi menjadi Top 100 (yaitu 100 barang yang paling banyak dicari dan
dibeli oleh user), lalu ada Elevania Recommended yang berisi barang barang
rekomendasi dari elevania.co.id.
2.1.2. Menu
Terdapat beberapa menu di situs elevenia.co.id yaitu sebagai berikut:

Pada bagian atas terdapat menu Login, Register, Customer Suport, Seller Office,
Seller Zone, dan Elevania Mobile. Sedangkan dibawah nya terdapat menu
Elevenia, All Categories Deals, Top 100, e-coupon, Buku, Promo, dan Benefit.
16

1. Menu Login

Berfungsi untuk masuk ke dalam situs bagi user yang telah memiliki akun
di Elevania, terdapat dua cara login untuk masuk ke elevania.co.id yaitu dengan
memasukan email dan bias juga dengan menyambungkan ke akun facebook user
tersebut.
2. Menu Register

Di dalam menu register anda bisa mendaftar sebagai pembeli / penjual
perorangan / penjual badan usaha / penjual global. Dan ini sangat memudahkan
userkarena menu sudah dibagi bagi menjadi bebrapa kategori sehingga user
tinggal memilih untuk register sesuai dengan keperluannya.




17

3. Menu Customer Support

Dalam menu ini berisi beberapa pertanyaan yang sering diajukan oleh user
atau customers.
4. Menu All Categories

Dalam menu ini terdapat beberapa kategori dari produk produk yang
dijual di elevania agar para konsumen atau user menjadi lebih mudah untuk
mencari produk produk sesuai dengan kategori yang diingin kan user.
5. Menu Deals
Dalam menu Deals terdapat produk produk yang sedang di diskon
sengan batasan waktu tertentu, sehingga user harus cepat cepat jika ingin
memesan barang karena terdapat batasan waktu untuk diskon pada prosuk di
Deals ini.





18

6. Menu Top 100

Dalam menu ini terdapat 100 barang terpopuler dalam situs elevania ini.
2.1.3. Design
Desain dari situs elevania.co.id sangat menarik bagi user, karena di
halaman awal sudah tersusun rapi barang barang pilihan dari elevania yang
dibagi menjadi Top 100 (yaitu 100 barang terpopuler) dan juga elevania
recomenden (yaitu barang rekomendasi dari elevania). Sehingga user dapat
tertarik untuk berbelanja disana.

2.2. User Experience
2.2.1. Bagaimana User melakukan interaksi saat melakukan order
Untuk melakukan order, user pertama tama harus memulih produk yang akan di
pesan
Yaitu dengan memilih dari menu All Categories atau bisa juga melalui menu
Pencarian dengan mengetik barang yang diinginkan. Setelah itu tinggal klik
produk tersebut. Disini sebagai contoh user ingin membeli Samsung Galaxy Note
3.
19


Setelah kita mendapatkan barang yang diinginkan user tinggal mengklik Beli
Sekarang seperti yg terdapat di gambar dibawah ini.

Dan setelah itu akan keluar rincian biaya dari barang yang dipesan

Setelah mengisi form metode pembayaran, user tinggal mengklik bayar sekarang
dan barang pun sudah siap dikirim kepada pembeli, proses bertransaksi di
elevania sangat memudah kan konsumen untuk mencari barang yang diinginkan
20

tanpa perlu kekuar dari rumah untuk membeli barang, cukup duduk didepan
laptop barang pun sudah bisa dibeli oleh konsumen.
2.2.2. Pengalaman User dalam Menggunakan Situs lazada.co.id
Dari segi pengalaman user, user tentunya akan lebih nyaman dalam
melakukan pencarian produk dan transaksi produk. Selain karena desain yang
menarik, user juga dibantu dengan serta banyak kategori yang dapat dipilih atau
dengan fitur pencarian. Sehingga user dapat dengan mudah menemukan produk
yang diinginkan. Pada proses transkaksi juga user tidak akan frustasi karena
proses transaksi yang dilakukan sangat sederhana dan terdapat kalimat-kalimat
bantu yang membantu user dalam mengisi informasi yang dibutuhkan dalam
proses transaksi.
2.2.3. Tingkah Laku User Terhadap Menu yang Ada
Dalam situs elevania.co.id ini, menurut kami menu yang paling sering
digunakan oleh user adalah menu pencarian, menu kategori, dan menu login &
daftar. Karena menu pencarian dan menu kategori merupakan menu untuk
melakukan pencarian atau penggolongan produk sesuai yang diinginkan oleh user.
Sedangkan menu login & daftar digunakan oleh user karena untuk melakukan
sebuah transkasi, user harus login terlebih dahulu.
2.3. System Compatibility
2.3.1. How the respons of the UI for the desktop
Respon user interface website elevenia.co.id pada desktop
- Perubahan gambar cursor saat cursor di letakan pada tulisan atau gambar
yang dapat memunculkan informasi mengenai cicilan untuk barang tersebut.
- Munculnya tulisan atau text saat cursor diarahkan ke beberapa tempat, text
tersebut biasanya digunakan sebagai penegas atau pemberitahu judul halaman
selanjutnya jika kita mengklik gambar atau tulisan tersebut
- Munculnya beberapa pilihan menu saat kursor diarahkan ke beberapa tempat
atau text, menu tersebut akan muncul tanpa harus text tersebut di klik terlebih
dahulu
- Adanya kotak search pada menu utama yang digunakan untuk mencari jenis
produk, ataupun brand.
21

- Saat sudah memilih produk dan mereview produk akan terdapat respon UI.
Respon tersebut berupa gambar yang lebih detail saat cursor diarahkan pada
produk yang kita review.
2.3.2. How the respons of the UI for the mobile gadget
Respon user interface website elevania.co.id pada mobile gadget
- Hampir sama seperti pada desktop, pada menu utama terdapat kotak search
yang dilengkapi saran produk ataupun brand saat kita mengetik pada kotak
tersebut
- Pada mobile, respon UI seperti pergantian halaman dilakukan dengan cara
mengetuk layar pada perangkat mobile tersebut
- Pada saat scroll ke bawah, akan terdapat tanda panah ke atas pada pojok kanan
bawah di tampilan. Tanda tersebut berguna untuk langsung kembali ke atas
tanpa harus scroll berulang kali
- Terdapat gambar yang menunjukan menu utama pada bagian pojok kiri atas.
Respon UI nya adalah jita gambar tersebut di ketuk maka akan muncul pilihan
menu utama, menu utama yang disembunyikan ini bertujuan untuk
menghemat atau meminimaliskan tampilan
2.3.3. Describe the layout, menu or design for desktop and mobile
- Desktop
Layout
Pada desktop, website elevenia memiliki layout yang sangat terorganisir dan
lengkap. Jadi pada halaman pertama dari elevenia.co.id berisi gambar-gambar
produk yang ditawarkan dan di bawah gambar tersebut berisikan informasi-
informasi mengenai segala hal yang berhubungan dengan elevenia, dibawah
informasi tersebut terdapat menu-menu tambahan mengenai tentang elevenia,
layanan, pembayaran, dll. Pada halaman-halaman lain juga berisi informasi dan
gambar yang begitu lengkap dan detail yang menunjang produk yang di
tawarkan.
Menu
Menu-menu pada elevenia versi desktop sangat lengkap dan sangat terlihat, jadi
sangat mudah untuk ditemukan. Menu-menu tersebut apalagi menu utama seperti
22

sudah terpatok di bagian atas dari layar user, jadi user sangat mudah jika ingin
memilih menu-menu lain. Banyak menu yang disediakan pada zalora versi
desktop ini, menu-menunya juga sangat mendetail dan peletakannya tepat, seperti
menu utama terletak di bagian atas dan berukuran lebih besar dari pada menu-
menu pendukung lainnya.
Design
Design dari elevenia ini sangat bagus dan menarik, walaupun pada desktop
elevenia tetap menonjolkan produk produk terpopuler, tapi tidak mengurangi
design dari website elevenia tersebut.
- Mobile
Layout
Jika dibandingkan dengan layout dari elevenia versi desktop, layout elevenia versi
mobile sangat minimalis, lebih sederhana, lebih mengutamakan keefektifan atau
keefisienan penggunaan layar. Layout elevenia versi mobile tidak selengkap
elevenia versi desktop karena versi mobile merupakan versi minimalisnya dari
versi desktop, jadi versi mobile tidak perlu terlalu lengkap tetapi hanya berisikan
hal-hal yang penting saja .
Menu
Menu-menu pada zalora versi mobile hanya berisikan menu-menu yang penting
saja. Menu ini juga terkesan di sembunyikan dengan tujuan keefektifan layar dan
keefisienan layar.
Design
Design dari elevenia versi mobile ini sangat bagus dan sangat efisien serta
minimalis, semua halaman baru biasanya diwakilkan dengan gambar.


3. ZALORA
Deskripsi:
23

Situs belanja online ini merupakan salah satu cabang dari toko online
terbesar di Eropa, Zalando. Di lingkup Asia namanya Zalora yang memiliki adik
perusahaan di delapan negara, seperti Indonesia, Malaysia, Singapura, Vietnam,
Taiwan, Hongkong, Thailand, dan FIlipina. Zalora dengan keyakinan bahwa
bisnis e-commerce di tanah air akan berhasil. Karena akses ke daerah kecil masih
kurang, dengan adanya Zalora semua orang punya akses. Perkembangannya
didukung oleh kerja sama tim Zalora dalam memasarkan web-store mereka.
Diawali dari promosi secara online, seperti melalui Google, Facebook, Twitter,
hingga kini merambah ke media eleltronik.
3.1. Useability
3.1.1. Layout ( Tata Letak )
Layout dari situs zalora dari pengamatan kelompok kami memiliki tata
letak yang teroganisir, sehingga memudahkan pengguna menggunakan dan
memahami fungsi dari masing-masing menu. Ini terlihat pada tampilan menu
pertama dimana seperti yang terlihat pada gambar 1, yang menjelaskan bahwa
bagian penjualannya terletak di atas dan bagian informasi layanan yang di
sediakan oleh zalora terletak di bagian bawahnya.

Gambar 1 : Layout Menu Utama Zalora
Karena, zalora merupakan sebuah situs jual beli online yang bergerak dibidag
fashion oleh karena itu tata letak barang dan informasi pun sudah dikelompokkan,
untuk barang-barang pria dan barang-barang wanita.
24

Dari tata letak menu dibagian atas diatur peletakannya, dimana menu-menu
tersebut merupakan menu yang paling potensial untuk diakses oleh pengguna
misalnya saja menu tas yang merupakan bagian terpenting dari sebuah situs jual
beli online, sehingga menu tersebut diletak di pojok kanan atas. Kemudian, untuk
produk-produk yang ditawarkan telah diatur pilihan-pilihan produk yang
diletakan di sebelah kiri yang sudah terorganisir menurut jenis barang yang
ditawarkan

Gambar 2 : Kategori menu wanita
3.1.2. Menu
1. Pilihan Bahasa
Tampilan pertama yang kita temui setelah masuk ke dalam situs
zalora.com adalah pilihan bahasa, situs ini sangat memanjakan penggunanya
dengan tampilan pilihan bahasanya yang sebagai berikut.
25


Gambar 3 : Menu Pilihan Bahasa

2. Menu Bagian Atas

Gambar 4. Menu bagian atas
Pada bagian ini terdapat beberapa pilihan yaitu :
a. Menu Zalora ini digunakan untuk menuju ke halaman awal.
b. Menu Marketplace ini digunakan untuk melihat dan bertransaksi jual-beli
barang dan jasa.
c. Menu Outlet ini digunakan untuk melihat dan bertransaksi barang-barang
yang sedang di diskon
d. Menu magazine ini digunakan untuk melihat berita-berita produk
e. Menu live chat digunakan untuk melakukan chat dengan pihak ZALORA,
baik untuk menanyakan pemesanan, dan bantuan lain.
f. Menu Account digunakan untuk melakukan login, pendaftaran, dan melihat
status order.
g. Menu Bantuan digunakan untuk meminta bantuan cara pemesanan barang,
dan lain-lain terkait dengan situs ZALORA ini.


26

3. Menu Utama

Gambar 5 : Menu Utama
Pada bagian ini, terdapat menu ZALORA, wanita, pria, menu pencarian, wishlist,
tas.
a. Menu Zalora memiliki fungsi yang sama dengan fungsi sebelumnya yaitu
kembali ke menu awal.
b. Menu Wanita menu yang berisi tentang kategori produk-produk khusus
wanita dan transaksi yang disediakan oleh situs ini.
c. Menu Pria menu yang berisi tentang kategori produk-produk khusus pria
dan transaksi yang disediakan oleh situs ini.
d. Menu Pencarian ini digunakan untuk melakukan pencarian terhadap
produk-produk yang disediakan oleh situs ini.
e. Menu Wishlist, menu ini berisikan list-list barang-barang yang kita
inginkan, untuk menikmati fasilitas ini kita di wajibkan untuk memiliki akun
dan menjadi user dari situs ini.
f. Menu Tas, menu ini berfungsi seperti keranjang belanja, disini berisi
barang-barang yang kita ingin beli tetapi belum kita lunasi dalam transaksi
pembayaran.
3.1.3. Desain

Gambar 6 : Desain Menu Utama Zalora
27

Untuk desain Menu Utama situs zalora, dari segi pemilihan warna situs ini
tidak memilih untuk memakai warna-warna yang mencolok, melainkan lebih
memilih memakai warna-warna yang lembut. Desain dari menu-menu dan tata
letaknya terorganisir sehingga tidak membingungkan para penggunanya untuk
menggunakan situs ini sesuai dengan fungsinya. Selain itu berita-berita dan
informasi juga dilengkapi dengan gambar-gambar yang menunjukan identitas dari
berita tersebut, kemudian informasi-informasi tersebut disusun dengan seimbang
sehingga dapat mempercantik tampilan dari situs ini.
3.2. User Experience
3.2.1. User berinteraksi
a. Interaksi user saat memilih produk
Hal yang dilakukan oleh user untuk berinteraksi memilih produk yang, pertama
yang dilakukan adalah mengarahkan pointer krusor ke arah kategori produk
untuk Pria atau Wanita, setelah pointer tersebut diarahkan dan melakukan
pemilihan maka tampilan pointer berubah dan latar belakang menu menjadi
gelap dan muncul dropdown.
b. Interaksi user saat melakukan pemesanan
User berinteraksi saat melakukan pemesanan adalah memilih produk yang
diinginkan, sekarang user akan masuk ke tampilan pemesanan produk. Dan
user akan diarahkan untuk masuk kedalam tampilan barang yang akan dipesan
disini diperlihatkan informasinya secara lebih detailnya .dengan mengarahkan
pointer cursor kearah barang yang dipesan. Selanjutnya user akan diarahkan ke
tampilan transaksi pembayaran seperti gambar di bawah ini :

Gambar 7 : Transaksi user
28

Pada tampilan ini user akan diminta untuk mengisi data informasi user,dimana
apabila user mengarahkan kursor ke kolom e-mail, password dan kolom lain di
bagian ini maka tampilan pointer kursor akan berubah ke mode teks. Kemudian
memilih cara pembayaran, dapat dilakukan dengan mengarahkan dan memilih
bagian pilihan pembayaran yang kita inginkan dan bulatan biru sebagai penanda
pilihan user.
3.2.2. Pengalaman pengguna
Dari segi pengalaman pengguna dalam menggunakan layanan situs ini,
pengguna disini sangat dimudahkan untuk melakukan pencarian produk-produk
dan dalam proses transaksi. Yang pertama, user diarahkan untuk memilih Negara
tempat mereka tinggal sehingga pengguna disini tidak akan kebingungan dalam
segi bahasa dan pilihan pengiriman produk yang ditawarkan.Karena, dari tampilan
awal situs ini, Kemudian karena layout menu dari situs ini sangat terorganisir
maka user akan diarahkan untuk melihat produk pria atau wanita. Selanjutnya
akan ditampilkan kategori produk misalnya pakaian, sepatu, tas, dan lain-lain
disini disediakan Tas untuk menyimpan barang yang kita inginkan. Dan di
tahap akhir, apabila user yang sudah mengisi Tas dengan produk yang ditawarkan
maka selanjutnya user akan diarahkan ke layanan transaksi pembayaran.

3.2.3. User preference
Dalam situs ini menu yang paling potensial di kunjungi oleh user adalah
menu wanita atau Pria , menu Tas, dan Transaksi Pembayaran. Karena
dalam situs penjualan online, tentunya user akan paling sering untuk melihat
kategori-kategori produk yang ingin dibeli dan tujuan utama biasanya pengguna
membuka situs ini adalah untuk berbelanja sehingga menurut kelompok kami
menu Tas untuk menyimpan produk yang akan dibeli tetapi belum dilakukan
pembayaran dan menu Transaksi Pembayaran yang akan sering dikunjungi oleh
user.

3.3. System Compatibility
3.3.1. How the respons of the UI for the desktop
Respon user interface website zalora.com pada desktop
29

- Perubahan gambar cursor saat cursor di letakan pada tulisan atau gambar
yang dapat memunculkan halaman baru
- Munculnya tulisan atau text saat cursor diarahkan ke beberapa tempat, text
tersebut biasanya digunakan sebagai penegas atau pemberitahu judul halaman
selanjutnya jika kita mengklik gambar atau tulisan tersebut
- Munculnya beberapa pilihan menu saat kursor diarahkan ke beberapa tempat
atau text, menu tersebut akan muncul tanpa harus text tersebut di klik terlebih
dahulu
- Adanya kotak search pada menu utama yang digunakan untuk mencari jenis
produk, ataupun brand. Respon UI yang terdapat pada kotak search ini berupa
saran-saran nama dari produk ataupun brand yang mirip atau bersesuaian
dengan kata yang diketikkan di dalam kotak search tersebut
- Pada halaman magazine terdapat respon UI berupa munculnya gambar pada
pojok kanan bawah yang berisi tulisan back to top, tulisan atau gambar ini
akan muncul ketika kita menscroll halaman magazine ke bawah. Tulisan atau
gambar ini berfungsi untuk mempermudah user saat melihat halaman
magazine yang ada di bawah dan ingin kembali ke halaman atas magazine
tersebut.
- Menu utama pada setiap halaman akan terus ada di atas halaman anda
walaupun halaman tersebut anda scroll ke bawah, menu utama akan tetap
terlihat dan berada di atas tampilan anda. Menu utama yang terus tampil ini
berguna untuk memudahkan user jika ingin berganti menu, misalkan dari
fashion pria ke wanita.
- Saat sudah memilih produk dan mereview produk akan terdapat respon UI.
Respon tersebut berupa gambar yang lebih detail saat cursor diarahkan pada
produk yang kita review.
3.3.2. How the respons of the UI for the mobile gadget
Respon user interface website zalora.com pada mobile gadget
- Hampir sama seperti pada desktop, pada menu utama terdapat kotak search
yang dilengkapi saran produk ataupun brand saat kita mengetik pada kotak
tersebut
30

- Pada mobile, respon UI seperti pergantian halaman dilakukan dengan cara
mengetuk layar pada perangkat mobile tersebut
- Pada saat scroll ke bawah, akan terdapat tanda panah ke atas pada pojok
kanan bawah di tampilan. Tanda tersebut berguna untuk langsung kembali ke
atas tanpa harus scroll berulang kali
- Terdapat gambar yang menunjukan menu utama pada bagian pojok kiri atas.
Respon UI nya adalah jita gambar tersebut di ketuk maka akan muncul
pilihan menu utama, menu utama yang disembunyikan ini bertujuan untuk
menghemat atau meminimaliskan tampilan
- Jika mengetuk menu utama tersebut, saat pilihan menu utama tampil maka
warna selain pilihan menu utama akan memudar atau menjadi lebih gelap.
Hal tersebut bertujuan untuk memfokuskan perhatian user pada menu utama
- Jika mengetuk tulisan filter, maka secara langsung respon UI dari zalora
tersebut akan menampilkan perintah atau pilihan-pilihan selanjtnya dari filter
tersebut di tengah-tengah layar.
3.3.3. Describe the layout, menu or design for desktop and mobile
- Desktop
Layout
Pada desktop, website zalora memiliki layout yang sangat terorganisir dan
lengkap. Jadi pada halaman pertama dari zalora.co.id berisi gambar-gambar
produk yang ditawarkan dan di bawah gambar tersebut berisikan informasi-
informasi mengenai segala hal yang berhubungan dengan zalora, dibawah
informasi tersebut terdapat menu-menu tambahan mengenai tentang zalora,
layanan, pembayaran, dll. Pada halaman-halaman lain juga berisi informasi
dan gambar yang begitu lengkap dan detail yang menunjang produk yang di
tawarkan.
Menu
Menu-menu pada zalora versi desktop sangat lengkap dan sangat terlihat, jadi
sangat mudah untuk ditemukan. Menu-menu tersebut apalagi menu utama
seperti sudah terpatok di bagian atas dari layar user, jadi user sangat mudah
jika ingin memilih menu-menu lain. Banyak menu yang disediakan pada
31

zalora versi desktop ini, menu-menunya juga sangat mendetail dan
peletakannya tepat, seperti menu utama terletak di bagian atas dan berukuran
lebih besar dari pada menu-menu pendukung lainnya.
Design
Design dari zalora ini sangat bagus dan menarik, walaupun pada desktop
zalora tetap menonjolkan gambar2 yang berukuran sedang dengan warna-
warna yang tidak terlalu mencolok serta tulisan-tulisan informasi tersusun
rapi di bawah gambar-gambar tersebut, sehingga user tidak merasa bosan saat
mengunjungin zalora.

- Mobile
Layout
Jika dibandingkan dengan layout dari zalora versi desktop, layout zalora versi
mobile sangat minimalis, lebih sederhana, lebih mengutamakan keefektifan
atau keefisienan penggunaan layar. Layout zalora versi mobile tidak
selengkap zalora versi desktop karena versi mobile merupakan versi
minimalisnya dari versi desktop, jadi versi mobile tidak perlu terlalu lengkap
tetapi hanya berisikan hal-hal yang penting saja.
Menu
Menu-menu pada zalora versi mobile hanya berisikan menu-menu yang
penting saja. Menu ini juga terkesan di sembunyikan dengan tujuan
keefektifan layar dan keefisienan layar.
Design
Design dari zalora versi mobile ini sangat bagus dan sangat efisien serta
minimalis, semua halaman baru biasanya diwakilkan dengan gambar.