PERHATIAN

PRINT OUT INI HANYA SEKEDAR CONTOH

JUMLAH HALAMAN YANG DI TAMPILKAN BUKANLAH

HALAMAN SEBENARNYA

JUMLAH HALAMAN YANG DI TAMPILKAN LEBIH SEDIKIT

DARI HALAMAN YANG SEBENARNYA

(SEKEDAR CONTOH, ADA BEBERAPA HALAMAN YANG

TIDAK DI TAMPILKAN)

HALAMAN YANG DI TAMPILKAN , HANYA POINT-POINT

UTAMA SAJA

HARAP LEBIH KREATIF

CONTOH

Human Camp ter Interaction

Perancangan User Interface

Nama:

KCONTOH

M

elas : TMJ 2 REG

5

BAB 1

PEN DAH ULUAN

1.1 Latar Belakang

Dalam Merancang, sebuah tampilan perangkat lunak, hal pertama yang perlu

erhatikan adalah konsep design user interfacenya. Kita juga perlu memperhatikan

ebutuhan user dan standart penggunaanya.

Pengguna sering menilai sistem bukan dari fungsinya melainkan dari user interfacenya.

- a design user interfacenya buruk , maka itu sering jadi alasan untuk tidak menggunakan

are. Selain itu, interfacenya yang buruk dapat menyebabkan pengguna membuat

esalahan yang fatal.

Tujuan Makalah

apun tujuan pembuatan makalah ini adalah agar pembaca mengetahui konsep

esign interface dan mampu merancang interface yang eferktif untuk sebuah perangkat

tasan Masalah

makalah ini masalah yang dibahas adalah mengenai konsep design software

formasi Hotel Sagita dimana software ini dirancang sendiri oleh penulis.

CONTOH

BAB II

PEM BAHASAI\J

tPflr'dnr::angan User Interface

e and User model ama yang kita buat dalam perancangan user interface adalah Use case and

rK-::,r"~'"", se ingga kita dapat dengan mudah menentukan aktor dan apa saja yang mereka

