GUÍA DOCENTE CURSO: 2015/16

(1)

40830 - DISEÑO DE INTERFACES DE USUARIO

GUÍA DOCENTE CURSO: 2015/16

CENTRO: 180 - Escuela de Ingeniería Informática TITULACIÓN: 4008 - Grado en Ingeniería Informática ASIGNATURA: 40830 - DISEÑO DE INTERFACES DE USUARIO

Vinculado a : (Titulación - Asignatura - Especialidad)

4008-Grado en Ingeniería Informática - 40830-DISEÑO DE INTERFACES DE USUARIO - 03 4008-Grado en Ingeniería Informática - 40830-DISEÑO DE INTERFACES DE USUARIO - 05

CÓDIGO ULPGC: 40830 CÓDIGO UNESCO: 1203, 3304

MÓDULO: INGENIERÍA DEL SOFTWAREMATERIA: TIPO: Obligatoria

CRÉDITOS ECTS: 6 CURSO: 4 SEMESTRE: 1º semestre

LENGUA DE IMPARTICIÓN (Especificar créditos de cada lengua)

ESPAÑOL: 6 INGLÉS:

SUMMARY

REQUISITOS PREVIOS

Programación II e Ingeniería del Software II.

Plan de Enseñanza (Plan de trabajo del profesorado) Contribución de la asignatura al perfil profesional:

Explicar los conceptos y principios del diseño de interfaces de usuario. Evaluar la usabilidad y accesibilidad de las interfaces de usuario. Describir el proceso de desarrollo de las interfaces.

Competencias que tiene asignadas:

G1,G2,G3,G4,G5,N1,N2,N3,N4,N5,IS01,IS03,IS04,IS06,CP06 Objetivos:

OB1. Presentar y explicar los conceptos y principios del diseño de interfaces de usuario en especial los que se centran el usuario.

OB2. Explicar las bases cognitivas que configuran el modelado del usuario.

OB3. Describir el modelo de interfaces de usuario basados en el paradigma de Modelo, Visión y Control.

OB4. Describir la metodología de diseño de interfaces de usuario que incluye el diseño conceptual así como los procesos de test y evaluación de la usabilidad de las interfaces de usuario.

OB5. Describir las prácticas frecuentes y los patrones de diseño de interfaces de usuario así como

(2)

sus elementos constitutivos.

OB6. Describir el proceso de desarrollo de las interfaces y adquirir la habilidad de uso práctico de las técnicas y herramientas que se enmarcan en el proceso de diseño, construcción y evaluación de interfaces de usuario.

Contenidos:

Las competencias que específicamente mencionan la interacción humana con computadores son las CII17 y CP06 que se desarrollaran en los contenidos. Todos los temas son parte del desarrollo de estas competencias.

La asignatura Diseño de Interfaces de Usuario se enfoca a presentar por un lado los aspectos teóricos, empíricos y cognitivos implicados en las interfaces de usuario. Los aspectos cognitivos de las interfaces de usuarios son especialmente importantes pues permite conocer, modelar y entender el comportamiento, las capacidades y las limitaciones de los usuarios. Es el usuario en la fase de Diseño la pieza fundamental, por ello el énfasis en su conocimiento.

Por otro lado, se introducen y utilizan las herramientas de diseño basadas en Java/Swing, sobre todo utilizando herramientas como GUI Builder ( anteriormente denominada Matisse) que automatizan el proceso de maquetado y generación de código. La mayor parte de la interfaces de usuario habituales (tanto en versión de escritorio como las que puedan estar encapsuladas como Java Scripts en HTML) pueden abordarse con esta herramientas.

Para desarrollar las competencias se han diseñado dos módulos.

El primero se centra en los contenidos teóricos/empíricos del diseño de interfaces y de modelado del usuario, teniendo en cuenta que esta disciplina se fundamenta en aspectos de tipo cognitivo/psicológico y en el aprendizaje proveniente de la experiencia acumulada.

