c1 introduccion diu_sm_2012_1_mododecompatibilidad_

15
Diseño de Interfaces de Usuarios Diaz Muñante Jorge 1 Introducción al curso Diseño de Interfaces de Usuarios Ciclo 2012-1 Profesor: Diaz Muñante Jorge Contenido Click to add Title 1 Introduccion 1 Click to add Title 2 Objetivos 2 Click to add Title 1 Planificacion 3 Click to add Title 2 Evaluacion 5 Click to add Title 1 Recomendaciones 6 Click to add Title 1 Material de clases 4 Introducción Presentación ¿qué esperan del curso? Objetivos del curso Objetivo del curso – Aprender a diseñar, prototipear y evaluar inferfaces Descubrir las tareas del usuario Limitaciones cognitivas / perceptual que afectan el diseño de las interfaces Técnicas de evaluación de interfaces Importancia del diseño interactivo para su usabilidad Tecnologías para crear propotipos e implementar interfaces Como trabajar en equipo de trabajo Comunicar el resultado del proyecto – Muchos de estos aspectos forman parte de los trabajos del futuro Advertencia Bien escrito – Español Singular interfaz Plural interfaces – Ingles Singular interface Plural interfaces – Latín - inter (entre) - face (cara) Mal escrito – interfases (significa transición) Bits Interfaz Usuario Planificación La interacción persona-computadora

Upload: julio-pari

Post on 22-May-2015

286 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 1

Introducción al curso

Diseño de Interfaces de Usuarios

Ciclo 2012-1

Profesor:

Diaz Muñante Jorge

Contenido

Click to add Title1 Introduccion1

Click to add Title2 Objetivos2

Click to add Title1 Planificacion3

Click to add Title2 Evaluacion5

Click to add Title1 Recomendaciones6

Click to add Title1 Material de clases4

Introducción

�Presentación

�¿qué esperan del curso?

�Objetivos del curso

Objetivo del curso

– Aprender a diseñar, prototipear y evaluar inferfaces• Descubrir las tareas del usuario

• Limitaciones cognitivas / perceptual que afectan el diseño de las interfaces

• Técnicas de evaluación de interfaces

• Importancia del diseño interactivo para su usabilidad

• Tecnologías para crear propotipos e implementar interfaces

• Como trabajar en equipo de trabajo

• Comunicar el resultado del proyecto

– Muchos de estos aspectos forman parte de los trabajos del futuro

Advertencia

�Bien escrito– Español

• Singular interfaz

• Plural interfaces

– Ingles• Singular interface

• Plural interfaces

– Latín - inter (entre) - face (cara)

�Mal escrito– interfases (significa transición)

Bits Interfaz Usuario

Planificación

�La interacción persona-computadora

Page 2: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 2

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

Secuencia de Tareas Selección de Tareas

*

Iteración de Tareas Tarea Unitaria

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

�Metáforas

Page 3: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 3

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

�Metáforas

�Estándares y guías

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

�Metáforas

�Estándares y guías

�Errores y ayuda

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

�Metáforas

�Estándares y guías

�Errores y ayuda

�Estilos de interacción

Planificación

�La interacción persona-computadora

�Diseño centrado en el usuario

�Análisis de tareas

�Prototipo

�El factor humano

�Recomendaciones

�Metáforas

�Estándares y guías

�Errores y ayuda

�Estilos de interacción

�Accesabilidad

Planificación

� La interacción persona-computadora

� Diseño centrado en el usuario

� Análisis de tareas

� Prototipo

� El factor humano

� Recomendaciones

� Metáforas

� Estándares y guías

� Errores y ayuda

� Estilos de interacción

� Accesabilidad

� Internacionalización

Planificación

� La interacción persona-computadora

� Diseño centrado en el usuario

� Análisis de tareas

� Prototipo

� El factor humano

� Recomendaciones

� Metáforas

� Estándares y guías

� Errores y ayuda

� Estilos de interacción

� Accesabilidad

� Internacionalización

� Evaluación

