User Interface Design

Mata Kuliah Testing & Implementasi

Sistem
Program Studi Sistem Informasi
2 013/2014
STMIK Dumai
-- Materi 8 --
Free Powerpoint Templates
This presentation is revised by Hazlinda A., STMIK, 2013
 Acknowledgement
• [Pressman, 2010] Pressman, Roger S. Software
Engineering: A Practitioner’s Approach. New
York:McGraw-Hill Higher Education, 2010. Print

• Materi dari Chapter 11 - User Interface Design

[Pressman, 2010]
• Materi dalam slide ini sebagian besar diambil dari
slide buku [Pressman, 2010], mohon tidak
digunakan untuk keperluan lain selain kuliah
Testing dan Implementasi Sistem
2
Analis Merancang Interface?

• Terkadang kustomer tidak memberikan

gambaran interface dari perangkat lunak
yang akan dibuat
• Kustomer mempercayakan tim konsultan
untuk mendesain interface software, yang
kemudian mereka eveluasi
• Dari sini, ada beberapa hal dan aturan yang
harus analis perhatikan dalam mendesain
interface software …

3
 Desain Interface

Mudah dipelajari?
Mudah digunakan?
Mudah dimengerti?

4
 Desain Interface

Keessaal/ahan Umum Mennddeessa

dalam ainin: :
×Tidak konsisten
×Terlalu banyak
mengingat
×Tidak ada panduan
×Tidak ada sensitivitas
×Respon buruk
×Arcane/unfriendly

5
Aturan Emas (Golden Rules)

• Tempatkan user dalam control

• Kurangi beban memori user
• Buat interface konsisten

Mari kita bahas satu per satu …

6
Tempatkan User dalam Control
• Tentukan mode interaksi dalam sebuah cara dimana tidak
memaksa 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
Kurangi beban memori user
• Kurangi permintaan memori jangka pendek
(short-term memory).
• Buat default yang bermakna.
• Tentukan shortcut yang intuitif (bersifat
refleks/spontan tanpa dipikirkan).
• Layout visual dari interface harus berdasarkan
gambaran dunia nyata.
• Buka informasi dengan pola bertingkat-
tingkat.

8
Buat Interface yang Konsisten

• Memungkinkan user untuk mengambil

langkah yang ada menjadi konteks yang
berarti.
• Kelola konsistensi dalam serangkaian
aplikasi.
• Jika model interaktif yang lalu telah
memenuhi harapan user, jangan
membuat perubahan kecuali ada alasan
yang cukup kuat.

9
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 interface
tersebut
• Implementation model — “look and
feel” interface dipasangkan dengan
informasi pendukung yang
menggambarkan syntax dan semantik
interface
10
Prinsip-Prinsip Desain Interface
• Merefleksikan model mental user
merefleksikan kombinasi pengalaman dunia nyata,
pengalaman
• dari software lain dan penggunaan komputer secara umum.
Explicit and Implicit Action
– Explicit Action adalah kondisi yang jelas dalam memberikan
petunjuk untuk memanipulasi suatu objek
– Implicit Action adalah kondisi yang hanya memberikan
• kesan visual untuk memanipulasi objek
Direct Manipulation
user mendapatkan dampaknya dengan segera setelah
• melakukan suatu aksi
User Control
mengizinkan user mengontrol dan menginisialisasi aksi 11
Prinsip-Prinsip Desain Interface
• Feedback and Communication
selalu memberitahukan user apa yang terjadi dari suatu
aksi.
• Consistency
user dapat mentransfer pengetahuan dan kemampuan
dari suatu aplikasi ke aplikasi lain
• WYSIWYG (What You See Is What You Get)
tidak ada perbedaan antara yang dilihat di layar dengan
hasil outputnya.
• Aesthetic Integrity
informasi diorganisasikan dengan baik dan konsisten
dengan prinsip desain visual yang baik.
12
 Pertimbangan dalam Desain
• Beberapa hal yang perlu dipertimbangan untuk
persiapan software jangka panjang:
1. Aplikasi semakin membesar dan menjadi semakin
lambat
2. User interface pada aplikasi semakin kompleks
3. Waktu yang diperlukan untuk mengembangkan
fitur baru menjadi lebih lama
4. Dokumentasi aplikasi dan dokumen help menjadi
lebih melebar.
5. Resiko adanya efek pada fitur yang sudah
6. ada Meningkatkan waktu yang diperlukan
untuk memvalidasi aplikasi
13
 Faktor Software yang Baik
• High Performance –> software yang dibuat mempunyai
performance yang tinggi, walaupun digunakan oleh
banyak user dalam satu waktu.
• Mudah digunakan –> software yang dibuat mempunyai
sifat easy to use (mudah digunakan) sehingga tidak
membutuhkan proses yang lama untuk mempelajarinya.
• Penampilan yang baik–> software mempunyai
antarmuka (interface) yang menarik, sehingga user tidak
merasa jenuh.
• Reliability –> kehandalan, sejauh mana suatu software
dapat diharapkan untuk melakukan fungsinya sesuai
dengan ketelitian yang diperlukan.
14
 Faktor Software yang Baik

• Mampu beradaptasi –> sejauh mana software yang

dibuat mampu beradaptasi dengan perubahan-
perubahan teknologi yang ada.
• Interoperability –> software harus mampu
berinteraksi dengan aplikasi lain. Biasanya
dapat
dilihat dari adanya fasilitas untuk eksport dan
• import
data dari aplikasi lain.
Mobility –> software yang dibuat dapat berjalan
pada bermacam-macam sistem operasi. 15
Proses Desain User Interface

