Perangkat Lunak - Kemdikbud

Modul Pelatihan Berbasis Kompetensi Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa

Perangkat Lunak

Kode Modul J.620100.005.01

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek

Modul - Versi 2018 Halaman: 1 dari 13

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


Perangkat Lunak

Kode Modul J.620100.005.01



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. ([email protected])

Penelaah:

Mardiana,S.Pd.,M.Pd. ([email protected])

Dr. A. Rahman Rahim, M.Hum. ([email protected])

Desain Grafis dan Ilustrasi:

Aeril Imrat ([email protected])

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.


Perangkat Lunak

Kode Modul J.620100.005.01



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


Perangkat Lunak

Kode Modul J.620100.005.01



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


Perangkat Lunak

Kode Modul J.620100.005.01



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

: Unit ini menentukan kompetensi, pengetahuan dan Sikap kerja

yang diperlukan dalam membuat rancangan antar muka

program.

ELEMEN KOMPETENSI KRITERIA UNJUK KERJA

1. Mengidentifikasi

rancangan user

interface

1.1 Rancangan user interface diidentifikasi sesuai

kebutuhan

1.2 Komponen user interface dialog diidentifikasi sesuai

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

implementasi

rancangan user

interface

2.1 Menu program sesuai dengan rancangan program

diterapkan.

2.2 Penempatan user interface dialog diatur secara

sekuensial.

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


Perangkat Lunak

Kode Modul J.620100.005.01



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


Perangkat Lunak

Kode Modul J.620100.005.01



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

Modul Pelatihan Berbasis Kompetensi

Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak Kode Modul

J.620100.005.01


Modul - Versi 2018

Halaman 8 dari 13

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

Elemen

Kompetensi

Kriteria Unjuk

Kerja Indikator Unjuk Kerja

Materi Diklat Perkiraan

Waktu Diklat

(JP)

Pengetahuan (P) Keterampilan (K) Sikap (S) P K

1.Mengidentifikasi rancangan user interface

1.1. Rancangan user interface diidentifikasi

sesuai

kebutuhan

Peserta diklat mampu:

• Menjelaskan rancangan

user interface

• Mengidentifikasi rancangan user interface sesuai kebutuhan

• Menunjukkan hasil

identifikasi rancangan user interface secara

cermat, tepat, teliti dan

sesuai kebutuhan

• Prinsip-prinsip perancangan user interface

Identifikasi rancangan

user interface

• Identifikasi

kebutuhan fungsional

• Identifikasi form-form

berdasarkan kebutuhan fungsional

• Hasil identifikasi harus cermat,

tepat, teliti dan sesuai kebutuhan

15’ 30’

1.2. Komponen user interface dialog

diidentifikasi


• menjelaskan komponen user interface dialog

• User Interface Dialog

• Ragam jenis

Identifikasi user interface dialog • Komponen-komponen

GUI dalam form

• Harus cermat,

tepat, teliti dan

sesuai konteks rancangan proses

15’ 30’

Modul Pelatihan Berbasis Kompetensi Sektor Teknologi Informasi dan Komunikasi Sub Sektor Rekayasa Perangkat Lunak

Kode Modul

J.620100.005.01


Modul - Versi 2018

Halaman 9 dari 13

Elemen

Kompetensi

Kriteria Unjuk



Waktu Diklat

(JP)


sesuai konteks

rancangan

proses.

sesuai konsteks

rancangan 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

komponen user interface dialog

• Spesifikasi/kebutuhan setiap komponen

1.3. Urutan dari akses

komponen user interface dialog dijelaskan


• Menjelaskan Urutan dari

akses komponen user interface dialog

• Menerapkan Urutan dari akses komponen user interface dialog.

• Menunjukkan urutan dari akses komponen user interface dialog secara cermat, tepat, teliti sesuai

kebutuhan

Urutan akses komponen user interface dialog

(alur proses)

Penerapan urutan akses komponen user interface dialog

• Harus cermat,

tepat, teliti sesuai kebutuhan

15’ 30’

1.4. Simulasi (mock- Peserta diklat mampu: Prinsip-prinsip Pembuatan simulasi Hasil mockup Harus 15’ 30’


Kode Modul

J.620100.005.01


Modul - Versi 2018

Halaman 10 dari 13

Elemen

Kompetensi

Kriteria Unjuk



Waktu Diklat

(JP)


up) dari aplikasi

yang akan

dikembangkan dibuat

• Menjelaskan prinsip-prinsip pembuatan

simulasi (mock-up) dari


• membuat simulasi (mock-up) dari aplikasi yang akan dikembangkan

