Modul D3 SI IMK [PDF]

Citation preview

INTERAKSI MANUSIA & KOMPUTER (IMK)



MODUL PERKULIAHAN FAKULTAS ILMU KOMPUTER UPN VETERAN JAKARTA Gd. Ki Hadjar Dewantara, Kampus UPN Veteran Jakarta, Jl. RS Fatmawati No.1, Pondok Labu, Cilandak, Jakarta Selatan 12450



1



DAFTAR ISI LEMBAR PENGESAHAN ________________________________________ 3 KONTRAK PERKULIAHAN ______________________________________ 4 Teknis Pelaksanaan ___________________________________________________ 4 Tugas & Komponen Penilaian ____________________________________________ 4 Tata Tertib ___________________________________________________________ 4 MODUL 01 – GAMBARAN INTERAKSI MANUSIA & KOMPUTER _________ 5 Apa itu IMK? - Definisi Pragmatis _________________________________________ 5 Desain User Interface (UI Design) _________________________________________ 5 Desain User Experience (UX Design) ______________________________________ 5 Motivasi Mempelajari IMK _______________________________________________ 6 DISKUSI 01 __________________________________________________ 7 MODUL 02 – PRINSIP USABILITY & USER-CENTERED DESIGN (UCD) ___ 8 Apa itu Usability? _____________________________________________________ 8



User Centered Design (UCD) ____________________________________________ 8 Metodologi Design Thinking _____________________________________________ 8 MODUL 03 – FAKTOR MANUSIA & TEORI WARNA __________________ 11 Faktor dalam Kemampuan Manusia ______________________________________ 11



Human’s Vision ______________________________________________________ 12 Teori Warna ________________________________________________________ 13 DISKUSI 02 _________________________________________________ 16 MODUL 04 – RAGAM DIALOG ___________________________________ 17 Jenis-jenis Ragam DIalog ______________________________________________ 17



Direct Manipulation ___________________________________________________ 17 MODUL 05 – WIREFRAMES DAN PROTOTYPING ___________________ 19 Bagaimana Membuat Wireframe? ________________________________________ 19 Metode Prototyping ___________________________________________________ 20 DISKUSI 03 _________________________________________________ 22 MODUL 06 – ANALISIS STAKEHOLDER ___________________________ 23



Soft-system Methodology ______________________________________________ 23 Socio-technical Modeling ______________________________________________ 24 Empathy Map _______________________________________________________ 24 User Persona _______________________________________________________ 25 DISKUSI 04 _________________________________________________ 27 MODUL 07 – PEMODELAN TASK & COGNITIVE ____________________ 28



2 Hierarchical Task Analysis _____________________________________________ 28 Pemodelan GOMS ___________________________________________________ 29



Keystroke Level Modeling ______________________________________________ 31 DISKUSI 05 _________________________________________________ 32 MODUL 08 – PENGUKURAN USABILITY___________________________ 33



Time-on Task dan Task Completion Rate __________________________________ 33 Usability Metrics _____________________________________________________ 34 CONTOH KUESIONER SUS (Software Usability Scale) _______________ 35 Data Pengguna ______________________________________________________ 35 Petunjuk Pengisian Kuesioner___________________________________________ 35 Keterangan : Skala Pengukuran SUS _____________________________________ 36 PROYEK AKHIR (High-Fidelity Prototype) __________________________ 37 Gambaran Tugas ____________________________________________________ 37 Luaran Proyek _______________________________________________________ 37 Pengumpulan _______________________________________________________ 37 Referensi___________________________________________________________ 37 Poin Penilaian _______________________________________________________ 37 DAFTAR PUSTAKA ___________________________________________ 38



3



LEMBAR PENGESAHAN MODUL PERKULIAHAN INTERAKSI MANUSIA DAN KOMPUTER



PROGRAM STUDI D3 SISTEM INFORMASI FAKULTAS ILMU KOMPUTER



disusun oleh Dosen Koordinator



Ika Nurlaili Isnainiyah, S.Kom., M.Sc.



disetujui oleh Ketua Program Studi Sistem Informasi Program Diploma



Ika Nurlaili Isnainiyah, S.Kom., M.Sc.



4



KONTRAK PERKULIAHAN Teknis Pelaksanaan Perkuliahan dilaksanakan selama 16 kali pertemuan, terdiri atas : •



14 kali pertemuan tatap muka teori



•



1 kali UTS



•



1 kali UAS



Metode perkuliahan dilaksanakan berdasarkan pendekatan student centered learning yang dibagi menjadi pengkajian teori, diskusi kelompok, observasi lapangan, design sprint



simulation, quizzes dan project assesment. Seluruh



materi



dan



tugas



dapat



diakses



melalui



e-learning



dengan



alamat



https://elearning40.upnvj.ac.id.



Tugas & Komponen Penilaian •



2 tugas latihan individu (20%)



•



2 tugas latihan kelompok (20%)



•



UTS (20%)



•



UAS dikerjakan dalam kelompok – menghasilkan presentasi high-fidelity-prototype (40%)



Tata Tertib •



Mahasiswa menghadiri perkuliahan dengan tepat waktu. Keterlambatan lebih dari 15 menit tidak diperkenankan memasuki ruang kelas.



•



Wajib terdaftar sebagai peserta kelas pada e-learning.



•



Keterlambatan pengumpulan tugas akan mengurangi poin penilaian.



