BUKU INFORMASI

MENGIMPLEMENTASIKAN USER INTERFACE

J.620100.005.01
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN
LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN
TENAGA KEPENDIDIKAN KELAUTAN PERIKANAN
MAKASAR
MALANG
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

DAFTAR ISI

DAFTAR ISI ............................................................................................... 2

BAB I PENDAHULUAN ................................................................................. 4
A. TUJUAN UMUM (Unit Kompetensi) ............................................... 4
B. TUJUAN KHUSUS (Elemen Kompetensi) ........................................ 4
BAB II Mengidentifikasi Rancangan User Interface ...................................... 5
A. Pengetahuan yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................ 5
1. Rancangan user interface..................................................... 6
2. Komponen user interface .................................................... 11
3. Urutan dari akses komponen user interface.......................... 12
4. Simulasi (mock-up).............................................................. 15
B. Keterampilan yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................ 20
C. Sikap Kerja yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................. 20
BAB III Melakukan Implementasi Rancangan User Interface ......................... 21
A. Pengetahuan yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface............................................................ 21
1. Menu program sesuai dengan rancangan ............................. 21
2. Penempatan user interface dialog diatur secara sekuensial ... 23
3. Setting aktif-pasif komponen user interface........................... 25
4. Bentuk style dari komponen user interface ditentukan ........... 25
5. Penerapan simulasi dijadikan suatu proses ............................ 26
B. Keterampilan yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface .......................................................... 27
C. Sikap Kerja yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface............................................................ 27
DAFTAR ALAT DAN BAHAN ......................................................................... 28
A. DAFTAR PERALATAN/MESIN ....................................................... 28
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

B. DAFTAR BAHAN ......................................................................... 28

DAFTAR PUSTAKA ...................................................................................... 29
A. Buku Referensi ........................................................................... 29

DAFTAR PENYUSUN ................................................................................... 30

 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

BAB I PENDAHULUAN

A. TUJUAN UMUM
Setelah mempelajari modul ini peserta diharapkan mampu menentukan kompetensi
pengetahuan dan sikap kerja yang diperlukan dalam membuat rancangan antar muka
program.

B. TUJUAN KHUSUS
Adapun tujuan mempelajari unit kompetensi melalui buku informasi pengembangan
keprofesian berkelanjutan (PKB) berbasis kompetensi dengan judul
mengimplementasikan user interface ini guna memfasilitasi peserta sehingga pada
akhir diklat diharapkan memiliki kemampuan sebagai berikut:
1. Mengidentifikasi rancangan user interface
2. Melakukan implementasi rancangan user interface
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

BAB II MENGIDENTIFIKASI RANCANGAN USER INTERFACE

A. Pengetahuan yang diperlukan dalam Mengidentifikasi Rancangan User

Interface
Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik.
Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah
program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di
hadapannya. Pada desain antarmuka, audien adalah system user. Pengklasifikasian
system user secara luas baik sebagai pakar atau orang baru – dan baik secara terikat
dan tidak terikat. Expert user (dedicated user) adalah pengguna komputer yang
berpengalaman yang banyak menghabiskan waktunya untuk menggunakan program
aplikasi khusus.
Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam dua kategori besar,
yakni program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula
(special purpose software) dan program aplikasi yang akan digunakan oleh banyak
pengguna (general purpose software), yang juga sering dikenal dengan sebutan public
software. Karena perbedaan pada calon pengguna, maka perancang program
antarmuka harus benar-benar memperhatikan hal ini.
Pada kelompok pertama, yakni pada program aplikasi untuk keperluan khusus,
misalnya program aplikasi untuk inventori gudang, pengeloaan data akademis
mahasiswa, pelayanan reservasi hotel, dan program-program aplikasi serupa,
kelompok calon pengguna yang akan memanfaatkan program aplikasi tersebut dapat
dengan mudah diperkirakan, baik dalam hal keahlian pengguna, maupun ragam
antarmuka yang akan digunakan. Untuk kelompok ini ada satu pendekatan yang dapat
dilakukan, yakni pendekatan yang disebut dengan user-centered design
approach. Cara pendekatan ini berbeda dengan user design approach.
Pendekatan secara user centered design adalah perancangan antarmuka yang
melibatkan pengguna. Pelibatan pengguna disini tidak diartikan bahwa pengguna
harus ikut memikirkan bagaimana implementasinya nanti, tetapi pengguna diajak
untuk aktif berpendapat ketika perancang antarmuka sedang menggambar “wajah”
antarmuka. Dengan kata lain, perancang dan pengguna duduk bersama-sama untuk
merancang wajah antarmuka yang diinginkan pengguna. Pengguna menyampaikan
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

keinginannya, sementara perancang menggambar kenginan pengguna tersebut

sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diingnkan oleh
pengguna, serta kerumitan implementasinya. Dengan cara seperti ini, pengguna
seolah-olah sudah mempunyai gambaran nyata tentang antarmuka yang nanti akan
digunakan.

