Interaksi Manusia dan Komputer

Section 1

Course Modules

News forum

Rencana Pembelajaran Semester (RPS)

Satuan Aktivitas Kuliah Daring

Informasi Perkuliahan

Mata kuliah Interaksi Manusia dan Komputer merupakan materi fundamental di Informatika. Interaksi Manusia dan Komputer merupakan mata kuliah yang mengajarkan mahasiswa tentang bagaimana Interaksi Manusia Komputer serta perannya dalam mewujudkan perangkat lunak yang tepat dan bermanfaat bagi user-nya. Dalam mata kuliah ini juga disampaikan tentang tahap-tahap dalam proses perancangan antarmuka pengguna (User Interface/UI ) serta tren-tren desain UI yang terkini. Pada perkuliahan ini akan membekali mahasiswa informatika berfikir analitis dan logis. SKEMA PENILAIAN : KOMPONEN PENILAIAN BOBOT/ PROSENTASE KETERANGAN Quiz & Tugas 10 % Tugas Besar 35% Ujian Tengah Semester 30 % Ujian Akhir Semester 30 % Keaktifan 5% PENENTUAN NILAI AKHIR MATA KULIAH : Nilai Skor Matakuliah (NSM) Nilai Mata Kuliah (NMK) 80 NSM A 75< NSM < 80 AB 65 < NSM < 75 B 60 < NSM < 65 BC 50 < NSM < 60 C 40 < NSM < 50 D NSM < 40 E Dosen : Rita Wahyuni Arifin Veronikha Effendy, S.T.,M.T Mira Kania Sabariah, M.T Danang Junaedi Fata Nidaul Khasanah Asisten dosen : Geriska Isabelle Admin : Muchamad Fuad

Course Modules

Minggu 01

Bahan Kajian : Pengenalan IMK Definisi UI dan UX Pentingnya desain UI yang baik Sejarah singkat IMK Tujuan Setelah mengikuti mata kuliah ini mahasiswa dapat dapat: 1. Memahami pentingnya User Interface (UI) serta karakteristik UI yang tepat untuk setiap aplikasi. 2. Mengerti dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas. 3. Mengetahui dan menerapkan tren-tren desain UI yang terkini tren-tren desain UI yang terkini Bahan Kajian : Karakteristik GUI dan Web UI Interaction Framework Interaction Style Karakteristik GUI dan Web UI Tujuan Setelah mengikuti materi ini mahasiswa dapat: 1. Memahami dan menerapkan perbedaan mendasar antara GUI dan Web UI 2. Mengerti dan menerapkan prinsip-prinsip pokok di dalam mendesain aplikasi sesuai dengan kebutuhan

Course Modules

Konsep GUI dan Web UI

Pengantar IMK

Video : GUI dan WEB UI

Quiz 01

Assignment 01

Forum Diskusi 01

Forum Responsi 01

Minggu 02

User Centered Design Bahan Kajian Metode Perancangan User Interface User Center Design Tujuan Setelah mengikuti mata kuliah ini mahasiswa Mampu menjelaskan dan mengimplementasikan metode dalam Merancang User Interface Source image : http://www.n-solut.de/service/user-interface-design.php lang=en

Course Modules

Quiz 02

User Centered Design

Assignment 02

Forum Diskusi 02

Forum Responsi 02

Minggu 03

Bahan Kajian : Proses Desain UI Step 1 Memahami Pengguna/ Klien: Mengenali Pengguna Karakteristik Pengguna Tujuan Setelah mengikuti materi ini mahasiswa dapat: Memahami pentingnya mengenal pengguna dari aplikasi yang akan dibangun sebagai dasar untuk merancang antarmuka perangkat lunak Mengerti dan menerapkan setiap karakteristik pengguna dalam merancang antarmuka perangkat lunak

Course Modules

Step 1 Know User

Forum Diskusi 03

Forum Responsi 03

Quiz 03

Slide Step 1 Know User

Minggu 04

Bahan Kajian Proses Desain UI Step 2 Memahami Fungsi Bisnis: Definisi bisnis dan analisis kebutuhan. Menentukan fungsi-fungsi bisnis dasar. Desain standar atau panduan gaya (style guide). Kebutuhan pelatihan dan dokumentasi sistem. Tujuan Setelah mengikuti materi ini mahasiswa dapat: Memahami pentingnya mengetahui fungsi bisnis berdasarkan user experience sebagai acuan dalam merancang antarmuka perangkat lunak. Mengerti dan menerapkan setiap tahapan dalam mengidentifikasi alur kerja setiap task berdasarkan user experience.

Course Modules

Memahami Fungsi Bisnis

Video : Memahami Fungsi Bisnis

Forum Diskusi 04

Forum Responsi 04

