Interface Design.

Slides:



Advertisements
Presentasi serupa
PERANCANGAN PERANGKAT LUNAK (SOFTWARE DESIGN)
Advertisements

DESAIN ARSITEKTUR PERANGKAT LUNAK
Perancangan Perangkat Lunak lanjutan Kuliah - 7
Interaksi Manusia dan Komputer
KONSEP DESAIN SOFTWARE DATABASE
DESAIN DAN NOTASI DIALOG
PENGENALAN ANALISA SISTEM BERORIENTASI OBYEK
Interaksi Manusia dan Komputer
FORM PADA WEB WEB 1 KELAS X.
Prototyping Aplikasi Teknologi Informasi
MEMAHAMI RAGAM DIALOG.
Interaksi Manusia dan Komputer
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by.
Teori, Prinsip, dan Pedoman
These slides are designed to accompany Software Engineering: A Practitioner’s Approach, 7/e (McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.1.
Teori , Prinsip, dan Pedoman
DESAIN IMK-M5.
Dialogue Notations and design
Bina Sarana Informatika
Interaksi Manusia dengan Komputer
Antar Muka Pengguna.
Interaksi Manusia & Komputer Pendahuluan
Interaksi Manusia & Komputer Desain
Rekayasa Perangkat Lunak Model Proses PL
Apakah “Praktek”? Praktek adalah sejumlah konsep, prinsip, metode dan tools that yang harus dimiliki ketika software direncanakan dan dikembangkan. Dia.
INTERAKSI MANUSIA & KOMPUTER
Pemrograman Visual Oleh : Erni Fatmawati.
Human Computer Interaction (HCI)
Perancangan Antar Muka
Interface Metaphors dan Model Konseptual
Desain User Interface dan Input
KONSEP INTERFACE
Operating System Structure
Interaksi Manusia Dan Komputer
Sistem Basis Data Pendahuluan
Pendahuluan.
Prinsip Antarmuka Pengguna
Step 3: Memahami Prinsip Desain Antarmuka
PERANCANGAN ANTARMUKA/TAMPILAN
Interaksi Manusia Dan Komputer
Panduan Merancang Interface
Analisa & Perancangan sistem
R.S. Pressman & Associates, Inc
Materi Habis Uts IMK Prototyping
RPL.
Implementation Support
Mobile Device User Interface
Materi Rekayasa Perangkat Lunak
10 Perancangan Arsitektural
Sikllus Pengembangan Aplikasi Multimedia
INTERAKSI MANUSIA DAN KOMPUTER
Hanya digunakan di lingkungan Universtias
Sistem Operasi Komputer
REKAYASA PERANGKAT LUNAK
Pengenalan Borland Delphi 7.0
PENANGANAN KESALAHAN DAN HELP DOKUMENTASI
Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer Antar Muka, Desain Layar, dan Usabilitas dari situs Harry Suryadi ( ) Henry Santoso ( )
Pendahuluan.
INTERAKSI MANUSIA DAN KOMPUTER
Hanya digunakan di lingkungan Universtias
Pengertian IMK Interaksi adalah komunikasi antara dua atau lebih objek yang saling mempengaruhi satu sama lain.
PRAKTEK RPL.
Rekayasa Perangkat Lunak
INTERAKSI MANUSIA DAN KOMPUTER. PENGERTIAN DESAIN  Desain adalah ilmu yang mempelajari konsep komunikasi dan ungkapan kreatif, teknik dan media untuk.
INTERAKSI MANUSIA & KOMPUTER HUMAN COMPUTER INTERACTION.
Interface Design.
Tim RPL Progdi Teknik Informatika
Dialogue Notation & Design Part-2
IMK Notasi & Desain Dialog.
Transcript presentasi:

Interface Design

Perancangan Antarmuka Elemen-elemen perancangan antarmuka untuk perangkat lunak menjelaskan Bagaimana arus informasi masuk dan keluar dari sistem, dan bagaimana arus informasi tersebut berkomunikasi diantara komponen yang didefinisikan sebagai bagian dari arsitektur. * SEPA 8th ed, Roger S. Pressman 2/23/2019 Interface Design - RPL - NH@2016

Fokus Perancangan Antarmuka Desain antarmuka Inter-modular Dikendalikan oleh aliran data antara modul Berkaitan erat dengan desain tingkat komponen Desain antarmuka eksternal Antarmuka antar aplikasi Antarmuka antar perangkat lunak dan produsen dan / atau konsumen informasi non-manusia Desain antarmuka manusia-komputer Komunikasi antara manusia dan mesin Manusia sebagai pengguna memiliki berbagai karakter yang lebih sulit dipelajari. * SEPA 8th ed, Roger S. Pressman 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 3 Aturan Emas 3 aturan emas Theo Mandel [Man97] dalam perancangan antarmuka pengguna: Tempatkan pengguna sebagai pengendali Apa yang saya inginkan adalah sebuah sistem yang membaca pikiran saya. Dia tahu apa yang ingin saya lakukan sebelum saya butuhkan dan membuat mudah untuk saya untuk melakukannya Kurangi beban memori pengguna Semakin banyak user harus mengingat, semakin banyak interaksi kesalahan dengan sistem. Sistem seharusnya mengingat Buat antarmuka yang bersifat konsisten 2/23/2019 Interface Design - RPL - NH@2016

Tempatkan Pengguna sebagai Pengendali Mendefinisikan interaksi sehingga tidak memaksa pengguna untuk melakukan aksi-aksi yang tidak diperlukannya dan tidak dikehendakinya Sediakan interaksi yang bersifat fleksibel (pilihan interaksi lain) e.g.: keyboard, mouse, pena digitizer, layar sentuh / suara Memungkinkan interaksi pengguna yang dapat diinterupsi atau dibatalkan Sembunyikan hal-hal internal yang bersifat sangat teknis dari pengguna Rancang interaksi langsung dengan objek-objek yang tampak di layar monitor pengguna (WYSIWYG) Place user in control Add 1) spell check sambil edit Add 2) keyboard, mouse, suara, dll Add 3) bisa melakukan hal lain dulu tanpa membatalkan seq. aksi; bisa cancel Add 4) makro untuk user yg sudah pintar Add 5) user tidak perlu tahu jenis OS yg digunakan, file system, dll Add 6) WYSIWYG  user merasa memegang kontrol 2/23/2019 Interface Design - RPL - NH@2016

