Usuario y interacción - Gráfico y Creación visual

El objetivo principal de la asignatura es dotar al alumno de planteamientos de diseño que colocan al usuario en como centro del proyecto, profundizando en técnicas para saber detectar y cuestionar las necesidades de los usuarios e interpretar su contexto para poder generar soluciones. El diseño centrado en el usuario facilita la vida cotidiana y nuestra relación con los objetos, la comunicación y los espacios.

La usabilidad, el diseño de interacción y la experiencia de usuario (UX) estudian la forma en que las personas se relacionan con nuestro contexto (comunicación, interfaces, productos, espacios y experiencias) para lograr que sean más intuitivas, satisfactorias, recordables, más fáciles de usar y con una interacción más fluida.

Debemos comprender qué significa el “punto de vista del usuario”

Aunque el Diseño de Experiencia del Usuario está muy ligado a los sitios web, aplicaciones web y productos interactivos digitales, en realidad hace referencia a la “experiencia ideal” al usar un servicio, producto o espacio, por lo que nos permite trabajar soluciones para diseñar todas las experiencias que una persona pueda tener en relación al contexto en el que vive.

Por tanto, el trabajar en el Diseño de la Experiencia, hoy es competencia de todas las áreas del diseño, ya que atravesamos un momento en el que vivimos la fusión de los mundos físico y online y una excelente experiencia comenzada online por un usuario, puede estropearse en la interpretación de un mensaje, en el primer momento de uso del producto, en la recepción del hotel o en el momento de pagar una tienda o en el momento de abrir un regalo. El Customer Journey no termina hasta que no termina el uso del producto o servicio por parte del usuario.

Con este enfoque en mente, la manera de plantear el proyecto cambia asumiendo un comportamiento más empático hacia las personas que serán los usuarios o consumidores de nuestras propuestas. El punto es observar, explorar y visualizar cómo se sienten nuestros usuarios al utilizar nuestros productos y servicios de principio a fin.

Objetivos formativos

Conocer métodos para la identificación de requerimientos de proyecto desde el punto de vista del usuario y su aproximación al problema planteado desde una perspectiva global de diseño.

Entender la experiencia de usuario como un componente fundamental dentro de la disciplina del diseño y su aplicación a marcas, productos o experiencias digitales.

Entender los parámetros que influyen en la interacción del usuario con su contexto, analógico o digital.

Aplicar el testeo con usuarios como parte importante del proceso de diseño a la hora de validar conceptos o diseños.

Entender el papel clave del diseño en la relación entre personas y tecnología.

Conocer e interpretar las fundamentos y normativas necesarias para desarrollar proyectos pensando en las capacidades de las personas.

Instruir en las técnicas y metodologías para la elaboración de proyectos complejos con soluciones inter-profesionales, potenciando las relaciones inter-humanas y el trabajo en equipo.

Objetivos del seminario

Bloque Analógico

Visibilidad, legibilidad y lecturabilidad

(8 sesiones)

Clase 01. Legibilidad y lecturabilidad.

Capacidad de un texto de ser leído de la manera más clara y fácil posible, diferencias entre ambos conceptos.

Aspectos: elección de tipografías, anchura de línea, interlínea, interletraje, composición, jerarquía de textos, etc.

A. Ejercicio

Clases 02-03 Estructura de la información.

Presentar la información para que ésta pueda ser comprendida de manera eficiente y efectiva.

Aspectos: representación gráfica, infografía y visualización de datos.

B. Ejercicio

Clases 04-05-06 Señalética

Elaboración de sistemas de señales y sus representaciones considerando factores tales como: situación geográfica, lengua de la localidad, nacionalidad, identidad o elementos representativos del lugar, etc.

Aspectos: distancias, niveles de lectura, color, pictogramas, etc.

C. Ejercicio

Clases 07-08. pedagogía visual

Explicar pedagógicamente un concepto abstracto de una manera visual.

