G U I

GUI

 

GUI (Graphical User Interface), adalah antarmuka pada sistem operasi atau komputer yang menggunakan menu grafis agar mempermudah para pengguna-nya untuk berinteraksi dengan komputer atau sistem operasi.

Jadi, GUI merupakan antarmuka pada sistem operasi komputer yang menggunakan menu grafis. Menu grafis ini maksudnya terdapat tampilan yang lebih ditekankan untuk membuat sistem operasi yang user-friendly agar para pengguna lebih nyaman menggunakan komputer. Menu grafis itu ya seperti ada grafis-grafis atau gambar-gambar dan tampilan yang tujuannya untuk memudahkan para pengguna menggunakan sistem operasi.

gambar : KDE pada Mandriva

 

Contoh sistem operasi yang menggunakan GUI adalah Linux dengan distro Mandriva menggunakan Desktop Environment KDE (Lihat juga Pengertian Desktop Environment), dan juga sistem operasi Windows 7 Ultimate yang menggunakan GUI-nya sendiri. 

 

Kelebihan dan Kekurangan GUI
 Kelebihan GUI :
1. Desain Grafis lebih menarik.
2. GUI memungkinkan user untuk berinteraksi dengan komputer secara lebih baik.
3. Memudahkan pengguna.
4. Menarik minat pengguna.
5. Resolusi gambar yang tinggi.

 Kekurangan GUI :
1. Memakan memory yang sangat besar.
2. Bergantung pada perangkat keras.
3. Membutuhkan banyak tempat pada layar komputer.
4. Tidak fleksibel.                                                                                              

 Contoh aplikasi berbasis Gui

Kalkulator sederhana

 


Terlebih dahulu untuk menjalankan aplikasi ini daftarkan variable yang akan digunakan:


Untuk menampilkan pallete pada form GUI caranya adalah dengan mendrag komponen  yang telah disediakan pada GUI Java. untuk pallete angka menggunakan JButton, dan untuk tampilan nilai menggunakan JTextField. Langkah pertama untuk menampilkan nilai pada setiap button nilai  yang diklik, yakni dengan cara klik kanan pallete JButton:

Kemudian untuk menjalankan dan menampilkan nilai pada setiap button nilai yg telah dibuat, langkah selanjutnya klik kanan Button seperti contoh diatas pada Button7, Pilih Events, Klik Action kemudian actionPerformed dan event souce nya:

Adapun untuk button nilai operasi matematika yakni  operasi sederhana “+”,”-”,”x” dan “/” menggunakan event dibawah ini

Langkah selanjutnya yakni bagaimana event untuk operasi pada kalkulator sederhana ini. Klik kanan pada Button “=”, pilih Events, Klik Action kemudian action Performed:
 

Referensi: http://belajar-komputer-mu.com
                 http://www.poss-upi.org
                http://pamungkazer.wordpress.com/tag/gui-kelebihan-dan-kekurangan-gui-pengembangan-aplikas-gui-php-aplikasi-gu

DESAIN INTERFACE

Dialog Desain

Dialog dalam arti umum adalah percakapan antara dua kelompok atau lebih. Sedangkan dialog dalam konteks perencanaan user interface adalah struktur dari percakapan antara user dan sistem komputer.

Bahasa Komputer dapat dibagi atas tiga tingkatan:

• Leksikal:

• Merupakan tingkatan yang paling rendah 
• yaitu bentuk icon pada layar.
• Pada bahasa manusia, ekuivalen dengan bunyi dan ejaan suatu kata

• Sintaksis 

• Yaitu urutan dan struktur dari input dan output
• Pada bahasa manusia, ekuivalen dengan grammar suatu kalimat

• Semantik 

• Yaitu arti dari percakapan yang berkaitan dengan pengaruhnya pada struktur data internal komputer dan/atau dunia eksternal
• Pada bahasa manusia, ekuivalen dengan arti yang berasal dari partisipan dalam percakapan

Dalam user interface, istilah dialog hampir mirip dengan tingkat sintaksis, tetapi juga meliputi sifat-sifat leksikal

Dialog Manusia - Komputer: 