Page 4: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 4

Planificación

� La interacción persona-computadora

� Diseño centrado en el usuario

� Análisis de tareas

� Prototipo

� El factor humano

� Recomendaciones

� Metáforas

� Estándares y guías

� Errores y ayuda

� Estilos de interacción

� Accesabilidad

� Internacionalización

� Evaluación

� Diseño Webs

L M M J V S D Sem Tema PPT

26 27 28 29 30 31 1 Mar 1 Introduccion C1_introduccion

2 3 4 5 6 7 8 Abr 2 Diseño centrado usuario C2_centrado_usuario

9 10 11 12 13 14 15 3 Prototipos C4_prototipos

16 17 18 19 20 21 22 4 Factores Humanos C4_factores_humanos

23 24 25 26 27 28 29 5 Factores Humanos. Trab # 1 C4_factores_humanos

30 1 2 3 4 5 6 May 6 Recomendación diseño C7_recomendaciones

7 8 9 10 11 12 13 7 Recomendación diseño C7_recomendaciones

14 15 16 17 18 19 20 8 Examen Parcial

21 22 23 24 25 26 27 9 Errores y Ayudas C8_errores_ayudas

28 29 30 31 1 2 3 Jun 10 Errores y Ayudas C8_errores_ayudas

4 5 6 7 8 9 10 11 Metodos de evaluacion. C11_evaluacion

11 12 13 14 15 16 17 12 Met. de evaluacion. Trab #2 C11_evaluacion

18 19 20 21 22 23 24 13 Internacionalizacion C10_internacionalizacion

25 26 27 28 29 30 1 Jul 14 Diseño de web C12_diseño_webs

2 3 4 5 6 7 8 15 Patrones de HP Web C12_patrones_webs

9 10 11 12 13 14 15 16 Examen Final

16 17 18 19 20 21 22 17 Examen Sustitutorio

Planificacion por semanas

Material de apoyo

�Material electronico en campus.dokeos.com

– Registrar en Dokeos

– Registrar en el curso

• El registro es el curso virtual de teoria y de laboratorio.

tlozano

•Ingresa a tu cuenta•Ingresa a la opción “ordenar mis cursos”

Page 5: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 5

Pagina de DIU - Dokeos

Bibliografía

Shneiderman, Ben, C. PlaisantDiseño de interfaces de usuario, 4ª EdiciónPearson, 2006

Norman, DonaldThe invisible computerMIT Press, 1998Aula virtual – link al libro en español (Dokeos) Nuevo

Evaluación

Evaluación Porcentaje Termino Fecha

Examen Parcial

15 % EP Semana 8

Examen Final 35 % EF Semana 16

Trabajo practico

15 % TP1, TP2 TP1 = Sem 5 (27 abr) TP2 = Sem 12(15 jun)

Laboratorio 35 % L2*0.1+L3*0.1+L4*0.15+L5*0.15+L6*0.15+L7*0.35

Por especificar en laboratorio

Trabajos Practicos�Práctica (Trabajos) 15%

� 2 Trabajos prácticos (TP1, TP2) 7.5 % cada uno

� Conformar grupo de 3 alumnos.

� Cada grupo interpretara y analizara recomendaciones en el buen diseño de las interfaces de Microsoft, para la cual se le asignara un tema donde encontrara una categoría y tema especifico (Cada grupo tendrá un tema diferente)

� Los trabajos se realizaran en base al archivo UXguide.pdf

� Trabajo # 1.

� Fecha: 27 de abril

� Trabajo # 2

� Fecha: 15 de junio

� Cada grupo entregara ambos trabajos, pero lo sustentara en una fecha. (Se sorteara la próxima semana)

Rol de Exposiciones

G #1

G # 2 G # 4

G # 5 G # 7

G # 8

Trabajo Practico # 1Fecha entrega: 27 abril

Trabajo Practico # 2Fecha entrega: 15 junio

G # 3

G # 6

G # 9

G # 10 G # 12

G # 11

Page 6: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 6

