7bc9e28176c34740b0096f6e0cd7041d

Modul Pelatihan Berbasis Kompetensi Kode Modul
Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa J.620100.005.01

Perangkat Lunak
MODUL
PENGEMBANGAN KEPROFESIAN
BERKELANJUTAN BERBASIS KOMPETENSI
MENGIMPLEMENTASIKAN USER INTERFACE

J.620100.005.01
KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN
LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK
DAN TENAGA KEPENDIDIKAN BIDANG KELAUTAN, PERIKANAN,
TEKNOLOGI INFORMASI DAN KOMUNIKASI
GOWA
2018
Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

Halaman: 1 dari 13
Modul - Versi 2018
Perangkat Lunak
MODUL PENGEMBANGAN KEPROFESIAN

BERKELANJUTAN BERBASIS KOMPETENSI
BIDANG KEAHLIAN
REKAYASA PERANGKAT LUNAK
(RPL)
PROFESIONAL:
Instruksi Dasar Pemrograman Berorientasi Obyek
SUB JUDUL:
Implementasi User Interface
Penulis:
Abdul Munif, S.Pd., S.ST., M.Kom. (abdmunif@gmail.com)
Penelaah:
Mardiana,S.Pd.,M.Pd. (dianarachman.pte@gmail.com)
Dr. A. Rahman Rahim, M.Hum. (rahimrahman23@yahoo.com)
Desain Grafis dan Ilustrasi:
Aeril Imrat (aerilimrat22@gmail.com)
Copyright © 2018
Direktorat Pembinaan Guru Pendidikan Dasar Direktorat Jenderal Guru dan Tenaga
Kependidikan Kementerian Pendidikan dan Kebudayaan
Hak Cipta Dilindungi Undang-Undang Dilarang mengcopy sebagian atau keseluruhan isi
buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementerian Pendidikan
Kebudayaan.

Halaman: 2 dari 13
Modul - Versi 2018
Perangkat Lunak
KATA PENGANTAR
Modul pengembangan keprofesian berkelanjutan (PKB) berbasis kompetensi
merupakan salah satu media pembelajaran yang dapat digunakan sebagai media
transformasi pengetahuan, keterampilan dan sikap kerja kepada peserta pelatihan
untuk mencapai kompetensi tertentu berdasarkan program pelatihan yang mengacu
kepada Standar Kompetensi.
Modul pelatihan ini berorientasi kepada pelatihan berbasis kompetensi
(Competence Based Training) diformulasikan menjadi 3 (tiga) buku, yaitu Buku
Informasi, Buku Kerja dan Buku Penilaian sebagai satu kesatuan yang tidak
terpisahkan dalam penggunaanya sebagai referensi dalam media pembelajaran bagi
peserta pelatihan dan instruktur, agar pelaksanaan pelatihan dapat dilakukan secara
efektif dan efisien. Untuk memenuhi kebutuhan pelatihan berbasis kompetensi
tersebut, maka disusunlah modul pelatihan berbasis kompetensi dengan judul
“MENGIMPLEMENTASIKAN USER INTERFACE “.
Kami menyadari bahwa modul yang kami susun ini masih jauh dari sempurna.
Oleh karena itu, kami sangat mengharapkan saran dan masukan untuk perbaikan
agar tujuan dari penyusunan modul ini menjadi lebih efektif.
Demikian kami sampaikan, semoga Tuhan YME memberikan tuntunan kepada
kita dalam melakukan berbagai upaya perbaikan dalam menunjang proses
pelaksanaan pembelajaran di lingkungan direktorat guru dan tenaga kependidikan.
Gowa, April 2018

Kepala LPPPTK KPTK,
Prof. Dr. Irwan, M.Pd

Halaman: 3 dari 13
Modul - Versi 2018
Perangkat Lunak
DAFTAR ISI
KATA PENGANTAR .................................................................................................................................................. 3

DAFTAR ISI .............................................................................................................................................................. 4
ACUAN STANDAR KOMPETENSI KERJA DAN SILABUS DIKLAT ............................................................................... 5
A. Acuan Standar Kompetensi Kerja................................................................................................. 5
B. Kemampuan yang Harus Dimiliki Sebelumnya ......................................................................... 7
C. Silabus Diklat...................................................................................................................................... 8
LAMPIRAN ............................................................................................................................................................ 13
1. BUKU INFORMASI ............................................................................................................................... 13
2. BUKU KERJA........................................................................................................................................ 13
3. BUKU PENILAIAN................................................................................................................................ 13

Halaman: 4 dari 13
Modul - Versi 2018
Perangkat Lunak
ACUAN STANDAR KOMPETENSI KERJA DAN SILABUS DIKLAT
A. Acuan Standar Kompetensi Kerja

Materi modul pelatihan ini mengacu pada unit kompetensi terkait yang disalin dari
Standar Kompetensi Kerja Nasional Indonesia Kategori Informasi dan Komunikasi
Golongan Pokok Aktivitas Pemrograman, Konsultasi Komputer dan Kegiatan Yang
Berhubungan Dengan Itu (YBDI) Bidang Software Development Sub Bidang
Pemrograman dengan uraian sebagai berikut:
Kode Unit : J.620100.005.01
Judul Unit : Mengimplementasikan User Interface
Deskripsi : Unit ini menentukan kompetensi, pengetahuan dan Sikap kerja

yang diperlukan dalam membuat rancangan antar muka
Unit
program.
ELEMEN KOMPETENSI KRITERIA UNJUK KERJA
1. Mengidentifikasi 1.1 Rancangan user interface diidentifikasi sesuai

kebutuhan
rancangan user
1.2 Komponen user interface dialog diidentifikasi sesuai
interface
konteks rancangan proses.
1.3 Urutan dari akses komponen user interface dialog

dijelaskan
1.4 Simulasi (mock-up) dari aplikasi yang akan

dikembangkan dibuat
2. Melakukan 2.1 Menu program sesuai dengan rancangan program

diterapkan.
implementasi
2.2 Penempatan user interface dialog diatur secara
rancangan user
sekuensial.
interface
2.3 Setting aktif-pasif komponen user interface dialog
disesuaikan dengan urutan alur proses.
2.4 Bentuk style dari komponen user interface

ditentukan.
2.5 Penerapan simulasi dijadikan suatu proses yang

sesungguhnya.
BATASAN VARIABEL
1. Konteks variabel
1.1 User interface yang dimaksud dalam unit ini adalah menu, layar,
form, dialog.
1.2 Alur akses terhadap user interface meliputi alur interaksi dari satu

Halaman: 5 dari 13
Modul - Versi 2018
Perangkat Lunak
interface ke yang lain ketika menerima masukan tertentu
2. Peralatan dan perlengkapan

2.1 Peralatan
2.1.1 Manual bahasa pemrograman
2.1.2 Perangkat lunak pemrograman terkait
2.2 Perlengkapan
2.2.1 Referensi pembuatan mock up
3. Peraturan yang diperlukan

(Tidak ada.)
4. Norma dan standar

4.1 Norma
4.1.1 Aspek legalitas dan etika profesi di bidang teknologi
informasi
4.2 Standar
4.2.1 Standar pengembangan antar muka yang sesuai dengan
lingkungan pengembangan
PANDUAN PENILAIAN
1. Konteks penilaian
1.1 Asesmen kompetensi pada unit dapat dilakukan dengan cara:
lisan, tertulis, demonstrasi/praktik.
1.2 Permasalahan diberikan kepada programmer dengan memberikan
suatu tugas pengembangan dengan diberikan spesifikasi.
2. Persyaratan kompetensi
2.1 J.620100.009.01 : Menggunakan Spesifikasi Program
3. Pengetahuan dan keterampilan yang dibutuhkan

3.1 Pengetahuan
3.1.1 Berbagai komponen dasar pembentuk user interface beserta
Penerapannya
3.2 Keterampilan
3.2.1 Penggunaan tools untuk membuat mock up
4. Sikap kerja yang diperlukan
4.1 Analitis
4.2 Teliti

Halaman: 6 dari 13
Modul - Versi 2018
Perangkat Lunak
5. Aspek kritis
5.1 Kemampuan menerapkan mock up/rancangan user interface dari
aplikasi yang akan dikembangkan
B. Kemampuan yang Harus Dimiliki Sebelumnya

Ada pun kemampuan yang harus dimiliki sebelumnya sebagai berikut:
- Tidak ada

Halaman: 7 dari 13
Modul - Versi 2018
Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak J.620100.005.01
C. Silabus Diklat
Judul Unit Kompetensi : Mengimplementasikan User Interface
Kode Unit Kompetensi : J.620100.005.01
Deskripsi Unit Kompetensi : Unit ini menentukan kompetensi, pengetahuan dan Sikap kerja yang diperlukan dalam membuat
rancangan antar muka program.
Perkiraan Waktu Pelatihan : JP @ 45 Menit

