Perancangan Tampilan

Pendahuluan

•         Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik

•         Yang harus dimiliki oleh perancang tampilan:

–       Jiwa seni yang memadai

–       Mengetahui selera user secara umum

•         Seorang perancang tampilan HARUS mendokumentasikan semua pekerjaan yang telah dia kerjakan selama ini, sebagai bahan evaluasi pembuatan tampilan yang baru atau memperbaiki tampilan sebelumnya

•         PROGRAM YANG DIBUAT BUKAN UNTUK ANDA, NAMUN UNTUK ORANG LAIN

Cara Pendekatan

Jenis program aplikasi:

•         Special purpose software

•         General purpose 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:

–       User-centered design approach: perancang dan user bersama-sama membuat tampilan antarmuka

–       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, walaupun dapat memberikan dampak program tersebut tidak laku

•         Salah satu cara yang dapat dilakukan adalah user dapat melakukan perubahan tampilan sesuai dengan keinginannya sendiri (customization), mis: merubah warna dasar, pengaturan desktop, wallpaper, screensaver, dll

Komponen Antarmuka Pengguna

1.     Model pengguna; memungkinkan user untuk mengembangkan pemahaman yang mendasar tentang apa yang dikerjakan oleh program, bahkan oleh user yang sama sekali tidak mengetahui teknologi komputer

2.     Bahasa perintah; sedapat mungkin menggunakan bahasa alami

3.     Umpanbalik; kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri

4.     Tampilan informasi; digunakan untuk menunjukkan status informasi atau program ketika user melakukan suatu tindakan

Urutan Perancangan

1.     Pemilihan ragam dialog

2.     Perancangan struktur dialog; melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut

3.     Perancangan format pesan; tata letak tampilan, keterangan tektual secara terinci, dan efisiensi inputing data harus mendapat perhatian lebih

4.     Perancangan penanganan kesalahan

5.     Perancangan struktur data

Penanganan Kesalahan

•         Validasi pemasukan data, mis: jika user harus memasukkan bilangan positif, namun dia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang pemasukan data tersebut

•         Proteksi user; program memberi peringatan ketika user melakukan suatu tindakan secara tidak sengaja, mis: 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

Perancangan Tampilan Berbasis Teks

•         Urutan penyajian; disesuiakan dengan model pengguna

•         Kelonggaran; mis: dengan adanya jarak spasi antar perintah, atau penempatan yang khusus

•         Pengelompokkan data yang saling berkaitan

•         Relevansi; hanya pesan-pesan yang relevan saja yang ditampilkan di layar

•         Konsistensi; menggunakan suku kata yang konsisten untuk menjelaskan sesuatu

•         Kesederhanaan; menggunakan singkatan yang dipahami oleh umum

Perancangan Tampilan Berbasis Grafis

•         Ilusi pada obyek-obyek yang dapat dimanipulasi, mis: gambar disket, printer, dll

•         Urutan visual dan fokus pengguna, mis: tanda kedip untuk posisi kursor, penggunaan warna yang berbeda

•         Struktur internal; berguna untuk menunjukkan bahwa obyek yang sedang dihadapi dapat dimodifikasi sesuai dengan keinginan user

•         Kosakata grafis yang konsisten dan sesuai, mis: gambar disket, printer, dll

•         Kesesuaian dengan media/informasi yang akan disampaikan

RAGAM DIALOG

Dialog Manusia-Komputer

Pengertian dialog:

•         Umum, dialog adalah proses komunikasi antara 2 atau lebih agen, dalam dialog makna harus dipertimbangkan agar memenuhi kaidah semantis dan pragmatis

•         IMK, dialog adalah pertukaran instruksi dan informasi yang mengambil tempat antara user dan sistem komputer

Aturan dalam  Perancangan Dialog

•         Pegang teguh konsistensi

•         Sediakan shortcut bagi pengguna aktif

•         Sediakan feedback yang informatif

•         Sediakan error handling yang mudah

•         Ijinkan pembatalan aksi

•         Sediakan fasilitas bantuan (help)

•         Kurangi beban ingatan jangka pendek

Pegang Teguh Konsistensi

•         Informasi disusun dalam formulir-formulir, nama-nama dan susunan menu, ukuran dan bentuk dari ikon, dll, semuanya harus konsisten diseluruh sistem

–       Konsisten mengijinkan banyak aksi menjadi otomatis

–       Jika ada aplikasi baru hadir dengan fungsi yang berbeda akan menyebabkan user harus mempelajari kembali operasi-operasi yang dilakukan

–       Mis: konsistensi di dalam menu bar untuk File, Edit dan Format

Sediakan Short Cut Bagi Pengguna Aktif

•         User yang bekerja dengan satu aplikasi dalam seluruh waktunya akan menginginkan penghematan waktu dengan memanfaatkan short cut

