Interaction and Interface Design

You are here

Credits
6
Types
Compulsory
Requirements
  • Prerequisite: EDA
  • Prerequisite: M1
Department
CS
The course deals with two main themes: the study of interface design and usability and graphical interaction.

Teachers

Person in charge

  • Marta Fairen Gonzalez ( )

Others

  • Alejandro Beacco Porres ( )
  • Alejandro Ríos Jerez ( )
  • Alvaro Vinacua Pla ( )
  • Amalia Duch Brown ( )
  • Antonio Chica Calaf ( )
  • Bernardino Casas Fernández ( )
  • Carlos Andujar Gran ( )
  • Eduard Pujol Puig ( )
  • Francisco Jose Arias Arnedo ( )
  • Genis Bayona Jaume ( )
  • Imanol Muñoz Pandiella ( )
  • Joan Fons Sánchez ( )
  • Jordi Luque Serrano ( )
  • Maria Josep Blesa Aguilera ( )
  • Nuria Pelechano Gomez ( )
  • Oscar Argudo Medrano ( )
  • Pere Pau Vázquez Alcocer ( )

Weekly hours

Theory
2
Problems
0
Laboratory
2
Guided learning
0
Autonomous learning
6

Competences

Technical Competences

Common technical competencies

  • CT1 - To demonstrate knowledge and comprehension of essential facts, concepts, principles and theories related to informatics and their disciplines of reference.
    • CT1.2A - To interpret, select and value concepts, theories, uses and technological developments related to computer science and its application derived from the needed fundamentals of mathematics, statistics and physics. Capacity to solve the mathematical problems presented in engineering. Talent to apply the knowledge about: algebra, differential and integral calculus and numeric methods; statistics and optimization.
  • CT2 - To use properly theories, procedures and tools in the professional development of the informatics engineering in all its fields (specification, design, implementation, deployment and products evaluation) demonstrating the comprehension of the adopted compromises in the design decisions.
    • CT2.5 - To design and evaluate person-computer interfaces which guarantee the accessibility and usability of computer systems, services and applications.
  • CT4 - To demonstrate knowledge and capacity to apply the basic algorithmic procedures of the computer science technologies to design solutions for problems, analysing the suitability and complexity of the algorithms.
    • CT4.1 - To identify the most adequate algorithmic solutions to solve medium difficulty problems.
  • CT5 - To analyse, design, build and maintain applications in a robust, secure and efficient way, choosing the most adequate paradigm and programming languages.
    • CT5.2 - To know, design and use efficiently the most adequate data types and data structures to solve a problem.
    • CT5.3 - To design, write, test, refine, document and maintain code in an high level programming language to solve programming problems applying algorithmic schemas and using data structures.
    • CT5.4 - To design the programs¿ architecture using techniques of object orientation, modularization and specification and implementation of abstract data types.
    • CT5.5 - To use the tools of a software development environment to create and develop applications.

Transversal Competences

Appropiate attitude towards work

  • G8 [Avaluable] - To have motivation to be professional and to face new challenges, have a width vision of the possibilities of the career in the field of informatics engineering. To feel motivated for the quality and the continuous improvement, and behave rigorously in the professional development. Capacity to adapt oneself to organizational or technological changes. Capacity to work in situations with information shortage and/or time and/or resources restrictions.
    • G8.3 - To be motivated for the professional development, to face new challenges and the continuous improvement. To have capacity to work in situations with a lack of information.

Objectives

  1. Learn to program interfaces in a high-level programming language and using a specific API. Design and implement interactive applications using APIs to interface design.
    Related competences: CT5.2, CT5.4, CT5.5, CT5.3,
  2. Learn the basics of Computer Graphics. Implementing simple applications that display data in OpenGL 3D.
    Related competences: CT1.2A, CT4.1,
  3. Knowing the architecture of current GPUs.
    Related competences: CT5.5,
  4. Be able to design applications with different user interfaces for common as cell phones or tablets.
    Related competences: CT2.5, CT5.5, G8.3,
  5. Getting a proactive attitude to quality and continuous improvement.
    Related competences: G8.3,
  6. To be able to adapt to technological or organizational changes.
    Related competences: CT2.5, CT5.5, G8.3,
  7. Ability to adapt in situations of time constraints and / or resources and / or lack of information.
    Related competences: CT5.4, CT5.5, G8.3,
  8. Understand the concept of usability and knowledge to assess whether an interface of an application or a Web page is usable. Be able to assess the usability of a particular interface.
    Related competences: CT2.5, G8.3,

