ANALISIS E-COMMERCE (LAZADA, ELEVENIA, dan ZALORA)

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

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

2

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

3

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

4

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.

5

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.

6

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.

7

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.

8

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.

9

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

10

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.

11

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

12

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 13

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

14

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.

15

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.

16

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.

17

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.

18

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

19

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.

20

-

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 informasiinformasi 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

21

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 menumenu 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:

22

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.

23

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.

24

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.

25

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

26

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

27

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

28

-

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

29

-

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 informasiinformasi 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

30

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 warnawarna 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.

31