Kurangi Beban Memori Pengguna Kurangi short-term memory pengguna (menyediakan ikon visual) Memberi default (pilihan "reset“) Mendefinisikan tombol pemercepat (shortcut) yang intuitif. (Alt+P untuk printer) Tampilan visual antarmuka pengguna harus didasarkan pada metafora dunia nyata yang familiar (informasi buku bank, layout mesin) Tampilan informasi dalam bentuk progresif (informasi umum dilanjutkan dengan detail) 2/23/2019 Interface Design - RPL - NH@2016

Antarmuka yang Konsisten Memungkinkan pengguna untuk mengetahui hal yang sedang dilakukan dalam konteks yang bermakna Memelihara konsistensi antar sejumlah aplikasi yang serupa Jika model interaktif sebelumnya dibuat berdasarkan harapan pengguna, jangan membuat perubahan apa pun kecuali ada alasan yang kuat 2/23/2019 Interface Design - RPL - NH@2016

Model Antarmuka Pengguna Empat model yang berbeda memainkan peranan saat suatu antarmuka pengguna dianalisis dan dirancangan: Pengguna menentukan Model Pengguna SW engineer membuat Model Perancangan End-user membangun Model Mental atau Persepsi Sistem Pengembang membuat Model Implementasi 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Model Pengguna Model Pengguna dibuat untuk mendapatkan profil para pengguna akhir sistem (end user) Pengguna dapat dikelompokkan sebagai berikut [Shn04]: Pengguna Pemula Pengguna berpengetahuan yang tidak terlalu sering menggunakan sistem Pengguna berpengetahuan yang sering menggunakan sistem * SEPA 8th ed, Roger S. Pressman 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Model Desain Model desain dari seluruh sistem menggabungkan data, arsitektur, antarmuka, dan representasi prosedural dari perangkat lunak. 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Model Mental Model Mental (Perspeksi Sistem) adalah gambaran sistem yang ada di kepala para pengguna akhir Tingkat ketepatan deskripsi sangat bergantung pada profil-profil pengguna seperti dibahas sebelumnya 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Model Implementasi Model Implementasi pada dasarnya menggabungkan manifestasi-manifestasi yang tampak dari luar sistem berbasis komputer, digabungkan dengan informasi-informasi pendukung lainnya (buku-buku, video, dll) yang mendiskripsikan sintak-sintak dan semantik antarmuka pengguna Saat model implementasi dan model mental pengguna sesuai, para pengguna secara umum akan merasa nyaman dengan perangkat lunak dan dapat menggunakannya secara efektif 2/23/2019 Interface Design - RPL - NH@2016

Analisis dan Perancangan Antarmuka Pengguna Proses analisa dan perancangan Interface bersifat Iteratif dan dapat direpresentasikan dengan model Spiral Analisa & Perancangan Interface mencakup 4 aktifitas kerangka kerja: User, Task & Environment Analysis (Analisis Antarmuka) Interface Design (Perancangan Antarmuka) Implementation (Konstruksi Antarmuka) Interface Validation (Validasi Antarmuka) 2/23/2019 Interface Design - RPL - NH@2016

Proses Perancangan Antarmuka 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Analisis Antarmuka Orang-orang (para pengguna akhir) yang akan berinteraksi dengan sistem melalui antarmuka pengguna yang dimilikinya Pekerjaan-pekerjaan yang harus dilakukan oleh para pengguna akhir Isi yang harus dipresentasikan sebagai bagian dari suatu antarmuka pengguna Lingkungan tempat pekerjaan-pekerjaan akan dikerjakan 2/23/2019 Interface Design - RPL - NH@2016

Perancangan Antarmuka Sasaran dari perancangan antarmuka pada dasarnya adalah untuk mendefinisikan sejumlah objek antarmuka pengguna dan aksi-aksi/tindakan (serta representasinya pada layar) yang memungkinkan pengguna untuk melakukan semua pekerjaan yang telah didefinisikan 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Implementasi Konstruksi Antarmuka biasanya dimuai dengan pembuatan prototipe-prototipe yang memungkinkan penggunaan skenario untuk dievaluasi 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Validasi Antarmuka Validasi berfokus pada: Kemampuan antarmuka pengguna untuk mengimplementasikan setiap pekerjaan pengguna secara benar Tingkat kemudahan penggunaan antarmuka pengguna Penerimaan pengguna pada suatu antarmuka sebagai alat yang bermanfaat dalam pekerjaan-pekerjaan mereka 2/23/2019 Interface Design - RPL - NH@2016

Example – The Main Window 2/23/2019 Interface Design - RPL - NH@2016

Example: Entry Form, table, etc Label Field Table / Query Validation Explanation 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Detail Design ID_Object Type Name Description FieldBox1 FieldBox Filled with strings that appear on-screen Filled with an explanation of the system reaction, for example, what the screen opens, where the link goes. When it comes to a code which is quite complicated, refer to the algorithm described above. Button1 Button OK When clicked, will enable the process AlgoXXX. RTF1 RTF Box Text contents stored on File xxx 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Screen Design 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 Tools for Screen Design (http://mashable.com/2012/06/07/mockup-tools/#) 2/23/2019 Interface Design - RPL - NH@2016

Interface Design - RPL - NH@2016 2/23/2019 Interface Design - RPL - NH@2016