•



Mengenakan pakaian yang sopan dan rapi serta bersepatu.



•



Berdiskusi dan menyampaikan pendapat dengan menggunakan bahasa yang baik.



•



Kehadiran minimum 80%.



5



MODUL 01 – GAMBARAN INTERAKSI MANUSIA & KOMPUTER Tujuan Perkuliahan : Mahasiswa dapat mengetahui perkembangan interaksi manusia dan komputer, merancang antarmuka yang baik dalam pembuatan program, memahami dan melakukan riset terhadap pengguna, memahami ruang lingkup dan prinsip interaksi manusia dan komputer dalam berbagai domain aplikasi.



Apa itu IMK? - Definisi Pragmatis Interaksi Manusia dan Komputer (IMK) atau Human Computer Interaction adalah suatu ilmu yang mempelajari bagaimana manusia—dalam hal ini sebagai user atau pengguna—berinteraksi dengan berbagai jenis komputer. IMK juga mempelajari berbagai teknik atau pendekatan untuk memahami sejauh mana komputer dapat dimodifikasi dan dikembangkan untuk mencapai interaksi yang sukses. Bidang ini melibatkan berbagai jenis



machine, interface, aplikasi, prototype dan dalam tingkatan yang lebih tinggi terdapat suatu bidang Human Robot Interaction (HRI). Interaksi yang sukses dapat dipenuhi dengan dua hal, yaitu : (1) desain yang baik dan (2) fungsi yang baik. Kedua hal tersebut dapat dipenuhi dengan mendesain user



interface dan user experience yang baik.



Desain User Interface (UI Design) UI Design berfokus pada look and feel dari suatu produk, seperti penggunaan fonts, warna, tata letak dan ruang [1]. UI merupakan hubungan antara pengguna dengan aplikasi yang harus didesain dengan jelas, mudah dan efisien. UI adalah hasil dari UX yang dibahas pada sub-bab berikutnya.



Desain User Experience (UX Design) UX Design merupakan sebuah proses dalam mendesain produk fisik maupun digital agar bermanfaat (useful), mudah digunakan, serta menyediakan pengalaman yang baik



6 dalam berinteraksi [2]. UX Design meliputi banyak aspek, diantaranya adalah designing,



branding, research, usability, accessibility dan function. Secara garis besar, UX meliputi pertanyaan mengapa, apa dan bagaimana suatu produk digunakan oleh penggunanya seperti diilustrasikan pada gambar 1.



Gambar 1. Ilustrasi penerapan UX pada mesin ATM



Motivasi Mempelajari IMK IMK membantu memahami mengapa beberapa produk perangkat lunak sangat baik dan beberapa lainnya jarang atau tidak banyak digunakan. Sebagian diantara produk tersebut belum memenuhi kaidah UI maupun UX yang baik, serta gagal dalam memenuhi aspek ergonomis. Hal-hal berikut perlu dihindari agar audience yang dimiliki tidak berpindah pada produk lainnya.



7



DISKUSI 01 Konsep dan strategi dalam Interaksi Manusia dan Komputer ( IMK) mencakup berbagai bidang ilmu (multidisiplin), seperti ilmu komputer, psikologi, cognitive science , komunikasi, pendidikan, antropologi dan desain. Lakukan pencarian berkaitan dengan bidang kerja yang berhubungan dengan area ilmu IMK sebagai berikut.



•



UI Designer atau UI Prototyper



•



UX Researcher



•



UX Writer



•



Interaction Designer



Kemampuan apa saja yang perlu dikuasai dalam setiap bidang kerja tersebut? Bagaimana peran dan penerapan ilmu IMK dalam dunia industri saat ini?



Lakukan pencarian dari berbagai sumber yang relevan dan sampaikan hasil informasi yang Anda peroleh dalam forum yang tersedia di e-learning!



8



MODUL 02 – PRINSIP USABILITY & USERCENTERED DESIGN (UCD) Dalam mewujudkan kesuksesan interaksi antara aplikasi dengan penggunanya, dua hal berikut perlu dipenuhi, yaitu : (1) desain yang baik dan (2) fungsi yang baik. Keduanya mampu dipenuhi dengan memperhatikan aspek usability pada aplikasi, yang juga berkaitan dengan kemampuan pengguna, tujuan maupun skenario pengguna. Perlu diterapkan juga sudut pandang yang berfokus pada penggua atau dikenal sebagai user centered design.



Apa itu Usability? Usability, berdasarkan ISO 9241-11, adalah sejauh mana sebuah produk dapat digunakan oleh pengguna tertentu untuk mencapai tujuan tertentu dengan efektif, efisiensi dan pengguna menjadi puas dalam penggunaan produk [3]. Secara umum pengertian



usability adalah atribut dari kualitas yang digunakan untuk mengevaluasi bagaimana mudahnya sebuah antar muka digunakan.



User Centered Design (UCD) User Centered Design (UCD) merupakan filosofi dalam perancangan desain sistem yang berfokus pada kebutuhan user. UCD adalah bagian dari SDLC (Software



Development Life Cycle) yang lebih berfokus pada kebutuhan pengguna sehingga diharapkan aplikasi yang akan mengikuti kebutuhan pengguna sehingga pengguna tidak perlu mengubah perilaku untuk menggunakan aplikasi [4]. Bagaimana UCD dapat diterapkan dengan baik? Penerapan UCD membutuhkan riset dan pemahaman yang berfokus terhadap pengguna, percobaan dan iterasi saat pengguna mengalami kegagalan.