Quiz 04

Assignment 04

Slide Step 2 Memahami Fungsi Bisnis

Minggu 05

Bahan Kajian Proses Desain UI Step 3 Memahami prinsip-prinsip desain UI dan layar yang baik: 3 prinsip dasar UI Panduan perancangan antarmuka Tujuan Setelah mengikuti materi ini mahasiswa dapat: Memahami prinsip design interaksi. Menerapkan prinsip design interaksi dalam merancang antarmuka perangkat lunak untuk menghasilkan antarmuka perangkat lunak yang baik. Bahan Kajian Proses Desain UI Step 4 Membangun menu sistem dan skema navigasi: Struktur dan fungsi menu Isi menu Format menu Penyusunan frase dalam menu Penentuan pilihan-pilihan menu Navigasi website Jenis-jenis menu grafis Tujuan Setelah mengikuti materi ini mahasiswa /i dapat mengerti komponen-komponen dalam membangun menu sistem dan skema navigasi dalam desain UI

Course Modules

Step 3 Memahami prinsip-prinsip desain UI

Step 4 Membangun menu sistem dan skema

Slide Step 3 Slide Memahami Prinsip Dasar UI

Forum Disukusi 05

Forum Responsi 05

Minggu 06

Bahan Kajian Proses Desain UI Step 5 Memilih tipe windows yang tepat: Karakteristik windows Komponen-komponen sebuah windows Gaya penampilan windows Tipe-tipe windows Pengaturan fungsi windows Web dan browser Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memilih kontrol layar yang tepat sesuai dengan kebutuhan. Bahan Kajian Proses Desain UI Step 6 Memilih perangkat interaksi yang tepat: Perangkat input Perangkat output Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memilih perangkat interaksi yang tepat dalam desain UI.

Course Modules

Slide Step 5 Select the Proper Kinds of WindowsNew

Step 5 Memilih tipe windows yang tepat

Step 6 Memilih perangkat interaksi yang tepat

Forum Diskusi 05

Forum Responsi 06

Minggu 07

Bahan Kajian Proses Desain UI Step 7 Memilih screen-based controls yang tepat: Operable controls Text entry/ read-only controls Selection controls Other operable controls Custom controls Presentation controls Memilih kontrol yang tepat Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memilih kontrol layar yang tepat sesuai dengan kebutuhan

Course Modules

Slide Step 7 Proper controls

Step 7 Memilih screen-based controls yang tepat

Forum Diskusi 07

Forum Responsi 07

Minggu 09

Bahan Kajian Proses Desain UI Step 8 Menuliskan teks dan pesan dengan jelas: Kata, kalimat, pesan, dan teks Isi dan teks dalam halaman web Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami penulisan teks dan pesan yang jelas dalam desain UI. Bahan Kajian Proses Desain UI Step 9 Memberikan feedback, guidance, dan assistance dengan efektif: Menyediakan feedback dengan tepat Guidance dan assistance Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami konsep pemberian umpan balik, panduan, dan tuntunan yang efektif dalam desain UI.

Course Modules

Slide Step 8 ├ö├ç├┤ Clear Text and Messages

Step 8 Menuliskan teks dan pesan dengan jelas

Step 9 Memberikan feedback, guidance, dan assistance dengan efektif

MInggu 10

Bahan Kajian Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas: Pertimbangan internasional Aksesibilitas Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami internasionalisasi dan aksesibilitas dalam desain UI.

Course Modules

Slide Step 10 Internasionalization and Accessibility

Step 10 Menerapkan internasionalisasi dan aksesibilitas

TUGAS BESAR

Pengerjaan Tugas Besar dilakukan perkelompok (satu kelompok 4-5 orang) Buatlah rancangan antarmuka pengguna berupa prototype aplikasi berbasis website untuk menyelesaikan masalah yang ada pada lingkungan kampus Gunakan tahap proses perancangan antarmuka pengguna (User Interface/UI) untuk pembuatannya Tools yang digunakan untuk pembuatan prototype aplikasi bebas TIMELINE Pengerjaan Tugas Besar: source image : freepik.com

Course Modules

Review Project 1

Review Project 2

Template Tugas Besar

Pengenalan IMK

Bahan Kajian : Pengenalan IMK Definisi UI dan UX Pentingnya desain UI yang baik Sejarah singkat IMK Tujuan : Setelah mengikuti mata kuliah ini mahasiswa dapat dapat: Memahami pentingnya User Interface (UI) serta karakteristik UI yang tepat untuk setiap aplikasi. Mengerti dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas. Mengetahui dan menerapkan tren-tren desain UI yang terkini tren-tren desain UI yang terkini

Course Modules

Slide Pengantar IMK

Konsep GUI dan Web UI