Interfac validatio Interfac analysi an modelin

e n e s d g

Interlace lnterf desig

construction ac n

16
4 Analisis dalam Desain Interface
1. Analisis Interface
2. Analisis User
3. Analisis Tugas dan
4. Analisis Pemodelan
Isi Tampilan

Mari kita bahas satu per satu … 

17
 Analisis Interface

• Analisis interface berarti pemahaman

terhadap :
1) Orang-orang (end-users) yang akan
berinteraksi dengan sistem melalui interface,
2) Tugas-tugas yang harus dilakukan end-users
untuk menyelesaikan pekerjaan mereka,
3) Isi yang harus dipresentasikan sebagai bagian
dari interface,
4) Lingkungan dimana tugas-tugas ini
dilakukan.
18
 Analisis User

• Apakah user adalah pekerja profesional,

teknisi, atau admin?
• Di level mana tingkat edukasi yang dimiliki
oleh rata-rata user?
• Apakah user mampu belajar dari materi
tertulis atau dibutuhkan pelatihan sistem
secara langsung?
• Apakah user ahli dalam mengetik di
keyboard
• atau sebaliknya?
19
Berapa kisaran umur user secara rata-rata?
 Analisis User … (2)

• Apakah user dapat direpresentasikan tanpa

mempertimbangkan gender?
• Bagaimana performa kerja user?
• Apakah user bekerja di jam kerja biasa (office
hours) atau bekerja sampai target
kerjanya
• selesai?
Apakah software yang yang dibuat
merupakan software harian yang rutin
20

dipakai atau hanya software yang dipakai

 Analisis User … (3)

• Apa bahasa utama yang digunakan user?

Bagaimana kemampuan bahasa user?
• Apa konsekuensi jika user melakukan
kesalahan dalam penggunaan sistem?
• Apakah user ahli dalam istilah-istilah
yang
• ada di dalam sistem?
Apakah user ingin tahu tentang teknologi
yang ada di balik tampilan sistem?
21
Analisis Tugas dan Pemodelan

• Dilakukan dengan menjawab pertanyaan-pertanyaan

berikut…
– Apa saja pekerjaan yang akan dilakukan user?
– Apa tugas-tugas dan sub-tugas yang harus user
lakukan untuk menyelesaikan pekerjaan mereka?
– Seperti apa urutan pekerjaan yang harus
dilakukan?
– Bagaimanakah hierarki pekerjaan tersebut?

22
Analisis Tugas dan Pemodelan
Ada 4 Istilah:
• Use-cases menentukan interaksi dasar
• Task elaboration menyempurnakan
interaksi tugas-tugas
• Object elaboration menentukan interface
objek (classes)
• Workflow analysis menentukan bagaimana
sebuah proses diselesaikan ketika banyak
orang dan peran yang terlibat

23
Analisis Isi Tampilan (Display)
• Apakah tipe data yang berbeda ditempatkan pada
lokasi yang konsisten pada layar? (misal:
foto/gambar selalu diletakkan di sudut kanan atas
layar)
• Dapatkah user melakukan kustomisasi lokasi
isi pada layar?
• Apakah pada layar sudah terdapat semua isi yang
dibutuhkan user?
• Jika laporan dengan ukuran besar harus
dipresentasikan bagimana mekanisme partisinya
supaya mudah dipahami?
24
Analisis Isi Tampilan (Display)

• Apakah ada mekanisme untuk

menampilkan rangkuman dari data dalam
ukuran besar?
• Apakah output grafik dapat disesuaikan
dengan ukuran display piranti (device) yang
digunakan user?
• Bagaimana penggunaan warna tampilan?
• Bagaimana pesan kesalahan dan
peringatan yang ditampilkan kepada user?
25
 Langkah-Langkah Desain
Interface
• Gunakan informasi yang dikembangkan selama
analisis interface, tentukan objek dan aksi
interface (operasi).
• Tentukan event (aksi user) yang akan
mengakibatkan
• keadaan interface berubah. Modelkan perilaku ini.
Gambarkan setiap keadaan interface sebenarnya
• yang akan tampak di depan user.
Indikasikan bagaimana user
mengintepretasikan keadaan sistem dari
informasi yang disediakan melalui interface.
26
Pola-Pola Desain Interface

• Pola-pola desain interface tersedia untuk:

– The complete UI
– Page layout (susunan ruang)
– tata
– Forms and input
– Tables
– Direct data manipulation
– Navigation
– Searching
– Page elements
e-Commerce 27
Isu-Isu Desain Interface

• Waktu respon
• Fasilitas bantuan (help)
• Penanganan Error
• Label untuk menu dan
• perintah
• Kemudahan
Standar akses aplikasi
internasional

28
 Contoh Pesan Error

Sistem-oriented vs. User-oriented

User-oriented error
System-oriented error message
message

?
Error #27 Patient J . Bates is not
registered
Invalid patient id entered Clic konP atientsf
Click on Patients for a list Click
oralistofregisteredpatients of on Retr
yregistered
to re-inputpatients
a patient name Click on
Help f or
Click on more
Retry inf ormation
to re-input a patient name
OK Cancel Click on Help for more information

Patients Help Retry

Cancel
Siklus Evaluasi Desain
preliminary
design

build
prototype #1
interface

build prototype
#n interface

user
evaluate's
interface
design
modifications
are made

evaluation
is studied by
designer

Interface design
is complete 30