Evaluación

�Sustitutorio

– Reemplaza el promedio de E1 y E2

– Son By four – A puro dolor

– Grupo Kaliente - Iquitos

• Solo me queda llorar... resignado a perderte... Solo me queda llorar... dolido y vació …

– Maelo Ruiz – Te va a doler

• Pero te vas arrepentir la vida entera

Interacción Hombre-Computador (IHC, HCI ingles)

� Hombre

– Usuario final de un programa

– otras personas de la organización

� Computador

– La máquina donde se ejecuta el programa

� Interacción

– el usuario le ordena al computador que debe hacer

– el computador comunica el resultado al usuario.

� No se limita a la situación clásica de una persona sentada delante de un terminal

– Las computadoras se encuentran en muchas formas

Interacción al tacto

Objetivo del IHC

� Objetivo:

– Desarrollar o mejorar la seguridad, utilidad, efectividad, eficiencia y usabilidad de sistemas que incluyan computadoras

Para hacer sistemas usables es preciso

– Comprender los factores (psicológicos, ergonómicos, organizativos y sociales) que determinan cómo la gente trabaja y hace uso de las computadoras

– Desarrollar herramientas y técnicas para ayudar a los diseñadores de sistemas interactivos

– Conseguir una interacción eficiente, efectiva y segura

� Los usuarios no han de cambiar radicalmente su manera de ser, sino que los sistemas han de ser diseñados para satisfacer los requisitos del usuario

Tipos de interfaz

� Interfaz: «conexión física y funcional entre dos aparatos o sistemas independientes» (DRAE, 22ª edición).

� Interfaz de usuario: «Dónde las personas y los bits se encuentan» (Negroponte, 1995).

– «La interfaz de usuario de un sistema consiste de aquellos aspectos del sistema con los que el usuario entra en contacto físicamente, perceptivamente o conceptualmente. Los aspectos del sistema que están escondidos para el usuario se denominan implementación» (MORAN, 1981)

Page 7: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 7

interfazObjetos de la vida cotidiana IU a la fama o la vergüenza ?

¿Como se abre la puerta?

IU a la fama o la vergüenza ?

¿Como se abre la puerta?

Usar un aviso ¡¡¡¡

No requiere instrucciones ¡¡¡¡ Otra IU mal diseñada

Page 8: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 8

¿Por que estudiar DIU?

La mayoría de los sistemas informáticos son interactivos

La interfaz es una parte muy importante del éxito o fracaso de una aplicación

Algunos estudios:

• Un 48% del código de una aplicación está dedicado a la interfaz (Myers, 1992)

• Más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas está dedicado a la interfaz (Gartner Group)

• El 80% de los costos de mantenimiento de un sistema interactivo son debidos a problemas del usuario con el sistema y no a bugs. De estos problemas, el 64% son problemas de usabilidad (Pressman, 1992)

– Las computadoras cada vez son más usados por gente menos preparada

– Los recursos y conocimientos necesarios para el diseño y desarrollo de interfaces son cada vez mayores

Implicancias en los negocios

�Competencia intensa

– Everyone vs Microsoft.

�Problemas de derecho de autor

– Apple vs Microsoft (Windows)

�Union

– Bell Atlantic y Nynex

�Compra de coorporacion

– IBM compro Lotus

�Historias satisfactorias

– Netscape, America Online

IU a la vergüenza

�American Airlines vuelo 965. Se estrello y murieron todos tus pasajeros

�El piloto cuando se aproxima al aeropuerto de ROZO, tipea la letra “R” y el sistema completo con el aeropuerto de “ROMEO”

�El piloto automatico lo guio a una altura equivocada

¿es culpa del piloto?

Usabilidad

� Usabilidad es la eficacia, eficiencia y satisfacción con las que los usuarios pueden llevar a cabo tareas específicas en un contexto determinado (ISO, 1993).

– Eficacia es la realización de los objetivos por parte del usuariocompletamente y con exactitud.

