Perancangan Antarmuka Perancangan Dan Evaluasi Heuristik Pada Perangkat Lunak Manajemen Proyek Dengan Prinsip Usability Nielsen

3.2 Perancangan Antarmuka

Perancangan antarmuka pada perangkat lunak manajemen proyek ini dibagi dalam beberapa bagian, antara lain:

3.2.1 Form Utama

Perancangan antarmuka dimulai dari perancangan form utama. Form utama terdiri dari beberapa bagian, antara lain: Gambar 3.13 Rancangan Jendela Utama Keterangan gambar: 1. Tombol menu utamaapplication button 2. Tabtab 3. Tombolbutton 4. Grup tabtab group 5. Control box 6. Ribbon 7. Status bar Universitas Sumatera Utara

3.2.2 Ribbon

Pada gambar 3.2, terlihat rancangan antarmuka mengambil tema dari Microsoft Office 2007 yang memakai teknologi antarmuka Ribbon. Menurut Microsoft® Office System User Interface Design Guidelines 2007, implementasi Ribbon dalam perangkat lunak sendiri harus memenuhi beberapa syarat: 1. Ribbon adalah pengganti utama dari menu dan toolbar dalam program 2. Ribbon harus menggantikan semua fungsi top-level menus contoh: File, Edit, View, Insert, Window, Help, dan lain-lain. 3. Ribbon tidak boleh muncul bersama-sama dengan menu dan toolbar lainnya. Gambar 3.14 Perbandingan Tampilan antara Menu Biasa dan Ribbon Terlihat pada gambar 3.14 adalah perbandingan antara menu biasa dan menu Ribbon. Pada menu biasa, pencarian dan navigasi pilihan menu item tidak mudah dilakukan, dan icon pada menu biasa sangat kecil dan tidak mudah dibedakan. Lain halnya dengan menu Ribbon. Pada Ribbon, menu-menu sudah disusun sedemikian rupa, sehingga pencarian dan navigasi dapat dilakukan berdasarkan kelompok fungsi kegunaan. Gambar-gambar pada tombol-tombol pilihan cukup besar, mudah dilihat, dan mudah dibedakan antara satu dengan lainnya. Dalam perangkat lunak manajemen proyek ini, penulis membagi tab pada Ribbon berdasarkan fungsi menjadi 3 tab group, seperti pada gambar 3.2, yaitu: Universitas Sumatera Utara 1. Proyek Gambar 3.15 Tab Proyek Tab Proyek berisi grup tab yang berkaitan dengan fungsi dalam pengerjaan proyek, dan hanya akan tampak pada layar apabila pengguna sudah berhasil melalui proses login. Isi tab Proyek antara lain sebagai berikut: a. Proyek Grup tab ini berisi tiga tombol utama, yaitu tombol untuk membuat proyek baru, tombol untuk membuka proyek, dan tombol untuk menutup proyek. b. Gantt Chart Grup tab ini berisi 2 buah tombol, yaitu tombol opsi untuk mengubah tampilan Gantt Chart menjadi tampilan persen, atau tampilan nama. c. Opsi Lain Group tab ini berisi opsi untuk menampilak sebuah kalender kecil untuk membantu dalam pengorganisasian proyek. 2. Pengguna Gambar 3.16 Tab Pengguna Universitas Sumatera Utara Tab Pengguna berisi grup tab yang memiliki fungsi untuk membantu pengguna, antara lain sebagai berikut: a. Login Grup tab ini berisi tombol-tombol yang akan membantu pengguna untuk login ke dalam aplikasi, mengganti kata kunci, dan membuat akun pengguna baru. b. Lain-lain Grup tab ini berisi tombol pilihan bantuan dan tombol tentang aplikasi Firefly Project Manager. c. Keluar Grup tab ini memberikan dua pilihan kepada pengguna, antara logout dari aplikasi, atau keluar dari aplikasi 3. Pengaturan Gambar 3.17 Tab Pengaturan Tab ini memiliki fungsi untuk membantu pengguna dalam pengaturan aplikasi. Adapun dua tombol yang terletak dalam grup tab Pengaturan adalah untuk pengaturan pangkalan data dan tema aplikasi.

3.2.3 Form Login

