User Interface

BUKU INFORMASI

MENGIMPLEMENTASIKAN USER INTERFACE J.620100.005.01

Modul Diklat Berbasis Kompetensi

Kode Modul

Sub-Golongan Pemrograman

J.620100.005.01

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN R.I.

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


Kode Modul


J.620100.005.01

DAFTAR ISI

DAFTAR ISI .......................................... ..................... ........................................... ............................................ ............................... .........

2

BAB I PENDAHULUAN PENDAHU LUAN ........................................... ..................... ........................................... ...................................... .................

4

A.

TUJUAN UMUM (Unit Kompetensi) ......................................... .................... ........................... ......

4

B.

TUJUAN KHUSUS (Elemen Kompetensi) ........................................ .................... ....................

4

BAB II Mengidentifikasi Mengidentifikasi Rancangan User Interface ................ ........................ ................. .............. .....

5

A.

B.

Pengetahuan yang Diperlukan dalam Mengidentifikasi Rancangan User Interface ......................................... ................... ............................................. ................................... ............

5

1.

Rancangan user interface...................... interface ............................................ ............................... .........

6

2.

Komponen user interface ........................................... ..................... ............................... .........

11

3.

Urutan dari akses komponen user interface interfac e.......................... .................... ......

12

4.

Simulasi (mock-up) .......................................... .................... .......................................... ....................

15

Keterampilan yang Diperlukan dalam Mengidentifikasi Rancangan User Interface ......................................... ................... ............................................. ................................... ............

C.

20

Sikap Kerja yang Diperlukan dalam Mengidentifikasi Rancangan User Interface .......................................... .................... ............................................ ................................... .............

20

BAB III Melakukan Implementasi Rancangan User Interface ................. ......................... ........

21

A.

B.

Pengetahuan yang Diperlukan dalam Melakukan Implementasi Rancangan User Interface ............................................ ...................... ...................................... ................

21

1.

Menu program sesuai dengan rancangan ............................. .................... .........

21

2.

Penempatan user interface dialog diatur secara sekuensial ...

23

3.

Setting aktif-pasif komponen user interface............. interface...................... .............. .....

25

4.

Bentuk style dari komponen user interface ditentukan ........... ...........

25

5.

Penerapan simulasi dijadikan suatu proses ............................ ................... .........

26

Keterampilan yang Diperlukan dalam Melakukan Implementasi Rancangan User Interface ......................................... .................... ...................................... .................

C.

27

Sikap Kerja yang Diperlukan dalam Melakukan Implementasi Rancangan User Interface ............................................ ...................... ...................................... ................

27

DAFTAR ALAT DAN BAHAN .......................................... .................... ............................................ ............................... .........

28

A.

DAFTAR PERALATAN/MESIN PERALATAN/ MESIN .......................................... .................... ................................... .............

28

B.


Kode Modul


J.620100.005.01

DAFTAR BAHAN .......................................... .................... ............................................ ............................... .........

28

DAFTAR PUSTAKA ............................................ ...................... ........................................... .......................................... .....................

29

A.

Buku Referensi Referens i ............................................ ...................... ............................................ ............................... .........

29

DAFTAR PENYUSUN PENYUSU N ............................................. ....................... ........................................... ...................................... .................

30


Kode Modul


J.620100.005.01

BAB I PENDAHULUAN

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

B. TUJUAN KHUSUS Adapun tujuan mempelajari unit kompetensi melalui buku informasi pengembangan 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


Kode Modul


J.620100.005.01

