Tugas Analisis dan Perancangan Sistem Informasi 9 - Desain Antarmuka Aplikasi Chatbot Ai.ctivity

 TUGAS DESIGN USER INTERFACE APLIKASI AI.CTIVITY

Anggota :

  • Sekar Ambar Arum (5025211041)

  • Dimas Prihady Setyawan (5025211184)

  • Dian Dabukke (5025211080)

  1. Use Scenario Development

Use scenario adalah sebuah narasi yang menjelaskan konteks penggunaan sistem oleh pengguna. Use scenario menjelaskan urutan aktivitas yang dilakukan pengguna serta sikapnya selama melakukan aktivitas tersebut hingga mencapai tujuan.


Use Scenario : User sudah tahu pasti apa yang akan dilakukan saat menggunakan AI.ctivity

  1. User akan diarahkan ke halaman login/sign up

  2. Setelah berhasil login/sign up, user akan masuk ke Home/beranda. Di halaman Home memuat artikel-artikel yang berkaitan dengan AI.ctivity dan layanan yang tersedia.

  3. Kemudian, user dapat langsung memilih salah satu di antara beberapa layanan yang tersedia. 

  • Misal : User ingin menggunakan fitur Audio Book

  1. - User memilih opsi Audio Book di halaman Home, kemudian user akan diarahkan ke fitur Audio Book, atau

- User menekan opsi Features pada navbar, kemudian pilih  opsi Audio Book, user akan diarahkan ke fitur Audio Book

  1. Pada fitur Audio Book, user akan berada di dalam chatbox dan diminta menginput file yang ingin dibacakan oleh fitur Audio Book pada AI.ctivity. Terdapat pula opsi chat baru yang digunakan untuk membuka sesi baru pada chatbox. Ada pun opsi history untu melihat riwayat pencarian/penggunaan bot pada fitur tersebut.


  1. Interface Structure Design

    


  1. Interface Standards Design

Desain antarmuka yang dirancang memiliki beberapa poin spesifik berikut


  • Warna yang digunakan dibagi menjadi 8 bagian, yaitu warna merah (Bahaya), kuning (Peringatan), hijau (Sukses), dan abu-abu (Tipografi). Sedangkan 4 warna terakhir adalah Dark Navy (0C134F), Navy (1D267D), Dark Purple (5C469C), dan Light Purple (D4ADFC). Antarmuka akan dirancang dengan kombinasi warna biru dan ungu yang melambangkan ketenangan dan kemakmuran. Berikut adalah gambar warna yang dipakai pada antarmuka:

  • Tipografi yang digunakan adalah tipe font-family Poppins dengan Font Weight masing-masing adalah:

    • Bold (700)

    • Semibold(600)

    • Medium(500)

    • Regular(400)

Sementara untuk Style Guide dapat dicek pada gambar berikut:



  • Button, Label, Message, Dropzone,dan Placeholder yang digunakan telah diatur dalam Design System pada Figma. Berikut adalah Design System yang dipakai: 

Beberapa Icon juga dipakai dalam antarmuka, Icon terbagi menjadi dua yaitu outline dan solid. Berikut adalah Icon yang dipakai dalam antarmuka:


  • Desain antarmuka yang dibuat mengikuti aturan 10 Usability Heuristics for User Interface Design yang merupakan pedoman desain antarmuka yang dibuat oleh Jakob Nielsen. Hal ini bertujuan agar pengguna dapat menggunakan antarmuka sesuai dengan apa yang telah didesain.


  1. Interface Design Prototyping

Pada tahap ini, perancang antarmuka menciptakan prototipe antarmuka yang merupakan representasi visual dari desain yang akan diuji oleh pengguna atau pemangku kepentingan. Prototipe ini dapat berupa mockup statis atau interaktif yang memungkinkan pengguna untuk menjelajahi antarmuka dan memperoleh pemahaman tentang cara kerjanya. Berikut merupakan desain prototipe antarmuka dari Ai.ctivity

