Journal - Layout - Nofry Aldi Saputra.docx

PENELITIAN DESAIN LAYOUT PADA WEBSITE BUKATOKO Oleh: Nofry Aldi Saputra (NIM. 012201605030) President University

Abstrak Kajian ini bertujuan untuk mengetahui prinsip-prinsip desain web yang menarik yang difokuskan pada prinsip Layout. Metode yang digunakan adalah data dikumpulkan dengan menyebarkan kuesioner kepada responden. Hasil penelitian menunjukkan terdapat pengaruh desain layout terhadap sikap terhadap website. membandingkan dua buah website perusahaan E-Commerce Tokopedia dan Bukalapak dengan hasil yang menunjukkan bahwa rancangan website lebih dipengaruhi oleh faktor pandangan dari sisi kegunaan dan estetika. Kata kunci: Website, Layout, Pattern, Grid System

Pendahuluan Pesatnya perkembangan teknologi informasi telah menjadi salah satu bagian penting dalam kehidupan manusia. Bahkan dapat dikatakan bahwa penyebaran informasi sudah menjadi kebutuhan di segala bidang, tidak terkecuali dalam bidang ekonomi, pendidikan, kesehatan, kebudayaan, keagamaan, dan lain sebagainya. Salah satu cara menyampaikan informasi yaitu dengan media internet. Selain memiliki kecepatan dalam penyebaran informasi, internet juga merupakan media yang mudah diterima. Melalui internet berbagai bentuk aktivitas dapat dilakukan, mulai dari hal-hal yang bersifat biasa saja hingga yang berkaitan dengan aktivitas bisnis. Perusahaan akan

lebih mudah menawarkan produk barang dan jasa yang dihasilkan melalui website. Website adalah kumpulan dari halaman-halaman yang berisi informasi melalui jalur internet yang diakses melalui berbagai perangkat di seluruh dunia. Halaman tersebut merupakan komponen-komponen yang terdiri dari beberapa unsur, yakni teks, gambar, audio, video, dan animasi dari berbagai bentuk sehingga menjadi media informasi yang menarik untuk dikunjungi. Layout merupakan susunan dan letak dari berbagai kelengkapan kelengkapan yang dibutuhkan oleh toko tersebut agar terkesan rapi dan menarik untuk dilihat sehingga para pengunjung tidak merasa bingung ketika berada di dalam website toko tersebut.

Menurut Wann etal., (2014) Layout design adalah tatanan konten produk dan gambar di dalam suatu website. Dalam studi ini, layout design didefinisikan sebagai penataan konten dari informasi produk dan gambar yang ada di dalam website tersebut. Menurut Dwi Kristian, dalam bukunya Lay Out Design mengartikan Lay Out sebagai satu keputusan yang menentukan efisiensi sebuah operasi dalam jangka panjang. Sebuah layout harus ditata dan dipetakan secara baik supaya pengguna dapat berpindah dari satu bagian ke bagian yang lain dengan mudah dan cepat Tujuan dari adanya Layout adalah untuk mendekatkan produk kepada konsumen agar tersedia dalam tempat serta jumlah yang tepat, untuk kenyamanan dan kemudahan untuk memperoleh produk, serta untuk efisiensi dan efektifitas space yang ada, yaitu pengelompokan produk berdasarkan group dan sub group. Artikel ini mengacu pada perbandingan desain layout antara 2 website yaitu Bukalapak dan Tokopedia yang merupakan website e-commerce terbesar di Indonesia.

Gambar 1.a Logo Tokopedia

Gambar 1.b Logo Bukalapak

Visual Hierarchy Melalai Layout a. Memilih focal point tunggal Memilih focal point mendefinisikan satu unsur yang paling penting pada halaman dan desain di sekitar itu. Ini bisa menjadi gambaran besar, atau ucapan single-line, atau panggilan-toaction. Mengetahui unsur visual yang paling penting akan memungkinkan Anda untuk mengatur unsur-unsur lain untuk mempromosikannya, ditambah itu akan membuat memulai dari awal lebih mudah. b. Menggunakan grid Menggunakan sistem grid adalah metode cepat dan efisien untuk memastikan tata letak Anda tetap seimbang. Merancang dengan lapisan grid adalah bantuan sempurna untuk menjaga semua elemen dalam baris dan seimbang di seluruh halaman. Bantuan tambahan ini membebaskan beberapa Anda kemampuan mental untuk isu-isu tata letak yang lebih penting. Situs-situs seperti Gridpak menghasilkan grid untuk Anda sesuai dengan spesifikasi Anda. Di samping catatan, UXPin juga dilengkapi dengan built-in grid untuk membantu meningkatkan alignment dari semua objek dalam gambar rangka atau prototipe. c. Mengambil keuntungan pengguna melihat pola