Tabel Silabus Unit
Kompetensi
Perkiraan
Elemen Kriteria Unjuk Materi Diklat Waktu Diklat
Indikator Unjuk Kerja
Kompetensi Kerja (JP)
Pengetahuan (P) Keterampilan (K) Sikap (S) P K
1.1. Rancangan user Peserta diklat mampu: • Prinsip-prinsip Identifikasi rancangan • Hasil identifikasi
interface perancangan user user interface harus cermat,
diidentifikasi • Menjelaskan rancangan interface tepat, teliti dan
sesuai user interface • Identifikasi sesuai kebutuhan
kebutuhan • Mengidentifikasi kebutuhan fungsional
rancangan user • Identifikasi form-form
interface sesuai berdasarkan
kebutuhan 15’ 30’
kebutuhan fungsional
1.Mengidentifikasi • Menunjukkan hasil
rancangan user identifikasi rancangan
interface user interface secara
cermat, tepat, teliti dan
sesuai kebutuhan
1.2. Komponen user Peserta diklat mampu: • User Interface Identifikasi user • Harus cermat,
interface Dialog interface dialog tepat, teliti dan
• menjelaskan komponen • Ragam jenis 15’ 30’
dialog • Komponen-komponen sesuai konteks
diidentifikasi user interface dialog GUI dalam form rancangan proses
Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 8 dari 13

Modul - Versi 2018
Perkiraan
sesuai konteks sesuai konsteks komponen user • Spesifikasi/kebutuhan
rancangan rancangan proses interface dialog setiap komponen
proses. • Mengidentifikasi
komponen user
interface dialog sesuai
konsteks rancangan
proses secara cermat
tepat dan teliti
• Menyajikan hasil
identifikasi rancangan
user interface secara
cermat, tepat, teliti dan
sesuai konteks
rancangan proses.
sesuai kebutuhan
1.3. Urutan dari Peserta diklat mampu: Urutan akses Penerapan urutan akses • Harus cermat,
akses komponen user komponen user tepat, teliti sesuai
komponen user • Menjelaskan Urutan dari interface dialog interface dialog kebutuhan
interface dialog akses komponen user (alur proses)
dijelaskan interface dialog
• Menerapkan Urutan dari
akses komponen user
interface dialog.
• Menunjukkan urutan dari 15’ 30’
akses komponen user
interface dialog secara
cermat, tepat, teliti sesuai
kebutuhan
1.4. Simulasi (mock- Peserta diklat mampu: Prinsip-prinsip Pembuatan simulasi Hasil mockup Harus 15’ 30’

Modul - Versi 2018
Perkiraan
up) dari aplikasi • Menjelaskan prinsip- pembuatan simulasi (mock-up) dari aplikasi sesuai dengan
yang akan prinsip pembuatan (mock-up) dari yang akan ruang lingkup,
dikembangkan simulasi (mock-up) dari aplikasi yang akan dikembangkan spesifikasi
dibuat aplikasi yang akan dikembangkan kebutuhan aplikasi
dikembangkan yang akan
• membuat simulasi (mock- dikembangkan
up) dari aplikasi yang
akan dikembangkan
• menyajikan hasil
pembuatan simulasi
simulasi (mock-up) dari
aplikasi yang akan
dikembangkan secara
cermat, tepat, teliti
sesuai kebutuhan
2.1. Menu program Peserta diklat mampu: Menu Program Penerapan menu Hasil Harus sesuai
sesuai dengan program dengan sesuai
rancangan • menjelaskan Menu dengan rancangan
program program program
diterapkan. • Menerapkan menu
program 15’ 30’
• Menyajikan hasil menu
program secara
2.Melakukan cermat,tepat, teliti dan
implementasi sesuai dengan
rancangan user rancangan program
interface 2.2. Penempatan Peserta diklat mampu: Prinsip-prinsip Pengaturan Hasil pengaturan
user interface penempatan user penempatan user Harus benar, sesuai
dialog diatur • menjelaskan interface dialog interface dialog kebutuhan dan
secara pengaturan secara sekuensial 15’ 30’
sekuensial. penempatan user
interface dialog
• menempatan user

Modul - Versi 2018
Perkiraan
sekuensial.
penempatan user
sekuensial
2.3. Setting aktif- Peserta diklat mampu: Prinsip pengaturan Pengaturan aktif pasif Hasil pengaturan
pasif komponen aktif pasif komponen komponen user Harus memenuhi
user interface • menjelaskan prinsip user interface dialog interface dialog sesuai sesuai dengan
dialog pengaturan Setting sesuai dengan urutan dengan urutan alur urutan alur proses.
disesuaikan aktif-pasif komponen alur proses. proses..
dengan urutan user interface dialog
alur proses. • Mengatur Setting aktif- 15’ 30’
pasif komponen user
interface dialog sesuai
dengan urutan alur
proses.
•
2.4. Bentuk style Peserta diklat mampu: Ragam bentuk style Penerapan bentuk style Harus sesuai
dari komponen dari komponen user komponen user dengan kebutuhan,
user interface • Mampu menjelaskan interface. interface fungsi dan estetika
ditentukan. ragam bentuk style dari komponen
komponen user interfac. 30’
• Menentukan bentuk style
dari komponen user
interface. 15’
• Menyajikan hasil ragam
bentuk style dari
komponen user interface
secara cermat, tepat,
teliti dan sesuai
kebutuhan
2.5. Penerapan Peserta diklat mampu: Prinsip-prinsip Penerapan simulasi Harus sesuai 15’ 30’

Modul - Versi 2018
Perkiraan
simulasi • menjelaskan penerapan penerapan simulasi sesuai dengan proses dengan kebutuhan
dijadikan suatu simulasi suatu proses suatu proses yang yang sesungguhnya. dan proses yang
proses yang yang sesungguhnya. sesungguhnya. sebenarnya
sesungguhnya. • menerapan simulasi
dijadikan suatu proses
yang sesungguhnya.
penerapan simulasi pada
proses sesungguhnya
secara cermat, tepat,
teliti dan sesuai
kebutuhan

Modul - Versi 2018
Sub-Golongan ..... J.620100.005.01
LAMPIRAN
1. BUKU INFORMASI
2. BUKU KERJA
3. BUKU PENILAIAN

Halaman: 13 dari 13
Modul - Versi 2018
BUKU INFORMASI

J.620100.005.01

LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN
PENDIDIK DAN TENAGA KEPENDIDIKAN
BIDANG KELAUTAN, PERIKANAN
GOWA
Perangkat Lunak
DAFTAR ISI
DAFTAR ISI ............................................................................................... 2

BAB I PENDAHULUAN ................................................................................. 5
A. TUJUAN UMUM (Unit Kompetensi) ............................................... 5
B. TUJUAN KHUSUS (Elemen Kompetensi) ........................................ 5
BAB II Mengidentifikasi Rancangan User Interface ...................................... 6
A. Pengetahuan yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................ 6
1. Rancangan user interface..................................................... 7
2. Prinsip perancangan user interface ...................................... 12
3. Komponen user interface dialog ........................................... 15
4. Simulasi (mock-up).............................................................. 19
5. Interface mockup tools ........................................................ 20
6. Software engineering tools ................................................... 22
B. Keterampilan yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................ 24
C. Sikap Kerja yang Diperlukan dalam Mengidentifikasi Rancangan
User Interface ............................................................................. 24
BAB III Melakukan Implementasi Rancangan User Interface ......................... 25
A. Pengetahuan yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface............................................................ 25
1. Menu program sesuai dengan rancangan ............................. 25
2. Penempatan user interface dialog diatur secara sekuensial ... 27
3. Jaring Semantik Tampilan .................................................... 28
4. Penentuan Bentuk Style Komponen User Interface ................ 29
5. Penerapan Mock-up dalam Aplikasi ....................................... 30
B. Keterampilan yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface .......................................................... 31
C. Sikap Kerja yang Diperlukan dalam Melakukan Implementasi
Rancangan User Interface............................................................ 31
DAFTAR ALAT DAN BAHAN ......................................................................... 32
Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 2 dari 34

Buku Informasi - Versi 2018
Perangkat Lunak
A. DAFTAR PERALATAN/MESIN ....................................................... 32

B. DAFTAR BAHAN ......................................................................... 32
DAFTAR PUSTAKA ...................................................................................... 33
A. Buku Referensi ........................................................................... 33
DAFTAR PENYUSUN ................................................................................... 34

Perangkat Lunak
DAFTAR GAMBAR
Gambar 1. Alternatif Presentasi .................................................................... 11