Metodologi Design Thinking Design thinking yang pertama kali diperkenalkan oleh Hasso Plattner, merupakan salah satu proses strategis yang tidak terlepas dari UCD. Proses design thinking disusun



9 secara sistematis untuk menyelesaikan masalah melalui produk, layanan atau alat pembantu lainnya. Dalam prosesnya, dilakukan tahapan pengumpulan informasi, menggagas ide dan akhirnya menguji produk. Rentetan langkah tersebut merupakan tahapan berkreasi yang disajikan pada gambar 2.



Gambar 2. Tahapan Design Thinking



Proses berempati terhadap pengguna adalah landasan awal dalam proses design thinking. Berbagai informasi yang telah dikumpulkan dari tahap empathize selanjutnya dilakukan analisis lebih lanjut untuk menemukan harapan-harapan (gain point) dan kendala atau permasalahan (pain point) dari pengguna untuk menetapkan elemen produk dalam fase



define. Pengembangan ide mulai dilakukan dalam tahapan ideate yang melibatkan beberapa kegiatan pematangan ide seperti brainstorming, mindmapping dan sketching. Ide tersebut selanjutnya dikembangkan ke dalam wireframe dan prototype (akan dibahas di modul lain) dalam fase berikutnya. Prototype yang telah siap akan dilakukan pengujian pada tahapan



10 test untuk mendapatkan umpan balik. Jika hasil yang diperoleh sudah baik, maka prototype siap untuk diimplementasikan. Bagaimana mengambil umpan balik dari penggunaan produk? Hal tersebut dapat meliputi beberapa jenis pengujian untuk menentukan completion rate pada produk yang dikembangkan, yaitu : •



A/B Testing



•



Usability Testing



•



Cognitive Walkthrough



11



MODUL 03 – FAKTOR MANUSIA & TEORI WARNA Faktor dalam Kemampuan Manusia Dalam proses memahami dan berempati terhadap pengguna, terdapat beberapa faktor yang perlu dipertimbangkan, yaitu berkaitan dengan (1) knowledge/experience, (2) karakter psikologis dan (3) karakter fisik. Faktor-faktor tesebut disajikan pada tabel 1-3 berikut [5]. Tabel 1. Faktor Manusia (knowledge/experience)



Tabel 2. Faktor Manusia (karakteristik psikologis)



12 Tabel 3. Faktor Manusia (karakteristik fisik)



Faktor-faktor manusia sangat dipengaruhi oleh 3 dari 5 panca indera, yaitu indera penglihatan, indera pendengaran dan indera perasa. Indera penglihatan merupakan bagian utama yang memproses tampilan dalam UI secara menyeluruh. Indera pendengaran akan memproses suara yang terdapat dalam aplikasi, sedangkan indera perasa memungkinkan interaksi langsung dalam penggunaan tombol dan touchscreen.



Human’s Vision Penglihatan manusia merupakan bagian yang tidak terpisahkan dalam pengalaman pengguna terhadap look and feel dari aplikasi. Kemampuan manusia dalam penglihatan dipengaruhi oleh jumlah cahaya yang diterima oleh mata. Intensitas cahaya akan berpengaruh terhadap luminance yang seharusnya menghasilkan tingkat kecerahan (brightness) dari objek yang dilihat. Melalui penglihatan, manusia melakukan observasi terhadap lingkungan sekitar. Pergerakan mata manusia terdiri atas dua aktivitas utama : fixations dan saccades [6].



Fixations terjadi ketika melihat suatu titik objek tertentu selama beberapa waktu, secara umum berkisar antara 200 ms. Saccades merupakan perpindahan yang terjadi pada satu titik fixation ke titik fixation lainnya. Banyak penelitian IMK yang berkaitan dengan observasi melalui pergerakan mata. Salah satunya adalah analisis yang dilakukan terhadap bagaimana pengguna melihat dan membaca konten yang terdapat pada halaman website untuk menemukan pattern dari keseluruhan viewers.



13



Gambar 3. Pergerakan mata pengguna pada konten website [6]



Teori Warna Warna merupakan salah satu bagian pengalaman pengguna yang diperoleh dari indera penglihatan. Setiap warna dapat menciptakan persepsi dari pengguna. Warna terang (warm colors) seperti merah dan oranye, umumnya mengisyaratkan suatu keharusan aksi, peringatan dan perhatian penting. Sebaliknya, warna seperti hijau dan biru ( cool colors) memberikan informasi, status dan aktivitas yang telah berhasil dilakukan oleh pengguna. Tabel 4 menunjukkan saran rekomendasi warna yang dapat digunakan untuk foreground dan background.



14 Tabel 4. Kombinasi warna foreground/background



Teori kombinasi pewarnaan dapat didasarkan dengan pembentukan kombinasi warna yang mengambil inspirasi dari lingkungan sekitar. Contohnya pada sebuah aplikasi atau website yang berkaitan dengan travelling akan melibatkan banyak warna biru. Hal tersebut didasarkan representasi lingkungan berkaitan dengan warna laut, langit, pegunungan dan berbagai objek pemandangan lainnya. Metode lain dalam menerapkan kombinasi warna adalah dengan mengambil referensi berdasarkan roda warna (color wheel) yang disajikan pada gambar 4. Kombinasi ini dapat menciptakan kombinasi warna analog, komplementer, triadic dan split complement.