• menyajikan hasil

pembuatan simulasi

simulasi (mock-up) dari aplikasi yang akan

dikembangkan secara cermat, tepat, teliti

sesuai kebutuhan

pembuatan simulasi

(mock-up) dari


(mock-up) dari aplikasi

yang akan

dikembangkan

sesuai dengan

ruang lingkup,

spesifikasi kebutuhan aplikasi

yang akan dikembangkan

2.Melakukan implementasi

rancangan user interface

2.1. Menu program

sesuai dengan rancangan

program

diterapkan.


• menjelaskan Menu program

• Menerapkan menu

program

• Menyajikan hasil menu

program secara cermat,tepat, teliti dan

sesuai dengan rancangan program

Menu Program Penerapan menu

program

Hasil Harus sesuai

dengan sesuai dengan rancangan

program

15’ 30’

2.2. Penempatan

user interface dialog diatur

secara sekuensial.


• menjelaskan pengaturan

penempatan user interface dialog

• menempatan user

Prinsip-prinsip


Pengaturan


Hasil pengaturan

Harus benar, sesuai kebutuhan dan

secara sekuensial 15’ 30’


Kode Modul

J.620100.005.01


Modul - Versi 2018

Halaman 11 dari 13

Elemen

Kompetensi

Kriteria Unjuk



Waktu Diklat

(JP)


interface dialog secara

sekuensial.


penempatan user interface dialog secara

sekuensial

2.3. Setting aktif-pasif komponen

user interface dialog

disesuaikan dengan urutan

alur proses.


• menjelaskan prinsip

pengaturan Setting aktif-pasif komponen


• Mengatur Setting aktif-pasif komponen user interface dialog sesuai

dengan urutan alur proses.

•

Prinsip pengaturan aktif pasif komponen

user interface dialog sesuai dengan urutan

alur proses.

Pengaturan aktif pasif komponen user interface dialog sesuai dengan urutan alur

proses..

Hasil pengaturan Harus memenuhi

sesuai dengan urutan alur proses.

15’ 30’

2.4. Bentuk style dari komponen

user interface ditentukan.


• Mampu menjelaskan

ragam bentuk style dari komponen user interfac.

• Menentukan bentuk style

dari komponen user interface.

• Menyajikan hasil ragam bentuk style dari

komponen user interface secara cermat, tepat,

teliti dan sesuai kebutuhan

Ragam bentuk style

dari komponen user

interface.

Penerapan bentuk style

komponen user

interface

Harus sesuai dengan kebutuhan,

fungsi dan estetika komponen

15’

30’

2.5. Penerapan Peserta diklat mampu: Prinsip-prinsip Penerapan simulasi Harus sesuai 15’ 30’


Kode Modul

J.620100.005.01


Modul - Versi 2018

Halaman 12 dari 13

Elemen

Kompetensi

Kriteria Unjuk



Waktu Diklat

(JP)


simulasi

dijadikan suatu

proses yang sesungguhnya.

• menjelaskan penerapan simulasi suatu proses

yang sesungguhnya.

• menerapan simulasi

dijadikan suatu proses yang sesungguhnya.


penerapan simulasi pada proses sesungguhnya

secara cermat, tepat,


penerapan simulasi

suatu proses yang

sesungguhnya.

sesuai dengan proses

yang sesungguhnya.

dengan kebutuhan

dan proses yang

sebenarnya

Modul Pelatihan Berbasis Kompetensi

Sub-Golongan ..... Kode Modul

J.620100.005.01



LAMPIRAN

1. BUKU INFORMASI

2. BUKU KERJA

3. BUKU PENILAIAN

BUKU INFORMASI


J.620100.005.01


DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN

PENDIDIK DAN TENAGA KEPENDIDIKAN BIDANG KELAUTAN, PERIKANAN

TEKNOLOGI INFORMASI DAN KOMUNIKASI GOWA


Perangkat Lunak

Kode Modul J.620100.005.01

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Buku Informasi - Versi 2018

Halaman: 2 dari 34

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


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 3 dari 34

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

B. DAFTAR BAHAN ......................................................................... 32

DAFTAR PUSTAKA ...................................................................................... 33

A. Buku Referensi ........................................................................... 33

DAFTAR PENYUSUN ................................................................................... 34


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 4 dari 34

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

Kode Modul J.620100.005.01


Halaman: 5 dari 34

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

Kode Modul J.620100.005.01


Halaman: 6 dari 34

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

Kode Modul J.620100.005.01


Halaman: 7 dari 34

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

Kode Modul J.620100.005.01