Gambar 2. Informasi yang dinamis dan nilai relatif ........................................ 11
Gambar 3. Textual Highlighting .................................................................... 11
Gambar 4. Contoh diagram transisi .............................................................. 17
Gambar 5. Contoh diagram transisi tindakan manipulasi-manipulasi ............... 18
Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan
menunjukkan pengelompokan state ............................................. 19
Gambar 7. Contoh screen design work sheet ............................................... 20
Gambar 8. Balsamiq .................................................................................... 21
Gambar 9. Microsoft Visio ............................................................................ 21
Gambar 10. Contoh software engineering tool Microsoft Visual Studio ............ 22
Gambar 11. Contoh software engineering tool NetBeans ............................... 23
Gambar 12. Contoh system menu datar ....................................................... 26
Gambar 13. Sistem menu tarik ..................................................................... 27
Gambar 14. Jaring semantic tampilan ........................................................... 29
Gambar 15. Contoh penentuan style komponen user interface ....................... 30
Gambar 16. Contoh user interface ................................................................ 31

Perangkat Lunak
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.

Perangkat Lunak
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

Perangkat Lunak
menggambar “wajah” antarmuka. Dengan kata lain, perancang dan pengguna

duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan
pengguna. Pengguna menyampaikan 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

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.
User Interaction (Interaksi pengguna)
Perancang sistem menghadapi dua masalah penting yaitu:
1) Bagaimana informasi dari user bisa disediakan untuk sistem komputer
misalnya pada saat input data ?
2) Bagaimana informasi dari sistem komputer ditampilkan untuk user – hasil
dari pemprosesan data ?

Perangkat Lunak
User interface yang baik harus menyatukan interaksi pengguna (user

interaction) dan penyajian informasi (information presentation).
Ada 5 tipe utama interaksi untuk user interaction :
a. Direct manipulation
Pengoperasian secara langsung: interaksi langsung dengan objek pada
layar. Misalnya delete file dengan memasukkannya ke trash.
Contoh: Video games.
1) Kelebihan: Waktu pembelajaran user sangat singkat, feedback
langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan
diperbaiki dengan cepat
2) Kekurangan : Interface tipe ini rumit dan memerlukan banyak fasilitas
pada sistem komputer, cocok untuk penggambaran secara visual
untuk satu operasi atau objek
b. Menu selection
Pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan.
Misalnya saat click kanan dan memilih aksi yang dikehendaki.
1) Kelebihan: User tidak perlu ingat nama perintah. Pengetikan minimal.
Kesalahan rendah.
2) 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 : Mengisi area-area pada form. Contoh: Stock control.
1) Kelebihan : Masukan data yang sederhana. Mudah dipelajari
2) Kekurangan : Memerlukan banyak tempat di layar.
Harus menyesuaikan dengan form manual dan kebiasaan user.
Command language
Perintah tertulis : Menuliskan perintah yang sudah ditentukan pada
program.
Contoh: operating system.

Perangkat Lunak
1) 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.
2) 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.
Natural language
Perintah dengan bahasa alami: Gunakan bahasa alami untuk
mendapatkan hasil. Contoh: search engine di Internet.
1) 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.
2) Kekurangan : Tidak semua sistem cocok gunakan ini. Jika digunakan
maka akan memerlukan banyak pengetikan
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:
1) Apakah pengguna perlu informasi dengan ketepatan tinggi atau data
yang saling berhubungan?
2) Seberapa cepat nilai informasi berubah? Harus ada indikasi perubahan
seketika?
3) Apakah pengguna harus memberi respon pada perubahan?
4) Apakah pengguna perlu melakukan perubahan pada informasi yang
disajikan?
5) Apakah informasi berupa teks atau numerik? Nilai relatif perlu atau
tidak?

Perangkat Lunak
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 :
a) Perubahan terjadi selama sesi berlangsung dan perubahan harus
dikomunikasikan/ditunjukkan ke user.
b) 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:
1) Digital presentation
a) Singkat – hanya perlu sedikit tempat pada layar
b) Ketepatan nilai ditunjukkan
2) Analogue presentation
a) Nilai terlihat sambil lalu
b) Untuk menunjukkan nilai relatif
c) Mudah melihat data nilai yang berbeda

Perangkat Lunak
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
sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak
terjadi secara cepat.
Gambar 2. Informasi yang dinamis dan nilai relatif
Gambar 3. Textual Highlighting

Perangkat Lunak
Penggunaan Warna pada desain Interface

1) Warna menambah dimensi ekstra pada suatu interface dan membantu
user memahami struktur yang kompleks
2) Bisa dipakai untuk mewarnai-terang (higlight) hal-hal khusus
3) Kesalahan umum dalam penggunaan warna pada desain UI:
4) Menggunakan warna untuk mengkomunikasikan arti merah bisa jadi
peringatan atau ada kesalahan
5) Terlalu banyak gunakan macam warna
6) Dalam menggunakan warna pada desain interface ada beberapa petunjuk
yang dapat diikuti seperti berikut ini:
a) Hindari penggunaan terlalu banyak warna
b) Gunakan kode warna untuk mendukung operasi
c) Pengguna bisa kendalikan warna untuk kode
d) Desain monochrome kemudian tambahkan warna
e) Gunakan warna kode secara konsisten
f) Hindari pasangan warna yang tidak cocok/norak
g) 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:
a) 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.

Perangkat Lunak
b) Product Compatibility
Selalu memperhatikan dan mempertahankan kompatibilitas antar produk,
misalnya mampu mengorbankan User Interface yang memungkinkan sistem
lebih kompatibel.
c) Task Compatibility
Rancang 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.
d) Work Flow Compatibility
Selalu mengorganisasikan setiap fungsi sesuai dengan kategori fungsinya
sehingga dapat memfasilitasi segala perubahan tugas user.
e) 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.
f) 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.
g) 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.
h) 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”.

Perangkat Lunak
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.
i) 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.
j) 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).
k) Responsiveness
Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user.
Seperti menampilkan Progress Bar.
l) 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.
m) 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.
n) 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

Perangkat Lunak
kita simpan sebelumnya, maka Office akan secara otomatis memberikan

konfirmasi untuk menyimpannya atau tidak.
o) Ease of Learning
Antar muka sistem harus mudah dipelajari bagi user novice (pengguna
umum). Hal ini akan memberikan motivasi kepada user tersebut untuk
menggunakannya.
p) 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 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.

Perangkat Lunak
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:
a) Arsitektur konseptual untuk struktur dari system interaktif yang
dikonsentrasikan pada pemisahan semantic aplikasi dan presentasi.
b) Teknik untuk mengimplementasikan aplikasi dan presentasi secara terpisah.
c) Teknik pendukung untuk menangani, mengimplementasikan, dan
mengevaluasi lingkungan interaksi yang sedang berjalan.
1. Komponen logika dari UIMS

Secara konseptual, ada 3 komponen utama dari system interaktif aplikasi,
presentasi dan control dialog.
a) Presentasi
Komponen bertanggungjawab atas tampilan interface, termasuk output
dan input yang tersedia bagi user.
b) Control dialog
Komponen mengatur komunikasi antara presentasi dan aplikasi.
c) Interface aplikasi
Pandangan dari semantic aplikasi yang disediakan sebagai interface.
2. Kategori ragam dialog

Secara umum, ragam dialog interaktif dapat dikelompokkan menjadi 9
kategori, yaitu :
a) Dialog berbasis perintah tunggal (command line dialogue)
b) Dialog berbasis bahasa pemrograman (programming language
dialogue)
c) Antarmuka berbasis bahasa alami (natural languange interface)
d) Sistem Menu
e) Dialog berbasis pengisian borang (form filling dialogue)
f) Antarmuka berbasis ikon
g) Sistem Penjendelaan (windowing system)
Perangkat Lunak
h) Manipulasi Langsung (direct manipulation)

i) Antarmuka berbasis interaksi grafis
3. Sekuensial User-Interface
Dua pendekatan yang digunakan untuk menjelaskan urutan akses
komponen dari user interface yaitu diagram transisi dan statechart.
c. 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
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

Perangkat Lunak
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

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.
4. 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.

Perangkat Lunak
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.
Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan

menunjukkan pengelompokan state.
4. 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

Perangkat Lunak
diimplementasikan. Peranti bantu sederhana yang dapat digunakan misalnya

adalah lembar kerja tampilan/LKT (screen design work sheet). Pada LKT,
disajikan empat bagian:
a) Nomor lembar kerja
b) Bagian tampilan
c) Bagian navigasi
d) Bagian keterangan
Gambar 7. Contoh screen design work sheet
5. 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.
a) Balsamiq

Perangkat Lunak
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.
Gambar 8. Balsamiq
b) 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

Perangkat Lunak
6. 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 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

Perangkat Lunak
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).
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 Visual Tools Contoh
4 Application Model-Based Microsoft Access,
BuildingTools Sybase PowerDesigner
3 Appication Framework Copceptual Building Tools Macromedia Director
Specialized Language Microsoft MFC
2 GUIToolkit Interface Builder Eclipse, Borland Jbuilder
Microsoft Visual Studio

Perangkat Lunak
1 Windowing System Resource Editor Microsoft Win32/GDI+

