Panduan Tentang Prinsip Desain Mobile Untuk ECommerce

Saat ini kita hidup di era teknologi yang maju di mana hampir setiap orang memiliki akses ke Internet melalui beberapa perangkat setiap harinya.

Beberapa tahun yang lalu, mungkin sebagian besar dari kita hanya menggunakan komputer desktop, tetapi dalam beberapa tahun terakhir keadaan telah berubah. Sekarang penggunaan perangkat mobile mengalahkan komputer desktop karena banyak orang yang lebih senang menggunakan tablet dan ponsel mereka untuk berselancar di internet.

Tidak terkecuali ecommerce juga mengalami peningkatan untuk pengguna mobile. Saat ini mobile-friendly adalah suatu keharusan untuk setiap situs ecommerce. Bahkan Google mempertimbangkan mobile-friendly sebagai indikator peringkat pencarian.

Jika Anda hanya memiliki pengalaman dalam merancang situs desktop, Anda mungkin akan kesulitan dalam merancang untuk mobile. Desain tidak hanya harus menarik tetapi juga mudah bagi pengguna mobile.

Masalah utama dalam merancang situs untuk perangkat mobile adalah ukuran layar. Tablet dan ponsel memiliki layar yang jauh lebih kecil dari komputer desktop. Tetapi Anda harus bisa menyediakan pengunjung mobile navigasi yang mudah dan memastikan pengalaman pengguna yang baik.

Pada artikel ini kita akan membahas panduan tentang prinsip-prinsip desain mobile untuk situs ecommerce.

1. Usability

Saat ini seorang desainer dituntut harus bisa membuat interface yang indah dengan menerapkan prinsip kegunaan (Usability). Untuk mencapai efektivitas yang maksimal, Anda harus merancangnya dengan baik. Anda bisa memulai dari penelitian dan menjawab pertanyaan-pertanyaan berikut:

• Produk apa yang dijual disini?
• Siapa rata-rata pelanggan toko ini?
• Pilihan apa yang harus tersedia? Mana pilihan yang lebih penting?

Anda mungkin bertanya-tanya apa hubungannya semua ini dengan desain mobile? Alasannya adalah terletak pada ukuran layar yang kecil yang seharusnya hanya berisi blok dan pilihan yang benar-benar diperlukan.

Usability bukan apa yang dilihat pelanggan, itu adalah sesuatu yang dirasakan pengunjung ketika menjelajah website dengan perangkat mobile.

2. Prototyping

Setelah mengumpulkan semua informasi yang diperlukan, Anda bisa mulai merancang situs mobile dengan prototype untuk menyederhanakan proses. Sebuah prototype harus meliputi semua elemen struktural dari halaman seperti blok teks, gambar, links, tombol, headings dan judul, masukan, dan lainnya. Anda bisa membuat prototype menggunakan program seperti Photoshop atau Axure atau bahkan di atas kertas.

Pertama, prototype akan membantu Anda untuk memahmi project lebih baik. Ketika membuatnya, Anda akan berhati-hati dalam memikirkan semua elemen dan posisi tata letak. Tahap selanjutnya, Anda bisa menggambar desain Anda, itu akan jauh lebih mudah.

Kedua, dengan membuat prototype Anda dapat menghemat banyak waktu untuk revisi di masa mendatang.

Sebelum membuat prototype, Anda harus memutuskan perangkat apa yang akan dibuat, apakah ponsel atau tablet. Selain itu, pikirkan bahwa setiap perangkat memiliki mode potrait dan landscape. Catat semua elemen struktural yang harus ditemukan pada prototype Anda.

Setelah prototype siap dan disetujui, Anda bisa mulai merancang interaface.

3. Interface

Interface adalah hal pertama yang dilihat pengunjung saat mengunjungi toko online. Memiliki interface yang baik sangat penting, sehingga misi Anda sebagai seorang desainer adalah untuk membuat nada positif dan membangun sikap positif.

Membantu pengunjung untuk memahami dengan cepat di mana mereka berada,, apa yang bisa mereka dapatkan, fungsi dan fitur apa saja yang dapat mereka gunakan. Hal itu dapat dicapai dengan penggunaan warna tertentu, lekukkan, ikon, font, dll. Jika Anda perlu menampilkan checkout, tambahkan ikon checkout. Jika Anda perlu memasukkan link, sorot dengan warna.

4. Ukuran

Ada 2 masalah utama mendasar dari perangkat mobile, yaitu ukuran dan cara pengguna berinteraksi dengan situs melalui perangkat ini. Mereka menggunakan jarinya yang lebih besar dari kursor desktop. Anda harus mempertimbangkan hal ini dalam merancang situs mobile.

Ukuran klik area

Dari karakteristik perangkat mobile yang telah disebutkan diatas, ukuran area optimal yang dapat diklik haruslah lebih besar dari 44px x 44px. Jika Anda tidak ingin membuat pengunjung frustasi dengan mis-klik, cobalah untuk membuat semua elemen yang dapat diklik (link, tombol, kolom pencarian, dll) menjadi 44px x 44px atau lebih besar untuk resolusi mdpi untuk perangkat Android dan non-retina display untuk perangka iOS. Untuk resolusi lain Anda harus membuat skalanya.

Ukuran font

Anda harus menyediakan pengunjung dengan pilihan scanning cepat dan jangan lupa tentang pandangan mereka pada waktu yang sama. Oleh karena itu, standar ukuran font yang baik adalah 11pt. Ukuran ini menjamin pembacaan yang baik dengan background kontras. Ukuran font ini lebih cocok untuk placeholders, petunjuk dan informasi yang kurang penting. Sedangkan untuk deskripsi produk dan blok teks lebih cocok menggunakan ukuran 13pt.