BAB II MENGIDENTIFIKASI RANCANGAN USER INTERFACE A. Pengetahuan yang diperlukan dalam Mengidentifikasi Rancangan User Interface Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di hadapannya. Pada desain antarmuka, audien adalah system user . Pengklasifikasian system user secara secara luas baik sebagai pakar atau orang baru – dan – dan baik secara terikat dan tidak terikat. Expert user (dedicated user) adalah pengguna komputer yang berpengalaman berpengalaman yang banyak menghabiskan menghabiskan waktunya waktunya untuk menggunakan 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 (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. digunaka n. Untuk kelompok ini ada satu pendekatan yang dapat dilakukan, yakni pendekatan yang disebut dengan

user-centered design

approach. Cara approach. Cara pendekatan ini berbeda dengan user design approach. Pendekatan secara user centered design adalah perancangan antarmuka yang melibatkan pengguna. Pelibatan pengguna disini tidak diartikan bahwa pengguna harus ikut memikirkan bagaimana implementasinya nanti, tetapi pengguna diajak untuk aktif berpendapat ketika perancang antarmuka sedang menggambar “wajah” antarmuka. Dengan kata lain, perancang dan pengguna duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan pengguna. Pengguna menyampaikan


Kode Modul


J.620100.005.01

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

1 . Rancangan user interface diidentifikasi sesuai kebutuhan Membangun dan merancang User Interface melibatkan metode yang sederhana dan cepat untuk memenuhi kebutuhan klien. Kemudian, mereka memerlukan metode yang tepat untuk mengerjakan detail yang dibutuhkan pelanggan, untuk bekerja sama dengan rekan khusus, dan untuk memberitahukannya kepada perancang. Seperti membangun bangunan, perancang user-interface yang sukses mengetahui bahwa penting untuk menyelesaikan dan melengkapi rancangan sebelum mereka mulai membangunnya, walaupun mereka mengetahui bahwa akan ada banyak perubahan yang perlu dilakukan selama proses konstruksi. Untuk sebuah proyek yang besar, banyak perancang mungkin lebih dibutuhkan. Ukuran dan kepentingan dari setiap proyek akan menentukan tingkat usaha dan peserta proyek. a. User Interaction (Interaksi (Interaksi pengguna) Perancang sistem menghadapi dua masalah penting yaitu: 

Bagaimana informasi dari user bisa disediakan untuk sistem komputer misalnya pada saat input data ?



Bagaimana informasi dari sistem komputer ditampilkan untuk user – hasil – hasil dari pemrosesan data ?

User interface yang baik harus menyatukan interaksi pengguna (user interaction) dan penyajian informasi (information presentation). Ada 5 tipe tipe utama interaksi untuk user interaction: interaction: 1) Direct manipulation Pengoperasian secara langsung: interaksi langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Contoh: Video games.




Kode Modul


J.620100.005.01

Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat



Kekurangan : Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek

2) Menu selection Pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan. Misalnya saat click kanan dan memilih aksi yang dikehendaki. 

Kelebihan: User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah.



Kekurangan:Tidak Kekurangan:Tidak ada logika AND atau OR. Perlu ada struktur menu jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding command language.

3) Form fill-in Pengisian form : Mengisi area-area pada form. Contoh: Stock control. 

Kelebihan: Masukan data yang sederhana. Mudah dipelajari



Kekurangan: Memerlukan banyak tempat di layar. Harus menyesuaikan dengan form manual dan kebiasaan user.

4) Command language Perintah tertulis: Menuliskan perintah yang sudah ditentukan pada program. Contoh: operating system. 

Kelebihan: Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa diterapkan pada terminal yang murah.Kombinasi perintah bisa dilakukan. Misal copy file dan rename nama file.



Kekurangan:

Perintah

harus

dipelajari

dan

diingat

cara

penggunaannya tidak cocok untuk user biasa.Kesalahan pakai perintah

sering

terjadi.

Perlu

ada

sistem

pemulihan

kesalahan.Kemampuan kesalahan.Kemampuan mengetik perlu. 5) Natural language Perintah dengan bahasa alami: Gunakan bahasa alami untuk mendapatkan mendapatkan hasil. Contoh: search engine di Internet.


Kode Modul


J.620100.005.01



Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk dicari oleh search engine Ada kebebasan menggunakan kata-kata.



Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan maka akan memerlukan banyak pengetikan

b. Information Presentation (Penyajian Informasi ) Sistem yang interaktif pasti menyediakan cara untuk menyajikan informasi untuk pengguna. Penyajian informasi bisa berupa penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau disajikan dengan grafik. Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum menentukan bentuk penyajian informasi: 

Apakah pengguna perlu informasi dengan ketepatan tinggi atau data yang saling berhubungan?



Seberapa cepat nilai informasi berubah? Harus ada indikasi perubahan seketika?



Apakah pengguna pengguna harus memberi memberi respon pada pada perubahan? perubahan?



Apakah pengguna perlu melakukan perubahan pada informasi yang disajikan?



Apakah informasi informasi berupa teks teks atau numerik? Nilai Nilai relatif perlu perlu atau tidak? tidak?