Contents

  1. Introduction to interactive systems
    Basics of interactive systems. Introduction to Human Computer Interaction.
  2. Ubiquitous computing and augmented reality
    Definitions. Systems Virtual Reality and Augmented Reality.
  3. Design user interfaces
    Introduction to Usability. Basic principles of designing user interfaces. Design Rules.
  4. Colour models
    Representations of color. Translation between models.
  5. Programming Interface
    Introduction to Qt. Advanced Programming with Qt interface.
  6. Processing and visualization of 2D and 3D geometry
    Introduction to Computer Graphics. Visualization using OpenGL.
  7. Developing user-centered
    User-centered design. Evaluation of interface design. Evaluation of web pages. Usability studies.
  8. Architecture and programming of graphics cards
    Introduction to GLSL. Vertex shaders and fragment shaders.

Activities

Activity Evaluation act


Geometry Processing.

Studying the different forms of modeling scenes and objects. Learn the elements of the processing of 2D and 3D geometry: triangle meshes. Review data structures. Analysis of different data structures for geometry. Studying the elements of an interactive graphic system. Deploying simple OpenGL and 3D.
  • Theory: Models of scenes and objects. Elements of processing 2D and 3D geometry: triangle meshes. Data structures for geometry. Elements of an interactive graphic system.
  • Autonomous learning: Review of concepts. Exercises triangle meshes. Exercises in data structures for geometry.
Objectives: 2
Contents:
Theory
2h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
6h

3D visualization of data.

Studying the basics of 3D visualization. Learn the camera model. Doing exercises camera model and geometric transformations. To study the programmable visualization pipeline.
  • Theory: Geometric transformations. Camera model. Graphics libraries. Conceptual diagram of the process of visualization in OpenGL. Coordinate Systems, Transformations in OpenGL Modeling and Visualization. Lighting in OpenGL.
  • Autonomous learning: Review of geometric transformations. Exercises geometric transformations. Exercises camera. Review the process visualization.
Objectives: 2 3
Contents:
Theory
10h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
10h

Programming graphical applications.

Program data structures that store meshes triangles. Program basically GPU by using GLSL. Understand and use lighting calculations OpenGL.Aprendre manage interaction Qt.
  • Laboratory: Applications that use data structures for 3D geometry. Simulation of lighting using OpenGL. Interaction Qt and OpenGL.
  • Autonomous learning: Application Programming with Qt and OpenGL.
Objectives: 2 3
Contents:
Theory
0h
Problems
0h
Laboratory
18h
Guided learning
0h
Autonomous learning
15h

Introduction to interactive systems.

Studying the Human-Computer Interaction notes. Usability study notes. Learn to design graphical interfaces. Learn to perform assessments of usability of applications and websites.
  • Theory: Basics of interactive systems. Introduction to Human-Computer Interaction. User-centered design.
  • Autonomous learning: Study notes of interaction.
Objectives: 8
Contents:
Theory
2h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
5h

Extension or exercises on an interface design theme.

Solve exercises or study an interface design theme autonomously.
  • Autonomous learning: Solve exercises or study an interface design theme autonomously.
Objectives: 8 1 4 5 6 7
Contents:
Theory
0h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
10h

Test Teo1: Control on graphics interaction and interface design.

Written exercise that assesses knowledge of graphics interaction and interface design.
Objectives: 8 2 3 5
Week: 7 (Outside class hours)
Type: theory exam
Theory
2h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
10h

Test Lab: Laboratory Practice Deployment graphics applications using OpenGL and designing the interface using Qt.

The lab test is deploying an application that uses OpenGL and Qt.
Objectives: 1 2 3
Week: 12
Type: lab exam
Theory
0h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
0h

Introduction to graphical interfaces.

Learn to design and implement graphical interfaces. Perform practical Qt.
  • Laboratory: Introduction to programming interfaces. Qt programming practices.
  • Autonomous learning: Programming simple programs using Qt.
Objectives: 1
Theory
0h
Problems
0h
Laboratory
6h
Guided learning
0h
Autonomous learning
6h

Design user interfaces.

