LAPORAN PRAKTIKUM
INTERAKSI MANUSIA DAN KOMPUTER Kelas BP
Laporan 5
“HCI Design Concept (Norman)”
Nama Mahasiswa : Elisabeth Tiara Dewanti
NIM : 205314143
Program Studi / Fakultas : Informatika / Fakultas Sains dan Teknologi Dosen : Agnes Maria Polina, S.Kom, M.Sc.,
PROGRAM STUDI INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA YOGYAKARTA
2022
Interaksi Manusia dan Komputer Modul Praktikum Minggu 5
“Graphical User Interface: Design Concepts”
A. Tujuan
1. Memahami HCI Design Concepts
2. Mampu mendesain HCI Design Concepts
Kasus 1:
Carilah salah satu website yang mengandung formulir online dengan kategori berikut ini : - universitas (pendaftaran mahasiswa baru)
- registrasi pelanggan atau keanggotaan komunitas tertentu
Dengan mengacu pada kuliah teori yang sudah dilaksanakan, apakah formulir yang Anda temukan tersebut tersebut sudah memenuhi setiap aspek pada HCI Design Concepts? Jelaskan!
Kasus 2:
Jika ada klien yang akan membuat formulir pendaftaran online (di website), bagaimana sketsa rancangan formulir yang harus dibuat jika klien tersebut adalah
- sebuah perusahaan (untuk lamaran pekerjaan)
- sekolah taman kanak-kanak atau sekolah dasar (untuk mendaftar sekolah)
Acuan: Week4.ppt
Kasus 1
Universitas (pendaftaran mahasiswa baru)
No HCI Design Concepts
Penjelasan
1 Visibility Pada website ini, user dapat dengan mudah memahami serta menggunakan website ini dimana website ini memberikan informasi yang cukup jelas mengenai hal-hal yang perlu diinput pada saat melakukan pendaftaran sebagai mahasiswa baru di Universitas Kristen Duta Wacana, Bagian-bagian yang penting dari system ini sudah sangat terlihat dan dapat digunakan dengan jelas misalnya pilihan prodi, data diri, sekolah, info UKDW dll.
2 Affordance
Konsep ini dalam Interaksi Manusia-Komputer mengacu pada sifat yang dirasakan dan aktual dari suatu hal, terutama sifat-sifat dasar yang menentukan bagaimana hal itu dapat digunakan. Dengan kata lain, affordances adalah tindakan yang disarankan oleh desain suatu objek kepada penggunanya. Affordances memberikan petunjuk yang kuat sehingga tidak ada instruksi atau label yang diperlukan, pada contoh capture diatas merupakan Affordances karena Penampilan dari obyek / interface mengindikasikan bagaimana seharusnya digunakan yaitu dengan cara mengklik pada setiap bagian maka akan ditampilkan informasi sesuai pada bagian itu.
Dalam website ini juga terdapat beberapa interface dropdown
yang berfungsi untuk memilih isian dari data yang harus diisikan.
Interface dropdown itu sendiri telah sesuai dan telah mengindikasikan bagaimana seharusnya dropdown tersebut digunakan.
3 Constraints
Mereka membatasi cara suatu objek dapat digunakan. Kendala dapat digunakan untuk menghindari kesalahan penggunaan atau meminimalkan informasi yang akan diingat. Pada website ini terdapat constraints yaitu informasi seperti pada capture diatas untuk menghindari kesalahan.
4 Mapping
Pada website ini, terdapat mapping berupa menu-menu yang ada pada website ini dimana ketika pertama kali mengakses website ini terdapat beberapa pilihan menu. Menu pertama yang harus di lengkapi oleh user adalah menu pilihan prodi, lalu setelah mengisikan ada button simpan yang berfungsi untuk menyimpan data yang telah diinputkan user lalu berlanjut ke menu selanjutnya yaitu mengisi data diri dan seterusnya.
5 Causality Pada website ini terdapat beberapa causality. Causality ini terjadi pada saat user belum menginputkan atau mengupload data yang diminta maka akan ada tanda silang merah yang menjunjukan bahwa user belum
mengupload data.
6 Transfer effects Pada website ini, sistem yang digunakan hampir sama dengan sistem umum yang sudah ada sebelumnya sehingga lebih memudahkan user untuk menggunakan sistem pada website ini.
7 Idioms Pada website ini, tidak terdapat idioms yang digunakan. Karena perintah-perintah atau catatan/informasi yang digunakan pada sistem ini sudah tertulis tanpa penggunaan idioms.
8 Individual differences
Pada website ini, sistem atau website ini hanya disediakan untuk user yang memang benar-benar akan mendaftarkan diri untuk menjadi mahasiswa baru di Universitas Kristen Duta Wacana.
Page 1
Page 2
Page 3
Page 4
Kasus 2
Sekolah taman kanak-kanak atau sekolah dasar (untuk mendaftar sekolah)
(https://form.jotform.com/220792577832465 ) Analisa
Pada kasus 2 ini diminta untuk mendesain formulir untuk pendaftaran Sekolah Dasar, pada form yang saya desain mengandung HCI Design Concepts yang pertama visibility yaitu user dapat dengan mudah memahami serta menggunakan website ini dimana website ini memberikan informasi yang cukup jelas mengenai hal-hal yang perlu diinput pada saat melakukan pendaftaran untuk siswa SD, pada bagian atas terdapat gambar animasi anak SD yang mana menunjukan bahwa website ini berhubungan dengan anak SD yaitu pendaftaran sekolah SD, lalu terdapat tulisan nama sekolah dan formulir pendaftaran yang sudah sangat jelas bahwa website ini untuk pendaftaran SD. Bagian-bagian yang penting dari system ini sudah sangat terlihat misal menginputkan data siswa, lalu menginputkan data orang tua/wali lalu mengupload berkas – berkas yang berkaitan dengan pendaftaran. Lalu ada Konsep ini dalam Interaksi Manusia-Komputer mengacu pada sifat yang dirasakan dan aktual dari suatu hal, terutama sifat-sifat dasar yang menentukan bagaimana hal itu dapat digunakan. Yaitu affordances adalah tindakan yang disarankan oleh desain suatu objek kepada penggunanya.
Affordances memberikan petunjuk yang kuat sehingga tidak ada instruksi atau label yang diperlukan, pada desain formulir ini terdapat beberapa affordances mengindikasikan bagaimana seharusnya digunakan yaitu terdapat elevator button yang mana user tau bahwa itu untuk menggerakan website untuk bisa keatas dan kebawah, lalu terdapat juga metaphor seperti untuk tanggal, lalu metaphor gambar untuk mengupload dokumen. Dalam website ini juga terdapat beberapa interface dropdown yang berfungsi untuk memilih isian dari data yang harus diisikan. Interface dropdown itu sendiri telah sesuai dan telah mengindikasikan bagaimana seharusnya dropdown tersebut digunakan. Lalu terdapat constraints pada bawah text box tersebut yang mempermudah user dalam mengisi data pendaftaran di website ini dan terhindar dari kesalahan penginputan data pendaftaran. Tanda (*) ini sendiri merupakan sebuah peringatan agar data yang diminta oleh sistem tersebut harus terisi dan tidak boleh kosong.
Pada desain ini, terdapat mapping berupa menu-menu yang ada pada website ini dimana ketika pertama kali mengakses website ada Menu pertama yang harus di lengkapi oleh user yaitu menu Data Siswa dan apabila menu tersebut sudah terisi lengkap kemudian user mengklik button Halaman Berikutnya atau next maka user akan diarahkan ke menu yang selanjutnya yaitu menu Data Orang Tua/Wali dan jika ingin kembali ke halaman sebelumnya dapat mengklik button Back. Dan Mapping pada desain ini penempatan dan fungsinya mudah dipahami oleh user. Diawali dengan user mengisi Data Siswa lalu mengisi Data oaring tua/
wali lalu mengisi asal sekolah dan yang terakhir yaitu mengupload berkas – berkas yang digunakan untuk mendaftar sebagai siswa SD. Jika semua belum diisi atau diupload maka tidak dapat di send atau dikirim. Pada desain ini terdapat beberapa causality. Causality ini terjadi pada saat user melakukan kesalahan penginputan data atau data yang diinput masih kurang maka sistem akan memberikan warning information agar user melengkapi atau mengoreksi data yang salah tersebut. Pada desain ini, sistem yang digunakan hampir sama dengan sistem umum yang sudah ada sebelumnya sehingga lebih memudahkan user untuk menggunakan sistem pada website ini. Lalu pada website ini, tidak terdapat idioms yang digunakan. Karena perintah-perintah atau catatan/informasi yang digunakan pada sistem ini sudah tertulis tanpa penggunaan idioms. Dan Ppada website ini, sistem atau website ini hanya disediakan untuk user yang memang benar-benar akan mendaftarkan diri untuk menjadi siswa SD.
Kasus 2
sebuah perusahaan (untuk lamaran pekerjaan) https://form.jotform.com/220812156619454
Analisa
Pada kasus 2 ini diminta untuk mendesain formulir untuk Lamaran pekerjaan, pada form yang saya desain mengandung HCI Design Concepts yang pertama visibility yaitu user dapat dengan mudah memahami serta menggunakan website ini dimana website ini memberikan informasi yang cukup jelas mengenai hal-hal yang perlu diinput pada saat melakukan pendaftaran untuk melamar sebuah pekerjaan, lalu terdapat tulisan nama perusahaan dan Form Pengisisan Data Pelamar yang sudah sangat jelas bahwa website ini untuk melamar pekerjaan. Bagian-bagian yang penting dari system ini sudah sangat terlihat misal menginputkan data diri, lalu menginputkan data Pendidikan lalu mengupload berkas – berkas yang berkaitan dengan melamar pekerjaan . Lalu ada Konsep ini dalam Interaksi Manusia-Komputer mengacu pada sifat yang dirasakan dan aktual dari suatu hal, terutama sifat-sifat dasar yang menentukan bagaimana hal itu dapat digunakan. Yaitu affordances adalah tindakan yang disarankan oleh desain suatu objek kepada penggunanya. Affordances memberikan petunjuk yang kuat sehingga tidak ada instruksi atau label yang diperlukan, pada desain formulir ini terdapat beberapa affordances mengindikasikan bagaimana seharusnya digunakan yaitu terdapat elevator button yang mana user tau bahwa itu untuk menggerakan website untuk bisa keatas dan kebawah, lalu terdapat juga metaphor seperti untuk tanggal, lalu metaphor gambar untuk mengupload dokumen. Dalam website ini juga terdapat beberapa interface dropdown yang berfungsi untuk memilih isian dari data yang harus diisikan. Interface dropdown itu sendiri telah sesuai dan telah mengindikasikan bagaimana seharusnya dropdown tersebut digunakan.
Lalu terdapat constraints pada bawah text box tersebut yang mempermudah user dalam mengisi data pendaftaran di website ini dan terhindar dari kesalahan penginputan data pendaftaran.
Tanda (*) ini sendiri merupakan sebuah peringatan agar data yang diminta oleh sistem tersebut harus terisi dan tidak boleh kosong. Mapping pada desain ini penempatan dan fungsinya mudah dipahami oleh user. Diawali dengan user mengisi Data diri lalu mengisi Data Pendidikan lalu mengisi orang yang bisa dihubungi ketika keadaan darurat lalu mengisi ingin mendaftar pada posisi apa dan seterusnya dan yang terakhir yaitu mengupload cv. Jika semua belum diisi atau diupload maka tidak dapat di send atau dikirim. Pada desain ini terdapat beberapa causality.
Causality ini terjadi pada saat user melakukan kesalahan penginputan data atau data yang diinput masih kurang maka sistem akan memberikan warning information agar user melengkapi atau mengoreksi data yang salah tersebut. Pada desain ini, sistem yang digunakan hampir sama dengan sistem umum yang sudah ada sebelumnya sehingga lebih memudahkan user untuk menggunakan sistem pada website ini. Lalu pada website ini, tidak terdapat idioms yang digunakan. Karena perintah-perintah atau catatan/informasi yang digunakan pada sistem ini sudah tertulis tanpa penggunaan idioms. Dan Ppada website ini, sistem atau website ini hanya disediakan untuk user yang memang benar-benar akan melamar pekerjaan.