15



Gambar 4. Roda warna dalam teori warna



16



DISKUSI 02 Aspek apa saja yang perlu diterapkan dalam pemilihan kombinasi warna pada sebuah user interface (UI)? Kombinasi warna salah satunya dapat dilakukan dengan penggalian konteks dengan melakukan observasi pada lingkungan sekitar.



Tugas Individu : Buatlah perbaikan kombinasi warna terhadap sampel user interface untuk website bertemakan makanan organik yang terdapat pada e-learning. Anda dapat menggunakan kombinasi warna berdasarkan konteks, menggunakan kombinasi yang terdapat pada color wheel atau menggabungkan keduanya.



Tugas dapat dikumpulkan melalui e-learning dan akan dibahas dalam diskusi kelas pada pertemuan tatap muka ke-4. Selamat mengerjakan!



17



MODUL 04 – RAGAM DIALOG Terjadinya komunikasi antar manusia dan komputer dimungkinkan oleh adanya berbagai teknik dialog interaktif yang cukup bervariasi, dimulai dari yang sederhana sampai yang cukup canggih. Gaya interaksi tersebut disebut dengan ragam dialog.



Jenis-jenis Ragam DIalog Berbagai jenis ragam dialog diciptakan untuk menciptakan lingkungan aplikasi yang



user friendly. Secara umum, terdapat 3 jenis utama dalam ragam dialog[7], yaitu : •



Command-line Dialogue – ragam dialog berikut berada dalam suatu domain yang disebut bahasa perintah (command language). Ragam dialog ini memerlukan pelatihan yang lama dan membutuhkan beban ingatan pengguna yang tinggi.



•



Natural languange interface – ragam dialog ini memerlukan sebuah sistem penterjemah (interpreter) yang dapat menterjemahkan suatu kalimat pada dua arah. Semakin luwes bahasa alami yang dikehendaki oleh pengguna, semakin rumit pula sistem penterjemah yang harus disiapkan oleh pengembang sistem.



•



Direct Manipulation – merupakan ragam dialog dimana aksi yang dilakukan oleh pengguna dapat langsung terlihat pada obyek yang tampak pada layar monitor. Ragam dialog ini sering disebut juga dengan ‘point-select interface’ yang menyertakan obyek dan aksi. Ragam dialog ini akan dibahas pada sub bab selanjutnya.



Direct Manipulation Berdasarkan Nielsen Norman Group, direct manipulation (DM) didefnisikan sebagai sebuah gaya interaksi dimana pengguna langsung merespon suatu obyek menggunakan tindakan yang dapat dilakukan secara berulang dan memberikan hasil yang langsung ditampilkan di layar. Ragam dialog ini memungkinkan interaksi yang cepat dan



18 membutuhkan beban ingatan yang lebih ringan bagi pengguna. DM memerlukan dukungan dari beberapa devices seperti mouse, trackball atau layar sentuh (touch screen). Dalam ragam dialog DM, dikenal istilah WIMP yang berarti Window, Icon, Menu dan Pointer. WIMP memungkinkan interaksi para pengguna tanpa input berupa teks yang berasal dari keyboard. WIMP memerlukan upaya untuk menciptakan object of interest yang dapat menjadi ketertarikan atau fokus perhatian pengguna. Dalam perkembangannaya, WIMP melibatkan berbagai tahapan redesain khususnya berkaitan dengan icon design dari yang sangat detail menjadi lebih sederhana dan mudah dipahami.



19



MODUL 05 – WIREFRAMES DAN PROTOTYPING Salah satu tahap awal dalam merancang user interface adalah pembuatan wireframe.



Wireframe merupakan kerangka dasar untuk penataan item-item pada suatu interface sebelum proses desain sesungguhnya dimulai. Wireframe merupakan salah satu tahapan yang terdapat dalam prototyping.



Bagaimana Membuat Wireframe? Secara keseluruhan, wireframe hanya terdiri atas garis dan segi empat yang merepresentasikan tata letak dari elemen-elemen yang terdapat dalam aplikasi. Sebelum perancangan wireframe dimulai, biasanya terlebih dahulu dibangun storyboard serta



information architecture yang berkaitan dengan informasi apa saja yang terdapat pada aplikasi (form input, thumbnail, tekas paragraf, gambar atau elemen lainnya). Storyboard



Storyboard adalah visualisasi ide dari jalannya aplikasi yang akan dibangun, sehingga dapat memberikan gambaran dari aplikasi yang akan dihasilkan atau tepat. Elemen yang terdapat dalam wireframe diantaranya adalah navigasi dan tata letak (layout) interface aplikasi.



Gambar 5. Contoh wireframe halaman web



20 Pembuatan wireframe dapat dilakukan dengan menggunakan sketsa yang dilakukan secara manual di atas kertas (lihat gambar 5) atau menggunakan stencil dan potonganpotongan gambar. Cara lain yang dapat dilakukan adalah membuat wireframe dengan menggunakan aplikasi-aplikasi berikut : •



InVision



•



UXPin



•



Wireframe.cc



•



Balsamiq mockups



Metode Prototyping Prototyping merupakan proses merancang model dari sebuah aplikasi melalui proses interaksi yang biasanya digunakan untuk keperluan pengujian berulang sebelum berlanjut ke tahap pembuatan produk sesungguhnya [2]. Terdapat tiga jenis utama dari



