Interface Design. Rekayasa Perangkat Lunak

dokumen-dokumen yang mirip
REKAYASA PERANGKAT LUNAK INTERFACE DESIGN. Defri Kurniawan M.Kom

BAB 2 LANDASAN TEORI

User Interface Design

Pertemuan 11 METODE DESAIN (2)

Menjelaskan maksud dari arsitektur PL dan kenapa sangat penting.

Interraksi Manusia dan Komputer

RAGAM DIALOG. Oleh: Muhamad Alif, S.Kom

BAB II TINJAUAN PUSTAKA DAN LANDASAN TEORI. Penerapan Model Human Computer Interaction (HCI) dalam Analisis Sistem

Interaksi Manusia dan Komputer

BAB IV IMPLEMENTASI DAN EVALUASI

BAB 2 LANDASAN TEORI. Era perkembangan teknologi yang semakin pesat dewasa ini membuat. dan penjualan produk lewat media elektronik seperti internet.

Pengertian Interaksi = komunikasi 2 arah antara manusia (user) dan sistem komputer.

APLIKASI PENCARI LAWAN TANDING FUTSAL BERBASIS WEB WILAYAH DKI JAKARTA

S2 Teknik Informatika Universitas AMIKOM Yogyakarta Tahun Akademik 2016/2017 Semester Genap. Prof. Dr. Ema Utami, S.Si, M.Kom

BAB 3 Ragam Dialog (dialoque style) Interaksi Manusia & Komputer

4.20, kemudian kilk tombol Ya untuk melanjutkan penghapusan atau klik Tidak

BAB 2 LANDASAN TEORI

BAB 2 LANDASAN TEORI

SPESIFIKASI KEBUTUHAN PERANGKAT LUNAK. <Nama Perangkat Lunak>

RAGAM DIALOG KULIAH III

Gambar 4.26 Gambar Halaman Kategori. Ini merupakan gambar halaman Kategori untuk administrator, menampilkan semua

BAB 2 LANDASAN TEORI. menjelaskan beberapa prinsip umum sistem antara lain: menghadapi keadaan-keadaan yang berbeda.

BAB XII Perancangan Antarmuka untuk Pencarian

BAB 4 IMPLEMENTASI DAN EVALUASI. Spesifikasi perangkat keras dan perangkat lunak yang digunakan baik oleh user

BAB 2 LANDASAN TEORI

BAB 4 IMPLEMENTASI DAN EVALUASI. perangkat keras yang disarankan sebagai berikut: Tabel 4.1 Spesifikasi Game

BAB III ANALISA DAN PERANCANGAN 3.1 ANALISA PERANGKAT LUNAK BASIS DATA MULTIMEDIA

DESKRIPSI PERANCANGAN PERANGKAT LUNAK. <Nama Perangkat Lunak>

BAB 4 IMPLEMENTASI DAN EVALUASI. dengan baik adalah sebagai berikut : 1. Komputer dengan kecepatan processor Dual Core

1. Interface Design 2. User Interface Design (Three Golden Rules) 3. User Interface Analysis and Design 4. Data Design 5. Component Level Design

DINAMIKA TEKNOLOGI April 2012 Vol. 5; No. 1; Hal

Review Rekayasa Perangkat Lunak. Nisa ul Hafidhoh

PROSES MODEL DESAIN PERANGKAT LUNAK

Ragam Dialog. Kuliah III. Mohon Selama Perkuliahan, Tidak Menjadi Manusia Multitasking!!!

Pertemuan 5 PEDOMAN, PRINSIP DAN TEORI SISTEM INTERAKSI

BAB 4 IMPLEMENTASI DAN EVALUASI. perangkat pendukung yang berupa piranti lunak dan perangkat keras. Adapun

Heuristic Evaluation Checklist

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB III ANALISIS DAN PERANCANGAN MODEL INTERFACE

BAB V IMPLEMENTASI SISTEM

DESKRIPSI PERANCANGAN PERANGKAT LUNAK. <Nama Perangkat Lunak>

BAB 4 HASIL DAN PEMBAHASAN

BAB 4 IMPLEMENTASI DAN EVALUASI. Perangkat ajar yang dirancang oleh penulis diharapkan dapat membantu

BAB 4 IMPLEMENTASI DAN EVALUASI. pengunjung yang membutuhkan informasi-informasi yang terdapat di dalam Mal

