1. Interface Design

2. User Interface Design (Three Golden Rules)

3. User Interface Analysis and Design

4. Data Design

5. Component Level Design

Elemen-elemen perancangan interface untukperangkat lunak menjelaskan Bagaimana arusinformasi masuk dan keluar dari sistem, danbagaimana arus informasi tersebutberkomunikasi diantara komponen-komponen yang didefinisikan sebagai bagiandari arsitektur.

Fokus Interfaces Design > 3 Area

1. Inter-modular interface design

2. External interface design

3. Human-Computer Interface (HCI) design

1. Internal : merupakan desain interfaceantarmodul dalam PL yang dikendalikanoleh data yang harus mengalir di antaramodul-modul. Aliran transformasi dalamDFD merupakan pijakan utama dalamdesain ini selain kemampuan bahasapemrograman.

2. Eksternal: merupakan interface untukentitas eksternal (tidak termasuk manusia),misalnya sensor pada PL Safehome.

3. Manusia – Mesin: merupakan interfaceantara manusia dengan PL (Human –Computer Interface). Interface ini memilikitantangan besar karena berkaitan denganpengguna dengan berbagai karakter yanglebih sulit untuk dipelajari. Terdapat tigakategori pedoman desain HCI sbb.

1. Interaksi Umum Format konsisten

Perlindungan thd kegagalan

Berikan petunjuk singkat (tools tips) pada setiapbutton / ikon / nama

Berikan umpan balik

Konfirmasi untuk aksi destruktif (misal Hapus)

Ijinkan pembatalan (misal Undo)

Kurangi jumlah informasi yang harus diingat

Efisiensi dalam dialog, gerakan (tangan), pemikiran

Kategorikan aktivitas sejenis dan posisinya di layar

Sediakan Help yang sensitif konteks

Gunakan perintah dan nama2 yang pendek

2. Input Minimalkan jumlah aksi input (combo box, list, dsb.)

Konsisten

Berikan kemungkinan kustomisasi input (utk advance user)

Mode input harus fleksibel (mouse / keyboard)

Non-aktifkan button/ ikon yang tidak relevan dengan aksi

Berikan kesempatan untuk mengontrol aliran interaksi(mengubah, membetulkan, mengulang)

Sediakan Help

Jangan meminta aktivitas manual (perhitungan, tanggal, waktu, dsb) bila dapat dilakukan oleh PL

3. Output ◦ Tampilkan informasi yang relevan dg konteks ◦ Jangan membanjiri pemakai dg informasi◦ Gunakan label, singkatan, warna yg standar dan konsisten ◦ Peliharalah konteks visual saat pengguna melakukan zoom-in /

zoom-out ◦ Pesan kesalahan harus memiliki arti yang jelas ◦ Gunakan variasi huruf, indentasi, pengelompokan untuk

memudahkan pemahaman◦ Gunakan jendela untuk tipe-tipe informasi yang berbeda◦ Gunakan tampilan alami (bukan angka / grafik) bila

memungkinkan◦ Geografi layar dioptimalkan shg tidak ada jendela yang „hilang‟ /

sulit ditemukan◦ Berikan kemungkinan kustomisasi output (utk advance user) ◦ Jangan ada informasi / data yang tidak lengkap / hilang sebagian

Three golden rules – Theo Mandel

1. Menempatkan user di dalam kontrol “ Apa yang saya inginkan adalah sebuah sistem yang

membaca pikiran saya. Dia tahu apa yang ingin sayalakukan sebelum saya butuhkan dan membuat mudahsaya untuk melakukannya”

2. Mengurangi muatan memori user, Semakin banyak user harus mengingat, semakin

banyak interaksi kesalahan dengan sistem

Sistem seharusnya mengingat

3. Membuat Interface yang Konsisten

Mendefinisikan interaksi dalam sedemikian rupasehingga pengguna tidak dipaksa melakukantindakan yang tidak perlu atau tidak diinginkan

