Perancangan Interface [PDF]

Citation preview

TUGAS INTERAKSI MANUSIA KOMPUTER PERANCANGAN INTERFACE



DI SUSUN OLEH: IRSANTO TAHIR (16411005) SAMUEL BOSAWER (16411045) HOSIANUS T. KEDJOK(16411113)



PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER DAN MANAJEMEN UNIVERSITAS SAINS DAN TEKNOLOGI JAYAPURA 2019



A. PENGERTIAN INTERFACE(ANTARMUKA) Pada saat sekarang sudah terdapat antarmuka alat bantu system, sebagai media komunikasi yang dapat digunakan dalam suatu kegiatan untuk mempermudah pengguna (user) untuk mencapai tujuan yang diinginkannya. Menurut sumber yang didapat dari http://id.wikipedia.org/wiki/antarmuka_pengguna, pengertian antarmuka ( interface) adalah salah satu layanan yang disediakan oleh sistem operasi yang terdapat pada setiap komputer, sebagai sarana komunikasi atau interaksi antara pengguna dengan sistem komputer. Antarmuka adalah bagian dari sistem komputer yang bersentuhan langsung dengan pengguna. Terdapat dua jenis antarmuka, yaitu Command Line Interface (CLI) dan Graphical User Interface (GUI). 1. Command Line Interface (CLI) Antarmuka baris perintah (command-line interface) adalah mekanisme interaksi dengan sistem operasi atau perangkat lunak komputer dengan mengetikkan perintah untuk menjalankan tugas tertentu. Contoh sistem operasi berbasis CLI adalah DOS/Command Prompt, Linux berbasis Teks, Cisco IOS (Internetwork Operating System), Mikrotik, dll.



Gambar contoh tampilan CLI pada system operasi linux



2. Graphical User Interface (GUI) Graphical User Interface (GUI) adalah antarmuka pada sistem operasi



yang



menggunakan



tampilan



grafis,



dapat



dikendalikan



menggunakan beberapa macam alat input, seperti mouse, keyboard, touchscreen, dll. Pada antarmuka GUI terdapat jendela, menu, tombol, icon, dll yang didesain supaya pengguna lebih mudah, nyaman, dll (user friendly) dalam berinteraksi dengan sistem operasi atau aplikasi. Dalam penerapannya GUI lebih banyak digunakan untuk kebutuhan pengguna umum atau komputer destop/client, karena tujuannya lebih ke user friendly. Contoh sistem operasi berbasis GUI: Windows, Macintosh, Ubuntu, RedHat, Android, dll.



Gambar contoh tampilan GUI pada system operasi windows 10



B. MANFAAT INTERFACE Manfaat User Interface untuk menghubungkan atau penterjemah informasi antara pengguna dengan system operasi, sehingga computer dapat digunakan. Dengan demikian, user interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari perangkat keras dan lunak yang membentuk pengalaman bekomputer.



C. ATURAN PERANCANGAN INTERFACE Dalam melakukan perancangan interface perlu diketahui beberapa aturan sebagai pedoman agar program yang dibuat menjadi efisien ketika digunakan oleh pengguna(user). Berikut ini adalah 8 aturan perancangan interface : 1. Konsisten Konsisten dalam urutan perintah pada menu atau tindakan. Contoh : Misalnya ketika ingin melakukan Log in di facebok tetap diminta untuk mengisi email dan password terlebih dahulu untuk bisa masuk ke akun yang telah dibuat.



2. Memungkinkan pengguna untuk melakukan shortcut (Shortcut). Shortcut bergunanya untuk memaksimalkan kecepatan interaksi, baik melalui singkatan, simbol dll. Selain itu juga berguna untuk mengefektifkan dan mengefisiensikan waktu pengguna. Contoh shortcut pada facebook



