103123 - COMPUTER PERSON INTERACTION

Subject type: Mandatory

Coordinator: Alfonso Palacios González

Trimester: Second term

Credits: 4

• Catalan
• Spanish
• English

The teaching of this subject is mainly in Catalan. However, some sessions, the bibliography, part of the contents and the tools can be in Spanish or English.

The general objective of the subject is to make people understand the role of people as the center and main objective of any computer product, the importance of interfaces.
user graphics and the key role of Human-Computer Interaction (IPO) and, in particular, usability and accessibility, in the design and implementation of computer applications.

This subject has methodological and digital resources to make possible its continuity in non-contact mode in the case of being necessary for reasons related to the Covid-19. In this way, the achievement of the same knowledge and skills that are specified in this teaching plan will be ensured.

In general, this subject contributes to the following learning outcomes specified for the subject to which it belongs (Software Engineering):

• (1) Appropriately use theories, procedures and tools in the professional development of computer engineering in all its areas (specification, design, implementation, deployment -implementation- and product evaluation) so as to demonstrate an understanding of the commitments adopted in design decisions.
• (2) Demonstrate knowledge of the ethical dimension in the company: the social and corporate responsibility in general and, in particular, the civil and professional responsibilities of the computer engineer.
• (3) Define and manage the requirements of a software system.
• (4) Understand and effectively use manuals, product specifications and other technical information written in English.
• (5) Evaluate the usability and accessibility of graphical user interfaces
• (6) Understand and explain the principles of person-computer interaction

At a more specific level, at the end of the course the student must be able to:

• LO1: To meet the basic concepts and principles of the Person-Computer Interaction.
• LO2: To meet the characteristics of the different technologies to build Graphical User Interfaces.
• LO3: Understand the importance of the usability and discover how to incorporate requirements into the design of interfaces that make them usable
• LO4: Understand the importance ofaccessibility and discover how to incorporate requirements into the design of interfaces that make them accessible.
• LO5: Evaluate usability and accessibility in graphical user interfaces with different tools and methodologies.
• LO6: Apply methodologies such as the User-Centered Design (UCD) or User-Centered Design (DCU) for designing and developing interactive applications 
• LO7: Build an interface for a website project that collects what is being worked on in the subject.
• LO8: Get introduced in the generation of web interfaces with HTML5 i CSS3.

Guided learning hours include:
Theoretical classes in large group in which:
> the invited teachers or professionals introduce the contents of the subject.
> small teaching activities are carried out that seek to make the student an active protagonist in the acquisition of their knowledge.
Practices in small teams of two people that have a part that is performed in the laboratory led or supervised by the teacher and a part in which the team must
operate autonomously.
Directed research activities on topics related to the subject.
Within the hours of autonomous learning are considered the hours to prepare the theoretical classes, the hours to study and consolidate the acquired knowledge, the hours
to prepare the work of the practices and, finally, the hours that the student can dedicate to increase and complement his knowledge on the matter.
The confirmed tools that will be used in the 2019/20 academic year are: HTML5, CSS, (Dreamweaver, Atom or BlueGriffon), Filezilla, Wordpress, Axure RP.

This course, due to the situation generated by COVID, some of the large group sessions will be held in hybrid format: face-to-face and online (via streaming). This will allow students to rotate to face-to-face classes, respecting the maximum number of students per classroom imposed by the distance measures. When they are not in contact, they will be able to follow the class online from home.

With regard to internship sessions in smaller spaces (such as laboratories, studios or sets), where appropriate, work will be carried out simultaneously in several spaces in order to ensure that the conditions established by the safety protocols are met.

1. Introduction to Human-Computer Interaction (IPO)

2. Design and prototyping of graphical user interfaces

3. Web usability and accessibility engineering

4. Development of graphical user interfaces

Activity 1: Project for the design and development of an interface for a website with CMS 
(MECES 2 descriptors a), b), c), d), e) and f)) (Work on learning outcomes (1), (2), (3), (4), (5), (6 ), RA1, RA2, RA3, RA4, RA5, RA6, RA7, RA8)
(Collaborate in the competencies: 

• (B2): Application of the concepts of human-computer interaction, graphical user interface, user-centered design, usability and accessibility
• (B3): Interpretation of information and ethical reflection on the application of user-centered, usability and accessibility design criteria
• (B4): Editing and publishing information
• (B5): Course project, with a high degree of autonomy
• (T1): Consultation of bibliography in English
• (T2): Teamwork to develop the project
• (EFB4): Use of content managers, image processing tools, video management and HTML
• (CIN1): Ethical criteria in the design of graphical user interfaces, with respect to the property legislation 
• (CIN3): Editing and writing content for a website
• (CIN4): Definition and validation of requirements of the graphical user interface from different techniques
• (CIN17): Design of a web project whose interface guarantees usability and accessibility criteria
• (EIS2): Understand the target customer of the website to define the requirements of the interface based on customer needs)

