Nama : Oscar Cornelius Turnip

Kelas : XII MM II

Perkembangan UI
User Interface (UI) merupakan suatu sistem yang merupakan bagian terpenting dari setiap program,
karena menentukan seberapa mudah program tersebut menberikan respon atau timbal balik dari yang
diperintahkan pengguna.. Sedangkan tujuan dari UI membuat interaksi yang baik dan menyenangkan.
Berdasarkan Susanto (2011), desain UI yang baik memiliki karakteristik standarisasi terhadap sifat
interface yang berbeda, integrasi antara aplikasi dan software, konsistensi terhadap suatu aplikasi dan
portabilitas yang merupakan dimungkinkanya data dikonversi pada berbagai hardware dan software. User
Interface sendiri selalu dikaitkan dengan tampilan layar, sebab desain yang baik menjadi indikator
terpenting untuk membuat pengguna merasa tertarik menggunakan website tersebut. Selain itu juga faktor
estetika perangkat, waktu respon dan konten menjadi bagian terpenting untuk terciptanya UI yang baik.
Contoh kasus mengenai user interface pada gambar 1 yaitu tampilan website cis Institut Teknologi Del
(www.cis.del.ac.id).Tampilan desain website Institut Teknologi Del sangat baik dari segi User Interface.
karena tampilan website yang simple, informasi yang ditampilkan tertata bagus, namun kurang bagus
dalam penempatan icon untuk informasi nya

Fungsi dan tujuan User Interface (UI)

User Interface merupakan pillar bagi sebagian besar perkembangan teknologi yang ada. Tanpanya,
teknologi tersebut akan sulit digunakan atau tidak nyaman dipakai bagi mereka yang masih awam
teknologi. User Interface berperan sebagai penghubung yang memudahkan penggunanya agar dapat
menjalankan suatu program, aplikasi, maupun mengunjungi website.Peran terbesar User Interface
didominasi oleh penerapan Graphic User Interface (GUI) di berbagai program maupun aplikasi
smartphone. Seperti yang kamu tahu, program maupun aplikasi yang ada di playstore semuanya dibangun
dengan User Interface yang didasari Konsep desain User Experience (UX) yang baik.Pengguna mereka
kini bisa dengan mudah menjalankan program atau aplikasi tanpa harus repot-repot belajar ilmu komputer
atau aplikasi. Karena mayoritas program yang dihadirkan memiliki aksesibilitas, bahasa, dan fitur yang
mudah dipelajari serta digunakan.Pada aplikasi smartphone, pengguna banyak berinteraksi dengan
program-program di dalamnya dengan memasukkan perintah dalam bentuk teks maupun grafis. User
interface pada smartphone cenderung dituntut lebih sederhana dan mudah mengerti dibanding user
interface pada perangkat yang lebih besar seperti komputer.Tujuan akhir dari sebuah UI adalah untuk
menjamin kemudahan penggunaan, aksesibilitas fitur, dan User Experience yang memuaskan. Dengan
kata lain, UI yang efektif memudahkan pengguna menikmati semua fitur dan fungsi yang ditawarkan oleh
sebuah produk digital.
Tujuan.
k. Flexibility, tool/alat yang bisa digunakan user. jangan hanya terpaku pada
keyboard atau mouse saja.
l. Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang
sering kita lihat ketika ada tampilan please wait... 68%...
m. Invisible Technology. user tidak penting mengetahui algoritma apa yang
digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui
algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst)
n. Robustness, handal. Dapat mengakomodir kesalahan user. jangan malah error,
apalagi sampai crash.
o. Protection, melindungi user dari kesalahan yang umum dilakukan. misalnya
dengan memberikan fitur back atau undo.
p. Ease of Learning. aplikasi. mudah dipelajari.
q. Ease of use, aplikasi harus mudah digunakan