prototype (lihat gambar 6), yaitu : •



Low-fidelity prototype merupakan desain prototype yang tingkat presisinya masih rendah dan belum benar-benar mendekati produk aslinya. Umumnya jenis prototype ini dapat direpresentasikan dengan sketsa hingga wireframe.



•



Mid-fiidelity prototype merupakan penyempurnaan desain low-fidelity prototype untuk menuju desain yang lebih sempurna.



•



High-fidelity prototype adalah jenis prototype yang memiliki presisi yang tinggi dengan mockup yang sesuai dengan aplikasi sesungguhnya serta disertai dengan interaksi.



21



Gambar 6. Ilustrasi dari Low-fidelity ke High-fidelity prototype



Beberapa aplikasi dapat digunakan dalam merancang high-fidelity prototype dan banyak digunakan di kalangan praktisi bidang UI/UX. Aplikasi tersebut adalah Adobe Experience Designer (XD), Figma dan Marvelapp.



22



DISKUSI 03 Tahapan design sprint dalam pengembangan prototype dapat diterapkan sebagai proses kolaboratif yang dapat membuahkan banyak ide dan inovasi. Design Sprint ini dibuat oleh Jake Knapp dari Google Venture pada tahun 2010 dan kini banyak sekali dipakai oleh berbagai perusahaan .



Design sprint adalah suatu metode untuk membangun konsep hingga prototype dalam waktu 5 hari yang memiliki 5 tahapan yang sangat komunikatif dan interaktif seperti tertera di atas untuk mengeluarkan semua ide, inspirasi, masalah yang ada, serta solusi yang kemudian diwujudkan dalam prototype untuk diujikan ke calon pengguna.



Catatan : Simulasi design sprint akan dilakukan secara berkelompok dalam diskusi di kelas pada pertemuan tatap muka ke-6. Persiapkan diri Anda.



23



MODUL 06 – ANALISIS STAKEHOLDER Dalam pendekatan UCD, diperlukan pemahaman secara mendalam terhadap pengguna sehingga perlu diperhatikan berbagai isu socio-organizational yang berkaitan dengan lingkungan pengguna. Analisis dilakukan terhadap pengguna atau stakeholder yang melibatkan empat tingkatan[7], yaitu : •



Primary stakeholder merupakan pengguna utama yang berinteraksi secara langsung dengan sistem.



•



Secondary stakeholder adalah mereka yang hanya sedikit berinteraksi atau memiliki interaksi secara tidak langsung sebagai penyedia dan penerima data yang digunakan dalam sistem.



•



Tertiary stakeholder merupakan pihak yang secara tidak langsung terlibat dan bahkan tidak turut menggunakan sistem, namun memiliki faktor kesuksesan yang dipengaruhi oleh ada atau tidaknya sistem.



•



Facilitating stakeholder adalah para tim pengembang sistem yang terdiri dari researcher, analisis sistem, desainer hingga programmer.



Soft-system Methodology Soft-system Methodology (SSM) merupakan sebuah metodologi untuk menganalisis dan melakukan pemodelan sistem yang mengintegrasikan dua pendekatan sistem dari sudut pandang teknologi (hard) dan manusia (soft). SSM dikembangkan di Inggris oleh Peter Checkland di University of Lancaster di dalam program penelitian selama sepuluh tahun dan dipulikasikan pertama kali pada tahun 1981. SSM memiliki kelebihan untuk menganalisis kondisi yang rumit dan mengetahui masalah-masalah yang berkaitan dengan perilaku organisasi dan manusia yang sifatnya tidak menentu. SSM dilakukan dengan tahapan sebagai berikut : •



Analisis terhadap problem situation.



24 •



Formulasi dan presentasi permasalahan dengan rich picture.



•



Membuat root definition dari gambaran permasalahan dengan melakukan socio-



technical modeling. •



Membandingkan model dengan kenyataan sebagai bahan membuat perubahan berupa usulan sistem baru atau peningkatan sistem yang sudah ada.



Socio-technical Modeling Salah satu teknik analisis yang dapat digunakan dalam pemodelan socio-technical adalah CATWOE Analysis. CATWOE adalah mnemonik yang membantu mengidentifikasi dan mengelompokkan semua informasi (manusia, proses, lingkungan, entitas) dari sistem yang sedang dianalisis untuk merumuskan root definition. Komponen dalam analisis CATWOE digambarkan pada tabel 5 sebagai berikut. Tabel 5. Analisis CATWOE



Deskripsi



Komponen C (Client)



Pihak yang memperoleh manfaat dengan adanya T.



A (Actors)



Pengguna dari sistem atau T yang dilakukan.



T (Transformation)



Berupa aktivitas input dan output yang terjadi ketika sistem diterapkan.



W (Worldview)



Konteks yang memberikan gambar situasi ketika T diterapkan.



O (Owner)



Pihak yang memiliki wewenang penuh atas penerapan T.



E (Environment)



Lingkungan dimana T diterapkan.



Empathy Map Empathy



map



adalah



visualisasi



kolaboratif



yang



digunakan



untuk



mengartikulasikan apa yang kita ketahui tentang tipe pengguna tertentu. Fungsi dari



empathy map adalah membantu memvisualisasikan sikap dan perilaku pengguna dan



