APSI - TUGAS 9 - Desain User Interface Chatbot

-

Anggota Kelompok:

  1. Muhammad Razan Athallah (5025211008)
  2. Alexander Weynard Samsico (5025211014)
  3. Frederick Yonatan Susanto (5025211121)


Tugas kesembilan adalah membuat desain user interface dari aplikasi chatbot secara berkelompok. Desain user interface meliputi lima proses, yaitu User scenario development, Interface structure design, Interface standards design, Interface design prototyping, dan Interface evaluation.

User Scenario Development

Pengguna Baru

Pengguna yang Sudah Pernah Menggunakan Chatbot

1. Mengirim Pesan

  • Pengguna baru membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna baru memilih opsi "Mengirim Pesan" dari menu.
  • Aplikasi chat bot menampilkan antarmuka untuk memasukkan pesan.
  • Pengguna baru menulis pesan yang ingin dikirim.
  • Setelah selesai menulis pesan, pengguna baru mengirim pesan.
  • Aplikasi chat bot mengonfirmasi bahwa pesan telah berhasil dikirim.

 

1.  Mengirim Pesan

  • Pengguna yang sudah pernah menggunakan chat bot membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna tersebut langsung memilih opsi "Mengirim Pesan" dari menu karena sudah terbiasa.
  • Aplikasi chat bot menampilkan antarmuka untuk memasukkan pesan.
  • Pengguna tersebut menulis pesan yang ingin dikirim.
  • Setelah selesai menulis pesan, pengguna tersebut mengirim pesan.
  • Aplikasi chat bot mengonfirmasi bahwa pesan telah berhasil dikirim.

2. Melihat Riwayat Pesan

  • Pengguna baru membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna baru memilih opsi "Melihat Riwayat Pesan" dari menu.
  • Aplikasi chat bot menampilkan riwayat pesan sebelumnya dalam urutan terbaru.
  • Pengguna baru dapat membaca pesan-pesan sebelumnya yang dikirimkan dan diterima.
  • Pengguna baru dapat mengklik pesan tertentu untuk membuka percakapan terkait.

 

2. Melihat Riwayat Pesan

  • Pengguna yang sudah pernah menggunakan chat bot membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna tersebut langsung memilih opsi "Melihat Riwayat Pesan" dari menu.
  • Aplikasi chat bot menampilkan riwayat pesan sebelumnya dalam urutan terbaru.
  • Pengguna tersebut dapat membaca pesan-pesan sebelumnya yang dikirimkan dan diterima.
  • Pengguna tersebut dapat mengklik pesan tertentu untuk membuka percakapan terkait.

3. About Us

  • Pengguna baru membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna baru memilih opsi "About Us" dari menu.
  • Aplikasi chat bot menampilkan informasi tentang aplikasi, seperti nama pengembang, tujuan aplikasi, dan versi aplikasi.
  • Pengguna baru dapat membaca informasi yang diberikan untuk memahami lebih lanjut tentang aplikasi chat bot.

 

3. About Us

  • Pengguna yang sudah pernah menggunakan chat bot membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna tersebut memilih opsi "About Us" dari menu karena ingin mengetahui informasi lebih lanjut tentang aplikasi chat bot.
  • Aplikasi chat bot menampilkan informasi tentang aplikasi, seperti nama pengembang, tujuan aplikasi, dan versi aplikasi.
  • Pengguna tersebut membaca informasi yang diberikan untuk memperbarui pengetahuan mereka tentang aplikasi chat bot.

 

4. Help Centre

  • Pengguna baru membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna baru memilih opsi "Help Centre" dari menu.
  • Aplikasi chat bot menampilkan halaman bantuan dengan daftar pertanyaan umum atau topik bantuan lainnya.
  • Pengguna baru dapat menjelajahi topik bantuan atau mencari pertanyaan yang spesifik.
  • Jika pengguna baru tidak menemukan jawaban yang diinginkan, mereka dapat mengirimkan pertanyaan ke tim dukungan pelanggan melalui aplikasi chat bot.

 

4. Help Centre

  • Pengguna yang sudah pernah menggunakan chat bot membuka aplikasi chat bot dan melihat menu yang tersedia.
  • Pengguna tersebut memilih opsi "Help Centre" dari menu karena ingin mencari bantuan atau jawaban untuk pertanyaan mereka.
  • Aplikasi chat bot menampilkan halaman bantuan dengan daftar pertanyaan umum atau topik bantuan lainnya.
  • Pengguna tersebut menjelajahi topik bantuan atau mencari pertanyaan yang spesifik.
  • Jika pengguna tersebut tidak menemukan jawaban yang diinginkan, mereka dapat mengirimkan pertanyaan ke tim dukungan pelanggan melalui aplikasi chat bot, seperti yang pernah mereka lakukan sebelumnya.

 

Interface Structure Design



Interface Standards Design

Desain Chatbot yang akan dibuat diharapkan memenuhi standarisasi sebagai berikut:
  1. Interface akan menggunakan metafora messaging system seperti pada aplikasi WhatsApp, LINE, dsb.
  2. Landing Page berisi logo dan sambutan yang ramah serta memberikan option menu yang ingin dilakukan oleh pengguna.
  3. Tata letak Landing Page juga diharapkan di tengah dan memenuhi tampilan layar.
  4. Menu terdiri dari New Chat, Riwayat, Tentang aplikasi, dan Bantuan.
  5. New Chat berupa ruang chat dengan bot dibuat dengan warna background polos dan warna chatbox dibuat eye-catching untuk pengguna. Warna chatbox untuk bot dan pengguna berbeda.
  6. Tampilan bot yang sedang membuat suatu chat juga diberikan efek “sedang mengetik”.
  7. Riwayat (History) berisi topik-topik yang dibahas sebelumnya dengan Chatbot.
  8. Tentang aplikasi (About us) berisi deskripsi Chatbot.
  9. Bantuan berisi No. Telepon dan Email untuk dihubungi.
  10. Menu Bantuan berada di pojok kanan landing page, tidak pada menu utama.
  11. Tombol back perlu diletakkan pada pojok kiri atas setiap page kecuali landing page.
  12. Font yang digunakan adalah Poppins.
  13. Warna yang digunakan adalah hitam, #D9D9D9, #F5EFE7, #D8C4B6, #4F709C, dan #213555 serta biru terang muda.

