Dasar Desain Interaksi Dasar Desain Interaksi n Desain

Dasar Desain Interaksi

Dasar Desain Interaksi n Desain: n n Proses Desain n n kaya cerita desain Navigasi n n siapa mereka, apa yang mereka menyukai. . . Skenario n n apa yang terjadi ketika Pengguna n n apa itu, intervensi, tujuan, kendala menemukan jalan sekitar Anda sistem Iterasi dan Prototipe n tidak pernah benar pertama kalinya!

Apa Itu Desain ? mencapai tujuan dalam keterbatasan n Tujuan – Maksud n n Kendala n n Untuk siapa? , mengapa mereka menginginkannya bahan, platform Hasil bernilai jual

Aturan Desain n Umumnya : n n Pahami material yang ada Pada IMK : n Pahami komputernya : n Kemampuan, n Pahami pengguna : n Psikologi, n tools, kapasitas, platforms sosial, kesalahan manusia pada sistem Dan dari interaksi user terhadap sistem

Kesalahan Manusia n laporan kecelakaan. . n aircrash, kecelakaan industri, kesalahan rumah sakit n n tetapi … n n tiang beton retak karena terlalu banyak beban berat menyalahkan tiangnya? Tidak…tetapi…. kesalahan desain kita tahu bagaimana berperilaku beton di bawah tekanan manusia salah adalah normal n n n Pertanyaannya, mau menyalahkan manusia? kita tahu bagaimana pengguna berperilaku di bawah tekanan sehingga desain untuk itu! memperlakukan pengguna setidaknya dari bentuk fisik!

Fokus Dari Sistem the user

Siklus Hidup Software Dengan Model Air Terjun

Waterfall Model

Kekurangan Dari Model Ini Adalah Adanya kesulitan dalam mengakomodasi perubahan setelah proses dijalani. n Fase sebelumnya harus sudah lengkap dan selesai dikerjakan sebelum ke fase berikutnya. n

Masalah Dalam Waterfall n Perubahan sulit dilakukan karena sifatnya kaku : Cocok untuk kebutuhan yang dikumpulkan secara lengkap. n Perubahan ditekan sekecil mungkin. n Umumnya digunakan untuk rekayasa sistem yang besar dimana proyek di kerjakan di beberapa tempat. n

Proses Desain what is wanted interviews ethnography scenarios task analysis guidelines principles analysis precise specification design what is there vs. what is wanted dialogue notations evaluation heuristics prototype implement and deploy architectures documentation help

Langkah-langkah n Kebutuhan n n Analisa n n apa yang harus dilakukan dan bagaimana untuk memutuskan Iterasi dan prototyping n n pemesanan dan pemahaman Desain n n apa yang ada dan apa yang diinginkan. . . mendapatkan sesuatu dengan benar. . . dan menemukan apa yang benar-benar dibutuhkan! Implementasi dan penyebaran n membuat dan mendapatkan hal itu di luar sana

… bagaimana bisa dilakukan semuanya ! ! n Terbatasnya waktu design trade-off n Kegunaan? n System yang sempurna yang di desain buruk n Menemukan masalah dan memperbaikinya? n Memutuskan apa yang harus diperbaiki? n Terlalu baik terlalu banyak upaya dalam desain

User Centered Design Pengguna tidak tersesat, tidak ada black box n Sisi pengguna n Menentukan keputusan desain n Menentukan tujuan dan prioritas n Setuju dengan seluruh desain dan tujuan utama desain n

User-Centered Project Life Cycle User/Task Analysis I Set Usability Goals I Design Interface I Evaluate Designs I Build Prototype I Test Prototype Test Okay?

Iteration is the key! n n n Tak ada desain yang sempurna hanya dengan satu kali proses Sistem interaktif tidak bisa tercipta dari awal, pengguna harus terlibat secara terus menerus Testing dan evaluasi harus diawali saat proses desain n Testing dan desain harus diulang secara bersamaan n Prototypes dapat digunakan dalam proses testing