25 menyelaraskan pemahaman bersama tentang kebutuhan pengguna sehingga dapat membantu proses pengambilan keputusan desain. Secara umum, empathy map dibagi menjadi empat kuadran (Says, Thinks, Do, dan Feels), dengan pengguna atau sebuah



persona di tengah[8]. Peta ini memberikan pandangan sekilas tentang siapa pengguna secara keseluruhan.



Gambar 7. Contoh visualisasi empathy map [8]



User Persona Persona pertama kali diperkenalkan oleh Alan Cooper adalah representasi dari target user yang akan menggunakan aplikasi. Persona berisikan dokumentasi berupa penjelasan tentang karakteristik user yang digabungkan dengan tujuan, kebutuhan dan



26 ketertarikannya berdasarkan fakta dan hasil penelitian yang telah dilakukan. Apa saja yang dapat digambarkan oleh suatu persona? •



Karakteristik pengguna baik fisik, psikologis serta keahliannya (lihat Modul 3).



•



Perilaku pengguna saat itu



•



Sikap pengguna pada umumnya



•



Keinginan atau kebutuhan dari produk yang didesain



•



Kesulitan pengguna untuk mengatasi situasi saat itu



•



Tujuan pengguna



Sebuah user persona harus mampu menjelaskan hasil observasi user research dan fokus pada kondisi saat ini (bukan kondisi yang akan terjadi di masa mendatang). Persona (contoh terdapat pada gambar ) dapat membantu tim desain untuk menetapkan dasar penyusunan UX.



Gambar 8. Contoh persona untuk aplikasi Architectural Inspiration



27



DISKUSI 04 Bagaimana menyusun sebuah user persona ? Aspek apa saja yang perlu kita ketahui dari target pengguna? Dalam kondisi dimana tidak ada sumber sama sekali untuk melakukan penelitian pengguna, user persona dapat digantikan dengan proto persona . Persona ini dibuat berdasarkan judgement yang dilakukan oleh tim didasarkan pada sumber -sumber yang relevan.



Tugas kelompok : Lakukan observasi lapangan kepada pengguna berkaitan dengan ide



prototype aplikasi yang akan Anda bangun bersama dengan tim untuk Proyek Akhir. Buatlah user persona yang merepresentasikan target pengguna aplikasi tim Anda.



Tugas dapat dikumpulkan melalui e-learning dan akan dipresentasikan dalam diskusi kelas pada pertemuan tatap muka ke-9. Selamat mengerjakan!



28



MODUL 07 – PEMODELAN TASK & COGNITIVE Dalam mempermudah proses pembuatan prototype, terdapat sejumlah metode yang dapat memodelkan pengalaman pengguna atau UX baik secara analitis maupun deskriptif. Metode pemodelan tersebut adalah task modeling dan cognitive modeling yang ditujukan untuk menggambarkan apa yang dilakukan sistem dan bagaimana kemampuannya diterjemahkan ke dalam pengalaman penggunaan sistem.



Hierarchical Task Analysis Hierarchical Task Analysis (HTA) memberikan pemahaman tentang tugas (task) yang harus dilakukan pengguna untuk mencapai tujuan tertentu [7]. Tugas dapat digambarkan secara menyeluruh atau mendetail sesuai dengan fitur yang ada dalam aplikasi. Gambar 9 memberikan ilustrasi penggambaran HTA untuk fitur ( task) pemesanan buku pada sebuah website Online Bookstore.



Gambar 9. Contoh HTA pada online bookstore



Pada contoh tersebut, terlihat bahwa task akan dibreakdwon menjadi subtask untuk menunjukkan langkah-langkah yang perlu dilakukan pengguna ketika melakukan pemesanan buku. Masing-masing task dan subtask diberikan penomoran yang menandakan urutan serta dapat diberikan kondisi apabila task adalah opsional atau dapat dilakukan tanpa memperhatikan urutan (contoh task modeling dengan HTA lebih detail terdapat pada gambar 10).



29



Gambar 10. Contoh ilustrasi HTA dalam membuat secangkir teh



Pemodelan GOMS Pemodelan GOMS yang diperkenalkan oleh Card, Moran dan Newell merupakan kependekan dari Goal, Operators, Methods and Selection. GOMS merupakan sebuah struktur pemodelan kognitif yang terdiri dari empat komponen: (1) sekumpulan tujuan, (2) sekumpulan operator, (3) sekumpulan metode untuk mencapai tujuan, dan (4) sekumpulan aturan seleksi untuk memilih di antara metode yang ada. Struktur pemodelan GOMS dapat dibangun dan digunakan untuk memprediksi waktu yang dibutuhkan untuk menyelesaikan tugas (time-on-task) yang akan dibahas pada Modul 8.



30



Gambar 11. Contoh pemodelan GOMS



Ilustrasi pemodelan GOMS yang terdapat pada gambar 11 merupakan alur aktivitas kognitif



pengguna



dalam memulai



sebuah



prototype permainan edukasi yang



diperuntukkan untuk pengunjung Taman Mini Indonesia Indah (TMII). Terdapat dua pilihan (selections) yang dapat dilakukan untuk memulai permainan, yaitu (1) dengan langsung menekan tombol main pada layar Home; atau (2) memilih dahulu anjungan daerah yang akan dijelajahi, baru kemudian memulai permainan. Keduanya memiliki langkah-langkah (operators) yang berbeda satu sama lain. Selections dapat dipertimbangkan dalam proses pengujian (testing) untuk mengetahui seperti apa pilihan alur yang menjadi preferensi dari para pengguna untuk mencapai tujuan.