3. Memberikan umpan balik yang informatif(Feedback) Memberikan umpan balik yang berupa informasi jika ada informasi baru dan jika ada kesalahan perintah. Contoh : Facebook memberikan umpan balik yang berupa informasi jika ada informasi baru dan jika ada kesalahan perintah.



4. Merancang dialog untuk menghasilkan suatu penutupan (Dialog closure) Merancang dialog untuk menghasilkan suatu penutupan ahkir dari suatu proses. desain langkah - langkah yang harus dilakukan agar user dapat menyelesaikan suatu aksi. Contoh : Dalam perancangan Website Lazada sudah terdapat aturan Dialog Closure, apabila user telah melakukan pembelian maka website Lazada akan memunculkan tulisan. Dear Nama Pembeli Pesanan Anda dengan nomor Order # 385277519 sudah berhasil dilakukan pada tanggal Friday March 11, 2016 dengan metode pembayaran Cash on Delivery. Anda akan mendapat email konfirmasi apabila produk pesanan telah dikirim.



5. Memberikan penanganan kesalahan yang sederhana Sedapat mungkin sistem dirancang sehingga pengguna tidak dapat melakukan kesalahan fatal. Jika kesalahan terjadi, sistem dapat mendeteksi kesalahan dengan cepat dan memberikan mekanisme yang sedehana dan mudah dipahami untuk penanganan kesalahan. Contoh : ketika salah memasukan kata sandi pada facebook



6. Mudah kembali ke tindakan sebelumnya Mudah kembali ke tindakan sebelumnya, Hal ini dapat mengurangi kekuatiran user karena pengguna mengetahui kesalahan yang dilakukan dapat dibatalkan. Sehingga user tidak takut untuk mengekplorasi. Dalam website Lazada terdapat tombol "back". Apabila kita salah menekan barang yang akan dibeli, maka kita tinggal menekan tombol "back" agar kembali ke halaman awal dan kita bisa memilih barang yang lain. 7. Mendukung tempat pengendali internal (internal locus of control) Jadikan user sebagai pemegang kendali, rancanglah suatu interface sedemikan rupa sehingga user menjadi inisiator daripada responden. User dapat dengan bebas bernavigasi dan mengubah informasi akun yang dimilikinya sesuai dengan yang dikehendaki. Dalam pembelian barang pada suatu e-commerce. Di lazada seorang user harus memiliki account terlebih dahulu dan mengisi data diri. Data tersebutu digunakan dalam pemesanan barang secara online.



8. Mengurangi beban ingatan jangka pendek (Reduce short-term memory load) Buatlah interface sesederhana mungkin. Maksudnya disini bukan merancang interface sistem/web dengan design yang biasa (sederhana).



Tetapi merancang



interface yang mudah dipahami oleh user. Dengan inteface yang simple dan menarik dapat membantu user Mengurangi Beban Ingatan Jangka Pendek, sehingga tidak perlu mengingat terlalu banyak perintah, dan juga dapat menghindari terjadinya kebingungan pada para user. Dalam website Lazada, barang-barang yang telah dilihat oleh user akan di tampilkan di bawah halaman website tersebut. Jadi apabila user ingin melihat barang yang sebelumnya telah dilihat tidak perlu mencari-cari. Karena Lazada telah menyimpan nya. D. PERANCANGAN INTERFACE Salah satu kriteria dari sebuah antar muka adalah 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 mereka.Untuk sebuah tampilan yang menarik, memang tidak senantiasa mudah. Seorang perancang tampilan selain harus mempunyai jiwa seni yang memadai, ia pun juga harus mengerti selera pengguna secara umum. Hal ini yang perlu disadari oleh seorang perancang tampilan adalah bahwa ia harus bisa meyakinkan pemrogramnya,bahwa apa yang ia bayangkan dapat diwujudkan (diimplementasikan) dengan peranti bantu (tool) yang tersedia. Bagi perancang antarmuka,hal yang sangat penting untuk ia perhatikan adalah bahwa ia sebaiknya mendocumentasikan semua pekerjaan yang ia lakukan. Dengan dokumentasi yang baik, ia dapat mengubah rancangannya apabila menurut ia terdapat rancangan yang tidak mudah diimplementasikan atau rancangan tersebut mengalami perubahan disesuaikan dengan usulan dari pengguna atau karena alasan lain. Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa cara : a)