Ukuran produk gambar

Dalam beberapa kasus, gambar produk memegang peranan penting untuk penjualan produk. Banyak orang melewatkan membaca rincian produk dan lebih memilih melihat gambar yang menunjukkan produk dari berbagai sudut. Ini berarti gambar produk harus terlihat jelas dan cukup besar yang memungkinkan pelanggan untuk melihat produk dalam rincian, Anda bahkan dapat menambahkan opsi zoom untuk gambar.

Sebuah gambar produk harus memenuhi tidak kurang dari 45% dari lebar layar ponsel dalam orientasi potrait, dan lebih dari 30% dalam orientasi landscape. Hal ini akan membantu pelanggan untuk melihat detail produk secara umum.

Terlepas dari ukuran gambar, Anda juga harus mempertimbangkan kualitas gambar. Masalahnya adalah bahwa sebagian besar perangkat mobile modern menggunakan retina display, sehingga gambar dengan resolusi 360x640px tidak akan terlihat baik pada layar dengan resolusi 720x1280px atau 1080x1920px. Ingat! Kualitas gambar adalah salah satu hal yang paling penting untuk sebuah toko online.

Ukuran ikon

Ikon dirasakan lebih mudah daripada teks, itu sebabnya ikon biasanya digunakan sebagai petunjuk bukan teks. Di satu sisi, ikon harus terlihat, tapi di sisi lain ikon tidak boleh terlalu menonjol karena ikon memainkan peran sekunder. Misalnya, jika Anda memiliki bar pencarian dengan tinggi 44px, Anda bisa menambahkan sebuah ikon kaca pembesar dengan ukuran 24x24px. Ini akan terlihat bagus dan cukup baik bagi pengguna untuk memahami fungsi bar tersebut.

Ukuran forms

Ukuran layar terbatas, dan ketika pengunjung harus mengisi sebuah forms, keyboard akan muncul dan memenuhi setengah dari ukuran layar. Hal ini menuntut untuk tetap menjaga ukuran forms seminimalis mungkin. Forms harus berisi kolom-kolom yang benar-benar diperlukan, seperti nama, alamat, email. Cara ini juga bisa diterapkan pada situs desktop jika ingin meningkatkan lead, karena semakin sedikit jumlah kolom forms, semakin banyak orang yang akan mengisinya.

5. Warna

Brand style harus ditinjau tidak hanya dari logo, kartu nama dan brosur, tetapi juga dari situs mobile. Warna dapat membantu Anda untuk menunjukkan brand style serta menyoroti elemen kunci dari setiap halaman.

Sebelum merancang sebuah interface, Anda harus berpikir di mana warna akan digunakan dan buat sebuah palet. Jika Anda menggunakan beberapa warna, interface akan terlihat membosankan. Jika Anda menggunakan banyak warna, interface akan terlihat terlalu berantakan dan kacau. Jadi, jaga keseimbangan warna dengan menggunakan 6-10 warna. Ini adalah jumlah optimal, tetapi mungkin ada beberapa pengecualian.

Berikut adalah panduan step-by-step memilih warna untuk situs ecommerce:

Kombinasi warna yang Anda dibuat harus harmonis. Kontras warna juga penting karena membantu untuk menarik perhatian pengunjung melalui elemen penting seperti tombol “Add to Cart”.

• Pilih warna utama untuk situs.
• Pilih warna sekunder.
• Pilih warna utama untuk deskripsi produk.
• Pilih warna untuk judul.
• Sorot harga produk dengan warna.
• Link, tombol, dan navigasi harus merupakan elemen yang clickable, ini dapat dicapai dengan warna.
• Anda dapat memilih beberapa warna tambahan jika dibutuhkan.

6. Fonts

Seperti warna, Anda juga dapat membuat “palet” untuk fonts yang akan digunakan. Buat daftar nama fonts, ukuran, dan style.

Font harus memiliki keterbacaan yang tinggi dan dapat menyampaikan informasi kepada pengunjung dengan mudah. Oleh karena itu, hindari font yang terlalu rumit yang sulit untuk dibaca.

“Palet” fonts bisa berupa file txt sederhana yang menyimpan informasi seperti berikut:

Heading 1 – RobotoLight 36pt

Ini bergantung pada Anda untuk memutuskan fonts mana yang akan digunakan. Setiap fonts memiliki arti sendiri dan karakter yang akan diteruskan ke situs, sehingga Anda harus berhati-hati dalam memilih fonts yang tepat.

7. Adaptasi

Setelah Anda mempertimbangkan solusi UX untuk situs mobile ecommerce, membuat prototype, membuat palet warna dan fonts, dan merancang interface, pekerjaan Anda belum selesai. Saatnya untuk adaptasi.

Anda membuat sebuah toko online yang akan dilihat pengunjung pada perangkat mobile. Saat ini terdapat berbagai macam perangkat mobile dengan ukuran dan resolusi yang berbeda-beda. Ini akan menjadi sesuatu yang tidak produktif membuat prototype untuk masing-masing perangkat. Ketika Anda membuat prototype utama, pertimbangkan unsur-unsur yang akan berubah, direnggangkan, atau bahkan dihilangkan, tergantung pada perangkat yang digunakan.

Adaptasi ini sangat penting untuk desain ponsel. Cobalah untuk mengunji prototype Anda setidaknya pada resolusi yang paling umum dan populer.