Study Model View Controller. Study notes on usability of applications and websites. Learn to design applications on mobile devices. Evaluating interfaces of mobile devices.
  • Theory: Introduction to Usability. Measures of usability: Fitts Law, Control-Display Ratio ... Usability studies: study design, expert reports, evaluation of results ... Fundamental aspects in the design of usable web pages. Designing interfaces for portable devices.
  • Autonomous learning: Notes and usability evaluation of interfaces. Notes rules of interface design. Notes interaction metaphors.
Objectives: 8 4
Contents:
Theory
10h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
8h

Introduction to AR, VR and UC

Studying the basics of 3D interaction, computer graphics, virtual reality and augmented reality and make the corresponding exercises. Studying the notes of the course.
  • Theory: Graphics, Virtual Reality and Augmented Reality. Introduction to information visualization. Models of color.
Objectives: 2
Contents:
Theory
2h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
0h

Advanced Programming Interface using OpenGL and Qt.

Learn advanced programming interfaces. Using Qt signals and slots. Integrating complex widgets advanced interfaces.
  • Laboratory: Programming a complete application that uses advanced widgets and OpenGL.
  • Autonomous learning: Programming a complete application that uses advanced widgets and OpenGL.
Objectives: 1 2
Contents:
Theory
0h
Problems
0h
Laboratory
6h
Guided learning
0h
Autonomous learning
8h

Prova Teo2: Final Exam.

Review that will assess the knowledge acquired during the course. It will be a traditional written exam.
Objectives: 8 1 2 3 4 5 6 7
Week: 15 (Outside class hours)
Type: theory exam
Theory
2h
Problems
0h
Laboratory
0h
Guided learning
0h
Autonomous learning
12h

Teaching methodology

In theory sessions the teacher will introduce theoretical concepts and, where appropriate, exercises and problems. The theory is strongly tied to the developments proposed laboratory.

As support for the theory classes, especially for the interaction and design, notes or articles will be provided available via El Racó. These notes are designed for the students to have available during the classes.

Students are expected to prepare additional materials that will be provided in the form of notes or other documents in order to prepare for classes, exams and will serve as documentation practices to perform correctly. In the lab, introduced the software to use and pose a number of small practices that students must develop and eventually deliver. Much time will be devoted to laboratory students solve practices raised with the help of the teacher.

Laboratory exercices (deliverables) allow the use of code that students have developed independently. Sharing this code between students is considered copying.

Evaluation methodology

The mark will consist of 3 parts:
- One lab note: ProvaLab in which students are asked to solve small problems. It will do more emphasis on graphic design but also including interaction and programming interfaces. The exam must be solved in lab and the student will start from an initial code given in the exam.

During the course, a set of laboratory exercises (n) will be specified that the student will have to complete and deliver. If all of these exercises are given, the student will opt for 1 extra point in the laboratory's note provided that in the test of a laboratory (ProvaLab) a score equal to or greater than 4.5 is achieved. If all of these exercises are not delivered and only x of these n are delivered, the formula to decide the portion of the point that can be reached is (x / n) ^ 2.2. For example, if n = 4, the values that would be obtained depending on the number x of deliveries is: 0 - 0; 1 - 0.05; 2 - 0.22; 3 - 0.53; 4 - 1.
 
- Two theory tests: Prova Teo1 and Prova Teo2. Do not use notes or calculators or calculators or mobile devices.

To calculate the final grade, using the following formula, where all the notes are on 10:

25% ProvaLab + 25% Prova Teo1 + 50% Prova Teo2

Rating generic competition: You will have values ¿¿A, B, C or D (where A corresponds to an excellent standard, B corresponds to a desired level, C corresponds to a sufficient level and D corresponds to a level not exceeded). A good evaluation of this competition the students will have:

- Proactive attitude to quality and continuous improvement.
- Motivation. Students must work in terms of lack of information.
- Ability to adapt in situations of lack of information.

Bibliography

Basic:

Complementary:

Web links

Previous capacities

EDA capabilities of the subjects (Data Structures and Algorithms) and M2 (Math 2).

In particular, it is expected that the student is able to:

- Program correctly by using Object-Oriented Programming in C + +.
- Understand and know how to implement basic data structures, lists, stacks, etc..
- Learn the basics of linear algebra, geometric transformations and changes of base.