• Berbeda dengan dialog antar manusia pada umumnya, dialog dengan komputer biasanya terstruktur dan terbatas
• Beberapa ciri-ciri dari dialog terstruktur yang nantinya ditemukan dalam dialog komputer
• Menyebutkan beberapa hal tertentu secara berurutan
•  Beberapa bagian dari dialog dilakukan secara bersamaan
• Dialog berikutnya tergantung pada respon dari partisipa
• Dialog terstruktur biasanya tidak langsung menuju pada arti kata- katanya / semantik tapi pada level sintaksis

Proses Perancangan Dialog

Advice:

• Rangkaian dialog menggambarkan struktur tugas
• Beberapa rangkaian dialog tambahan digunakan untuk user support, misalnya: help system, tutorial sub-sistem
• Rangkaian dialog diurutkan sesuai dengan struktur tugas
• Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi beberapa bagian yang disebut module
• Biasanya user access bukan merupakan bagian dari task desription, tapi harus dimasukan dalam sistem yang baru
• Empat hal utama dalam desain yang harus diperhatikan dalam GUI metaphor: 
• Pemilihan dan representasi dari conceptual metaphor
• Representasi dari obyek interaktif dalam metaphor
• Perancangan manipulasi untuk mengimplementasikan user action
• Desain micro-metaphor untuk control action dan representasi dari commands

Dalam mendesain dialog, diperlukan deskripsi yang terpisah dari program secara keseluruhan
Mengapa perlu digunakan notasi deskripsi dialog yang terpisah?

• Agar mudah di analisa
• Pemisahan elemen-elemen interface dari logika program (semantik)
• Apabila notasi dialog ditulis sebelum program dibuat, maka notasi tersebut bisa membantu desainer untuk menganalisa struktur yang diajukan

Notasi Diagramatik

• Notasi Diagramatik paling sering digunakan dalam desain dialog
• Kelebihan: memungkinkan desainer untuk melihat secara sekilas struktur dialog
• Kekurangan: sulit untuk menjelaskan struktur dialog yang lebih luas dan kompleks

Contoh Notasi Diagramatik:

• State Transition Networks (STN)
• Hierarchical STN
• Harel’s State Charts
• Traditional Flow Diagrams (Flow Charts)
• JSD Diagrams

State Transition Network (STN)
Komponen STN:

• Lingkaran: Menggammbarkan "state" dari sistem
• Tanda Panah: Yang terdapat pada state disebut juga transisi. Tanda panah ini diberi label yang menjelaskan tentang tindakan user yang menyebabkan transisi dan respon dari sistem

STN dapat menggambarkan beberapa pilihan dialog:

• Urutan tindakan dan respon dari sistem
• Pilihan bagi user
• Iterasi

Hierarchical State Transition NetworksStruktur Hierarchical STN mirip dengan STN, namun memiliki tambahan berupa gabungan state. Penggunaan hirarki STN ini seperti menggabungkan beberapa STN kedalam satu diagram besar, sehingga model ini dapat digabungkan untuk sistem - sistem yang besar. STN hirarki dapat digunakan untuk mendeskripsikan suatu sistem yang lengkap.

Harel's State Chart 

Dapat digolongkan sebagai kelmpok STN. Dibangun untuk mensfesifikasikan secara visual sistem relatif yang kompleks dan mampu mengakomodasi masalah seperti concurrancy dan escape.

Flowchart 

• Flowchart digunakan untuk mendeskripsikan dialog yang sederhana
• Flowchart mudah dimengerti dan simple

Jackson Diagram JSD (Jackson Structured Design) diagram digunakan untuk berbagai aspek dari analisis tugas dan notasi dialog

Jenis - Jenis Dialog

• Command Language 
• Merupakan paradigma user interface yang pertama kali
• Contoh: MS-DOS shell, UNIX shell, dBase
• Keuntungan: 
• Lebih cepat
• Dapat melakukan kegiatan meskipun di luar batas
• Perulangan
• Implementasi yang mudah dan hemat

• Tujuan: 
• Konsistensi
• Penamaan dan pemberian singkatan yang baik
• Melakukan tugas perancangan dapat membantu meminimalkan kekurangan

