User Interface Design
Mata Kuliah Testing & Implementasi Sistem Program Studi Sistem Informasi 2013/2014 STMIK Dumai -- Materi 8 --
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
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 …
Desain Interface
Mudah digunakan?
Mudah dimengerti?
Mudah dipelajari?
Desain Interface
×Tidak konsisten
×Terlalu banyak mengingat
×Tidak ada panduan
×Tidak ada sensitivitas
×Respon buruk
×Arcane/unfriendly
Kesalahan Umum dalam Mendesain:
Aturan Emas ( Golden Rules )
• Tempatkan user dalam control
• Kurangi beban memori user
• Buat interface konsisten
Mari kita bahas satu per satu …
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.
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.
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.
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
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
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.
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 ada 6. Meningkatkan waktu yang diperlukan untuk
memvalidasi aplikasi
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.
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.
Proses Desain User Interface
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 …
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.
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?
• 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 dipakai atau hanya
software yang dipakai sekali-sekali?
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?
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?
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
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?
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?
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.
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-Commerce
Isu-Isu Desain Interface
• Waktu respon
• Fasilitas bantuan (help)
• Penanganan Error
• Label untuk menu dan perintah
• Kemudahan akses aplikasi
• Standar internasional
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 patients Click on Retr y to re-input a patient name Click on Help f or more inf ormation
Patients Help Retry Cancel
System-oriented error message User-oriented error message
Click on Patients for a list of registered patients Click on Retry to re-input a patient name
Click on Help for more information