Apple Quartz
X11 Windowing System
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

Perangkat Lunak
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:
1. Membuat sketsa pada kertas
2. Menggunakan piranti prototipe GUI,
3. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela
dengan jendela yang lain,
4. 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.
Perangkat Lunak
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.

Perangkat Lunak
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 untuk
• Struktur terdefinisikan dengan baik menu datar)
• Tersedia piranti bantu CAD • Tidak cocok ntuk aktifitas pemasukan
data
• Tidak cocok untuk dialog terinisiasi
pengguna
• Tidak cocok untuk dialog terinisiasi
campuran
2. 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:
a) 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.

Perangkat Lunak
b) 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.
c) 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.
d) Perancangan Penanganan Kesalahan
Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan 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.
3. 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

Perangkat Lunak
perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan

anak panah).
Pengaturan Komponen User-Interface
Gambar 14. Jaring semantik tampilan
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.
4. 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.

Perangkat Lunak
Gambar 15. Contoh penentuan style komponen user interface
5. 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.

Perangkat Lunak
Gambar 16. Contoh user interface
B. Keterampilan yang diperlukan dalam melakukan implementasi

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

Perangkat Lunak
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
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.
9. Setiap peserta

Perangkat Lunak
DAFTAR PUSTAKA
A. Buku Referensi
1. Shneiderman Ben. (2002). Designing the User Interface, 4rd Ed.., Addison
Wesley.
2. Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001

Perangkat Lunak
DAFTAR PENYUSUN
No. Nama Profesi
1. Instruktur …
1. .. 2. Asesor …
3. Anggota …

Perangkat Lunak
BUKU KERJA

J.620100.005.01

LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN
TENAGA KEPENDIDIKAN
BIDANG KELAUTAN PERIKANAN
GOWA

Buku Kerja- Versi 2018
Perangkat Lunak
PENJELASAN UMUM
Pengembangan Keprofesian Berkelanjutan berbasis kompetensi mengharuskan

proses pelatihan memenuhi unit kompetensi secara utuh yang terdiri atas
pengetahuan, keterampilan, dan sikap kerja. Dalam buku informasi
Mengimplementasikan User Interface telah disampaikan informasi apa saja yang
diperlukan sebagai pengetahuan yang harus dimiliki untuk melakukan
praktik/keterampilan terhadap unit kompetensi tersebut. Setelah memperoleh
pengetahuan dilanjutkan dengan latihan-latihan guna mengaplikasikan pengetahuan
yang telah dimiliki tersebut. Untuk itu diperlukan buku kerja Mengimplementasikan
User Interface ini sebagai media praktik dan sekaligus mengaplikasikan sikap kerja
yang telah ditetapkan karena sikap kerja melekat pada keterampilan. Adapun tujuan
dibuatnya buku kerja ini adalah:
1. Prinsip pelatihan berbasis kompetensi dapat dilakukan sesuai dengan konsep yang
telah digariskan, yaitu pelatihan ditempuh elemen kompetensi per elemen
kompetensi, baik secara teori maupun praktik;
2. Prinsip praktik dapat dilakukan setelah dinyatakan kompeten teorinya dapat
dilakukan secara jelas dan tegas;
3. Pengukuran unjuk kerja dapat dilakukan dengan jelas dan pasti.
Ruang lingkup buku kerja ini meliputi pengerjaan tugas-tugas teori dan praktik per
elemen kompetensi dan kriteria unjuk kerja berdasarkan SKKNI Subgolongan
Pemrograman. Ruang lingkup buku kerja ini meliputi pengerjaan tugas-tugas teori dan
praktik per elemen kompetensi dan kriteria unjuk kerja berdasarkan SKKNI
Subgolongan Pemrograman.

Perangkat Lunak
DAFTAR ISI
PENJELASAN UMUM ................................................................................... 2

DAFTAR ISI ............................................................................................... 3
BAB I TUGAS TEORI DAN PRAKTIK ............................................................. 4
A. Mengidentifikasi Rancangan User Interface .................................. 4
1. Tugas Teori I ...................................................................... 4
2. Lembar Evaluasi Tugas Teori ............................................... 7
3. Tugas Praktik I ................................................................... 8
4. Daftar Cek Untuk Kerja Tugas I............................................. 10
B. Melakukan Implementasi Rancangan User Interface ..................... 11
1. Tugas Teori II ..................................................................... 11
2. Lembar Evaluasi Tugas Teori ................................................ 15
3. Tugas Praktik II .................................................................. 16
4. Daftar Cek Untuk Kerja Tugas I............................................. 19
BAB II CEKLIS TUGAS ............................................................................... 21

Perangkat Lunak
BAB I
TUGAS TEORI DAN PRAKTIK
A. Mengidentifikasi Rancangan User Interface
1. Tugas Teori I
Perintah : Jawablah soal di bawah ini
Waktu Penyelesaian : 90 menit
Soal :
1. Jelaskan manfaat mengidentifikasi rancangan user interface sesuai kebutuhan user!
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
2. Jelaskan faktor-faktor yang perlu diperhatikan sebelum menentukan bentuk penyajian

informasi!
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
…………………………………………………………………………………………………
3. Jelaskan dengan memberikan contoh 3 komponen logika dari User Interface Management
System (UIMS) !
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
Perangkat Lunak
5. Jelaskan dengan singkat diagram transisi di bawah ini!

……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
4. Sebutkan 5 ragam dialog interaktif dan disertai dengan contohnya!

Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………

Perangkat Lunak
<addnew>
+ wakeup
‘1’ <giverev>
'
3D
‘2’
Start ! ‘3’ <readrev>

‘4’,’?’
‘5’
help
clean
error quit
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
6. Jelaskan manfaat mock-up terhadap aplikasi yang akan dikembangkan!

Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………

Perangkat Lunak
2. Lembar Evaluasi Tugas Teori Mengidentifikasi Rancangan User
Interface
Semua kesalahan harus diperbaiki terlebih dahulu sebelum ditandatangani.
No. Benar Salah
1.
2.
3.
4.
5.
6.
Apakah semua pertanyaan Tugas Teori Mengidentifikasi rancangan user

interface dijawab dengan benar dengan waktu yang telah ditentukan?
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:

Perangkat Lunak
3. Tugas Praktik I
a. Elemen Kompetensi : Mengidentifikasi Rancangan User Interface
b. Waktu Penyelesaian : 180 menit
c. Capaian Unjuk Kerja :
Setelah menyelesaikan tugas membuat rancangan user interface peserta
mampu:
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.
d. Daftar Alat/Mesin dan Bahan :
NO NAMA BARANG SPESIFIKASI KETERANGAN
A. ALAT
1. Personal komputer / Laptop
2. Printer
3. Software Mockup Tool
4. Software Engineering Tool
B. BAHAN
1. Kertas
2. Tinta
e. Indikator Unjuk Kerja (IUK):

Mampu menyiapkan :
1) Kebutuhan rancangan user interface yang sesuai dengan keinginan
pengguna.
2) Komponen user interface yang sesuai dengan kebutuhan.
3) Urutan akses setiap komponen user interface
4) Software interface mockup tool dan software engineering tool

Perangkat Lunak
f. Keselamatan dan Kesehatan Kerja

Keselamatan dan kesehatan kerja yang perlu dilakukan pada waktu
melakukan praktik kerja ini adalah:
1) Bertindak berdasarkan sikap kerja yang sudah ditetapkan sehingga

diperoleh hasil seperti yang diharapkan, jangan sampai terjadi kesalahan
karena ketidak-telitian dan tidak taat asas.
2) Waktu menggunakan komputer, printer, dan alat lainnya mengikuti

petunjuknya masing-masing yang sudah ditetapkan.
g. Standar Kinerja
1) Dikerjakan selesai tepat waktu, waktu yang digunakan tidak lebih dari
yang ditetapkan.
2) Toleransi kesalahan 5% dari hasil yang harus dicapai, tetapi bukan pada
kesalahan kegiatan kritis.
h. Tugas
Abstraksi Tugas Praktik I
Service Elektronik "Maju Jaya" menerima reparasi barang-barang elektronik seperti Radio,
VCD, Televisi dan Tape. Setiap ada pelanggan yang akan memperbaiki barang elektroniknya
diterima oleh bagian penerimaan barang dan diberikan bukti reparasi. Setiap barang yang
akan direparasi diberikan pada ahli service tertentu dan Service Elektronik "Maju Jaya"
mempunyai beberapa ahli service. Pada saat memperbaiki, bila diperlukan spare part, maka
ahli service akan meminta spare part dan dicatat oleh bagian administrasi untuk setiap
pelanggan. Setelah selesai pada bukti reparasi akan ditulis spare part yang digunakan dan
biaya reparasinya.
a. Rancanglah sistem yang dapat mengakomodasi semua kebutuhan operasional sistem
tersebut menggunakan diagram transisi atau statechart.
b. Rancanglah user interface untuk menerima data customer yang akan memperbaiki
barang elektronik menggunakan salah satu software interface mock-up tool.