•         User mulai hilang kesabaran dengan urutan menu panjang ketika mereka sudah tahu pasti apa yang mereka kerjakan

•         Short cut keys dapat mereduksi jumlah interaksi untuk tugas yang diberikan

•         Designer dapat menyediakan fasilitas makro bagi user untuk membuat short cuts bagi dirinya sendiri

•         Dengan short cut membuat user lebih produktif 

Sediakan Feedback yang Informatif

•         Setiap aksi dari user harus ada feedback dari komputer untuk menunjukkan hasil dari aksi tersebut

–       Mis: jika user meng-”click” sebuah button harus secara visual ada perubahan bentuk atau bisa berupa bunyi yang mengindikasikan komputer telah meresponnya

–       Informasi feedback sangat penting bagi user, mis:

•         Jika komputer sedang melakukan proses tertentu, maka perlu ada informasi

 

 

Sediakan Error Handling  yang Mudah

•         Error dapat menjadi masalah yang serius, sehingga designer harus mencoba mencegah user membuat error

•         Ketika errors terjadi perlu cara mengatasinya:

–       Pesan error harus dinyatakan secara jelas apa kesalahannya dan menerangkan bagaimana kesalahan tersebut terjadi

–       Hindari pesan yang menakutkan atau menyalahkan user seperti: “FATAL ERROR 2005”

–       Juga sediakan informasi yang memudahkan untuk mengoreksi error tersebut, mis: “the date of birth entered is not valid. Check to be sure only numeric characters in appropriate ranges are entered in the date of birth fields….”

Contoh Error Handling

Ijinkan Pembatalan Aksi

 

•         User memerlukan bahwa ketika mereka sudah memilih opsi dan membuat aksi, aktivitas itu dapat dibatalkan atau kembali ke kondisi sebelumnya dengan mudah

•         Mengijinkan user untuk belajar tentang sistem dengan melakukan eksplorasi

•         Jika mereka melakukan kesalahan, mereka dapat membatalkan aksinya

•         Jika user akan menghapus sesuatu yang substansial (mis: sebuah file), sistem harus meminta konformasi terhadap aksi tersebut 

Sediakan Fasilitas Bantuan (Help)

•         User yang berpengalaman menginginkan bahwa mereka yang mengendalikan sistem dan sistem merespon mereka. Segala sesuatu yang mereka tidak tahu rasanya ingin segera mendapat jawabannya, oleh sebab itu fasilitas “help” penting untuk menolongnya agar segera mendapatkan solusi

•         User yang tidak berpengalaman ketika mengalami kesulitan dalam mengeksplorasi sistem juga perlu mendapat pertolongan yang mudah dan sederhana, fasilitas “help” yang lengkap, mudah dioperasikan akan menolong mereka mengatasi kesulitannya

Kurangi Muatan Short-Term Memory

•         Orang mempunyai keterbatasan pada short-term memory-nya

•         Orang hanya mengingat sekitar 7 chunk informasi pada satu saat

Karakteristik Umum Ragam Dialog

•         Inisiatif

–       Inisiatif oleh komputer; user memberikan tanggapan atas prompt yang diberikan oleh komputer

–       Inisiatif oleh user; user mempunyai sifat keterbukaan yang luas dalam artian user diharapkan agar dapat memahami sekumpulan perintah yang harus ditulis menurut aturan (sintaks) tertentu

•         Keluwesan

–       Tidak hanya dilihat dari kemampuan sistem menyediakan sejumlah perintah-perintah yang memberikan hasil sama, tetapi bagaimana sistem dapat menyesuaikan diri dengan keinginan pengguna dan bukan sebaliknya

Karakteristik Umum Ragam Dialog (lanj)

•         Kompleksitas

–       Keluwesan harus dibayar dengan kompleksitas implementasi yang tinggi, oleh sebab itu perlu pembatasan kompleksitas dengan cara TIDAK membuat antarmuka lebih dari yang diperlukan karena tidak ada keuntungan darinya

•         Kekuatan

–       Didefinisikan sebagai jumlah kerja yang dapat dilakukan oleh sistem untuk setiap perintah yang diberikan oleh user. Aspek ini dapat berbenturan dengan aspek keluwesan dan kompleksitas

Karakteristik Umum Ragam Dialog (lanj)

•         Beban informasi

–       Penyampaian informasi dalam dialog yang sesuai dengan kebutuhan pengguna

•         Konsistensi

–       Suatu atribut yang dapat mendorong user mengembangkan mentalitas dengan cara memberikan semacam petunjuk untuk mengeksplorasi pengetahuan tentang pemahaman perintah-perintah baru dengan opsion yang sudah ada

•         Umpan balik