– Eficiencia es realización de los objetivos completamente y con exactitud en relación con los recursos utilizados (utilizar los recursos de forma óptima).

– Satisfacción es el confort y la aceptación de uso del sistema.

� Para conseguirla es necesario aplicar los siguientes principios generales:

– Facilidad de aprendizaje.

– Flexibilidad.

– Solidez.

Usabilidad : Facilidad de aprendizaje

�Tiene como objetivo reducir el esfuerzo que tiene que hacer un usuario novel para trabajar con un sistema interactivo y pasar a ser un usuario experto.

�Principios que afectan a la facilidad de aprendizaje.

– Predicción . Permitir que el usuario determine el efecto de una acción futura basándose en interacciones anteriores.

– Síntesis . Permite que un cambio del estado del sistema sea percibido por el usuario.

• Inmediata. La notificación se muestra sin que el usuario lo solicite.

• Eventual. La notificación se muestra a solicitud del usuario.

Usabilidad: Facilidad de aprendizaje

Page 9: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 9

Usabilidad: Facilidad de aprendizaje

� Principios que afectan a la facilidad de aprendizaje.

– Familiaridad . La correlación entre los conocimientos del usuario y los conocimientos requeridos para el manejo del sistema.

• Conocimientos de otros sistemas informáticos.

• Conocimientos del mundo real.

– Generalización. Permitir al usuario ampliar el conocimiento de unainteracción específica dentro de la aplicación y entre otras aplicaciones para situaciones similares.

– Consistencia. Todos los mecanismos de interacción deben de serutilizados de la misma manera.

• Las interfaces deben de estar estandarizadas.

• Importancia de las guías de estilo

Un caso de extrema inconsistencia

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) Telefono, control remoto (b) calculadoras, teclado de PC

Usabilidad : Flexibilidad

�Hace referencia a las distintas formas en que el usuario y el sistema intercambian información.

�Iniciativa en el diálogo: el usuario debe llevar el control del sistema.– Considerar al usuario como el actor principal de la

interacción.• El usuario alguien inteligente capaz de llevar a cabo su tarea sin

interacciones cerradas.

�Multitarea.– El usuario debe ser capaz de ejercer varias tareas al

mismo tiempo.

Usabilidad: Flexibilidad

� Migración de tareas.

– Capacidad de transferir el control entre el usuario y el sistema.

– Tanto uno como otro han de poder pasar de una tarea a otra ypromocionarla (cambiar el control del usuario al sistema o viceversa).

� Capacidad de sustitución.

– Posibilidad de que los valores puedan ser sustituidos por valoresequivalentes (p.e. elegir colores por el nombre, por su valor hexadecimal o mediante una paleta de colores).

� Configurable.

– El usuario debe ser capaz de modificar el aspecto de la interfaz.

• En cuanto a preferencias en el diseño.

• En cuanto a opciones según el nivel de experiencia (p.e. la interfaz de VisualStudio .NET).

Usabilidad: Solidez

�El sistema debe cumplir sus objetivos y permitir suevaluación.

�Capacidad de observación.

– Permite al usuario evaluar el estado del sistema por medio de la representación percibida en la interfaz.

�Recuperabilidad.

– El usuario debe poder recuperar el sistema a un estado anterior después de percibir un error en la operación.

– “Principio de esfuerzo proporcionado”

• Si un efecto es difícil de deshacer, también debe ser más difícil de llevar a cabo.

Usabilidad: Solidez

�Tiempo de respuesta.

– Debe ser el menor posible.

– Es necesario informar al usuario de que el sistema ha recibido la petición y está realizando la tarea.

�Adecuación de tareas.

– Hace referencia al grado en que el sistema soporta todas las tareas que el usuario desea hacer y la manera en que las comprende.

– El mensaje “esto será soportado en posteriores versiones” es frustrante para el usuario.

Page 10: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 10

IHC es multidisciplinario

Interacciónhombre

computadora

Ciencias de la computación

Diseño GraficoCiencias de la información

BibliotecaDocumentaciónErgonomía

Psicología