Aspectos: accesibilidad, diseño inclusivo, cognitivo.

D. Ejercicio

Bloque Digital

1. Fundamentos del Diseño Digital
   1. ¿Quienes Somos? Orígenes y objetivos
   2. Diseño Print vs Digital. Todo termina viviendo online
2. Procesos y Herramientas
   1. Contexto. Panorama actual: de dónde venimos, a dónde vamos.
   2. Diseño Digital. Proceso de creación de un proyecto de diseño digital
   3. ¿Con qué trabajamos? Herramientas y recursos
3. Elementos Clave del Diseño Digital
   1. User Interface Elementos. Tipo de UI Elementos
4. El universo de la interacción multipantalla
   1. Diseño y tecnología. El factor humano: diseño de interacción
   2. Nuevos gatgets. La diversidad de interfaces
5. Herramientas de diseño y prototipado
   1. Diseño UI: Sketch
   2. Diseño UX: Invision

Metodología docente

• Clases teórico-prácticas: clases magistrales, referentes casos de estudio, debate en gran grupo.
• Seminario de procedimientos específicos (herramientas y técnicas)
• Seminarios de expertos externos que aporten su visión profesional
• Seminarios de aproximación al diseño de producto: referentes y casos de estudio.
• Sesiones de trabajo
• Tutorías: tutorías de seguimiento y corrección del proyecto.
• Presentación de trabajos: presentación pública de resultados, parciales y finales.
• Valoraciones.

Actividades formativas

Clases Teórico-prácticas. ECTS: 20%

Metodología de enseñanza / aprendizaje: Clases magistrales, casos de estudio y debates en gran grupo.

Competencias: CE8, CE11

Prácticas experimentales. ECTS: 30%

Metodología de enseñanza / aprendizaje: Ejercicios en el aula y demostraciones experimentales

Competencias: CE8, CE11

Búsqueda de documentación. ECTS: 10%

Metodología de enseñanza / aprendizaje: Trabajo autónomo: búsqueda de fuentes especializadas sobre materiales y procesos de construcción y transformación

Competencias: CE1, CE11, CT11

Realización de proyectos y tutorías. ECTS: 35%

Metodología de enseñanza / aprendizaje: Trabajo autónomo y en grupo. Tutoría de seguimiento y corrección del trabajo

Competencias: CE1, CE11, CT11

Evaluación. ECTS: 5%

Metodología de enseñanza / aprendizaje: Prueba de síntesis y aplicación de los conceptos y procedimientos adquiridos en las clases teóricas y las prácticas experimentales

Competencias: CE8, CE11, CT11

Metodología del Seminario

Bloc Digital

Metodología docente

Durante el transcurso del semestre se alternan clases de análisis de navegabiltat y usabilidad, de producción informática, junto con clases de trabajo supervisado y consulta (individuales y colectivas).

Cada tema abordado se apoyará con un ejercicio práctico y case study como ejemplo de aplicación.

Se seguirá el siguiente esquema:

1. Contextualización del entorno de trabajo. Documentación y análisis de las especificidades del entorno
   (Case study)
2. Explicación teórica de herramientas de producción. Ejercicios prácticos para la asimilación de conceptos.
3. Proyecto autónomo con sesiones de control tutorizadas.

Activistas formativas

UX / UI - Pantallas y dispositivos

Mentalidad analítica, investigación

Entender y familiarizar al estudiante del nuevo contexto profesional del diseño

UX - Arquitectura y Wireframing

Definir contexto y usuario. Capacidad de detectar problemas y oportunidades

Entender las diversas fases de un proyecto digital.

UI - Elementos del Diseño Digital

Capacidad de análisis y organización

Indentificar y entender la funcionalidad de los diversos elementos que intervienen en el diseño de interacción

Diseño de interacción

Proactividad y visión de futuro

Ampliar el imaginario de dispositivos de entorno del diseño interactivo. Combinar diseño Print y las opciones / oportunidades de la interacción.