1. Rancangan user interface diidentifikasi sesuai kebutuhan

Membangun dan merancang User Interface melibatkan metode yang sederhana
dan cepat untuk memenuhi kebutuhan klien. Kemudian, mereka memerlukan
metode yang tepat untuk mengerjakan detail yang dibutuhkan pelanggan, untuk
bekerja sama dengan rekan khusus, dan untuk memberitahukannya kepada
perancang.
Seperti membangun bangunan, perancang user-interface yang sukses mengetahui
bahwa penting untuk menyelesaikan dan melengkapi rancangan sebelum mereka
mulai membangunnya, walaupun mereka mengetahui bahwa akan ada banyak
perubahan yang perlu dilakukan selama proses konstruksi. Untuk sebuah proyek
yang besar, banyak perancang mungkin lebih dibutuhkan. Ukuran dan kepentingan
dari setiap proyek akan menentukan tingkat usaha dan peserta proyek.
a. User Interaction (Interaksi pengguna)
Perancang sistem menghadapi dua masalah penting yaitu:
 Bagaimana informasi dari user bisa disediakan untuk sistem komputer
misalnya pada saat input data ?
 Bagaimana informasi dari sistem komputer ditampilkan untuk user – hasil
dari pemrosesan data ?
User interface yang baik harus menyatukan interaksi pengguna (user
interaction) dan penyajian informasi (information presentation).
Ada 5 tipe utama interaksi untuk user interaction:
1) Direct manipulation
Pengoperasian secara langsung: interaksi langsung dengan objek pada
layar. Misalnya delete file dengan memasukkannya ke trash.
Contoh: Video games.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

 Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung

diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki
dengan cepat
 Kekurangan : Interface tipe ini rumit dan memerlukan banyak fasilitas
pada sistem komputer, cocok untuk penggambaran secara visual untuk
satu operasi atau objek
2) Menu selection
Pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan.
Misalnya saat click kanan dan memilih aksi yang dikehendaki.
 Kelebihan: User tidak perlu ingat nama perintah. Pengetikan minimal.
Kesalahan rendah.
 Kekurangan:Tidak ada logika AND atau OR. Perlu ada struktur menu
jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding
command language.
3) Form fill-in
Pengisian form : Mengisi area-area pada form. Contoh: Stock control.
 Kelebihan: Masukan data yang sederhana. Mudah dipelajari
 Kekurangan: Memerlukan banyak tempat di layar. Harus
menyesuaikan dengan form manual dan kebiasaan user.
4) Command language
Perintah tertulis: Menuliskan perintah yang sudah ditentukan pada program.
Contoh: operating system.
 Kelebihan: Perintah diketikan langsung pada system. Misal UNIX, DOS
command. Bisa diterapkan pada terminal yang murah.Kombinasi
perintah bisa dilakukan. Misal copy file dan rename nama file.
 Kekurangan: Perintah harus dipelajari dan diingat cara
penggunaannya tidak cocok untuk user biasa.Kesalahan pakai
perintah sering terjadi. Perlu ada sistem pemulihan
kesalahan.Kemampuan mengetik perlu.
5) Natural language
Perintah dengan bahasa alami: Gunakan bahasa alami untuk mendapatkan
hasil. Contoh: search engine di Internet.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

 Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata

yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk
dicari oleh search engine Ada kebebasan menggunakan kata-kata.
 Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan
maka akan memerlukan banyak pengetikan

b. Information Presentation (Penyajian Informasi )

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.
Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum
menentukan bentuk penyajian informasi:
 Apakah pengguna perlu informasi dengan ketepatan tinggi atau data yang
saling berhubungan?
 Seberapa cepat nilai informasi berubah? Harus ada indikasi perubahan
seketika?
 Apakah pengguna harus memberi respon pada perubahan?
 Apakah pengguna perlu melakukan perubahan pada informasi yang
disajikan?
 Apakah informasi berupa teks atau numerik? Nilai relatif perlu atau tidak?
Informasi bisa bersifat statis atau dinamis ketika disajikan, masing-masing baik
dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula:
1) Static information:
Ditentukan saat awal sesi. Tidak berubah selama sesi berjalan. Bisa berupa
informasi numeris atau teks Chart di MS-Excel. Disajikan dengan jenis huruf
khusus yang mudah dibaca atau diberi highlight dengan warna tertentu
seperti pada Gambar 4 atau menggunakan icon yang mewakili
2) Dynamic information:
 Perubahan terjadi selama sesi berlangsung dan perubahan harus
dikomunikasikan/ditunjukkan ke user.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

 Bisa berupa informasi numeris atau teks. Contoh : Defragmentation,