SociologíaAntropologíaEtnografía

Factores organizativos Interfaz del usuario

Interfaz del usuario

Interfaz del usuarioFactores del entorno, Salud / SeguridadConfort

Factores organizativosFactores cognitivos

Fuente: Granollers, Lores, Cañas (2005) y Carreras (2007) y propio

IHC es multidisciplinario

� Psicología.

– Estudia el comportamiento y los estados de la conciencia de un individuo.

– En la IHC permite estudiar la forma en la que los individuos perciben los objetos y procesan la información que reciben.

– Permite evaluar y determinar el grado de satisfacción de las interfaces.

– Se utiliza en las fases de:

• Análisis de requisitos.

– Conocer el modelo mental de los individuos, es decir cómo perciben ellos la tarea que se ha de realizar.

• Diseño.

– Para plasmar ese modelo mental en el sistema, por ejemplo utilizando las metáforas adecuadas

IHC es multidisciplinario

� Ergonomía.

– Estudia las condiciones de adaptación recíproca de la persona con su actividad y las herramientas que utiliza.

• Estudia las características físicas de la interacción: entorno de trabajo, condiciones ambientales, características físicas de los mecanismos de interacción.

– Permite estudiar:

• Organización de los controles y las pantallas.

• El uso de los colores.

• Aspectos de salud que afecten a la calidad de la interacción y a las restricciones de los usuarios.

• El entorno físico de la interacción.

– Se utiliza en las fases de:

• Análisis de requisitos, mediante el estudio del entorno de interacción.

• Diseño, para decidir la organización de los controles y las pantallas, colores, etc.

• Lanzamiento, para evaluar si se han cumplido las normas ergonómicas y adecuarse a los imprevistos.

Page 11: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 11

IHC es multidisciplinario

� Ciencias de la computación.

– En los productos basados en software, dan las bases para la construcción material de la interfaz.

– En la IHC se utilizan distintos aspectos de la computación:

• Ingeniería de software.

– Da las bases metodológicas y proporciona los procesos para construir el producto software.

– Materializa las especificaciones técnicas y dan las pautas para la codificación de cada una de las partes.

– Se aplica en todas las fases del desarrollo.

• Programación.

– Normalmente, para la codificación de interfaces gráficas, orientada a objetos y guiada por eventos.

– Se aplica en las fases de diseño (creación de prototipos) e implementación.

• Inteligencia artificial.

– Para el diseño de programas que simulen el comportamiento humano (tutoriales, sistemas expertos, interfaces guiadas por el habla…).

– Se utiliza en todas las fases siempre que el sistema requiera ese tipo de funcionalidad.

IHC es multidisciplinario

� Diseño gráfico y Ciencias de la Información.

– El diseño gráfico creará objetos “bellos y útiles”. Concepción de un objeto destinado a su producción en serie.

– Las ciencias de la información permiten organizar el contenido visualmente para que sea fácilmente asimilable (jerarquía, disposición, etc.).

– Un buen diseño gráfico de pantallas, iconos, etc. conseguirá interfaces que no producirán un rechazo al usuario y facilitará el uso de los elementos, al tiempo que una buena organización jerárquica de los elementos facilitarán la interpretación de la información mostrada.

– El diseño gráfico y las ciencias de la información se utilizarán en el diseño de la información.

– Se utiliza en las fases de:

• Diseño, al tener que proporcionar la visualización al usuario de los elementos propuestos para el diseño del sistema, establecer el aspecto de las metáforas utilizadas, el estilo gráfico de la aplicación, su consistencia con la imagen corporativa de la empresa, etc.

IHC es multidisciplinario

� Documentación.

– Estudia los procesos informativos desde la producción de información, hasta que el usuario la convierte en conocimiento.

– En IHC es especialmente importante desde la perspectiva de la Arquitectura de la Información (AI):

• El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información (Richard Saul Wurman, 1975).

• La arquitectura de la información se encarga del...

– El diseño estructural en entornos de información compartida.

– Organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y encontrabilidad (findability).