Bahan Kajian Karakteristik GUI dan Web UI Interaction Framework Interaction Style Karakteristik GUI dan Web UI Tujuan Setelah mengikuti materi ini mahasiswa dapat: Memahami dan menerapkan perbedaan mendasar antara GUI dan Web UI Mengerti dan menerapkan prinsip-prinsip pokok di dalam mendesain aplikasi sesuai dengan kebutuhan

Course Modules

Slide Konsep GUI dan Web UI

Proses Desain UI - Step 4 Membangun menu sistem dan skema navigasi

Bahan Kajian Proses Desain UI Step 4 Membangun menu sistem dan skema navigasi: Struktur dan fungsi menu Isi menu Format menu Penyusunan frase dalam menu Penentuan pilihan-pilihan menu Navigasi website Jenis-jenis menu grafis Tujuan Setelah mengikuti materi ini mahasiswa /i dapat mengerti komponen-komponen dalam membangun menu sistem dan skema navigasi dalam desain UI

Course Modules

Slide Step 4 Developing Menu

Proses Desain UI - Step 6 Memilih perangkat interaksi yang tepat

Bahan Kajian Proses Desain UI Step 6 Memilih perangkat interaksi yang tepat: Perangkat input Perangkat output Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memilih perangkat interaksi yang tepat dalam desain UI

Course Modules

Slide Step 6 Select the proper interaction device

Proses Desain UI - Step 9 Memberikan feedback, guidance, dan assistance dengan efektif

Bahan Kajian Proses Desain UI Step 9 Memberikan feedback, guidance, dan assistance dengan efektif: Menyediakan feedback dengan tepat Guidance dan assistance Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami konsep pemberian umpan balik, panduan, dan tuntunan yang efektif dalam desain UI.

Course Modules

Slide Step 9 Provide Effective Feedback

Proses Desain UI - Step 11 & 12 Menggunakan Graphics, Icons, Images & Warna

Bahan Kajian Proses Desain UI Step 11 & 12 Menggunakan Graphics, Icons, Images & Warna: Icons & graphics Multimedia Penggunaan warna Masalah yang mungkin muncul dengan warna Warna dan penglihatan manusia Pemilihan warna Penggunaan warna yang harus dihindari Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat mengetahui penggunaan grafik, ikon, gambar dan warna yang bermakna dalam desain UI

Course Modules

Slide Step 11,12 Icon Graphics-editted

Proses Desain UI - Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman

Bahan Kajian Proses Desain UI Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman: Pengorganisasian dan penyusunan layout layar Contoh layar Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami cara pengorganisasian windows dan halaman dalam desain UI

Course Modules

Slide Step 13 Organize and Layout Windows and Pages

Desain UI berbasis web dan perangkat bergerak

Bahan Kajian Desain UI berbasis web dan perangkat bergerak: Web dan perangkat bergerak Pemilihan teknologi aplikasi Prinsip desain web dan mobile Pola desain UI web dan mobile Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami konsep desain UI berbasis web dan perangkat bergerak.

Course Modules

Slide Web Based UI

Slide Mobile Device UI

Desain antarmuka game

Bahan Kajian Perencanaan aliran menu Kebutuhan teknis dan trik Penggunaan animasi Pembuatan mockup yang interaktif Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat mengenal tren desain antarmuka game.

Course Modules

Silde Game Interface Design

Proses Desain UI - Step 14 Testing

Bahan Kajian Proses Desain UI Step 14 Testing: Evaluasi Usability Evaluasi Heuristik Walk-through Web Accessibility Usability Testing Tujuan Setelah mengikuti materi ini Mahasiswa/i dapat memahami konsep pengujian dalam desain UI dan cara mengukur UI

Course Modules

Slide Step14-Testing

Video : Pengujian

Minggu 01

PERKULIAHAN MINGGU PERTAMA Bahan Kajian : Pengenalan IMK Definisi UI dan UX Pentingnya desain UI yang baik Sejarah singkat IMK Tujuan Setelah mengikuti mata kuliah ini mahasiswa dapat dapat: 1. Memahami pentingnya User Interface (UI) serta karakteristik UI yang tepat untuk setiap aplikasi. 2. Mengerti dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas. 3. Mengetahui dan menerapkan tren-tren desain UI yang terkini tren-tren desain UI yang terkini Bahan Kajian : Karakteristik GUI dan Web UI Interaction Framework Interaction Style Karakteristik GUI dan Web UI Tujuan Setelah mengikuti materi ini mahasiswa dapat: 1. Memahami dan menerapkan perbedaan mendasar antara GUI dan Web UI 2. Mengerti dan menerapkan prinsip-prinsip pokok di dalam mendesain aplikasi sesuai dengan kebutuhan

Course Modules