Halaman: 8 dari 34

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

Kode Modul J.620100.005.01


Halaman: 9 dari 34

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

Kode Modul J.620100.005.01


Halaman: 10 dari 34

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

Kode Modul J.620100.005.01


Halaman: 11 dari 34

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

Kode Modul J.620100.005.01


Halaman: 12 dari 34

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

Kode Modul J.620100.005.01


Halaman: 13 dari 34

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

Kode Modul J.620100.005.01


Halaman: 14 dari 34

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

http://en.wikipedia.org/wiki/WYSIWYG

http://office.microsoft.com/en-us/default.aspx


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 15 dari 34

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

Kode Modul J.620100.005.01


Halaman: 16 dari 34

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

Kode Modul J.620100.005.01


Halaman: 17 dari 34

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)

Start

wakeup

error quit

help

clean

<readrev>

<giverev>

<addnew>

!

‘5’

‘4’,’?’

‘3’

‘2’

‘1’

3D'

+

Gambar 4. Contoh diagram transisi


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 18 dari 34

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

Kode Modul J.620100.005.01


Halaman: 19 dari 34

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

Kode Modul J.620100.005.01


Halaman: 20 dari 34

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

Kode Modul J.620100.005.01


Halaman: 21 dari 34

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

Kode Modul J.620100.005.01


Halaman: 22 dari 34

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

Kode Modul J.620100.005.01


Halaman: 23 dari 34

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

BuildingTools

Microsoft Access,

Sybase PowerDesigner

3 Appication Framework

Specialized Language

Copceptual Building Tools Macromedia Director

Microsoft MFC

2 GUIToolkit Interface Builder Eclipse, Borland Jbuilder

Microsoft Visual Studio

https://id.wikipedia.org/wiki/Microsoft_Intermediate_Language

https://id.wikipedia.org/wiki/Silverlight


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 24 dari 34

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,


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

Kode Modul J.620100.005.01


Halaman: 25 dari 34

BAB III

MELAKUKAN IMPLEMENTASI RANCANGAN USER INTERFACE

A. Pengetahuan yang diperlukan dalam melakukan implementasi


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

Kode Modul J.620100.005.01


Halaman: 26 dari 34

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

Kode Modul J.620100.005.01


Halaman: 27 dari 34

Gambar 13. Sistem menu tarik

Keuntungan dan kerugian penggunaan sistem menu adalah:

Keuntungan Kerugian

• Memerlukan sedikit pengetikan

• Beban memori rendah

• Struktur terdefinisikan dengan baik

• Tersedia piranti bantu CAD

• Seringkali lambat

• Memakan ruang layar (khususnya untuk

menu datar)

• 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

Kode Modul J.620100.005.01


Halaman: 28 dari 34

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

Kode Modul J.620100.005.01


Halaman: 29 dari 34

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

Kode Modul J.620100.005.01


Halaman: 30 dari 34

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

Kode Modul J.620100.005.01


Halaman: 31 dari 34

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

Kode Modul J.620100.005.01


Halaman: 32 dari 34

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

Kode Modul J.620100.005.01


Halaman: 33 dari 34

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

Kode Modul J.620100.005.01


Halaman: 34 dari 34

DAFTAR PENYUSUN

No. Nama Profesi

1. ..

1. Instruktur …

2. Asesor …

3. Anggota …


Perangkat Lunak

Kode Modul J.620100.005.01

Judul Modul: Instruksi Dasar Pemrograman Berorientasi Obyek Buku Kerja- Versi 2018

Halaman: 1 dari 21

BUKU KERJA


J.620100.005.01


DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN

TENAGA KEPENDIDIKAN BIDANG KELAUTAN PERIKANAN

TEKNOLOGI INFORMASI DAN KOMUNIKASI GOWA


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 2 dari 21

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

Kode Modul J.620100.005.01


Halaman: 3 dari 21

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

Kode Modul J.620100.005.01


Halaman: 4 dari 21

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

Kode Modul J.620100.005.01


Halaman: 5 dari 21

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

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

Jawaban:

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

5. Jelaskan dengan singkat diagram transisi di bawah ini!


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 6 dari 21

6. Jelaskan manfaat mock-up terhadap aplikasi yang akan dikembangkan!

Jawaban:

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

Start

wakeup

error quit

help

clean

<readrev>

<giverev>

<addnew>

!

‘5’

‘4’,’?’

‘3’

‘2’

‘1’

3D'

+

Jawaban:

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 7 dari 21

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

Kode Modul J.620100.005.01


Halaman: 8 dari 21

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

Kode Modul J.620100.005.01