» Capacidad de ser encontrado tanto por usuarios como por sistemas de información y facilidades de navegación de la aplicación para encontrar la información

– Se utiliza en las fases de:

• Análisis de requisitos para averiguar cuál será la estructura de la información que se deberá mostrar.

• Diseño, para desarrollar distintos aspectos de la interfaz (búsquedas, navegación, categorías de ítems, etc.).

• Lanzamiento, para evaluar aquellos aspectos relacionados con la búsqueda de información, clasificación, categorización, etc.).

Roles en un IU

Operador

Núcleo Funcional

Software de la IU

Look&Feel

Sistema Interactivo

Requeri-mientos Diseñador

NFDiseñador software IU

Implem. Herram.

Herram.Construcc.

Diseñador SI

Especif.Tareas Diseñador

IU

Roles en un IU

� “Operador” / “usuario” / “usuario final”

• Persona que utilizará el sistema interactivo.

� “Diseñador del sistema”

• Desarrolla la arquitectura global de un SI

– Especifica las tareas que serán efectuadas dentro de cada módulo

� “Diseñador de la interfaz a usuario”

• Define la IU con la cual interactuará el operador

– Utiliza la especificación de tareas

• Necesita comprender:

– Tareas a ser resueltas

– Necesidades del operador

– Costos y beneficios de las UI particulares

» En términos del operador y los costos de implementación y mantenimento

Roles en IU

� “Diseñador del núcleo funcional” o “programador de la aplicación”

• Crea la estructura de software necesaria para implementar las tareas semánticas de la aplicación (no incluidas en la IU)

� “Diseñador del software de la interfaz a usuario”

• Diseña la estructura del software que implementará la interfaz definida por el diseñador de la IU.

� “Desarrollador de herramientas”

• crea herramientas para la construcción de interfaces

�No todos los actores se encuentran presentes en el proceso de desarrollo de un SI

Page 12: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 12

¿por qué diseñadores IU?

– Producen interfaces con menos errores

– Interfaces permitiendo una ejecución más rápida

– Los programadores no piensan de igual forma que los operadores

• Los programadores poseen un modelo del sistema, no un modelo del usuario

– Diferentes clases de interfaces y problemas

� Pueden trabajar conjuntamente con:

– Usuarios

– Programadores

– Diseñadores del sistema

– Especialistas en diseño gráfico, factores humanos, sicología, etc..

Ciclo de Diseño UI

Interfaz

Ciclo Iterativo

Diseño

Prototipeo

Evaluacion

¿Cómo diseñar y contruir UI’s?

�Ciclo de diseño

– Análisis de tareas

– Prototipeo rápido

– Evaluación

– Iteración

Análisis de tareas

�Análisis– Definir la tarea u objetivo del programa

– Elegir la plataforma y los mecanismos de interacción

– Caracterizar el usuario promedio

�Diseño “Conceptual”– Definiciones y primeros bocetos

– Selección de metáforas

Prototipeo rapido

�Estructurar un diseño en papel

– O mas ¡¡

�Tecnicas de prototipos de baja fidelidad

– Papel sketchs

– Cortar, copiar y pegar

�Herramientas de prototipeos

– Flash, Javascripts

�Estructuradores de IUS

– Interface Builder, Visual Studio, NetBeans

Evaluacion

�Evaluación analítica

– Sin usuario

�Pruebas con usuarios reales

�Técnicas de bajo costos

– Heurística

– Recorrido cognitivo

�Alto costo

– Pruebas de usabilidad en laboratorios

Page 13: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 13

Origenes de la disciplina

� La IPO nace de una rama de la psicología aplicada que estudia la forma de trabajar de las personas:– Human factors (EEUU).– Ergonomía (Europa).

� Hacia los años 60 se comienza a tomar conciencia de los problemas que deberían resolverse para facilitar la utilización de los ordenadores por parte de las personas.– Licklider (1960)