Informasi bisa bersifat statis atau dinamis ketika disajikan, masing-masing baik dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula: 1) Static information: Ditentukan saat awal sesi. Tidak berubah selama sesi berjalan. Bisa berupa informasi numeris atau teks Chart di MS-Excel. Disajikan dengan jenis huruf khusus yang mudah dibaca atau diberi highlight dengan warna tertentu seperti pada Gambar 4 atau menggunakan icon yang mewakili 2) Dynamic information: 

Perubahan terjadi selama sesi berlangsung dan perubahan harus dikomunikasikan/ditunjukk dikomunikasikan/ditunjukkan an ke user.




Kode Modul


J.620100.005.01

Bisa berupa informasi numeris atau teks. Contoh : Defragmentation, scanning virus, download

Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan antar gambar, data bisa berubah dengan cepat. Seperti pada Gambar 2, informasi yang sama disajikan dengan dua cara yang berbeda. Jika yang dibutuhkan adalah hubungan antar data pada bulan-bulan tersebut, maka informasi dengan grafik memberikan informasi tentang hubungan tersebut lebih cepat dari pada informasi yang disajikan dengan teks dan numerik. Informasi dengan numerik dapat juga disajikan dengan cara digital atau analog dengan karakteristik sebagai berikut: 



Digital presentation 

Singkat – Singkat – hanya hanya perlu sedikit tempat pada layar



Ketepatan nilai ditunjukkan

Analogue presentation presentation 

Nilai terlihat sambil lalu



Untuk menunjukkan nilai relatif



Mudah melihat data nilai yang berbeda

Gambar 1. Alternatif presentasi Nilai-nilai relatif misalnya seperti pada Gambar 3. Selain nilai yang disajikan relatif, informasinya bersifat dinamis, karena berubah saat sesi berjalan. Untuk nilai digital kita biasanya gunakan untuk menunjukkan jam pada jam


Kode Modul


J.620100.005.01

sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak terjadi secara cepat.

Gambar 2. Informasi yang dinamis dan nilai relatif

Gambar 3. Textual Highlighting Penggunaan Warna pada desain Interface 

Warna menambah dimensi ekstra pada suatu interface dan membantu user memahami struktur yang kompleks



Bisa dipakai untuk mewarnai-terang (higlight) hal-hal khusus

Kesalahan umum dalam penggunaan warna pada desain UI: 

Menggunakan warna untuk mengkomunikasikan arti merah bisa jadi peringatan atau ada kesalahan



Terlalu banyak gunakan macam warna

Dalam menggunakan warna pada desain interface ada beberapa petunjuk yang dapat diikuti seperti berikut ini: 

Hindari penggunaan terlalu banyak warna



Gunakan kode warna untuk mendukung operasi



Pengguna bisa kendalikan warna untuk kode



Desain monochrome kemudian tambahkan warna


Kode Modul


J.620100.005.01



Gunakan warna kode secara konsisten



Hindari pasangan warna yang tidak cocok/norak



Gunakan warna untuk menunjukkan perubahan status

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


Kode Modul


J.620100.005.01

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


Kode Modul


J.620100.005.01

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


Kode Modul


J.620100.005.01

tambahan, interface interface manipulasi langsung langsung sangat bergantung 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. 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 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 mendeskripsikan aktivitas-aktivitas pemakai. User Interface mencakup semua aspek penghubung antara pemakai dengan system. Yang ternasuk hardware, software, pengguna, aksesibilitas, interaksi manusia dan komputer. Untuk mengelola UI digunakan User Interface Management System (UIMS). Focus utama dari UIMS: 

Arsitektur konseptual untuk

struktur dari

system

interaktif yang

dikonsentrasikan dikonsentrasikan pada pemisahan semantic aplikasi dan presentasi. 

Teknik untuk mengimplementasikan aplikasi dan presentasi secara terpisah.



Teknik

pendukung

untuk

menangani,

mengimplementasikan,

dan

mengevaluasi lingkungan interaksi yang sedang berjalan.

a. Komponen logika dari UIMS Secara konseptual, ada 3 komponen utama dari system interaktif aplikasi, presentasi dan control dialog. 

Presentasi Komponen bertanggungjawab atas tampilan interface, termasuk output dan input yang tersedia bagi user.



Control dialog


Kode Modul


J.620100.005.01

Komponen mengatur komunikasi antara presentasi dan aplikasi. 

Interface aplikasi Pandangan dari semantic aplikasi yang disediakan sebagai interface.

b. Kategori ragam dialog Secara umum, ragam dialog interaktif dapat dikelompokkan menjadi 9 kategori, yaitu: 