–       Kemampuan untuk memberikan informasi kepada user tentang proses yang sedang berjalan akibat adanya masukan yang dilakukan oleh user

Karakteristik Umum Ragam Dialog (lanj)

•         Observabilitas

–       Sistem dapat berfungsi secara benar namun nampak sederhana bagi user

•         Kontrolabilitas

–       Sistem yang selalu dalam kontrol user. Dialog yang memiliki sifat ini harus memungkinkan user agar dapat menentukan:

•         Dimana sebelumnya ia berada

•         Dimana sekarang ia berada

•         Kemana ia dapat pergi

•         Apakah pekerjaan yang sudah dilakukan dapat dibatalkan

Command Language

•         Bahasa perintah biasanya diperlukan dalam sistem operasi DOS dan UNIX. User menulis suatu perintah dan menunggu respon dari sistem. Jika hasilnya benar, perintah berikutnya diterbitkan, jika salah tindakan selanjutnya ada ditangan user

•         Contoh:

–       C:\>DIR                         - C:\>copy *.doc A:\LETTER

–       C:\>DIR *.DOC/s          - C:\DOS>FORMAT A: /S

Command Language (lanj)

Beberapa pedoman:

•         Buatlah model eksplisit dari obyek atau tindakan

•         Pilihlah nama-nama yang penuh arti, spesifik dan jelas

•         Gunakanlah struktur hirarki

•         Usahakan struktur yang konsisten

•         Aturan-aturan penyingkatan harus konsisten

•         Pertimbangkan pemakaian menu-menu perintah pada tampilan berkecepatan tinggi

•         Batasi jumlah perintah untuk menjalankan suatu tugas

       Bahasa Alami

•         Sistem harus tunduk dan merespon kalimat-kalimat dan frase-frase pada bahasa alami

•         Keuntungan:

–       Mengurangi beban mempelajari sintaks

•         Kerugian:

–       Memerlukan dialog klarifikasi

–       Memerlukan lebih banyak pengetikan

–       Tidak dapat diprediksi

Manipulasi Langsung

•         User berinteraksi secara langsung dengan obyek pada layar grafis sementara sistem menyediakan umpan balik yang cepat pada user

Contoh Manipulasi Langsung

Sistem Menu

•         Pengguna menentukan satu dari sejumlah pilihan pada daftar, kemudian menerapkan sintaks untuk mengindikasikan pilihan, menegaskan pilihan, memulai aksi dan mengamati hasilnya 

Sistem Menu Datar

Sistem Menu Tarik

Borang Isian (Form Fill-In)

•         Pengguna melihat suatu tampilan medan yang berhubungan satu sama lainnya, kursor dipindahkan sepanjang medan-medan yang ada selanjutnya data diisikan pada medan yang dikehendaki

Contoh Borang Isian

INTERAKSI MANUSIA DAN KOMPUTER

DEFINISI IMK

• sekumpulan  proses, dialog dan kegiatan dimana melalinya pengguna memanfaatkan dan beriteraksi dengan komputer.
• suatu disiplin ilmu yang menekankan pada asdpek desain, evaluasi, dan implementasi dari sistem komputer interaktif untuk kegunaan manusia untuk mempertimbangkan fenomena-fenomena disekitar manusia itu sendriri.
• suatu studi ilmiah tentang masyarakat didalam lingkungan kerjanya.
• HCL didefinisikan dengan disiplin ilmu yanng berhubungan dengan perancangan, evaluasi dan implementasi sistem komputer interaktif untuk digunakan oleh manusia dan studi tentang fenomena disekitarnya.
• HCL pada prinsipnya membat agar sistem dapat berdialog dengan penggunanya seramah mungkin.

SISTEM IMK

 Dimana
HCIS : sistem manusia dan komputer
h : subsistem manusia
m : subsistem mesin
e : subsistem lingkungan
i : interaksi manusia dengan sub-sub sistem
t : waktu lamanya interaksi terjadi

APLIKASI IMK

• Perkantoran
• kendali proses
• penerbangan
• komunikasi
• desain pekerjaan
• pelatihan/seleksi
• dll

  
HUMAN COMPUTER INTERFACE (HCL)

• istilah lain : man-machine interaction (MMI), computer and human interaction (CHI), dan human-machine interaction (HMI)
• tujuan :

1. user friendly (ramah dengan pengguna) kemampuan yang dimiliki oleh softwere atau program aplikasi yang mudah dioprasikan, dan mempunyai sejumlah kemampuan lain sehingga pengguna merasa betah dalam mengoprasikan program tersebut, bahkan bagi seorang pengguna pemula
2. WYSIWYG (what you see is what you get)
3. Mengurangi frustasi, ketidakamanan, dan kebingungan pada pengguna
4. Implikasi: meningkatkan kepuasan kerja dan menurunkan tingkat absensi pekerja

