LAPORAN

INTERAKSI MANUSIA DAN KOMPUTER

Perancangan Interface

Disusun Oleh :

Candra Sofyan Sukarsa 1510530222 / D

Komang Widiatmika 1510530215 / D

Khaerul Yasin 1510530212 / D

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

STMIK BUMIGORA MATARAM
TEKNIK INFORMATIKA
2016

i
 KATA PENGANTAR

Puji syukur kehadirat Allah swt karena berkat rahmat dan kasih-Nya kami dapat
menyelesaikan laporan ini tepat pada waktunya.

Laporan ini kami buat untuk menyelesaikan tugas yang telah diberikan dosen kami untuk
membuat laporan tentang Perancangan Tampilan ini.

Semoga laporan yang kami buat ini dapat menambah pengetahuan kami dan
pembaca tentang mata kuliah Interaksi Manusia dan Komputer khususnya tentang
Perancangan Tampilan.

Kami mohon maaf apabila dalam laporan kami ini terdapat banyak kesalahan dan kami
mohon masukan dari dosen maupun mahasiswa lain yang turut membaca makalah kami
ini.

ii
 DAFTAR ISI

Cover Laporan ..........................................................................................................................i

Kata Pengantar . ........................................................................................................................ii

Daftar isi ....................................................................................................................................iii

BAB I PENDAHULUAN .............................................................................................................1

A. Latar Belakang ...................................................................................................1

B. Rumusan Masalah ..............................................................................................1
C. Tujuan Pembahasan ..........................................................................................1

BAB II PEMBAHASAN ..............................................................................................................2

A. Prinsip dan Bentuk Perancangan ......................................................................2

1. Model Pengguna .........................................................................................2
2. Bahasa Perintah ..........................................................................................3
3. Umpan Balik ................................................................................................3
4. Penampilan Informasi .................................................................................5
B. Perancangan Tampilan Berbasis Grafis ..........................................................6
C. Waktu Tanggap ..................................................................................................11
D. Penanganan Kesalahan .....................................................................................13

BAB III Penutup ........................................................................................................................24

A. Kesimpulan .........................................................................................................24
B. Saran ...................................................................................................................24

iii
 BAB I PENDAHULUAN

A. Latar Belakang
Komputer merupakan sekumpulan peralatan elektronik yang saling berkaitan
antara satu dengan yang lainnya, sehingga dapat di gunakan untuk memasukkan
data, memproses, dan menghasilkan informasi.
Dalam computer terdapat perangkat lunak yang menampilkan berbagai informasi
computer maupun informasi lain, informasi ini ditampilkan dengan sangat menarik
untuk memenuhi kepuasan konsumen terhadap sebuah aplikasi
Dalam laporan ini kami akan membahas tentang Interfade Khususnya dalam hal
perancangan tampilan nya.

B. Rumusan Masalah
1. Model Pengguna
2. Bahasa Perintah
3. Umpan Balik
4. Penampilan Informasi

C. Tujuan Pembahasan
Agar pembaca dan kami sebagai penulis laporan ini lebih memahami konsep-
konsep dasar dalam perancangan interface.

1
 BAB II PEMBAHASAN

A. Prinsip dan Bentuk Perancangan

Aplikasi ini merupakan aplikasi yang penulis buat sendiri, aplikasi ini penulis rancang dan
buat berdasarkan kebutuhan manusia untuk memudahkan pekerjaan tersebut. Design
tampil aplikasi ini sangat user-frienly Karena design aplikasi ini sendiri sangat dinamis dan
memiliki design yang tidak asing bagi orang kebanyakan.

1. Model Pengguna
Aplikasi ini buat dengan memiliki tujuan usia pengguna, yaitu berkisar pada usia 18-
40 karena aplikasi ini sasaran nya untuk orang-orang kantoran, dan usia 18-40
merupakan usia produktif sehingga sangat membutuhkan aplikasi ini untuk
mendukung kinerja nya dalam mengerjakan pekerjaan agar lebih efisien.
Selain itu aplikasi ini memiliki system Login dimana fungsi dari system login ini selain
melindungi data-data tiap pengguna tetapi juga berfungsi sebagai informasi
penggunaan aplikasi ini berdasarkan tiap user.