• WIMP (Window, Icon, Menu, Pointer) Berfokus pada Menus, Buttons, Forms, Icons
• Direct Manipulation 
• Definisi: 
• Kesinambungan tampilan dari objek-objek dan aksi-aksi yang dilakukan
• Cepat, dapat dikembalikan, peningkatan aksi dimana efeknya dapat segera terlihat
• Penggantian dari sintaks command language dengan manipulasi langsung pada objek

• Keuntungan: 
• Mudah dipelajari dan diingat, khususnya untuk pemula
• WYSIWYG
• Fleksibel: Menyediakan konteks dan tampilan yang cepat dari feedback, sehingga user dapat mengetahui apakah tujuan telah tercapai
• Membatasai beberapa jenis kesalahan yang dapat terjadi

• Kekurangan:
• Penggunaan seluruh ruang pada layar
• Harus mempelajari arti dari komponen-komponen yang tampak pada layar
• Tampilan visual mungkin dapat disalah artikan
• Penggunaan mouse dapat lebih lambat daripada pengetikan
• Tidak ada penjelasan otomatis
• Tidak bagus pada: pengulangan, penyimpanan history, tugas tertentu (seperti merubah semua huruf cetak miring menjadi cetak tebal), variabel

• PDA dan Pen 
• Menjadi lebih umum dan penggunaan yang lebih luas
• Tampilan yang lebih kecil (160x160 atau 320x240)
• Tombol-tombol yang lebih sedikit, interaksi melalui “pen” (atau stylus)
• Peningkatan wireless, warna, memory yang lebih besar, CPU dan OS yang lebih baik
• Palmtop vs Handheld

User interface, dalam desain industri bidang interaksi manusia-mesin , adalah ruang di mana interaksi antara manusia dan mesin terjadi. Tujuan dari interaksi ini adalah operasi yang efektif dan pengendalian mesin pada akhir pengguna, dan umpan balik dari mesin, yang membantu operator dalam pengambilan keputusan operasional. Contoh konsep yang luas ini user interface meliputi aspek interaktif komputer sistem operasi , tangan alat , mesin-mesin berat kontrol operator, dan proses kontrol. Pertimbangan desain yang berlaku saat membuat user interface yang berhubungan dengan atau melibatkan disiplin ilmu seperti ergonomi dan psikologi .
Sebuah antarmuka pengguna adalah sistem dimana orang ( pengguna ) berinteraksi dengan mesin . User interface mencakup perangkat keras (fisik) dan perangkat lunak (logis) komponen. User interface yang ada untuk berbagai sistem , dan menyediakan cara:

• Input, memungkinkan pengguna untuk memanipulasi sistem
• Output, memungkinkan sistem untuk menunjukkan efek manipulasi pengguna '

Secara umum, tujuan dari interaksi manusia-mesin rekayasa adalah untuk menghasilkan user interface yang memudahkan (self eksplorasi), efisien, dan menyenangkan (user friendly) untuk mengoperasikan mesin dengan cara yang menghasilkan hasil yang diinginkan. Ini biasanya berarti bahwa operator perlu memberikan masukan minimal untuk mencapai output yang diinginkan, dan juga bahwa mesin meminimalkan output yang tidak diinginkan untuk manusia.
Dengan meningkatnya penggunaan komputer pribadi dan penurunan relatif dalam kesadaran sosial dari mesin-mesin berat , user interface istilah umumnya diasumsikan berarti antarmuka pengguna grafis , sedangkan diskusi desain panel kontrol industri dan mesin kontrol yang lebih umum merujuk pada antarmuka manusia-mesin.
Istilah lain untuk antarmuka pengguna termasuk antarmuka manusia-komputer (HCI) dan antarmuka manusia-mesin (MMI).

Sumber :             

http://edwardaditya.blogspot.com/2010/04/dialog-desain.html                                  

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

http://heriyanto-annafi.blogspot.com/2013/05/dialog.html

PROTOTYPING

TUGAS IMK (Prototyping)