dari

Pelacakan studi mengidentifikasi beberapa pola umum dan dapat diprediksi yang diikuti oleh pengguna web. Dengan mengambil keuntungan

dari pola-pola ini, Anda dapat tidak hanya mengantisipasi mana kau pengguna Anda akan melihat, tetapi juga mendorong dan mempromosikan pola seperti, memberikan Anda lebih banyak kontrol. Dua pola yang paling umum adalah Fpola dan Z-pola. F-pola sebagian besar digunakan dalam blok besar teks: pengguna scan baris untuk kata-kata bunga, maka scan ke bawah kolom kiri, dan mulai pemindaian horizontal jika mereka menemukan sesuatu yang menangkap mata mereka. Z-pola terjadi pada halaman yang lebih terbuka: pengguna scan tepat horizontal, kemudian ke sudut kiri bawah, dan kemudian berulang dalam zigzag ke bawah halaman.

Elemen-elemen Dokumen Website

Layout

pada

a. Elemen Header Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan. b. Elemen Navigation Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web. c. Elemen Sidebar Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar

konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya. d. Elemen Konten Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini. e. Elemen Footer Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Bahan dan Metode Bahan yang menjadi pembahasan penelitian ini adalah form pembelian yang ada pada ecommerce, form pembelian sampai akhir proses pembelian ini terdiri dari; -

Form Pembelian Form Keranjang Belanja Form Checkout Form Review Pembelian

Metode yang dilakukan dalam penelitian ini adalah membuat kuesioner untuk menilai dan membandingkan keempat form tersebut di Tokopedia dan Bukalapak. Format pertanyaan dibuat untuk mencari nilai kuantitatif dari setiap form tersebut untuk melihat platform mana yang memiliki nilai tertinggi secara keseluruhan maupun secara form masing-masing. Setelah itu, akan dibuat website bandingan berdasarkan data tersebut dengan mengambil konsep siapa yang memiliki nilai tertinggi untuk diaplikasikan pada website

bandingan ini, yang kemudian akan di uji kembali melalui kuesioner secara kualitatif bagaimana pendapat pengguna tentang website bandingan ini.

Hasil Berdasarkan hasil kuesioner yang telah disebarkan dari 52 responden, secara keseluruhan, perbandingan penilaian antara Tokopedia dan Bukalapak adalah sebagai berikut: 4.15 4.1 4.05 4 3.95

4.095 4.025

Tokopedia

Tokopedia

Bukalapak

Bukalapak

perbedaannya tidak begitu signifikan namun dari hal ini terlihat jelas bahwa berdasarkan skala 1-5 Tokopedia dan Bukalapak dapat menembus nilai 4 yang berarti tingkat penerimaan pengguna terhadap desain Tokopedia dan Bukalapak cukup baik. Dari hasil ini, kita membuat website bandingan bernama “bukatoko” diambil berdasarkan hasil gabungan nama dari Bukalapak dan Tokopedia. Desain website ini akan lebih mengambil tema dari Tokopedia karena tingkat penerimaan user terhadap Tokopedia lebih tinggi, namun menggunakan konsep warna yang berbeda dan style yang berbeda dari Tokopedia maupun Bukalapak, untuk menonjolkan perbedaan yang jelas secara visual diantara 3 website tersebut.

Chart 2. Perbandingan penilaian Tokopedia vs Bukalapak Secara keseluruhan, responden lebih menyukai form pada Tokopedia baik secara UI maupun UX nya. Dengan detail penilaian antar form sebagai berikut. Tokopedia

Bukalapak

Form 4,02 3,98 Pembelian Form Cart 4,14 4,06 Form 4,06 4,02 Checkout Closing 4,16 4,04 Table 3.a Perbandingan penilaian antar form Tokopedia vs Bukalapak Terlihat jelas bahwa Tokopedia mendapatkan nilai lebih tinggi secara keseluruhan maupun secara perbandingan antar form, meskipun