scanning virus, download
Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat
sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan
antar gambar, data bisa berubah dengan cepat. Seperti pada Gambar 2,
informasi yang sama disajikan dengan dua cara yang berbeda. Jika yang
dibutuhkan adalah hubungan antar data pada bulan-bulan tersebut, maka
informasi dengan grafik memberikan informasi tentang hubungan tersebut
lebih cepat dari pada informasi yang disajikan dengan teks dan numerik.
Informasi dengan numerik dapat juga disajikan dengan cara digital atau
analog dengan karakteristik sebagai berikut:
 Digital presentation
 Singkat – hanya perlu sedikit tempat pada layar
 Ketepatan nilai ditunjukkan
 Analogue presentation
 Nilai terlihat sambil lalu
 Untuk menunjukkan nilai relatif
 Mudah melihat data nilai yang berbeda

Gambar 1. Alternatif presentasi

Nilai-nilai relatif misalnya seperti pada Gambar 3. Selain nilai yang disajikan
relatif, informasinya bersifat dinamis, karena berubah saat sesi berjalan.
Untuk nilai digital kita biasanya gunakan untuk menunjukkan jam pada jam
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak terjadi

secara cepat.

Gambar 2. Informasi yang dinamis dan nilai relatif

Gambar 3. Textual Highlighting

Penggunaan Warna pada desain Interface
 Warna menambah dimensi ekstra pada suatu interface dan membantu user
memahami struktur yang kompleks
 Bisa dipakai untuk mewarnai-terang (higlight) hal-hal khusus
Kesalahan umum dalam penggunaan warna pada desain UI:
 Menggunakan warna untuk mengkomunikasikan arti merah bisa jadi
peringatan atau ada kesalahan
 Terlalu banyak gunakan macam warna
Dalam menggunakan warna pada desain interface ada beberapa petunjuk yang
dapat diikuti seperti berikut ini:
 Hindari penggunaan terlalu banyak warna
 Gunakan kode warna untuk mendukung operasi
 Pengguna bisa kendalikan warna untuk kode
 Desain monochrome kemudian tambahkan warna
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

 Gunakan warna kode secara konsisten

 Hindari pasangan warna yang tidak cocok/norak
 Gunakan warna untuk menunjukkan perubahan status

2. Prinsip perancangan User Interface

User interface desain adalah desain komputer, peralatan, mesin, perangkat
komunikasi mobile, aplikasi perangkat lunak, dan situs web yang menitikberatkan
pada pengalaman pengguna dan interaksi. Tujuan dari user interface design
adalah membuat interaksi pengguna lebih sederhana dan efisien. Prinsip prinsip
dalam perancangan user interface antara lain sebagai berikut:
1. User Compatibility
Perancang sistem harus benar-benar paham tentang pengetahuan, cara
berpikir dan cara menerima informasi dari user sehingga sistem yang akan
digunakan oleh user dapat membuat user lebih produktif. Harus
diperhatikan juga adalah bahwa karakteristik perancang (designer) atau
developer tidak sama dengan karakteristik user.
2. Product Compatibility
Selalu memperhatikan dan mempertahankan kompatibilitas antar produk,
misalnya mampu mengorbankan User Interface yang memungkinkan
sistem lebih kompatibel.
3. Task Compatibility
Rancangan interface sistem harus sesuai dengan tugas dari user. User
tidak boleh mengalami kesulitan untuk menggunakannya. Hal tersebut
dapat menyebabkan aplikasi yang dibuat tidak akan terpakai dan akhirnya
tidak dapat membantu pekerjaan / tugas user.
4. Work Flow Compatibility
Selalu mengorganisasikan setiap fungsi sesuai dengan kategori fungsinya
sehingga dapat memfasilitasi segala perubahan tugas user.
5. Consistency
Sistem harus konsisten terhadap fungsionalitas atau kegunaan dari sistem
tersebut. Contoh sederhananya adalah ketika user menekan tombol “save”
maka proses yang terjadi adalah penyimpanan bukan hapus data.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

6. Familiarity
Menggunakan konsep, terminologi dan pengaturannya yang mudah
dipahami oleh user. Seperti ikon atau gambar “Recycle Bin” pada Sistem
Operasi Windows, ini membuktikan bahwa fokus user terhadap gambar
tersebut adalah file-file yang sudah dihapus sebelumnya.
7. Simplicity
Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu
sendiri, maka dari itu gunakan system default pada aplikasi yang dirancang.
Maksudnya adalah sediakan dan utamakanlah fungsi – fungsi yang benar-
benar sesuai dengan tugas dari user. Usahakan agar tidak menampilkan
semua fungsionalitasnya.
8. Direct Manipulation
user harus dapat langsung menyaksikan aksi sistem pada suatu objek.
Contoh sederhana, pada saat kita menekan mengetikkan huruf “A” maka
di layar akan langsung muncul huruf “A”.
Control: Sistem yang digunakan oleh user jangan membuatnya frustasi
dan dikontrol. Seperti memberikan komentar pada saat user melakukan
kesalahan dengan bahasa yang tidak membuat user merasa dikontrol oleh
sistem tersebut.
9. WYSIWYG
WYSIWYG (What You See Is What You Get), artinya adanya korespondensi
satu ke satu antara informasi di layar dengan informasi di printed-output
atau file. Contoh, pada saat membuat laporan menggunakan Microsoft
Office lalu mencetaknya (print out) laporan tersebut, maka hasil print out
harus sama dengan yang ada pada lembar kerja Microsoft Office.
10. Flexibility
Prinsip ini merupakan prinsip yang sangat penting bagi user dengan
keterbatasan fisik. Ini berarti mengijinkan banyak kontrol dari user yang
mendukung untuk menggunakan aplikasi yang kita rancang dan mampu
mengakomodir kemampuan user yang lain. Seperti aplikasi yang dapat
didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