Membuat sketsa pada kertas



b)



Meggunakan piranti prototype GUI



c)



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



d)



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



1. Cara



Pendekatan Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam dua kategori



besar, yakni program aplikasi untuk keperluan khusus dengan pengguna yang khusus (special purpose software) dan program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software), yang sering dikenal dengan sebutan public software. Special Purpose Software yaitu program aplikasi untuk keperluan khusus dengan user yang khusus pula (special purpose software) Kelompok user dapat dengan mudah diperkirakan, baik dari segi keahlian maupun ragam antarmuka yang akan digunakan. Mis: program inventori gudang, pengelolaan data akademis mahasiswa, pelayanan reservasi hotel. Pendekatan yang digunakan :’ a) User-centered design approach yaitu perancang dan user bersama-sama membuat tampilan antarmuka b) User design approach: hanya user yang membuat tampilan antarmuka General Purpose Software yaitu program aplikasi yang akan digunakan oleh berbagai macam kalangan user.Perancang dapat melakukan ‘pemaksaan’ kepada user untuk menerima tampilan antarmukanya. Salah satu cara yang dapat dilakukan adalah user dapat melakukan perubahan tampilan sesuai dengan keinginannya sendiri (customization). Contohnya seperti merubah warna dasar, pengaturan desktop, wallpaper, screensaver, dll. 2.



Prinsip dan Petunjuk Perancangan Antarmuka pengguna secara alamiah terbagi menjadi empat komponen : a. Model pengguna Merupakan dasar dari tiga komponen yang lain. Model pengguna merupakan model konseptual yang diinginkan oleh pengguna dalam memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut. Setelah pengguna mengetahui dan memahami model yang ia inginkan, dia memerlukan peranti untuk memanipulasi model itu b. Peranti pemanipulasian



Model ini sering disebut dengan bahasa perintah (command language), yang sekaligus merupakan komponen kedua dari antarmuka pengguna.Idealnya, program komputer mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat dapat dioperasionalkan. c. Umpan balik . Umpan balik di sini diartikan sebagai kemampuan sebuah program yang membantu pengguna untuk mengoperasikan program itu sendiri. Umpan balik dapat berbentuk: pesan-pesan penjelasan, pesan penerimaan perintah, indikasi adanya obyek terpilih, dan penampilan karakter yang diketikkan lewat papan ketik.Beberapa bentuk umpan balik terutama ditujukan kepada pengguna yang belum berpengalaman dalam menjalankan program aplikasi itu. Umpan balik dapat digunakan untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut. d. Tampilan informasi. Komponen ini digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan. Pada bagian ini, perancang harus menampilkan pesan-pesan tersebut seefektif mungkin, sehingga mudah dipahami oleh pengguna. 3. Urutan Perancangan a. Pemilihan Ragam Dialog Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna pemula, menengah, atau pengguna ahli), tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah program tunggal, atau sekumpulan ragam dialog yang satu sama lain saling mendukung. b. Perancangan Struktur Dialog Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai. Dalam tahap ini pengguna banyak dilibatkan, sehingga pengguna langsung mendapatkan umpan balik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan ia digunakan.



c. Perancangan Format Pesan Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang mengharuskan pengguna untuk memasukkan data ke dalam komputer juga harus dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah dengan mengurangi pengetikan yang tidak perlu dengan cara mengefektifkan penggunaan tombol. d. Perancangan Penanganan Kesalahan Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan antara lain adalah: 



Validasi pemasukan : misalnya jika pengguna harus memasukkan bilangan positif, sementara ia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang pemasukan data tersebut.