Perangkat Lunak
i. Instruksi Kerja
Setelah membaca abstraksi nomor h selanjutnya ikuti instruksi kerja sebagai
berikut:
1) Identifikasilah semua kebutuhan yang diperlukan user dalam merancang
user interface service elektronik “Maju Jaya”.
2) Tentukan komponen-komponen user interface yang akan digunakan dalam
sistem layanan service elektronik “Maju Jaya”.
3) Pilihlah metode diagram transisi atau statechart dalam menentukan urutaan
kerja user interface pada kertas yang sudah disediakan.
4) Siapkan personal komputer atau laptop yang dilengkapi dengan sistem
operasi Windows.
5) Pilihlah salah satu software interface mockup tool untuk mendigitalkan
rancangan user interface yang sudah dibuat.
6) Analisis sistem yang dibuat dengan cara membandingkan, mencek benar-
salahnya, dan meneliti apakah sudah mengakomodasi semua kebutuhan
operasional sistem tersebut.
7) Cetak hasil mock-up user interface sistem layanan service elektronik “Maju
Jaya”.
4. Daftar Cek Unjuk Kerja Tugas I

PENCAPAIAN PENILAIAN
NO DAFTAR TUGAS/INSTRUKSI POIN YANG DICEK
YA TIDAK K BK
1. Rancangan user interface Semua kebutuhan
diidentifikasi sesuai kebutuhan sistem sudah dibuat
2. Komponen user interface Seluruh komponen
dialog diidentifikasi sesuai user interface yang
konteks rancangan proses. digunakan
3. Urutan dari akses komponen Menggunakan metode
user interface dialog dijelaskan diagram state atau
statechart
4. Simulasi (mock-up) dari aplikasi Rancangan
yang akan dikembangkan dibuat menggunakan salah
satu software interface
mock-up tool

Perangkat Lunak
Apakah semua instruksi kerja tugas praktik Mengidentifikasi rancangan user

interface dilaksanakan dengan benar dengan waktu yang telah ditentukan?
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:
B. Melakukan Implementasikan Rancangan User Interface

1. Tugas Teori II
Perintah : Jawablah soal di bawah ini
Waktu Penyelesaian : 90 menit
Soal :
1. Jelaskan kelebihan dan kekurangan menu datar dari dua Gambar 1 dan Gambar 2
dibawah ini!
Gambar 1. Menu datar tipe A

Perangkat Lunak
Gambar 2. Menu datar tipe B

Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
2. Jelaskan kelebihan dan kekurangan menu tarik (pulldown) dari Gambar 3 berikut ini !
Gambar 3. Menu pulldown

Jawaban:
……………………………………………………………………………………………………
Perangkat Lunak
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
3. Jelaskan perbedaan menu datar dan menu tarik (pulldown) dari Gambar 4 berikut ini !
Gambar 4. Mock-up Menu data dan menu tarik
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
4. Jelaskan cara penempatan user interface dialog yang harus dikerjakan secara stepwise
refinement
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
Perangkat Lunak
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
4. Analisalah pengaturan user interface dari Gambar 5 dibawh ini, menurut anda apakah
rancangan user interface-nya sudah sesuai dengan aplikasi Transaksi Penjualan?
Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
5. Menurut anda style user interface pada Gambar 6 sudah dapat menyampaikan pesan
Perangkat Lunak
yang ingin diberikan pada user (pengguna), Jelaskan!
Gambar 6. User interface mobile

Jawaban:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
2. Lembar Evaluasi Tugas Teori Melakukan Implementasi Rancangan User

Interface
Semua kesalahan harus diperbaiki terlebih dahulu sebelum ditandatangani.

Perangkat Lunak
No. Benar Salah
1.
2.
3.
4.
5.
Apakah semua pertanyaan Tugas Teori Melakukan implementasi rancangan

user interface dijawab dengan benar dengan waktu yang telah ditentukan?
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:
3. Tugas Praktik II
a. Elemen Kompetensi : Melakukan implementasi rancangan user
interface
Setelah menyelesaikan tugas membuat rancangan user interface peserta
mampu:

Perangkat Lunak
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
4) Menentukan bentuk style komponen user interface
5) Membuat simulasi user interface dalam sebuah aplikasi sederhana.

A. ALAT
1. Personal komputer / Laptop
2. Printer
3. Software Mockup Tool
4. Software Engineering Tool
B. BAHAN
1. Kertas
2. Tinta

Mampu menyiapkan:
1) Menu tampilan user interface yang sesuai dengan keinginan pengguna.
2) Urutan komponen user interface.
3) Tata letak komponen user interface.
4) Bentuk atau style user interface sesuai dengan keinginan pengguna.
5) Simulasi user interface menggunakan software engineering tool.

diperoleh hasil seperti yang diharapkan, jangan sampai terjadi
kesalahan karena ketidak-telitian dan tidak taat asas.
Perangkat Lunak
g. Standar Kinerja
yang ditetapkan.
h. Tugas
Abstraksi Tugas Praktik II
Situs web kenalan.com adalah situs dengan sasaran para ABG dengan layanan komunitas
berupa berita hiburan, diskusi online, chat online gratis bagi anggotanya. Field-field yang
perlu diisi adalah userid, paswoord, nama, tanggal lahir, alamat kota, propinsi, kode pos, jenis
kelamin, alamat email, pekerjaan, minat dan pilihan apakah pemakai ingin memperoleh
newsletter rutin dari kenalan.com, minat boleh dipilih lebih dari satu antara lain: musik, film,
buku, belanja, olahraga, dan traveling. Berilah pernyataan bahwa dengan mengirimkan
(submit) pendaftaran ini, calon anggota setuju akan syarat-syarat dan ketentuan
keanggotaan.
Anda diminta untuk membuat tampilan halaman pendaftaran anggota baru situs tersebut
yang akan digunakan oleh calon anggota baru dengan menggunakan salah satu software
CASE (Computer Aided Software Engineering).
i. Instruksi Kerja
Setelah membaca abstraksi nomor h selanjutnya ikuti instruksi kerja
sebagai berikut:
1) Tentukan menu tampilan kenalan.com yang paling sesuai dengan
keinginan pengguna.
2) Pilihlah komponen-komponen user interface yang akan digunakan dalam
sistem layanan kenalan.com.
3) Tentukan tata letak komponen user interface dan style yang cocok dengan
segmen pasar pengguna yang mayoritas remaja ABG.
operasi Windows.
5) Pilihlah salah satu software interface mockup tool atau software
engineering tool untuk mendigitalkan rancangan user interface yang
sudah dibuat.

Perangkat Lunak
6) Analisis sistem yang dibuat dengan cara membandingkan, mencek

benar-salahnya, dan meneliti apakah sudah mengakomodasi semua
kebutuhan operasional sistem tersebut.
7) Cetak hasil user interface situs web kenalan.com.
4. Daftar Cek Unjuk Kerja Tugas I

YA TIDAK K BK
1. Menu program sesuai dengan Pilihan menu yang
rancangan program diterapkan. sesuai dengan
pengguna
2. Penempatan user interface Urutan user interface
dialog diatur secara sekuensial. yang jelas
3. Setting aktif-pasif komponen Layanan konfirmasi
user interface dialog dalam setiap
disesuaikan dengan urutan alur komponen user
proses. interface
4. Bentuk style dari komponen Pilihan bentuk atau
user interface ditentukan. style yang sesuai
dengan pengguna
5. Penerapan simulasi dijadikan Tersedianya user
suatu proses yang interface yang siap
sesungguhnya. dicoba
Apakah semua instruksi kerja tugas praktik Melakukan implementasi

rancangan user interface dilaksanakan dengan benar dengan waktu yang
telah ditentukan?

Perangkat Lunak
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:

Perangkat Lunak
BAB II
CEKLIS TUGAS
PENILAIAN
NO TUGAS UNJUK KERJA TANGGAL
K BK
1. Mengidentifikasi rancangan user
interface
2. Melakukan implementasi
Apakah semua tugas unjuk kerja Mengimplementasikan User Interface telah

dilaksanakan dengan benar dan dalam waktu yang telah ditentukan?
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:

BUKU PENILAIAN

J.620100.005.01

LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN TENAGA
KEPENDIDIKAN BIDANG KELAUTAN PERIKANAN DAN
GOWA
2018
Perangkat Lunak
PENJELASAN UMUM
Buku penilaian untuk unit kompetensi Mengimplementasikan User Interface dibuat
sebagai konsekuensi logis dalam pelatihan berbasis kompetensi yang telah
menempuh tahapan penerimaan pengetahuan, keterampilan, dan sikap kerja melalui
buku informasi dan buku kerja. Setelah latihan-latihan (exercise) dilakukan berdasar-
kan buku kerja maka untuk mengetahui sejauh mana kompetensi yang dimilikinya
perlu dilakukan uji komprehensif secara utuh per unit kompetensi dan materi uji
komprehensif itu ada dalam buku penilaian ini.
Adapun tujuan dibuatnya buku penilaian ini, yaitu untuk menguji kompetensi peserta
pelatihan setelah selesai menempuh buku informasi dan buku kerja secara kompre-
hensif dan berdasarkan hasil uji inilah peserta akan dinyatakan kompeten atau belum
kompeten terhadap unit kompetensi mengimplementasikan user interface. Metoda
Penilaian yang dilakukan meliputi penilaian dengan opsi sebagai berikut:
1. Metoda Penilaian Pengetahuan
a. Tes Tertulis
Untuk menilai pengetahuan yang telah disampaikan selama proses pelatihan
terlebih dahulu dilakukan tes tertulis melalui pemberian materi tes dalam
bentuk tertulis yang dijawab secara tertulis juga. Untuk menilai pengetahuan
dalam proses pelatihan materi tes disampaikan lebih dominan dalam bentuk
obyektif tes, dalam hal ini jawaban singkat, menjodohkan, benar-salah, dan
pilihan ganda. Tes essay bisa diberikan selama tes essay tersebut tes essay
tertutup, tidak essay terbuka, hal ini dimaksudkan untuk mengurangi faktor
subyektif penilai.
b. Tes Wawancara
Tes wawancara dilakukan untuk menggali atau memastikan hasil tes tertulis
sejauh itu diperlukan. Tes wawancara ini dilakukan secara perseorangan antara
penilai dengan peserta uji/peserta pelatihan. Penilai sebaiknya lebih dari satu
orang.

Buku Penilaian - Versi 2018 Halaman: 2 dari 19
Perangkat Lunak
2. Metode Penilaian Keterampilan

a. Tes Simulasi
Tes simulasi ini digunakan untuk menilai keterampilan dengan menggunakan
media bukan yang sebenarnya, misalnya menggunakan tempat kerja tiruan
(bukan tempat kerja yang sebenarnya), obyek pekerjaan disediakan atau
hasil rekayasa sendiri, bukan obyek kerja yang sebenarnya.
b. Aktivitas Praktik
Penilaian dilakukan secara sebenarnya, di tempat kerja sebenarnya dengan
menggunakan obyek kerja sebenarnya.
3. Metoda Penilaian Sikap Kerja

a. Observasi
Untuk melakukan penilaian sikap kerja digunakan metoda observasi terstruktur,
artinya pengamatan yang dilakukan menggunakan lembar penilaian yang
sudah disiapkan sehigga pengamatan yang dilakukan mengikuti petunjuk
penilaian yang dituntut oleh lembar penilaian tersebut. Pengamatan dilakukan
pada waktu peserta uji/peserta pelatihan melakukan keterampilan kompetensi
yang dinilai karena sikap kerja melekat pada keterampilan tersebut.

Perangkat Lunak
DAFTAR ISI
PENJELASAN UMUM ................................................................................................... 2

DAFTAR ISI ............................................................................................................... 4
BAB I PENILAIAN TEORI ............................................................................................ 5
A. Lembar Penilaian Teori ................................................................................... 5
B. Ceklis Penilaian Teori ..................................................................................... 9
BAB II PENILAIAN PRAKTIK ...................................................................................... 11
A. Lembar Penilaian Praktik .............................................................................. 11
B. Daftar Cek Unjuk Kerja Tugas Praktek........................................................... 14
BAB III PENILAIAN SIKAP KERJA .............................................................................. 16
A. CEKLIS PENILAIAN SIKAP KERJA .................................................................. 16
B. Catatan : ..................................................................................................... 16
LAMPIRAN-LAMPIRAN .............................................................................................. 17
A. Lampiran 1 Kunci Jawaban Penilaian Teori .................................................... 18
B. Lampiran 2 Kunci Jawaban Penilaian Praktek ................................................. 19

Perangkat Lunak
BAB I
PENILAIAN TEORI
A. Lembar Penilaian Teori
Unit Kompetensi : …………………………………………

Diklat : …………………………………………
Waktu : 60 menit
PETUNJUK UMUM
1. Jawablah materi tes ini pada lembar jawaban/kertas yang sudah disediakan.
2. Modul terkait dengan unit kompetensi agar disimpan.
3. Bacalah materi tes secara cermat dan teliti.
Isian
Lengkapilan kalimat di bawah ini dengan cara mencari jawabannya pada kolom sebelah
kanan dan tuliskan jawabannya saja pada kertas yang tersedia.
1. Dalam perancangan user interface hendaknya a. Consistency

menggunakan konsep, terminologi dan pengaturannya b. Direct Manipulation
mudah dipahami oleh user. Seperti ikon atau gambar c. Familiarity
“Recycle Bin” pada aplikasi mengindikasikan file-file yang d. protection
sudah dihapus sebelumnya. e. Responsiveness
2. Dalam perancangan user interface penggunaan f. Robustness
komponen atau gambar harus tetap atau tidak berubah- g. Task Compatibility
ubah terhadap fungsionalitas atau kegunaan dari sistem. h. Uer Compatibility
seperti Tombol “save” untuk melakukan proses i. Work Flow
penyimpanan dan bukan penghapusan. Compatibility
3. Pengguna dapat langsung menyaksikan aksi sistem pada j. WYSIWYG (What You
suatu objek. Seperti pada saat pengguna menekan atau See Is What You Get),
mengetikkan huruf “A” maka di layar akan langsung
muncul huruf “A”.

Perangkat Lunak
4. Seorang perancang sistem harus benar-benar paham

tentang pengetahuan, cara berpikir dan cara menerima
informasi dari pengguna sehingga sistem yang
diimplementasikan akan membuat pengguna lebih
produktif.
5. Rancangan interface sistem harus sesuai dengan
pekerjaan atau kegiatan yang dilakukan pengguna,
sehingga dapat mempermudah dan mempercepat
pekerjaannya
6. Dalam perancangan user interface harus selalu
mengorganisasikan setiap fungsinya sesuai dengan
kategori fungsinya sehingga dapat memfasilitasi segala
perubahan tugas user.
7. User interface sistem harus selalu memberikan reaksi
dengan cepat terhadap aksi yang dilakukan pengguna,
seperti menampilkan Progress Bar.
8. Interface sistem harus dapat menjamin apa yang telah
ditampilkan dilayar monitor harus sama dengan apa yang
ditampilkan dikertas setelah dokumen dicetak
9. User interface sistem harus mampu mentolerir kesalahan
manusia baik disengaja maupun tidak disengaja dan
yang umumnya tidak dapat dihindari. Seperti
menyediakan menu Recovery System.
10. User interface sistem harus mampu menjaga
kenyamanan, keamanan pengguna ketika menggunakan
aplikasi sistem khususnya data-data berupa file. Seperti
menampilkan form konfirmasi untuk menyimpan atau
tidak saat menutup lembar MS office yang belum
disimpan sebelumnya

Perangkat Lunak
Pilihan Ganda
Jawablah pertanyaan/pernyataan di bawah ini dengan cara memilih pilihan jawaban
yang tepat dan menuliskan huruf A/B/C/D yang sesuai dengan pilihan tersebut.
1. Bentuk dialog interaktif interface yang memberikan instruksi secara langsung
kepada komputer menggunakan tombol fungsi, karakter tunggal, command dalam
bentuk singkat maupun panjang adalah CLI memungkinkan user mengakses
dengan cepat fungsi sistem dan beberapa tools.i : (1.2)
a. Menu c. WIMP interface
b. CLI d. Form-fills
2. Bentuk dialog interface berupa display yang menyerupai selembar kertas dengan
beberapa slot / field untuk diisi, biasanya dan utamanya digunakan untuk aplikasi
pemasukan (data entry) dan pencarian data (data retrieval), adalah : (1.2)
3. Bentuk dialog interface yang merupakan sekumpulan opsi / pilihan yang tersedia
bagi user ditampilkan pada layar dan dapat dipilih dengan menggunakan mouse
atau tombol numerik maupun alfabetik), adalah : (1.2)
4. komponen dalam WIMP interface yang digunakan dalam interaksi user dan sistem
yang berfungsi menunjuk dan memilih komponen-komponen dalam user interface
dialog adalah, adalah : (1.2)
a. Windows c. Pointer
b. Icon d. Menu
5. komponen dalam WIMP interface yang berprilaku seperti terminal independent dan
berisi grafik atau teks yang dapat dipindahkan dan diubah ukurannya, adalah :
(1.2)
a. Windows c. Pointer
b. Icon d. Menu