11. Responsiveness
Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user.
Seperti menampilkan Progress Bar.
12. Invisible Technology
Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat
direkomendasikan dalam membuat User Interface. Sehingga user tidak
memiliki rasa khawatir dan ketakutan untuk menggunakan aplikasinya.
13. Robustness
Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun
tidak disengaja dan yang umunya tidak dapat dihindari. Menyediakan
Recovery System merupakan hal yang baik untuk mengimplementasikan
prinsip ini.
14. Protection
Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini
sistem seharusnya memproteksi kesalahan-kesalahan umum manusia.
Seperti pada saat kita menutup lembar kerja Microsoft Office yang belum
kita simpan sebelumnya, maka Office akan secara otomatis memberikan
konfirmasi untuk menyimpannya atau tidak.
15. Ease of Learning
Antar muka sistem harus mudah dipelajari bagi user novice (pengguna
umum). Hal ini akan memberikan motivasi kepada user tersebut untuk
menggunakannya.
16. Ease of Use
Antar muka sistem harus mudah digunakan untuk expert user. Sehingga
sistem yang dibangun tidak hanya dipakai untuk novice user tetapi bisa
juga dipakai untuk user yang sudah ahli (berpengalaman).

3. Komponen user interface dialog

User-action notation (UAN) Pendekatan tata bahasa dan diagram untuk spesifikasi
cocok untuk menu, perintah, atau pengisian formulir, tapi semua itu tidak cocok
untuk interface manipulasi langsung, karena semua itu tidak dapat mencakupi
variasi aktivitas dan timbal balik visual yang disediakan system. Sebagai
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

tambahan, interface manipulasi langsung sangat bergantung pada konteks untuk

menentukan arti dari sebuah masukan. Sebagai contoh, sebuah penekanan pada
mouse dapat berarti pemilihan sebuah file, membuka sebuah window, atau
memulai sebuah aplikasi, tergantung di mana kursor berada ketika penekanan
diaplikasikan. Dengan konteks yang sama, sulit untuk mengkarakterisasikan hasil
dari pemindahan ikon, karena hal ini tergantung dari apa yang dipindahkan.
UAN memiliki symbol yang spesifik untuk interface untuk aktivitas-aktivitas, dan
untuk konkurensi dan timbal balik. Simbol-simbol ini dipilih untuk
merepresentasikan aktivitas-aktivitas. UAN tidak dapat menspesifikasikan dengan
baik grafik yang lengkap, seperti menggambarkan programm atau animasi,
hubungan antara tugas, dan interupsi dari behaviour. Tapi bagaimanapun, UAN
adalah sebuah pendekatan tingkat tinggi dan kuat untuk menspesifikasikan
behaviour sistem dan mendeskripsikan aktivitas-aktivitas pemakai.
User Interface mencakup semua aspek penghubung antara pemakai dengan
system. Yang ternasuk hardware, software, pengguna, aksesibilitas, interaksi
manusia dan komputer. Untuk mengelola UI digunakan User Interface
Management System (UIMS).
Focus utama dari UIMS:
 Arsitektur konseptual untuk struktur dari system interaktif yang
dikonsentrasikan pada pemisahan semantic aplikasi dan presentasi.
 Teknik untuk mengimplementasikan aplikasi dan presentasi secara
terpisah.
 Teknik pendukung untuk menangani, mengimplementasikan, dan
mengevaluasi lingkungan interaksi yang sedang berjalan.

a. Komponen logika dari UIMS

Secara konseptual, ada 3 komponen utama dari system interaktif aplikasi,
presentasi dan control dialog.
 Presentasi
Komponen bertanggungjawab atas tampilan interface, termasuk output
dan input yang tersedia bagi user.
 Control dialog
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Komponen mengatur komunikasi antara presentasi dan aplikasi.

 Interface aplikasi
Pandangan dari semantic aplikasi yang disediakan sebagai interface.

b. Kategori ragam dialog

Secara umum, ragam dialog interaktif dapat dikelompokkan menjadi 9
kategori, yaitu:
 Dialog berbasis perintah tunggal (command line dialogue)
 Dialog berbasis bahasa pemrograman (programming language dialogue)
 Antarmuka berbasis bahasa alami (natural languange interface)
 Sistem Menu
 Dialog berbasis pengisian borang (form filling dialogue)
 Antarmuka berbasis ikon
 Sistem Penjendelaan (windowing system)
 Manipulasi Langsung (direct manipulation)
 Antarmuka berbasis interaksi grafis