Sistema de evaluación

Evaluación contínua

El objetivo de la evaluación continua es que el estudiante pueda conocer su progreso académico a lo largo de su proceso formativo para poder mejorarlo. A partir de la segunda matrícula, la evaluación de la asignatura podrá consistir, a decisión del profesor, en una prueba de síntesis, que permita la evaluación de los resultados de aprendizaje previstos en la guía docente de la asignatura. En este caso, la cualificación de la asignatura corresponderá a la cualificación de la prueba de síntesis.

Normativa general de evaluación

Para considerar superada una asignatura, será necesaria una cualificación mínima de 5,0.

Una vez superada la asignatura, esta no podrá ser objeto de una nueva evaluación.

Se considerará “No evaluable” (NE) el estudiante que no haya entregado todas las evidencias de aprendizaje o no haya asistido al 80% de las clases sin haber justificado las ausencias. En caso de ausencia justificada, el estudiante se tiene que poner en contacto con el profesor en el momento de la reincorporación para determinar la recuperación de las actividades a las que no haya asistido.

En el caso que el o la estudiante cometa cualquier irregularidad que pueda conducir a una variación significativa de la calificación de un acto de evaluación, se calificará con un 0 este acto de evaluación, con independencia del proceso disciplinario que se pueda instruir. En el caso que se produzcan diferentes irregularidades en los actos de evaluación de una misma asignatura, la calificación final de esta asignatura será 0.

Criterios de evaluación

La calificación final del curso se basará en una evaluación continua del trabajo del estudiante. El profesor hará un seguimiento de la evolución y de los progresos del alumno de manera individualizada. Los criterios de valoración se corresponden con la adquisición de las competencias correspondientes a esta asignatura, descritas detalladamente en esta guía docente.

La ponderación de la nota global de la asignatura será la siguiente:

• 50% la parte magistral
• 50% la parte de los seminarios

Por cada uno de los proyectos se indicarán las competencias y habilidades a evaluar. Cada proyecto tendrá un sistema de evaluación vinculado a la tipología de entregas definida.

La ponderación de los ejercicios y proyectos de la parte magistral será la siguiente:

• Un 30% de la nota corresponde al ejercicio con el que se inaugura el curso y se presenta la asignatura.
• Un 30% de la nota corresponde a la media de notas obtenidas en los ejercicios prácticos realizados.
• El 30% de la nota se evaluará con el proyecto final.
• El 10% restante corresponde a la participación activa en las sesiones

Las entregas son obligatorios, pero la no entrega no impide que se pueda aprobar si la media da 5 o más.

Proceso de revisión

La revisión se puede solicitar al profesorado correspondiente y se realizará durante la semana indicada al calendario lectivo.

Proceso de revaluación

No se contemplan sistemas de reavaluación en los casos de la prácticas externas, los TFG, y las asignaturas / actividades formativas que, por su carácter eminentemente práctico, no lo permitan.

Normativa del Seminario

Bloc Analógico

Normativa específica del Bloque

Media entre los cuatro ejercicios 90% + actitud y asistencia a clase 10%.

La nota del Bloque Analógico hará media con la nota del Bloque Digital. Se requiere un mínimo de 5 en cada uno de los bloques para poder hacer la media y sacar la nota final.

Bloque Digital

Normativa general de evaluación

• Para considerar superada una asignatura, será necesario que se obtenga una calificación mínima de 5,0.
• Una vez superada la asignatura, ésta no podrán ser objeto de una nueva evaluación.
• Se considerará "No Evaluable" (NA) el estudiante que no haya entregado todas las evidencias de aprendizaje o no haya asistido al 80% de las clases sin haber justificado las ausencias. En caso de ausencia justificada, el estudiante debe ponerse en contacto con el profesor en el momento de la reincorporación para determinar la recuperación de las actividades en las que no haya asistido.
• En caso de que el estudiante realice cualquier irregularidad que pueda conducir a una variación significativa de la calificación de un acto de evaluación, se calificará con 0 este acto de evaluación, con independencia del proceso disciplinario que se pueda instruir. En caso de que se produzcan varias irregularidades en los actos de evaluación de una misma asignatura, la calificación final de esta asignatura será 0.