Perangkat Lunak
6. Pernyataan berikut merupakan prinsip prinsip penerapan warna dalam desain user
interfease kecuali : (1.1)
a. Warna dapat menambah dimensi ekstra pada suatu interface
b. Warna dapat membantu user memahami struktur yang kompleks
c. Warna dapat memberikan penekanan tentang sesuatu hal-hal khusus
d. Warna untuk mengkomunikasikan arti seperti merah sebagai peringatan
7. Suatu penyajian informasi berupa informasi numerik atau teks, disajikan dengen
jenis huruf khusus yang mudah dibaca, informasi tidak berubah selama sesi
berjalan, adalah : nyataan berikut merupakan prinsip prinsip penerapan warna
dalam desain user interfease kecuali : (1.1)
a. Paralel information c. Dinamic Information
b. Static information d. Serial information
8. Suatu diagram yang menjelaskan urutan akses komponen dari user dan memiliki
sekumpulan nodes yang merepresentasikan status sistem, sekumpulan hubungan
antara nodes, meresentasikan kondisi perubahan yang mungkin, Setiap hubungan
diberi label dengan aktivitas user yang memilih hubungan tersebut dan respon
computer yang mungkin ada. (1.3)
a. Diagram Statechart c. Diagram Transisi
b. Diagram aliran data d. Diagram alur proses
9. Suatu teknik penampilan menu-menu pilihan yang akan ditampilkan secara lengkap
dan biasanya menggunakan kalimat-kalimat yang cukup panjang. (1.3)
a. Menu tarik (pulldown) c. Menu datar
b. Popup Menu d. Dropdown Menu
10. Pernyataan berikut menjelaskan tentang mock-up interface sistem yang akan
dibuat, kecuali (1.4)
a. bentuk realistis dari sebuah karya digital`
b. dapat digunakan untuk pengujian sistem
c. Sebagai presentasi sebuah karya
d. contoh nyata bagaimana sebuah karya digital bekerja

Perangkat Lunak
11. Bagian screen design work sheet yang berisi tentang komoponen-komponen grafik
user interface adalah . (1.4)
a. Navigasi c. Tampilan
b. Keterangan d. Nomor Lembar kerja
12. Pemilhan ragam dialog dalam user interface dipengaruhi oleh beberapa hal, kecuali.
(2.1)
a. Navigasi yang dibutuhkan
b. Tipe dialog yang diperlukan
c. Karakteristik populasi pengguna
d. Kendala teknologi untuk implementasi
13. Kebutuhan sistem menyebutkan bahwaprogram memberi peringatan ketika

pengguna melakukan suatu tindakan kesalahan secara tidak sengaja. Jika dilihat
dari sisi perancangan error handling pernyataan diatas termasuk dalam kategri ...
(2.2)
a. Pemulihan dari kesalahan
b. Proteksi pengguna
c. Validasi pemasukan
d. Proteksi pengguna
Essay
Jawablah pertanyaan-pertanyaan di bawah ini dengan jelas dan benar!
1. ………….
2. ………..
B. Ceklis Penilaian Teori
NO. NO. PENILAIAN

KUNCI JAWABAN JAWABAN PESERTA K BK KETERANGAN
KUK SOAL
Isian
1. Familiarity (C)
2. Consistency (A)
3. Direct Manipulation (B)
4. Uer Compatibility (H)
5. Task Compatibility (G)
6. Work Flow Compatibility (I)
7. Responsiveness (E)

Perangkat Lunak
NO. NO. KUNCI JAWABAN JAWABAN PESERTA PENILAIAN KETERANGAN

KUK SOAL
8. WYSIWYG (What You See
Is What You Get), (J)
9. Robustness (F)
10. Protection (D)
PG
1.2 1. B
1.2 2. D
1.2 3. a.
1.2 4. C
1.2 5. A
1.1 6. D
1.1 7. B
1.3 8. C
1.3 9. C
1.4 10. B
1.4 11. C
2.1 12. A
2.2 13. D
Essay
D.1 Terlampir
D.2 Terlampir

Perangkat Lunak
BAB II
PENILAIAN PRAKTIK
A. Lembar Penilaian Praktik
a. Elemen Kompetensi : Mengimplementasikan User Interface
Setelah menyelesaikan tugas menggunakan metode pengembangan
program peserta mampu:
4. Membuat simulasi mockup menggunakan interface mockup tool dan
5. Memilih tampilan menu yang sesuai dengan rancangan program yang
diterapkan.
6. Menata urutan user interface.
7. Mengatur aktif-pasif komponen user interface dialog yang disesuaikan
8. Menentukan bentuk style komponen user interface
9. Membuat simulasi user interface dalam sebuah aplikasi sederhana.

A. ALAT
1. Komputer / Laptop
2. Perangkat lunak MS Word
3. Perangkat lunak MS EXCELL
4. Perangkat lunak tools pemodelan
B. BAHAN
1. Materi/buku informasi
2. Lembar kerja / instrumen


Perangkat Lunak
4. Membuat simulasi mockup menggunakan interface mockup tool dan

5. Memilih tampilan menu yang sesuai dengan rancangan program yang
diterapkan.
6. Menata urutan user interface
7. Mengatur aktif-pasif komponen user interface dialog yang disesuaikan
8. Menentukan bentuk style komponen user interface
9. Membuat simulasi user interface dalam sebuah aplikasi sederhana

diperoleh hasil seperti yang diharapkan, jangan sampai terjadi
kesalahan karena ketidak-telitian dan tidak taat asas.
g. Standar Kinerja
yang ditetapkan.
h. Tugas- Abstraksi Tugas Praktik

Abstraksi Tugas 1
Service Elektronik "Maju Jaya" menerima reparasi barang-barang elektronik seperti Radio,
VCD, Televisi dan Tape. Setiap ada pelanggan yang akan memperbaiki barang elektroniknya
diterima oleh bagian penerimaan barang dan diberikan bukti reparasi. Setiap barang yang
akan direparasi diberikan pada ahli service tertentu dan Service Elektronik "Maju Jaya"
mempunyai beberapa ahli service. Pada saat memperbaiki, bila diperlukan spare part, maka
ahli service akan meminta spare part dan dicatat oleh bagian administrasi untuk setiap
pelanggan. Setelah selesai pada bukti reparasi akan ditulis spare part yang digunakan dan

Perangkat Lunak
biaya reparasinya.
a. Rancanglah sistem yang dapat mengakomodasi semua kebutuhan operasional sistem
tersebut menggunakan diagram transisi atau statechart.
b. Rancanglah user interface untuk menerima data customer yang akan memperbaiki
barang elektronik menggunakan salah satu software interface mock-up tool.
Abstraksi Tugas 2
Situs web kenalan.com adalah situs dengan sasaran para ABG dengan layanan komunitas
berupa berita hiburan, diskusi online, chat online gratis bagi anggotanya. Field-field yang
perlu diisi adalah userid, paswoord, nama, tanggal lahir, alamat kota, propinsi, kode pos, jenis
kelamin, alamat email, pekerjaan, minat dan pilihan apakah pemakai ingin memperoleh
newsletter rutin dari kenalan.com, minat boleh dipilih lebih dari satu antara lain: musik, film,
buku, belanja, olahraga, dan traveling. Berilah pernyataan bahwa dengan mengirimkan
(submit) pendaftaran ini, calon anggota setuju akan syarat-syarat dan ketentuan
keanggotaan.
Anda diminta untuk membuat tampilan halaman pendaftaran anggota baru situs tersebut
yang akan digunakan oleh calon anggota baru dengan menggunakan salah satu software
CASE (Computer Aided Software Engineering).
i. Instruksi Kerja
Setelah membaca abstraksi nomor h selanjutnya ikuti instruksi kerja sebagai
berikut:
Instruksi Tugas 1:
1) Identifikasilah semua kebutuhan yang diperlukan user dalam merancang
user interface service elektronik “Maju Jaya”.
2) Tentukan komponen-komponen user interface yang akan digunakan dalam
sistem layanan service elektronik “Maju Jaya”.
3) Pilihlah metode diagram transisi atau statechart dalam menentukan urutaan
kerja user interface pada kertas yang sudah disediakan.
operasi Windows.
5) Pilihlah salah satu software interface mockup tool untuk mendigitalkan
rancangan user interface yang sudah dibuat.

Perangkat Lunak

7) Cetak hasil mock-up user interface sistem layanan service elektronik “Maju
Jaya”.
Instruksi Tugasi 2:
1) Tentukan menu tampilan kenalan.com yang paling sesuai dengan keinginan
pengguna.
2) Pilihlah komponen-komponen user interface yang akan digunakan dalam
sistem layanan kenalan.com.
3) Tentukan tata letak komponen user interface dan style yang cocok dengan
segmen pasar pengguna yang mayoritas remaja ABG.
operasi Windows.
5) Pilihlah salah satu software interface mockup tool atau software
engineering tool untuk mendigitalkan rancangan user interface yang sudah
dibuat.
7) Cetak hasil user interface situs web kenalan.com.
B. Daftar Cek Unjuk Kerja Tugas Praktek

YA TIDAK K BK
1. Rancangan user interface diidentifikasi Semua kebutuhan sistem
sesuai kebutuhan sudah dibuat
2. Komponen user interface Seluruh komponen user
dialog diidentifikasi sesuai konteks interface yang
rancangan proses. digunakan
3. Urutan dari akses komponen user Menggunakan metode
interface dialog dijelaskan diagram state atau
statechart
4. Simulasi (mock-up) dari aplikasi yang Rancangan
akan dikembangkan dibuat menggunakan salah satu
software interface mock-
up tool
5. Menu program sesuai dengan Pilihan menu yang sesuai
rancangan program diterapkan. dengan pengguna

Perangkat Lunak
6. Penempatan user interface dialog Urutan usert interface

diatur secara sekuensial. yang jelas
7. Setting aktif-pasif komponen user Layanan konfirmasi
interface dialog disesuaikan dengan dalam setiap komponen
urutan alur proses. user interface
8. Bentuk style dari komponen user Pilihan bentuk atau style
interface ditentukan. yang sesuai dengan
pengguna
9. Menu program sesuai dengan Pilihan menu yang sesuai
rancangan program diterapkan. dengan pengguna
Apakah semua instruksi kerja tugas praktik mengimplementasikan user inter-

face dilaksanakan dengan benar dengan waktu yang telah ditentukan?
YA TIDAK
NAMA TANDA TANGAN
PESERTA .............................................. ...................................
PENILAI .............................................. ...................................
Catatan Penilai:
…………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………….
Tanda Tangan Perserta Pelatihan : ………………………………………
Tanda Tangan Instruktur : ………………………………………

Perangkat Lunak
BAB III
PENILAIAN SIKAP KERJA

A. CEKLIS PENILAIAN SIKAP KERJA
Judul Unit Kompetensi : MENGGUNAKAN SPESIFIKASI PROGRAMJ.620100.009.02

INDICATOR UNJUK KERJA NO. KUK K BK KETERANGAN
1. Menunjukkan hasil identifikasi rancangan user 1.1
interface secara cermat, tepat, teliti dan sesuai
kebutuhan
2. Menyajikan hasil identifikasi rancangan user interface 1.2
secara cermat, tepat, teliti dan sesuai konteks
rancangan proses. sesuai kebutuhan
3. Menunjukkan urutan dari akses komponen user 1.3
interface dialog secara cermat, tepat, teliti sesuai
kebutuhan
4. menyajikan hasil pembuatan simulasi simulasi (mock- 1.4
up) dari aplikasi yang akan dikembangkan secara
cermat, tepat, teliti sesuai kebutuhan
5. Menyajikan hasil menu program secara cermat,tepat, 2.1
teliti dan sesuai dengan rancangan program
6. Menyajikan hasil penempatan user interface dialog 2.2
secara sekuensial
7. Mengatur Setting aktif-pasif komponen user interface 2.3
dialog sesuai dengan urutan alur proses secara
8. Menyajikan hasil penerapan simulasi pada proses 2.4
sesungguhnya secara cermat, tepat, teliti dan sesuai
kebutuhan
9. Menyajikan hasil ragam bentuk style dari komponen 2.5
user interface secara cermat, tepat, teliti dan sesuai
kebutuhan
B. Catatan:
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
Tanda Tangan Peserta : ……………………………………
Tanda Tangan Instruktur : …………………………………

Perangkat Lunak
LAMPIRAN-LAMPIRAN

Perangkat Lunak
A. Lampiran 1 Kunci Jawaban Penilaian Teori

NO. NO. PENILAIAN
KUNCI JAWABAN JAWABAN PESERTA K BK KETERANGAN
KUK SOAL
Isian
1.1 11. Familiarity (C)
1.1 12. Consistency (A)
1.1 13. Direct Manipulation (B)
1.1 14. Uer Compatibility (H)
1.1 15. Task Compatibility (G)
2.2 16. Work Flow Compatibility (I)
2.2 17. Responsiveness (E)
2.1 18. WYSIWYG (What You See
Is What You Get), (J)
3.1 19. Robustness (F)
3.3 20. Protection (D)
PG
1.2 14. B
1.2 15. D
1.2 16. a.
1.2 17. C
1.2 18. A
1.1 19. D
1.1 20. B
1.3 21. C
1.3 22. C
1.4 23. B
1.4 24. C
2.1 25. A
2.2 26. D
Essay
D.1 Terlampir
D.2 Terlampir

Perangkat Lunak
B. Lampiran 2 Kunci Jawaban Penilaian Praktek
Judul Unit Kompetensi : MENGGUNAKAN SPESIFIKASI PROGRAMJ.620100.009.02

INDICATOR UNJUK KERJA NO. KUK K BK KETERANGAN
1. Menunjukkan hasil identifikasi rancangan user 1.1
interface secara cermat, tepat, teliti dan sesuai
kebutuhan
2. Menyajikan hasil identifikasi rancangan user interface 1.2
secara cermat, tepat, teliti dan sesuai konteks
rancangan proses. sesuai kebutuhan
3. Menunjukkan urutan dari akses komponen user 1.3
interface dialog secara cermat, tepat, teliti sesuai
kebutuhan
4. menyajikan hasil pembuatan simulasi simulasi (mock- 1.4
up) dari aplikasi yang akan dikembangkan secara
cermat, tepat, teliti sesuai kebutuhan
5. Menyajikan hasil menu program secara cermat,tepat, 2.1
teliti dan sesuai dengan rancangan program
6. Menyajikan hasil penempatan user interface dialog 2.2
secara sekuensial
7. Mengatur Setting aktif-pasif komponen user interface 2.3
dialog sesuai dengan urutan alur proses secara
8. Menyajikan hasil penerapan simulasi pada proses 2.4
sesungguhnya secara cermat, tepat, teliti dan sesuai
kebutuhan
9. Menyajikan hasil ragam bentuk style dari komponen 2.5
user interface secara cermat, tepat, teliti dan sesuai
kebutuhan


7bc9e28176c34740b0096f6e0cd7041d

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

7bc9e28176c34740b0096f6e0cd7041d

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Pelatihan Berbasis Kompetensi Kode Modul

Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa J.620100.005.01

MENGIMPLEMENTASIKAN USER INTERFACE

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

MODUL PENGEMBANGAN KEPROFESIAN

Instruksi Dasar Pemrograman Berorientasi Obyek

Implementasi User Interface

Abdul Munif, S.Pd., S.ST., M.Kom. (abdmunif@gmail.com)

Desain Grafis dan Ilustrasi:

Aeril Imrat (aerilimrat22@gmail.com)

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

Gowa, April 2018

Prof. Dr. Irwan, M.Pd

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

KATA PENGANTAR .................................................................................................................................................. 3

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

ACUAN STANDAR KOMPETENSI KERJA DAN SILABUS DIKLAT

A. Acuan Standar Kompetensi Kerja

Kode Unit : J.620100.005.01

Judul Unit : Mengimplementasikan User Interface

Deskripsi : Unit ini menentukan kompetensi, pengetahuan dan Sikap kerja

1. Mengidentifikasi 1.1 Rancangan user interface diidentifikasi sesuai

1.3 Urutan dari akses komponen user interface dialog

1.4 Simulasi (mock-up) dari aplikasi yang akan

2. Melakukan 2.1 Menu program sesuai dengan rancangan program

2.4 Bentuk style dari komponen user interface

2.5 Penerapan simulasi dijadikan suatu proses yang

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

2. Peralatan dan perlengkapan

3. Peraturan yang diperlukan

4. Norma dan standar

3. Pengetahuan dan keterampilan yang dibutuhkan

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

B. Kemampuan yang Harus Dimiliki Sebelumnya

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

Perkiraan Waktu Pelatihan : JP @ 45 Menit

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 8 dari 13

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 9 dari 13

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 10 dari 13

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 11 dari 13

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman 12 dari 13

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

MENGIMPLEMENTASIKAN USER INTERFACE

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

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

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 2 dari 34

A. DAFTAR PERALATAN/MESIN ....................................................... 32

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 3 dari 34

Gambar 1. Alternatif Presentasi .................................................................... 11

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 4 dari 34

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 5 dari 34

A. Pengetahuan yang diperlukan dalam Mengidentifikasi Rancangan User

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 6 dari 34

menggambar “wajah” antarmuka. Dengan kata lain, perancang dan pengguna

1. Rancangan user interface

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 7 dari 34

User interface yang baik harus menyatukan interaksi pengguna (user

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 8 dari 34

1) Kelebihan: Perintah diketikan langsung pada system. Misal UNIX, DOS

Information Presentation (Penyajian Informasi )

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 9 dari 34

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Halaman: 10 dari 34

Gambar 1. Alternatif presentasi