Prinsip desain UI
Deborah J. Mayhew, dengan General Principles Of UI Design, atau Prinsip
Umum Desain User Interface. Ada 17 prinsip yang harus dipahami para perancang
sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat.
a. User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari
user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya,
jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
b. Product Compatibility, istilah ini mengartikan bahwa produk aplikasi yang
dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk
user yang awam maupun yang ahli.
c. Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai
dengan tampilannya. misal untuk pilihan report, orang akan langsung
mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah
tipe data (dari sisi pemrogram).
d. Work Flow Compatibility, aplikasi bisa dalam satu tampilan untuk berbagai
pekerjaan.. jika tampilan yang ada hanya untuk satu pekerjaan saja. misal
untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk daftar
alamat.
e. Consistency. Konsisten. Contohnya, jika anda menggunakan istilah save
yang berarti simpan, maka gunakan terus istilah tersebut.
f. Familiarity, Icon disket akan lebih familiar jika digunakan untuk perintah
menyimpan.
g. Simplicity, aplikasi harus menyediakan pilihan default untuk suatu pekerjaan.
h. Direct Manipulation, manipulasi secara langsung. misalnya untuk
mempertebal huruf, cukup dengan ctrl+B.
i. Control, berikan kontrol penuh pada user, tipikal user biasanya tidak mau
terlalu banyak aturan.
j. WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti
kehidupan nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai

Interaksi End User

Macam Macam interaksi yang umunya terjadi adalah :

Direct manipulation – pengoperasian secara langsung : interaksi langsung dengan objek pada layer
sehingga aktivitas akan dikerjakan oleh komputer ketika pengguna memberikan instruksi langsung yang
ada pada layar komputer. Misalnya delete file dengan memasukkannya ke trash, drag and drop, dll. Direct
manipulation pada zaman dapat dilakukan juga melalui virtual environment.
Kelebihan :
-> Waktu pembelajaran user sangat singkat karena mudah dimengerti dan diingat, feedback langsung
diberikan pada tiap aksi sehingga kesalahan pada design UI ataupun kesalahan user dapat terdeteksi dan
diperbaiki dengan cepat.
-> Penggunaan lebih menyenangkan sehingga meningkatkan kepuasan user dan memberikan User
Experience yang baik.
Kekurangan :
-> Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk
penggambaran secara visual untuk satu operasi atau objek.
-> Desain dapat mengabaikan informasi penting karena design direct manipulation yang dibuat
mengutamakan kemudahan user sehingga memiliki resiko melewatkan informasi penting.
Prinsip Direct Manipulation :
Representasi terus menerus dari objek dan tindakan kepentingan dengan metafora visual yang bermakna.
2. Tindakan fisik atau menekan tombol berlabel, bukan sintaks yang kompleks.
3. Cepat, incremental, tindakan reversibel yang efeknya pada obyek yang menarik terlihat segera.

Illustrasi Direct Manipulation

- Menu Selection
Tipe menu selection memberikan beberapa pilihan kepada user berbentuk daftar menu yang isinya adalah
perintah kepada komputer sesuai dengan menu yang terdaftar, nama perintah yang dijalankan harus sesuai
dengan nama pilihan menu. Misal : klik kanan dan memilih pilihan menu yang dikehendaki seperti copy,
paste, cut, dll.
Kelebihan :
-> User tidak perlu ingat nama perintah karena sudah tertera di dalam menu.
-> Minimalisir pengetikan sehingga meminimalisir tingkat kesalahan pula.
Kekurangan :
-> Tidak ada logika AND atau OR.
-> Perlu ada struktur menu jika banyak pilihan.
-> Menu dianggap lambat oleh expert user dibanding command language.

- Form fill-in – (pengisian form)

Cara sebuah sistem untuk meminta data atau informasi dari user dengan member petunjuk kepada user
untuk mengisi area area dan melengkapi data pada kategori dan bagian bagian yang telah disediakan oleh
form.
Kelebihan :
-> Masukan data/input yang sederhana.
-> Mudah dipelajari oleh user untuk mengurangi kesalah pahaman.
Kekurangan :
-> Memerlukan banyak tempat di layer karena beragamnya data yang harus diisi dalam form.
-> Harus menyesuaikan dengan form manual dan kebiasaan user untuk mendapatkan data yang objektif.