4. Sekuensial User-Interface
Dua pendekatan yang digunakan untuk menjelaskan urutan akses komponen dari
user interface yaitu diagram transisi dan statechart.
a. Diagram Transisi
Umumnya sebuah diagram transisi memiliki sekumpulan nodes yang
merepresentasikan status sistem dan sekumpulan hubungan antara nodes yang
merepresentasikan transisi yang mungkin. Setiap hubungan diberi label dengan
aktivitas user yang memilih hubungan tersebut dan respon computer yang
mungkin ada. Diagram transisi yang sederhana dalam Gambar 4
merepresentasikan sejumlah sistem pemilihan menu untuk tampilan sebuah
restoran yang menunjukan apa yang terjadi ketika pemakai memilih sejumlah
pilihan:
1) Menambah sebuah restoran ke daftar.
2) Menyediakan sebuah tampilan dari sebuah restoran.
3) Membaca sebuah tampilan.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

4) Memperoleh bantuan
5) Keluar, atau karakter lainnya (pesan kesalahan).

<addnew>
+ wakeup

‘1’ <giverev>
'
3D

‘2’

Start ! ‘3’ <readrev>

‘4’,’?’
‘5’

help

clean
error quit

Gambar 4 Contoh diagram transisi

Diagram transisi diterjemahkan langsung ke dalam finite-state automata, yang
dipelajari dengan baik dalam ilmu komputer. Beberapa properti dapat diverifikasi
secara otomatis, seperti reachability (apakah ada kemungkinan jalan untuk
mencapai semua state) Atau keaktifan (apakah ada jalan keluar dari semua
state? ). Namun, sifat yang berpusat pada pengguna seperti visibilitas status
sistem sangat sulit untuk diungkapkan dan diverifikasi dalam hal automata.

Gambar 5. Contoh diagram transisi tindakan manipulasi-manipulasi. Label tautan

menunjukkan seberapa sering setiap transisi dibuat
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Sayangnya, diagram transisi tidak sesuai dengan system yang semakin

berkembang, dan terlalu banyak transisi yang dapat menyebabkan tampilan yang
rumit. Peningkatannya dapat dilakukan dengan menggantikan sebuah node dari
transisi status dengan sebuah tampilan cetakan untuk memberikan tampilan bahwa
ada perpindahan melalui tampilan dan kotak dialog. Penjelasan semacam ini
berguna dalam perancangan dan pelatihan. Perancangan untuk interface dengan
ratusan kotak dialog, atau website dengan ratusan tampilan, lebih mudah untuk
dipelajari ketika digunakan.

b. Statecharts
Walaupun diagram transisi efektif untuk alur atau aksi dan untuk menelusuri jejak
dari status, semua itu dapat dengan cepat menjadi luas dan memusingkan.
Modularitas memungkinkan jika nodes ada bersama subgraph, tapi strategi ini
bekerja dengan baik hanya secara berurutan. Diagram transisi juga menjadi
memusingkan ketika setiap node harus menunjukan hubungan ke sebuah status
bantuan, melompat ke status sebelumnya, dan sebuah status keluar. Konkurensi
dan sinkronisasi kurang dapat direpresentasikan oleh diagram transisi,
walaupun beberapa variasi seperti petri-nets dapat membantu. Alternative yang
dapat mengatasi masalah ini adalah statecharts, yang memiliki beberapa kebaikan
untuk menspesifikasikan interface . Karena sebuah fitur pengelompokan ditawarkan
melalui lingkaran yang bersarang, transisi yang berulang dapat difaktorkan ke luar
lingkaran.
Penambahan lainnya dalam statecharts seperti konkurensi, kejadian dari eksternal,
dan aksi dari pemakai direpresentasikan di dalam Statemaster, yang merupakan
sebuah peralatan User Interface berdasarkan statecharts. Statecharts juga dapat
diperluas dengan alur data dan spesifikasi batasan.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan

menunjukkan pengelompokan state.

5. Simulasi (mock-up) dari aplikasi yang akan dibuat

Mock-up adalah sebuah bentuk realistis dari sebuah karya digital, bertujuan untuk
pemanis atau menjadi contoh nyata bagaimana sebuah karya digital bekerja,
sebelum benar – benar dicetak, biasanya untuk klien atau calon klien dan
bertujuan untuk presentasi sebuah karya. Perancang seharusnya membuat
dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan. Peranti
bantu sederhana yang dapat digunakan misalnya adalah lembar kerja
tampilan/LKT (screen design work sheet). Pada LKT, disajikan empat bagian:
 Nomor lembar kerja
 Bagian tampilan
 Bagian navigasi
 Bagian keterangan
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 7. Contoh screen design work sheet

a. Interface mockup tools

