{"id":636,"date":"2024-10-07T11:03:45","date_gmt":"2024-10-07T08:03:45","guid":{"rendered":"https:\/\/ismaelali.net\/?page_id=636"},"modified":"2024-10-16T10:26:54","modified_gmt":"2024-10-16T07:26:54","slug":"hci","status":"publish","type":"page","link":"https:\/\/ismaelali.net\/?page_id=636","title":{"rendered":"Human-Computer Interaction &#8211; Fall 2024"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Course Overview<\/h2>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 39%\"><div class=\"wp-block-media-text__content\">\n<p>This is an introductory course on human-computer interaction for undergraduate students. This course requires no knowledge of human-computer interaction, psychology, and cognition. The class will cover the theories and foundations of human-computer interaction,&nbsp;including the fundamentals and principles of human-computer interaction, user interface technology, visual information design, and system design and evaluation, with the focus on eye-tracking-based usability testing evaluation. It will also discuss recent research trends in human-computer interaction, such as&nbsp;intelligent interfaces,&nbsp;and human-centered artificial intelligence. Students in this course will work on group-based coding and design&nbsp;projects and one individual assignment to design one user-interface and to evaluate it.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"273\" src=\"https:\/\/ismaelali.net\/wp-content\/uploads\/2024\/10\/Windows_3.11_workspace.png\" alt=\"\" class=\"wp-image-664 size-full\" srcset=\"https:\/\/ismaelali.net\/wp-content\/uploads\/2024\/10\/Windows_3.11_workspace.png 365w, https:\/\/ismaelali.net\/wp-content\/uploads\/2024\/10\/Windows_3.11_workspace-300x224.png 300w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Credits<\/strong>: 3<\/li>\n\n\n\n<li><strong>Prerequisites:&nbsp;<\/strong>Web Dev, Visual Coding, Mobile App Dev<\/li>\n\n\n\n<li><strong>Course Website<\/strong>: <a href=\"https:\/\/ismaelali.net\/?page_id=636\">https:\/\/ismaelali.net\/?page_id=636<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Course Topics<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Introduction of HCI<\/strong><\/li>\n\n\n\n<li>&#8220;<strong>Human&#8221; (Factors)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Needfinding: survey, dairy, and interview<\/li>\n\n\n\n<li>Introduction to cognition, context, and perception<\/li>\n\n\n\n<li>The Psychology of Usable Things, User Interface UI<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>&#8220;<strong>Computer<\/strong>&#8221;\n<ul class=\"wp-block-list\">\n<li>Usability Engineering<\/li>\n\n\n\n<li>Visual design and information visualization<\/li>\n\n\n\n<li>Visual Design and Typography<\/li>\n\n\n\n<li>Color theory<\/li>\n\n\n\n<li>Interface Design<\/li>\n\n\n\n<li>Interaction Design<\/li>\n\n\n\n<li>Interface Implementation<\/li>\n\n\n\n<li>Prototyping<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>&#8220;<strong>Interaction<\/strong>&#8221;\n<ul class=\"wp-block-list\">\n<li>Multimodal interfaces: touch,&nbsp;vision,&nbsp;natural language and&nbsp;3-D,&nbsp;VR virtual reality, and&nbsp;AR<\/li>\n\n\n\n<li>UX design<\/li>\n\n\n\n<li>Human-Centered AI<\/li>\n\n\n\n<li>Usability Inspection Methods<\/li>\n\n\n\n<li>Usability Testing Methods<\/li>\n\n\n\n<li>Usability in Practice<\/li>\n\n\n\n<li>Usability evaluation of HCI systems<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Course Schedule<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Week 1: \n<ul class=\"wp-block-list\">\n<li><strong>Course Introduction and Overview<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 2: \n<ul class=\"wp-block-list\">\n<li><strong>Human-Factors<\/strong><\/li>\n\n\n\n<li><em><strong>Form<\/strong> groups of 4<\/em><\/li>\n\n\n\n<li><em><strong>Select<\/strong> topics<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 3: \n<ul class=\"wp-block-list\">\n<li><strong>Human Information Processing System<\/strong><\/li>\n\n\n\n<li><strong>Start<\/strong><i> &#8220;System Report<\/i>&#8221; <strong>[<a href=\"https:\/\/docs.google.com\/document\/d\/1EgEqsgoVS9V0QsfDbdPJfzqUigxXXOzW\/edit?usp=sharing&amp;ouid=102116326229751035670&amp;rtpof=true&amp;sd=true\">Word File<\/a>]<\/strong>\n<ul class=\"wp-block-list\">\n<li>Chose <em>3 Top  Similar Apps\/Website\/&#8230;: <\/em>\n<ul class=\"wp-block-list\">\n<li>Points of strength (What makes them special in terms of design and features)<\/li>\n\n\n\n<li><em>Points of weaknesses<\/em> in terms of design and features (Your solutions for these gaps)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>System <em>Requirements <\/em>(<strong>Mobile App \/ Website \/ Off-Line Application<\/strong>)<em>: <\/em>\n<ul class=\"wp-block-list\">\n<li>Essential features (services)<\/li>\n\n\n\n<li>Essential elements (for each feature)<\/li>\n\n\n\n<li>Overall layout for User Interface<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 4: \n<ul class=\"wp-block-list\">\n<li><strong>HCI Desing Rules<\/strong><\/li>\n\n\n\n<li><strong><em>Submit <\/em><\/strong><em>&#8220;System <\/em><em>Report<\/em>&#8220;<\/li>\n\n\n\n<li><em><strong>Select <\/strong>a Research Paper<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 5: \n<ul class=\"wp-block-list\">\n<li><strong>HCI Usability Rules<\/strong><\/li>\n\n\n\n<li><em><strong>Submission Due<\/strong> of &#8220;Research Paper Report<\/em>&#8220;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 6: \n<ul class=\"wp-block-list\">\n<li><strong>Mid-Term Exam<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 7: \n<ul class=\"wp-block-list\">\n<li>Theory: HCI Design <\/li>\n\n\n\n<li>Practical: System UI Design<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 8: \n<ul class=\"wp-block-list\">\n<li><em><strong>Present<\/strong> Paper Report<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 9: \n<ul class=\"wp-block-list\">\n<li><strong>Eye-Tracking Experimental Evaluation<\/strong>\n<ul class=\"wp-block-list\">\n<li>Hypothesis testing, Choose participants, sample size.<\/li>\n\n\n\n<li>Independent and dependent variables and measures.<\/li>\n\n\n\n<li>Types of experimental designs, analysis or results.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 10: \n<ul class=\"wp-block-list\">\n<li><strong>Training<\/strong> Eye-Tracking Evaluation at Jazari Research Center<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 11: \n<ul class=\"wp-block-list\">\n<li><strong>Present <\/strong>Final Group-Projects<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 12: \n<ul class=\"wp-block-list\">\n<li><strong>Present <\/strong>Final Group-Projects<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 13:\n<ul class=\"wp-block-list\">\n<li><strong>Advanced Topics in HCI<\/strong>\n<ul class=\"wp-block-list\">\n<li>Brain-Computer Interface<\/li>\n\n\n\n<li>Human-Robot Interaction <\/li>\n\n\n\n<li>Future Directions in HCI<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Week 14: \n<ul class=\"wp-block-list\">\n<li><strong>Final Exam<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Assessment<\/h2>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-b3898f25-c7ab-4eb2-b624-3794ec1e5d77\">\n<li><strong>Individual Grades:<\/strong>\n<ul class=\"wp-block-list\">\n<li><em>Attendance<\/em>&nbsp;5%&nbsp;, <em>Participation<\/em>&nbsp;5%<\/li>\n\n\n\n<li><em>Quiz<\/em>: 5%<\/li>\n\n\n\n<li><em>Midterm<\/em>: 15%<\/li>\n\n\n\n<li><em>Final<\/em>: 40%<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Group Grades:<\/strong>\n<ul class=\"wp-block-list\">\n<li><em>Research<\/em> <em>Paper<\/em>&nbsp;10%&nbsp;\n<ul class=\"wp-block-list\">\n<li>Understanding of the Paper (3 points): Summary of key concepts and contributions: 3 points<\/li>\n\n\n\n<li>Critical Analysis (2 points): Discussion of strengths and weaknesses<\/li>\n\n\n\n<li>Presentation (3 points): Clarity and organization: 1.5 points. Visual aids: 1 point. Time management: 0.5 points.<\/li>\n\n\n\n<li>Engagement and Discussion (2 points)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><em>Projects<\/em>&nbsp;20%\n<ul class=\"wp-block-list\">\n<li>Individual (5 points): UI, Essential Elements, Layout<\/li>\n\n\n\n<li>Coding (5 points): Web\/Mobile\/Desktop App UI<\/li>\n\n\n\n<li>Evaluation (5 points): Eye Tracking Usability<\/li>\n\n\n\n<li>Presentation (5 points): Skills<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Course Project Topics<\/h2>\n\n\n\n<p><strong>Each group of students selects a topic from the list below or propose a topic to me and to request my approval. <\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Smart Home Control App<\/strong>: Manage smart home devices like lights, thermostat, and security cameras.<\/li>\n\n\n\n<li><strong>Personal Finance Manager<\/strong>: Budgeting app that tracks expenses and savings.<\/li>\n\n\n\n<li><strong>Health and Fitness Tracker<\/strong>: Monitors exercise routines, diet, and fitness levels.<\/li>\n\n\n\n<li><strong>Language Learning App<\/strong>: Interactive exercises and quizzes for language learning.<\/li>\n\n\n\n<li><strong>Event Planning Tool<\/strong>: Organize events, manage invites, and track tasks.<\/li>\n\n\n\n<li><strong>Virtual Study Group Platform<\/strong>: Collaborative tools for students to join study groups.<\/li>\n\n\n\n<li><strong>Freelancer Job Board<\/strong>: Platform for freelancers to find jobs and manage contracts.<\/li>\n\n\n\n<li><strong>Crowdsourced Travel Guide<\/strong>: Users share local insights and travel recommendations.<\/li>\n\n\n\n<li><strong>Online Tutoring Platform<\/strong>: Connect tutors with students, including scheduling and whiteboard features.<\/li>\n\n\n\n<li><strong>Smart Grocery List App<\/strong>: Generates grocery lists based on meal plans and store availability.<\/li>\n\n\n\n<li><strong>Fitness Class Booking App<\/strong>: Users can book fitness classes at local gyms or studios.<\/li>\n\n\n\n<li><strong>Online Marketplace for Local Artisans<\/strong>: A marketplace where local artists sell handmade crafts.<\/li>\n\n\n\n<li><strong>Remote Work Productivity Tracker<\/strong>: Tool to track productivity and screen time for remote workers.<\/li>\n\n\n\n<li><strong>Smart Alarm Clock App<\/strong>: Monitors sleep patterns and wakes users during the lightest sleep phase.<\/li>\n\n\n\n<li><strong>Digital Habit Tracker<\/strong>: Track and build daily habits with personalized reminders and progress charts.<\/li>\n\n\n\n<li><strong>Accessible Navigation App<\/strong>: Helps users with disabilities navigate public spaces with visual and audio guidance.<\/li>\n\n\n\n<li><strong>Family Organizer App<\/strong>: A calendar and task manager for families to coordinate schedules and to-do lists.<\/li>\n\n\n\n<li><strong>Volunteer Matching Platform<\/strong>: Matches volunteers with opportunities in their community based on skills and availability.<\/li>\n\n\n\n<li><strong>Smart Expense Sharing App<\/strong>: An app that allows groups of friends or roommates to split and track shared expenses, like rent or bills.<\/li>\n\n\n\n<li><strong>Digital Recipe Box<\/strong>: An app that allows users to save, organize, and share recipes with customizable categories and meal-planning features.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Course Policy<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Illness:<\/strong> If you are absent due to illness as a valid excuse, please notify me of your situation at ismael.ali@edu.krd.edu prior to (or immediately after) your absence.<\/li>\n\n\n\n<li><strong>Course and Exam Schedule:<\/strong> Student is responsible of constantly following up the schedule for any updated material or any type of assessments, such as exams\/projects. <\/li>\n\n\n\n<li><strong>Etiquette:<\/strong> Attend all the session to be able comprehending the course material. Submit all  assignments on-time, no excuse for late submission, except valid illness report. <\/li>\n\n\n\n<li><strong>Late Attendance: <\/strong>No student should enter the hall 10 minutes after start time of the session. <\/li>\n\n\n\n<li><strong>Academic honesty:<\/strong> Academic honesty is expected. Plagiarism is totally unacceptable in this course and will result in a failing grade without prior notification.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Course Overview This is an introductory course on human-computer interaction for undergraduate students. This course requires no knowledge of human-computer interaction, psychology, and cognition. The class will cover the theories and foundations of human-computer interaction,&nbsp;including the fundamentals and principles of human-computer interaction, user interface technology, visual information design, and system design and evaluation, with the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/ismaelali.net\/?page_id=636\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Human-Computer Interaction &#8211; Fall 2024&#8221;<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-636","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/pages\/636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/ismaelali.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=636"}],"version-history":[{"count":29,"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/pages\/636\/revisions"}],"predecessor-version":[{"id":739,"href":"https:\/\/ismaelali.net\/index.php?rest_route=\/wp\/v2\/pages\/636\/revisions\/739"}],"wp:attachment":[{"href":"https:\/\/ismaelali.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}