Dialog berbasis perintah tunggal (command ( command line dialogue )



Dialog berbasis bahasa pemrograman ( programming language dialogue )



Antarmuka berbasis berbasis bahasa alami alami (natural ( natural languange interface )



Sistem Menu



Dialog berbasis pengisian borang (form ( form filling dialogue )



Antarmuka berbasis berbasis ikon



Sistem Penjendelaan (windowing ( windowing system )



Manipulasi Langsung (direct ( direct manipulation )



Antarmuka berbasis berbasis interaksi grafis

4 . Sekuensial User-Interface Dua pendekatan yang digunakan untuk menjelaskan urutan akses komponen dari user interface yaitu diagram transisi dan statechart. a. Diagram Transisi Umumnya

sebuah

diagram

transisi

memiliki

sekumpulan

nodes

yang

merepresentasikan merepresentasikan status sistem sistem dan sekumpulan sekumpulan hubungan 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.


Kode Modul


J.620100.005.01

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

+

wakeup

1 ’

' D 3

‘

2 ’

‘

Start

!

‘

’

3

‘

4 , ? ’ ’ ’

’ ’

‘

5

’

error

help

quit

clean

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

Gambar 5. Contoh diagram transisi tindakan manipulasi-manipulasi. Label tautan menunjukkan seberapa sering setiap transisi dibuat


Kode Modul


J.620100.005.01

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

b. Statecharts Walaupun diagram transisi efektif untuk alur atau aksi dan untuk menelusuri jejak dari status, semua itu dapat dengan cepat menjadi luas dan memusingkan. Modularitas memungkinkan jika nodes ada bersama subgraph, tapi strategi ini bekerja dengan baik hanya secara berurutan. Diagram transisi juga menjadi memusingkan ketika setiap node harus menunjukan hubungan ke sebuah status bantuan, melompat ke status sebelumnya, dan sebuah status keluar. Konkurensi dan sinkronisasi kurang dapat direpresentasikan oleh diagram transisi , walaupun beberapa variasi seperti petri-nets dapat membantu. Alternative yang dapat mengatasi masalah ini adalah statecharts, yang memiliki beberapa kebaikan untuk menspesifikasikan interface . Karena sebuah fitur pengelompokan 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.


Kode Modul


J.620100.005.01

Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan menunjukkan pengelompokan state.

5 . Simulasi (mock-up) dari aplikasi yang akan dibuat Mock-up adalah sebuah bentuk realistis dari sebuah karya digital, bertujuan untuk pemanis atau menjadi contoh nyata bagaimana sebuah karya digital bekerja, sebelum benar – – benar dicetak, biasanya untuk klien atau calon klien dan bertujuan untuk presentasi sebuah karya. Perancang seharusnya membuat dokumentasi dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan. Peranti bantu sederhana yang dapat digunakan misalnya adalah lembar kerja tampilan/LKT tampilan/LKT (screen design work sheet ). ). Pada LKT, disajikan empat bagian: 

Nomor lembar kerja



Bagian tampilan



Bagian navigasi



Bagian keterangan


Kode Modul


J.620100.005.01

Gambar 7. Contoh screen design work sheet

a. Interface mockup tools Dalam membuat membuat sketsa user interface diperlukan waktu waktu yang cepat sebagai 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 didistribusikan melalui Web. Berikut ini beberapa contoh interface mokup tool. 1)

Balsamiq

Balsamiq Mockup Tools merupakan aplikasi terbaik menurut saya, untuk membuat sketsa gambar Blueprint sebuah blog ataupun website. Cara penggunaannya pun cukup mudah, hanya tinggal tarik dan letakan. Jika ingin menambahkan gambar tinggal drop and drag saja sesuai keinginan. Fitur lainnya pun dengan mudah kita gunakan.


Kode Modul


J.620100.005.01

Gambar 8. Balsamiq

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

Gambar 9. Microsoft Visio

b. Software-engineering Software-engineering tools Programer yang berpengalaman terkadang membangun user –interface –interface dengan bahasa pemrograman dengan tujuan umum seperti Java, C #, atau C ++, namun pendekatan ini memberikan cara untuk menggunakan perangkat lunak yang secara


Kode Modul


J.620100.005.01

khusus disesuaikan dengan pengembangan 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, kadangkadang disebut sistem manajemen user-interface atau alat bangunan berbasis model. Sebagian besar jika tidak semua aplikasi dapat dibangun kembali dengan cepat menggunakan alat yang ada. Namun, alat ini saat ini hanya tersedia untuk kelas aplikasi kecil, seperti database front-ends (Microsoft Access, Sybase PowerDesigner); atau tetap menjadi prototip penelitian. Gambar 10 merupakan beberapa contoh IDE.

Gambar 10 Contoh software engineering tool Microsoft Visual Studio

Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi dalam native code (dalam (dalam bentuk bahasa mesin yang berjalan di atas Windows) ataupun managed code (dalam (dalam bentuk Microsoft Intermediate Language di Language di atas .NET Framework). Selain itu, Visual Studio juga dapat digunakan untuk mengembangkan aplikasi Silverlight Silverlight,, aplikasi Windows Mobile (yang berjalan di atas .NET Compact Framework).


Kode Modul


J.620100.005.01

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

Tabel 1 Empat layer perangkat lunak yang tersedia untuk membangun user-interface Software Layers 4 Application

3 Appication Framework

Visual Tools Model-Based

Microsoft Access,

BuildingTools

Sybase PowerDesigner

Copceptual Building Tools

Macromedia Director

Specialized Language 2 GUIToolkit

Contoh

Microsoft MFC Interface Builder

Eclipse, Borland Jbuilder Microsoft Visual Studio

1 Windowing System

Resource Editor

Microsoft Win32/GDI+ Apple Quartz Quartz X11 Windowing System


Kode Modul


J.620100.005.01

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

C. Sikap kerja yang diperlukan dalam Mengidentifikasi Rancangan User Interface 1. Menunjukkan hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan sesuai kebutuhan 2. Menyajikan hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan sesuai konteks rancangan proses. sesuai kebutuhan 3. Menunjukkan urutan dari akses komponen user interface dialog secara cermat, tepat, teliti sesuai kebutuhan 4. menyajikan hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan dikembangkan dikembangkan secara cermat, cermat, tepat, teliti teliti sesuai kebutuhan kebutuhan


Kode Modul


J.620100.005.01

BAB III MELAKUKAN IMPLEMENTASI RANCANGAN USER INTERFACE A. Pengetahuan yang diperlukan dalam melakukan implementasi rancangan user interface Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di hadapan. Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa cara: 

Membuat sketsa pada kertas



Menggunakan Menggunakan piranti prototipe GUI,



Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain,



Menggunakan peranti bantu yang disebut CASE (Computer Aided Aided Software Engineering ). ).

1 . Menu program sesuai dengan rancangan Mengimplementasi 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 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. dikembangkan. Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Menu adalah daftar sejumlah pilihan pilihan dalam jumlah terbatas, terbatas, yang biasanya biasanya berupa suatu kalimat atau kumpulan beberapa kata.


Kode Modul


J.620100.005.01

Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu, dikenal dua jenis sistem menu: a. Sistem menu datar Dalam sistem menu datar, kemampuan dan fasilitas yang dimiliki oleh suatu program aplikasi akan ditampilkan secara lengkap, dan biasanya menggunakan kalimat-kalimat 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 dikelompokkan menurut kategori tertentu atau menurut cara tertentu sehingga mereka membentuk semacam hirarki pilihan. Pada hirarki paling tinggi, pilihanpilihan 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.


Kode Modul


J.620100.005.01

Gambar 13. Sistem menu tarik Keuntungan dan kerugian penggunaan sistem menu adalah: Keuntungan

Kerugian



Memerlukan sedikit pengetikan



Seringkali lambat



Beban memori rendah



Memakan ruang layar (khususnya



Struktur

terdefinisikan

dengan

baik 

untuk menu datar) 

Tersedia piranti bantu CAD

Tidak

cocok

ntuk

aktifitas

pemasukan data 

Tidak

cocok

untuk

dialog

terinisiasi pengguna 

Tidak

cocok

untuk

dialog

terinisiasi campuran

c. Penempatan user interface dialog diatur secara sekuensial Perancangan dialog, seperti halnya perancangan sistem yang lain, harus dikerjakan secara top-down. Proses perancangannya dapat dikerjakan secara stepwise refinement sebagai sebagai berikut: 

Pemilihan Ragam Dialog Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna mula, menengah, atau pengguna ahli), tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah program tunggal, atau sekumpulan sekumpula n ragam dialog yang satu sama lain saling mendukung.




Kode Modul


J.620100.005.01

Perancangan Struktur Dialog Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai. Dalam tahap ini pengguna banyak dilibatkan, sehingga pengguna langsung mendapatkan umpan balik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan ia digunakan.



Perancangan Format Pesan Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang mengharuskan pengguna untuk memasukkan data ke dalam komputer juga harus dipertimbangkan dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah dengan

mengurangi

pengetikan

yang

tidak

perlu

dengan

cara

mengefektifkan penggunaan tombol. 

Perancangan Penanganan Kesalahan Bentuk-bentuk penanganan kesalahan yang dapat dilakukan antara lain adalah: 

Validasi

pemasukan

atau:

misalnya

jika

pengguna

harus

memasukkan bilangan positif, sementara ia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang pemasukan data tersebut. 

Proteksi pengguna: program memberi peringatan ketika pengguna melakukan

suatu

tindakan

secara

tidak

sengaja,

misalnya

penghapusan berkas. 

Pemulihan

dari

kesalahan:

tersedianya

mekanisme

untuk

membatalkan membatalkan tindakan yang baru saja dilakukan. 

Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu.

d. Jaring Semantik Tampilan Digunakan untuk mempermudah bagi pemrogram pada saat ia menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan pada Gambar 14 terdiri atas dua komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang menyebabkan


Kode Modul


J.620100.005.01

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

Gambar 14. Jaring semantik tampilan

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

3 . Penentuan Bentuk Style Komponen User-Interface Sebuah aplikasi yang berbasis antarmuka harus mampu membantu para user dalam menyelesaikan tugasnya. 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.


Kode Modul


J.620100.005.01

Gambar 15. Contoh penentuan style komponen user interface

4 . Penerapan Mock-up Dalam Aplikasi Sebuah aplikasi sistem sudah pasti mengapdopsi sistem manualnya dan di dalamnya tentunya terdapat urutan kerja dalam menyelesaikan pekerjaan. Dalam sebuah aplikasi, software engineer harus memikirkan berbagai rangkaian pekerjaan yang ada pada sebuah sistem. Jangan sampai user mengalami kesulitan dalam menyelesaikan pekerjaannya karena user mengalami kebingungan ketika urutan pekerjaan yang ada pada sistem manual tidak ditemukan pada software yang dihadapinya. 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.


Kode Modul


J.620100.005.01

Gambar 16. Contoh user interface

B. Keterampilan yang diperlukan dalam melakukan implementasi implement asi rancangan user interface 1

Memilih tampilan menu yang sesuai dengan rancangan program yang diterapkan.

2

Menata urutan user interface

3

Mengatur aktif-pasif komponen user interface dialog yang disesuaikan dengan urutan alur proses

4

Menentukan bentuk style komponen user interface

5

Membuat simulasi user interface dalam sebuah aplikasi sederhana.

C. Sikap kerja yang diperlukan dalam melakukan implementasi rancangan user interface Harus bersikap secara: 1. Menyajikan hasil menu program secara cermat,tepat, teliti dan sesuai dengan rancangan program 2. Menyajikan hasil penempatan user interface dialog secara sekuensial 3. Mengatur Setting aktif-pasif komponen user interface dialog sesuai dengan urutan alur proses secara cermat, tepat, teliti dan sesuai kebutuhan


Kode Modul


J.620100.005.01

4. Menyajikan hasil penerapan simulasi pada proses sesungguhnya secara cermat, tepat, teliti dan sesuai kebutuhan 5. Menyajikan hasil ragam bentuk style dari komponen user interface secara cermat, tepat, teliti dan sesuai kebutuhan

Daftar Alat Dan Bahan A. Daftar Peralatan/Mesin Peralatan/Mesin

No.

Nama Peralatan/Mesin 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. 1. 2. 3. 4. 5. 6. 7. 8.

Nama Bahan

Keterangan Setiap peserta


Kode Modul


J.620100.005.01

No.

Nama Bahan

9.

Keterangan Setiap peserta

DAFTAR PUSTAKA A. BukuReferensi

1. Shneiderman Ben. (2002). Designing the User Interface , 4rd Ed.., Addison Wesley. 2. Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001


Kode Modul


J.620100.005.01

DAFTAR PENYUSUN

No.

Nama

Profesi 1. Instruktur …

1.

..

2. Asesor … 3. Anggota …

User Interface

Recommend Documents