.

  • Splash Screen


  • Splash Screen Login/Register



  • Halaman Login dan Register

  • Dashboard


  • Fitur masing-masing Chatbot



  1. Interface Evaluation

    Tahap terakhir dalam proses desain antarmuka pengguna adalah melakukan pengujian kepada pengguna. Evaluasi ini bertujuan untuk mengidentifikasi kekurang dari desain yang telah dibuat. Evaluasi dapat dilakukan dengan cara Usability Testing pada pengguna sembari diamati dan dianalisis aspek-aspek yang dirasakan pengguna saat melakukan testing. Setelah Usability Testing dilakukan ada beberapa keresahan yang didapatkan dari pengguna sehingga kami memperbaiki hal tersebut dan tetap berpacu kepada aturan “10 Usability Heuristics for User Interface Design” yang telah diteliti oleh Jakob Nielsen dan dipercaya oleh banyak para desainer antarmuka. Terakhir kami melakukan A/B Testing kepada pengguna dengan membandingkan antarmuka yang lama dengan yang baru, ternyata pengguna lebih merasa nyaman menggunakan antarmuka yang telah diperbaiki. Evaluasi terakhir yang telah dilakukan telah terbukti bahwa prototipe telah layak untuk dilanjutkan ke tahap pengembangan perangkat lunak agar dapat diintegrasi dengan sistem yang ada dan digunakan oleh lebih banyak pengguna.

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Analisis dan Perancangan Sistem Informasi 7 - Process Modelling Flow Aplikasi AlloBank

Nama : Dimas Prihady Setyawan NRP : 5025211184 Kelas : APSI E Penerapan Data Flow Diagram pada Aplikasi AlloBank Proses modelling adalah cara formal untuk menggambarkan bagaimana bisnis beroperasi. Mengilustrasikan aktivitas yang dilakukan dan bagaimana data berpindah di antara aktifitas-aktifitas itu. Ada banyak cara untuk merepresentasikan proses model, cara yang populer adalah dengan menggunakan data flow diagram (DFD). Dengan menggunakan Process Modelling, seseorang akan memperoleh gambaran atau diagram yang lengkap dan berisi wawasan tentang proses bisnis, seperti hal-hal berikut: Peristiwa dan aktivitas yang terjadi dalam alur kerja Pilihan dan arah yang dapat diambil oleh alur kerja berdasarkan hasil yang diinginkan Alat-alat yang beragam yang digunakan dalam proses bisnis Jadwal waktu dari keseluruhan proses bisnis dan juga setiap tahap di dalamnya Tingkat keberhasilan dan kegagalan dari suatu proses bisnis Berikut adalah contoh penerapan data flow diagram pada sistem pem...
Baca selengkapnya

Tugas Analisis dan Perancangan Sistem Informasi 8 - Data Modelling Layanan Streaming Netflix

Nama : Dimas Prihady Setyawan Kelas : APSI-E NRP : 5025211184 Tahun : 2023 Data Modelling Layanan Streaming Netflix Data Modelling Data modelling merupakan proses visualisasi hubungan antara berbagai elemen data yang diperlukan dalam sebuah sistem informasi. Tujuannya adalah untuk memahami dimana data disimpan dan bagaimana hubungan antara data tersebut, sehingga memudahkan komunikasi antara tim dan pengelolaan data, terutama ketika terdapat volume data yang besar dalam perusahaan.  Data modelling memberikan fokus pada pemahaman tentang jenis data yang diperlukan dan bagaimana data tersebut akan digunakan untuk memenuhi kebutuhan bisnis. Dalam hal ini, data modelling berupaya untuk menentukan data apa yang diperlukan dan bagaimana data tersebut akan dikelola untuk mencapai tujuan bisnis tertentu. Secara keseluruhan, tujuan utama dari data modelling adalah menciptakan metode penyimpanan informasi yang efisien dan efektif, serta menyediakan akses dan pelaporan data yang l...
Baca selengkapnya

Tugas Analisis dan Perancangan Sistem Informasi 3 - System Request WarteGo

System Request - WarteGo Project Sponsor Dimas Prihady Setyawan, 5025211184, Project Manager Business Need      WarteGo adalah sebuah aplikasi yang dirancang khusus untuk membantu bisnis warteg dalam mengelola penjualan dan stok produk mereka. Aplikasi ini membantu pemilik warteg dalam mengelola inventaris, menerima pesanan dari pelanggan, dan mengirimkan pesanan kepada supplier dan pasar lokal. Selain itu, WarteGo juga menyediakan laporan keuntungan dan penjualan yang detail, sehingga pemilik warteg dapat memantau kinerja bisnis mereka, memperbarui harga produk secara real-time, dan membandingkan performa warteg mereka dengan warteg lain di sekitar daerah mereka. Dengan fitur-fitur yang lengkap dan mudah digunakan, WarteGo bertujuan untuk membantu warteg dalam meningkatkan efisiensi operasional mereka, mengoptimalkan pengelolaan stok produk, dan meningkatkan keuntungan bisnis secara keseluruhan. ...
Baca selengkapnya