31 Keystroke Level Modeling Keystroke Level Model (KLM) merupakan salah satu metode pemodelan kognitif selain GOMS yang menggambarkan operator-operator tugas pengguna dalam beberapa kode huruf. KLM digunakan untuk mengetahui estimasi berapa lama waktu yang diperlukan oleh pengguna dalam menjalankan sebuah task [7]. Operator huruf yang digunakan dalam pemodelan KLM adalah sebagai berikut. •



K keystroke, berupa penekanan tombol keyboard, termasuk tombol shift dan tomboltombol lainnya.



•



B berupa penekanan tombol mouse (mouse button)



•



P pointing, menggerakkan mouse (atau device lain) ke suatu target lokasi



•



H homing, perpindahan tangan dari mouse dan keyboard



•



D drawing, menggambar garis dengan menggunakan mouse



•



M mental, persiapan pemikiran untuk menyelesaikan suatu aksi fisik



•



R system response, yang bisa diabaikan jika user tidak perlu menunggu penyelesaian dari suatu tugas, seperti dalam mengcopy satu karakter.



Tabel 6. Contoh pemodelan KLM untuk delete file ke trash [9]



32



DISKUSI 05 Task modeling dan cognitive modeling dapat memberikan pemahaman yang lebih



mendalam terhadap skenario penggunaan aplikasi. Pemodelan cognitive menggunakan GOMS atau KLM juga dapat digunakan sebagai input untuk melakukan pengujian pengguna pada tahapan terakhir design thinking .



Tugas Individu : Buatlah pemodelan HTA, GOMS atau KLM (pilih salah satu) sesuai dengan ide prototype aplikasi yang Anda kembangkan bersama dengan tim untuk Proyek Akhir. Sertakan skenario yang berkaitan dengan fitur utama dalam pemodelan Anda.



Tugas dapat dikumpulkan melalui e-learning dan akan dibahas dalam diskusi kelas pada pertemuan tatap muka ke-11. Selamat mengerjakan!



33



MODUL 08 – PENGUKURAN USABILITY Untuk mengetahui sejauh mana sebuah produk dapat digunakan oleh pengguna untuk mencapai tujuan tertentu dengan efektif, efisiensi serta mengetahui sejauh mana tingkat kepuasan pengguna dalam penggunaan produk, maka perlu dilakukan pengukuran



usability. Tahapan ini merupakan tahapan paling akhir dalam design thinking. Teknik pengukuran dapat didasarkan pada pengujian hasil pemodelan kognitif yang telah dibahas pada Modul 7. Metode lain yang dapat digunakan adalah menerapkan sejumlah skala pengukuran (metrics) yang telah digunakan secara luas diterapkan dalam domain pembangunan aplikasi.



Time-on Task dan Task Completion Rate Time-on-task atau dikenal dengan task completion time merupakan waktu yang dibutuhkan oleh pengguna dalam menyelesaikan task tertentu yang berhubungan dengan satu atau lebih fitur dalam aplikasi. Dalam pengujian time-on-task dibutuhkan scenario yang berisikan task dengan tujuan yang telah ditetapkan. Tabel 7 berikut memberikan gambaran perbandingan perhitungan time-on-task yang digabungkan dengan pemodelan KLM untuk menutup suatu Window. Tabel 7. Contoh pemodelan KLM untuk delete file ke trash [9]



USE-CTRL-W-METHOD H[to kbd]



0.40



M



1.35



K[ctrlW key] 0.28



Total



2.03 s



USE-CLOSE-METHOD P[to menu]



1.1



B[LEFT down]



0.1



M



1.35



P[to option]



1.1



B[LEFT up]



0.1



Total



3.75 s



Total time-on-task dilakukan dengan menjumlahkan seluruh waktu yang diperlukan pengguna



untuk



menyelesaikan



tugas.



Pengukuran



dapat



digunakan



untuk



membandingkan efisiensi dari beberapa tasks yang diujikan. Hasil pengujian juga memiliki



34 kaitan yang sangat erat dengan task completion rate—yang menunjukkan jumlah prosentase pengguna yang dapat menyelesaikan tasks dalam scenario yang diujikan. Task completion