Menyediakan untuk interaksi yang fleksibel(pengguna memiliki berbagai preferensi)

Memungkinkan interaksi pengguna menjadiinterruptible dan reversibel

Merampingkan interaksi sebagai tingkat keterampilanmeningkat dan memungkinkan kustomisasi interaksi

Menyembunyikan internal teknis dari pengguna biasa

Desain untuk interaksi langsung dengan objek yangmuncul di layar

Mengurangi tuntutan pada memori jangkapendek pengguna (exp. Menyediakan isyaratvisual)

Menetapkan default bermakna ("reset" pilihanharus tersedia)

Mendefinisikan intuitif potongan pendek(mudah diingat)

Visual tata letak antarmuka pengguna harusdidasarkan pada familiar kiasan dunia nyata

Mengungkapkan informasi secara progresif

Memungkinkan pengguna untukmenempatkan tugas saat dalam konteks yangbermakna

Menjaga konsistensi di sebuah famili aplikasi

Jika model interaksi masa lalu telahmenciptakan harapan pengguna, tidakmembuat perubahan kecuali ada alasan yangbaik untuk melakukannya

*The models ◦ Para Engineer menetapkan model pengguna

◦ Software engineer menghasilkan model desain

◦ Pengguna akhir mengembangkan persepsi sistem

◦ Pelaksana menciptakan model implementasi

The process ◦ Pengguna, tugas, dan analisis lingkungan dan

pemodelan

◦ Desain antarmuka

◦ Konstruksi antarmuka

◦ Antarmuka validasi

User model◦ Profil Pengguna Akhir:

Awam

Knowledgeable, Pengguna intermittent,

Knowledgeable, Pengguna Sering

Design model◦ Menggabungkan data, Arsitektur, Interface, dan

Representasi prosedural dari perangkat lunak.

*User's model or system perception◦ user's mental image of system

Implementation model◦ tampilan dan nuansa antarmuka dan media pendukung

Memahami yang akhir-pengguna

Apa yang mungkin memotivasi danmemuaskan mereka

Bagaimana mereka dapat dikelompokkanmenjadi pengguna class atau profil yangberbeda

Apa model tampilan mereka dari sistem itu

Bagaimana user interface harus ditandaiuntuk memenuhi kebutuhan mereka

Studi software engineer tugas para pengguna manusiaharus menyelesaikan untuk mencapai tujuan mereka didunia nyata tanpa komputer dan memetakannya tersebutke dalam satu set sama tugas-tugas yang harusdilaksanakan dalam konteks user interface

Studi engineer perangkat lunak spesifikasi untuk solusiberbasis komputer yang ada dan berasal satu set tugasyang akan mengakomodasi model pengguna, desainmodel, dan persepsi sistem.

Software engineer dapat merancang pendekatanberorientasi objek dengan mengamati benda-benda dantindakan pengguna yang menggunakan di dunia nyata danmodel objek antarmuka setelah rekan-rekan dunia nyatamereka

⊲ Tahu pengguna, mengetahui tugas

Type of content ◦ Character-based reports

◦ Graphical displays

◦ Specialized information

Source of content ◦ Generated by components

◦ Acquired from data store

◦ Transmitted from systems external

Menetapkan tujuan dan maksud dari masing-masing tugas Memetakan setiap tujuan / niat untuk urutan tindakan

tertentu Menentukan urutan aksi tugas dan subtugas (user

skenario) Menunjukkan keadaan sistem pada saat skenario

pengguna dilakukan Mendefinisikan mekanisme kontrol objek dan tindakan Menunjukkan bagaimana mekanisme kontrol

mempengaruhi keadaan dari sistem Menunjukkan bagaimana pengguna menafsirkan keadaan

sistem dari informasi yang diberikan melalui antarmuka

Waktu respon sistem Waktu antara titik di mana pengguna memulai