La evaluación se realizará de forma continuada y se valorará la evolución del alumno en base a los ejercicios entregados a lo largo del curso. Para tener derecho a la nota final será necesario haber entregado todos los ejercicios que se platejan durante el curso.

La asistencia a clase y la puntualidad son importantes para el buen funcionamiento de la

dinámica lectiva y serán tomados en consideración a la hora de la evaluación final.

1. Se entregarán tres ejercicios que harán media en base a los siguientes porcentajes.

Experiencia de usuario, estructura y composición digital 30%

(UX / UI - Pantallas y dispositivos UX / UI + UX - Arquitectura y Wireframing)

Navegation Architecture: User: Sign-in / Log-in; Main Wireframe; Bridge Navigation; Navigation Structure View

Wireframe: Wireframe Structure; Identity funtion Zonas; Animation

Design & Sketch Prototyping 70%

(UI - Elementos del Diseño Digital + Diseño de interacción)

Define + Naming + Branding: Problem Statement; Documentation; naming; branding

App Design: Main Wireframe + Look & feel; Visual Interaction Apoyo; Iconographie

Problem Statement; UX Navegation; IX Design

2. Se valorará la participación y el seguimiento a las actividades planteadas dentro del aula.

Revisión de las entregas parciales (tutorías de seguimiento) junto con la asistencia a las sesiones.

Criterios de avaluación

Se tendrán en cuenta los siguientes aspectos del diseño digital:

• Problema Statement Definición de las claves de la necesidad de diseño
• Research benchmarking + Search for referentes of concepts
• User: Sign-in / Log-in Vista de la zona de acceso del App
• Main Wireframe Deficició de las fucionalitat clave del App (TAP BAR)
• Bridge Navigation Visualización de las diversas tipologías de navegación. Directo vs regreso
• Navigation Structure View Facilidad de visualización de las diversas fucionalitats de la App. diseño infográfico
• Wireframe Structure Estructuración de las acciones y Creación del desplegado de las vistas de la App.
• Identity funtion Zonas Definición y sistematización de las diversas categorías de vista de la App
• Animation Definición y pertinencia de las tipologías de interacción
• Plantillas clave: Tipo de botón, estructura lista, fotos, mapa, ... Creción de símbolos
• Tipo de zona del App: Splach, Sign-in / log-in / Stteings, Explanation, Hombre, funtion, Bridges
• Main Wireframe + Look & feel Identificación de las zonas de la App
• Visual Interaction Apoyo Visualización de las funcion en botones, colores, transiciones de vista, ...
• Iconographie Visualización de las funciones en iconos (en base al look & feel)
• Tipo de zona del App: Splash, Sign-in / log-in / Stteings, Explanation, Hombre, funtion, Bridges
• Tipo de interacción: Botón, Check list, carrusell, Transiciones de vista, Pop-up, Aparición / desapació zona, Reducción / apliación zona
• UX Navegation Visualización de las diversas funcionalidades de la App en un trayecto de nav. razonable
• IX Design Visualización de las claves de diseño para cada zona / funcionalidad del App

Proceso de evaluación

Normativa general

• No se contemplan sistemas de reevaluación en los casos de las prácticas externas, los TFG, y las asignaturas / actividades formativas que, por su carácter eminentemente práctico, no lo permiten.
• Para participar en la reevaluación del alumnado debe haber sido previamente evaluado en un conjunto de actividades el peso de las que equivalga a un mínimo de dos terceras partes de la calificación total de la asignatura o módulo.

Bloque Analógico

COSTA, J. Diseñar para los ojos, Colección Joan Costa, Ed. Costa punto com, Barcelona: 2007

