BAB III PERANCANGAN SISTEM
3.2 D ESAIN S ISTEM
3.2.5. Desain Antarmuka Pengguna
Tabel Kategori_murid menyimpan informasi tentang kategori yang terkait dengan murid dan mata pelajaran. Kolom Id_kategori_murid adalah identitas unik untuk setiap entri dalam tabel ini. Username menyimpan nama pengguna murid. Kelas menunjukkan kelas atau kelompok murid. Id_kategori menghubungkan entri ini dengan kategori tertentu, sedangkan Nama_kategori menyimpan nama kategori tersebut.
Id_mapel dan Nama_mapel merujuk pada mata pelajaran yang terkait dengan kategori ini. Nilaiprestest menyimpan nilai hasil pretest murid dalam format desimal (misalnya, 85.50). Created mencatat waktu dan tanggal ketika entri dibuat. Tipe data Int digunakan untuk ID numerik, Varchar untuk teks, Decimal untuk nilai numerik dengan presisi, dan Timestamp untuk mencatat waktu.
52 meningkatkan efisiensi operasional dan mendukung pengambilan keputusan yang lebih baik.
3.2.5.1 Dashboard
Dashboard sistem dimulai dengan tampilan utama yang mencolok, yang menampilkan jumbotron besar di bagian atas. Jumbotron ini berfungsi sebagai elemen visual utama dan menampilkan logo DgDL (Differentiated Learning) secara terpusat. Desain ini tidak hanya memberikan identitas visual yang kuat bagi sistem tetapi juga menempatkan merek DgDL sebagai fokus utama halaman.
Di bawah jumbotron, terdapat empat logo yang masing-masing mewakili fitur dari sistem. Logo-logo ini adalah:
• Pendekatan Berdiferensiasi: Menunjukkan metode pembelajaran yang disesuaikan dengan kebutuhan individu pengguna.
• Pengajaran Terintegrasi: Menggambarkan bagaimana berbagai elemen pengajaran dikombinasikan secara harmonis dalam sistem.
• Akses Global: Mencerminkan kemampuan sistem untuk diakses dari berbagai lokasi dan perangkat.
Gambar 3. 16 Dashboard
• Teknologi Terkini: Menunjukkan penggunaan teknologi terbaru dalam pengembangan dan implementasi sistem.
Penempatan logo-logo ini secara visual membagi informasi penting dengan jelas dan menyediakan akses cepat ke fitur utama, membantu pengguna untuk langsung mengidentifikasi dan mengakses berbagai aspek dari sistem DgDL. Desain ini bertujuan untuk menciptakan pengalaman pengguna yang intuitif dan terorganisir, memastikan bahwa setiap elemen antarmuka mendukung navigasi yang efisien dan pemahaman yang mudah tentang fungsionalitas sistem.
3.2.5.2 Isi Dashboard
Dashboard dirancang untuk memberikan informasi yang relevan dan aksesibilitas yang mudah bagi pengguna. Struktur isi dashboard dibagi menjadi dua area utama: sisi kiri dan kanan/tengah.
Bagian Kiri:
Gambar 3. 17 Isi Dashboard
54
• Nama Pengguna: Di bagian kiri atas dashboard, informasi tentang pengguna yang sedang aktif ditampilkan. Jika pengguna belum melakukan login, sistem akan menampilkan status sebagai "Guest". Hal ini memastikan bahwa pengguna mengetahui identitas mereka atau status akses mereka saat mengakses dashboard.
• Jam: Di bawah nama pengguna, waktu saat ini ditampilkan untuk membantu pengguna melacak waktu mereka saat menggunakan sistem.
• Pojok Berita: Menampilkan berita terbaru yang diambil dari tempo.co, memberikan informasi terkini yang relevan dan menarik kepada pengguna. Pojok berita ini memastikan bahwa pengguna tetap up-to-date dengan berita penting dan relevan.
Bagian Kanan/Tengah:
• Informasi: Menyediakan deskripsi singkat tentang dashboard, yaitu "Ini adalah dashboard dari E-Learning berdiferensiasi yang secara khusus dibuat untuk pembelajaran yang dibedakan dalam satu waktu yang sama." Deskripsi ini memberikan konteks dan pemahaman mengenai tujuan dan fungsionalitas dashboard.
• Informasi 2: Memberikan pesan tambahan yang menjelaskan bahwa "Anda harus login untuk mengakses fitur-fitur yang ada." Pesan ini mengingatkan pengguna tentang kebutuhan untuk login agar dapat mengakses seluruh fitur sistem. Jika anda sudah login, akan ditampilkan informasi baru seperti mata pelajaran yang anda kelola (guru) atau mata pelajaran yang anda ikuti (murid)
• Diagram Pie 1: Menampilkan distribusi jumlah guru dan murid dalam sistem. Diagram ini memberikan gambaran visual yang jelas tentang proporsi guru dan murid yang terdaftar.
• Diagram Pie 2: Menunjukkan jumlah murid berdasarkan jenjang pendidikan. Diagram ini membantu dalam memahami distribusi murid di berbagai jenjang pendidikan, memberikan insight yang berguna untuk analisis dan perencanaan.
Desain dashboard ini menggabungkan elemen-elemen informasi yang penting dan visualisasi data yang jelas, memastikan bahwa
pengguna dapat dengan mudah mengakses informasi relevan dan memahami status serta distribusi data dalam sistem.
3.2.5.3 Bar Navigasi
Bar navigasi adalah elemen penting yang memudahkan pengguna dalam menavigasi berbagai bagian sistem dengan cepat dan efisien. Bar navigasi ini terletak di bagian atas halaman dashboard dan dirancang untuk memberikan akses langsung ke fungsi utama sistem. Isi bar navigasi dari kiri ke kanan adalah sebagai berikut:
• Logo DgDL: Terletak di bagian paling kiri, logo DgDL berfungsi sebagai elemen branding utama. Logo ini tidak hanya memperkuat identitas merek tetapi juga berfungsi sebagai tombol navigasi yang membawa pengguna kembali ke halaman utama dashboard ketika diklik.
• Tombol ke Halaman Utama (Dashboard): Tombol ini menyediakan akses langsung ke halaman utama dashboard dari mana pengguna dapat melihat informasi dan fitur-fitur utama sistem. Tombol ini memudahkan navigasi kembali ke tampilan utama tanpa harus menggunakan opsi lain.
• Tombol ke Tentang Kami (About Us): Menyediakan akses ke halaman yang berisi informasi tentang organisasi atau pengembang sistem. Halaman ini menjelaskan latar belakang, misi, dan tujuan dari DgDL, memberikan konteks lebih lanjut kepada pengguna mengenai sistem yang mereka gunakan.
• Tombol ke Kontak: Memudahkan pengguna untuk menghubungi tim dukungan atau administrasi sistem. Halaman ini biasanya mencakup formulir kontak, alamat email, dan informasi kontak lainnya.
• Tombol Login: Mengarahkan pengguna ke halaman login, di mana mereka dapat memasukkan kredensial mereka untuk mengakses fitur-fitur sistem yang memerlukan autentikasi.
• Tombol Register: Mengarahkan pengguna ke halaman pendaftaran untuk membuat akun baru. Tombol ini
Gambar 3. 18 Bar Navigasi
56 memungkinkan pengguna yang belum memiliki akun untuk mendaftar dan mendapatkan akses ke fitur yang lebih lengkap.
• Tombol Logout: Hanya tersedia jikalau pengguna sudah login ke akun mereka. Mengarahkan pengguna untuk mengakhiri sesi.
• Tombol yang Mengarah ke Laman Resmi AKN Pacitan:
Menyediakan link langsung ke laman resmi AKN Pacitan. Ini memberikan akses cepat ke situs web kampus, menghubungkan pengguna dengan informasi terkait pendidikan dan kegiatan kampus.
Bar navigasi ini dirancang untuk memberikan pengalaman pengguna yang mulus dan memastikan akses mudah ke berbagai fungsi dan informasi yang relevan. Desain yang intuitif dan terstruktur mendukung navigasi yang efisien di seluruh sistem.