The course project consists of making a complete proposal for a website where the concepts studied throughout the course are applied and the techniques of user-centered web engineering and engineering are applied. accessibility and usability. The website is developed in teams with content managers (CMS), HTML and photo retouching and video management tools. Ethical aspects of human-computer interaction and a minimum knowledge of legislation in data protection and intellectual property must be borne in mind. 

Some techniques to apply to the web project:

• Briefing of the definition of the web project proposal
• Brainstorming for the definition of user requirements
• Card sorting
• Style guide
• User test
• Wireframing
• Prototyping
• Heuristic analysis of usability
• Application of accessibility directives 
• Implementation of websites with CMS

The course project consists of a collection of deliverables that are presented throughout the ten weeks of the course and where the website is the last. 

Activity 2: Definition and development of a web interface with HTML and CSS
(MECES 2 descriptors a), b, c), d), e) and f))

(Collaborate in the competencies: 

• (B2): Application of the concepts of human-computer interaction, graphical user interface, user-centered design, usability and accessibility
• (B3): Interpretation of information and ethical reflection on the application of user-centered, usability and accessibility design criteria
• (B5): Autonomy in the use of HTML editors
• (T1): Consultation of bibliography in English
• (T2): Teamwork to develop practices in HTML and CSS
• (EFB4): Introduction to HTML and CSS programming
• (CIN1): Ethical criteria in the design of graphical user interfaces, with respect to the property legislation 
• (CIN17): Design of websites that guarantee accessibility criteria
• (EIS2): Understand the target customer of the website to define the requirements of the interface based on customer needs)

Activity 2 of HTML and CSS practices is an introduction to programming websites with HTML and CSS

Activity 3: Final individual test
(MECES 2 descriptors a), b, c), d), e) and f))

Assessment of the level of achievement of the contents introduced in the subject and of the individual level of achievement of the results of activities 1 and 2. 

(35%) Activity 1: Project for the design and development of an interface for a website with CMS (evaluates all Learning Outcomes) (25% for team assessment and 10% for individual assessment)

(15%) Activity 2: Definition and development of a web interface with HTML and CSS (partially evaluates all Learning Outcomes, but in detail the RA8) (10% for the team assessment and 5% for the individual assessment)

(50%) Activity 3: Final exam (evaluates all Learning Outcomes) (20% evaluates content concepts 1,2, 3 and 10) (4% evaluates content concepts 20) (XNUMX% HTML and CSS programming exercise)

(Part of the final exam must be passed with a grade higher than 3,5)

All grades are required. A grade higher than 3,5 is required in each activity to pass the subject and be able to take the average.

Following the general regulations, the copy in the evaluation activities leads to the evaluation with a SUPENS grade (0) for the whole subject.

Activities are mandatory. Activities not performed - or those not attended - are rated as 0.

Krug, Steve. “Don't make me think, Update”, third edition, Anaya Multimedia, 2015. ISBN-13: 978-8441537279. ISBN-10: 8441537275

Krug, Steve. “Don’t Make Me Think Revisited: A Common Sense Approach to Web Usability, 3rd Edition,” third edition, New Riders, 2014. ISBN-13: 978-
0321965516. ISBN-10: 0321965515.

Johnson, Jeff. “Designing with the Mind in Mind, second edition”, second edition, Morgan Kaufmann, 2014. ISBN: 978-0-12-407914-4

Shneiderman, Ben; Pleasant, Catherine. “Designing the User Interface: Strategies for Effective Human-Computer Interaction (6th Edition)”, Pearson, 2016. ISBN-
13: 978-0134380384. ISBN-10: 013438038X.

Nielsen, Jacob; Loranger, Hoa. “Usability. Priority in Web design ”, first edition, Anaya Multimedia, 2006. ISBN-13: 978-8441520929. ISBN-10:
8441520925.

Nielsen, Jacob; Budiu, Raluca. “Usability in mobile devices”, first edition, Anaya Multimedia, 2013. ISBN-13: 978-8441533387. ISBN-10: 8441533385.

MacDonald, Matthew. “HTML5: The Missing Manual,” second edition, O’Reilly, 2014. ISBN 978-1-4493-6326-0. ISBN-10: 1449363261

Nielsen, Jacob; Loranger, Hoa. “Prioritizing Web Usability,” first edition, New Riders, 2006. ISBN-13: 978-0321350312. ISBN-10: 0321350316.

McFarland, David Sawyer. “CSS: The Missing Manual, 4th Edition,” fourth edition, O’Reilly, 2015. ISBN-13: 978-1491918050. ISBN-10: 1491918055
Granollers,

Nielsen, Jacob; Budiu, Raluca. “Mobile Usability,” first edition, New Riders, 2012. ISBN-13: 978-0321884480. ISBN-10: 0321884485.