    {"id":180,"date":"2017-04-22T15:35:17","date_gmt":"2017-04-22T08:35:17","guid":{"rendered":"http:\/\/student-activity.binus.ac.id\/bncc\/?p=180"},"modified":"2017-04-22T15:35:17","modified_gmt":"2017-04-22T08:35:17","slug":"tips-dan-pedoman-mendesain-ux-user-experience-pada-tahun-2017","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/bncc\/2017\/04\/22\/tips-dan-pedoman-mendesain-ux-user-experience-pada-tahun-2017\/","title":{"rendered":"TIPS DAN PEDOMAN MENDESAIN UX (USER EXPERIENCE) PADA TAHUN 2017"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/pexels-photo-89724-933x445.jpeg\" width=\"933\" height=\"445\" \/><\/p>\n<p>Bagi kamu yang tertarik dengan <i>startup<\/i> pada bidang aplikasi <i>mobile<\/i> ataupun <i>web<\/i>, dan ingin mengembangkan sendiri aplikasi-aplikasi tersebut, hal-hal lain yang perlu kamu perhatikan dari perancangan fitur-fitur inti dari aplikasimu, diantaranya adalah perancangan pengalaman yang diberikan kepada para pengguna ketika menggunakannya (<i>User Experience<\/i>\/UX). Hal ini, jika kamu maksimalkan dan rancang sebaik mungkin, akan menjadi sebuah keunggulan kompetitif dari aplikasi ataupun situs para kompetitormu.<\/p>\n<p>Pernahkah kamu meng-<i>install<\/i> sebuah aplikasi, dan sesaat setelah menggunakannya, merasa ingin menghapusnya karena sulit dan tidak nyaman untuk digunakan? Mungkin desainnya terasa sangat tua, atau penempatan tombol serta menu-menunya terasa tidak tepat. Begitu juga dengan situs <i>web<\/i>. Mungkin kamu merasa tidak \u201csrek\u201d ketika harus membuka <i>web<\/i> yang terasa sangat ketinggalan jaman, baik dari segi desain maupun dari fitur. Tidak hanya memberikan keunggulan, namun desain UX yang baik juga menjadi tanda kredibilitas dan profesionalitas dari perusahaan dibalik aplikasi maupun situs yang bersangkutan.<\/p>\n<p>File akan menjelaskan kepadamu beberapa tips untuk meningkatkan kualitas UX. Beberapa di antaranya juga adalah tren desain UX pada tahun 2017 ini yang dapat kamu pelajari dan ikuti, serta dapat kamu jadikan sebagai referensi jika kamu ingin membuat aplikasi maupun situs <i>web <\/i>untuk <em>startup<\/em>-mu.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. Desain yang Tidak Membuang Waktu Pengguna<\/h2>\n<div id=\"attachment_2451\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/2017-ux-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2451\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/2017-ux-5.png\" alt=\"\" width=\"1000\" height=\"515\" \/><\/a><\/div>\n<p>Desain UX yang baik bersifat intuitif dan menghemat waktu pengguna, terutama desain linear yang memperbolehkan pengguna hanya melakukan tindakan secara satu-persatu. Misalkan, aplikasi Uber memiliki transisi yang jelas pada sistem pemesanannya, yang disertai dengan kesederhanaan dan kemudahan. Hal lain yang bisa kamu implementasikan untuk menghemat waktu pengguna lebih banyak lagi, yaitu menggunakan kecerdasan buatan, atau <i>artificial intelligence<\/i>. Misalkan pada fitur interaksi dengan pelayanan pelanggan yang bersifat dasar, kamu dapat menggunakan <i>chatbot<\/i> dengan kecerdasan buatan. Hal ini tidak hanya menghemat waktu pengguna, namun juga waktu karyawan-karyawanmu.<\/p>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h2>2. Engagement Bots<\/h2>\n<div id=\"attachment_2452\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2452\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/chatbot-shotbot-ebay-640x266.png\" alt=\"\" width=\"640\" height=\"266\" \/><\/div>\n<p>Seperti yang telah disinggung pada poin sebelumnya, penggunaan <i>chatbot <\/i>dengan AI adalah salah satu metode yang dapat menghemat waktu pengguna. <i>Chatbot<\/i> juga dapat digunakan untuk mempersingkat berbagai proses seperti penjualan.<\/p>\n<p>&nbsp;<\/p>\n<h2>3. Personalisasi yang Lebih Cerdas<\/h2>\n<div id=\"attachment_2453\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2453\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Personalization.png\" alt=\"\" width=\"1000\" height=\"515\" \/><\/div>\n<p>Perusahaan maupun pengguna menyukai personalisasi, baik dari tampilan maupun informasi. Dan pada tahun 2017 ini, pengalaman yang dapat dipersonalisasi ini pun akan semakin canggih. Sebagai <i>developer <\/i>atau <i>designer<\/i>, kamu harus dapat mengekpektasi berbagai macam opsi yang tersedia dari berbagai sumber dan referensi.<\/p>\n<p>&nbsp;<\/p>\n<h2>4. Fokus pada Pengalaman Positif yang Diberikan Kepada Pengguna<\/h2>\n<div id=\"attachment_2454\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2454\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Efek-Positif.png\" alt=\"\" width=\"1000\" height=\"515\" \/><\/div>\n<p>Beberapa metode tradisional untuk mengukur UX yaitu berapa lama waktu yang dihabiskan pengguna di suatu situs, pergerakan mereka melalui berbagai halaman, atau di mana mereka biasanya meninggalkan situs tersebut sebelum membeli produk. Namun kini, pada jaman dimana pengalaman menjadi sebuah produk, perusahaan maupun usaha-usaha akan lebih fokus pada pengukuran yang berdasarkan pengalaman untuk melacak pengaruh dari penggunaan situs maupun aplikasi kepada para pengguna. Misalkan, kontribusi positif apa yang diberikan kepada kehidupan pengguna.<\/p>\n<p>Maka itu, cobalah berfokus tidak hanya pada berapa banyak orang yang menggunakan aplikasi atau situsmu, namun juga berfokus pada efek positif apa yang dapat kamu berikan pada para pengguna ketika kamu mendesain UX. Contohnya adalah Snapchat Spectacles yang memberikan efek positif pada para pengguna, yaitu memberikan kepada mereka sebuah objek serba guna yang memungkinakan mereka untuk membagikan pengalaman mereka dengan sederhana dan mudah.<\/p>\n<p>&nbsp;<\/p>\n<h2>5. Estimasi Waktu Baca untuk Meningkatkan Jumlah Pembaca<\/h2>\n<div id=\"attachment_2455\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2455\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/medium-estimated-read-time-640x519.png\" alt=\"\" width=\"640\" height=\"519\" \/><\/div>\n<p>Jika kamu tertarik untuk membuat aplikasi ataupun situs yang bergerak di bidang media informasi dan menyediakan artikel, maka kamu disarankan untuk memberikan estimasi waktu bagi pembaca untuk membaca dan menyelesaikan artikel yang bersangkutan. Kamu mungkin pernah mengalami dimana kamu membaca sebuah artikel <i>online<\/i>, dan sebelum kamu membacanya, kamu meng-<i>scroll<\/i> hingga ke akhir artikel untuk melihat berapa panjang artikel tersebut. Dan jika kamu merasa itu terlalu panjang, kamu pun langsung meninggalkan artikel tersebut. Poin ini ditujukan untuk menghindari hal tersebut. Menurut New Yorker, jika kita mengetahui lebih banyak mengenai suatu hal \u2013 termasuk tepatnya berapa lama waktu yang akan kita habiskan \u2013 kemungkinan bagi kita untuk berkomitmen terhadap hal tersebut akan lebih besar.<\/p>\n<p>&nbsp;<\/p>\n<h2>6. Pengalaman Berdasarkan Gerakan dan Suara<\/h2>\n<div id=\"attachment_2456\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2456\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/siri-voice-interface-640x543.png\" alt=\"\" width=\"640\" height=\"543\" \/><\/div>\n<p>Kini sudah terdapat banyak <i>interface <\/i>yang diaktifkan melalui suara ataupun gerakan. Misalkan Google Assistance, Apple Siri, dan Microsoft Cortana. Di Google Search, kamu juga dapat menggunakan <i>voice recognition<\/i> dimana kamu hanya perlu mengatakan apa yang ingin kamu cari, dan tidak perlu mengetik seluruh kalimat. Di iOS, kamu dapat menanyakan kepada Siri mengenai kondisi cuaca hari ini. Hal-hal seperti ini dapat memudahkan pengguna untuk mencari suatu hal yang spesifik pada situs <i>web <\/i>atau aplikasimu.<\/p>\n<p>&nbsp;<\/p>\n<h2>7. Interaksi-Interaksi Mikro yang Bermakna<\/h2>\n<div id=\"attachment_2457\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2457\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/micro-interaction-facebook-reaction-640x334.jpg\" alt=\"\" width=\"640\" height=\"334\" \/><\/div>\n<p>Interaksi mikro adalah tanda atau isyarat visual kecil yang terjadi ketika pengguna melakukan tindakan tertentu. Tanda-tanda visual ini dapat berupa animasi atau transisi CSS (<i>Cascading Style Sheets<\/i>) yang sederhana. Misalkan, ketika kamu meng-<i>hover<\/i> sebuah tombol yang berwarna putih, tombol tersebut berubah warna menjadi merah. Perubahan-perubahan visual yang kecil seperti ini memberikan para pengguna sebuah perasaan bahwa mereka mengontrol apa yang terjadi di situs atau aplikasi, dan mengindikasi bahwa tindakan mereka mengembalikan sebuah reaksi. Inilah cara interaksi-interaksi mikro dapat meningkatkan UX dari situs dan aplikasimu.<\/p>\n<p>Contohnya yaitu Facebook Reactions. Emoji-emoji yang disediakan memberikan para pengguna cara yang baru untuk mengekspresikan perasaan mereka dengan lebih baik. Sebelum adanya fitur ini, beberapa pengguna mungkin merasa aneh untuk meng-<i>Like<\/i> sebuah <i>post <\/i>yang berisi pesan sedih atau duka. Hal yang perlu diingat, jangan menggunakan interaksi mikro hanya untuk keindahan semata, namun juga harus mengandung fungsi.<\/p>\n<p>&nbsp;<\/p>\n<h2>8. Menambahkan Animasi ke Tombol-Tombol Call-To-Action (CTA)<\/h2>\n<div id=\"attachment_2458\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2458 size-full\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/CTAscommon.png\" width=\"1000\" height=\"660\" \/><\/div>\n<p>Tombol-tombol CTA seperti \u201cRegistrasi sekarang!\u201d, \u201c<em>Buy Now<\/em>\u201d, dan lain-lain, adalah elemen penting yang menarik perhatian para pengguna dan menyebabkan mereka untuk mengambil tindakan. Dengan menambahkan pergerakan atau animasi yang halus, tombol-tombol CTA-mu dapat memicu para pengguna untuk menekannya.<\/p>\n<p>&nbsp;<\/p>\n<h2>9. Animasi yang Dipicu dengan Meng-Scroll Halaman<\/h2>\n<div id=\"attachment_2459\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2459\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/on-scroll-animation-mac-pro-640x480.jpg\" alt=\"\" width=\"640\" height=\"480\" \/><\/div>\n<p>Beberapa situs mengimplementasikan animasi-animasi yang unik, yaitu ketika kamu meng-<i>scroll<\/i> ke bawah suatu halaman, elemen-elemen visualnya mulai terbentuk. Hal inilah yang disebut <i>scroll triggered animations<\/i>. Metode ini sangat baik dan efektif untuk mendemonstrasikan suatu produk. Teknik ini juga dapat diimplementasikan pada situs <i>web <\/i>satu halaman (<i>one page website<\/i>) yang terbagi ke beberapa bagian atau <i>section<\/i>. Animasi digunakan untuk menunjukkan kepada para pengguna bagian apa yang sedang mereka lihat. Sebagai contoh, situs <a href=\"http:\/\/www.apple.com\/mac-pro\/\">Apple Mac Pro<\/a> yang menggunakan animasi untuk mendemonstrasikan produk mereka dari dalam hingga luar.<\/p>\n<p>&nbsp;<\/p>\n<h2>10. Less Is More<\/h2>\n<div id=\"attachment_2460\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2460\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/negative-space-gdiapers-640x261.png\" alt=\"\" width=\"640\" height=\"261\" \/><\/div>\n<p>Memenuhi situs <i>web <\/i>atau aplikasimu dengan terlalu banyak informasi, baik dalam bentuk teks maupun visual, adalah cara yang \u201cbaik\u201d untuk menyebabkan para penggunamu untuk segera meninggalkan situs tersebut. Hal ini tidak hanya meningkatkan <i>bounce rate<\/i> (rasio jumlah pengunjung yang hanya membuka satu halaman), namun juga mengurangi <i>conversion rate<\/i> (konversi pengunjung situs menjadi pelanggan yang membayar\/melakukan transaksi).<\/p>\n<p>Hal yang perlu kamu lakukan untuk menghindari hal ini, adalah menggunakan <i>negative space<\/i>, yaitu area putih atau kosong. <i>Negative space <\/i>memungkinkan para pengunjung mapun pengguna untuk berfokus pada konten inti, dan menghapus berbagai elemen yang tidak penting seperti gambar-gambar dan <i>sidebar<\/i> yang tidak berguna. Walaupun begitu, jangan hilangkan elemen-elemen yang penting seperti navigasi pada <i>header <\/i>ataupun <i>footer<\/i> pada situs <i>web<\/i>.<\/p>\n<p>&nbsp;<\/p>\n<h2>11. Desain yang Responsif Akan Usia Pengguna<\/h2>\n<div id=\"attachment_2461\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2461\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/elderly-people-on-computer5.jpg\" alt=\"\" width=\"1000\" height=\"858\" \/><\/div>\n<p>Pengguna-pengguna pada kelompok usia tertentu memiliki reaksi yang berbeda-beda pada konten, penempatan, dan desain tampilan. Cobalah meragamkan pengalaman yang kamu berikan kepada pengguna berdasarkan data yang kamu dapatkan mengenai usia pengguna dari aplikasi maupun situsmu untuk meningkatkan kualitas interaksimu dengan mereka.<\/p>\n<p>&nbsp;<\/p>\n<h2>12. Menggunakan Skeleton Screens<\/h2>\n<div id=\"attachment_2462\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2462\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-6.18.32-PM.jpg\" alt=\"\" width=\"680\" height=\"328\" \/><\/div>\n<p>Waktu <i>load <\/i>situs maupun aplikasi yang lama dapat membuat pengguna merasa kesal dan frustrasi. Karena itu, gunakanlah <i>skeleton screen<\/i>, dimana situs atau aplikasi meng-<i>load<\/i> halaman per bagian\/<i>section<\/i>, dari yang sederhana ke yang kompleks, sehingga pengguna maupun pengunjung dapat mengantisipasi data apa yang akan mereka lihat berikutnya, dan menjaga tingkat <i>bounce rate<\/i> seminimum mungkin.<\/p>\n<p>&nbsp;<\/p>\n<h2>13. Gunakan Desain Card-Based<\/h2>\n<div id=\"attachment_2463\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2463\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/card.jpg\" alt=\"\" width=\"680\" height=\"454\" \/><\/div>\n<p>Menggunakan kartu pada tampilan aplikasi atau situs <i>web<\/i>-mu dapat memberikan UX yang lebih baik dikarenakan mereka dapat menyediakan informasi dengan cukup efektif, yang menyeimbangkan antara keindahan dan kemudahan. Singkatnya, penggunaan format kartu membantu perancang untuk menampilkan berbagai konten dengan mulus. Tak hanya itu, desain dengan format ini diterjemahkan dengan cukup baik ke <i>mobile <\/i>maupun komputer. Mereka mudah untuk diskala ke atas maupun bawah untuk mengakomodasi ukuran layar yang berbeda-beda.<\/p>\n<p>&nbsp;<\/p>\n<h2>14. Gunakan Fluid Layout<\/h2>\n<div id=\"attachment_2464\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2464\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/fluid.jpg\" alt=\"\" width=\"500\" height=\"375\" \/><\/div>\n<p><i>Layout<\/i> tipe <i>fluid <\/i>memungkinkan aplikasi atau situs <em>web<\/em> untuk ditampilkan dengan benar pada layar dengan berbagai ukuran. Singkatnya, memungkinkan <i>responsiveness <\/i>dari situs maupun aplikasimu. Mayoritas komponen pada <i>layout <\/i>tipe ini memiliki persentase lebar sehingga dapat menyesuaikan diri dengan resolusi layar para pengguna.<\/p>\n<p>Beberapa ukuran lebar resolusi monitor komputer (dalam pixel) :<\/p>\n<ul>\n<li>1024<\/li>\n<li>1280<\/li>\n<li>1360<\/li>\n<li>1366<\/li>\n<li>1440<\/li>\n<li>1600<\/li>\n<li>1680<\/li>\n<li>1920<\/li>\n<li>2560 dan ke atas<\/li>\n<\/ul>\n<p>dan beberapa ukuran lebar untuk perangkat <i>mobile <\/i>:<\/p>\n<ul>\n<li>176<\/li>\n<li>240<\/li>\n<li>320<\/li>\n<li>360<\/li>\n<li>375<\/li>\n<li>480<\/li>\n<li>600<\/li>\n<li>768<\/li>\n<\/ul>\n<p><i>Layout <\/i>yang tidak responsif atau <i>fluid <\/i>dapat menyebabkan para pengguna tidak dapat menggunakan situs atau aplikasimu dengan benar ketika menggunakan perangkat dengan resolusi layar yang tidak sesuai.<\/p>\n<p>&nbsp;<\/p>\n<h2>15. Desain yang Konsisten<\/h2>\n<div id=\"attachment_2465\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2465\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-7.58.43-PM.jpg\" alt=\"\" width=\"679\" height=\"408\" \/><\/div>\n<p>Desain yang tidak konsisten dapat menjengkelkan pengguna karena dapat membingungkan mereka ketika menavigasi situs atau aplikasimu. Beberapa contoh konsistensi yang perlu kamu perhatikan :<\/p>\n<ul>\n<li>Gunakan warna yang sama untuk setiap tombol CTA (<i>Call to Action<\/i>).<\/li>\n<li>Jika kamu menggunakan <i>hamburger menu<\/i> sebagai metode navigasi untuk 1 halaman, maka semua halaman juga harus menggunakan format menu yang sama.<\/li>\n<li>Ukuran <i>padding <\/i>harus sama di setiap layar, dst.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>16. Tidak Harus Menghapus Semua Efek 3D<\/h2>\n<div id=\"attachment_2466\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2466\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-8.04.55-PM.jpg\" alt=\"\" width=\"680\" height=\"490\" \/><\/div>\n<p>Bagi kamu yang tertarik atau telah berkarir di bidang desain <i>web <\/i>maupun aplikasi <i>mobile<\/i>, mungkin sudah mengetahui bahwa efek 3D seperti gradien atau bayangan sudah tidak populer, dan sekarang ini yang sering digunakan adalah <i>flat design<\/i>, dikarenakan kini orang-orang lebih menyukai desain yang minimalis. Namun, dalam <i>flat design <\/i>2.0, efek seperti gradien dan bayangan masih dapat digunakan dengan tetap mempertahankan penampilan dan desain yang <i>flat<\/i>. Hal ini dapat kamu implementasikan seperti pada tombol-tombol CTA (<i>Call to Action<\/i>) dengan efek <i>shading <\/i>3D. Efek tersebut menyebabkan tombol-tombol tersebut terlihat lebih jelas dan terkesan <i>clickable<\/i>.<\/p>\n<p>&nbsp;<\/p>\n<h2>17. Menggunakan Teknik Upsell Marketing<\/h2>\n<div id=\"attachment_2467\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2467\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/ds-sustainer-upsell-mock-up.png\" alt=\"\" width=\"400\" height=\"362\" \/><\/div>\n<p>Jika situs atau aplikasi yang kamu buat bergerak dalam bidang penjualan produk atau <i>e-commerce<\/i>, kamu dapat menggunakan teknik <i>upsell marketing<\/i>, misalkan dengan menawarkan berbagai macam diskon <i>bundle<\/i> pada tahap <i>check-out<\/i>. Hal ini dapat mempersuasi pengguna atau pengunjung untuk \u201cmenghabiskan lebih\u201d.<\/p>\n<p>&nbsp;<\/p>\n<h2>18. Video Persuasi Real-Time<\/h2>\n<div id=\"attachment_2468\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-2468\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/bigstock-Businessman-Video-Conferencing-69569539-e1410551948582-767x511@2x-1024x682.jpg\" alt=\"\" width=\"848\" height=\"565\" \/><\/div>\n<p>Kini, beberapa perusahaan menggunakan video\u00a0<em>real-time<\/em><i> <\/i>dimana orang-orang membagikan pengalaman mereka dengan produk dari perusahaan yang bersangkutan, melakukan demonstrasi, dan mendorong para pengunjung atau pengguna untuk membeli produk tersebut. Hal ini dapat mendorong koneksi dan penjualan yang lebih baik.<\/p>\n<p>&nbsp;<\/p>\n<h2>19. Landing Page First<\/h2>\n<div id=\"attachment_2469\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2469\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/landing-page-icon.png\" alt=\"\" width=\"750\" height=\"467\" \/><\/div>\n<p>Pada tahun 2017 ini, penggunaan halaman <i>home<\/i> yang tradisional diperkirakan akan menurun, dan <i>landing page <\/i>menjadi semakin bervariasi berdasarkan kebutuhan para pengguna. Dengan mengirimkan pesan tertentu pada audiens tertentu segera setelah mereka mengunjungi situsmu, kamu dapat dengan lebih mudah mendorong mereka untuk melakukan transaksi, atau mengunjungi <i>section <\/i>tertentu dari situsmu.<\/p>\n<p>&nbsp;<\/p>\n<h2>20. Tunda Permintaan Registrasi Selama Mungkin<\/h2>\n<div id=\"attachment_2470\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2470\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-8.17.48-PM.jpg\" alt=\"\" width=\"652\" height=\"893\" \/><\/div>\n<p>Hal ini terbilang sangat penting. Pernahkah kamu mengunjungi suatu situs <i>web<\/i>, atau meng-<i>install<\/i> sebuah aplikasi <i>mobile<\/i>, dan segera setelah membukanya kamu langsung diminta untuk melakukan registrasi (<i>sign-up<\/i>)? Kebanyakan orang pastinya merasa tidak nyaman jika harus langsung memberikan data-data pribadi seperti alamat <i>e-mail<\/i>, tanpa terlebih dahulu mengetahui konten dari situs atau aplikasi tersebut. Hal ini terkesan memaksa. Karena itu, menurut Web Designer Depot, proses <i>sign-up<\/i> sebaiknya ditunda selama yang kamu mampu. Lebih baik fokuslah terlebih dahulu untuk mempersuasi pengunjung atau pengguna bahwa mereka akan mendapatkan nilai yang tinggi dari konten-konten yang disediakan. Dengan itu, mereka akan dengan senang hati memberikan data mereka dan melakukan registrasi.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Untuk poin-poin di bawah lebih berfokus pada desain UX aplikasi <i>mobile<\/i> :<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>21. Gunakan Menu-Menu yang Sederhana<\/h2>\n<div id=\"attachment_2471\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2471\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-3.18.28-PM.jpg\" alt=\"\" width=\"680\" height=\"584\" \/><\/div>\n<p>Perlu kamu ingat bahwa area pada halaman <i>mobile <\/i>atau <i>smartphone<\/i> sangat kecil, sehingga kamu tidak dapat menggunakan menu-menu <i>fly-out<\/i> yang besar. Semakin sedikit lapisan navigasi yang dimiliki dari menu aplikasimu, maka semakin mudah bagi para pengguna untuk menelusuri dan menjadi terbiasa dengan aplikasimu. Kamu dapat menggunakan <i>tab bar<\/i> di bagian bawah layar dengan icon-icon yang merepresentasikan <i>item-item <\/i>menu (misalkan yang terdapat pada aplikasi <i>mobile <\/i>Facebook). Kamu ingin penggunamu dapat menavigasi aplikasimu dengan mudah, hanya dengan jempol mereka.<\/p>\n<p>&nbsp;<\/p>\n<h2>22. Gunakan Progressive Onboarding<\/h2>\n<div id=\"attachment_2472\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2472\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-3.12.44-PM.jpg\" alt=\"\" width=\"680\" height=\"411\" \/><\/div>\n<p><i>Onboarding<\/i> adalah proses menunjukkan pengguna-pengguna baru bahwa aplikasimu dapat melakukan apa yang mereka mau dengan mudah dan efisien. <i>Onboarding<\/i> sangat krusial untuk tingkat konversi dan <i>retention<\/i> (terus menyimpan dan menggunakan aplikasimu) dari para pengguna. <i>Progressive onboarding <\/i>membimbing secara bertahap para penggunamu mengenai bagaimana seharusnya mereka menggunakan aplikasimu, dan dapat menjadi pengalaman belajar yang mendalam yang dapat meningkatkan penyesuaian pengguna terhadap aplikasimu.<\/p>\n<p>&nbsp;<\/p>\n<h2>23. Kurangi Jumlah Field pada Form Pengisian Data<\/h2>\n<div id=\"attachment_2473\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2473\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/form.jpg\" alt=\"\" width=\"680\" height=\"383\" \/><\/div>\n<p>Seperti yang telah disinggung pada poin 10, yaitu \u201c<i>less is more<\/i>\u201d<i>, <\/i>hal yang sama juga berlaku pada <i>form <\/i>pengisian data. Kurangilah <i>field-field <\/i>yang bersifat opsional. Hal ini akan meningkatkan UX dari aplikasimu karena mengurangi kemungkinan dari penggunamu teralihkan perhatiannya oleh notifikasi yang muncul dari aplikasi lain \u2013 sebelum berhasil mengisi seluruh <i>field<\/i>. Hapuslah <i>field <\/i>yang secara spesifik tidak relevan atau berhubungan dengan tujuan pengguna pada halaman yang bersangkutan.<\/p>\n<p>&nbsp;<\/p>\n<h2>24. Desain yang Predictable<\/h2>\n<div id=\"attachment_2474\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2474\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-5.41.47-PM.jpg\" alt=\"\" width=\"680\" height=\"599\" \/><\/div>\n<p>Prediktibilitas di sini bukan berarti aplikasimu harus terlihat sama dengan aplikasi lainnya. Namun aplikasimu sebaiknya memiliki desain dimana pengguna-penggunamu dapat memprediksi bagaimana cara menggunakan atau berinteraksi dengan tampilan atau UI (<i>user interface<\/i>) aplikasimu. Prediktibilitas ini berdasarkan prinsip desain yang <i>timeless<\/i> yang mengurangi kemungkinan kesalahan penggunaan. Beberapa contoh dari prediktibilitas ini yaitu :<\/p>\n<ul>\n<li>Navigasi bersifat horizontal atau vertikal.<\/li>\n<li>Icon-icon terlihat dengan jelas dan dapat ditekan dengan mudah dengan jari.<\/li>\n<li>Konten dapat di-<i>scroll<\/i> dengan mudah menggunakan jempol.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>25. Desain yang Berfokus pada Penggunaan dengan Satu Tangan<\/h2>\n<div id=\"attachment_2475\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2475\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-5.45.30-PM.jpg\" alt=\"\" width=\"680\" height=\"558\" \/><\/div>\n<p>Studi menunjukkan bahwa mayoritas pengguna aplikasi menavigasi aplikasi mereka dengan 1 tangan. Hal ini perlu menjadi prioritas ketika mendesain UX. Kebanyakan orang tidak mau menggunakan 2 tangan untuk melakukan tindakan yang sederhana dalam sebuah aplikasi \u2013 misalnya ketika melakukan <i>checkout<\/i>, atau meng-<i>scroll<\/i> ke bawah untuk membaca artikel. Untuk UX yang benar-benar optimal, pastikan para pengguna dapat menavigasi aplikasimu hanya dengan jempol pada 1 tangan mereka. Dan tentu saja ukuran dari setiap icon atau menu harus dalam ukuran yang dapat dengan mudah diklik dengan ujung jari.<\/p>\n<p>&nbsp;<\/p>\n<h2>26. Gunakan Pola atau Elemen Mobile yang Familiar<\/h2>\n<div id=\"attachment_2476\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2476\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-8.02.43-PM.jpg\" alt=\"\" width=\"662\" height=\"601\" \/><\/div>\n<p>Pada saat menggunakan aplikasi <i>mobile<\/i>, kamu mungkin akan menemukan banyak pola atau elemen yang <i>familiar <\/i>dan sering digunakan di aplikasi-aplikasi <i>mobile <\/i>pada umumnya. Menggunakan elemen atau pola yang <i>familiar <\/i>ini dapat memberikan efek positif untuk UX aplikasimu, karena para pengguna mengetahui cara menggunakannya. Beberapa contohnya :<\/p>\n<ul>\n<li><i>Slider<\/i><\/li>\n<\/ul>\n<ul>\n<li><em>Popover<\/em><\/li>\n<\/ul>\n<ul>\n<li><em>Sidebar<\/em><\/li>\n<\/ul>\n<ul>\n<li><em>Gesture<\/em><\/li>\n<\/ul>\n<ul>\n<li><em>Animation<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>27. Desain yang Meningkatkan Kemudahan Membaca<\/h2>\n<div id=\"attachment_2477\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2477\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-8.11.44-PM.jpg\" alt=\"\" width=\"679\" height=\"411\" \/><\/div>\n<p>Layar <i>mobile<\/i> terbilang kecil, karena itu aplikasimu harus memilih dan menggunakan tipografi yang mudah dibaca dan tidak memberatkan mata para pengguna. Menurut UXmatters, ukuran-ukuran tulisan yang tepat untuk berbagai perangkat <i>mobile <\/i>:<\/p>\n<ul>\n<li>Setidaknya ukuran 4-<i>point <\/i>untuk <i>smartphone <\/i>kecil.<\/li>\n<li>Setidaknya ukuran 6-<i>point <\/i>untuk <i>smartphone <\/i>besar.<\/li>\n<li>Minimum ukuran 7-<i>point <\/i>untuk <i>phablet<\/i>.<\/li>\n<li>Setidaknya ukuran 8-<i>point<\/i> untuk <i>tablet <\/i>kecil.<\/li>\n<li>Setidaknya ukuran 10-<i>point <\/i>untuk <i>tablet <\/i>yang lebih besar.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>28. Bagi Konten-Konten Ke Dalam Beberapa Potongan<\/h2>\n<div id=\"attachment_2478\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2478\" src=\"http:\/\/www.filemagz.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2016-12-08-at-8.14.00-PM.jpg\" alt=\"\" width=\"680\" height=\"330\" \/><\/div>\n<p>Dengan membagi kontenmu, para pengguna dapat dengan lebih mudah memilah mana bagian yang penting dari setiap halaman sehingga meningkatkan <i>retention<\/i> dan UX mereka. Beberapa metode dimana kamu dapat membagi-bagi (<i>chunk<\/i>) kontenmu :<\/p>\n<ul>\n<li>Menggunakan anak judul (<i>subheading<\/i>).<\/li>\n<li>Penebalan (<i>bolding<\/i>)<\/li>\n<li>Poin-poin titik (<i>bullet point<\/i>).<\/li>\n<li>Paragraf yang lebih kecil atau pendek untuk memfasilitasi <i>scanning <\/i>dan <i>skimming<\/i> (membaca cepat).<\/li>\n<\/ul>\n<p>Membagi-bagi konten seperti ini juga dapat membuat sebuah hirarki untuk meningkatkan kualitas membaca. Sebagai contoh, para pengguna biasanya membaca <i>subheading<\/i> terlebih dahulu, dan setelah itu mereka dapat menentukan apakah konten tersebut ingin mereka baca atau ikuti.<br \/>\nTerakhir, kamu juga dapat menggunakan referensi dan pedoman yang tersedia untuk sistem operasi tertentu seperti iOS dan Android agar aplikasi-aplikasi yang kamu buat dapat bekerja dengan baik pada <i>platform<\/i> yang bersangkutan.<\/p>\n<p>&nbsp;<\/p>\n<p>Nah, itulah berbagai tips dan panduan mendesain UX yang baik bagi situs <i>web <\/i>maupun aplikasi <i>mobile<\/i>-mu. Tentu saja semua hal ini harus disesuaikan dengan apa yang ingin kamu buat, sehingga tidak semua tips ini perlu kamu implementasikan. Walaupun begitu diharapkan semua poin dalam artikel ini dapat menjadi pedoman mengenai apa yang baik untuk digunakan, dan apa yang tidak ketika kamu ingin membuat bisnis berdasarkan aplikasi atau <i>web<\/i>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bagi kamu yang tertarik dengan startup pada bidang aplikasi mobile ataupun web, dan ingin mengembangkan sendiri aplikasi-aplikasi tersebut, hal-hal lain yang perlu kamu perhatikan dari perancangan fitur-fitur inti dari aplikasimu, diantaranya adalah perancangan pengalaman yang diberikan kepada para pengguna ketika menggunakannya (User Experience\/UX). Hal ini, jika kamu maksimalkan dan rancang sebaik mungkin, akan menjadi sebuah [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":3,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/posts\/180\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bncc\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}