Konsep GUI

Graphical User Interface

GUI (Graphical User Interface) merupakan antarmuka pada sistem operasi atau komputer yang menggunakan menu grafis agar mempermudah kepada para penggunanya untuk berinteraksi dengan komputer atau sistem operasi.

>Sejarah singkat GUI 

Pada awal diciptakannya, komputer dijalankan dengan menggunakan perintah yang diketik pada layar monitor menggunakan keyboard. Hal ini berlaku untuk semua program ataupun perintah-perintah tertentu yang berhubungan dengan sistem informasi. Hanya orang-orang tertentu saja yang dapat mengoprasikan komputer.Oleh karena itu para ahli terdorong untuk dapat menciptakan sesuatu yang dapat digunakan oleh orang kebanyakan dengan cara yang praktis dan mudah diingat.

Akhirnya lahirlah yang disebut dengan GUI atau graphical User Interface. GUI adalah seperangkat aplikasi yang menampilkan semua menu, ikon dan alat penunjuk lainnya yang menggantikan perintah ketik di shell. Hal ini membuat pengguna komputer menjadi lebih mudah mengoperasikan sebuah perangkat dari pada mengingat perintah yang menggunakan teks pada sebuah kotak komando tertentu. Hal ini didasarkan bahwa manusia lebih mudah mengingat gambar dibanding tulisan. GUI pertama kali digunakan dalam komputer yang diproduksi oleh Apple yakni Machintosh dengan Steve Jobs sebagai penggagasnya. Namun belakangan sistem operasi lain mengikutinya, seperti misalnya Microsoft dengan GUI Windows-nya yang menjadi tren setter penggunaan start menu dan taskbar di bawah.

Bagaimana Penggunaan GUI pada saat ini?

Penggunaan Graphical User Interface juga diterapkan pada beberapa jenis usaha yang spesifik. Sebagai contoh adalah ATM milik bank. Meskipun berbasis teks, namun sudah dianggap semi GUI karena pengguna tidak perlu mengetikkan perintah untuk mentransfer uang. Anda hanya perlu menekan tombol yang sejajar dengan menu yang ada. Bahkan saat ini mesin ATM bank sudah banyak yang dilengkapi dengan layar sentuh

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 Elemen GUI pada Iphone

Seperti yang kita ketahui bahwa pada saat ini GUI sudah diterapkan pada Iphone. Banyak iphone canggih yang multiuser dan sudah menerapkan Konsep GUI. \seperti gambar di samping.

Bagaimana Merancang GUI yang Baik 

Desain diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata “desain” bisa digunakan baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, “desain” memiliki arti “proses untuk membuat dan menciptakan obyek baru”. Sebagai kata benda, “desain” digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk obyek nyata.

Desain grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin. Dalam disain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. disain grafis diterapkan dalam disain komunikasi dan fine art. Seperti jenis desain lainnya, disain grafis dapat merujuk kepada proses pembuatan, metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu yang digunakan (disain).

Pemodelan adalah membentuk suatu benda-benda atau obyek. Membuat dan mendesain obyek tersebut sehingga terlihat seperti hidup. Sesuai dengan obyek dan basisnya, proses ini secara keseluruhan dikerjakan di komputer. Melalui konsep dan proses desain, keseluruhan obyek bisa diperlihatkan secara 3 dimensi, sehingga banyak yang menyebut hasil ini sebagai pemodelan 3 dimensi (3D modelling).

Prinsip Desain Grafis
1.Metaphor (Metafora)

Metaphor atau metafora adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan. Metafora akan membuat para pengunjung seolah-olah berada di tempat yang sebenarnya, atau bisa dikatakan juga bahwa metafora dibuat mirip seperti tempat yang dikunjungi. Contohnya, website suatu toko online yang memiliki metafora, dimana pengunjung dibawa ke tempat seolah-olah mereka benar ada di toko online tersebut.

2.Clarity (Kejelasan)

