TUGAS 9 APSI
DESAIN USER INTERFACE
Bapak Fajar Baskoro, S.Kom., M.T.
User Interface Design Process
User Interface (UI) design process adalah serangkaian langkah atau tahapan yang dilakukan untuk merancang antarmuka pengguna yang efektif dan menarik dalam sebuah sistem informasi. UI design process berfokus pada aspek visual dan interaksi antara pengguna dan sistem.
Berikut ini adalah pengertian dari beberapa tahapan dalam UI design process:
Penelitian dan Analisis Pengguna (User Research and Analysis):
Tahap ini melibatkan pengumpulan informasi tentang pengguna yang akan menggunakan sistem, termasuk kebutuhan, preferensi, dan karakteristik mereka. Data ini akan membantu dalam merancang antarmuka yang sesuai dengan kebutuhan pengguna.
Perencanaan (Planning):
Pada tahap ini, perencanaan keseluruhan proyek UI dilakukan. Hal ini meliputi menentukan tujuan desain, sketsa awal, dan pembagian tugas dalam tim desain.
Pembuatan Prototipe (Prototyping):
Tahap ini melibatkan pembuatan prototipe antarmuka yang berfungsi sebagai representasi visual dari desain yang diusulkan. Prototipe ini akan digunakan untuk menguji respons pengguna terhadap desain tersebut dan mendapatkan umpan balik yang berharga.
Desain Visual (Visual Design):
Pada tahap ini, elemen-elemen visual seperti warna, tipografi, ikon, dan grafis lainnya ditentukan untuk menciptakan antarmuka yang menarik secara estetika. Prinsip desain seperti kesesuaian, keterbacaan, dan konsistensi juga diperhatikan.
Pengujian dan Evaluasi (Testing and Evaluation):
Tahap ini melibatkan pengujian antarmuka dengan pengguna nyata untuk mengidentifikasi masalah atau kesalahan yang perlu diperbaiki. Umpan balik dari pengguna dijadikan dasar untuk melakukan perubahan dan penyempurnaan desain.
Implementasi (Implementation):
Setelah desain antarmuka telah diuji dan dievaluasi dengan baik, tahap ini melibatkan implementasi desain ke dalam sistem yang sesungguhnya. Tim pengembang akan mengimplementasikan antarmuka yang telah dirancang sesuai dengan spesifikasi yang telah disepakati.
Pemeliharaan dan Peningkatan (Maintenance and Enhancement):
Setelah sistem dan antarmuka diimplementasikan, tahap ini melibatkan pemeliharaan rutin dan peningkatan berkelanjutan untuk memastikan antarmuka tetap relevan, responsif, dan memenuhi kebutuhan pengguna seiring waktu.
UI design process dapat bervariasi tergantung pada metodologi dan pendekatan yang digunakan, namun langkah-langkah tersebut umumnya ada dalam proses desain antarmuka pengguna.
Penelitian dan Analisis Pengguna (User Research and Analysis):
Perencanaan (Planning):
Pembuatan Prototipe (Prototyping):
Desain Visual (Visual Design):
Pengujian dan Evaluasi (Testing and Evaluation):
Implementasi (Implementation):
Pemeliharaan dan Peningkatan (Maintenance and Enhancement):
Deskripsi Aplikasi
Tiket.io adalah sebuah aplikasi pemesanan tiket wisata yang disediakan untuk mempermudah pengguna dalam melakukan pemesanan tiket wisata. Aplikasi ini menawarkan berbagai macam tiket wisata dari berbagai destinasi populer di dalam maupun luar negeri.
Aplikasi Tiket.io dirancang dengan tujuan untuk memberikan pengguna akses yang mudah dan cepat dalam mencari dan memesan tiket wisata sesuai dengan preferensi mereka. Pengguna dapat menjelajahi berbagai destinasi wisata yang tersedia di aplikasi ini, termasuk tempat wisata alam, taman hiburan, museum, dan tempat-tempat budaya lainnya.
Dalam Tiket.io, pengguna akan menemukan informasi yang detail mengenai setiap destinasi wisata, seperti deskripsi, foto, harga tiket, jam operasional, dan fasilitas yang disediakan. Aplikasi ini juga menyediakan fitur pencarian yang sederhana dan filter yang membantu pengguna dalam menemukan tiket wisata yang sesuai dengan preferensi mereka.
Selain itu, Tiket.io juga memungkinkan pengguna untuk melihat ulasan dan penilaian dari pengunjung sebelumnya, sehingga mereka dapat membuat keputusan yang lebih baik dalam memilih destinasi wisata yang sesuai dengan minat dan kebutuhan mereka.
Aplikasi ini menawarkan kemudahan dalam melakukan pemesanan tiket secara online dengan beberapa pilihan pembayaran yang aman dan terpercaya. Tiket.io juga dilengkapi dengan fitur pengingat jadwal yang membantu pengguna mengingat waktu keberangkatan mereka dan memberikan informasi penting terkait perjalanan.
Dengan demikian, Tiket.io menjadi solusi praktis bagi mereka yang ingin mencari dan memesan tiket wisata dengan cepat, mudah, dan dapat diandalkan. Aplikasi ini memberikan pengalaman yang nyaman dan terpercaya dalam melakukan pemesanan tiket wisata.
Use Scenario Development
Tahap ini melibatkan pemahaman mendalam tentang pengguna, tujuan pengguna, dan tugas yang ingin dicapai melalui antarmuka. Dalam tahap ini, perancang antarmuka mengumpulkan informasi tentang kebutuhan pengguna, konteks penggunaan, dan masalah yang ingin dipecahkan oleh antarmuka. Berikut merupakan beberapa Use Scenario Development dari Aplikasi Tiket.io :
Pengguna baru ingin mendaftar di aplikasi Tiket.io
Pengguna membuka aplikasi Tiket.io
Pengguna menekan tombol "Daftar" di halaman utama.
Pengguna mengisi formulir pendaftaran.
Pengguna menekan tombol "Daftar Sekarang" untuk menyelesaikan proses pendaftaran.
Pengguna yang sudah memiliki akun ingin masuk ke aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna memasukkan Email dan Password yang terdaftar pada halaman utama.
Pengguna menekan tombol "Masuk" untuk mengakses akun mereka.
Pengguna ingin melihat daftar destinasi wisata pada suatu kota:
Pengguna membuka aplikasi Tiket.io.
Pengguna memasukkan kota tujuan dan tanggal pesan pada search bar yang ada di halaman beranda.
Pengguna menekan tombol "Cari Destinasi Wisata" untuk mengakses akun mereka.
Pengguna ingin melihat daftar destinasi wisata yang populer pada suatu kota:
Pengguna membuka aplikasi Tiket.io.
Pengguna melihat pada bagian “Tempat Wisata Populer”.
Pengguna dapat memilih kota yang diinginkan dengan menekan pada tombol filter yang tersedia.
Pengguna dapat menekan tombol panah untuk melihat lebih banyak destinasi wisata.
Pengguna ingin melihat artikel yang ada di aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna melihat pada bagian “Artikel”.
Pengguna dapat menekan tombol panah untuk melihat lebih banyak artikel.
Pengguna ingin melakukan pemesanan tiket destinasi wisata di aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna mencari destinasi wisata yang ingin dipesan.
Pengguna dapat menekan pada card destinasi wisata yang diinginkan untuk melihat detail destinasi wisata tersebut (harga, jam buka, fasilitas, ulasan).
Pengguna dapat memesan tiket dengan menekan tombol “Beli Tiket”.
Pengguna memasukkan tanggal pemesanan.
Pengguna mengkonfirmasi beberapa detail pemesanan tiket (tanggal, jumlah tiket, detail harga tiket).
Pengguna dapat menekan tombol “Beli Tiket” jika informasi tiket yang akan dipesan sudah benar.
Pengguna memasukkan data diri pengunjung (nama, nomor telepon, dan email).
Jika pengguna sudah mengisi semua data diri pengunjung, pengguna dapat menekan tombol “Pilih Metode Pembayaran” untuk melanjutkan ke pembayaran.
Pengguna dapat melakukan pembayaran sesuai dengan perintah yang sudah diberikan.
Jika pembayaran berhasil pengguna akan mendapatkan tiket destinasi wisata yang telah dipesan/dibeli.
Pengguna baru ingin mendaftar di aplikasi Tiket.io
Pengguna membuka aplikasi Tiket.io
Pengguna menekan tombol "Daftar" di halaman utama.
Pengguna mengisi formulir pendaftaran.
Pengguna menekan tombol "Daftar Sekarang" untuk menyelesaikan proses pendaftaran.
Pengguna yang sudah memiliki akun ingin masuk ke aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna memasukkan Email dan Password yang terdaftar pada halaman utama.
Pengguna menekan tombol "Masuk" untuk mengakses akun mereka.
Pengguna ingin melihat daftar destinasi wisata pada suatu kota:
Pengguna membuka aplikasi Tiket.io.
Pengguna memasukkan kota tujuan dan tanggal pesan pada search bar yang ada di halaman beranda.
Pengguna menekan tombol "Cari Destinasi Wisata" untuk mengakses akun mereka.
Pengguna ingin melihat daftar destinasi wisata yang populer pada suatu kota:
Pengguna membuka aplikasi Tiket.io.
Pengguna melihat pada bagian “Tempat Wisata Populer”.
Pengguna dapat memilih kota yang diinginkan dengan menekan pada tombol filter yang tersedia.
Pengguna dapat menekan tombol panah untuk melihat lebih banyak destinasi wisata.
Pengguna ingin melihat artikel yang ada di aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna melihat pada bagian “Artikel”.
Pengguna dapat menekan tombol panah untuk melihat lebih banyak artikel.
Pengguna ingin melakukan pemesanan tiket destinasi wisata di aplikasi Tiket.io:
Pengguna membuka aplikasi Tiket.io.
Pengguna mencari destinasi wisata yang ingin dipesan.
Pengguna dapat menekan pada card destinasi wisata yang diinginkan untuk melihat detail destinasi wisata tersebut (harga, jam buka, fasilitas, ulasan).
Pengguna dapat memesan tiket dengan menekan tombol “Beli Tiket”.
Pengguna memasukkan tanggal pemesanan.
Pengguna mengkonfirmasi beberapa detail pemesanan tiket (tanggal, jumlah tiket, detail harga tiket).
Pengguna dapat menekan tombol “Beli Tiket” jika informasi tiket yang akan dipesan sudah benar.
Pengguna memasukkan data diri pengunjung (nama, nomor telepon, dan email).
Jika pengguna sudah mengisi semua data diri pengunjung, pengguna dapat menekan tombol “Pilih Metode Pembayaran” untuk melanjutkan ke pembayaran.
Pengguna dapat melakukan pembayaran sesuai dengan perintah yang sudah diberikan.
Jika pembayaran berhasil pengguna akan mendapatkan tiket destinasi wisata yang telah dipesan/dibeli.
Interface Structure Design
Pada bagian Interface Structure Design akan diperlihatkan sebuah bagan yang menjelaskan tentang bagaimana alur dari aplikasi Tiket.io. Berikut merupakan diagram alur dari aplikasi Tiket.io mulai dari screen awal sampai dengan pengguna mendapatkan tiket pesanannya.
Interface Standards Design
Tahap ini melibatkan pengembangan pedoman dan aturan desain yang konsisten, seperti pemilihan ikon, warna, tipografi, dan gaya visual. Desain standar antarmuka bertujuan menciptakan konsistensi visual dan pengalaman pengguna yang seragam di seluruh antarmuka. Berikut merupakan Interface Standards Design dari aplikasi Tiket.io:
Terdiri 3 warna yaitu primer, sekunder dan accent. Warna primer yaitu warna dasar putih (FFFFFF) bertujuan untuk memberikan kesan yang modern, minimalis, dan clean. Warna sekunder memiliki dasar biru (2F9EFC) dan dikombinasi dengan warna tuanya. Sedangkan warna accent memiliki dasar oranye (EE8F01), dimana warna accent dapat digunakan pada hal-hal yang perlu penekanan atau perlu mendapatkan atensi yang lebih dari pengguna.
Menggunakan gaya teks Poppins dengan beberapa tipe sehingga dapat memberikan visual hierarchy yang jelas kepada pengguna.
Menggunakan aturan 60-30-10 untuk penggunaan warna pada setiap halaman.
Interface Design Prototyping
Pada tahap ini, perancang antarmuka membuat 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 memahami cara kerjanya. Berikut merupakan Interface Design Prototyping dari Aplikasi Tiket.io:
Interface Evaluation
Evaluasi yang dilakukan pada desain ini menggunakan Interface Evaluation, dimana desain kita telah dibuat menjadi desain interaktif dan bisa langsung dicoba melalui fitur present pada Figma.Sejauh evaluasi yang dilakukan, desain ini berjalan sesuai dengan flow yang kita inginkan terhadap user. Selain itu keterbacaan teks juga tidak bermasalah. Walaupun di sebagian besar page, banyak informasi yang ditampilkan, user tetap dapat melihat informasi-informasi dari yang paling penting hingga yang kurang penting mengingat penggunaan ukuran dan warna font yang menyesuaikan. Dan tentu yang paling penting adalah kemudahan penggunaan aplikasi ini terbantu dengan interface yang intuitif, sehingga user tidak tersesat dan bingung ketika menggunakan aplikasi. Dengan telah dilakukannya Interface Evaluation pada desain ini, maka telah selesai juga seluruh tahap iterasi pada User Interface Design Process. Sehingga prototype dari desain ini nantinya bisa dilanjutkan ke tahap Software Development sehingga bisa terintegrasi dengan sistem dan dapat digunakan secara real oleh para user.
Muhammad Daffa Harits - 5025211005
Hanafi Satriyo Utomo Setiawan - 5025211195
Beauty Valen Fajri - 5025211227.png)
Komentar
Posting Komentar