Post on 14-Apr-2018
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.
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.
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?
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
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
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.
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.
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.
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
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
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.
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?
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
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
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 ?
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.
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
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
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