BAB 4 IMPLEMENTASI DAN EVALUASI. Menggunakan server dengan spesifikasi sebagai berikut : - Processor 1.2 GHz 2007 Opteron or 2007 Xeon processor

Dialog Manusia- Komputer Pengertian dialog: Umum, dialog adalah proses komunikasi antara 2 atau lebih agen, dalam dialog makna harus

PRINSIP UTAMA MENDESAIN ANTARMUKA (INTERFACE)

Danang Wahyu Utomo

Halaman Bidang Studi Guru. Gambar 4.25 Tampilan Halaman Bidang Studi Guru

Teori, Prinsip, dan Pedoman. Interaksi Manusia dan Komputer Sesi 2

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB 4 IMPLEMENTASI DAN EVALUASI. Pelaksanaan implementasi sistem bank soal pada Binus School Serpong. melibatkan beberapa elemen utama, yaitu:

BAB 4 HASIL DAN PEMBAHASAN Kebutuhan Perangkat Keras Mobile. perangkat keras yang memiliki spesifikasi sebagai berikut:

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB 4 IMPLEMENTASI DAN EVALUASI. Sistem yang telah dianalisis dan dirancang akan digunakan sebagai alat bantu

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER JAKARTA STI&K SATUAN ACARA PERKULIAHAN

PROSES DESAIN FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA 3/14/2017

APLIKASI PENCITRAAN KARAKTER HANZI MANDARIN MELALUI KAMERA SMARTPHONE BERBASIS ANDROID

APLIKASI KOMPUTER (APLIKOM)

BAB 4 IMPLEMENTASI DAN EVALUASI. majalah, maka dirancang satu aplikasi yang dapat membantu mereka untuk

BAB 4 IMPLEMENTASI DAN EVALUASI

PROSES INTERAKSI MANUSIA DAN KOMPUTER

1. MENGENAL VISUAL BASIC

BAB 4 HASIL DAN PEMBAHASAN. 2. Memori RAM 512 MB 3. VGA card 256 MB 4. CD-ROM Drive 5. Speaker 6. Keyboard 7. Mouse

BAB III ANALISIS DAN PERANCANGAN SISTEM. Game yang dibangun merupakan game kuiz edukasi yang didalamnya

Bab 4. Hasil dan Pembahasan

BAB 4 HASIL DAN PEMBAHASAN

BAB 4 IMPLEMENTASI DAN EVALUASI

PENDAHULUAN. Model interaksi. Ergonomi. Gaya interaksi. Konteks. terjemahan antara pengguna dan sistem. karakteristik fisik dari interaksi

PROSES INTERAKSI MANUSIA DAN KOMPUTER

BAB 2 LANDASAN TEORI

BAB 4 HASIL DAN PEMBAHASAN

BAB IV IMPLEMENTASI DAN EVALUASI SISTEM

Kebergunaan (Usability) Interaksi Manusia dan Komputer Materi 6

BAB 4 IMPLEMENTASI DAN EVALUASI. yang dapat menunjang berjalannya sistem agar berjalan secara optimal. Dimana

BAB 4 IMPLEMENTASI DAN EVALUASI. diperlukan agar dapat mengimplementasikan game Job Seeker ini. a. Intel Pentium 4 2,34 Ghz. b. Memory (RAM) 512MB RAM

BAB III ANALISIS DAN PERANCANGAN

BAB 2 LANDASAN TEORI. Istilah komputer (computer) berasal dari bahasa latin computere yang berarti

BAB 4. Implementasi dan Evaluasi

Perspektif Alur-kerja (workflow) - barisan kegiatan Perspektif Alur Data (Data flow) alur informasi Perspektif Peran/Aksi siapa melakukan apa.

2. Semua struktur data dan operasi yang akan dilakukan pada masing masing struktur data harus diidentifikasi.

BAB 1. Interaksi Manusia dan Komputer Pemahaman IMK 1

BAB 2 TINJAUAN PUSTAKA

Dibuat Oleh : 1. Andrey ( )

BAB 4 IMPLEMENTASI DAN EVALUASI. menjalankan program ini adalah : VGA Memory 64 MB

PERANCANGAN SISTEM PERANGKAT AJAR KOMPUTER BERBASIS MULTIMEDIA STUDI KASUS DI SD DIAN KASIH

maka akan langsung keluar ke bagian menu awal. Sedangkan dibagian bawah sebelah

Gambar 4.75 Layar mengedit event

KSI B ~ M.S. WULANDARI