DE GRANDIS, L. Teoría y uso del color, Ed. Cátedra, Madrid: 1985.

HOCHULI, J. El detalle en la tipografia, Campgràfic editors, 2007

JARDÍ, E. Veintidós consejos sobre tipografía, Ed Actar, 2007

JAUSET, J.A. Estadística para periodistas, publicitarios y comunicadores, Ed. UOC, Barcelo¬na: 2007

KANIZA, G. Gramática de la visión. Percepción y pensamiento, Ed. Paidós Comunicación, Barcelona: 1986.

UNGER, G. ¿Qué ocurre mientras lees? Tipografía y legibilidad, Ed Campgràfic, 2009

WOODSON, Human Factors Design Handbook, McGraw-Hill, New York: 1992

Bloque Digital

NORMAN, D. (2016). The design of everyday things.

KELLEY, D. Human-centered design.

ABRAS, CH.; MALONEY-KRICHMAR, D.; PREECE, J. (2004) «User-centered design». Bainbridge, W. Encyclopedia of Human-Computer Interaction. Thousand Oaks: Sage Publications. (vol. 37, núm. 4, pàg. 445-456).

NIELSEN, J. (1995) «10 Heuristics for User Interface Design». Nielsen Norman Group. [Data de visita: 30 de Juny de 2017].

BROWN, T.; KĀTZ, B. (2009). Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation. Nova York: Harper Business.

HANINGTON, B.; MARTIN, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions. Rockport Publishers.

COURAGE, C.; BAXTER, K. (2005). Understanding your users: A practical guide to user requirements methods, tools, and techniques. Gulf Professional Publishing.

CALVO-FERNÁNDEZ RODRÍGUEZ, A.; ORTEGA SANTAMARÍA, S.; VALLS SAEZ, A. Mètodes d’avaluació amb usuaris.

VERTELNEY, L.; CURTIS, G. (1990). «Storyboards and Sketch Prototypes for Rapid Interface Visualization». CHI Tutorial / ACM Press.

NIELSEN, J. Usabilidad, Diseño de sitios web, Ed. Prentice Hall, Madrid: 2000.

HUGUES, WILLIAM J. The Human Factors Design Guide, THE HUGHES TECHNICAL CENTER: 2001

Actualitat

The Verge

Tech Crunch

Engaded

Smashing magazine

Designer News

http://usepanda.com/

Muzli inspiration

Inspiració

awwwards

The FWA

Collect UI

pttrns

Dribble

Informació técnica, manuals

Human Interface Guidelines

Design for Android

Google Play Store

App Store

Llibrerías con símbolos y elementos dinámicos

Apple design resources (the official one)

IOS design kit

Bottts per fer robots a través de símbols (great)

Humaaans para hacer ilustraciones a partir de figuras hechas

Producto

BUSTAMANTE, A. Ergonomía para diseñadores, Ed. Mapfre, Madrid: 2008

COSTA, J. Diseñar para los ojos, Colección Joan Costa, Ed. Costa punto com, Barcelona: 2007

CRONEY, John, Antropometría para diseñadores, Ed Gustavo Gili, Barcelona, 1978

NEUFERT, E. Neufert. Arte de proyectar en arquitectura, Ed. GGili, 1982

PAGE, A. Guía de recomendaciones para el diseño de mobiliario ergonómico, IBV, Valencia: 1992

PANERO, J. ZELNICK, Las dimensiones humanas en los Espacios Interiores. Estandares antropométrico, Ed Gustavo Gili, Barcelona, 2011.

PHEASANT, S. Ergonomics, Standards and Guidelines for Designers, British Standards Institution: 1987

Kickstarter

Producthunt

Link references to search images

Pexels

Unsplash

Magnumphotos

dao magazine

Plastik magazine

Somewhere magazine

A new type of imprint

2D artists

Experimenta

Paper journal

Giphy

Video

Black Mirorr

iPhone Presentation