Dalam membuat sketsa user interface diperlukan waktu yang cepat sebagai
tahap awal desain untuk mengeksplorasi banyak alternatif, untuk memungkinkan
komunikasi dalam tim desain, dan untuk menyampaikan kepada klien seperti apa
produk itu. User interface dapat dibuat dengan kertas dan pensil, pengolah kata,
atau perangkat lunak presentasi slide-show (seperti Microsoft PowerPoint atau
Apple Keynote). Perancang yang ahli juga telah membuat prototip antarmuka
pengguna dengan alat konstruksi multimedia, seperti Macromedia Director, Flash
MX Dreamweaver, visio, balsamiq, iplotz, wireframe dan lain-lain. Program ini
dapat dengan cepat menghasilkan program animasi atau bahkan interaktif dan
didistribusikan melalui Web. Berikut ini beberapa contoh interface mokup tool.
1) Balsamiq
Balsamiq Mockup Tools merupakan aplikasi terbaik menurut saya, untuk
membuat sketsa gambar Blueprint sebuah blog ataupun website. Cara
penggunaannya pun cukup mudah, hanya tinggal tarik dan letakan. Jika ingin
menambahkan gambar tinggal drop and drag saja sesuai keinginan. Fitur
lainnya pun dengan mudah kita gunakan.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 8. Balsamiq

2) Microsoft Visio
Microsoft Visio ini sangatlah mudah untuk digunakan, fitur yang lengkap
membuat kita tidak perlu lagi mencari gambar yang ingin kita gunakan dalam
pembuatan mockup sebuah website ataupun blog. Kelebihan Visio adalah
kemampuan diagram teknis dari pada pembuatan mockup.

Gambar 9. Microsoft Visio

b. Software-engineering tools
Programer yang berpengalaman terkadang membangun user –interface dengan
bahasa pemrograman dengan tujuan umum seperti Java, C #, atau C ++, namun
pendekatan ini memberikan cara untuk menggunakan perangkat lunak yang secara
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

khusus disesuaikan dengan pengembangan user-interface dan akses web. Memilih di

antara Integarted Development Environtmen (IDE) terkadang merupakan tugas yang
rumit dan membingungkan, karena kurangnya istilah seragam yang digunakan untuk
mendeskripsikan alat dan fiturnya. Ada sejumlah besar alat yang tersedia untuk
membangun user-interface. Tabel 1 mencantumkan empat lapisan perangkat lunak
yang dapat digunakan untuk membangun antarmuka pengguna dan alat interaktif
terkait mereka. Alat tingkat tinggi (layer 4) adalah generator user-interface, kadang-
kadang disebut sistem manajemen user-interface atau alat bangunan berbasis model.
Sebagian besar jika tidak semua aplikasi dapat dibangun kembali dengan cepat
menggunakan alat yang ada. Namun, alat ini saat ini hanya tersedia untuk kelas
aplikasi kecil, seperti database front-ends (Microsoft Access, Sybase PowerDesigner);
atau tetap menjadi prototip penelitian. Gambar 10 merupakan beberapa contoh IDE.

Gambar 10 Contoh software engineering tool Microsoft Visual Studio

Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi dalam native
code (dalam bentuk bahasa mesin yang berjalan di atas Windows) ataupun managed
code (dalam bentuk Microsoft Intermediate Language di atas .NET Framework). Selain
itu, Visual Studio juga dapat digunakan untuk mengembangkan aplikasi Silverlight,
aplikasi Windows Mobile (yang berjalan di atas .NET Compact Framework).
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 11 Contoh software engineering tool NetBeans

Netbeans adalah sebuah aplikasi Integrated Development Environment (IDE) yang
berbasiskan Java dari Sun Microsystems yang berjalan di atas swing. Swing merupakan
sebuah teknologi Java untuk pengembangan aplikasi dekstop yang dapat berjalan
pada berbagai macam platform seperti windows, linux, Mac OS X dan Solaris. Sebuah
IDE merupakan lingkup pemrograman yang di integrasikan ke dalam suatu aplikasi
perangkat lunak yang menyediakan Graphic User Interface (GUI), suatu kode editor
atau text, suatu compiler dan suatu debugger.

Tabel 1 Empat layer perangkat lunak yang tersedia untuk membangun user-interface
Software Layers
4 Application
3 Appication Framework
Specialized Language
2 GUIToolkit
1 Windowing System
Visual Tools Contoh
Model-Based Microsoft Access,
BuildingTools Sybase PowerDesigner
Copceptual Building Tools Macromedia Director
Microsoft MFC
Interface Builder Eclipse, Borland Jbuilder
Microsoft Visual Studio
Resource Editor Microsoft Win32/GDI+
Apple Quartz
X11 Windowing System
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

B. Keterampilan yang diperlukan dalam Mengidentifikasi Rancangan User

Interface
1. Mengidentifikasi kebutuhan rancangan user interface
2. Mengidentifikasi komponen user interface yang akan digunakan
3. Mengatur urutan akses komponen user interface
4. Membuat simulasi mockup menggunakan interface mockup tool dan software
engineering tool.

C. Sikap kerja yang diperlukan dalam Mengidentifikasi Rancangan User