Pembahasan 1. Jenis Layout Grid System Pada pola grid ini, tata letak toko dibentuk secara berlajur yang terdiri atas lorong-lorong untuk meletakkan barang atau produk yang menurut group ataupun sub group. Pola ini banyak diterapkan pada minimarket, supermarket ataupun hypermarket. Dengan rujukan ini diperlukan barang atau produk sanggup dipajang lebih banyak, tapi cukup untuk menawarkan keleluasaan bagi konsumen yang hilir mudik. Yang harus diperhatikan pada rujukan ini ialah barang-barang mana saja yang harus ditampilkan dilorong utama.

Pola lurus menguntungkan dalam hal kesan efisien, mempermudah konsumen untuk menghemat waktu belanja, lebih banyak menampung barang yang didisplay, dan control lebih mudah. Grid layout menempatkan komponen dengan urutan dari kiri kekanan, dari atas kebawah dan memaksa setiap komponen untuk menempati space container yang kosong serta membagi rata ukuran setiap space tersebut. gridLayout paling cocok digunakan untuk menyusun komponen yang berukuran sama , misal 2 buah JPanel berukuran sama di dalam sebuah frame.

Perbedaan utama dengan Gutenberg diagram adalah bahwa pola-z menunjukkan pemirsa akan melewati dua wilayah Bera. Sebaliknya mereka masih mulai dan berakhir di tempat yang sama dan masih melewati tengah. Z-pola baik untuk desain yang sederhana dengan beberapa elemen kunci yang perlu dilihat. Aspek cerita dari desain akan mengikuti jalan z.

Gambar 4. Layout Pola Grid

2. Pattern Z Pola yang digunakan pada bukatoko pembaca akan mulai di atas/kiri, bergerak horizontal di atas/kanan dan kemudian secara diagonal ke bawah/kanan sebelum menyelesaikan dengan gerakan horisontal lain ke bawah/kanan. Z-pola kadang-kadang disebut reverse-s-pola, yang mungkin menunjukkan lebih banyak jalan melengkung dibandingkan dengan jalur siku keras. Sebaliknya mereka akan pada dasarnya sama.

Gambar 5. Layout Pattern Z

Kesimpulan Berdasarkan uraian di atas, diperoleh kesimpulan bahwa website perusahaan yang perbedaan penerapan prinsip dalam tata letak dan desainnya. Tokopedia dan Bukalapak, merupakan website e-commerce terbesar seIndonesia yang juga memiliki desain

website yang sangat baik dan mudah diterima masyarakat. Setiap kekurangan dan kelebihan pada website masing-masing pasti ada, terutama dalam segi desain, namun pengguna memiliki selera desainnya tersendiri, terkadang bukan tujuan suatu website untuk membuat desain website yang dapat disukai oleh semua orang, tapi tujuan desain ini sendiri agar website ini bisa digunakan oleh semua kalangan tanpa mendapatkan kesulitan. Website bukatoko yang kami buat, memang bukanlah website sempurna yang dapat menyaingin Tokopedia dan Bukalapak, melainkan agar dapat menilai persepsi pengguna website e-commerce dan mengetahui pola kebiasaan dan kemudahan apa saja yang pengguna butuhkan. Dari sini bisa disimpulkan bahwa Tokopedia dan Bukalapak sebenarnya sudah memiliki gaya dan desain yang dapat diterima oleh masyarakat, selain dapat dilihat dari hasil survey sebelumnya, hali ini terlihat dari kesuksesannya mempertahankan customer-customer mereka dan dapat menggaet customer-customer baru mereka.

Daftar Pustaka Gremillion, Ben et. all. 2015. The Building Blocks of Visual Hierarchy, Designing Visually Intuitive Web UI. Poland: UXPin Inc. The Principle of Beautifull Website Design (2nd Edition) By Jason Beaird.

Lampiran a.

Form Pembelian Bukalapak

Tokopedia

Bukatoko

b. Form Keranjang Bukalapak

Tokopedia

Bukatoko

c. Form Checkout Bukalapak

Tokopedia

Bukatoko

d. Halaman Review Pembelian Bukalapak

Tokopedia

Bukatoko