Gambar 3.18 Form Login Universitas Sumatera Utara Gambar 3.6 memperlihatkan form Login yang akan muncul bila pengguna menekan tombol Login dari tab Login. Kotak dialog ini akan meminta masukkan dari pengguna, berupa Login ID dan kata kunci. Adapun tiga tombol yang dapat digunakan pengguna untuk berinteraksi dengan kotak dialog tersebut adalah tombol Login, tombol Batal, dan tombol X di sebelah kanan atas kotak dialog. Tombol Batal dan tombol X akan menutup kotak form Login ini. Tombol Login akan memeriksa apakah Login ID pengguna dan kata kunci yang dimasukkan sudah sesuai. Bila sesuai, pengguna dapat menggunakan aplikasi. Gambar 3.19 Peringatan Kesalahan 1 Gambar 3.20 Peringatan Kesalahan 2 Bila pengguna salah dalam memasukkan isian pada kotak form Login, akan muncul dua jenis peringatan. Peringatan pertama seperti pada gambar 3.7 akan muncul bila pengguna memasukkan Login ID yang tidak terdaftar pada pangkalan data, sedangkan peringatan kedua seperti pada gambar 3.8 akan muncul bila pengguna memasukkan Login ID yang sudah terdaftar, tetapi dengan kata kunci yang salah. Universitas Sumatera Utara Gambar 3.21 Bantuan pada Mouse Over pada Text Box Gambar 3.9 memperlihatkan tulisan bantuan ketika cursor mouse sedang berada diatasmouse over komponen-komponen pada aplikasi. Tulisan bantuan ini akan membantu pengguna untuk mengetahui rincian pada isiantext box dan tombol, sehingga pengguna tidak bingung dalam penggunaan aplikasi. Hampir semua tombol dan isian mempunyai tulisan interaktif ini, sebagai contoh pada gambar 3.20 menunjukkan tulisan bantuan yang serupa pada tombol pada Ribbon. Gambar 3.22 Bantuan pada Mouse Over pada Ribbon

3.2.4 Sidebar Pengaturan Pangkalan Data

Universitas Sumatera Utara Gambar 3.23 Sidebar Pengaturan Pangkalan Data Sidebar pengaturan pangkalan data ini akan muncul apabila tombol Pengaturan Pangkalan Data pada Ribbon ditekan. Pengguna diberikan opsi pengaturan pangkalan data berupa nama pengguna pangkalan data, kata kunci pangkalan data, nama server pangkalan data, dan nama database pangkalan data. Pengguna dapat mengklik tombol OK setelah mengisi rincian pangkalan data. Apabila aplikasi digunakan untuk pertama kalinya, tombol Penggunaan pertama dapat dipilih untuk pengaturan pangkalan data secara otomatis.

3.2.5 Sidebar Pengaturan Tema

Universitas Sumatera Utara Gambar 3.24 Sidebar Pengaturan Tema Sidebar pengaturan tema diperuntukkan bagi pengguna untuk dapat memilih tema sesuai dengan keinginan masing-masing pengguna. Menu ini dapat diakses melalui Pengaturan Tema pada Ribbon. Terdapat sepuluh jenis tema yang dapat dipilih oleh pengguna, antara lain: Tabel 3.1 Tabel Tema pada Aplikasi Nama Tema Keterangan Abu-abu Tema silver seperti pada Microsoft Office Biru Tema blue seperti pada Microsoft Office Biru Gelombang Tema dengan warna dasar biru dengan pola gelombang Hijau Tema dengan warna dasar hijau Hitam Tema black seperti pada Microsoft Office Imaginasi Tema warna seperti pada komputer Apple Karamel Tema dengan warna dasar cokelat Merah Jambu Tema dengan warna dasar merah jambu Windows Seven Tema dengan warna seperti pada Windows Seven Valentin Tema dengan nuansa Hari Kasih Sayang Universitas Sumatera Utara Gambar 3.25 Tampilan Tema Abu-abu Gambar 3.26 Tampilan Tema Biru Gambar 3.27 Tampilan Tema Biru Bergelombang Universitas Sumatera Utara Gambar 3.28 Tampilan Tema Hijau Gambar 3.29 Tampilan Tema Hitam Gambar 3.30 Tampilan Tema Imaginasi Universitas Sumatera Utara Gambar 3.31 Tampilan Tema Karamel Gambar 3.32 Tampilan Tema Merah Jambu Gambar 3.33 Tampilan Tema Windows Seven Universitas Sumatera Utara Gambar 3.34 Tampilan Tema Valentin

3.2.6 Sidebar Proyek Baru

Gambar 3.35 Sidebar Proyek Baru Sidebar proyek baru dapat diakses melalui tombol Proyek Baru pada Ribbon. Sidebar ini menampung informasi yang diperlukan aplikasi untuk membuat sebuah proyek baru, antara lain: judul proyek, kata kunci dan catatan proyek. Bila rincian telah selesai diisi, maka pengguna dapat menekan tombol Simpan untuk menyimpan proyek baru tersebut. Universitas Sumatera Utara Ada beberapa jenis kotak dialog yang akan muncul untuk memperingatkan pengguna apabila pengguna lalai dalam pengisian informasi proyek. Bila pengguna lupa menuliskan judul proyek, maka aplikasi akan mengeluarkan sebuah kotak dialog yang akan memperingatkan pengguna, seperti pada Gambar 3.23. Gambar 3.36 Peringatan Judul Proyek Kosong Dalam pembuatan proyek baru, pengguna diberikan pilihan untuk dapat mengunci proyek dengan kata kunci, ataupun membiarkan proyek tidak terkunci dengan kata kunci apapun. Bila pengguna mengosongkan kedua isian kata kunci dan perulangannya, maka program akan memunculkan kotak dialog informasi yang akan mengkonfirmasi pengguna perihal isian kata kunci yang kosong, seperti pada Gambar 3.25. Apabila pengguna memilih Ya, maka kata kunci proyek akan dibiarkan kosong. Bila pengguna memilih Tidak, pengguna akan diberikan kesempatan lagi untuk melengkapi isian kata kunci. Gambar 3.37 Informasi Kata Kunci Kosong Kotak dialog peringatan kesalahan seperti pada Gambar 3.26 akan muncul bila kata kunci yang dimasukkan pada textbox pertama tidak sesuai dengan kata kunci yang ada pada textbox kata kunci yang harus diulangi. Pengguna akan diminta untuk mengulangi pengisian kata kunci. Universitas Sumatera Utara Gambar 3.38 Peringatan Kata Kunci Tidak Sesuai