Harus ada alasan yang kuat/masuk akal dan jelas mengapa menggunakan setiap elemen yang berada dalam suatu interface yang kita buat,contohnya dalam peletakan suatu button,pembuat harus memiliki alasan mengapa diletakkan di tempat tersebut. Penggunaan elemen yang lebih sedikit akan lebih baik.

3.Consistency (Ketetapan)

Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography (model form yang digunakan pada suatu website), teks, dll. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya.

4. Alignment (Perataan)

Untuk perataan dapat digunakan rata kiri, kanan atau tengah. Pada umumnya suatu teks pada website dimulai dari kiri atas (left alignment), dimana left alignment akan mengijinkan mata untuk menguraikan tampilan dengan lebih mudah. Selain itu dengan menggunakan bantuan garis akan membantu dalam hal perataan. Sembunyikan garis horizontal dan vertical untuk membantu mengalokasikan komponen window/jendela. Garis juga membantu menghubungkan hal-hal yang berhubungan dan memudahkan perataannya.

5. Proximity

Item-item yang berkaitan ditampilkan bersama pasti memiliki hubungan karena jarak yang jauh mengimplikasikan bahwa tidak ada hubungan antara item-item tersebut.

6. Contrast (Keserasian Tampilan)

Keserasian tampilan akan membuat pengunjung web tertarik pada web tsb. Kontras juga dapat memandu mata pengunjung untuk melihat keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface. Kontras digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang paling utama diberi highlight. Dengan mempergunakan geometri dapat membantu pengurutan. Kontras juga mendukung skimming secara cepat.

Pembuatan User Interface

Digunakan untuk mempermudah User dalam mengakomodasikan bentuk deeesain kedalam sebuah gambar,tulisan dsb.

Teknik Koding 

Digunakan sepintas lalu dan baik digunakan untuk menarik perhatian. Digunakan dengan mengabaikan penggunaan vidio, baik membuat sesuatu menjadi solid.

Tipography (Tipografi) merupakan karakter atau simbol yang dalam penggunaannya mudah diliat dan dibedakan misalnya menghindari penggunaan upper-case (huruf besar) pada setiap huruf pengetikan naskah. Dimana penggunaan campuran huruf kecil dan besar dapat mempercepat proses membaca.

GUI Masa Depan

Salah satu GUI masa depan adalah penggunaan navigasi 3D. Pemakaian komputer Vision, sensor dan digital processing menuju ke bentuk virtual reality.

 

 

Read More

Interaksi

Kerangka Kerja Interaksi  

Dari wikipedia, interaksi adalah suatu jenis tindakan atau aksi yang terjadi sewaktu dua atau lebih objek mempengaruhi atau memiliki efek satu sama lain. Melalui definisi tersebut dapat dilihat bahwa pengaruh interaksi sangat kuat bagi pelaku interaksi tersebut. Apabila dikaitkan dengan IMK, dapat dibayangkan seharusnya banyak sekali pengaruh desain antarmuka bagi para pengguna sistem. 

1. Kerangka kerja Donald Norman :

• User menetapkan Tujuan
• Spesifikasi pemerintah/ aksi pada antarmuka
• Jalankan Perintah/aksi
• Pahami Perintah-perintah system
• Terjemahkan perintah-perintah system
• Uji perintah-perintah dalam system apakah sudah sesuai dengan tujuan atau belum. 

Ada beberapa kendala dari kerangka kerja ini yaitu : 

1.  Beberapa system lebih sulit penggunaannya dibanding system yang lain diberi user.  
2. Pada saat eksekusi, hasil atau tindakan sistem tidak sesuai dengan perintah yang diberikan user

Model dari Norman terpusat pada Interface menurut cara pandang user, berbeda dengan hasilnya, sehingga dikembangkan model Abowd dan Beale.

Yang mana :

1. System(S), suatu sistem dengan menggunakan Core Languagenya.

2. Input(I) dan Outpu (O), memiliki bahasa tersendiri dalam mempersentasikan komponen terpisah meskipun ada overlaping.

3. User (U), memiliki bahasa antara user dengan task nya.   

