modul pembelajaran user interface pada bahasa pemprograman java
MENGIDENTIFIKASI
RANCANGAN USER INTERFACE
Pengetahuan yang diperlukan dalam Mengidentifikasi Rancangan User Interface
Pengetahuan yang diperlukan dalam Mengidentifikasi Rancangan User Interface
Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang
menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk
mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu
tampilan yang ada di hadapannya. Pada desain antarmuka, audien adalah system user. Pengklasifikasian system user secara luas baik sebagai
pakar atau orang baru – dan baik secara terikat dan tidak terikat. Expert user (dedicated user) adalah pengguna komputer yang
berpengalaman yang banyak menghabiskan waktunya untuk menggunakan program
aplikasi khusus. Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam dua
kategori besar, yakni program aplikasi untuk keperluan khusus dengan pengguna
yang khusus pula (special purpose
software) dan program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software), yang juga
sering dikenal dengan sebutan public software. Karena perbedaan pada calon
pengguna, maka perancang program antarmuka
harus benar-benar memperhatikan hal ini. Pada kelompok pertama, yakni pada program aplikasi untuk keperluan
khusus, misalnya program aplikasi untuk inventori gudang, pengeloaan data
akademis mahasiswa, pelayanan reservasi hotel, dan program-program aplikasi
serupa, kelompok calon pengguna yang akan memanfaatkan program aplikasi
tersebut dapat dengan mudah diperkirakan, baik dalam hal keahlian pengguna,
maupun ragam antarmuka yang akan digunakan. Untuk kelompok ini ada satu
pendekatan yang dapat dilakukan, yakni pendekatan yang disebut dengan user-centered
design approach. Cara pendekatan ini berbeda dengan user design approach. Pendekatan secara user centered design adalah
perancangan antarmuka yang melibatkan pengguna. Pelibatan pengguna disini tidak
diartikan bahwa pengguna harus ikut memikirkan bagaimana implementasinya nanti,
tetapi pengguna diajak untuk aktif berpendapat ketika perancang antarmuka
sedang menggambar “wajah” antarmuka. Dengan kata lain, perancang dan pengguna
duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan pengguna.
Pengguna menyampaikan keinginannya, sementara perancang menggambar kenginan pengguna tersebut
sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diingnkan oleh
pengguna, serta kerumitan implementasinya. Dengan cara seperti ini, pengguna
seolah-olah sudah mempunyai gambaran nyata tentang antarmuka yang nanti akan
digunakan.
1. Rancangan user interface diidentifikasi sesuai kebutuhan
Membangun
dan merancang User Interface melibatkan metode yang sederhana dan cepat untuk
memenuhi kebutuhan klien. Kemudian, mereka memerlukan metode yang tepat untuk
mengerjakan detail yang dibutuhkan pelanggan, untuk bekerja sama dengan rekan
khusus, dan untuk memberitahukannya kepada perancang.
Seperti membangun
bangunan, perancang user-interface yang sukses mengetahui
bahwa penting untuk menyelesaikan dan melengkapi rancangan sebelum
mereka mulai membangunnya, walaupun mereka mengetahui bahwa akan ada banyak
perubahan yang perlu dilakukan selama proses konstruksi. Untuk sebuah proyek
yang besar, banyak perancang mungkin lebih dibutuhkan. Ukuran dan kepentingan
dari setiap proyek akan menentukan tingkat usaha dan peserta proyek.
a. User
Interaction (Interaksi pengguna)
Perancang sistem
menghadapi dua masalah penting yaitu:
ü Bagaimana
informasi dari user bisa disediakan untuk sistem komputer misalnya pada saat
input data ?
ü Bagaimana
informasi dari sistem komputer ditampilkan untuk user – hasil dari pemrosesan
data ?
User
interface yang baik harus menyatukan interaksi pengguna (user interaction) dan
penyajian informasi (information presentation). Ada 5 tipe utama interaksi
untuk user interaction:
1)
Direct manipulation
Pengoperasian
secara langsung: interaksi langsung dengan objek pada layar. Misalnya delete
file dengan memasukkannya ke trash.Contoh: Video games.
§ Kelebihan:
Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap
aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat
§ Kekurangan
: Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem
komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek
2)
Menu selection
Pilihan
berbentuk menu: Memilih perintah dari daftar yang disediakan. Misalnya saat
click kanan dan memilih aksi yang dikehendaki.
§ Kelebihan:
User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah.
§ Kekurangan:Tidak
ada logika AND atau OR. Perlu ada struktur menu jika banyak pilihan. Menu
dianggap lambat oleh expert user dibanding command language.
3)
Form fill-in
Pengisian form :
Mengisi area-area pada form. Contoh: Stock control.
§ Kelebihan: Masukan
data yang sederhana. Mudah dipelajari
§ Kekurangan:
Memerlukan banyak tempat di layar. Harus menyesuaikan dengan form manual dan
kebiasaan user.
4)
Command language
Perintah tertulis:
Menuliskan perintah yang sudah ditentukan pada program.
Contoh: operating
system.
§ Kelebihan:
Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa
diterapkan pada terminal yang murah.Kombinasi perintah bisa dilakukan. Misal
copy file dan rename nama file.
§ Kekurangan:
Perintah harus dipelajari dan diingat cara penggunaannya tidak cocok untuk user
biasa.Kesalahan pakai perintah sering terjadi. Perlu ada sistem pemulihan
kesalahan.Kemampuan mengetik perlu.
5)
Natural language
Perintah dengan
bahasa alami: Gunakan bahasa alami untuk mendapatkan
hasil. Contoh:
search engine di Internet.
§ Kelebihan:
Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat)
misalnya kata kunci yang kita tentukan untuk dicari oleh search engine Ada
kebebasan menggunakan kata-kata.
§ Kekurangan:
Tidak semua sistem cocok gunakan ini. Jika digunakan maka akan memerlukan
banyak pengetikan
b.
Information
Presentation (Penyajian Informasi )
Sistem yang interaktif pasti menyediakan cara untuk menyajikan informasi
untuk pengguna. Penyajian informasi bisa berupa penyajian langsung dari input
yang diberikan (seperti teks pada word processing) atau disajikan dengan
grafik.
Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum
menentukan bentuk penyajian informasi:
ü Apakah
pengguna perlu informasi dengan ketepatan tinggi atau data yang saling
berhubungan?
ü Seberapa
cepat nilai informasi berubah? Harus ada indikasi perubahan seketika?
ü Apakah pengguna
harus memberi respon pada perubahan?
ü Apakah
pengguna perlu melakukan perubahan pada informasi yang disajikan?
ü Apakah
informasi berupa teks atau numerik? Nilai relatif perlu atau tidak? Informasi
bisa bersifat statis atau dinamis ketika disajikan, masing-masing baik dengan
karakteristik yang berbeda dan kebutuhan yang berbeda pula:
1) Static information:
Ditentukan saat awal sesi. Tidak berubah selama sesi berjalan. Bisa
berupa informasi numeris atau teks Chart di MS-Excel. Disajikan dengan jenis
huruf khusus yang mudah dibaca atau diberi highlight dengan warna tertentu
seperti pada Gambar 4 atau menggunakan icon yang mewakili
2) Dynamic information:
§ Perubahan
terjadi selama sesi berlangsung dan perubahan harus dikomunikasikan/ditunjukkan
ke user.
§ Bisa
berupa informasi numeris atau teks. Contoh : Defragmentation, scanning virus,
download
Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat
sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan antar
gambar, data bisa berubah dengan cepat. Seperti pada Gambar 2, informasi yang
sama disajikan dengan dua cara yang berbeda. Jika yang dibutuhkan adalah
hubungan antar data pada bulan-bulan tersebut, maka informasi dengan grafik
memberikan informasi tentang hubungan tersebut lebih cepat dari pada informasi
yang disajikan dengan teks dan numerik. Informasi dengan numerik dapat juga
disajikan dengan cara digital atau analog dengan karakteristik sebagai berikut:
§ Digital presentation
Ø Singkat – hanya
perlu sedikit tempat pada layar
Ø Ketepatan nilai ditunjukkan
§ Analogue
presentation
Ø Nilai terlihat
sambil lalu
Ø Untuk menunjukkan
nilai relatif
Ø Mudah melihat data
nilai yang berbeda
Gambar 1. Alternatif presentasi
Nilai-nilai relatif misalnya seperti pada Gambar 3. Selain nilai yang
disajikan relatif, informasinya bersifat dinamis, karena berubah saat sesi
berjalan. Untuk nilai digital kita biasanya gunakan untuk menunjukkan jam pada
jam. 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
ü 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
ü Gunakan warna kode
secara konsisten
ü Hindari pasangan
warna yang tidak cocok/norak
ü Gunakan warna untuk
menunjukkan perubahan status
1.
Prinsip perancangan
User Interface
User
interface desain adalah desain komputer, peralatan, mesin,
perangkat komunikasi mobile, aplikasi
perangkat lunak, dan situs web yang menitikberatkan pada pengalaman pengguna
dan interaksi. Tujuan dari user interface
design adalah membuat interaksi pengguna lebih sederhana dan efisien.
Prinsip prinsip dalam perancangan user interface antara lain sebagai berikut:
1. User Compatibility
Perancang sistem harus benar-benar paham tentang pengetahuan, cara
berpikir dan cara menerima informasi dari user
sehingga sistem yang akan digunakan oleh user
dapat membuat user lebih produktif.
Harus diperhatikan juga adalah bahwa karakteristik perancang (designer) atau developer tidak sama dengan karakteristik user.
2. Product
Compatibility
Selalu memperhatikan dan mempertahankan kompatibilitas antar produk,
misalnya mampu mengorbankan User
Interface yang memungkinkan sistem lebih kompatibel.
3. Task Compatibility
Rancangan interface sistem
harus sesuai dengan tugas dari user. User tidak boleh mengalami kesulitan
untuk menggunakannya. Hal tersebut dapat menyebabkan aplikasi yang dibuat tidak
akan terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user.
4. Work Flow
Compatibility
Selalu
mengorganisasikan setiap fungsi sesuai dengan kategori fungsinya sehingga dapat
memfasilitasi segala perubahan tugas user.
5. Consistency
Sistem harus konsisten terhadap fungsionalitas atau kegunaan dari sistem
tersebut. Contoh sederhananya adalah ketika user
menekan tombol “save” maka proses yang terjadi adalah penyimpanan bukan hapus
data.
6. Familiarity
Menggunakan konsep, terminologi dan pengaturannya yang mudah dipahami
oleh user. Seperti ikon atau gambar “Recycle
Bin” pada Sistem
Operasi
Windows, ini membuktikan bahwa fokus user
terhadap gambar tersebut adalah file-file
yang sudah dihapus sebelumnya.
7. Simplicity
Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu gunakan system default pada aplikasi yang
dirancang. Maksudnya adalah sediakan dan utamakanlah fungsi – fungsi yang
benar-benar sesuai dengan tugas dari user.
Usahakan agar tidak menampilkan semua fungsionalitasnya.
8.
Direct Manipulation
user harus
dapat langsung menyaksikan aksi sistem pada suatu objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf “A”
maka di layar akan langsung muncul huruf “A”.
Control: Sistem yang digunakan oleh user
jangan membuatnya frustasi dan dikontrol. Seperti memberikan komentar pada saat
user melakukan kesalahan dengan
bahasa yang tidak membuat user merasa
dikontrol oleh sistem tersebut.
WYSIWYG (What You See Is What You
Get), artinya adanya korespondensi satu ke satu antara informasi di layar
dengan informasi di printed-output
atau file. Contoh, pada saat membuat
laporan menggunakan Microsoft
Office lalu mencetaknya (print out) laporan tersebut, maka hasil print out harus sama dengan yang ada pada
lembar kerja Microsoft Office.
10. Flexibility
Prinsip ini merupakan prinsip yang sangat penting bagi user dengan keterbatasan fisik. Ini
berarti mengijinkan banyak kontrol dari user
yang mendukung untuk menggunakan aplikasi yang kita rancang dan mampu
mengakomodir kemampuan user yang
lain. Seperti aplikasi yang dapat didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).
11. Responsiveness
Sistem
harus selalu merespon dengan cepat apa yang di inputkan oleh user.
Seperti menampilkan Progress Bar.
12. Invisible Technology
Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat
direkomendasikan dalam membuat User
Interface. Sehingga user tidak
memiliki rasa khawatir dan ketakutan untuk menggunakan aplikasinya.
13. Robustness
Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun
tidak disengaja dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang baik
untuk mengimplementasikan prinsip
ini.
14. Protection
Prinsip ini berbeda dengan prinsip Robustness,
karena pada prinsip ini sistem seharusnya memproteksi kesalahan-kesalahan umum
manusia. Seperti pada saat kita menutup lembar kerja Microsoft Office yang
belum kita simpan sebelumnya, maka Office akan secara otomatis memberikan
konfirmasi untuk menyimpannya atau tidak.
15. Ease of Learning
Antar muka sistem harus mudah dipelajari bagi user novice (pengguna umum). Hal ini akan memberikan motivasi
kepada user tersebut untuk
menggunakannya.
16. Ease of Use
Antar muka sistem harus mudah digunakan untuk expert user. Sehingga sistem yang dibangun tidak hanya dipakai
untuk novice user tetapi bisa juga
dipakai untuk user yang sudah ahli
(berpengalaman).
3.
Komponen user
interface dialog
User-action notation (UAN) Pendekatan tata bahasa dan diagram untuk
spesifikasi cocok untuk menu, perintah, atau pengisian formulir, tapi semua itu
tidak cocok untuk interface manipulasi langsung, karena semua itu tidak dapat
mencakupi variasi aktivitas dan timbal balik visual yang disediakan system.
Sebagai
tambahan, interface manipulasi langsung sangat bergantung pada konteks
untuk menentukan arti dari sebuah masukan. Sebagai contoh, sebuah penekanan
pada mouse dapat berarti pemilihan sebuah file, membuka sebuah window, atau
memulai sebuah aplikasi, tergantung di mana kursor berada ketika penekanan
diaplikasikan. Dengan konteks yang sama, sulit untuk mengkarakterisasikan hasil
dari pemindahan ikon, karena hal ini tergantung dari apa yang dipindahkan.
UAN memiliki symbol yang spesifik untuk interface untuk
aktivitas-aktivitas, dan untuk konkurensi dan timbal balik. Simbol-simbol ini
dipilih untuk merepresentasikan aktivitas-aktivitas. UAN tidak dapat
menspesifikasikan dengan baik grafik yang lengkap, seperti menggambarkan
programm atau animasi, hubungan antara tugas, dan interupsi dari behaviour.
Tapi bagaimanapun, UAN adalah sebuah pendekatan tingkat tinggi dan kuat untuk
menspesifikasikan behaviour sistem dan mendeskripsikan aktivitas-aktivitas
pemakai.
User Interface
mencakup semua aspek
penghubung antara pemakai
dengan
system. Yang
ternasuk hardware, software,
pengguna, aksesibilitas, interaksi
manusia dan komputer. Untuk mengelola UI digunakan User Interface
Management System
(UIMS).
Focus utama dari
UIMS:
ü Arsitektur
konseptual untuk struktur dari system interaktif yang dikonsentrasikan pada
pemisahan semantic aplikasi dan presentasi.
ü Teknik
untuk mengimplementasikan aplikasi dan presentasi secara terpisah.
ü Teknik
pendukung untuk menangani, mengimplementasikan, dan mengevaluasi lingkungan
interaksi yang sedang berjalan.
a.
Komponen logika dari
UIMS
Secara
konseptual, ada 3 komponen utama dari system interaktif aplikasi, presentasi
dan control dialog.
ü Presentasi
Komponen
bertanggungjawab atas tampilan interface, termasuk output dan input yang
tersedia bagi user.
ü Control dialog
Komponen mengatur
komunikasi antara presentasi dan aplikasi.
ü Interface aplikasi
Pandangan dari
semantic aplikasi yang disediakan sebagai interface.
b.
Kategori ragam
dialog
Secara
umum, ragam dialog interaktif dapat dikelompokkan menjadi 9 kategori, yaitu:
Ø Dialog berbasis
perintah tunggal (command line dialogue)
Ø Dialog berbasis
bahasa pemrograman (programming language
dialogue)
Ø Antarmuka berbasis
bahasa alami (natural languange interface)
Ø Sistem Menu
Ø Dialog berbasis
pengisian borang (form filling dialogue)
Ø Antarmuka berbasis
ikon
Ø Sistem Penjendelaan
(windowing system)
Ø Manipulasi Langsung
(direct manipulation)
Ø Antarmuka berbasis
interaksi grafis
4.
Sekuensial
User-Interface
Dua pendekatan yang digunakan untuk menjelaskan urutan akses komponen
dari user interface yaitu diagram transisi dan statechart.
a. Diagram Transisi
Umumnya sebuah diagram transisi memiliki sekumpulan nodes yang
merepresentasikan status sistem dan sekumpulan hubungan antara nodes yang
merepresentasikan transisi yang mungkin. Setiap hubungan diberi label dengan
aktivitas user yang memilih hubungan tersebut dan respon computer yang mungkin
ada. Diagram transisi yang sederhana dalam Gambar 4 merepresentasikan sejumlah
sistem pemilihan menu untuk tampilan sebuah restoran yang menunjukan apa yang
terjadi ketika pemakai memilih sejumlah pilihan:
1) Menambah sebuah
restoran ke daftar.
2) Menyediakan sebuah
tampilan dari sebuah restoran.
3) Membaca sebuah
tampilan.
4) Memperoleh bantuan
5) Keluar, atau
karakter lainnya (pesan kesalahan).
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
Sayangnya, diagram transisi tidak sesuai dengan system yang semakin
berkembang, dan terlalu banyak transisi yang dapat menyebabkan tampilan yang
rumit. Peningkatannya dapat dilakukan dengan menggantikan sebuah node dari
transisi status dengan sebuah tampilan cetakan untuk memberikan tampilan bahwa
ada perpindahan melalui tampilan dan kotak dialog. Penjelasan semacam ini
berguna dalam perancangan dan pelatihan. Perancangan untuk interface dengan
ratusan kotak dialog, atau website dengan ratusan tampilan, lebih mudah untuk
dipelajari ketika digunakan.
b. Statecharts
Walaupun diagram transisi efektif untuk alur atau aksi dan untuk
menelusuri jejak dari status, semua itu dapat dengan cepat menjadi luas dan
memusingkan. Modularitas memungkinkan jika nodes ada bersama subgraph, tapi
strategi ini bekerja dengan baik hanya secara berurutan. Diagram transisi juga
menjadi memusingkan ketika setiap node harus menunjukan hubungan ke sebuah
status bantuan, melompat ke status sebelumnya, dan sebuah status keluar. Konkurensi dan sinkronisasi kurang dapat direpresentasikan oleh diagram transisi,
walaupun beberapa variasi seperti petri-nets dapat membantu. Alternative
yang dapat mengatasi masalah ini adalah statecharts, yang memiliki beberapa
kebaikan untuk menspesifikasikan interface . Karena sebuah fitur pengelompokan
ditawarkan melalui lingkaran yang bersarang, transisi yang berulang dapat
difaktorkan ke luar lingkaran.
Penambahan lainnya dalam statecharts seperti konkurensi, kejadian dari
eksternal, dan aksi dari pemakai direpresentasikan di dalam Statemaster, yang
merupakan sebuah peralatan User Interface berdasarkan statecharts. Statecharts
juga dapat diperluas dengan alur data dan spesifikasi batasan.
Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan
menunjukkan
pengelompokan state.
5. Simulasi (mock-up) dari aplikasi yang akan
dibuat
Mock-up adalah sebuah bentuk realistis dari sebuah karya digital,
bertujuan untuk pemanis atau menjadi contoh nyata bagaimana sebuah karya
digital bekerja, sebelum benar – benar dicetak, biasanya untuk klien atau calon
klien dan bertujuan untuk presentasi sebuah karya. Perancang seharusnya membuat
dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan. Peranti
bantu sederhana yang dapat digunakan misalnya adalah lembar kerja tampilan/LKT
(screen design work sheet). Pada LKT,
disajikan empat bagian:
Ø Nomor lembar kerja
Ø Bagian tampilan
Ø Bagian navigasi
Ø Bagian keterangan
Gambar 7. Contoh screen design
work sheet
a. Interface mockup tools
Dalam membuat sketsa user interface diperlukan waktu yang cepat sebagai
tahap awal desain untuk mengeksplorasi banyak alternatif, untuk memungkinkan
komunikasi dalam tim desain, dan untuk menyampaikan kepada klien seperti apa
produk itu. User interface dapat dibuat dengan kertas dan pensil, pengolah
kata, atau perangkat lunak presentasi slide-show (seperti Microsoft PowerPoint
atau Apple Keynote). Perancang yang ahli juga telah membuat prototip antarmuka
pengguna dengan alat konstruksi multimedia, seperti Macromedia Director, Flash
MX Dreamweaver, visio, balsamiq, iplotz, wireframe dan lain-lain. Program ini
dapat dengan cepat menghasilkan program animasi atau bahkan interaktif dan
didistribusikan melalui Web. Berikut ini beberapa contoh interface mokup tool.
1)
Balsamiq
Balsamiq Mockup Tools
merupakan aplikasi terbaik menurut saya, untuk membuat sketsa gambar Blueprint
sebuah blog ataupun website. Cara penggunaannya pun cukup mudah, hanya tinggal
tarik dan letakan. Jika ingin menambahkan gambar tinggal drop and drag saja
sesuai keinginan. Fitur lainnya pun dengan mudah kita gunakan.
Gambar 8. Balsamiq
2) Microsoft Visio
Microsoft Visio ini sangatlah mudah untuk digunakan, fitur yang lengkap
membuat kita tidak perlu lagi mencari gambar yang ingin kita gunakan dalam
pembuatan mockup sebuah website ataupun blog. Kelebihan Visio adalah kemampuan
diagram teknis dari pada pembuatan mockup.
Gambar 9. Microsoft Visio
b. Software-engineering tools
Programer yang berpengalaman terkadang membangun user –interface dengan
bahasa pemrograman dengan tujuan umum seperti Java, C #, atau C ++, namun
pendekatan ini memberikan cara untuk menggunakan perangkat lunak yang secara
Gambar 10 Contoh
software engineering tool Microsoft Visual Studio
Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi
dalam native code (dalam bentuk bahasa mesin yang berjalan di atas Windows)
ataupun managed code (dalam bentuk Microsoft Intermediate Language di atas .NET Framework). Selain itu, Visual Studio juga dapat digunakan
untuk mengembangkan aplikasi Silverlight,
aplikasi Windows Mobile (yang berjalan di atas .NET Compact Framework).
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
B.
Keterampilan
yang diperlukan dalam Mengidentifikasi Rancangan User Interface
1. Mengidentifikasi
kebutuhan rancangan user interface
2. Mengidentifikasi
komponen user interface yang akan digunakan
3. Mengatur urutan
akses komponen user interface
4. Membuat
simulasi mockup menggunakan interface mockup tool dan software engineering
tool.
C.
Sikap
kerja yang diperlukan dalam Mengidentifikasi Rancangan User Interface
1. Menunjukkan
hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan
sesuai kebutuhan
2. Menyajikan
hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan
sesuai konteks rancangan proses. sesuai kebutuhan
3. Menunjukkan
urutan dari akses komponen user interface dialog secara cermat, tepat, teliti
sesuai kebutuhan
4. menyajikan
hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan
dikembangkan secara cermat, tepat, teliti sesuai kebutuhan.
Comments
Post a Comment