Bloque Digital

- Proceso de trabajo y presentación del Proyecto del Diseño de la App

Competencias específicas

Competencia

CE5. Dominar las técnicas de representación gráfica de espacios y volúmenes, planos y superficies características del diseño.

Resultados de aprendizaje

CE5.1. Utilizar las convenciones y las formas de representación habituales en el sector profesional del diseño al que va dirigido el proyecto.

Competencia

CE6. Demostrar conocer y utilizar con criterios especializados la arquitectura de la letra y las diferentes familias tipográficas de los alfabetos latinos.

Resultados de aprendizaje

CE6.1. Usar los recursos tipográficos y de maquetación de página adaptados a funciones de lectura, comunicación y expresión del proyecto.

CE6.2. Dominar la arquitectura de la letra y diseñar alfabetos.

Competencia

CE9. Demostrar que conoce el uso del medio audiovisual, el entorno digital y las herramientas de creación y producción del mismo.

Resultados de aprendizaje

CE9.1. Desarrollar proyectos específicamente dirigidos a su recepción en pantalla.

CE9.2. Aplicar los criterios y los recursos gráficos y tipográficos propios del medio audiovisual y digital.

Competencia

CE10. Estructurar y jerarquizar gráficamente la información verbal

Resultados de aprendizaje

CE10.1. Dominar recursos infográficos básicos para presentar sectores y marcos de actuación en los que se inscribe el proyecto.

Competencia

CE21. Disponer de recursos y capacidades para relacionar conceptos y lenguajes de diferentes especialidades de diseño.

Resultados de aprendizaje

CE21.1. Desarrollar proyectos de diseño integral que relacionen conceptos y procedimientos de diferentes sectores profesionales del diseño.

Competencias transversales

CT9. Capacidad resolutiva y de toma de decisiones.

CT10. Motivación por la calidad, tanto en los planteamientos conceptuales y argumentales, como en la resolución formal y en los detalles del acabado final de un proyecto de diseño.

- Participación activa durante el curso y Entrega del dossier final

Competencia

CE2. Evaluar usos y programar funciones orientados a la concepción y formalización de proyectos de diseño.

Resultados de aprendizaje

CE2.1. Realizar un programa de usos y funciones conducente al desarrollo de un proyecto a partir de las características propias de un sector profesional del diseño.

Competencia

CE11. Demostrar comprender el funcionamiento del entorno económico, empresarial e institucional en el cual se contratan y desarrollan profesionalmente los proyectos y las actividades de diseño.

Resultados de aprendizaje

C11.1. Detectar y explicar el tipo de contratación, la gestión de los proyectos, etc. del diseño más característico del sector en el que se inscribe el proyecto.

Competencia

CE17. Exponer y razonar, de forma oral y escrita, los resultados y los procesos de trabajo de los objetos de diseño propios.

Resultados de aprendizaje

CE17.1. Elaborar una memoria escrita del proyecto y defenderla oralmente de acuerdo con las convenciones y las características específicas del sector del diseño al cual va dirigido.

Competencia

CE19. Demostrar que conoce los métodos de investigación relevantes para la proyectación y la teoría, el análisis y la crítica del diseño y del arte.

Resultados de aprendizaje

CE19.1. Aplicar las metodologías de investigación y de evaluación propias del sector profesional del diseño al cual se dirige el proyecto.

Competencias transversales

CT2. Elaborar informes profesionales y trabajos académicos.

CT3. Demostrar conocer y utilizar correctamente las fuentes documentales y la bibliografía necesaria tanto para la proyectación como para el análisis y crítica razonada del diseño.

CT4. Demostrar interés por el estudio de lenguas extranjeras tanto para facilitar la comunicación como para acceder a contextos culturales diferentes.

CT6. Capacidad para trabajar en equipo y aptitudes para el diálogo con los diferentes agentes y disciplinas que pueden intervenir en el desarrollo de un proyecto de diseño.