Interface
1. Menunjukkan hasil identifikasi rancangan user interface secara cermat, tepat, teliti
dan sesuai kebutuhan
2. Menyajikan hasil identifikasi rancangan user interface secara cermat, tepat, teliti
dan sesuai konteks rancangan proses. sesuai kebutuhan
3. Menunjukkan urutan dari akses komponen user interface dialog secara cermat,
tepat, teliti sesuai kebutuhan
4. menyajikan hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan
dikembangkan secara cermat, tepat, teliti sesuai kebutuhan
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

BAB III
MELAKUKAN IMPLEMENTASI RANCANGAN USER INTERFACE

A. Pengetahuan yang diperlukan dalam melakukan implementasi

rancangan user interface
Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik.
Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah
program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di
hadapan.
Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa cara:
 Membuat sketsa pada kertas
 Menggunakan piranti prototipe GUI,
 Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan
jendela yang lain,
 Menggunakan peranti bantu yang disebut CASE (Computer Aided Software
Engineering).

1. Menu program sesuai dengan rancangan

Mengimplementasi user interface adalah dengan program aplikasi yang dirancang
untuk memenuhi kebutuhan informasi. Implementasi dari user interface dapat
menggunakan software program aplikasi yang memiliki library yang dapat
mengimplementasi user interface. Library masing-masing program berbeda tapi
memiliki fungsi untuk mengimplementasi user interface. Rancangan yang
berbasiskan kertas merupakan cara yang baik untuk memulai, tapi spesifikasi yang
mendetail dari User Interface yang lengkap memerlukan peralatan software.
Menu program yang telah dibuat dalam rancangan user interface seperti yang
dibuat dalam CASE Tools harus sesuai dengan kenyataan perancangan dalam
program aplikasi yang akan dikembangkan.
Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan
fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Menu
adalah daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa
suatu kalimat atau kumpulan beberapa kata.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu, dikenal
dua jenis sistem menu:
a. Sistem menu datar
Dalam sistem menu datar, kemampuan dan fasilitas yang dimiliki oleh suatu
program aplikasi akan ditampilkan secara lengkap, dan biasanya menggunakan
kalimat-kalimat yang cukup panjang.
Contoh sistem menu datar

Gambar 12. Contoh sistem menu datar

b. Sistem menu tarik (pulldown) yang berbasis pada struktur hirarki
pilihan (struktur pohon pilihan)
Sebuah menu tarik pada dasarnya adalah sistem menu yang pilihan-pilihannya
dikelompokkan menurut kategori tertentu atau menurut cara tertentu sehingga
mereka membentuk semacam hirarki pilihan. Pada hirarki paling tinggi, pilihan-
pilihan itu disebut dengan pilihan/menu utama. Sebagian atau semua
pilihan/menu utama dapat mempunyai salah satu atau lebih
subpilihan/submenu. Sebuah subpilihan/submenu dari suatu pilihan/menu
utama dapat mempunyai satu atau lebih sub-pilihan dan seterusnya. Struktur ini
membentuk semacam struktur pohon.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 13. Sistem menu tarik

Keuntungan dan kerugian penggunaan sistem menu adalah:
Keuntungan Kerugian
 Memerlukan sedikit pengetikan  Seringkali lambat
 Beban memori rendah  Memakan ruang layar (khususnya
 Struktur terdefinisikan dengan untuk menu datar)
baik  Tidak cocok ntuk aktifitas
 Tersedia piranti bantu CAD pemasukan data
 Tidak cocok untuk dialog
terinisiasi pengguna
 Tidak cocok untuk dialog
terinisiasi campuran

c. Penempatan user interface dialog diatur secara sekuensial

Perancangan dialog, seperti halnya perancangan sistem yang lain, harus
dikerjakan secara top-down. Proses perancangannya dapat dikerjakan secara
stepwise refinement sebagai berikut:
 Pemilihan Ragam Dialog
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna
(pengguna mula, menengah, atau pengguna ahli), tipe dialog yang
diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan
ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah
program tunggal, atau sekumpulan ragam dialog yang satu sama lain saling
mendukung.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

 Perancangan Struktur Dialog

Tahap kedua adalah melakukan analisis tugas dan menentukan model
pengguna dari tugas tersebut untuk membentuk struktur dialog yang
sesuai. Dalam tahap ini pengguna banyak dilibatkan, sehingga pengguna
langsung mendapatkan umpan balik yang berupa diskusi informal maupun
prototipe dari dialog yang nantinya akan ia digunakan.
 Perancangan Format Pesan
Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci
harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang
mengharuskan pengguna untuk memasukkan data ke dalam komputer juga
harus dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah
dengan mengurangi pengetikan yang tidak perlu dengan cara
mengefektifkan penggunaan tombol.
 Perancangan Penanganan Kesalahan
Bentuk-bentuk penanganan kesalahan yang dapat dilakukan antara lain
adalah:
 Validasi pemasukan atau: misalnya jika pengguna harus
memasukkan bilangan positif, sementara ia memasukkan data
negatif atau nol, maka harus ada mekanisme untuk mengulang
pemasukan data tersebut.
 Proteksi pengguna: program memberi peringatan ketika pengguna