El segundo módulo, de naturaleza operativa, se centra en aspectos concretos para el desarrollo de interfaces en Java. Este segundo módulo en conjunción con las actividades prácticas se puede considerar como un curso en sí mismo de desarrollo de interfaces de usuario en Java. Se ha elegido Java por las posibilidades de multiplataforma, las posibilidades de traslado o fácil adaptación a dispositivos móviles y la capacidad de integración en tecnologías Web.

Los contenidos que se describen seguidamente hacen referencia en conjunto a las competencias previamente descritas en forma conjunta.

Módulo I. Aspectos teóricos y empíricos del diseño de interfaces de usuarios. (16 horas)

Tema I-1 (2 hora)(G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, IS01, IS03, IS04, IS06, CP06).

Definición y concepto de interfaces de usuario. Interacción humana con objetos tecnológicos.

Breve historia de las interfaces y dispositivos. Definición de Usabilidad (Shn, cap 9) (Nor88) Tema I-2 (6 horas) )(G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, IS01, IS03, IS04, IS06, CP06).

Aspectos cognitivos del modelado del usuario. La naturaleza de la percepción y reactividad humana. Principios Gestalt. Visión del contraste, color y foco/periferia. Atención y memoria.

Reactividad humana. Actitud del usuario. Etapas de la actuación humana. Curvas de aprendizaje.

(Joh10) (But, cap 5 y 6) (Gli07)

Tema I-3 (2 horas) )(G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, IS01, IS03, IS04, IS06, CP06).

Principios de Interacción y Usabilidad. . Identificación de necesidades, patrones y normalización

(3)

de interfaces de usuario. (But07, cap 9)(Ras)

Metodologías y reglas empíricas para el diseño de interfaces de usuario. Conjuntos de reglas y recetas empíricas para el diseño conceptual . Storyboard y prototipos de papel. (Sny03)

Ciclo de desarrollo de interfaces. Test, evaluación y validación. (Shn, cap 4)(Gli07)

Módulo II. Aspectos operativos del diseño de interfaces de usuarios. (14 horas)

Tema II-1 (2 hora) )(G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, IS01, IS03, IS04, IS06, CP06).

Entornos para el diseño de interfaces de usuarios. Estructura Modelo-Vista-Controlador. (Ron03) (Fow)(Jav)

Tema II-2 (2 horas) )(G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, IS01, IS03, IS04, IS06, CP06).

Modelo Java para las interfaces gráficas de usuario. Java Foundation Classes(JFC)/Swing.

Diferencias con AWT y relación con otras librerías. (Ron03)(Jav)

Patrones de diseño de interfaces de usuario y elementos constitutivos. Estructura básicas de marcos, paneles y bordes. Componentes esenciales, botones, menús, barras de progreso y deslizadores. Modificación de la apariencia (Look and Feel). (Ron03)(Jav)

Listas, tablas y árboles. Utilización de la concurrencia. Modelo de múltiples hilos. Gestión de capas y transparencias. (Ron03)(Jav)

Gestión de Múltiples documentos (MDI). Componentes de textos. (Ron03)(Jav)

Librerías adicionales, imágenes y gráficos. (Jav) Bibliografía básica:

(But07) E. Butow, User Interface Design for Mere Mortals, Addison-Wesley, 2007.

(Joh10) J. Johnson, Designing with the Mind in Mind, Morgan Kauffman, 2010.

(Gli07) W. Glitz, The Essential Guide to User Interface Design, Wiley Pub, 2007.

(Shn06) B. Shneiderman and C. Plaisant, Diseño de Interfaces de Usuario, Addison-Wesley, 2006.

(Ron03) M. Robinson, P. Vorobiev, Swing a fast-paced guide with production-quality code examples, Manning, 2003.

(Jav) Creating a GUI with JFC/Swing, http://docs.oracle.com/javase/tutorial/uiswing/