Beberapa Panduan dalam membuat Form Fill in :

1. Judul Jelas dan memiliki Arti.
2. Instruksi Dapat dan mudah dimengerti.
3. Pengelompokan dan pengurutan secara digital.
4. Layout mudah dilihat sehingga tidak ada bagian yang tertinggal.
5. Konsistensi
6. Tempat menginput data jelas.
7. Memberikan pencegahan error(validasi).
8. Pesan error mudah dimengerti.

- Command language
Menuliskan perintah yang sudah ditentukan pada program. Command language merupakan interaksi
manusia dan komputer yang tradisional dan orisinil, dapat dikatakan orisinil adalah karena semua
interaksi melalui menu, form dan direct semuanya akan berujung dengan penggunaan Bahasa command
language (mengklik suatu menu berarti menjalankan command language untuk perintah menu tersebut ).
Pada antarmuka jenis ini, hanya prompt dan instruksi yang disediakan oleh sistem. User harus mengingat
nama serta sintaks untuk perintah (command) karena yang tampil hanya prompt yang ‘ready’. CL
digunakan pada beberapa sistem komputer awal dan saat itu sangat popular.
Kelebihan:
-> Powerful, Command yang simpel dapat lebih handal, dimana pada menu dan fill in form mungkin
membutuhkan 2030 menu dan fill-in form mungkin membutuhkan 20-30 screen.
-> Flexible, User Controlled, User dapat melakukan apa saja sesuai dengan keinginannya keinginannya.
-> Fast, Efficient, Meskipun pada command language membutuhkan pengetikan lebih sering dibanding
beberapa dialog lain pengetikan lebih sering dibanding beberapa dialog lain, namun ternyata bisa lebih
cepat dan efisien. Karena Command yang komplek lebih cepat daripada melalui banyak screen scanning
untuk pilihan menu atau navigasi, dan pengisian field.
Kekurangan:
-> Difficult to Learn, command language lebih kepada proses ‘recall memory’ sehingga sukar untuk di
pelajari. Recall Memory maksudnya walau sudah mengerti command di dalam Operating System, namun
harus lebih terbiasa terlebih dahulu dengan Bahasa command tersebut agar penggunaan command
language menjadi lebih efisien disbanding dengan tipe interaksi yang lain (apabila belum terbiasa dan
belum paham penggunaan command language akan menjadi tidak efisien).
-> Assumes Typing Skill. Keterampilan user dalam mengetik pada komputer juga sangat mempengaruhi
efisiensi dialgo/interaksi menggunakan Command Language.
- Natural language
Perintah dengan menggunakan Bahasa manusia yang digunakan manusia untuk berkomunikasi sehari
hari. Program yang dapat menerima perintah menggunakan natural language dapat disebut sebagai
artificial intelligence. Contohnya adalah dengan menggunakan search engine di google, ketika user
menggunakan search engine google, keyword yang di input adalah Bahasa yang digunakan untuk
percakapan sehari hari bukan merupakan Bahasa programing dsb.
Kelebihan :
-> Pengguna memberikan instruksi-instruksi dalam Natural Language/Bahasa percakapan yang lebih
umum sifatnya . Pemberian perintah dengan menggunakan pengenalan tutur atau pengetikan bahasa alami
lewat keyboard dapat mempermudah penggunaan.
Kekurangan :
-> Natural language tersebut memiliki lebih dari satu arti, sulit dalam perancangannya dan tidak efisien.

Prosedur Perancangan Interface

Perancangan antar muka yang dimaksud untuk menggambarkan pilihan masukan dari petugas atau
pengguna berupa menu- menu kemudian di lakukan proses pemanggilan data yang tersedia dalam
database server dan menjadikan keluaran (output). Perancangan tampilan input dan output sebagai
berikut:

1. Halaman Utama