melakukan suatu tindakan secara tidak sengaja, misalnya
penghapusan berkas.
 Pemulihan dari kesalahan: tersedianya mekanisme untuk
membatalkan tindakan yang baru saja dilakukan.
 Penampilan pesan salah yang tepat dan sesuai dengan kesalahan
yang terjadi pada waktu itu.
d. Jaring Semantik Tampilan
Digunakan untuk mempermudah bagi pemrogram pada saat ia menuliskan
program untuk disesuaikan dengan navigasi pada setiap lembar kerja. Pada
jaring semantik tampilan pada Gambar 14 terdiri atas dua komponen: nomor
tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang menyebabkan
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan anak
panah).

Gambar 14. Jaring semantik tampilan

2. Pengaturan Komponen User-Interface

Komponen user interface diatur agar sesuai dengan rancangan diagram user
interface yang telah dibuat. Komponen user interface yang dibuat dapat berupa
check box, combo box, text box, Label, dan lain-lain. Komponen yang ditampilkan
haruslah sesuai dengan prinsip perancangan user interface yang baik, yang user-
friendly.

3. Penentuan Bentuk Style Komponen User-Interface

Sebuah aplikasi yang berbasis antarmuka harus mampu membantu para user dalam
menyelesaikan tugasnya. Semua pekerjaan serta tugas-tugas user harus diadopsi
di dalam aplikasi tersebut melalui antarmuka. Sebisa mungkin user tidak
dihadapkan dengan kondisi memilih dan berpikir, tapi user dihadapkan dengan
pilihan yang mudah dan proses berpikir dari tugas-tugas user dipindahkan dalam
aplikasi melalui antarmuka. Gambar 13 contoh User hanya klik setup, tekan tombol
next, next, next, finish, ok untuk menginstal suatu sotfware.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 15. Contoh penentuan style komponen user interface

4. Penerapan Mock-up Dalam Aplikasi

Sebuah aplikasi sistem sudah pasti mengapdopsi sistem manualnya dan di
dalamnya tentunya terdapat urutan kerja dalam menyelesaikan pekerjaan. Dalam
sebuah aplikasi, software engineer harus memikirkan berbagai rangkaian pekerjaan
yang ada pada sebuah sistem. Jangan sampai user mengalami kesulitan dalam
menyelesaikan pekerjaannya karena user mengalami kebingungan ketika urutan
pekerjaan yang ada pada sistem manual tidak ditemukan pada software yang
dihadapinya. Selain itu user jangan dibingungkan dengan pilihan-pilihan menu yang
terlalu banyak dan semestinya menu-menu merupakan urutan dari rangkaian
pekerjaan. Dengan workflow compatibility dapat membantu seorang user dalam
mempercepat pekerjaannya.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

Gambar 16. Contoh user interface

B. Keterampilan yang diperlukan dalam melakukan implementasi

rancangan user interface
1 Memilih tampilan menu yang sesuai dengan rancangan program yang
diterapkan.
2 Menata urutan user interface
3 Mengatur aktif-pasif komponen user interface dialog yang disesuaikan
dengan urutan alur proses
4 Menentukan bentuk style komponen user interface
5 Membuat simulasi user interface dalam sebuah aplikasi sederhana.

C. Sikap kerja yang diperlukan dalam melakukan implementasi rancangan

user interface
Harus bersikap secara:
1. Menyajikan hasil menu program secara cermat,tepat, teliti dan sesuai dengan
rancangan program
2. Menyajikan hasil penempatan user interface dialog secara sekuensial
3. Mengatur Setting aktif-pasif komponen user interface dialog sesuai dengan
urutan alur proses secara cermat, tepat, teliti dan sesuai kebutuhan
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

4. Menyajikan hasil penerapan simulasi pada proses sesungguhnya secara cermat,

tepat, teliti dan sesuai kebutuhan
5. Menyajikan hasil ragam bentuk style dari komponen user interface secara
cermat, tepat, teliti dan sesuai kebutuhan

Daftar Alat Dan Bahan

A. Daftar Peralatan/Mesin

No. Nama Peralatan/Mesin Keterangan

1. Laptop, infocus, laserpointer Untuk di ruang teori
2. Laptop Untuk setiap peserta
3.
4.
5.
6.
7.

B. Daftar Bahan

No. Nama Bahan Keterangan

1. Setiap peserta
2.
3.
4.
5.
6.
7.
8.
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

No. Nama Bahan Keterangan

9. Setiap peserta

DAFTAR PUSTAKA

A. BukuReferensi

1. Shneiderman Ben. (2002). Designing the User Interface, 4rd Ed.., Addison
Wesley.
2. Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001
 Modul Diklat Berbasis Kompetensi Kode Modul
Sub-Golongan Pemrograman J.620100.005.01

DAFTAR PENYUSUN

No. Nama Profesi

1. Instruktur …
1. .. 2. Asesor …
3. Anggota …