Dalam model Abowd dan Baele sistem interaksi dibagi menjadi 4 yaitu :

pengguna (User), Input (Data), Proses (sistem), Hasil (Output).

Kalau Interaksi memerlukan penterjemah, masalah yang terjadi jika antar interface tidak saling mengenal bahasa tersebut. Kemudian Seorang user menterjemah keinginan melalui interface, dimana hasilnya kemudian ditampilkan dalam layar dan ditangkap oleh pengguna tersebut.

 Dalam Kerangka Kerja Umum untuk memahami interaksi tidak harus sistem terkomputerisasi harus mengidentifikasikan semua komponen yang terlibat sehingga mempunyai penaksiran yang sama dari sistem.

  Ergonomik merupakan ilmu yang mempelajari tentang Karakteristik fisik termasuk sifat kemampuan dan keterbatasan manusia untuk merancang sesuatu merancang suatu sistem kerja sehingga orang dapat hidup dan bekerja pada sistem itu dengan baik yaitu mencapai tujuan yang diinginkan melalui pekerjaan itu dengan efektif aman dan nyaman.
Karekteristik dalam Interaksi adalah : 

• Pengaturan Alat pengendali dan tampilan seperti : pengelompokan alat kendali berdasarkan fungsi dan frekwensi penggunaan atau urutannya.
• Lingkungan kerja, misalnya : penetapan aturan sesuai tingkat pengguna.
• Kesehatan, misal : posisi  fisik, kondisi lingkungan (suhu, kelembapan), cahaya, kebisingan,
• penggunaan warna , misal: erna merah untuk peringatan, hijau untuk OK, dan pertimbangkan juga untuk adanya buta warna,
• Ergonomik baik untuk pendefinisian standar dan pedoman pembatasan bagaimana kita  mendesain aspek tertentu dari sistem.

Jenis Interaksi yaitu :   

1. Antarmuka dengan baris perintah tunggal
2. Antarmuka dengan baris perintah terstruktur
3. Menu
4. Bahasa sehari hari
5. Dialog dengan tanya jawab terstruktur
6. Formulir Isian dan kertas kerja
7. WIMP (Window Icon Menu Pointer).

 Baris Perintah Tunggal adalah cara memberi instruksi kepada komputer secara langsung, dapat berupa tombol fungsi, karakter kata, atau kombinasi. Baris Perintah tunggal menyediakan akses langsung pada fungsi sistem, cocok untuk perintah berulang, lebih tepat digunakan pada pengguna ahli dan baris perintah harus mempunyai arti. Contohnya : Sistem Unix/linux dan DOS.

• Keuntungan Baris perintah tunggal : Cepat, Afisien, Akurat, Ringkas, Luwes dan Inisiatif oleh User.
• Kerugian Baris Perntah tunggal : memerlukan latihan yang lama, membutuhkan pengguna yang teratur, beban ingatan yang tinggi, dan jelek dalam menangani kesalahan.

 Baris Perintah Tunggal ini memungkinkan perintah lebih dari satu baris yang dikemas dalam satu berkas dan biasanya disebut batch file.

Contoh :  dalam DOS hampir selalu ada sebuah berkas bernama AUTOEXE.BAT.yang sebenarnya merupakan bentuk kemasan dari sejumlah perintah-perintah DOS.

keuntungannya :  lebih cepat dan cepat sedangkan kerugiannya: penelusurankesalahan. 

 Menu merupakan sekumpulan pilihan yang tampil dilayar dengan pilihan tampil sesuai permintaan user dan bisa dpilih menggunakan mouse, kode bilangan/huruf dan pilihan ini dikelompokkan dengan baik secara urut.

Sistem menu bisa berupa : 

1. Menu Datar (dapat menggunakan sektor pilihan yaitu bullet atau angka dan huruf).
2. Menu Tarik,( Pulldown Menu/pup-iup menu) seolah-olah seperti kita menarik sebuah menu eatas dan kebawah atau ke kanan dan kiri .
3. Memanfaatkan sistem WIMP.

