ux ui reference - citcall ux guidelines v1.3.pdfgambar penjelasan akan di misscall. hindari kata...
TRANSCRIPT
UX UI REFERENCE v. 1.3
UI/UX GUIDELINES RECOMMENDATION using miscall as one time passwords
As per 18 April 2019 (Updated v1.3)
We will describe & check list of the best configuration & UI/UX Best case for CITCALL Miscall OTP for One Time Password (OTP) that been used by our clients.
By using OTPs, you can increase the system security.
You can get the feel of our UI/UX at citcall.com/demo
CONFIGURATION SERVER SIDE
You have to set interconnection timeout to 60 seconds.
Your application server must support HTTP request.
To send a message to the CITCALL servers, your application server must create an HTTP POST message.
Your server’s IP must be registered in CITCALL servers; you can whitelist your IP on CITCALL dashboard.
To get the Delivery status, please register your URL Callback to Citcall’s Account Manager
You can view CITCALL API Documentation at http://docs.citcall.com .
Using last 4 digit callerid as OTP.
You can get OTP from respond parameter token, as example “622130123456” so you can pick last 4 digits (or 6 digits) from token parameter.
2. Gambar penjelasan
Penjelasan sebelum misscall agar
user mengerti akan menerima
misscall sebagai OTP
(bila user sudah terbiasa, langkah ini
dapat dilewati)
4. Sinyal Sibuk
Bila melakukan retry untuk ke 2x
User diberi info bila sinyal tidak ada
atau nomor invalid
Sehingga user mengerti dan bisa
mencari sinyal lebih baik
1. Input nomor Telepon
Untuk registrasi awal, biasanya
perlu memasukan nomor baru.
Untuk verifikasi kedua, biasa
langkah ini dapat dilewati
3. memasukan kode verifikasi
Memasukan Kode verifikasi dari
misscall OTP
Bila menggunakan android apps,
dapat menggunakan “auto read”
FLOW OVERVIEW
IMPORTANT NOTE!
Berbeda dengan SMS, Misscall OTP bisa mendapat status berhasil atau gagal dari telco. (tingkat keberhasilan 95%)
IMPLEMENTASI :
Untuk di web dapat memberi notifikasi bila gagal setelah menekan tombol “coba kembali”
Untuk aplikasi dengan auto-read dapat dibuat auto retry bila di deteksi fail
CHECK LIST UI/UX MISSCALL OTP CITCALL
INPUT MOBILE NUMBER
[ ] menggunakan kata “misscall”, bukan “telepon” atau “panggilan”
[ ] box kode negara
[ ] System secara otomatis menghilangkan awalan 0 & kode negara
MISSCALL WAITING
[ ] Menggunakan gambar informasi penjelasan “Misscall OTP” sebelum memasukan OTP
[ ] Gambar informasi misscall OTP dan tombol “mengerti” / “Misscall Saya Sekarang”
[ ] Memanggil API citcall untuk mengirim OTP setelah user menekan tombol “mengerti”
VERIFICATION (Success)
[ ] Input box untuk verifikasi kode sesuai guide
[ ] memberikan prefix / awalan misscall OTP sebagai challenge code
[ ] menggunakan kata “anda mendapat kode misscall, silahkan lengkapi nomor yang melakukan misscall”
RETRY BUTTON
[ ] Set URL Callback
[ ] memberikan notifikasi “network busy, please get better signal” kepada user untuk Retry ke 2
[ ] Memberi Notifikasi “nomor anda tidak dapat di hubungi, mohon periksa kembali sinyal anda”
1. INPUT NOMOR TELEPON
Kata “call” & “panggilan” dapat
dirubah menjadi “misscall”
Menurut penelitian kita kata
“panggilan” atau “call” membuat user
mengira teleponnya harus di angkat.
Bila misscall user lebih intuitif untuk
tahu tidak perlu di angkat
Kata “CALL NOW” dapat dirubah
menjadi “GET MISSCALL OTP NOW” Dapat menggunakan drop down button
kode negara bilamana ada user dari luar
negeri sehingga secara system tidak salah
(ini optional)
Kita menyarankan untuk secara system menghilangkan awalan 0 or kode negara (contoh 62 untuk Indonesia) untuk
mengurangi user salah memasukan nomor telepon dan double prefix
2. MISSCALL OTP INTRODUCTION (for user & API response)
Bagian ini merupakan yang paling penting untuk membuat User mengerti
Berdasarkan data. User paling mengerti flow OTP misscall bila mendapat gambar pengantar
flow introduction
1. User menekan tulisan “Verify me Now” system memberikan
gambar penjelasan akan di misscall. Hindari kata “telpon”
atau “panggilan”, gunakan kata “misscall”
2. Kata “selesai” bisa di ganti menjadi
“misscall saya sekarang” / “Misscall Me Now”
(citcall sudah menyiapkan versi Bahasa inggris dan Indonesia)
Bisa di lihat contoh di citcall.com/demo
3. Setelah tombol “misscall me now” di tekan, baru system memanggil API citcall untuk mengirim kode OTP ke user
4. Pindah ke halaman memasukan token
3. VERIFICATION
Bila kode berhasil terkirim dengan reponse API “success” maka masuk ke input box untuk validasi kode
(Word Recommendation)
Kami telah mengirim misscall ke
nomor xxxxx .
(paragraph baru) silahkan lanjutkan 4
digit terakhir dari nomor yang
melakukan misscall
Challenge Kode (Prefix)
Di reponse API ada prefix nomor
telepon yang dapat diberikan ke user
"token": "622130401234",
API detail Bisa dilihat di
docs.citcall.com
Note : Prefix dapat berubah sehingga
setiap reponse dapat berbeda
Disarankan prefix dan akhiran
digabungkan. Bila di gabung, user
biasnaya dapat memahami kalau
itu merupakan awalan kode
misscall OTP
4. RETRY BUTTON
Menurut survey, Input BOX yang mudah di mengerti sangat Penting agar user mengerti cara penggunaan misscall.
Point penting :
- Hindari kata “panggilan” / “telepon”, tapi gunakan “misscall” membuat user tahu kalau telepon tidak perlu di angkat
- Awalan nomor telepon kode berguna sebagai challenge code agar user tau nomor misscall merupakan kodenya
- Dengan kata “Lengkapi” atau “lanjutkan” user secara intuitif lebih mengerti untuk mengisi lanjutan nomor yang ada
PANGGIL ULANG / Retry (pertama kali)
Dapat memberikan opsi retry kembali bila user belum juga
memasukan kode setelah 15 detik.
Waktu retry tidak perlu panjang karena Citcall yakin apabila dalam
15 detik belum memasukan kode, kemungkinan gagal mengirim
misscall
PANGGIL ULANG / Retry (ke 2 kali)
Bila ke 2x masih gagal, maka di sarankan untuk memberikan
notifikasi.
Lebih detail di halaman selanjutnya
4.1 RETRY (lebih dari 1x)
response fail di URL CALLBACK merupakan sesuatu yang wajar, karena citcall memberi status “Fail” bila berhasil mendeteksi kode tidak berhasil terkirim ke user.
Alasan fail bisa berupa : tidak ada sinyal, hp user mati, atau Hp sedang sibuk karena di gunakan.
Setelah user menekan tombol “panggil ulang” untuk
ke 2x.
Maka user disarankan mendapat notifikasi ini untuk
memberi informasi ke User
Catatan:
NOTIFIKASI SANGAT PENTING! karena terkadang user tidak tahu bila sinyal tempat dia request OTP buruk.
Bila tidak di beri info notifikasi maka user akan bingung atau berpikir kalau ada error / masalah di appsnya (padahal kesalahan di sisi user, karena tidak ada sinyal)
ADDITIONAL
- Security UI/UX
Untuk alasan keamanan, kami merekomendasikan setiap unique user dengan 1 nomor yang terdaftar untuk di batasi mencoba memasukan nomor
hinga 5 sampai 10 kali saja untuk menghindari brute force
User juga hanya bisa melakukan 3x retry dalam 1 jam atau 1 hari untuk menghindari user palsu.
- Auto-Read
Citcall OTP dapat di gunakan dengan auto-read untuk UX yang lebih baik dengan mencocokan nomor di Call State
Ini dapat digunakan oleh Android versi 8 kebawah saja.
- Auto-retry
Untuk auto-read, client dapat menambahkan system auto retry karena system citcall dapat mendeteksi apabila user “fail” menerima kode. Di sarankan
hingga max 2x saja dan memberi notifikasi seperti poin 4.1 diatas bila tetap gagal.