Interface Design Prototyping

Storyboard Prototype



HTML/Language Prototype
  • Landing page
  • New chat
  • History, About us, Help Centre


Interface Evaluation

Tahap interface evaluation digunakan untuk mengidentifikasi potensi terjadinya masalah dan area yang perlu ditingkatkan. Salah satu pendekatan yang dapat digunakan adalah Heuristic Evaluation, yaitu membandingkan interface dengan prinsip desain yang ditetapkan. Berikut adalah hasil heuristic evaluation dari interface chatbot: 
  1. Konsisten: Penggunaan elemen interface berupa ikon, warna, font, tata letak sudah konsisten pada seluruh bagian aplikasi. 
  2. Efisiensi: Interface aplikasi ini sudah dirancang sehingga pengguna dapat mencapai bagian yang diinginkan dengan efisien.
  3. Estetika: Penggunaan ikon, warna, font yang terkesan soft membuat inteface memiliki estetika yang menarik dan tidak mengganggu bagi pengguna.
  4. Keberlanjutan: Interface yang didesain sudah mempertimbangkan aspek keberlanjutan dan skalabilitas, sehingga dapat menyesuaikan dengan cepat jika terdapat fitur baru. 
Dari hasil interface evaluation, dapat disimpulkan bahwa proses desain user interface sudah selesai dan dapat dilanjutkan ke tahap pengembangan berikutnya.



Comments

Post a Comment

Popular posts from this blog

APSI - EAS - Aplikasi POS Alfamart

-
Image
Nama: Muhammad Razan Athallah NRP: 5025211008 Kelas: PWEB A Tahun: 2022/2023 (Genap) Tuliskan kebutuhan fungsional dan non fungsional Aplikasi POS Alfamart! Kebutuhan fungsional: Mengelola informasi produk, termasuk kategori, harga, stok, dan detail produk lainnya.  Mendukung penambahan, pengeditan, dan penghapusan produk dengan mudah.  Menyediakan fitur pencarian dan filtrasi produk untuk memudahkan aksesibilitas.  Memproses transaksi penjualan dengan cepat dan akurat.  Menyediakan antarmuka kasir intuitif untuk memasukkan item belanjaan, mengatur kuantitas, dan menghitung total pembayaran.  Dukungan untuk berbagai metode pembayaran, seperti tunai, kartu kredit, dan e-wallet.  Menghasilkan struk atau faktur pembayaran yang mencantumkan detail pembelian kepada pelanggan.  Memantau stok produk secara real-time dan memberikan peringatan saat stok mendekati atau mencapai batas minimum.  Mengurangi stok secara otomatis saat ada penjualan atau pengiriman produk baru. Menyediakan laporan inv
Read more

PWEB - EVALUASI AKHIR SEMESTER

-
Image
Nama: Muhammad Razan Athallah NRP: 5025211008 Kelas: PWEB A Tahun: 2022/2023 (Genap) Jelaskan perbedaan Front End dan Back End Front End: Bagian aplikasi yang berinteraksi langsung dengan pengguna, meliputi elemen visual yang dilihat langsung denan pengguna (desain, animasi, tombol, dll). Fokus utama front-end adalah memberikan pengalaman pengguna yang baik, responsif, dan menarik melalui antarmuka pengguna yang mudah digunakan. Back End: Bagian aplikasi yang berjalan di server dan bertanggung jawab untuk pemrosesan logika bisnis, manajemen database, dan kinerja aplikasi secara keseluruhan. Fokus utama back-end adalah menjalankan operasi yang terjadi di belakang layar, memastikan keamanan, integritas data, dan performa aplikasi yang baik.  Kompetensi apa saja yang harus dikuasai oleh Front End Engineer, dan Back End Developer? Front End: HTML, CSS, JavaScript, Framework Front End (React, Angular, Vue.js, dll.), Desain antarmuka pengguna (UI/UX) Back End: Bahasa pemrograman server-side
Read more

APSI - TUGAS 1 - Sistem Akuntansi Aset Tetap

-
Image
Deskripsikan sistem informasi! Sistem informasi adalah gabungan terorganisir dari manusia, sumber data, teknologi, dan prosedur dalam mengumpulkan dan menyediakan informasi dengan tujuan menjalankan operasional perusahaan. Dalam video, sistem informasi dapat digunakan dalam mengolah akuntansi aset tetap sehingga dapat menghasilkan informasi-informasi bagi perusahaan. Aset tetap merupakan aset perusahaan yang mempunyai manfaat ekonomis lebih dari satu tahun sehingga digunakan untuk melaksanakan kegiatan perusahaan, bukan untuk dijual kembali. Penggunaan aset tetap adalah sebagai berikut: Revenue Cycle Expenditure Cycle Production Cycle Payroll Cycle GL & Reporting System Selling & Administration Digunakan untuk apa? Secara general, sistem informasi akuntansi memiliki beberapa kegunaan sebagai berikut: Mengumpulkan data kegiatan bisnis perusahaan dan menyimpan data tersebut secara efisien dan efektif. Mengumpulkan data yang diperlukan dari sumber-sumber dokumen yang berkaitan den
Read more