Proteksi pengguna: program memberi peringatan ketika pengguna melakukan suatu tindakan secara tidak sengaja, misalnya penghapusan berkas.







Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan tindakan yang baru saja dilakukan.







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



e. Perancangan Struktur Data Struktur data yang diperlukan untuk mengimplementasikan dialog berbasis grafis jauh lebih rumit dibandingkan dengan struktur data yang diperlukan pada dialog berbasis tekstual. Meskipun demikian, sesulit atau semudah apapun struktur data yang akan digunakan, struktur data tersebut harus diturunkan dari spesifikasi antarmuka yang telah dibuat. Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain.



4.Perancangan Tampilan Berbasis Teks



Pada perancangan tampilan untuk antarmuka berbasis teks, ada enam faktor yang harus dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas tinggi. Keenam faktor tersebut dijelaskan sebagai berikut. a. Urutan Penyajian Urutan penyajian harus disesuaikan dengan model pengguna yang telah disusun. Biasanya berdasarkan kesepakatan dengan calon pengguna tentang urutan tampilan yang akan digunakan. b. Kelonggaran (Spaciousness) Penyusunan tata letak yang tidak mengindahkan estetika akan mempersulit pengguna dalam pencarian suatu teks c. Pengelompokkan Data yang berkaitan sebaiknya dikelompokkan d. Relevansi Tampilkan hanya pesan-pesan yang relevan sesuai topik e. Konsistensi Perancang harus konsisten dalam menggunakan ruang tampilan yang tersedia f. Kesederhanaan Cari cara yang paling mudah untuk menyajikan informasi yang dapat dipahami dengan cepat oleh pengguna



Contoh gambar perancangan tampilan berbasis teks



5.Perancangan Tampilan Berbasis Grafis Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh perancang tampilan maupun penggunanya. Di sisi lain, harus memperhatikan, beberapa kendala dalam penerapan antarmuka berbasis grafis ini, antara lain adalah waktu tanggap, kecepatan penampilan, lebar pita penampilan, dan tipe tampilan (berorientasi ke tekstual atau grafis). Pada tahun 1970an, di Xerox Palo Alto Research Centre (PARC) dilakukan sejumlah penelitian yang mengarah kepada perancangan antarmuka yang disebut Xerox Star, yang menggunakan teknik manipulasi langsung. Selain itu ditempat yang sama juga dikembangkan suatu antarmuka berbasis grafis yang kemudian dikenal dengan sebutan Lisa yang berjalan dengan Macintosh. Penelitian lain untuk mendapatkan antarmuka berbasis grafis terus dilakukan. Beberapa kemampuan yang dimiliki oleh



Xerox Star dan Lisa, yang kemudian diikuti oleh sistem seperti Microsoft Windows, antara lain adalah: 



Pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, tetapi cukup dikerjakan dengan melihat dan kemudian menunjuk kesuatu gambar yang mewakili suatu aktifitas (yang seterusnya disebut dengan ikon),







Penggunaan form property atau option untuk mengatur penampakan (wajah) desktop,







Kemampuan WYSIWYG (what you see is what you get) yang kemudian menjadi sangat terkenal.







