Free Powerpoint Templates

User Interface Design

Mata Kuliah Testing & Implementasi Sistem

Program Studi Sistem Informasi 2013/2014

STMIK Dumai

-- Materi 8 --

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 memberikangambaran interface dari perangkat lunak yang akan dibuat

• Kustomer mempercayakan tim konsultanuntuk mendesain interface software, yang kemudian mereka eveluasi

• Dari sini, ada beberapa hal dan aturan yang harus analis perhatikan dalam mendesaininterface software …

3

Desain Interface

Mudah digunakan?

Mudah dimengerti?

Mudah dipelajari?

4

Desain Interface

×Tidak konsisten

×Terlalu banyak mengingat

×Tidak ada panduan

×Tidak ada sensitivitas

×Respon buruk

×Arcane/unfriendly

Kesalahan Umum dalam Mendesain:

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 (bersifatrefleks/spontan tanpa dipikirkan).

• Layout visual dari interface harus berdasarkangambaran 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 informasipendukung yang menggambarkan syntax dansemantik 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 untukpersiapan 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 ada

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

16

4 Analisis dalam Desain Interface

1. Analisis Interface

2. Analisis User

3. Analisis Tugas dan Pemodelan

4. Analisis Isi Tampilan

Mari kita bahas satu per satu …

17

Analisis Interface

• Analisis interface berarti pemahamanterhadap :

1) Orang-orang (end-users) yang akanberinteraksi dengan sistem melalui interface,

2) Tugas-tugas yang harus dilakukan end-usersuntuk menyelesaikan pekerjaan mereka,

3) Isi yang harus dipresentasikan sebagai bagiandari 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 dimilikioleh rata-rata user?

• Apakah user mampu belajar dari materitertulis atau dibutuhkan pelatihan sistemsecara langsung?

• Apakah user ahli dalam mengetik di keyboard atau sebaliknya?

• Berapa kisaran umur user secara rata-rata? 19

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 dipakai atau hanya

software yang dipakai sekali-sekali?20

Analisis User … (3)

• Apa bahasa utama yang digunakan user? Bagaimana kemampuan bahasa user?

• Apa konsekuensi jika user melakukankesalahan dalam penggunaan sistem?

• Apakah user ahli dalam istilah-istilah yang ada di dalam sistem?

• Apakah user ingin tahu tentang teknologiyang ada di balik tampilan sistem?

21

Analisis Tugas dan Pemodelan

• Dilakukan dengan menjawab pertanyaan-pertanyaanberikut…

– 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 harusdilakukan?

– Bagaimanakah hierarki pekerjaan tersebut?

22

Analisis Tugas dan Pemodelan

Ada 4 Istilah:

• Use-cases menentukan interaksi dasar

• Task elaboration menyempurnakan interaksitugas-tugas

• Object elaboration menentukan interface objek (classes)

• Workflow analysis menentukan bagaimanasebuah proses diselesaikan ketika banyakorang dan peran yang terlibat

23

Analisis Isi Tampilan (Display)

• Apakah tipe data yang berbeda ditempatkan padalokasi yang konsisten pada layar? (misal: foto/gambar selalu diletakkan di sudut kanan ataslayar)

• Dapatkah user melakukan kustomisasi lokasi isipada layar?

• Apakah pada layar sudah terdapat semua isi yang dibutuhkan user?

• Jika laporan dengan ukuran besar harusdipresentasikan bagimana mekanisme partisinyasupaya mudah dipahami?

24

Analisis Isi Tampilan (Display)

• Apakah ada mekanisme untukmenampilkan rangkuman dari data dalamukuran besar?

• Apakah output grafik dapat disesuaikandengan ukuran display piranti (device) yang digunakan user?

• Bagaimana penggunaan warna tampilan?

• Bagaimana pesan kesalahan danperingatan yang ditampilkan kepada user?

25

Langkah-Langkah Desain

Interface

• Gunakan informasi yang dikembangkan selamaanalisis interface, tentukan objek dan aksi interface (operasi).

• Tentukan event (aksi user) yang akan mengakibatkankeadaan interface berubah. Modelkan perilaku ini.

• Gambarkan setiap keadaan interface sebenarnyayang akan tampak di depan user.

• Indikasikan bagaimana user mengintepretasikankeadaan sistem dari informasi yang disediakanmelalui interface.

26

Pola-Pola Desain Interface

• Pola-pola desain interface tersedia untuk:

– The complete UI

– Page layout (susunan tata ruang)

– Forms and input

– Tables

– Direct data manipulation

– Navigation

– Searching

– Page elements

– e-Commerce27

Isu-Isu Desain Interface

• Waktu respon

• Fasilitas bantuan (help)

• Penanganan Error

• Label untuk menu dan perintah

• Kemudahan akses aplikasi

• Standar internasional

28

Contoh Pesan Error

Sistem-oriented vs. User-oriented

Error #27

Invalid patient id entered?OK Cancel

Patient J . Bates is not registered

Clic k on P atients f or a list of registered patientsClick on Retr y to re-input a patient nameClick on Help f or more inf ormation

Patients Help Retry Cancel

System-oriented error messageUser-oriented error message

Click on Patients for a list of registered patientsClick on Retry to re-input a patient nameClick on Help for more information

Siklus Evaluasi Desain

30