Halaman awal atau utama ini berisikan menu- menu dari pengisian link- link yang berhubungan
kehalaman input, data, pencarian dan tentang aplikasi yang dibuat.

Gambar 3.1 : Menu Utama

2. Halaman Tampil Data Laundry

Gambar 3.2 Menu Isi Berita

3. Halaman Cetak Berita

 Gambar 3.3 Menu Cetak User Berita

4. Halaman Pencarian Berita

Gambar 3.4 Menu Pencarian Data

5. Halaman Data Dokter

Gambar 3.5 Tampil Data Pelanggan

6. Halaman Cetak Dokter

Gambar 3.6 Cetak Data Pelanggan

7. Halaman Data Petugas

Gambar 3.7 Tampil Petugas

8. Halaman Cetak Petugas

 Gambar 3.8 Cetak Petugas

9. Halaman Login User

Gambar 3.9 Menu Login User

10. Halaman Status Berhasil

 Gambar 3.10 Menu Status Login

11. Halaman Daftar Data User

Gambar 3.11 Menu Daftar Data User

12. Halaman Tentang Laundry.

 Gambar 3.13 Menu Info Laundry

13. Halaman About

Gambar 3.14 Menu About

14. Halaman Home

 Gambar 3.15 Menu Home

15. Halaman Log Out

Gambar 3.16 Menu Log Out

3.2 Perancangan Database

Perancangan struktur database data ini untuk membuat struktur table yang digunakan dalam penyimpanan
data pada aplikasi Rumah Sakit yang dibuat. Struktur data yang digunakan pada aplikasi ini menggunakan
Mysql dan berikut adalah rancangan table- table yang digunakan :

1. Tabel Berita
Database : Laundry

Primary Key : id

Deskripsi : Menyimpan Data Berita

Tabel 3.1 Tabel Berita

2. Tabel Dokter

Database : Laundry

Primary Key :Kode_ Pelanggan

Deskripsi : Menyimpan Data Pelanggan

Tabel 3.2 Tabel Pelanggan

3. Tabel Petugas
Database : Laundry

Primary Key : Kode_petugas

Deskripsi : Menyimpan Data Petugas

Tabel 3.3 Tabel Petugas

4. Tabel User

Database : Laundry

Primary Key : id

Deskripsi : Menyimpan Data User

Tabel 3.4 Tabel User

3.3 Pembuatan ( Construction )

3.3.1 Pengkodean ( Coding )

Dalam pembuatan program ( Coding ), menggunakan Php versi 5.2.6 sebagai bahasa pemrograman pada
aplikasi ini, Mysql, sebagai basis datanya, Apache ( Win 32) sebagai web servernya semuanya tergabung
dalam Appserver Open project 2.5.10 for windows, untuk pengolahan gambarnya menggunakan Adobe
photoshop CS3, desain tools peneliti menggunakan Microsoft Office Visio 2007 dan Microsoft office
Word 2007 untuk pembuatan teks laporan, Macromedia Adobe Dreamweaver CS6 sebagai desain
program webnya, emulator yang digunakan sebagai browser menggunakan Google Chrome sebagai web
browsernya.

3.3.2 Test / Pengujian

Pada tahap pengujian menggunakan spesifikasi perangkat keras dan perangkat lunak untuk system
pengguna ( User ) dan system Client menggunakan perangkat yang sama sebagai berikut :

1. Spesifikasi Perangkat Lunak yang digunakan adalah sebagai berikut:

a . Operating Sistem : Windows 8

b. Web Browser : Google Chrome

2. Spesifikasi Perangkat Keras yang digunakan adalah sebagai berikut:

a. Motherboard : AMD
b. Processor : Core 2duo
c. Harddisk : 500 GB
d. RAM : 2 GB
e. Keyboard : Standard
f. Mouse : Standard

Proses pembuatan aplikasi data ini, kita akan melakukan pengujian system dengan aplikasi browser
Google Chrome untuk masuk ke server Localhost/ phpmyadmin.