1.     Pengertian
Proses pengembangan sistem seringkali menggunakan pendekatan prototipe (prototyping). Metode ini sangat baik digunakan untuk menyelesesaikan masalah kesalahpahaman antara user dan analis yang timbul akibat user tidak mampu mendefinisikan secara jelas kebutuhannya (Mulyanto, 2009).
Prototyping adalah pengembangan yang cepat dan pengujian terhadap model kerja (prototipe) dari aplikasi baru melalui proses interaksi dan berulang-ulang yang biasa digunakan ahli sistem informasi dan ahli bisnis. Prototyping disebut juga desain aplikasi cepat (rapid application design/RAD) karena menyederhanakan dan mempercepat desain sistem (O'Brien, 2005).
Sebagian user kesulitan mengungkapkan keinginannya untuk mendapatkan aplikasi yang sesuai dengan kebutuhannya. Kesulitan ini yang perlu diselesaikan oleh analis dengan memahami kebutuhan user dan menerjemahkannya ke dalam bentuk model (prototipe). Model ini selanjutnya diperbaiki secara terus menerus sampai sesuai dengan kebutuhan user.

2.     Kelebihan dan Kekurangan

Keunggulan prototyping adalah :
·         Adanya komunikasi yang baik antara pengembang dan pelanggan.
·         Pengembang dapat bekerja lebih baik dalam menentukan kebutuhan pelanggan.
·         Pelanggan berperan aktif dalam pengembangan sistem.
·         Lebih menghemat waktu dalam pengembangan sistem.
·         Penerapan menjadi lebih  mudah karena pemakai mengetahui apa yang diharapkannya
Sedangkan kelemahan prototyping adalah :

·         Pelanggan tidak melihat bahwa perangkat lunak belum mencerminkan kualitas perangkat lunak secara keseluruhan dan belum memikirkan peneliharaan dalam jangka waktu yang lama.
·         Pengembang biasanya ingin cepat menyelesaikan proyek sehingga menggunakan algoritma dan bahasa pemrograman sederhana.
·         Hubungan pelanggan dengan komputer mungkin tidak menggambarkan teknik perancangan yang baik.

3.     Bentuk Prototipe
Berdasarkan karakteristiknya prototipe sebuah sistem dapat berupa low fidelity dan high fidelity. Fidelity mengacu kepada tingkat kerincian sebuah sistem (Walker et al, 2003).
Low fidelity prototype tidak terlalu rinci menggambarkan sistem. Karakteristik dari low fidelity prototype adalah mempunyai fungsi atau interaksi yang terbatas, lebih menggambarkan kosep perancangan dan layout dibandingkan dengan model interaksi, tidak memperlihatkan secara rinci operasional sistem, mendemostrasikan secara umum feel and look dari antarmuka pengguna dan hanya menggambarkan konsep pendekatan secara umum (Walker et al, 2003).
High fidelity protoype lebih rinci menggambarkan sistem. Prototipe ini mempunyai interaksi penuh dengan pengguna dimana pengguna dapat memasukkan data dan berinteraksi dengan dengan sistem, mewakili fungsi-fungsi inti sehingga dapat mensimulasikan sebagian besar fungsi dari sistem akhir dan mempunyai penampilan yang sangat mirip dengan produk sebenarnya (Walker et al, 2003).
Fitur yang akan diimplementasikan pada prototipe sistem dapat dibatasi dengan teknik vertikal atau horizontal. Vertical prototype mengandung fungsi yang detail tetapi hanya untuk beberapa fitur terpilih, tidak pada keseluruhan fitur sistem. Horizontal prototype mencakup seluruh fitur antarmuka pengguna namun tanpa fungsi pokok hanya berupa simulasi dan belum dapat digunakan untuk melakukan pekerjaan yang sebenarnya (Walker et al, 2003).

4.     Proses Pembuatan Prototipe
Proses pembuatan prototipe merupakan proses yang interaktif dan berulang-ulang yang menggabungkan langkah-langkah siklus pengembangan tradisional. Prototipe dievaluasi beberapa kali sebelum pemakai akhir menyatakan protipe tersebut diterima. Gambar di bawah ini mengilustrasikan proses pembuatan prototipe :




Langkah-Langkah Prototyping

a.  Analisis Kebutuhan Sistem
Pembangunan sistem informasi memerlukan penyelidikan dan analisis mengenai alasan timbulnya ide atau gagasan untuk membangun dan mengembangkan sistem informasi. Analisis dilakukan untuk melihat berbagai komponen yang dipakai sistem yang sedang berjalan meliputi hardware, software, jaringan dan sumber daya manusia. Analisis juga mendokumentasikan aktivitas sistem informasi meliputi input, pemrosesan, output, penyimpanan dan pengendalian (O'Brien, 2005).
Selanjutnya melakukan studi kelayakan (feasibility study) untuk merumuskan informasi yang dibutuhkan pemakai akhir, kebutuhan sumber daya, biaya, manfaat dan kelayakan proyek yang diusulkan (Mulyanto, 2009).
Analisis kebutuhan sistem sebagai bagian dari studi awal bertujuan mengidentifikasi masalah dan kebutuhan spesifik sistem. Kebutuhan spesifik sistem adalah spesifikasi mengenai hal-hal yang akan dilakukan sistem ketika diimplementasikan (Mulyanto, 2009).
Analisis kebutuhan sistem harus mendefinisikan kebutuhan sistem yang spesifik antara lain :
1)     Masukan yang diperlukan sistem (input)
2)     Keluaran yang dihasilkan (output)
3)     Operasi-operasi yang dilakukan (proses)
4)     Sumber data yang ditangani
5)     Pengendalian (kontrol)




