Hack UI mudah untuk memperbaiki Onboarding UX [OCD]

UI Mockups dan lakaran mengandaikan bahawa data pengguna sudah ada. Sebagai contoh, mockup di bawah mengandaikan bahawa pengguna akan mempunyai kenalan untuk bersembang dengan, pemberitahuan dan juga thread sembang.

Ui messenger mudah dibina menggunakan sumber lakaran percuma ini

Tetapi ini tidak akan berlaku apabila pengguna mendaftar. Pada mulanya, tidak ada data, jadi lajur kenalan kosong dan tetingkap sembang kosong.

Reka bentuk UI berkilat memudahkan untuk mengambil maklumat dan tidak menumpukan perhatian kepada cara membuat maklumat tersebut.

Saya belajar ini dengan cara yang sukar apabila saya merendam sebanyak Dribbble yang saya dapat merancang papan pemuka untuk aplikasi b2b. Ia kelihatan hebat pada Sketsa, tetapi pelanggan kami tidak dapat mencari jalan mereka.

Bad UX meningkatkan kenaikan harga kos dan sokongan, secara langsung menjejaskan pendapatan. Ia juga terasa buruk untuk melihat pengguna yang berjuang untuk menggunakan reka bentuk piksel anda yang sempurna. Mengingatkan anda bahawa anda gagal.

Penyelesaian yang ada

Salah satu penyelesaiannya ialah untuk memiliki pendahuluan di papan tulis menggunakan slaid seperti antara muka. Ini nampaknya menjadi standard bagi aplikasi mudah alih.

Slack berasaskan slaid berasaskan on-board UX

Masalah dengan pendekatan slaid adalah kekurangan konteks. Anda boleh menyampaikan begitu banyak pada slaid (berapa banyak yang dikekalkan pengguna adalah soalan yang berbeza).

Ia bagus untuk memberikan gambaran keseluruhan produk, tetapi tidak begitu membantu dalam menerangkan bagaimana produk berfungsi. Ia tidak relevan untuk kes penggunaan saya, kerana kerumitan produk tidak boleh direbus ke beberapa slaid.

Terdapat juga penyelesaian berasaskan tooltip yang berjalan pengguna melalui langkah-langkah tertentu. Pilihan ini lebih popular dengan apl web. Terdapat banyak perpustakaan javascript yang baik untuk membantu anda membina aliran ini.

Petua berasaskan papan tulis untuk introjs.com/

Setakat penyelesaian berasaskan tooltip, saya mendapati mereka menjengkelkan dan hampir selalu mengklik "melangkau tutorial". Walaupun syarikat-syarikat besar seperti Canva menggunakan tooltip berasaskan on-boarding. Sebuah produk yang dipanggil AppCues membolehkan anda merancang alat-alat ini tanpa kod, kemas.

Terdapat juga pendekatan gaya suar, di mana ciri-ciri yang sering difahami adalah dilabelkan dengan suar bersinar, yang memberikan maklumat yang relevan apabila (jika) diperlukan.

Ini adalah cara yang paling tidak mengganggu. Tidak seperti petua alat yang menjejaskan tutorial 17 langkah ke bawah tekak anda dan hilang apabila anda benar-benar memerlukannya, pendekatan berdasarkan hotspot ini memberikan info apabila anda sudah bersedia.

Perlu menyebutkan bahawa Slack menggunakan semua 3 bentuk. Tidak hairanlah pengguna mereka melekat. Yang juga memberi petunjuk kepada hakikat bahawa pengekalan berkadaran secara langsung dengan kemudahan di papan tulis.

OCD aka Reka bentuk sentris yang diselaraskan

Saya suka menamakan perkara. Nama-nama membantu mewujudkan idea dalam minda. Oleh itu, mari kita sebutkan Reka bentuk sentrik Onboarding ini.

Saya mahukan penyelesaian yang:

  • Adakah relevan dengan konteksnya
  • Tidak menyakitkan (tidak ada yang suka mengambil 17 langkah untuk mengetahui bagaimana ciri berfungsi)
  • Tidak mengganggu (seperti suar)
  • Adalah mudah untuk digunakan (tooltip tidak mudah dikonsumsi)

Hasilnya

Saya hanya mula merancang negeri. Reka bentuk sembang yang anda lihat ketika anda mula membaca artikel ini boleh dirancang dengan tiga negara.

Negeri 1: Tiada kenalan yang hadir

Negeri 2: Kenalan hadir, tetapi tiada perbualan

Nyatakan 3: Kedua-dua perbualan dan kenalan hadir

Matlamat setiap negeri adalah untuk memajukan pengguna ke keadaan seterusnya. Apabila pengguna telah berkembang untuk menyatakan 3, dia berjaya ditempah. Memandangkan mockup sembang, matlamat untuk setiap negeri adalah seperti berikut:

Matlamat Negeri 1: Pengguna Perdana untuk menambah kenalan

Mockup di bawah ini hanya mempunyai satu panggilan untuk tindakan, butang tambah biru yang membolehkan pengguna menambah kenalan baru. Grafik dan teks kedua utama pengguna untuk mengambil tindakan itu.

State 1 - Perdana pengguna untuk menambah kenalan (ilustrasi oleh undraw.co)

Apabila kenalan telah ditambah, kita boleh memulakan gol kedua.

Matlamat Negeri 2: Pengguna Perdana untuk memulakan sembang

The mockup di bawah menunjukkan mempunyai primer grafik untuk memulakan sembang. Ia secara jelas menggariskan ciri-ciri yang ada. Sekali lagi, hanya ada satu perkara yang boleh anda lakukan sekarang, iaitu menghantar mesej. Anda juga boleh membuat panggilan di UI ini, tetapi kedua-dua tindakan ini memberi maksud yang sama. Mereka membawa pengguna anda ke langkah 3.

Negeri 2 - Hubungi ditambah, utama untuk memulakan sembang

Matlamat Negeri 3: Tidak ada, pengguna adalah on-boarded - semua isyarat harus lenyap

Dan akhirnya, apabila pengguna anda telah mengulangi proses beberapa kali, UInya akan mula mencari jalan yang kami mulakan.

State 3 - Pengguna berjaya naik

Manfaat pendekatan ini

  • Berbanding dengan pendekatan slaid di langkah 1, Reka Bentuk Centric Onboarding (OCD) membentangkan kandungan dalam ketulan. Maklumat ini boleh diperolehi semasa membuat keputusan.
  • Pendekatan ini boleh digunakan pada kedua-dua peranti mudah alih dan desktop. UI ini mudah, tetapi dalam kes UI yang kompleks, anda boleh menggunakan OCD dengan hotspot untuk meningkatkan CTA.
  • Pendekatan ini meningkatkan UX anda di tempat pertama, dengan memaksa anda berfikir dari segi perjalanan pengguna.
  • Sekiranya anda menuliskan frontends anda menggunakan React, pendekatan ini sesuai dengan senibina komponennya.

Jadi sebagai peraturan ibu:

Reka bentuk reka bentuk untuk negeri-negeri.
Setiap negeri mempunyai satu matlamat - kemajuan ke negeri seterusnya.
Keadaan terakhir ialah apabila pengguna anda berada dalam keadaan pas.

Terima kasih untuk membaca :)

Hai, jika anda suka artikel ini dan ingin terus dikemas kini, ikuti saya pada: Medium, Github atau Twitter

Saya menjalankan komuniti yang lemah (yang mempunyai 18 ahli pada 6 Oktober 2018) di mana anda boleh membantu orang lain atau menerima bantuan mengenai frontend, backend, dan pembangunan secara umum. Anda boleh menyertainya di sini.