Mempersiapkan Presentasi Profil Perusahaan

ataupun menghapus data agama yang telah ada.

BAB 1 PENDAHULUAN 1.1 Latar belakang

BAB 4 IMPLEMENTASI DAN EVALUASI. Perangkat keras yang digunakan untuk membuat aplikasi ini yaitu: 1. Processor Intel(R) Core(TM) Duo 2.

User Interface Design

INTERAKSI MANUSIA DAN KOMPUTER. Astrid Lestari Tungadi, S.Kom., M.TI.

Setting local IP address dan subnet mask dari VoIP Gateway tersebut. Berikut adalah cara mengkonfigurasi modem ADSL:

Pemilihan Tipe Windows

BAB 1 PENDAHULUAN. 1.1 Latar Belakang

Pertemuan 6 GAYA INTERAKSI DAN PERANGKAT INTERAKSI #1

BAB 2 LANDASAN TEORI

Transkripsi:

Interface Design

Desain Antarmuka (Interface Design) Desain Antaramuka (Interface Design) atau Desain Antarmuka Pengguna (User Interface Design) atau rekayasa antarmuka pengguna (User Interface Engineering) adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna (User Experience) dan interaksi. Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna atau apa yang sering disebut dengan user-centered design. 5/24/2018 Interface Design - RPL 2 2

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

Three Golden Rules Dalam Desain Antarmuka Tiga Aturan Emas dalam desain antarmuka pengguna 1. Tempatkan pengguna sebagai pengendali (Theo Mandel, 97) 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 2. Kurangi beban memori pengguna Semakin banyak user harus mengingat, semakin banyak interaksi kesalahan dengan sistem. Sistem seharusnya mengingat 3. Buat antarmuka yang bersifat konsisten Interface Design - RPL 4 4

R1-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) 5/24/2018 Interface Design - RPL 5 5

R2-Kurangi Beban Memori Pengguna Kurangi short-term memory pengguna (menyediakan ikon visual) Memberi default (pilihan "reset ) Mendefinisikan tombol pempercepat (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) 5/24/2018 Interface Design - RPL 6 6

R3-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 5/24/2018 Interface Design - RPL 7 7

Eight Golden Rules of Interface Design [Shneiderman] 1. Upayakan agar konsistensi. Urutan tindakan yang konsisten harus diperlukan dalam situasi yang serupa; terminologi identik harus digunakan dalam petunjuk, menu, dan layar bantuan; dan perintah yang konsisten harus digunakan di seluruh. 2. Memungkinkan pengguna yang sering menggunakan pintasan. Karena frekuensi penggunaan meningkat, demikian pula keinginan pengguna untuk mengurangi jumlah interaksi dan untuk meningkatkan laju interaksi. Singkatan, tombol fungsi, perintah tersembunyi, dan fasilitas makro sangat membantu pengguna ahli. => 3. 8

Eight Golden Rules of Interface Design [Shneiderman] 3. Menawarkan umpan balik informatif. Untuk setiap tindakan operator, harus ada umpan balik sistem. Untuk tindakan yang sering dan kecil, responsnya bisa sederhana, sedangkan untuk tindakan yang jarang dan besar, responsnya harus lebih substansial. 4. Desain dialog untuk menghasilkan penutupan. Urutan tindakan harus diatur dalam kelompok-kelompok dengan awal, tengah, dan akhir. Umpan balik informatif pada penyelesaian sekelompok tindakan memberi operator kepuasan pencapaian, rasa lega, sinyal untuk menjatuhkan rencana dan pilihan kontijensi dari pikiran mereka, dan indikasi bahwa cara yang jelas untuk mempersiapkan kelompok berikutnya tindakan. => 5. 9

Eight Golden Rules of Interface Design [Shneiderman] 5. Tawarkan penanganan kesalahan sederhana. Sebisa mungkin, rancang sistem agar pengguna tidak dapat membuat kesalahan serius. Jika kesalahan dibuat, sistem harus dapat mendeteksi kesalahan dan menawarkan mekanisme yang sederhana dan mudah dipahami untuk menangani kesalahan. 6. Memungkinkan pembalikan aksi yang mudah. Fitur ini mengurangi kecemasan, karena pengguna tahu bahwa kesalahan dapat diurungkan; dengan demikian mendorong eksplorasi pilihan yang tidak dikenal. Unit reversibilitas dapat berupa satu tindakan, entri data, atau grup tindakan lengkap.. => 7. 10

Eight Golden Rules of Interface Design [Shneiderman] 7. Mendukung lokus kontrol internal. Operator berpengalaman sangat menginginkan pengertian bahwa mereka bertanggung jawab atas sistem dan bahwa sistem menanggapi tindakan mereka. Rancang sistem untuk membuat pengguna menjadi pemrakarsa tindakan daripada responden. 8. Kurangi beban memori jangka pendek. Keterbatasan pemrosesan informasi manusia dalam memori jangka pendek menuntut agar tampilan tetap sederhana, beberapa tampilan halaman dikonsolidasikan, frekuensi gerakan-jendela dikurangi, dan waktu pelatihan yang cukup diberikan untuk kode, mnemonik, dan urutan tindakan. 11

Model Antarmuka Pengguna Empat model yang berbeda memainkan peranan saat suatu antarmuka pengguna dianalisis dan dirancang: 1) Pengguna menentukan Model Pengguna 2) SW engineer membuat Model Desain/Perancangan 3) End-user membangun Model Mental atau Persepsi Sistem 4) Pengembang membuat Model Implementasi 5/24/2018 Interface Design - RPL 12 12