How to Start? Gunakan templates n Petunjuk frameworks, bukan aturan baku, tapi jadi konvensi n n Guidelines and standards n IBM Web Design Guidelines (http: //www 3. ibm. com/ibm/easy/eou_ext. nsf/publish/558) n Ameritech User Interface Standard(shttp: // www. ameritech. com: 1080/corporate/testtown/library/sta ndard/index. html)

Getting started n Frameworks yang telah ada n Convention n Pengguna telah familier dengan sistem yang ada, mis : menu File di sisi paling kiri, menu Help di sisi paling kanan n Hampir semua desain interface dibatasi dengan constraint yang ketat, mis : adanya menu File, adanya menu Transaksi

Getting started n Studying existing applications Melihat sistem yang sudah ada, mis : MS Office, Simply Accounting n Meniru teknik aplikasi yang sudah ada, mis : cara membuka file, konfirmasi penyimpanan n Memahami mengapa terjadi desain seperti yang sudah ada, mis : browsing folder untuk membuka file n

Methods of Iterative Design n Pembuatan skenario n n Memilih skenario yang sesuai n Mudah dimengerti n Proses vital n Random Validasi dan Review n Dari pihak manajemen tingkat atas n Pengguna level bawah

Methods of Iterative Design Gunakan sketsa atau storyboard sebagai dasar pembuatan skenario n Paper Prototyping n Tentukan batasan n Sesuaikan dengan framework n Buat prototype secara cepat dengan tool CASE, mis : Visio n Testing prototype bersama pengguna n

Karakteristik User n Mental Models Pengguna yang menyesuaikan dengan dirinya sendiri n Pengguna yang tidak peduli, asalkan sesuai dengan dirinya sendiri n Pengguna tipe sederhana, tidak terlalu detail dan tidak terlalu peduli dengan kesalahan kecil n

Norman’s Design Principles n Prinsip desain tergantung dari : Pemahaman psikologi pengguna n Paham bagaimana pengguna berinteraksi dengan lingkungannya n Paham bagaimana pengguna merespon desain yang baik dan yang buruk n

Norman’s Design Principles Menyediakan model konseptual yang baik n Membuat semuanya terlihat dalam desain n Mengatur natural mapping n Menyediakan proses feedback n Mendukung automatic learning n Menyediakan fungsi constraint n

Conceptual Model Dasar pemahaman bagaimana sebuah proses bekerja n Tipe n Design Model n User Model n Visual Image n Design model Designer User’s model User System image

Mapping Relasi antara tindakan pengguna dan hasil dari tindakan tersebut n Natural mapping n Pengguna telah mengetahui hasil dari tindakannya secara natural, mis : tombol OK dan Cancel, tombol Submit n

Contoh Mapping n Function keys F 3 berfungsi sebagai apa ? n Kebanyakan bukan natural mapping n Tidak ada petunjuk yang jelas n Apa yang terjadi jika sebuah function ditekan ? n

Forcing Function n Desain yang mencegah pengguna melakukan kesalahan, mis : penggunaan radio button, konfirmasi penyimpanan, konfirmasi hapus file, menu disabled

Feedback & Affordances Feedback : adanya peringatan atas hasil sebuah tindakan, mis : pesan data tersimpan n Affordance : memperlihatkan hasil proses, mis : icon flat vs icon 3 D n

Automatic Learning n Pengguna akan mempelajari hasil tindakan berdasarkan kejadian yang berulang, dapat dipenuhi jika terjadi konsistensi, mis : menu File New di MS Office

Three Conceptual Models Design Model User’s Model ni n g ed c A Au t Mapping om ate d Le ar Fe Affordances Forcing Functions n o ti ba Visibility ck System Image

Pengetahuan Otak dan Kenyataan n n Kenyataan : informasi di lingkungan sekitar Otak : informasi di memori, yang tersimpan : n Lokasi n Bentuk n Warna dll. Kombinasi dari keduanya Contoh : sisi mata uang, icon di toolbar

Contoh Kompleks

Proses Manusia untuk Tampilan yang Kompleks n Lama waktu untuk mengingat tergantung dari unique element yang ada, mis : Dari contoh kompleks, teringat sekilas, textbox berwarna kuning n Teringat sekilas tombol Next n

Screen Element n n n n n Balance Symmetry Regularity Predictability Sequentiality Economy Unity Proportion Simplicity Groupings

Balance n Sisi yang seimbang

Symmetry n Replikasi elemen di tengah

Regularity n Standard dan konsistensi

Predictability n Meletakkan komponen yang bisa ditebak oleh pengguna Icon Search for Movies File Edit View Insert Window Enter Keywords Kung Foo : Grasshopper OK Help Old blind guy Cancel OK Icon Kung Foo File Edit Enter Keywords Grasshopper View Insert Search for Movies : Old blind guy Window Help Cancel

Sequentiality Penglihatan akan tertuju ke satu tempat yang dianggap atraktif n Secara instuitif, penglihatan akan menuju ke : n n Kontrol yang lebih terang n Elemen terisolasi n Gambar dibanding teks n Warna yang menyolok n Kontrol yang lebih besar n Bentuk yang tidak standar

Economy n Styles, font dan warna secukupnya Name: Address: City: State: Zip: Membership Form Dues: Pubs: Total: OK Cancel

Unity n Membuat tampilan yang seakan menyatu

Proportion n Data dan teks yang proporsional Square - 1: 1 Square Root of 2 - 1: 1. 414 Golden Triangle - 1: 1. 618 Square Root of 3 - 1: 1. 732 Double Square - 1: 2

Simplicity Alignment sederhana n Efisiensi n Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel Name: Address: City: State: Zip: Membership Form Pubs: Total: OK Cancel

Groupings Mengelompokkan secara visual n Jenis : n Simple n Boxed n Background n

Simple Grouping Elemen yang sama dikelompokkan secara vertikal n Jarak dalam satu kelompok lebih kecil n Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel

Boxed Grouping n Ditambah kotak, dalam implementasi dengan penggunaan frame atau panel Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel

Background Grouping Ditambah dengan warna tertentu n Mirip dengan pemetaan n Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel

Hitung titik hitam yang dapat tertangkap mata!