::,~ \,..(r dJIl User'1odel Siste TnfonnZlsi Hotel

•

iHIerarc:hi I Task Analysis (HTA) nya membuat HTA,HTA adalah metode yang sering digunakan dalam

ekomposisi task, Keluaran HTA adalah hirarki task dan sub task serta rencana - 6,g:a barkan urutan dan kondisi yang memungkinkan subtask berjalan.sehingga

a: kita buat dapat lebih terorganisir.

CONTOH

HTA Menginap di Hotel

3. Pemilihan lipe Kamar 5. Menginap

3.1 Superior(2 Orang) Lame Menglfl3p x Harga TipI' Kamer

3.2 Superior (3 Orang)

3.3 Deluxe

y 3.4 Family

c. Lembar Kerja Tampilan (LKT) Berikutnya kita membuat piranti bantu sederhana dengan membuat dokumentasi

bentuk tampilan yang akan ditampilkan Piranti Bantu berupa lembaran kertas, dinamakan lembar I<erja tampilan/LKT {Screen design worksheet). Pada LKT, disajikan empat bagian: 1. Nomor lembar kerja 2. Bagian tampilan 3. Bagian navigasi 4. Bagian keterangan

LKT Sistem Informasi Hotel

No. Sheet: 1

Log In User

Navigasi:

IKJ Kllk Log In : Aktifkan Pencarian berkas berdasarkan User dan password jika user dan password sesual tampilkan No.2 Jika t1dak tampilkan user dan password salah

Use,

Password

,I ,I

I I

I Log In I

Keterangan : - Judul menggunakan Myriad Pro, 18 point • Teks menggunakan Myriad Pro. 12 point warna Hitam - 80rang Jslan menggunakan Myriad Pta, 12 poInt wama Hiram • Teks' Push Button' men99unakan Myriad P,o, 13 - Push Button 'pilihan Kamar' berisikan link ke databesa User Administrator

,

CONTOH

Navigasi;No. Sheet: 2 Kllk Save: Aktifkan penyimpananPenqisian Biodata [x be~a5 dan kosongkan borang

No. KTP Klik Search : Aktifkan Pencariar berkas berdasarkan No KTP ataL

:1 1 Nama 1 1 Nama E-Mail :1 Klik Update: Aktifkan Perubahan

Pada borang isian dana kosong-I

Tanggallahir :1 / .. / I kan borang Jenis Kelamin : 0 Laki -Iakl o Perempuan Klik Delete: Aktifkan Penghapu­

san data berdasarkan No. KTPAgama :1 atau Nama 1-'Daerah Klik Next: Ganti Tampilan

Alamat : I I-I

Dengan No.2

I I No. Telepon : I I

SAVE SEARCH UPDATE DELETE NEXTI II II II I I I Keterangan :

I -Judul menggunakan Myriad Pro. 18 pointI -Teks menggunakan Myriad Pro, 12 point warna Hltam

- Borang isian menggunakan Myriad Pro, 12 point warna Hitam - leks' Push Bunon' menggunakan Myriad Pro, 13

No. Sheet: 3

Pemilihan Tipe Kamar [x Tanggal Check in :1 I / 1No. Kamar : 1 1 Tanggal Check Out :1 / / I

TipeKamar I 1 IPillhan Kamar 1

Biaya Per Had : IRp I Lama Hari :0 Total bayar !Rp I

SAVE SEARCH UPDATE DELETEI II I I I I I

BACK FinishI II I Keterangan: - Judul menggunakan Myriad Pro, 18 point - Teks menggunakan Myriad Pro, 12 point warna Hitam - Borang isian menggunakan Myriad Pro, 12 point warna Hitam - Teks I Push Bunon' menggunakan Myriad Pro, 13 - Push Bunon 'pilihan Kamar' berisikan link ke databesa tipe kamar berserta fasilltasdan harga -Total Sayar dan Tanggal Check out akan secara otomatis terisi ketika lama hari di isi

Navigasi: Kllksave Aktifkan penyimpanan berkas Klik Search ; Aktifkan Pencarian berkas berdasarkan No. Kamar

Klik Update: Aktifkan Perubahan Pada borang isian dana kosong~

kan borang Klik Delete: Aktifkan Penghapu­Sil:n data berdasarkan No. Kamar

Kllk Back: Ganti Tampilan Dengan NO.1 yang berisikan data sebelumnya tanpa menyim­pan No.2

Klik Finish: aktifkan penyimpan­an berkas dan ganti tampilan dengan No. , dan kosongkan borang

d. Jaring Semantik Tampilan Berikutnya untuk meminimalisr kesalahan dam pemrograman yang biasanya terjadi

arena cacahan tampilan yang banyak dan masing-masing mempunyai navigasi yang berbeda, Sehingga Dallam membantu pemrogram untuk memeriksa navigasi yang ada, dapat

°gambarkan lewat suatu bagan yang disebut jaring semantik tampilan (Screen Semantic et) .

. aring semantik tampilan mempunyai 2 komponen omor tampilan (Iembar kerja)

Trasnsisi

CONTOH

T2

Exit Back

Log In Next

Tl Finish T3

2.2 Pengenalan User Interface

Saatini userinterface yang sering digunakan dalam software adalah GUI (Graphics User

Interface).GUI memberikan keuntungan Seperti:

1. Lebih m udah dipelajari oleh pengguna yang pengalaman dalam menggunakan

kompute r cukup minim.

2. Berpindah dari satu tampilan ke tampilan yang lain tanpa kehilangan informasi di

mungkinkan.

3. Akses pe nuh pada tampilan dengan segera untuk beberapa macam tagus/keperluan.

Beberapa Karak terisitik dar; GUI dan penjelasan dapat dilihat pada Tabell.

Tabell: Karakteristik dari GUI

kteristik P njelasan

Window Beberapa window bisa ditampilkan informasi-informasi berbeda sekaligus pada layar

Icon Mewakili informasi y~ng berbeda seperti icon untuk file, icon folder atau icon untuk program tertentu

Menu Menawarkan perintah - perintah yang disusun dalam menu tanpa harus mengetik

Pointing Alat Penunjuk seperti mouse untuk memilih pilihan pada layar

Graphics Gambar yang bisa dicampur dengan teks pada display yang sama untuk menyajikan informasi

CONTOH

2.3 Software Sistem Informasi Hotel Sagita

. bawah ini merupakan tampilan software sistem informasi hotel.

---.J Log In HOlel Saglla

User

P.lssword

login

oJ. Gotot S"bw.o No. 98

Jo"'1a Pu'''I.10640

Teleporo 02Hl76512I.F". 02187871111 EII\ail . hoteI5agl1l'J~gnlo~.com

LJ Form Diodato pengunjung Hotel Sogilo

Nama

E-Mail

Tanggallallir

Jenis Kelam;" lak;·laki Perempuan

Islam

Daerah Jakar1a

Alamat

No. Tell}

Soafch Update Delete Next

CONTOH

_ Form Pemilihan Tipe Kamar

lsagitEl No. Kamar J Tanggal Check in l-

Tipe Kamar Pilihan kama, I I Biaya Per Hari [ - -:J

Lama Hari [

[-­Total Bayar

ea,ch Update Delete

Back Finish

Tanggal Check Ollt

2.3 Database Sistem

Setiap data yang diinput akan disimpan di dalam database. Fungsi database adalah

sebagai sarana penyimpanan file/dokumen yang sifatnya independent dan dapat diubah.

Database sever sangat rentan terhadap serangan virus oleh sebab itu tidak sembarangan

orang boleh membukanya. Data yang diinginkan user hanya dapat ditampilkan tanpa boleh

diedit. Perlu diberlakukan sistem login untuk setiap user yang ingin menggunakan program

sehingga hak akses dapat dibatasi dan dikontrol.

Pacta Program Sistem Informasi Hotel Sagita berikut, alur databasenya telah

dirancang sedemikian rupa. Berikut merupakan rancangan database system yang telah

diterapkan pada Program Sistem Informasi Hotel Sagita.

CONTOH

,,' 11 11.. 1

: 11.1

1--01':,11 of .111~·,,;t1 lalm .kl ,-.. K ·lilll1in \ :~: 1111:1

I )a-:r: Ii 1

\ l:1i 11:11

\.\1 I 'J

...

CONTOH

BAS III

PENUTUP

3.1 Kesimpulan

Dalam merancang sebuah software, hal yang perlu diperhatikan adalah kebutuhan user

a as software tersebut dan membuat user interface yang friendly dan familiar. Bagaimana

merancang sebuah user interface yang baik tergantung pada konsep designnya.

User interface yang baik harus menyatukan interaksi pengguna (user interaction) dan

penyajian informasi (information presentation). Sistem yang interaktif pasti menyediakan

cara untuk menyajikan informasi untuk pengguna. Penyajian informasi bisa berupa

penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau

disajikan dengan grafik. Informasi bisa bersifat statis dan dinamis ketika disajikan , masing­

masing baik dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula.

Selain itu, perlu dianalisa rancangan database system yang dibutuhkan. Alur bisnis dan

hierarki lingkungan pengguna. Hal - hal di atas merupakan kunci kebersihan design user

interface sebuah program.

3.2 Saran

Dalam memulai sebuah perancangan interface program, konsep yang harus ditawarkan

ada'iah yang familiar dan memiliki nitai standar agar memudahkan user menggunakan

program tersebut. Datam perancangan sering kali kita menemukan kendala dalam

memahami proses kerja dalam lingkungan user, oleh sebab itu sebelum mendesign tampilan

kita perlu menganalisanya terlebih dahulu untuk menghidari pekerjaan sia-sia dan untuk

kerja yang tidak efektif dan efisien.

CONTOH