Prinsip Desain Siti Mukaromah.

Presentasi berjudul: "Prinsip Desain Siti Mukaromah."— Transcript presentasi:

1 Prinsip Desain Siti Mukaromah

2 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

3 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

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

5 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

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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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.

15 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

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

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

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

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

20 Three Conceptual Models
Design Model User’s Model System Image Visibility Action Feedback Affordances Forcing Functions Automated Learning Mapping

21 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

22 Contoh Kompleks

23 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

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

25 Balance Sisi yang seimbang

26 Symmetry Replikasi elemen di tengah

27 Regularity Standard dan konsistensi

28 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

29 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

30 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

31 Unity Membuat tampilan yang seakan menyatu

32 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

33 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

34 Groupings Mengelompokkan secara visual Jenis : Simple Boxed Background

35 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

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

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

38

39 Hitung titik hitam yang dapat tertangkap mata!