Halaman: 9 dari 21

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

Kode Modul J.620100.005.01


Halaman: 10 dari 21

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

NO DAFTAR TUGAS/INSTRUKSI POIN YANG DICEK PENCAPAIAN PENILAIAN

YA TIDAK K BK

1. Rancangan user interface

diidentifikasi sesuai kebutuhan

Semua kebutuhan

sistem sudah dibuat

2. Komponen user interface

dialog diidentifikasi sesuai

konteks rancangan proses.

Seluruh komponen

user interface yang

digunakan

3. Urutan dari akses komponen

user interface dialog dijelaskan

Menggunakan metode

diagram state atau

statechart

4. Simulasi (mock-up) dari aplikasi

yang akan dikembangkan dibuat

Rancangan

menggunakan salah

satu software interface

mock-up tool


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 11 dari 21

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

Kode Modul J.620100.005.01


Halaman: 12 dari 21

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

Kode Modul J.620100.005.01


Halaman: 13 dari 21

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

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

Kode Modul J.620100.005.01


Halaman: 14 dari 21

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

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

Kode Modul J.620100.005.01


Halaman: 15 dari 21

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

Kode Modul J.620100.005.01


Halaman: 16 dari 21

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

Kode Modul J.620100.005.01


Halaman: 17 dari 21

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.

2) Waktu menggunakan komputer, printer, dan alat lainnya mengikuti



Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 18 dari 21

g. Standar Kinerja


yang ditetapkan.

2) Toleransi kesalahan 5% dari hasil yang harus dicapai, tetapi bukan pada


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

Kode Modul J.620100.005.01


Halaman: 19 dari 21

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

rancangan program diterapkan.

Pilihan menu yang

sesuai dengan

pengguna

2. Penempatan user interface

dialog diatur secara sekuensial.

Urutan user interface

yang jelas

3. Setting aktif-pasif komponen


disesuaikan dengan urutan alur

proses.

Layanan konfirmasi

dalam setiap

komponen user

interface

4. Bentuk style dari komponen

user interface ditentukan.

Pilihan bentuk atau

style yang sesuai

dengan pengguna

5. Penerapan simulasi dijadikan

suatu proses yang

sesungguhnya.

Tersedianya user

interface yang siap

dicoba

Apakah semua instruksi kerja tugas praktik Melakukan implementasi

rancangan user interface dilaksanakan dengan benar dengan waktu yang

telah ditentukan?


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 20 dari 21

YA TIDAK

NAMA TANDA TANGAN

PESERTA .............................................. ...................................

PENILAI .............................................. ...................................

Catatan Penilai:


Perangkat Lunak

Kode Modul J.620100.005.01


Halaman: 21 dari 21

BAB II

CEKLIS TUGAS

NO TUGAS UNJUK KERJA PENILAIAN

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

MENGIMPLEMENTASIKAN USER INTERFACE J.620100.005.01


DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN LEMBAGA PENGEMBANGAN DAN PEMBERDAYAAN PENDIDIK DAN TENAGA

KEPENDIDIKAN BIDANG KELAUTAN PERIKANAN DAN TEKNOLOGI INFORMASI DAN KOMUNIKASI

GOWA 2018


Perangkat Lunak

Kode Modul J.620100.005.01


Buku Penilaian - Versi 2018 Halaman: 2 dari 19

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.


Perangkat Lunak

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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

menggunakan konsep, terminologi dan pengaturannya

mudah dipahami oleh user. Seperti ikon atau gambar

“Recycle Bin” pada aplikasi mengindikasikan file-file yang

sudah dihapus sebelumnya.

2. Dalam perancangan user interface penggunaan

komponen atau gambar harus tetap atau tidak berubah-

ubah terhadap fungsionalitas atau kegunaan dari sistem.

seperti Tombol “save” untuk melakukan proses

penyimpanan dan bukan penghapusan.

3. Pengguna dapat langsung menyaksikan aksi sistem pada

suatu objek. Seperti pada saat pengguna menekan atau

mengetikkan huruf “A” maka di layar akan langsung

muncul huruf “A”.

a. Consistency

b. Direct Manipulation

c. Familiarity

d. protection

e. Responsiveness

f. Robustness

g. Task Compatibility

h. Uer Compatibility

i. Work Flow

Compatibility

j. WYSIWYG (What You

See Is What You Get),


Perangkat Lunak

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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

NO. SOAL

KUNCI JAWABAN JAWABAN PESERTA PENILAIAN

KETERANGAN K BK

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

Kode Modul J.620100.005.01



NO.

KUK

NO.

SOAL

