Onboarding pada Aplikasi Mobile


Bismillaah…

Kalau diingat-ingat ternyata sudah hampir sembilan tahun saya “menjadi praktisi pengamat” dunia mobile apps. Mulai dari platform aplikasi Java MIDP 1.0 yang jadoel berat, teknologi Symbian yang terlihat “ngeri” di saat Nokia masih memegang >70% market share penjualan handphone di Indonesia, hingga masa smartphone Android dan iOS yang kini tengah berjaya di atas angin. Namun sekarang saya tidak membahas apa saja teknologi yang terlibat di dalamnya, apalagi membahas seberapa tua matang umur saya karena sempat mengalami masa-masa dimana game Snake menjadi legenda. Yang akan saya bahas adalah salah satu bagian kecil dari UX/UI design di mobile apps, yaitu bagian intro.

Splashscreen (only) is already an old fashioned style

Jika kita amati, satu bagian yang selalu ada dan selalu muncul pertama kali pada saat aplikasi mobile (versi klasik) dijalankan adalah Splashscreen, yaitu sebuah halaman (page) yang biasanya menampilkan logo atau brand aplikasi, dan diperlihatkan selama beberapa detik. Ide awal pembuatan Splashscreen ini sebenarnya adalah bertujuan untuk mengkamuflasekan proses-proses yang dijalankan secara background, seperti: load data dari server, load graphic assets ke memori, sign-in processsynchronize contacts, dan sejenisnya. Sehingga tidak heran jika ada beberapa aplikasi yang turut menyematkan progress atau loading bar pada Splashscreen-nya sekaligus sebagai sarana feedback bagi user terkait proses-proses tersebut. Apakah ada yang salah dengan Splashscreen ini? Tentu tidak, buktinya sampai sekarang hampir semua aplikasi juga masih menggunakan Splashscreen. Hanya saja, trennya sekarang ditambah satu bagian pelengkap lainnya yang disebut Onboarding.

Thematic approach, Onboarding…

Onboarding dalam dunia mobile UX/UI adalah elemen visual yang ditampilkan sedemikian rupa sehingga dapat meng-encourage user untuk melakukan proses-proses mandatory atas kemauan sendiri, tidak terkesan dipaksakan, sekaligus menstimulusnya agar dapat belajar bagaimana menggunakan aplikasi dengan mudah, baik secara langsung maupun tidak. Contoh proses mandatory yang paling populer untuk aplikasi user based adalah sign-up atau register. Keperluannya jelas, untuk profiling. Sebab tanpa user profile, aplikasi-aplikasi seperti social mediachat, atau aplikasi jenis lain yang berbasis akun, jelas tidak akan berguna, karena faktor identitas menjadi penting ketika kita berbicara dalam lingkup area tersebut. Di sinilah peran onboarding diperlukan. Bagaimana user merasa tertarik untuk melakukan registrasi, bagaimana user dengan nyaman mengikuti step by step petunjuk penggunaan aplikasi, dan bagaimana nantinya user akan kembali menggunakan aplikasi, lagi dan lagi. Itulah target utama dibuatnya onboarding.

Pada implementasinya, onboarding seringkali menjadi jembatan yang “manis” antara kepentingan dari sisi developer (user profilingtrafficpayment) dan kebutuhan dari sisi user (benefitenjoy to usefun). Seperti halnya jika kita hendak berkenalan dengan seorang cewek, jika kesan pertama tampak begitu keren, maka untuk proses pengakraban ke tahap selanjutnya pasti akan lebih mudah. Jika cara perkenalannya benar, maka bukan tidak mungkin kita bisa mendapatkan nama, status, bahkan nomer hape dengan mudah. Si cewek pun tidak akan merasa terintimidasi dengan pendekatan kita. Hehehe… (analogi yang sedikit dipaksakan, walaupun benar adanya)

Berikut adalah beberapa model onboarding beserta contoh-contoh aplikasi yang memanfaatkannya.

  1. Tutorial
    Model paling umum yang digunakan untuk mengenalkan fitur-fitur aplikasi secara berurutan (sekuensial). Biasanya, berbentuk tampilan statis berupa tips terkait penggunaan aplikasi, atau sekadar mensimulasikan fitur-fiturnya.
    Beberapa contoh aplikasi yang menerapkan model ini adalah MailBoxPaperless PostPocketGoogle Search (klik link untuk melihat contoh tampilannya).
    Image Image Image Image Image 
  2. Walktrough
    Yang kedua adalah walktrough yang artinya user sedikit “dipaksa” untuk mengikuti kemauan si pembuat aplikasi dalam menggunakannya. Dengan walktrough ini diharapkan kondisi blank slate tidak terjadi. Pernahkah kita mengalami kondisi ketika pertama kali menggunakan sebuah aplikasi, namun datanya masih kosong? Tidak ada updates, tidak ada sesuatu yang cukup asyik dalam menggugah kita untuk menggunakan aplikasi? Inilah yang disebut kondisi blank slate.
    Contoh aplikasi yang memanfaatkan walktrough untuk onboarding adalah Vine, dan Tumblr (klik link untuk melihat tampilannya).
    Image Image Image Image Image Image Image Image 
  3. Screen Overlay
    Model ini mempunyai ciri khas memanfaatkan komponen UI yang sengaja dibuat mencolok agar cukup menarik perhatian si user. Biasanya digunakan efek redup vs terang agar terlihat mana bagian yang dianggap penting oleh user.
    Contoh aplikasi populer yang menggunakan konsep ini adalah Path, khususnya di bagian tutorial.
    Image Image Image 
  4. Inline Hinting
    Uniknya, tampilan onboarding tidak selalu harus dipisahkan dengan tampilan utama. Bisa saja kita mendesain onboarding sebagai elemen-elemen yang kita sisipkan di komponen UI utama. Elemen-elemen onboarding ini akan tetap muncul jika user masih dianggap cukup “baru” oleh sistem. Tentu saja yang menentukan kriteria “baru” ya si developer. Apakah berlaku untuk semua fitur, ataukah berlaku hanya untuk fitur-fitur tertentu saja. Bebas, yang penting tidak mengganggu user ketika menggunakan aplikasi.
    Image

Sebenarnya satu aplikasi tidak harus “saklek” mengikuti satu model onboarding saja, melainkan dapat dikombinasikan untuk memperoleh impact yang optimal. Namun yang perlu digarisbawahi, onboarding tidak wajib diimplementasikan. Ada banyak aplikasi yang sudah cukup sukses walaupun tanpa onboarding.

Berikut beberapa referensi yang menurut saya sangat keren dan maut: http://uxarchive.com/tasks/onboarding.

——————-

Sumber:

http://uxarchive.com/tasks/onboarding

http://sixrevisions.com/user-experience-ux/onboarding-techniques-examples/

http://insideintercom.io/strategies-for-onboarding-new-users/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s