People Innovation Excellence
 

How to Design a Good Help and Feedback in Mobile Application

Apa itu help and feedback pada suatu aplikasi mobile?

Help and Feedback” merupakan fungsi untuk membantu user untuk memahami cara kerja sebuah aplikasi. Selain itu, user juga dapat memberikan feedback terhadap aplikasi pada fungsi ini seperti memberi review, melaporkan bugs, dan juga pertanyaan yang ingin ditanyakan. Dalam membuat desain “Help and Feedback”, hal pertama yang perlu diperhatikan adalah isi dari help and feedback. Biasanya help berisikan jawaban dari pertanyaan yang sering ditanyakan (FAQ), ada juga kontak dari admin/pengurus aplikasi. Implementasi dari help and feedback pada suatu mobile application tidak hanya sebatas FAQ page yang penuh tulisan. Suatu feature user-help dapat diimplementasikan dalam berbagai macam bentuk yang lebih interaktif seperti tutorial slider, carding, animated actions, interactive video, single screen overlays, walkthrough, tips of the day, dan lain-lain.

Penempatan dan Timing

Selanjutnya, penempatan help and feedback juga perlu diperhatikan. Sebagai mobile application designer, kita harus memastikan metode apa yang akan kita gunakan dalam implementasi help and feedback pada aplikasi yang kita desain. Misalnya, kita sebagai developer menggunakan demonstration sebagai pendekatan user-help. Demonstration (biasanya video) harus diletakkan di awal flow aplikasi hanya pada waktu user baru melakukan fresh install aplikasi tersebut pada device mereka. Demonstration tidak akan ideal apabila diletakkan di tengah-tengah aplikasi

KECUALI demonstration menunjukkan suatu fitur khusus atau yang ditonjolkan dan perlu dibuat stand-out. Demonstration bisa juga sekaligus digunakan untuk memberikan guide pada user baru akan fitur baru yang diluncurkan pada update terakhir, perubahan yang terjadi, atau hal lain yang bersifat informatif.

Contoh lainnya adalah apabila kita menggunakan informative cards atau slider untuk menginformasikan apa yang user dapat lakukan di dalam aplikasi. Sama seperti demonstration, carding/slider diletakkan pada awal aplikasi dibuka setelah fresh install. Cards/slider lebih menunjukkan feature utama dari aplikasi, tetapi packaging and delivery slider and carding harus dibuat singkat, padat, dan jelas (tidak menggunakan card lebih dari 4, ada tombol skip, navigation prev-next yang jelas).