KUNCI JAWABAN JAWABAN PESERTA PENILAIAN KETERANGAN

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

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01



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. 2) Waktu menggunakan komputer, printer, dan alat lainnya mengikuti


g. Standar Kinerja


yang ditetapkan. 2) Toleransi kesalahan 5% dari hasil yang harus dicapai, tetapi bukan pada


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

Kode Modul J.620100.005.01



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

Kode Modul J.620100.005.01






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 sesuai kebutuhan

Semua kebutuhan sistem sudah dibuat

2. Komponen user interface dialog diidentifikasi sesuai konteks rancangan proses.

Seluruh komponen user interface yang digunakan

3. Urutan dari akses komponen user

interface dialog dijelaskan

Menggunakan metode

diagram state atau statechart

4. Simulasi (mock-up) dari aplikasi yang

akan dikembangkan dibuat

Rancangan

menggunakan salah satu software interface mock-up tool

5. Menu program sesuai dengan rancangan program diterapkan.

Pilihan menu yang sesuai dengan pengguna


Perangkat Lunak

Kode Modul J.620100.005.01



6. Penempatan user interface dialog diatur secara sekuensial.

Urutan usert interface yang jelas

7. Setting aktif-pasif komponen user

interface dialog disesuaikan dengan

urutan alur proses.

Layanan konfirmasi

dalam setiap komponen

user interface

8. Bentuk style dari komponen user interface ditentukan.

Pilihan bentuk atau style

yang sesuai dengan pengguna

9. Menu program sesuai dengan rancangan program diterapkan.

Pilihan menu yang sesuai 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

Kode Modul J.620100.005.01



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 interface secara cermat, tepat, teliti dan sesuai

kebutuhan

1.1

2. Menyajikan hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan sesuai konteks

rancangan proses. sesuai kebutuhan

1.2

3. Menunjukkan urutan dari akses komponen user interface dialog secara cermat, tepat, teliti sesuai

kebutuhan

1.3

4. menyajikan hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan dikembangkan secara

cermat, tepat, teliti sesuai kebutuhan

1.4

5. Menyajikan hasil menu program secara cermat,tepat,

teliti dan sesuai dengan rancangan program 2.1

6. Menyajikan hasil penempatan user interface dialog secara sekuensial

2.2

7. Mengatur Setting aktif-pasif komponen user interface

dialog sesuai dengan urutan alur proses secara cermat, tepat, teliti dan sesuai kebutuhan

2.3

8. Menyajikan hasil penerapan simulasi pada proses

sesungguhnya secara cermat, tepat, teliti dan sesuai kebutuhan

2.4

9. Menyajikan hasil ragam bentuk style dari komponen

user interface secara cermat, tepat, teliti dan sesuai kebutuhan

2.5

B. Catatan:

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

……………………………………………………………………………………………………

Tanda Tangan Peserta : ……………………………………

Tanda Tangan Instruktur : …………………………………


Perangkat Lunak

Kode Modul J.620100.005.01



LAMPIRAN-LAMPIRAN


Perangkat Lunak

Kode Modul J.620100.005.01



A. Lampiran 1 Kunci Jawaban Penilaian Teori

NO. KUK

NO. SOAL

KUNCI JAWABAN JAWABAN PESERTA PENILAIAN

KETERANGAN K BK

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

Kode Modul J.620100.005.01



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

interface secara cermat, tepat, teliti dan sesuai kebutuhan

1.1

2. Menyajikan hasil identifikasi rancangan user interface

secara cermat, tepat, teliti dan sesuai konteks rancangan proses. sesuai kebutuhan

1.2

3. Menunjukkan urutan dari akses komponen user interface dialog secara cermat, tepat, teliti sesuai kebutuhan

1.3

4. menyajikan hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan dikembangkan secara

cermat, tepat, teliti sesuai kebutuhan

1.4

5. Menyajikan hasil menu program secara cermat,tepat, teliti dan sesuai dengan rancangan program

2.1

6. Menyajikan hasil penempatan user interface dialog

secara sekuensial 2.2

7. Mengatur Setting aktif-pasif komponen user interface

dialog sesuai dengan urutan alur proses secara


2.3

8. Menyajikan hasil penerapan simulasi pada proses

sesungguhnya secara cermat, tepat, teliti dan sesuai

kebutuhan

2.4

9. Menyajikan hasil ragam bentuk style dari komponen

user interface secara cermat, tepat, teliti dan sesuai kebutuhan

2.5

Perangkat Lunak - Kemdikbud

Documents

Transcript of Perangkat Lunak - Kemdikbud