Prinsip Desain Siti Mukaromah

Traditional Software Design Waterfall model of software life cycle Project Definition Requirements Specification Integration and system testing Coding and Module testing Functional Design Module Design Architecture Design Operation and maintenance

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

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

Iteration is the key! 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 Testing dan desain harus diulang secara bersamaan Prototypes dapat digunakan dalam proses testing

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

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

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

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

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

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

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

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

Conceptual Model Dasar pemahaman bagaimana sebuah proses bekerja Tipe Design Model User Model Visual Image Design model Designer System image User’s model User People’s use of a thermostat. Some people constantly reset the temperature because they do not have the underlying conceptual model of the thermostat keeping the temperature constant. Discuss your toaster oven problem.

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

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

Forcing Function 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 Affordance : memperlihatkan hasil proses, mis : icon flat vs icon 3D

Automatic Learning 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 System Image Visibility Action Feedback Affordances Forcing Functions Automated Learning Mapping

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

Contoh Kompleks

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

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

Balance Sisi yang seimbang

Symmetry Replikasi elemen di tengah

Regularity Standard dan konsistensi

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

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

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

Unity Membuat tampilan yang seakan menyatu

Proportion 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 Efisiensi Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel Membership Form Membership Form Name: Address: City: State: Zip: Pubs: Total: OK Cancel

Groupings Mengelompokkan secara visual Jenis : Simple Boxed Background

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

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

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

Hitung titik hitam yang dapat tertangkap mata!