1)-Model Pengguna Model Pengguna dibuat untuk mendapatkan profil para pengguna akhir sistem (end user) Pengguna dapat dikelompokkan sebagai berikut: Pengguna Pemula Pengguna berpengetahuan yang tidak terlalu sering menggunakan sistem Pengguna berpengetahuan yang sering menggunakan sistem 5/24/2018 Interface Design - RPL 13 * SEPA 8 th ed, Roger S. Pressman 13

2)-Model Desain Model desain dari seluruh sistem menggabungkan data, arsitektur, antarmuka, dan representasi prosedural dari perangkat lunak. 5/24/2018 Interface Design - RPL 14 14

3)-Model Mental Model Mental (Perspeksi Sistem) adalah gambaran sistem yang ada di kepala para pengguna akhir Tingkat ketepatan deskripsi sangat bergantung pada profilprofil pengguna seperti dibahas sebelumnya 5/24/2018 Interface Design - RPL 15 15

4)-Model Implementasi Model Implementasi pada dasarnya menggabungkan manifestasi-manifestasi yang tampak dari luar sistem berbasis komputer, digabungkan dengan informasiinformasi 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 5/24/2018 Interface Design - RPL 16 16

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) 5/24/2018 Interface Design - RPL 17 17

Proses Perancangan Antarmuka 5/24/2018 Interface Design - RPL 18 18

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 5/24/2018 Interface Design - RPL 19 19

Desain Antarmuka Sasaran dari desain antarmuka pada dasarnya adalah untuk mendefinisikan sejumlah objek antarmuka pengguna dan aksiaksi/tindakan (serta representasinya pada layar) yang memungkinkan pengguna untuk melakukan semua pekerjaan yang telah didefinisikan 5/24/2018 Interface Design - RPL 20 20

Implementasi Konstruksi Antarmuka biasanya dimulai dengan pembuatan prototipe-prototipe yang memungkinkan penggunaan skenario untuk dievaluasi 5/24/2018 Interface Design - RPL 21 21

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 5/24/2018 Interface Design - RPL 22 22

Example The Main Window 5/24/2018 Interface Design - RPL 23 23

Example: Entry Form, table, etc Label Field Table / Query Validation Explanation 5/24/2018 Interface Design - RPL 24 24

Detail Design ID_Object Type Name Description FieldBox1 FieldBox Dipenuhi dengan string yang muncul di layar. Diisi dengan penjelasan tentang reaksi sistem, misalnya, apa layar terbuka, di mana tautan berjalan. Ketika datang ke kode yang cukup rumit, lihat algoritma yang dijelaskan di atas. Button1 Button OK Ketika diklik, akan memungkinkan prosesnya AlgoXXX. RTF1 RTF Box Konten teks disimpan di File xxx 5/24/2018 Interface Design - RPL 25 25

Screen Design 5/24/2018 Interface Design - RPL 26 26

5/24/2018 Interface Design - RPL 27 27

Tools for Screen Design (Mockup Design) Beberapa Tools yang dapat digunakan untuk desain antar muka (screen) http://mashable.com/2012/06/07/mockup-tools/ 5/24/2018 Interface Design - RPL 28 28

29

30

31

http://mashable.com/2012/06/07/mockup-tools/ 32