• Crear un sistema de E/S para la comunicación utilizando gráficos y datos simbólicos.• Desarrollar sistemas interactivos en tiempo real (se trabajaba en batch).• Sistemas que faciliten la cooperación de las personas en el desarrollo de grandes sistemas.• Reconocimiento de voz y de la escritura manual.• Comprensión del lenguaje natural.

– ● Hansen (1971), primera enumeración de principios de diseño de sistemas interactivos.• Conocer al usuario.• Minimizar la memorización, sustituyendo la entrada de datos por la selección de elementos.• Optimizar las operaciones basándose en la observación del uso del sistema.• Facilitar buenos mensajes de error, prevenir los errores (de entrada de datos), posibilitar la

recuperación de errores (deshacer).

Origenes de la disciplina

� Años 70

– Computadoras manejados por personal especializado.

– Prima la eficiencia del sistema más que el tiempo de aprendizaje.

� Años 90

– La popularización acerca a la población al uso del computador

– El computador no es una herramienta en si mismo, sino que se usa en el trabajo diario.

– Es necesario dotar a los sistemas de mecanismos que faciliten la relación con el usuario y mejoren la productividad.

Origenes de los sistemas de interaccion

� Sistemas primitivos de interacción.

– La entrada/salida se realizaba mediante cintas o tarjetas perforadas y teleimpresoras.

– Sistemas de procesamiento por lotes.

� Años 60: sistemas de tiempo compartido mediante terminales en modo texto.

– Interfaz de línea de órdenes.

– Flexibles y veloces para usuarios avanzados.

GUIs de Escritorio

Aplicaciones webs Escritorio 3D

Page 14: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 14

Dispositivos móviles IU basadas en el uso del lápiz

IU en paredes La interfaz del usuario

* Para que una interfaz de usuario sea efectiva se debe sustentar sobre la idea de affordance.

– Las cosas deben sugerir por su forma u otrosatributos qué se puede hacer con ellas.

�Para ello se debe centrar en dos conceptos:

– Visibilidad. El objeto debe ser visible para elusuario de forma que se pueda interactuarfácilmente con él.

– Evidencia. La funcionalidad del objeto y sumodo de uso deben ser evidentes.

Visibilidad / Evidencia .. Ergonomia

�Estudia las características físicas de la interacción: entornode trabajo, condiciones ambientales, características físicasde los mecanismos de interacción.

�Permite estudiar.

– Organización de los controles y las pantallas.

– agrupación funcional. Se agrupan controles funcionalmente relacionados.

– Agrupación secuencial . Se agrupan los controles reflejando el orden de uso en una interacción típica.

– Por frecuencia . Se agrupan los controles por la frecuencia de uso. Los más utilizados deben ser los más fácilmente accesibles.

Page 15: C1 introduccion diu_sm_2012_1_mododecompatibilidad_

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 15

Ergonomía Ergonomia ..

�Permite estudiar también:

– Aspectos de salud que afecten a la calidad de la interacción y a las restricciones de los usuarios.

– El entorno físico de la interacción.

– El uso de los colores.

• Tan diferentes como sea posible.

• Fácilmente distinguibles al margen de la luz ambiental o los defectosvisuales del usuario.

Comentarios en contra de la usabilidad

� Los usuarios no necesitan mejores interfaces sino un entrenamiento mejor.

� La usabilidad es subjetiva —no se puede medir.

� El diseño de la interfaz de usuario está implícito en el diseño del software. No se tiene que planificar expresamente y valorar su coste.

� Si el diseñador esta familiarizado con guías de estilo y principios de diseño, se harán buenas interfaces.

� El diseño de la interfaz de usuario no es necesario hasta el diseño detallado.

� La usabilidad aumenta los costes de desarrollo y el tamaño del ciclo de desarrollo.

Conclusiones

�La IHC es una disciplina bien asentada

�La interfaz es un concepto amplio y en la que hay que tener en cuenta todo el entorno

�Acceso para todos

�La usabilidad como objetivo fundamental

�La interdisciplinariedad de la IHC

�Diseño centrado en el usuario