beberapa tindakan kontrol dan waktu ketika sistemmerespon

Fasilitas Bantuan pengguna Terpadu, konteks bantuan sensitif terhadap add-on

bantuan Kesalahan informasi penanganan Pesan harus tidak menghakimi, menjelaskan masalah

tepatnya, dan menyarankan solusi valid Pelabelan perintah Berdasarkan pengguna kosakata, tata bahasa

sederhana, dan memiliki aturan yang konsisten untuksingkatan

1. Desain awal

2. Membangun prototipe antarmuka pertama

3. Pengguna mengevaluasi antarmuka

4. Evaluasi dipelajari oleh desainer

5. Modifikasi desain dibuat

6. Membangun prototipe berikutnya

7. Jika antarmuka tidak lengkap kemudianpergi ke langkah 3

Panjang dan kompleksitas dari spesifikasi antarmukaditulis memberikan indikasi jumlah pembelajaran yangdibutuhkan oleh pengguna sistem

Jumlah tugas pengguna dan jumlah rata-rata tindakan pertugas memberikan indikasi waktu interaksi dan efisiensisistem secara keseluruhan

Sejumlah tugas, tindakan, dan keadaan sistem dalammodel desain memberikan indikasi beban memori yangdibutuhkan pengguna sistem

Antarmuka gaya, fasilitas bantuan, dan penanganankesalahan protokol memberikan indikasi umumkompleksitas sistem dan tingkat penerimaan olehpengguna

Data Design Principles◦ Prinsip-prinsip analisis sistematis diterapkan untuk fungsi dan

perilaku juga harus diterapkan pada data.◦ Semua struktur data dan operasi yang akan dilakukan pada

masing-masing harus diidentifikasi.◦ Kamus data harus ditetapkan dan digunakan untuk

mendefinisikan data dan desain program.◦ Proses desain tingkat rendah harus ditunda sampai akhir dalam

proses desain.◦ Representasi dari struktur data harus diketahui hanya kepada

mereka modul yang harus menggunakan langsung dari data yangterdapat dalam dalam struktur data.

◦ Sebuah library struktur data yang berguna dan operasi harusdikembangkan.

◦ Sebuah desain perangkat lunak dan bahasa pelaksanaannya harusmendukung spesifikasi dan realisasi dari tipe data abstrak.

Tujuan dari desain tingkat komponen untukmenerjemahkan model desain ke dalam perangkatlunak operasional.

desain tingkat komponen terjadi setelah data,arsitektur, dan desain antarmuka ditetapkan.

desain komponen-tingkat mewakili software dengancara yang memungkinkan desainer untuk meninjauuntuk kebenaran dan konsistensi, sebelum dibangun.

Produk kerja yang dihasilkan adalah desainprosedural untuk setiap komponen software, diwakilimenggunakan tabel, atau notasi grafis, berbasis teks

Flowcharts◦ arrows for flow of control, diamonds for decisions,

rectangles for processes

Box diagrams◦ also known as Nassi-Scheidnerman charts

Decision table◦ subsets of system conditions and actions are associated

with each other to define the rules for processing inputsand events

Program Design Language◦ PDL - structured English or pseudocode used to describe

processing details

Modularity◦ notation supports development of modular software

Overall simplicity◦ easy to learn, easy to use, easy to write

Ease of editing◦ easy to modify design representation when changes are necessary

Machine readability◦ notation can be input directly into a computer-based development

system

Maintainability◦ maintenance of the configuration

Structure enforcement◦ enforces the use of structured programming constructs

Automatic processing◦ allows the designer to verify the correctness and quality of the

design

Data representation◦ ability to represent local and global data directly

Logic verification◦ automatic logic verification improves testing adequacy

Easily converted to program source code◦ makes code generation quicker

Program Studi Teknik Informatika STEI ITB

IF-ITB/YW/Revisi: Oktober 2008