rate sebesar 100% menunjukkan bahwa seluruh pengguna dapat menyelesaikan scenario yang diberikan dan menggambarkan bahwa fitur yang ada dalam prototype aplikasi dapat digunakan dengan mudah. Pengujian berulang setelah dilakukan perbaikan fitur juga dapat dilakukan untuk mencapai peningkatan completion rate. Selain itu, pengukuran juga dapat dilakukan dengan bantuan online tools seperti Maze.design (https://maze.design).



Usability Metrics Metode pengukuran usability juga dapat dilakukan dengan melakukan penilaian menggunakan kuesioner. Metode ini bisa dilakukan setelah pengguna ikut serta dalam



usability testing dan dapat dibarengi dengan proses wawancara. Berikut merupakan beberapa kuesioner yang banyak diterapkan untuk mengukur usability dari aplikasi : •



SUS (https://cui.unige.ch/isi/icle-wiki/_media/ipm:test-suschapt.pdf)



•



CSUQ (https://garyperlman.com/quest/quest.cgi?)



•



User Engagement Scale (UES) (http://ceur-ws.org/Vol-1391/66-CR.pdf)



•



UEQ versi long maupun short (https://www.ueq-online.org)



•



SUMI (http://sumi.uxp.ie/en/index.php)



•



SUPR-Q (http://uxpajournal.org/wpcontent/uploads/sites/8/pdf/JUS_Sauro_Feb2015.pdf)



Masing-masing kuesioner tersebut dapat digunakan dengan mencantumkan sumber referensi yang disertakan pada masing-masing website. Pengukuran yang digunakan menerapkan skala likert yang berkisar pada 3, 5 atau 7 skala. Berikut disertakan salah satu contoh kuesioner SUS (Software Usability Scale) yang merupakan skala pengukuran paling sederhana dan terdiri atas 10 pernyataan bagi pengguna. SUS menerapkan 5 skala likert yang dimulai dari Sangat Tidak Setuju (1) hingga Sangat Setuju (5)



35



CONTOH KUESIONER SUS (Software Usability Scale) Data Pengguna • • • •



Nama : ………………………………………………………….. Usia : ………………………………………………………….. Gender :  Laki-laki  Perempuan * centang () pilihan yang sesuai Frekuensi penggunaan aplikasi (opsional) :  setiap hari  lainnya, sebutkan ………….



Petunjuk Pengisian Kuesioner Perhatikan masing-masing pernyataan yang tersedia dan isilah skala penilaian dengan tanda centang () sesuai dengan pengalaman yang Anda rasakan dalam menggunakan aplikasi. PERNYATAAN



(1)



(2)



(3)



(4)



(5)























Saya merasa bahwa sistem ini terlalu kompleks























Menurut saya, penggunaan sistem ini sangat































































Terlalu banyak inkonsistensi dalam sistem ini























Sebagian besar orang akan dapat belajar



















































































Saya merasa bahwa saya akan menggunakan sistem ini secara sering.



mudah Saya merasa membutuhkan dukungan technical



person untuk dapat menggunakan sistem ini Saya merasa seluruh fungsi dalam sistem ini terintegrasi dengan baik



menggunakan sistem ini dengan cepat Saya merasa sistem ini sangat merepotkan untuk digunakan Saya merasa sangat percaya diri dalam menggunakan sistem ini Saya butuh belajar banyak sebelum dapat menjalankan sistem ini



36 Keterangan : Skala Pengukuran SUS • • • • •



(1) Sangat Tidak Setuju (2) Tidak Setuju (3) Netral (4) Setuju (5) Sangat Setuju



37



PROYEK AKHIR (HIGH-FIDELITY PROTOTYPE) Gambaran Tugas Buatlah sebuah prototype aplikasi (berbasis mobile atau web; pilih salah satu) sesuai dengan tema yang ada pada e-learning. Aplikasi dapat dikerjakan secara berkelompok yang beranggotakan 4 orang.



Luaran Proyek 1. Proyek yang dikerjakan akan dipresentasikan pada pertemuan ke-16 (UAS) berupa penjelasan dalam PPT dan demonstrasi hasil akhir high-fidelity-prototype.



Pengumpulan



Poin Penilaian



Masing-masing tim dapat mengumpulkan file



Penilaian proyek akhir meliputi beberapa



presentasi dan prototype akhir pada tautan



kriteria berikut.



yang tersedia di e-learning maksimal H-1



•



Inovasi dan kebaruan (10%)



sebelum tanggal presentasi.



•



Analisis Target Pengguna (20%)



•



Desain Tampilan (40%)



•



Skenario Penggunaan (30%)



Referensi Inspirasi berbagai desain dapat Anda temukan pada https://dribbble.com.



38



DAFTAR PUSTAKA [1] Galitz, Wilbert O., 2007. The Essential Guide to User Interface Design – 3rd ed. Wiley Publishing, Inc. [2] Canziba, E., 2018. Hands-On UX Design for Developers: Design, prototype, and



implement compelling user experiences from scratch. Packt Publishing Ltd. [3] Jokela, T., Iivari, N., Tornberg, V. and Electro, P., 2004. Using the ISO 9241-11



definition of usability in requirements determination: case studies. In Proceedings of HCI2004: Design for life, the 18th British HCI group annual conference, Leeds Metropolitan University, UK. Eds. A. Dearden & L. Watts (Vol. 2, pp. 155-156). [4] Lowdermilk, T., 2013. User-centered design: a developer's guide to building user-



friendly applications. " O'Reilly Media, Inc.". [5] Mayhew, D.J., 1999, May. The usability engineering lifecycle. In CHI'99 Extended Abstracts on Human Factors in Computing Systems. [6] MacKenzie, I.S., 2012. Human-computer interaction: An empirical research



perspective. Newnes. [7] Dix, A., Dix, A.J., Finlay, J., Abowd, G.D. and Beale, R., 2003. Human-computer



interaction. Pearson Education. [8] Gibbons, S. 2018. Empathy Mapping: The First Step in Design Thinking . Dikutip dari https://www.nngroup.com/articles/empathy-mapping/ pada 15 Desember 2018. [9] Wikipedia. 2019. Keystroke-level Model. Dikutip dari https://en.wikipedia.org/wiki/Keystroke-level_model pada 4 Oktober 2019. [10] Santoso, I. 2004. Interaksi Manusia dan Komputer. Andi Offset.