Tahap analisis kebutuhan sistem memerlukan evaluasi untuk mengetahui kemampuan sistem dengan mendefinisikan apa yang seharusnya dapat dilakukan oleh sistem tersebut kemudian menentukan kriteria yang harus dipenuhi sistem. Beberapa kriteria yang harus dipenuhi adalah pencapaian tujuan, kecepatan, biaya, kualitas informasi yang dihasilkan, efisiensi dan produktivitas, ketelitian dan validitas dan kehandalan atau reliabilitas (Mulyanto, 2009).

b.  Desain Sistem
Analisis sistem (system analysis) mendeskripsikan apa yang harus dilakukan sistem untuk memenuhi kebutuhan informasi pemakai. Desain sistem  (system design) menentukan bagaimana sistem akan memenuhi tujuan tersebut. Desain sistem terdiri dari aktivitas desain yang menghasilkan spesifikasi fungsional. Desain sistem dapat dipandang sebagai desain interface, data dan proses dengan tujuan menghasilkan spesifikasi yang sesuai dengan produk dan metode interface pemakai, struktur database serta pemrosesan dan prosedur pengendalian (Ioanna et al., 2007).
Desain sistem akan menghasilkan paket software prototipe, produk yang baik sebaiknya mencakup tujuh bagian :
1)     Fitur menu yang cepat dan mudah.
2)     Tampilan input dan output.
3)     Laporan yang mudah dicetak.
4)     Data dictionary yang menyimpan  informasi pada setiap field termasuk panjang field, pengeditan dalam setiap laporan dan format field yang digunakan.
5)     Database dengan format dan kunci record yang optimal.
6)     Menampilkan query online secara tepat ke data yang tersimpan pada database.
7)     Struktur yang sederhana dengan bahasa pemrograman yang mengizinkan pemakai melakukan pemrosesan khusus, waktu kejadian, prosedur otomatis dan lain-lain.

