BAB IV PERANCANGAN LAYAR 4.1 User Interface Pada analisa dan Perancangan Sistem Informasi Tata Kelola e-Filling Dokumen Administrasi Perkantoran di PT. Indo Mindstorm Wizzard, Penulis membuat perancangan layar user interface agar pengguna komputer dapat mengoprasikan sistem dengan mudah dan produktif. Adapun rancangan layar user interface yang akan di tampilkan adalah sebagai berikut : 1.
Rancangan Layar Login
Gambar 4.1 Tampilan Layar Login Keterangan : Pada tampilan layar form Login terdapat User Name dan Password yang harus diinput oleh user. Setelah User Name dan Password yang diinput benar, maka akan tampil Menu Utama – Home. Tetapi jika User Name dan Password salah, maka akan tampil pesan “Error User Name dan Password Salah”. 58
http://digilib.mercubuana.ac.id/
59
2.
Halaman Menu Utama - Home
Gambar 4.2 Tampilan Layar Menu Utama - Home
Keterangan : Pada tampilan Halaman Menu Utama – Home terdapat informasi mengenai perusahaan, yaitu About Company, Vission, Mission dan Objective & Comitment dari PT. Indo Mindstrom Wizzard.
http://digilib.mercubuana.ac.id/
60
3.
Halaman Menu User
Gambar 4.3 Tampilan Layar Master User
Keterangan : Pada form menu User, ID User akan muncul secara otomatis, yang kemudian akan diinput Nama User, Password, Nama Lengkap, Email dan akan memilih akses yang menjadi hak User sesuai dengan policy perusahaan. Setelah diinput dapat di klik tombol simpan. Jika Staff akan melakukan pencarian atas User yang sudah pernah didaftarkan sebelumnya, maka bisa dilakukan melalui tombol cari, dengan terlebih dahulu menginput kata kuncinya.
http://digilib.mercubuana.ac.id/
61
4.
Halaman Menu Master Template
Gambar 4.4 Tampilan Layar Menu Master Template
Keterangan : Pada menu form Master Template, untuk menambahkan template baru, akan ada Nomor Template yang otomatis muncul, kemudian Staff bisa menginput Nama Template dan Hal Template dan klik tombol simpan. Untuk melakukan pencarian bisa diklik tombol cari, dengan terlebih dahulu menginput kata kuncinya.
http://digilib.mercubuana.ac.id/
62
5.
Halaman Menu Filling Surat (Buat Surat)
Gambar 4.5 Tampilan Layar Menu Filling Surat (BuatSurat)
Keterangan : Setelah tab Filling diklik, maka akan muncul dua pilihan yaitu Surat dan Dokumen. Tampilan di atas merupakan tampilan apabila Staff memilih Surat, yang dimaksudkan untuk membuat surat baru. Staff akan terlebih dahulu disuguhkan pilihan pencarian template surat standar perusahaan yang nantinya dipergunakan untuk format surat yang akan dibuat.
http://digilib.mercubuana.ac.id/
63
Gambar 4.6 Tampilan Layar Menu Filling Surat (Eksekusi Buat Surat)
Keterangan : Selanjutnya setelah Staff memilih template surat yang sesuai dengan kebutuhan pembuatan suratnya, maka template yang siap di edit (diinput) akan tampil pada layar. Pada bagian bawah aka nada pilihan siapa yang akan menjadi reviewer dan approver. Lalu selanjutnya klik Submit.
http://digilib.mercubuana.ac.id/
64
6.
Halaman Menu Filling Dokumen (Kelola Dokumen)
Gambar 4.7 Tampilan Layar Menu Filling Dokumen (Arsip Dokumen)
Keterangan : Setelah tab Filling diklik, maka akan muncul dua pilihan yaitu Surat dan Dokumen. Tampilan di atas merupakan tampilan apabila Staff memilih Dokumen. Staff dapat melakukan pengelolaan dokumen dari mulai upload dokumen hingga mencari dokumen yang sudah di upload (diarsip) sebelumnya.
http://digilib.mercubuana.ac.id/
65
7.
Halaman Menu Review / ApproveTemplate
Gambar 4.8 Tampilan Layar Menu Review/Approve Template Keterangan : Tab Review/Approve Template akan menampilkan template – template baru yang perlu direview dan atau di approve.
http://digilib.mercubuana.ac.id/
66
Gambar 4.9 Tampilan Layar Menu Eksekusi Review/Approve Template
Keterangan : Selanjutnya setelah memilih template mana yang akan direview dan atau diapprove, maka akan tampil template yang diajukan oleh Staff. Reviewer bisa memberikan komentar pada kolom yang tersedia jika masih ada yang belum sesuai, sedangkan Approval dapat meng-approve template tersebut. Komentar kemudian akan terkirim kepada Staff dan Approval. Setelah itu maka Staff akan merevisi template sesuai dengan arahan pada komentar dari Reviewer.
http://digilib.mercubuana.ac.id/
67
8. Halaman Menu Review/Approve Surat
Gambar 4.10 Tampilan Layar Menu Review Surat
Keterangan : Tab Review/Approve Surat akan menampilkan surat - surat baru yang dibuat oleh Staff, yang harus direview dan atau diapprove.
http://digilib.mercubuana.ac.id/
68
Gambar 4.11 Tampilan Layar Menu Eksekusi Review/Approve Surat
Keterangan : Selanjutnya setelah memilih Surat mana yang akan direview dan atau diapprove, maka akan tampil Surat yang diajukan oleh Staff. Reviewer bisa memberikan komentar pada kolom yang tersedia jika masih ada yang belum sesuai, sedangkan Approval dapat meng-approve surat tersebut. Komentar tersebut kemudian akan terkirim kepada Staff dan Approval. Setelah itu maka Staff akan merevisi Surat sesuai dengan arahan pada komentar dari Reviewer.
http://digilib.mercubuana.ac.id/
69
9. Halaman Menu Pengaturan
Gambar 4.12 Tampilan Layar Menu Pengaturan Keterangan : Staff dapat melakukan pengaturan hak akses dan maksimum kuota.
http://digilib.mercubuana.ac.id/
70
4.2 Kesimpulan Hasil Perancangan Dalam Perancangan Sistem Informasi Tata Kelola e-Filling Dokumen Administrasi Perkantoran di PT. Indo Mindstorm Wizzard, penulis menarik beberapa kesimpulan antara lain: 1. Design perancangan layar sangat memudahkan user untuk mengoprasikan aplikasi (user friendly). 2. Dalam perancangan layar User, hak akses ada 4 jenis yaitu sebagai Admin, Staff, Reviewer, dan Approver. Satu orang karyawan maksimal dapat memiliki 3 jenis hak akses.
http://digilib.mercubuana.ac.id/