HCI (lanjutan)
- Permasalahan yang muncul:
- Programer tidak dapat memahami secara tepat
penggunanya, mis: tentang keinginan dan lingkungan
kerja pengguna
- Sistem komputer mengharuskan pengguna untuk
mengingat terlalu banyak informasi
- Sistem komputer tidak memberikan ruang untuk
toleransi kesalahan
- Para pengguna berbeda dari sebelumnya
- Para pengguna berbeda satu dengan lainnya
- Para pengguna berbeda dari kita
- Mulai diterapkannya GUI (Graphical User Interface)

KRITERIA USER FRIENDLY

•  Memiliki tampilan yang bagus
•  Mudah dioperasikan
• Mudah dipelajari
• Pengguna selalu merasa senang setiap kali menggunakan software tersebut

PERUBAHAN TEKNOLOGI

•  Penurunan harga komputer yang sangat dramatis dihasilkan oleh adanya perkembangan teknologi terutama teknologi microelectronic dalam bentuk keping silicon (IC). 
• Kemampuan teknologi untuk memperkecil ukuran rangkaian serta mengkemas sejumlah rangkaian dalam satu keping tipis IC merupakan langkah menuju perkembangan komputer yang powerful dengan kapasitas penyimpan yang besar, namun dengan harga yang semakin murah.

Perubahan Teknologi

1.  Perubahan teknologi di atas telah membuka kemungkinan penggunaan komputer yang lebih luas.
2. Saat ini kehadiran komputer sudah tidak dapat dilepaskan dari dunia bisnis dan industri modern.
3. Komputer juga ditemukan dalam penggunaan aplikasi rumah tangga

Kebutuhan Perancangan yang Berbeda

1. Agar komputer dapat diterima secara luas dan digunakan secara efektif, maka perlu dirancang secara baik.
2. Hal ini tidak berarti bahwa semua sistem harus dirancang agar dapat mengakomodasi semua orang, namun komputer perlu dirancang agar memenuhi dan mempunyai kemampuan sesuai dengan kebutuhan pengguna secara spesifik.
3. Pengguna seharusnya tidak perlu memikirkan bagaimana cara berinteraksi dengan komputer, tetapi yang penting justru bagaimana mengoptimalkan komputer untuk memenuhi kebutuhannya
4. Analoginya adalah seperti kita menggunakan mobil atau motor, kita tidak perlu memikirkan bagaimana cara mesin bekerja.

Kesalahan Mendasar Programmer

• Desain ini memuaskan saya, berarti juga akan memuaskan setiap orang
• Desain ini memuaskan rata-rata orang, berarti juga akan memuaskan setiap orang
• Manusia begitu amat beragam oleh karenanya tidak ada kemungkinan antar muka yang dapat memuaskan pengguna, tetapi karena sifat manusia yang adaptif sejak awalnya, maka itu tidak akan menjadi masalah
• Faktor ergonomi cukup mahal namun demikian produk-produk aplikasi komputer tetap terjual hanya dengan berdasarkan penampilan dan corak. Jadi pertimbangan ergonomi boleh diabaikan
• Ergonomi merupakan gagasan yang baik. Dalam mendesain sesuatu saya menggunakan pertimbangan ergonomi namun dilakukan berdasarkan intuisi dan menyandarkannya pada selera umum, jadi kita tidak memerlukan tabel data

Keterkaitan HCI Dengan Disiplin Ilmu Lain

• Prinsip kerja sebuah sistem komputer adalah adanya masukan – proses – keluaran (input – process – output).
• Ketika seseorang bekerja dengan sebuah komputer, ia akan melakukan interaksi atau berdialog dengan komputer menggunakan cara-cara tertentu.

Disiplin ilmu dalam HCI

• Ilmu komputer ( desain aplikasi & teknik human interface)
• Psikologi ( aplikasi dan teori proses kognitif dan menganalisis perilaku user)
• Sosiologi & antropologi ( interaksi antara teknologi, work, dan organisasi)
• Industrial design (produk interaktif)
• Teknik sipil ( infrastruktur fisik)
• Teknik Mesin ( robotika)

Hal penting dalam HCI

 Bagaimana menentukan fungsi yang dimiliki sebuah system
 Bagaimana menyajikan kepada user
 Bagaimana membangun sebuah system
 Bagaimana untuk menguji sebuah design

Pendekatan HCI
 Machine side ( teknik komputer grafis, sistem operasi, bahasa pemograman, dan bagaimana membangun environment yang relevan)
 Human Side (teori komunikasi, graphic dan industrial design disipline, liguistic, ilmu social, psikologi kognitif, dan human performance are relevant

Aspek – aspek dalam HCI
 Use and context of computers ( U)
 Human characteristic (H)
 Computer system and interface architectur (C)
 Development proses ( D)