User Interface Design Mata Kuliah Testing & Implementasi Sistem Program Studi Sistem Informasi 2013/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 Kesalahan Umum dalam Mendesain: ×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 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 perubahanperubahan 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. 2. 3. 4.
Analisis Interface Analisis User Analisis Tugas dan Pemodelan Analisis 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? • 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 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 tata ruang) – 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 akses aplikasi Standar internasional
28
Contoh Pesan Error Sistem-oriented vs. User-oriented System-oriented error message Error #27
?
Invalid patient id entered
OK
User-oriented error message
Patient J . Bates is not registered Clickkon on of registered Clic P Patients atientsf for or aalistlist ofregistered patients patients Click name Click on on Retr Retryy to to re-input re-inputaapatient patient name Click on or more inf ormation on Help Help ffor information
Cancel Patients
Help
Retry
Cancel
Siklus Evaluasi Desain
30