Gambar 1. Login aplikasi

2
2. Bahasa Perintah
Untuk Bahasa perintah, aplikasi ini menggunakan Bahasa Indonesia, serta
menggunakan Bahasa-bahsa khusus seperti tombol shortcut untuk fungsi tertentu
agar memudahka user dalam mengeksekusi perintah dalam sebuah aplikasi, contoh
nya seperti pada gambar yaitu, tombol END untuk menyimpan, F5 untuk refresh, F2
untuk mengubah data, DEL untuk menghapus, F8 untuk mencetak dan ESC untuk
menutup jendela aplikasi.

Gambar 2. Shortcut rahasia pada aplikasi

3. Umpan Balik
Dalam sebuah aplikasi terdapat sebuah umpa balik, fungsi dari ini adalah untuk
mencegah pengguna aplikasi ini dalam melakukan kesalahan. Selain itu umpan balik
juga berfungsi sebagai pengingat bahwa eksekusi perintah yang dilakukan pengguna
telah berhasil dijalankan pada program ini.

Gambar 3. Umpan balik pada aplikasi

3
Gambar 4. Umpan balik pada aplikasi

Gambar 5. Umpan balik pada aplikasi

Gambar 6. Umpan balik pada aplikasi

4
4. Penampilan Informasi
Dalam aplikasi ini semua informasi dibagi menjadi dua bagian, yang pertama dalam
bentuk table, dalam table ini dikhususkan untuk informasi dalam penginputan data.
Dan yang kedua informasi dalam bentuk sidebar, informasi ini dikhususkan untuk
informasi pengguna aplikasi sehingga informasi disini tidak dapat diubah atau
dinputkan Karena besifat mutlak.

Gambar 7. Penampilan informasi pada aplikasi

Gambar 8. Penampilan informasi dalam bentuk table pada aplikasi

Gambar 9. Penampilan informasi dalam bentuk sidebar

5
B. Perancangan Tampilan Berbasis Grafis
Alasan mengapa penulis katakan bahwa aplikasi ini sangat user-friendly Karena aplikasi
ini sangat mirip dengan aplikasi office seperti Microsoft office.
Selain itu aplikasi ini memiliki warna yang menarik dan dapat di sesuaikan dengan
kebutuhan penggunaya

Gambar 10. Tampilan Home pada aplikasi

Selain user-frienly aplikasi ini memiliki tampilan yang dinamis Karena memiliki tampilan
yang dapat disesuaikan dengan kubutuhan pengguna nya

Gambar 11. Tampilan menu pilihan tema pada aplikasi

6
Gambar 12. Tampilan tema pada aplikasi

Gambar 13. Tampilan tema pada aplikasi

7
 Gambar 14. Tampilan tema pada aplikasi

Gambar 15. Tampila tema pada aplikasi

Bukan hanya tema saja yang dapat disesuaikan dengan kebuuhan penggunanya,
melaikan gaya tombol / menu-menu pada aplikasi ini dapat disesuaikan dengan
kebutuhan penggunanya.

8
Gambar 16. Tampilan menu pilihan gaya tombol pada aplikasi

Gambar 17. Tampilan pilihan gaya tombol pada aplikasi

9
 Gambar 18. Tampilan gaya tombol pada aplikasi

Bukan hanya tema aplikasi ini juga dapat mengganti latar aplikasi ini dengan gambar yang
kita inginkan

Gambar 19. Tampilan pilihan wallpaper pada aplikasi

10
 Gambar 20. Tampilan wallpaper pada aplikasi

C. Waktu Tanggap
Salah satu factor yang membuat sebuah aplikasi menjadi sangat agresif dan handal
adalah waktu tanggap, waktu tanggap merupakan seberapa cepat sebuah aplikasi
merespon ekseskusi perintah dari pengguna nya, dalam aplikasi ini waktu tanggap untuk
setiap menampilkan menu dan data sangat cepat dan responsive, hanya memerlukan
waktu kurang dari 10 detik aplikasi ini langsung merespon perintah penggunanya.

