Top Banner
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’ s Approach, 6/e and are provided with permission by R.S. Pressman & Associates, I nc., copyright © 1996, 2001, 2005  1 Catatan Kuliah Rekayasa Perangkat Lunak  ( Softw are Eng inee ring )   Bagian 2 copyright © 2006 R.S. Pressman & Associates, Inc M. Idham Ananta Timur, S.T., M.Kom. Hanya digunakan di lingkungan Universtias Hanya boleh digandakan untuk mahasiswa di lingkungan universitas yang menggunakan buku Software Engineering: A Practitioner's Approach. Selain itu dilarang keras menggandakan. Presentasi, slide atau hardcopy tidak boleh digunakan untuk short courses, seminar industri, atau kepentingan konsultasi.
19

Pert 10 Desain User Interface

Apr 14, 2018

Download

Documents

Lim Cia Chien
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 1/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Catatan Kuliah 

Rekayasa Perangkat Lunak (Software Eng ineering )  

Bagian 2 

copyright © 2006

R.S. Pressman & Associates, IncM. Idham Ananta Timur, S.T., M.Kom.

Hanya digunakan di lingkungan UniverstiasHanya boleh digandakan untuk mahasiswa di lingkungan universitas

yang menggunakan buku Software Engineering: A Practitioner's Approach.Selain itu dilarang keras menggandakan.

Presentasi, slide atau hardcopy tidak boleh digunakan untukshort courses, seminar industri, atau kepentingan konsultasi.

Page 2: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 2/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Software Engineering: A Practitioner’s Approach,

6/e  

Bab 12

Desain User Interface

copyright © 1996, 2001, 2005 

R.S. Pressman & Associates, Inc.

For University Use Only

May be reproduced ONLY for student use at the university level

when used in conjunction with Software Engineering: A Practitioner's Approach.

 Any other reproduction or use is expressly prohibited.

Page 3: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 3/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Desain Interface

Easy to use?

Easy to understand?

Easy to learn?

Page 4: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 4/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Desain Interface

Tidak konsisten

Terlalu banyak mengingat

Tidak ada panduan

Tidak ada sensitivitasRespon buruk

Arcane/unfriendly

Kesalahan Desain Umum 

Page 5: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 5/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Petunjuk Emas

Tempatkan user dalam kontrol

Kurangi beban memori user 

Buat interface konsisten

Page 6: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 6/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Tempatkan user dalam Control

Tentukan mode interaksi dalam sebuah cara dimana tidakmemaksa user untuk melakukan aksi yang tidak perlu atau

tidak dikehendaki.

Menyediakan interaksi yang fleksibel.

Memungkinkan interaksi user untuk diinterupsi dan dibatalkan

(undo).

Mempersingkat interaksi sesuai dengan tingkat penguasaan

dan memungkinkan interaksi dikustomisasi.

Sembunyikan hal-hal teknis dari user.

Desain interaksi langsung dengan objek yang tampak di

layar. 

Page 7: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 7/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Kurangi beban memori user 

Kurangi permintaan memori „short-term‟.

Buat default yang bermakna.

Tentukan shortcut yang intuitif.

Layout visual dari interface harus berdasal metafora dunia

nyata.

Buka informasi dengan pola progresif.

Page 8: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 8/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Buat Interface yang

Konsisten

Memungkinkan user untuk mengambil langkah yang ada

menjadi konteks yang berarti.

Kelola konsistensi dalam keluarga aplikasi.

Jika model interaktif yang lalu telah memenuhi harapan

user, jangan membuat perubahan kecuali ada alasan yangcukup kuat.

Page 9: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 9/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005 

Model Desain User Interface

User model — profil semua user pada sistem Design model — realisasi desain dari model user 

Mental model (system perception) — gambaran

mental user terhadap apakah interface tersebut

Implementation model — “look and feel”interface dipasangkan dengan informasi

pendukung yang menggambarkan syntax dan

semantik interface

Page 10: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 10/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Proses Desain User Interface

Page 11: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 11/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Analisis Interface

 Analisis interface berarti pemahaman terhadap : (1) orang2x (end-users) yang akan berinteraksi dengan sistem

melalui interface;

(2) tugas2x yang harus dilakukan end-users untuk

menyelesaikan pekerjaan mereka,

(3) isi yang harus dipresentasikan sebagai bagian dari interface

(4) lingkungan dimana tugas2x ini dilakukan.