Bahasa Alami yaitu yang mana pengguna memberikan instruksi-instruksi dalam bahasa alami yang lebih umum sifatnya dan user dapat memberikan instruksi dengan kalimat-kalimat yang lebih manusiawi.

Dialog dengan QUERY yaitu bila penguna melakukan interaksi dengan menggunakan serangkaian pertanyaan yang cocok untuk pemula dan biasanya digunakan untuk menyusun informasi  yang akan ditampilkan dari database berdasarkan jawaban dari proses tanya jawab tersebut.

Formulir Isian (BORANG) merupakan layar berbentuk formulir yang digunakan untuk pendataan data yang diinputkan pada kolom-kolom yang telah disediakan.

SPREADSHEET merupakan Formulir isian dengan beragam variasi yang berisi sel-sel yang dapat diisi data atau formula (rumus). contohnya : Excel dan lotus.

WIMP (Window Icon Menu Pointer)metupakan model baku untuk sistem komputer interaktif saat ini, khususnya untuk PC.

Terdiri dari Windows merupakan area pada layar komputer yang dimiliki oleh terminal yang mandiri yang dapat berisi text/gambar dapat bertumpukan, disembunyikan atau ditampilan semua.Windows tersedia di scrollbars untuk menggulung layar naik turun atau menggeser layar kanan kiri. Didalam titlebar berisi judul/nama dari windows.

Icon merupakan variasi dari menu yaitu gambar/simbol kecil digunakan sebagai representasi dari objek.Icon mempunyai sifat yang alamiah, ringkas, mudah diingat, mudah dipelajari dan dikenal.Namun penggunaan Icon dapat membingungkan dan boros tempat. Dan user tertentu lebih dominan suka membaca suatu teks karena lebih jelas.

Pointer merupakan bagian yang terpeting sejak munculnya model WIMP, berguna untuk menunjuk dan memilih  seperti icon atau menu dengan bentuk yang bermacam-macam.

Perancangan Berpusat pada pengguna memerlukan :

1. Fokus pada keterampilan user yang mendukung pencapaian tujuan dan sasaran yang diinginkan.
2. Mengembangkan kriteria penggunaan secara spesifik yang mengidentifikasi dokumen dan oenggunaannya secra khusus dan harapan pengguna yang berpengalaman dan dilakukan Uji Regresi penggunaan.
3. Menggunakan Aturan yang terukur yang mana reaksi dan skenario penggunaan petunjuk, simulasi dan dicatat, dianalisa terhadap pengguna lain.
4. Dilakukan Berulang-Ulang, yaitu merancang, membangun, evaluasi kemudian rancang ulang bangun kembali dan evaluasi lagi seperti itu seterusnya hingga menghasilkan pencapaian yang terbaik ( Nothing is Perfect first time ).

Read More

Interaksi Manusia dan Komputer

IMK atau Interaksi Manusia Komputer atau HCI (Human Computer Interaction) adalah disiplin ilmu pengetahuan yang mengulas tentang perancangan, evaluasi dan implementasi dari sistem komputer interaktif terkait dengan penggunaannya oleh manusia beserta hal-hal yang terkait dengan itu.

Apa Tujuan IMK? Dan Kenapa IMK dibutuhkan?

Tujuan utama dari IMK yaitu menghasilkan sistem komputer yang mampu digunakan dengan baik oleh pengguna (good usability) melalui desain antarmuka dengan memperhatikan beberapa hal penting seperti memahami faktor-faktor yang membuat manusia menggunakan teknologi, mengembangkan teknik-teknik yang memungkinkan untuk membangun sistem yang sesuai dengan tujuan serta mencapai interaksi yang aman, efektif dan efisien.  Selain desain antarmuka, karakteristik manusia tentu saja sangat mempengaruhi IMK. 