Bibliografía recomendada:

(Nor88) D. A. Norman, The Design of Everyday Things, Currency Doubleday, 1988.

(4)

(Lau05) S. Lauesen, User Interface Design A Software Engineering Perspective, Addison, 2005.

(Zuk05) J. Zukoski, The Definitive Guide to Java Swing, Apress, 2005.

(Col02) B. Cole, R. Eckstein, J. Elliot, M. Loy, D. Wood, Java Swing, O’Reilly, 2002.

(Fow) A Fowler, A Swing Architecture Overview, http://java.sun.com/products/jfc/tsc/articles/architecture/

(Sny03) C. Snyder, Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces, Morgan Kaufman, 2003.

(Mar06) M. Marinilli, Professional Java User Interfaces, John Wiley and Sons, 2006.

(Ras00) J. Raski, The Human Interface, Addison Wesley, 2000.

(Mar09) M.L. Murphy, Beginning Android, Apress, 2009.

PRÁCTICAS

Las prácticas consistirán en la realización de supuestos sencillos de elementos comunes en las interfaces de usuario. En una primera fase (en las horas de prácticas en aulas PA que se intercalan con las prácticas en laboratorio PL) se presentarán los objetivos a alcanzar así como las herramientas a nivel de Java que permiten implementar ejemplos sencillos de los elementos.

Posteriormente en el laboratorio el alumno implementará el diseño conceptual desarrollado previamente, depurará el software y experimentará con perfeccionamientos. El programa de prácticas aproximado es el siguiente.

Práctica 1. Introducción a Java/Swing en Netbeans con Matisee. Contenedores vs Contenidos.

Conversor de Temperatura. (2 horas de PA+PL)

Práctica 2. Monitorización y Gestión de Eventos. (4 horas de PA+PL)

Práctica 3. Uso de Paneles y Gráficos AWT. Introducción al uso de OpenGL. (4 horas de PA+PL) Práctica 4. Uso de los contenedores de LayeredPane y Scroll. (2 horas de PA+PL)

Práctica 5. Diseño de un Visor de Imágenes avanzado. (4 horas de PA+PL) Práctica 6. Uso de Ventanas de Diálogo. Modalidades. (4 horas de PA+PL) Práctica 7. Uso de Botones y Listas. (2 horas de PA+PL)

Práctica 8. Concurrencia y uso de Swing Worker. (2 horas de PA+PL) Práctica 9. Seguimiento y Tutelaje del Diseño de Curso. (6 horas de PA+PL)

(5)

Metodología:

La forma de llevar a cabo la docencia, o metodología se articula en la docencia presencial que se organiza en clases de teoría, prácticas en aula y prácticas en laboratorio según se enumeran:

AF1. Clases de Teoría: Se presentan los contenidos incidiendo en la vertiente de utilidad de los métodos y procedimientos presentados. Se indicará cuales son además las líneas de lectura y estudio personal que alumno deberá seguir para complementar las sesiones presenciales. Se realizarán en un contexto científica pero se incidirá también en los contextos profesionales y sociales que son también muy importantes en el diseño de interfaces de usuario.

AF2. Clases de Práctica en aula y laboratorio: Se presentará en primer lugar en las sesiones en el aula la situación de las tareas, actividades y ejercicios que se realizaran en el laboratorio, en el contexto de los métodos teóricos y como las actividades prácticas ilustran e incrementa el conocimiento, habilidades y destrezas en la resolución de problemas de programación tendentes a crear sistemas de interfaces de usuario demostrativos. Se realizarán en un contexto orientado a la actividad profesional del diseño de interfaces de usuario

AF3. Tutorías: Se realizarán tanto individualmente como en grupos para aclarar los problemas y dudas que surgen tanto de los conceptos en clases teóricas como en las actividades prácticas

AF4. Desarrollo de un diseño conceptual de una interfase de usuario que tendrá que exponer y defender públicamente. Esta actividad es de especial proyección hacia el contexto profesional y social.