c.  Pengujian Sistem
        Paket software prototipe diuji, diimplementasikan, dievaluasi dan dimodifikasi berulang-ulang hingga dapat diterima pemakainya (O'Brien, 2005). Pengujian sistem bertujuan menemukan kesalahan-kesalahan yang terjadi pada sistem dan melakukan revisi sistem. Tahap ini penting untuk memastikan bahwa sistem bebas dari kesalahan (Mulyanto, 2009).
Menurut Sommerville (2001) pengujian sistem terdiri dari :

·         Pengujian unit untuk menguji komponen individual secara independen tanpa komponen sistem yang lain untuk menjamin sistem operasi yang benar.
·         Pengujian modul yang terdiri dari komponen yang saling berhubungan.
·         Pengujian sub sistem yang terdiri dari beberapa modul yang telah diintegrasikan.
·         Pengujian sistem untuk menemukan kesalahan yang diakibatkan dari interaksi antara subsistem dengan interfacenya serta memvalidasi persyaratan fungsional dan non fungsional.
·         Pengujian penerimaan dengan data yang dientry oleh pemakai dan bukan uji data simulasi.
·         Dokumentasi berupa pencatatan terhadap setiap langkah pekerjaan dari awal sampai akhir pembuatan program.
·         Pengujian sistem informasi berbasis web dapat menggunakan teknik dan metode pengujian perangkat lunak tradisional. Pengujian aplikasi web meliputi pengujian tautan, pengujian browser, pengujian usabilitas, pengujian muatan, tegangan dan pengujian malar  (Simarmata, 2009).
Penerimaan pengguna (user) terhadap sistem dapat dievaluasi dengan mengukur kepuasan user terhadap sistem yang diujikan. Pengukuran kepuasan meliputi tampilan sistem, kesesuaian dengan kebutuhan user, kecepatan dan ketepatan sistem untuk menghasilkan informasi yang diinginkan user. Ada beberapa model pengukuran kepuasan user terhadap sistem, diantaranya adalah Technology Acceptance Model (TAM), End User Computing (EUC) Satisfaction, Task Technology Fit (TTF) Analysis dan  Human Organizational Technology (HOT) Fit Model.
Salah satu model pengukuran yang telah diterjemahkan ke dalam beberapa bahasa berbeda dan tidak menunjukkan perbedaan hasil pengukuran yang signifikan adalah End User Computing (EUC) Satisfaction. Model ini menekankan kepuasan user terhadap aspek teknologi meliputi aspek isi, keakuratan, format, waktu dan kemudahan penggunaan sistem (Chin & Mathew, 2000).

d.  Implementasi
Setelah prototipe diterima maka pada tahap ini merupakan implementasi sistem yang siap dioperasikan dan selanjutnya terjadi proses pembelajaran terhadap sistem baru dan membandingkannya dengan sistem lama, evaluasi secara teknis dan operasional serta  interaksi pengguna, sistem dan teknologi informasi.

5.      Alat Perancangan Sistem

Perancangan sistem membutuhkan peralatan berupa alat alat perancangan proses dan  alat perancangan data. Alat perancangan proses terdiri dari diagram aliran data dan diagram arus sistem. Sedangkan alat perancangan data terdiri dari diagram relasi entitas (entity relationship) dan kamus data (data dictionary).

a.      Diagram Aliran Data
Diagram aliran data (data flow diagram/DFD) adalah sebuah alat dokumentasi grafik yang menggunakan simbol-simbol untuk menjelaskan sebuah proses. Diagram ini menunjukkan aliran proses seluruh sistem kepada pemakai dan dapat diatur detailnya sesuai dengan kemampuan pemahaman pemakai. DFD terdiri dari tiga elemen yaitu lingkungan, pemrosesan, aliran data dan penyimpanan data. Salah satu keuntungan menggunakan DFD adalah memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang sedang akan dikerjakan (Ladjamudin, 2005).

b.     Diagram Arus Sistem
Diagram arus sistem (Sistem Flow chart) adalah peralatan yang digunakan untuk menggambarkan proses sistem secara rinci untuk menggambarkan aliran sistem informasi dan diagram arus sistem untuk menggambarkan aliran program (Ladjamudin, 2005).

c.      Diagram Relasi Entitas
Diagram relasi entitas menunjukkan antar entitas satu dengan yang lain dan bentuk hubungannya sehingga data tergabung dalam satu kesatuan yang terintegrasi (Ladjamudin, 2005).

d.     Kamus Data
Kamus data adalah penjelasan tertulis lengkap dari data yang diisikan ke dalam database (Ladjamudin, 2005).

skenario, storyboard, sketsa
storyboard:



- Digunakan di awal desain.

- Biasanya digunakan dengan skenario, lebih terinci, dan dapat diputar ulang.

- Kumpulan dari sketsa/frame individual.

- menyajikan urutan inti cerita.

- menunjukkan bagaimana kemungkinan user dapat mengalami peningkatan melalui setiap aktifitas.

sketsa:


- Sketsa sangat penting untuk low-fidelity prototyping.

- Jangan takut dengan kemampuan menggambar.

- Menyajikan “tampilan” yang kotor dan cepat dari interface, konsep desain, dll.


skenario :



- untuk alur cerita dari sketsa menggunakan skenario

Sumber:
http://bungadit.blogspot.com/2010/12/skenario-storyboard-sketsa.html
http://www.core77.com/blog/events/prototyping_technology_symposia_16519.asp