Desain Interaksi Terbaik: Membangun Navigasi, Memilih Kontrol yang Tepat, dan Menyajikan Pesan dengan Jelas dalam UI yang Efekt
Desain Interaksi Terbaik: Membangun Navigasi, Memilih Kontrol yang Tepat, dan Menyajikan Pesan dengan Jelas dalam UI yang Efekt
- CII3B3 Interaksi Manusia dan Komputer
- AnnouncementsForum
- AnnouncementsForum
- Profil dan Sejarah Mata KuliahMata 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), pengujian usability serta tren-tren desain UI yang terkini. Pada perkuliahan ini akan membekali mahasiswa informatika berfikir analitis dan logisPerkembangan Interaksi Manusia dan Komputer dimulai pertama kali pada tahun 1963 oleh Ivan Sutherland dari Massachusetts Institute of Technology (MIT). Penelitian ini memperkenalkan grafis dengan program Sketchpad-nya. Garis, lingkaran dan titik dapat ditarik pada layer menggunakan pena cahaya. Pada tahun 1970-an, pusat penelitian Xerox Palo Alto menciptakan sebuah mesin untuk mengetik. Antarmuka pada mesin ini masih menggunakan metode komunikasi manusia paling dasar. Mesin ini lebih dikenal dengan mouse yang kita kenal saat ini. Tahun 1984, Apple berhasil dengan sukses memasarkan Macintosh yang mengadaptasi penelitian yang telah dilakukan oleh Xerox.Tahun 1985 Microsoft merilis Windows 1.0 dan Commodore memperkenalkan Amiga 100. Pada Tahun 1987 Apple memperkenalkan Macintosh II yang telah berwarna dan system X mulai tersedia. IBM berkontribusi merilis Sistem Aplikasi Arsitektur dan Presentation Manager untuk menggantikan system operasi DOS. Simulasi layar tiga dimensi pertama kali dikembangkan oleh NeXT pada tahun 1988 disebut dengan NeXTstep. Beberapa GUI berbasis UNIX, Open Look oleh AT&T, Sun Microsystems serta Motif untuk Open Software Foundation oleh DEC dan Hewleett-Packard pada tahun 1989 pertama kalinya dirilis. Sepanjang tahun 1990-an hingga saat ini, perkembangan desain layar terlihat sangat pesat, dengan bermunculannya icon, image, animasi dan video.Aturan umum Mata Kuliah Interaksi Manusia dan Komputer:
- Setiap topik mewakili pertemuan mingguan.
- Konten mata kuliah Interaksi Manusia dan Komputer ini terdiri dari materi pembelajaran (file presentasi, URL terkait topik, video pembelajaran) dan aktivitas pembelajaran (tugas, kuis, dan forum) yang disediakan kepada mahasiswa pada setiap topik.
- Mohon perhatikan waktu penting dari setiap materi dan aktivitas belajar yang ada pada setiap deskripsinya.
- Mahasiswa dianggap hadir jika membaca slide presentasi dan mengerjakan kuiz pada masing-masing topik.
Terima kasih. - Relevansi (Urgensi) Mata KuliahSeorang desainer/ developer perangkat lunak perlu memahami pentingnya bagaimana membuat user interface (UI) yang baik dan dapat memenuhi kebutuhan dan kepuasan pengguna. Pemahaman tersebut dapat dipelajari pada mata kuliah Interaksi Manusia Komputer ini karena pada mata kuliah ini akan dijelaskan bagaimana UI menjadi penting saat ini terkait dengan kebutuhan dan kepuasan pengguna pada perangkat lunak.
- Program Larning Outcome (PLO)PLO-10Menerapkan prinsip rekayasa (engineering principles) untuk menyelesaikan masalah pengembangan perangkat lunak dengan mempertimbangkan faktor ekonomi, kemudahan penggunaan, keamanan, kinerja dan kehandalan; PLO-11Mengidentifikasi, memformulasi, menganalisis, dan menemukan sumber masalah rekayasa perangkat lunak;
PLO-12Mengusulkan solusi terbaik untuk menyelesaikan masalah rekayasa perangkat lunak;
Course Larning Outcome (CLO)CLO-1Mahasiswa mampu menjelaskan konsep-konsep dalam tahapan proses perancangan UI dan prinsip desain UICLO-2Mahasiswa mampu membuat perancangan UI sesuai prinsip desain UI yang baik
CLO-3Mahasiswa mampu membuat prototype aplikasi dan melakukan uji usability sederhana - Pokok Bahasan
- Pokok bahasan 1 : Pengenalan Interaksi Manusia Komputer
- Pokok bahasan 2 : Overview Proses Desain UI
- Pokok bahasan 3 : Proses Desain Step 1 Memahami Pengguna
- Pokok bahasan 4 : Proses Desain Step 2 Memahami Fungsi Bisnis & Step 3 Memahami prinsip desain UI
- Pokok bahasan 5 : Proses Desain Step 4 Membangun menu sistem dan skema navigasi & Step 5 Memilih tipe windows yang tepat
- Pokok bahasan 6 : Proses Desain UI Step 6 Memilih perangkat interaksi yang tepat & Step 7 Memilih screen-based controls yang tepat
- Pokok bahasan 7 : Proses Desain UI Step 8 Menuliskan teks dan pesan dengan jelas & Step 9 Memberikan feedback, guidance, dan assistance dengan efektif
- Pokok bahasan 8 : Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas & Step 11&12 Menggunakan Graphics, Icons, Images & Warna
- Pokok bahasan 9 : Proses Desain UI Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman & Step 14 Testing
- Pokok bahasan 10 : Desain UI berbasis web dan perangkat bergerak
- Pokok bahasan 11 : Desain Antamuka Game
- Best Practice (Tips and Trick)
- Awali dengan berdoa
- Pelajari proses perancangan antarmuka
- Pelajari prinsip perancangan dasar antarmuka
- Pelajari materi pada lecture note, referensi terkait dan link external terkait untuk mendapatkan pemahaman yang lebih baik.
- Praktekkan setiap tahapan proses perancangan antarmuka dengan menerapkan prinsip dasar perancangan antarmuka
- Dokumentasikan setiap proses perancangan antarmuka
- Akhiri dengan berdoa
- SertifikasiSertifikasi yang berkorelasi dengan mata kuliah Interaksi Manusia Komputer:
- Nielson Norman Group
- Human Factors International
- The Team W/ Weinschenk Institute
- San Francisco State University Extension
- Udemy
- Design Lab
- Coursera
- GeneralAssemb.ly
- Interaction Design Foundation
- Bentley University’s User Experience Center
- SMU
- Career Foundry
- University of California San Diego Extension
- University of Washington
- California State University Fullerton
- Referensi Mata KuliahUtama:
- Valverde R, 2011. Principles Of Human Computer Interaction, Lambert Academic Publishing.
- Galitz, Wilbert O. 2007. The Essential Guide to UI Design. Third Edition
Pendukung:- Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction Design_beyond Human-Computer –Interaction, J. Wiley & Sons
- Cooper,Alan, Robert Reimann, David Cronin. 2007. About Face 3. The Essential of Intraction Design, Wiley Publishing, Inc.
- Ballard, Barbara. 2007. Designing the Mobile User Experience. Little Springs Design, Inc., USA.
- Kalbach, James. 2007. Designing Web Navigation. O’Reilly.
- Heim, S. 2007, The Resonant Interface HCI Foundations for interaction design, Addison Wesley.
- Coninx, Karin., et al. 2006. Task Models and Diagrams for UI Design. Springer.
- Fox, Brent. 2005. Game Interface Design. Thompson Course Technology.
- Cohen, Michael H., et al. 2004. Voice UI Design. Addison Wesley.
- Welie, martijn van. 2001. Task-based UI Design. SIKS Disertation Series No. 2001-6.
- Slide 0 – Aturan Perkuliahan Interaksi Manusia Komputer (RPL)File
- Minggu 5 : Proses Desain Step 4 Membangun menu sistem dan skema navigasi & Step 5 Memilih tipe windows yang tepatSalam User InterfaceJumpa lagi pada pokok bahasan 4 e-learning tentang Proses Desain UI Step 4 & 5
CAPAIAN PEMBELAJARAN- Mampu menjelaskan konsep HCI, Metode perancangan UI, proses perancangan antarmuka perangkat lunak yang sesuai dengan prinsip User Interface (UI)
- Mampu merancang antarmuka perangkat lunak yang sesuai dengan prinsip User Interface (UI)
MATERI PEMBELAJARANProses Desain UI Step 4 Membangun Menu Sistem dan Skema Navigasi- Struktur dan Fungsi Menu
- Fomat Menu
- Navigasi Web
Proses Desain UI Step 5 Memilih Tipe Windows yang Tepat- Karakteristik & Komponen Windows
- Tipe dan Gaya Tampilan WIndows
- Pengorganisasian Fungsi Windows
- Web * Web Browser
Petunjuk Belajar Topik Proses Desain Step 4 Membangun menu sistem dan skema navigasi & Step 5 Memilih tipe windows yang tepat- Baca slide 05 Proses Desain UI Step 4&5 berikut ini.
- Mahasiswa dapat mempelajari tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di forum.
- Kerjakan tugas AS.05 dan Quiz 05 Proses Desain UI Step 4&5.
Selamat Belajar dan Terima kasih - Minggu 6 : Proses Desain UI Step 6 Memilih perangkat interaksi yang tepat & Step 7 Memilih screen-based controls yang tepat
- Minggu 7 : Proses Desain UI Step 8 Menuliskan teks dan pesan dengan jelas & Step 9 Memberikan feedback, guidance, dan assistance dengan efektif
Petunjuk Belajar Topik Proses Desain UI Step 8 Menuliskan teks dan pesan dengan jelas & Step 9 Memberikan feedback, guidance, dan assistance dengan efektif:7- Baca slide Bab 7: Proses Desain UI Step 8 & 9 berikut ini.
- Mahasiswa dapat mempelajari video dan tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di Forum : Proses Desain UI Step 8 & 9.
- Kerjakan Tugas 7: Analisis desain teks dan pesan serta feedback, guidance dan assistance (AS.07) dan Kuis 07 (QZ.07).
Selamat Belajar dan Terima kasih - Topic 4
Tinggalkan Balasan