Perintah-perintah yang berlaku umum, seperti MOVE, DELETE, atau COPY, dan lain-lain.



Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh diatas, ada lima faktor yang perlu diperhatikan pada saat kita merancang antarmuka berbasis grafis yang masing-masing dijelaskan sebagai berikut:  Ilusi pada obyek-obyek yang dapat dimanipulasi Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga komponen. Pertama, gunakan kumpulan obyek yang disesuaikan dengan aplikasi yang akan dibuat. Jika obyek-obyek itu belum ada, kita dapat mengembangkannya sendiri. Kedua, penampilan obyek-obyek grafis harus dilakukan dengan keyakinan bahwa ia akan dengan mudah dimengerti oleh pengguna. Ketiga, gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul dilayar.  Urutan visual dan fokus pengguna Antarmuka dapat digunakan untuk menarik perhatian pengguna antara lain dengan menbuat suatu obyek berkedip, menggunakan warna tertentu untuk obyek-obyek tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna. Tetapi, penggunaan rangsangan visual yang berlebihan justru akan membuat pengguna bingung dan merasa tidak nyaman.



 Struktur internal Pada pengolah kata kita seringkali menulis beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan, dimiringkan, atau diberi garis bawah. Pada salah satu pengola kata, kita dapat melihat apa yang disebut dengan reveal code, yakni suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan font style. Reveal code ini tdak akan ikut dicetak, tetapi digunakan untuk menunjukkan kepada pengguna antara lain tentang font style yang digunakan, batas kiri dan batas kanan dari halaman teks setrta informasi yang lain. Reveal code biasanya berupa suatu karakter khusus.  Kosakata grafis yang konsisten dan sesuai Penggunaan simbol-simbol obyek, atau ikon, memang tidak ada standarnya, dan biasanya disesuaikan dengan kreatifitas perancangnya.  Kesesuaian dengan media Karakteristik khusus dari layar tampilan yang digunakan akan mempunyai pengaruh yang besar terhadap keindahan “wajah” antarmuka yang akan ditampilkan. Pada layar tampilan yang masih berbasis pada karakter, misalnya CGA, pemunculan gambar tidak akan secantik apabila kita menggunakan layar tampilan yang sering disebut dengan bitmap atau raster display. Dengan semakin canggihnya teknologi layar tampilan pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi permintaan pengguna akan aspek kenyamanan dan keramahan antarmuka. 6.Waktu tanggap Waktu tanggap yang lama akan mengalihkan perhatian pengguna untuk melakukan aktifitas lain.



7.Penanganan kesalahan Penanganan kesalahan yang tepat biasanya dilakukan dengan memberikan pesan umpan balik kepada pengguna akan keadaan eksekusi program saat itu. Kesalahan pada program dapat disebabkan oleh dua hal: pertama kesalahan sintaksis yang bisa dideteksi kompiler biasa disebut compile-time error dan kedua kesalahan logika ketika program dijalankan biasa disebut run-time error atau fatal error. E. PERANTI BANTU SEDERHANA 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: 1. Nomor lembar kerja 2. Bagian tampilan 3. Bagian navigasi 4. Bagian keterangan



Contoh gambar peranti bantu sederhana



F. JARING SEMANTIK TAMPILAN Jaring semantik tampilan digunakan untuk mempermudah bagi pemrograman pada saat menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaringan semantik tampilan terdiri atas dua komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan anak panah).



Contoh gambar Jaring semantik tampilan



DAFTAR PUSTAKA 1. http://id.wikipedia.org/wiki/antarmuka_pengguna (diakses 13 Maret 2019) 2. http://jurnal.stmik-amik-riau.ac.id/index.php/satin/article/download/329/pdf (diakses 13 Maret 2019) 3. http://www.transiskom.com/2015/07/pengertian-cli-dan-gui.html (diakses 13 Maret 2019) 4. https://defikristiana.wordpress.com/2016/02/11/antar-muka-pengguna-user-interface/ (diakses 13 Maret 2019) 5. http://12650035-imk.blogspot.com/2012/12/perancangan-tampilan.html (diakses 13 Maret 2019) 6. https://www.scribd.com/doc/166449393/MAKALAH-KELOMPOK-7 (diakses 13 Maret 2019) 7. https://yusriel.wordpress.com/2008/10/28/pertemuan-6-design-interface-perancangantampilan/ (diakses 13 Maret 2019) 8. http://banananono.blogspot.com/2015/04/review-facebook-8-aturan-emas.html (diakses 13 Maret 2019) 9. http://javascript-kuliah.blogspot.com/2017/05/8-aturan-emas-design-interface.html (diakses 13 Maret 2019)