Gambar 21. Waktu Tanggap pada aplikasi

11
Gambar 22. Tampilan Logout pada aplikasi

Gambar 23. Tampilam Logout pada aplikasi

Gambar 24. Tampilan logout pada aplikasi

12
D. Penanganan Kesalahan
Dalam penggunaan aplikasi tentunya user dapat melakukan kesalahan penggunaan
aplikasi ini baik dalam penginputan dan pengeksekusi perintah sehingga aplikasi
melakukan perintah yang tidak seharusnya user lakukan, oleh Karena itu sebuah aplikasi
dibuat sebuah tool khusus untuk menangai hal tersebut seperti konfirmasi ulang atas
perintah eksekusi yang dilakukan user nya.

Gambar 25. Tampilan aplikasi ketika menginputkan data

Gambar 26. Tampilan aplikasi ketika penginputan data salah

13
 Gambar 27. Contoh Penanganan kesalahan dalam sebuah aplikasi

Gambar 28. Tampilan Aplikasi ketika akan menghapus sebuah data yang telah
diinputkan

14
Gambar 29. Tampilan aplikasi ketika meminta user diminta password untuk
melakukan penghapusan data demi valid nya sebuah data

Gambar 29. Tampilan aplikasi ketika meminta user diminta password untuk
melakukan penghapusan data demi valid nya sebuah data

15
Gambar 29. Tampilan aplikasi ketika user salah memasukan sebuah password
untuk penghapusan data sehingga data tidak dapat dihapus Karena tidak valid

Gambar 30. Tampilan aplikasi ketika user salah memasukan sebuah password
untuk penghapusan data sehingga data tidak dapat dihapus Karena tidak valid

Gambar 31. Tampilan ketika user memasukan password yang valid untuk
penghapusan data

16
Gambar 32. Tampilan aplikasi ketika data yang dihapus vaild dengan password yang
diinputkan

Gambar 33. Tampilan aplikasi ketika data yang dihapus vaild dengan password yang
diinputkan

17
Selain itu dalam aplikasi ini terdapat beberapa tools yang mempermudah user nya dalam
mengatasi aplikasi nya apabila terdapat sebuah kesalahan pada datanya.

Gambar 34. Tampilan pengaturan koneksi aplikasi dengan database nya

Gambar 35. Tampilan pengaturan koneksi aplikasi dengan databasenya

18
Gambar 36. Tampilan aplikasi ketika berhasil terkoneksi dengan databasenya.

Gambar 37. Tampilan aplikasi ketika berhasil terkoneksi dengan databasenya.

19
Gambar 38. Tampilan aplikasi pada saat membuat hak akses untuk user nya

Gambar 39. Tampilan aplikasi pada saat membuat hak akses untuk user nya

20
Gambar 40. Tampilan aplikasi ketika menginputkan data penggunanya

Gambar 41. Tampilan aplikasi ketika data penggunanya telah tersimpan

21
Gambar 42. Tampilan message box ketika data penggunanya telah tersimpan

Gambar 43. Tampilan aplikasi ketika data profil compony diinputkan

22
 Gambar 44. Tampilan aplikasi ketika data profil company diinputkan

Gambar 44. Tampilan aplikasi ketika mengakases database dari aplikasi nya

23
 BAB III Penutup

A. Kesimpuan
Dari hasil laporan yang penulis buat aplikasi yang menjadi acuan untuk membuat laporan
ini sudah sangat memenuhi prinsip dari tampilan interface serta memenuhi standar dari
aplikasi yang bersifta user-friendly, sehingga aplikasi ini layak untuk digunakan oleh user
dengan usia 18-40 tahun. Dan sangat cocok dalam membantu pekerjaan usernya
sehingga sangat efisiensi waktu dan profuktifitas pun meningkat.

B. Saran
Penulis berharap laporan ini bermanfaat bagi pembaca sehingga pembaca dapat
mengetahui bagaimana cara memilih dan menili sendiri sebuah aplikasi itu layak untuk
dipakai seorang user atau tidak serta memberika wawasan dalam peracangan interface
pada sebuah aplikasi.

24