La docencia de la materia se organiza en la enseñanza de conceptos y fundamentos complementada con las prácticas que generan habilidad y destreza. Podemos distinguir entre las horas presenciales y las no presenciales.

La materia consta de 6 créditos, que a razón de 25 horas/crédito equivale a 150 horas totales que se distribuyen de la forma siguiente:

Presenciales No-Presenciales Totales Teoría: 30 45 75

PA 15 20 35 PL 15 20 35 Evaluación 5 Totales 60 85 150

La materia se imparte en el primer cuatrimestre en un periodo de 15 semanas, lo que implica que la dedicación del alumno a la materia es:

Enseñanza presencial = 4 horas/semana (2 de Teoría + 1 de Práctica en aula+ 1 de Prácticas en laboratorio)

Enseñanza no presencial = 5.6 horas/semana (3 de Teoría + 1.3 de Prácticas en aula + 1.3 de Prácticas en laboratorio)

Evaluacion:

Criterios de evaluación ---

Para la evaluación se tendrán en cuanta las distintas actividades programadas: La asistencia participativa en las clases de teoría y prácticas en aula, la aprobación de un trabajo de curso y la

(6)

aprobación de las prácticas encargadas.

FE1. Realización y defensa de un trabajo de curso encargado por el profesor en el que el alumno propondrá un proyecto preliminar de interfase de usuario para una aplicación con especificaciones definidas. Competencias: G1,G2,G3,G4,G5,N1,N2,N3,N4,N5,IS01,IS03,IS04,IS06,CP06. Esta fuente de evaluación está relacionada con las actividades formativas AF1, AF3 y AF4.

FE2. Realización y presentación de las respectivas memorias de cada una de las prácticas planificadas y expuestas en el campus virtual. Competencias:

G1,G2,G3,G4,G5,N1,N2,N3,N4,N5,IS01,IS03,IS04,IS06,CP06.Esta fuente de evaluación está relacionada con la actividad formativas AF2 y AF3.

Sistemas de evaluación ---

El sistema de evaluación establecerá en base al siguiente criterio:

nota = min(10, 0.5*nota del trabajo de curso + 0.5*nota media de las prácticas + 0.1*asistencia y participación)

El sistema de evaluación será idéntico en las diversas convocatorias de la asignatura.

Criterios de calificación ---

Para la calificación de los diversos elementos sujetos a valoración, trabajos y prácticas, se tendrán en cuenta los contenidos, así como la organización y presentación de los mismos.

Plan de Aprendizaje (Plan de trabajo de cada estudiante)

Tareas y actividades que realizará según distintos contextos profesionales (científico, profesional, institucional, social)

Ta1. Realización de comentarios y opiniones que el profesor solicita a los alumnos de forma individual o grupal a los alumnos con el objeto de fomentar el sentido crítico y la interacción social. Contexto Científico y Social.

Ta2. Realización de ejercicios prácticos en el laboratorio. Contexto Científico y Profesional.

Ta3. Realización y exposición pública de un diseño conceptual y/o implementación de una interfaz propuesta por el profesor. En este caso el alumno trabajará sobre y supuesto concreto y expondrá y defenderá las decisiones adoptadas. Se pretende que el alumno se sitúe en un entorno más próximo al profesional donde debe concretar y defender sus propuestas. Contexto Profesional y Social.

Temporalización semanal de tareas y actividades (distribución de tiempos en distintas actividades y en presencialidad - no presencialidad)

Se tomará una equivalencia de 1 ECTS como 25 horas de las cuales 10 son presenciales y las restantes 15 como no presenciales.

Módulo I

Horas Presenciales Horas No-presenciales Tema I-1 2 3

Tema I-2 6 9

(7)

Tema I-3 2 3 Tema I-4 2 3 Tema I-5 4 6 Módulo II

