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.