Peretasan UI sederhana untuk meningkatkan Onboarding UX [OCD]

Mockup dan sketsa UI menganggap bahwa data pengguna sudah ada. Misalnya, mockup di bawah ini mengasumsikan bahwa pengguna akan memiliki kontak untuk diajak ngobrol, pemberitahuan dan bahkan utas obrolan.

Simple messenger ui dibangun menggunakan sumber daya sketsa gratis ini

Tapi ini tidak pernah terjadi ketika pengguna mendaftar. Pada awalnya, tidak ada data, jadi kolom kontak kosong dan jendela obrolan kosong.

Desain UI mengkilap membuatnya mudah untuk mengkonsumsi informasi dan tidak fokus pada cara membuat informasi itu.

Saya belajar ini dengan cara yang sulit ketika saya merendam Dribbble sebanyak yang saya bisa untuk merancang dasbor untuk aplikasi b2b. Itu tampak hebat di Sketch, tetapi pelanggan kami tidak dapat menemukan jalan mereka.

UX yang buruk meningkatkan on-boarding dan biaya dukungan, yang secara langsung memengaruhi pendapatan. Rasanya tidak enak melihat pengguna yang berjuang untuk mengkonsumsi desain pixel sempurna Anda. Mengingatkan Anda bahwa Anda gagal.

Solusi yang Ada

Salah satu solusinya adalah memiliki muka di muka menggunakan antarmuka seperti slide. Ini tampaknya menjadi standar untuk aplikasi seluler.

UX on-boarding berbasis slide dari Slack

Masalah dengan pendekatan slide adalah kurangnya konteks. Anda hanya bisa menyampaikan begitu banyak pada slide (berapa banyak pengguna mempertahankan pertanyaan yang berbeda).

Sangat bagus untuk memberikan gambaran umum tentang produk, tetapi tidak terlalu membantu dalam menjelaskan cara kerja produk. Itu tidak relevan untuk kasus penggunaan saya, karena kompleksitas produk tidak dapat diringkas menjadi beberapa slide.

Ada juga solusi berbasis tooltip yang menuntun pengguna melalui langkah-langkah spesifik. Opsi ini lebih populer dengan aplikasi web. Ada banyak pustaka javascript yang bagus untuk membantu Anda membangun alur ini.

Demo on-boarding berdasarkan tooltip untuk introjs.com/

Sejauh solusi berbasis tooltip berjalan, saya menemukan mereka menjengkelkan dan hampir selalu mengklik "lewati tutorial". Padahal perusahaan besar seperti Canva menggunakan tooltip berdasarkan on-boarding. Sebuah produk bernama AppCues memungkinkan Anda mendesain tooltips ini tanpa kode, rapi.

Ada juga ada pendekatan gaya suar, di mana fitur-fitur yang biasanya disalahpahami diberi label suar bercahaya, yang memberikan informasi yang relevan ketika (jika) diperlukan.

Ini adalah cara yang paling tidak mengganggu. Tidak seperti tooltip yang mendorong tutorial 17 langkah ke tenggorokan Anda dan menghilang ketika Anda benar-benar membutuhkannya, pendekatan berbasis hotspot ini memberikan info saat Anda siap.

Layak disebutkan bahwa Slack menggunakan semua 3 bentuk itu. Tidak heran penggunanya tetap. Yang entah bagaimana mengisyaratkan fakta bahwa retensi berbanding lurus dengan kemudahan naik pesawat.

OCD alias desain sentris Onboarding

Saya suka menyebutkan hal-hal. Nama membantu mewujudkan ide dalam pikiran. Jadi mari kita sebut desain sentris Onboarding ini.

Saya menginginkan solusi yang:

  • Apakah relevan dengan konteksnya
  • Tidak mengganggu (tidak ada yang suka mengambil 17 langkah untuk mempelajari cara kerja fitur)
  • Tidak mengganggu (seperti suar)
  • Mudah dikonsumsi (tooltips tidak mudah dikonsumsi)

Hasil

Saya hanya mulai mendesain keadaan. Desain obrolan yang Anda lihat saat mulai membaca artikel ini dapat dirancang dengan tiga status.

Negara 1: Tidak ada kontak

Status 2: Kontak ada, tetapi tidak ada obrolan

Status 3: Obrolan dan kontak ada

Tujuan setiap negara adalah untuk meningkatkan pengguna ke negara berikutnya. Ketika pengguna telah maju ke status 3, ia berhasil naik ke pesawat. Mempertimbangkan maket obrolan, tujuan untuk setiap negara adalah sebagai berikut:

Sasaran Negara 1: Pengguna utama untuk menambahkan kontak

Maket di bawah ini hanya memiliki satu ajakan untuk bertindak, tombol tambah biru yang memungkinkan pengguna menambahkan kontak baru. Grafik dan teks keduanya membuat pengguna prima untuk mengambil tindakan itu.

Status 1 - Unggulkan pengguna untuk menambahkan kontak (ilustrasi oleh undraw.co)

Setelah kontak ditambahkan, kita dapat memulai tujuan kedua.

Sasaran Negara 2: Pengguna utama untuk memulai obrolan

Maket di bawah ini menunjukkan memiliki primer grafis untuk memulai obrolan. Ini secara eksplisit menguraikan fitur yang tersedia. Sekali lagi, hanya ada satu hal yang dapat Anda lakukan sekarang, yaitu mengirim pesan. Anda juga dapat melakukan panggilan di UI ini, tetapi kedua tindakan ini memiliki tujuan yang sama. Mereka membawa pengguna Anda ke langkah 3.

Status 2 - Kontak ditambahkan, prima untuk memulai obrolan

Sasaran Negara 3: Tidak ada, pengguna ada di dalam kapal - semua isyarat akan hilang

Dan akhirnya, ketika pengguna Anda telah mengulangi proses beberapa kali, UI-nya akan mulai mencari seperti yang kami maksudkan semula.

Status 3 - Pengguna berhasil naik

Manfaat dari pendekatan ini

  • Dibandingkan dengan pendekatan slide pada langkah 1, Onboarding Centric Design (OCD) menyajikan konten dalam potongan. Informasi tersedia pada saat pengambilan keputusan.
  • Pendekatan ini dapat digunakan pada perangkat seluler dan desktop. UI ini sederhana, tetapi untuk UI yang kompleks, Anda dapat menggunakan OCD dengan hotspot untuk meningkatkan CTA.
  • Pendekatan ini meningkatkan UX Anda sejak awal, dengan memaksa Anda untuk berpikir dalam hal perjalanan pengguna.
  • Jika Anda menulis frontend Anda menggunakan React, pendekatan ini cocok dengan arsitektur komponennya.

Jadi sebagai aturan praktis:

Desain maket untuk negara.
Setiap negara memiliki satu tujuan - maju ke negara berikutnya.
Keadaan terakhir adalah saat pengguna Anda berada di pesawat.

Terima kasih sudah membaca :)

Hai, jika Anda menyukai artikel ini dan ingin terus diperbarui, ikuti saya di: Medium, Github atau Twitter

Saya menjalankan komunitas slack (yang memiliki 18 anggota pada 6 Oktober 2018) di mana Anda dapat membantu orang lain atau menerima bantuan mengenai frontend, backend, dan pengembangan secara umum. Anda bisa bergabung di sini.