Tema II-1 2 3 Tema II-2 2 3 Tema II-3 2 3 Tema II-4 4 6 Tema II-5 2 3

Tema II-6 2 3

Para facilitar el entronque de la docencia del módulo II con las prácticas, se realizará una docencia de teoría con alternancia de los temas de módulo I y módulo II hasta que finalice este ultimo. Esta alternancia permite un avance paralelo de los aspectos teórico/empíricos y los operacionales. La planificación temporal será la siguiente:

T (2horas) PA+PL(2 horas) Semana 1: Tema I-1 Practica 1 Semana 2: Tema II-1 Práctica 2 Semana 3: Tema I-2 Práctica 2 Semana 4: Tema II-2 Práctica 3 Semana 5: Tema I-2 Práctica 3 Semana 6: Tema II-3 Práctica 4 Semana 7: Tema I-2 Práctica 5 Semana 8: Tema II-4 Práctica 5 Semana 9: Tema I-3 Práctica 6 Semana 10: Tema II-4 Práctica 6 Semana 11: Tema I-4 Práctica 7 Semana 12: Tema II-5 Práctica 8 Semana 13: Tema I-5 Práctica 9 Semana 14: Tema II-6 Práctica 9 Semana 15: Tema I-5 Práctica 9

Recursos que tendrá que utilizar adecuadamente en cada uno de los contextos profesionales.

El alumno tendrá que utilizar los recursos didácticos que se podrán a su disposición: apuntes, bibliografía, enlaces a libros on-line y documentación. En las prácticas, el alumno utilizará las plataformas de desarrollo Java, bien Eclipse o NetBeans instalada previamente en los equipos de los laboratorios.

Re1. Notas de curso elaboradas por el profesor Re2. Documentación pública disponible en Internet.

Re3. Bibliografía disponible en la Biblioteca.

Re4. Entorno Netbeans+Java Swing disponible en los Laboratorios.

Re5. Notas de definición de objetivos y de orientación en las prácticas

(8)

Resultados de aprendizaje que tendrá que alcanzar al finalizar las distintas tareas.

Al finalizar la docencia de teoría del Módulo I Relacionado con la actividad formativa AF1 y AF3:

RA1. Conocer la evolución histórica de las relaciones de interacción humana con objetos tecnológicos y con sistemas de computación.

RA2. Conocer las propiedades cognitivas del usuario, o modelo del usuario, su capacidades de visión memoria, reactivad y actitud frente a interfaces de usuario.

RA3. Conocer y valorar los conceptos de usabilidad y requisitos.

RA4. Conocer y saber aplicar las reglas empíricas sobre diseño de interfaces de usuario.

RA5. Conocer y aplicar las técnicas de diseño conceptual y los criterios de test y validación de interfaces de usuario.

Al finalizar la docencia de teoría del Módulo II relacionadas con las actividades formativas AF1, AF2 y AF3:

RA6. Conocer y saber aplicar el concepto de diseño de interface de usuario basado en Modelo-Vista-Controlador.

RA7. Conocer y utilizar los elementos que configuran los modelos o patrones de interfaces de usuario.

RA8. Saber aplicar las Java Fundation Classs (JFC) para diseñar interfaces de usuario.

Al finalizar el periodo de prácticas relacionadas con las actividades formativas AF2, AF3 y AF4.

RA8. Diseñar, programar y evaluar prototipos de interfaces de usuario.

Plan Tutorial

Atención presencial individualizada (incluir las acciones dirigidas a estudiantes en 5ª, 6ª y 7ª convocatoria)

Se atenderá presencialmente y de forma individualizada a los alumnos en el horario establecido para las tutorías. El lugar de atención será el despacho del profesor D3-6. Se atenderá en el horario de tutorías que oficialmente establece el Departamento, o bien en caso excepcional en un horario concertado entre profesor y alumno.

Atención presencial a grupos de trabajo