Desain antarmuka adalah media yang menjembatani kemampuan-kemampuan fungsionalitas sistem kepada pengguna. Selain itu, desain antar muka merupakan kendaraan yang akan membawa pengguna pada fungsi sistem yang ingin dilakukan olehnya. Hal-hal tersebut yang akan memberikan dampak langsung pada pengembang sistem, apalagi jika terkait dengan kustomer dan keutungan organisasi.

Layout, tampilan dan navigasi layar sistem akan memberikan efek bagi pengguna melalui banyak cara. Jika hal-hal tersebut memusingkan dan tidak efisien, maka pengguna akan mengalami kesulitan dalam mengerjakan pekerjan mereka dan relatif melakukan lebih banyak kesalahan. Desain yang buruk akan membuat pengguna takut sehingga tidak akan kembali menggunakan sistem tersebut. Hal-hal tersebut apabila tidak dikelola dengan baik juga akan menyebabkan frustasi dan peningkatan stres pada pengguna serta lebih jauh lagi akan meperburuk kondisi keuangan pengguna dan organisasi. Pada beberapa sistem yang sangat riskan seperti traffic control, nuclear power plant, hal-hal tersebut akan berpengaruh bagi keselamatan pengguna dan masyarakat luas.

Bagi pengembang, tujuan dari rekayasa sistem adalah membuat kualitas hidup pemakai semakin baik. Desainer umumnya ingin membuat sistem interaktif berkualitas tinggi yang dikagumi oleh orang-orang, beredar luas dan sering ditiru, lebih dalam dari sekadar gagasan user-friendly.  

Read More

Beranda

About

Human Computer Interaction
 

Haii sobat blog creative, apa kabar nih,,

semoga baik pastinya ya.. dan sllu dalam lindungan Tuhan Yang Maha Esa. Amin..

Sebelumnya knalin dlu deh,, namaku Fila Dita Ardila, Aku biasa dipanggil dith,, haahahaha...

Blogku kali ini tentang IMK (Interaksi Manusia dan Komputer) atau HCI (Human Computer Interaction. Sebenernya sih,, blog ini aku buat untuk memenuhi tugas Mapel di kampus,, hehehe . . .  
Kampusku di Akademi Komunitas Negeri Sumenep, Madura ,, Aku mahasiswi Prodi TI di AKNS,, biar tau skalian liat langsung nih websitenya,,  http://www.aknsumenep.ac.id/  nih kampus  Program Studi Diluar Domisili D II POLITEKNIK ELEKTRONIKA NEGERI SURABAYA (PENS).. klick linknya dehh.. biar ga penasaran.... :-)  ya sekalian bagi bagi ilmu lah,, bagi bagi materi dikit tentang HCI, siapa tau shobat blog sedang butuh informasi atau materi tentang HCI / IMK,, ya kan..  :-) 
Pastinya sobat blog semua udah tau kan tentang IMK (Interaksi Manusia dan Komputer), nih salah satu mapel di program study Informatika..  nah IMK sendiri itu artinya disiplin ilmu yang mempelajari hubungan antara manusia dan komputer yang meliputi perancangan, evaluasi, dan implementasi antarmuka pengguna komputer agar mudah digunakan oleh manusia.  Tapi kalo HCI (Human Computer Interaction) itu artinya sekumpulan proses, dialog, dan kegiatan yang mana untuk melaluinya itu pengguna memanfaatkan dan berinteraksi dengan komputer.  kadang kita gak sadar kan shob, Saat kita menggunakan komputer, kita itu sedang berinteraksi dengan komputer. Trus kalo kita sedang memberikan perintah pada komputer, pada saat itu sistem komputer menerima perintah kemudian ditanggapinya hingga pekerjaan kita selesai artinya si komputer nih nurutin kemauan kita apa,, ya kan,,  Tapi Komputer itu bukan pembantu lho yah.. hehehe dia juga merasa lelah kalo kita sering menggunakannya,,  Nah di Materi tentang HCI atau IMK nanti itu lebih menekankan pada aspek desain, evaluasi sama implementasinya shob, .. Langsung baca aja deh ,, di menu materinya ya shob,,, :-)

 

Read More