Contoh Carding Slider (https://dribbble.com/shots/4061783-Tutorial-Screen)

Jika berbicara tentang narrative help seperti FAQ, page harus diletakkan pada tempat yang mudah ditemukan user. Biasanya diletakkan di navigation drawer dan/atau app bar. Pada navigation drawer Help” harus berada pada posisi paling bawah dan “Send Feedback” berada tepat di atas “Help”. Jika sebuah aplikasi tidak memiliki navigation drawer, maka “Help and Feedback” diletakkan pada overflow menu. Kita juga dapat menempatkan “Feedback” di dalam help.

Lain apabila kita ingin menempatkan tips, walkthrough, dan overlay. Ketiga pendekatan ini tidak melulu harus dimunculkan di awal. Tetapi bisa muncul di dalam journey user dalam menggunakan aplikasi. Walaupun biasa hanya dimunculkan sekali saja, tetapi kemunculan dari ketiga cara help tersebut baru terlihat di saat user mengeksplorasi aplikasinya, tidak diarahkan dari awal.

Help, Feedback, and Report Icons

Ikon yang digunakan haruslah sederhana dan mudah dimengerti dalam sekali lihat oleh user. Berikut merupakan contoh ikon yang harus digunakan (hijau), dan ikon yang harus dihindari (merah).

Penulisan Help, Feedback, dan Report

Dalam menulis help, isi dari help tersebut harus dibuat semudah mungkin untuk dibaca oleh user dengan menggunakan bahasa yang sederhana, memberikan penjelasan sesingkat mungkin, dan memberikan gambar atau ikon dalam menjelaskan langkah-langkah apa saja yang harus dilakukan oleh user.

Tips, Walkthrough, Overlay

Lanjut membahas tips, walkthrough, dan overlay, ketiga pendekatan pada in-app help sangat bergantung pada flow dari aplikasi. Lazimnya, tips, walkthrough, dan overlay dapat dijadikan menjadi satu seperti gambar di bawah ini. Karena base dari pendekatan ini merupakan sebuah overlay dengan beberapa text dan hints, maka sudah pasti pendekatan ini tidak memerlukan suatu page sendiri, tetapi menggunakan page yang sudah ada dan diberikan guide secara langsung, hands-on, dan object directed. Pendekatan overlay seperti ini cukup diminati karena design language yang sleek, lebih hemat page, dan lebih friendly pada user karena langsung meng- highlight feature yang ingin di stand-out oleh developer itu sendiri. Selain itu, metode ini juga lebih interaktif karena memberikan penjelasan pada tiap feature secara individual, sehingga tidak ada peringkasan dalam satu screen untuk semua feature yang cenderung menjadi packed dan sulit dipahami.

Feature highlight dengan short explanation (https://dribbble.com/shots/6833910-Mobile-App-Onboarding)

Jenis-Jenis Help

Kita harus mengusahakan help berada langsung dalam aplikasi kita, dibanding harus merujuk kepada web eksternal. Dalam kasus di mana kita harus merujuk kepada web eksternal, maka kita harus memastikan bahwa web tersebut sudah dioptimalkan untuk perangkan mobile. Berikut ini adalah beberapa jenis help pada aplikasi mobile:

A.  How-To

How-To adalah instruksi sederhana yang singkat dan jelas yang menjelaskan bagaimana suatu aplikasi bekerja.

B.  FAQ & User Guide/Help System

FAQ (Frequently Asked Questions) biasanya digunakan saat kita ingin menampilkan informasi yang lebih banyak dibandingkan suatu How-To, namun tidak cukup banyak untuk sebuah User Guide yang lengkap. Dalam mendesain suatu FAQ, pastikan bahwa daftar pertanyaan mudah untuk dibaca secara cepat dan jawaban yang diberikan mudah dipahami. Urutkan pertanyaan dari yang paling sering ditanyakan.

C.  Feature Tour

Sebuah feature tour dapat digunakan untuk memberikan perhatian khusus pada fitur atau fungsionalitas tertentu dalam suatu aplikasi. Kita harus berhati-hati dalam menggunakan feature tour karena dapat memberikan dampak negatif untuk conversion dan adoption. Kita harus menampilkan feature tour hanya pada saat pertama kali hal itu diakses dan sebaiknya kita memberikan opsi untuk menunjukkan feature tour lagi di kemudian hari.

D.  Tutorial

Sebuah tutorial berbeda dengan feature tour karena dalam tutorial, pengguna benar-benar mencapai sesuatu setelah mereka menyelesaikan tutorial. Tutorial akan berjalan baik pada aplikasi yang membutuhkan konfigurasi awal atau membutuhkan multi-step process.

E.  Contextual Help

Contextual help adalah suatu bantuan pada titik tertentu pada suatu aplikasi, tidak ada frontloading informasi, dan ditampilkan pada screen level dan/atau ditampilkan saat suatu task dijalankan.

F.  Capture Feedback

Pastikan kita menyediakan mekanisme yang sederhana untuk menerima feedback pengguna yang dapat berupa informasi bugs, error, feedback, suggestion, ataupun feature request. Seperti yang sudah dijelaskan, sebaiknya kita menampilkan form di dalam aplikasi, bukan merujuk kepada web eksternal.

Jenis-Jenis Feedback

Suatu UI (User Interface) yang baik harus menyediakan feedback yang baik, jelas, dan pada waktu yang tepat sehingga penggunanya dapat mengetahui hasil dari aksi yang dilakukannya dan mengetahui pula apa yang sedang terjadi di dalam sistem. Feedback dapat bervariasi dari suatu indikator proses dan konfirmasi yang sederhana hingga animasi dan efek yang megah. Berikut ini adalah beberapa jenis feedback pada aplikasi mobile:

A.  Error Messages

Sebuah error message yang baik menunjukkan eror dalam bahasa yang sederhana (tanpa kode), namun menunjukkan kesalahan tersebut secara tepat dan mampu menyarankan suatu solusi yang membangun. Kita harus mengintegrasikan error message sehingga eror yang ada tersebut terlihat pula pada layar.

B.  Confirmation

Sebuah konfirmasi tidak boleh mengganggu user flow. Saat menambahkan sebuah komponen ke suatu daftar yang ada, gunakan animasi untuk menunjukkan di mana objek tersebut di simpan dan dapat dicari/dibuka kembali lagi nantinya.

Inline feedback sangat berguna dan disarankan untuk menampilkan konfirmasi dari suatu input form. Inline feedback sebaiknya digunakan untuk menunjukkan transactional gestures, seperti swipe to delete. Dalam perangkat berbasis Android, biasanya kita akan melakukan swipe-to- perform seperti melakukan swipe untuk menghapus item secara langsung. Lalu setelahnya ditampilkan inline feedback yang menampilkan pesan bahwa suatu aksi terhadap item tersebut sudah dilakukan sekaligus menampilkan opsi untuk melakukan undo. Dalam perangkat berbasis iOS, biasanya kita akan melakukan swipe-to-reveal yang menunjukkan opsi apa saja yang bisa dilakukan pada suatu item. Dalam kasus ini, diperlukan suatu aksi khusus yaitu tap untuk melakukan salah satu aksi tersebut sehingga inline feedback tidak diperlukan lagi.

Opsi lain dalam menampilkan konfirmasi adalah menggunakan toast, yaitu suatu pesan yang tampil sebentar pada layar lalu menghilang. Opsi lain seperti multi-state button juga merupakan salah satu opsi yang menunjukkan konfirmasi tanpa mengganggu pengguna.

Saat suatu transaksi selesai dilakukan, seperti saat order yang sudah selesai dipesan atau saat pengguna telah mengisi dan mengirim suatu form, maka pengguna akan menunggu suatu prominent feedback (feedback yang mencolok). Karena biasanya hal ini terjadi pada bagian akhir dari user flow, maka konfirmasi dapat ditampilkan dengan full screen or dialog.

C.  System Status

Kita biasanya menggunakan suatu progress bar atau spinning indicator untuk menunjukkan progress. Namun, hal ini menunjukkan bahwa adanya suatu desain yang membuat orang melihat jam/waktu, sehingga pengguna akan merasa progress yang ada berjalan lambat. Untuk mengatasi hal ini, kita dapat menggunakan skeleton screen, yaitu suatu versi kosong dari tampilan yang menunjukkan informasi perlahan-lahan sambil menunggu proses selesai dilakukan. Kita harus selalu menginformasikan progress kepada pengguna. Untuk proses yang membutuhkan waktu yang lama, sediakan pula opsi batal.

Referensi

Google. (n.d.). Help & feedback. Diakses pada 26 November 2020 dari https://material.io/design/communication/help-feedback.html

                      . (n.d.). Principles of Mobile App Design: Engage Users and Drive Conversions. Diakses pada 26 November 2020 dari https://www.thinkwithgoogle.com/future-of- marketing/creativity/principles-of-mobile-app-design-engage-users-and-drive-conversions/

Neil, T. (2015). Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps (2nd ed., pp.

283-330). Sebastopol: O’Reilly Media.

Tsutano, Y. (2020). Help! I need some help! Not just any help… Help in mobile applications. Diakses                      pada         26         November         2020         dari         https://www.interaction- design.org/literature/article/help-i-need-some-help-not-just-any-help-help-in-mobile- applications

Author : Gregorius Albert, Lukas Tanto Kurniawan, William Chrisandy , Kevin Putra Yonathan , Andre Lay
Supervised by : Irma Kartika Wairooy, S.Kom., M.T.I


Published at :

Periksa Browser Anda

Check Your Browser

Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

We're Moving Forward.

This Site Is No Longer Supporting Out-of Date Browser.

If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

Best viewed with one of these browser instead. It is totally free.

  1. Google Chrome
  2. Mozilla Firefox
  3. Opera
  4. Internet Explorer 9
Close