Cuando se requiera, por ejemplo en actividades prácticas, se realizará atención en grupos de trabajo. Se realizarán en horarios de tutorías o bien horarios concertados y según el número de alumnos implicados, se realizaran en el despacho D3-6, una sala de reunión o bien un aula o laboratorio.

(9)

Atención telefónica

En deshuso, pero se atenderá cuando sea solicitada.

Atención virtual (on-line)

La atención se realizará mediante la Plataforma Moodle de la Universidad.

Datos identificativos del profesorado que la imparte.

Datos identificativos del profesorado que la imparte

Dr./Dra. Juan Ángel Méndez Rodríguez (COORDINADOR) Departamento: 260 - INFORMÁTICA Y SISTEMAS

Ámbito: 075 - Ciencia De La Comp. E Intel. Artificial Área: 075 - Ciencia De La Comp. E Intel. Artificial Despacho: INFORMÁTICA Y SISTEMAS

Teléfono: 928458746 Correo Electrónico: [email protected]

Dr./Dra. Modesto Fernando Castrillón Santana

Departamento: 260 - INFORMÁTICA Y SISTEMAS

Ámbito: 075 - Ciencia De La Comp. E Intel. Artificial Área: 075 - Ciencia De La Comp. E Intel. Artificial Despacho: INFORMÁTICA Y SISTEMAS

Teléfono: 928458755 Correo Electrónico: [email protected]

Bibliografía

[1 Básico] Diseño de interfaces de usuario: estrategias para una interacción persona-computadora efectiva /

Ben Shneiderman, Catherine Plaisant.

Pearson Addison Wesley,, Madrid : (2006) - (4ª ed.) 8420548030

[2 Básico] User Interface Design for Mere Mortals / Eric Butow.

Addison-Wesley,, Boston [etc.] : (2007)

[3 Básico] Designing with the mind in mind :simple guide to understanding user interface design rules / Jeff Johnson.

Elsevier,, Burlington, MA : (2010) 978-0-12-375030-3 (Observaciones: null)

[4 Básico] Swing /

Matthew Robinson, Pavel Vorobiev.

Manning,, Greenwich : (2003) - (2nd ed.) 1-930110-88-X

[5 Básico] The essential guide to user interface design :an introduction to GUI design : principles and techniques /

Wilbert O. Galitz.

Wiley,, Indianapolis, Indiana : (2007) - (3rd ed.) 978-0-470-05342-3

(10)

[6 Recomendado] Paper prototyping :the fast and easy way to refine and refine user interfaces / Carolyn Snyder.

Morgan Kaufmann,, San Francisco, CA : (2003) 978-1-55860-870-2

[7 Recomendado] The design of everyday things / Donald A. Norman.

MIT Press,, London : (1998) 0-262-64037-6

[8 Recomendado] The human interface :new directions for designing interactive systems / Jeff Raski.

Addison-Wesley,, [Boston... [et al.] : (2000) 978-0-201-37937-2

[9 Recomendado] The definitive guide to Java Swing / John Zukowski.

Springer,, New York : (2005) - (3rd ed.) 978-1-59059-447-6

[10 Recomendado] Java SE6 & Swing: el lenguaje más versátil / José Rafael García-Bermejo Giner.

Pearson-Prentice Hall,, Madrid [etc.] : (2007) 978-84-8322-414-4

[11 Recomendado] Java Swing / Marc Loy... [et al.].

O'Reilly,, Sebastopol, California : (2003) - (2nd ed.) 978-0-596-00408-8

[12 Recomendado] Beginning Android / Mark L. Murphy.

Springer,, New York : (2009) 978-1-4302-2419-8

[13 Recomendado] Professional Java user interfaces / Mauro Marinilli.

John Wiley & Sons,, Chichester, West Sussex : (2006) 0-471-48696-5

[14 Recomendado] User interface design :a software engineering perspective / Soren Lauesen.

Addison Wesley,, Essex, England : (2005) 0-321-18143-3