Pada artikel kali ini, kita akan membahas cara untuk membuat user flow. Mengenai apa itu user flow bisa disimak di artikel berikut: https://medium.com/insightdesign/memahami-user-flow-d8f97d30816
Langsung saja ya…
Kita akan merancang user flow untuk fitur registrasi atau pendaftaran dengan menggunakan nomor handphone.
Untuk membuat user flow , ada beberapa langkah:
- Mengetahui Kebutuhan fitur
- Membuat langkah langkah yang harus dilakukan oleh user
- Membuat Gambaran besar user flow
- Pembuatan Sketsa
- Membuat UI berdasarkan sketsa
1. Mengetahui Kebutuhan untuk fitur ini
Untuk mempermudah memahami kebutuhan fitur, coba posisikan sebagai user, dan bayangkan apa saja yang bisa dilakukan oleh user. Contohnya seperti ini:
- Sebagai user, saya bisa melakukan pendaftaran dengan menggunakan nomor handphone
- Sebagai user, saya bisa melakukan verifikasi untuk membuktikan bahwa saya adalah pemilik asli nomor handphone tersebut
2. Membuat langkah langkah yang harus dilakukan oleh user
Ini adalah proses perancangan skenario bagaimana user akan menggunakan fitur ini. Yang harus kita perhatikan adalah user harus melewati proses nya dengan nyaman dan semua kebutuhan fitur nya terpenuhi.
Untuk fitur pendaftaran dengan menggunakan nomor handphone, langkah langkahnya bisa kita buat seperti berikut:
Langkah 1 — User membuka aplikasi
Langkah 2 — User memasukkan nomor handphone nya
Langkah 3 — User melakukan proses verifikasi. Untuk proses verifikasi nya, user cukup memasukkan kode yang dikirimkan oleh sistem melalui sms.
Langkah 4 — Ketika proses verifikasi nya gagal, user akan diberikan pesan. Jika proses verifikasinya berhasil, user akan diarahkan ke halaman utama aplikasi
3. Membuat Gambaran besar User Flow
Setelah membuat langkah langkah, kita bisa mengubah langkah langkah tersebut menjadi sebuah gambaran besar seperti dibawah ini
Untuk membuat gambaran nya , Anda bisa melakukannya dengan kertas dan pensil atau dengan spidol dan papan tulis.
Dengan membuat gambaran besar, kita dengan mudah melihat seberapa besar desain yang akan kita rancang, kita juga dengan mudah menganalisa apakah langkah langkah yang dilewati user terlalu panjang atau tidak.
4. Pembuatan Sketsa
Siapkan kertas dan pensil, di tahap ini kita akan merancang User Interface yang akan dilihat oleh user di setiap langkah nya.
Langkah 1 — User membuka aplikasi
Pada langkah ini, kita akan membuat sketsa untuk tampilan awal ketika aplikasi pertama kali dibuka.
Dengan tombol untuk melakukan pendaftaran dan juga tombol untuk melakukan login. Kurang lebih begini sketsa nya
Langkah 2— User memasukkan nomor handphone nya
Kunci membuat wireframe adalah fokus pada apa hal yang harus dilakukan atau diperhatikan oleh user.
Pada langkah ini kita bisa membuat sketsa yang menginformasikan user untuk mengisikan nomor handphone nya dan juga mendesain elemen untuk memasukkan nomor handphone.
Langkah 3 — User melakukan proses verifikasi. Untuk proses verifikasi nya, user cukup memasukkan kode yang dikirimkan oleh sistem melalui sms.
Pada langkah ini kita bisa membuat sketsa yang menginformasikan user bahwa sistem telah mengirimkan kode verifikasi melalui sms dan user tinggal memasukkan kode tersebut ke kolom yang telah disediakan
Langkah 4 — Ketika proses verifikasi nya gagal, user akan diberikan pesan. Jika proses verifikasinya berhasil, user akan diarahkan ke halaman utama aplikasi
Pada langkah ini kita bisa membuat sketsa yang menginformasikan user bahwa kode verifikasi yang dimasukkannya salah. Dan juga kita juga bisa membuat sketsa untuk kondisi kode verifikasi yang dimasukkannya tepat
Setelah semua sketsa selesai dibuat, kini saatnya menyatukan semuanya, dan akan tampak seperti dibawah ini.
5. Membuat UI dari sketsa
Setelah kita selesai membuat sketsa, langkah berikutnya adalah tahapan paling menyenangkan bagi UI Designer. Yaitu membuat desain UI.
Berikut adalah hasil desain UI dari sketsa diatas
Kok struktur design nya beda dari wireframe?
Tujuan wireframe adalah untuk menempatkan informasi dan elemen elemen yang akan digunakan oleh user. Sehingga kita tahu apa saja elemen dan informasi yang dibutuhkan.
Ketika proses mengubah wireframe menjadi UI, kita memang berpatokan pada wireframe, tetapi secara layout kita boleh mengubah ubah nya. Asalkan informasi dan elemen nya tetap terlihat jelas.
Semoga bermanfaat :)