Page 12: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 12/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Analisis User 

 Are users trained professionals, technician, clerical, or manufacturing workers?

What level of formal education does the average user have?  Are the users capable of learning from written materials or have they expressed a

desire for classroom training?

 Are users expert typists or keyboard phobic?

What is the age range of the user community?

Will the users be represented predominately by one gender?

How are users compensated for the work they perform? Do users work normal office hours or do they work until the job is done?

Is the software to be an integral part of the work users do or will it be used onlyoccasionally?

What is the primary spoken language among users?

What are the consequences if a user makes a mistake using the system?

 Are users experts in the subject matter that is addressed by the system? Do users want to know about the technology the sits behind the interface?

Page 13: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 13/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Analisis Tugas dan Pemodelan

Jawab pertanyaan2x berikut … 

 Apa saja pekerjaan user yang akan dilakukan?  Apa tugas-tugas dan subtugas yang harus user lakukan

untuk menyelesaikan pekerjaan mereka?

 Apa saja permasalahan spesifik dari domain objek yang akandimanipulasi user ketika pekerjaan tersebut dilakukan?

Seperti apa urutan pekerjaan yang harus dilakukan?

Bagaimanakah hierarki pekerjaan tersebut? Use-cases menentukan interaksi dasar 

Task elaboration menyempurnakan interaksi tugas2x

Object elaboration menentukan interface objek (classes)

Workflow analysis menentukan bagaimana sebuah proses

diselesaikan ketika banyak orang dan peran terlibat 

S i l Di

Page 14: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 14/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Swimlane Diagram

Memungkinkan untuk menampilkan aliran aktivitas yang digambarkan oleh use-cas

dan di saat yang sama mengindikasikan aktor yang mana, atau class analisis yang

mempunyai tanggungjawab terhadap tindakan yang digambarkan oleh kotak aktivit

patient pharmacist physician

r e q u e s t s t h a t a

presc r ip t i on be ref i l l ed

no refillsremaining

checks patient

r e c o rd s

determines s tatus of  

presc r ip t i on

refills

remaining

refill not

allowed

approves refill

evaluates a lter nat i ve

medication

none

r e c e iv e s r e q u e s t t o

cont act ph ysician

alternative

available

checks i nventory for 

re f i ll or a lter nat i ve

out of stockrecei ves out o f s to ck

not i f i cat i on

receives t ime/date

to p i ck up

in stock

picks up

presc r ip t i on

fi l ls

presc r ip t i on

Figu re 12.2 Swimlane diagram for prescript ion refill fun ct ion

Page 15: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 15/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Analisis Isi Tampilan  Apakah tipe data yang berbeda ditempatkan pada lokasi yang

konsisten pada layar ?? Dapatkah user melakukan kustomisasi lokasi isi pada layar?

 Apakah identifkasi pada layar sudah diberikan pada semua isi?

Jika laporan dengan ukuran besar harus dipresentasikanbagimana mekanisme partisinya supaya mudah dipahami ?

 Apakah ada mekanisme yang tersedia untuk menampilkanrangkuman dari data dalam ukuran besar ?

 Apakah output grafis dapat disesuaikan dengan ukuran displaypiranti yang digunakan user ?

Bagaimana penggunaan warna untuk meningkatkanpemahaman?

Bagaimana pesan kesalahan dan peringatan ditampilkan kepadauser ?

Page 16: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 16/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Langkah-langkah desain

Interface

Menggunakan informasi yang dikembangkan selamananalisis interface, tentukan objek dan aksi interfacce. 

Tentukan event yang akan mengakibatkan keadaan

interface berubah. Modelkan perilaku ini.

Gambarkan setiap keadaan interface sebagaimanatampak di depan user .

Indikasikan bagaimana user mengintepretasikan

keadaan sistem dari informasi yang disediakan melalui

interface.

Page 17: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 17/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Interface Design Patterns

Patterns tersedia untuk The complete UI

Page layout

Forms and input

Tables Direct data manipulation

Navigation

Searching

Page elements

e-Commerce

Page 18: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 18/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Isu-isu Desain

Response time

Help facilities

Error handling

Menu and command labeling

 Application accessibility

Internationalization

Page 19: Pert 10 Desain User Interface

7/27/2019 Pert 10 Desain User Interface

http://slidepdf.com/reader/full/pert-10-desain-user-interface 19/19

These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are providedwith permission by R.S. Pressman & Associates, Inc., copyright © 1996, 2001, 2005  1

Siklus Evaluasi Desain