3.2.7 Sidebar Buka Proyek

Gambar 3.39 Sidebar Buka Proyek Sidebar buka proyek dapat diakses melalui tombol Buka Proyek pada Ribbon. Sidebar ini memungkinkan pengguna untuk dapat membuka proyek yang sudah pernah disimpan sebelumnya. Di dalam sidebar ini, terdapat sebuah tabel yang akan menampilkan informasi mengenai proyek yang sudah disimpan, antara lain: nama proyek, nama pembuat proyek, dan tanggal proyek tersebut dibuat. Universitas Sumatera Utara Bila pengguna pemilih salah satu proyek, maka textbox catatan akan langsung otomatis menampilkan catatan dari proyek yang dipilih. Untuk dapat membuka proyek tersebut, pengguna harus memasukkan kata kunci. Bila pengguna salah memasukkan kata kunci proyek, maka aplikasi akan memunculkan kotak dialog peringatan, seperti pada Gambar 3.28. Gambar 3.40 Peringatan Kata Kunci Salah

3.2.8 Lembar Kerja Utama

Gambar 3.41 Lembar Kerja Utama Lembar kerja utama dapat diakses setelah pengguna membuat sebuah proyek baru atau membuka sebuah proyek yang telah ada sebelumnya. Tampilan lembar kerja utama dapat dilihat pada Gambar 3.29. Lembar kerja utama terbagi menjadi dua bagian utama, yaitu: Universitas Sumatera Utara

3.2.8.1 Tabel Jadwal Kegiatan

Gambar 3.42 Tabel Jadwal Kegiatan Tabel jadwal kegiatan yang berada pada sisi kiri lembar kerja utama, berisi rincian kegiatan yang dilakukan selama proyek berlangsung, antara lain sebagai berikut: nama kegiatan, waktu mulai, waktu selesai, dan persen selesai.

3.2.8.2 Gantt Chart

Gambar 3.43 Gantt Chart Universitas Sumatera Utara Gantt chart, yang berada pada sisi kanan lembar kerja utama, berisi tampilan diagram yang merepresentasikan kegiatan-kegiatan pada proyek menjadi bentuk visual. Batang-batang diagram ini dapat digeser, diedit, dihubungkan dengan batang- batang diagram lainya. Garis merah pada diagram ini menunjukkan hari pada saat pengguna memakai aplikasi tersebut. Di sisi kiri dan kanan Gantt chart, terdapat masing-masing sebuah navigator yang apabila diklik, akan menunjukkan kegiatan selanjutnya dari proyek kepada pengguna. Scroll bar horizontal dibawahnya berfungsi untuk memudahkan pengguna dalam melakukan navigasi ke kiri dan ke kanan Gantt chart. Gambar 3.44 Pop-up Menu pada Gantt Chart Menu klik kanan pop-up menu pada Gantt chart akan menampilkan beberapa pilihan, seperti tampak pada Gambar 3.32. Adapun keterangan menu adalah sebagai berikut: Tabel 3.2 Keterangan Pop-up Menu pada Gantt Chart Nama Menu Keterangan Kegiatan Baru Berfungsi untuk membuat kegiatan baru yang sederhana dalam proyek Kegiatan Sehari Penuh Berfungsi untuk membuat kegiatan proyek yang memerlukan waktu penyelesaian seharian penuh Kejadian Berulang Baru Berfungsi untuk membuat kejadian berulang yang terjadi selama proyek berlangsung Hari ini Berfungsi untuk menavigasi pengguna kembali ke kegiatan hari ini Universitas Sumatera Utara

3.2.9 Kegiatan Baru

Gambar 3.45 Jendela Kegiatan Baru Gambar 3.33 menunjukkan jendela yang muncul setelah kegiatan baru dipilih. Kegiatan baru ini berisi rincian kegiatan pada proyek, misalnya: judul kegiatan, lokasi kegiatan, label kegiatan, waktu mulai, waktu selesai, persen selesainya kegiatan tersebut, status kegiatan, pengingat reminder, penunjuk waktu, dan catatan kegiatan.

3.2.10 Pengingat

Pengingat berfungsi sebagai jendela pengingat bila diatur untuk mengingatkan pengguna untuk kegiatan tertentu pada Gantt Chart. Pengingat akan muncul sesuai dengan waktu yang diatur oleh pengguna. Pengguna mempunyai opsi untuk menunda pengingat, atau bisa langsung menghapus pengingat. Universitas Sumatera Utara Gambar 3.46 Jendela Pengingat Universitas Sumatera Utara

3.3 Perancangan Pangkalan Data