Interfaces de Usuario

Usabilidad y Accesibilidad
http://sm.ingenieriamultimedia.org/doku.php

Tema 2

Interfaces de Usuario

Definicin
Interfaz (RAE)
(Del ingl. interface, superficie de contacto). 1. f. Inform. Conexin fsica y funcional entre dos aparatos o sistemas independientes. Conexin e interaccin entre hardware, software y el usuario Conjunto de componentes empleados por las personas para comunicarse con las computadoras Sistema que permite a las personas interactuar con las mquinas
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Interfaz de usuario (interfaz hombre-mquina)

Tema 2

Interfaces de Usuario

Introduccin
No existe una interfaz nica para todos los usuarios y todas las tareas En el mbito de la informtica las interfaces de usuario son uno de los componentes clave del desarrollo software
Consumen mucho tiempo de desarrollo Mucha repercusin en el xito de un sistema

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Comunicacin Hombre Mquina

Diseo de interfaces de usuario

Ingeniera de Software

Interfaces de Usuario

Disciplina relacionada con el diseo, implementacin y evaluacin de sistemas informticos interactivos para ser usados por personas, y con el estudio de los fenmenos ms importantes que estn involucrados
Universidad de Alicante

Arte

Ergonoma

Psicologa

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Clasificacin

Interfaz Hardware
Dispositivos Perifricos

Interfaz Software
Procesos y herramientas de control
Usabilidad y Accesibilidad

Universidad de Alicante

Grado en Ingeniera Multimedia

Tema 2

Interfaces de Usuario

Arquitectura
Interfaz de aplicacin

Aplicaciones Sistema Operativo Hardware

Interfaz de usuario

Perifricos

Entrada Salida
Universidad de Alicante Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Perifricos de interfaz
Perifricos de interfaz Entrada Salida Entrada/Salida

Contacto

Sonoro

Imagen

Visuales

Sonoros

Contacto

Teclado

Micrfono

Cmara

Monitores/Pantallas

Altavoces

Lnea braille

Pantallas tctiles

Ratn

Escner

Impresoras

Auriculares

Dispositivos de realidad virtual

Joystick

Proyectores

Tabletas/Lpices

Luces / Leds

Mandos

Paneles

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Evolucin
Las interfaces han evolucionado en funcin de los dispositivos de interaccin y de los sistemas operativos

Lnea de comando

Basadas en mens

Grficas

Orientadas a objetos

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces textuales
Interfaces de lnea de comandos (CUI, command-line user interfaces) Estilo ms antiguo de interaccin hombre-mquina Populariz el binomio teclado/pantalla El usuario utiliza rdenes encaminadas a realizar una accin
Universidad de Alicante Grado en Ingeniera Multimedia

Solicitud de comando (prompt) Comando+Argumentos

Ejecucin Respuesta

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces textuales
Uso de un lenguaje formal con un vocabulario y una sintaxis propia Ventajas
Potente Flexible Controlado por el usuario

Inconvenientes
Carga de memoria del usuario Usuarios expertos
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces de mens
Sistema precursor de las interfces grficas Los mens permiten seleccionar elementos que indican acciones
Eliminan la necesidad de memorizar No requiere usuarios expertos

Estruccturacin jerrquica de los elementos Tipos:

Mens de barra Mens desplegables Mens en cascada
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces de mens
Comienza la inclusin del ratn Ventanas primitivas Accesos directos Controles de dialogo y edicin
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces grficas
Interfaces grficas (GUI, graphical user interfaces) Proporciona al usuario las herramientas visuales para realizar las operaciones Permite manipular los objetos e informacin de la pantalla, no slo presentarla

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Interfaces grficas
Caractersticas
Incorpora un monitor grfico. Posee un dispositivo apuntador/sealador (tpicamente un ratn). Promueve la consistencia de la interfaz entre programas. Los usuarios pueden ver en la pantalla los grficos y textos tal como se vern impresos (WYSIWYG What you see is what you get). Permite la transferencia de informacin entre programas. Se puede manipular en la pantalla directamente los objetos y la informacin. Provee elementos de interfaz estndar como mens y dilogos. Existe una muestra visual de la informacin y los objetos (iconos y ventanas). Proporciona respuesta visual a las acciones del usuario. Existe informacin visual de las acciones y modos del usuario/sistema (mens, paletas). Existen controles grficos para la seleccin e introduccin de la informacin. Permite a los usuarios personalizar la interfaz y las interacciones. Proporciona flexibilidad en el uso de dispositivos de entrada (teclado/ratn).
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Interfaces grficas
Historia / evolucin
1973: Xerox Alto
Primer ordenador personal Incluye un escritorio Ventanas, iconos, carpetas

1981: Xerox Star 8010

1983: Apple Lisa 1984: Apple Macintosh 1985: Microsoft Windows 1.0 1987: OS/2 (IBM) 1987: Microsoft Windows 2.0 1990: Microsoft Windows 3.0
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Interfaces grficas
Sistemas operativos de Escritorio (Datos del 2012)
Windows (91,77 %) Mac OS X (7,13 %) Linux (1,10 %)

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Estilo de iteracin
Las GUI utilizan principalmente el estilo objeto-accin (nombre, luego verbo)
Primero se selecciona el/los objeto(s) Luego se especifica la accin (contextual)
Accin-Objeto
Interfaces textuales/mens

Objeto-Accin
Interfaces grficas

Centran el foco de atencin del usuario en el objeto

Ms natural y prximo a su modelo mental
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces orientadas a objetos

Interfaces de Usuario

Interfaces orientadas a objetos (OOUI, object oriented user interfaces)

Son una evolucin de las GUI
GUI
Orientadas a la aplicacin

OOUI
Orientadas al objeto

El estilo de interaccin de es estrictamente el de objeto-accin No hay aplicaciones slo objetos con los que interactuar Estilo condicionado por la programacin orientada a objetos
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

GUI vs OOUI
Interfaces orientadas a la aplicacin La aplicacin consiste en un icono, una ventana principal y varias secundarias Los iconos representan aplicaciones o ventanas abiertas Interfaces orientadas a objetos El producto consiste en una coleccin de objetos que cooperan y vistas de dichos objetos Los iconos representan objetos que se pueden manipular directamente Los usuarios abren objetos como vistas en el escritorio

Los usuarios deben abrir una aplicacin antes de trabajar con objetos Proporciona al usuario las funciones necesarias para realizar Proporciona al usuario los materiales necesarios para realizar las tareas las tareas Se centra en la tarea principal determinada por la aplicacin Se centra en las entradas y salidas de los objetos y tareas Las tareas relacionadas son soportadas por otras aplicaciones Estructura rgida: funcin Los usuarios deben seguir la estructura de la aplicacin Se requieren muchas aplicaciones: una por tarea

Las tareas relacionadas son soportadas por el uso de otros objetos Estructura flexible: objeto Los usuarios pueden realizar tareas a su propio gusto Se requieren pocos objetos, que se reutilizan en muchas tareas

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Nuevas interfaces
Bsqueda de interfaces ms naturales
Ms cercanas a la realidad Eliminacin de perifricos de contacto

Realidad virtual Interfaces gestuales

Juegos / videoconsolas

Interfaces naturales
Interaccin mediante la voz

Sistemas tctiles
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas
Mediante una metfora los conocimientos aprendidos en un dominio se pueden trasladar a otro

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas
Las metforas permiten comunicar conceptos de una forma sencilla y entendible Es una herramienta muy utilizada en las interfaces de usuario Aumentan la usabilidad de los sistemas informticos Basadas en la asociacin de conceptos y en la intuicin
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas
Objetivos
Hacer las tecnologas invisibles al usuario El usuario no necesita ningn esfuerzo o proceso de aprendizaje

Ventajas
Aprendemos ms fcilmente

Inconveniente
Las diferencias entre los dominios pueden producir errores o incomprensin
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas visuales
Escritorio
Fue la primera metfora global Est muy extendida Reproduce una oficina con todos sus objetos

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas visuales
Controles

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas visuales
Papelera de reciclaje
Metfora compuesta

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas visuales
Web

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Metforas
Algunas metforas son difciles de asimilar
Cortar/Copiar/Pegar

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Diseo de metforas
Definicin funcional

Analizar cmo funciona aquello que se va a modelar con la metfora Anlisis de requisitos Anlisis de tareas

Identificacin de problemas

Analizar la forma en la que los usuarios realizan las tareas Dificultades que encuentran los usuarios

Generacin de la metfora

Encontrar un dominio similar con el que aplicar la metfora Estudiar el grado de coincidencia y las diferencias que existen Elegir la representacin grfica ms adecuada

Estudiar la usabilidad y adecuacin de la propuesta

Evaluacin

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Factores Humanos

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Factores Humanos
Sistemas interactivos importancia del dilogo con el usuario Interfaz percepcin que el usuario posee de una aplicacin El usuario no est interesado en la estructura interna de una aplicacin, sino en cmo usarla Fundamental conocer los factores humanos de la interaccin
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Modelo de comunicacin
Ordenador Dispositivos Salida
percibir INTERFAZ

Dispositivos Entrada
actuar

Sensores Memoria sensorial

atencin

Efectores
rendimiento

recordatorio

Memoria de Trabajo
elaboracin recuperacin

Memoria de Largo Plazo

Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Percepcin
Percibir: Recibir por uno de los sentidos las imgenes, impresiones o sensaciones externas La percepcin es la accin fundamental para la interaccin Se realiza mediante los sentidos
Vista Odo Tacto Gusto Olfato
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Percepcin visual
En los hombres la percepcin visual es la principal fuente de informacin Proceso de la visin:
Recepcin fsica del estmulo Interpretacin del estmulo

Componentes principales:
Color Tamao y profundidad ngulo visual
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Color
Podemos distinguir unos 7 millones de colores, pero se identifican muchos menos El ojo percibe caractersticas de la luz
Tono / Matiz Saturacin / Intensidad Valor / Brillo
Universidad de Alicante

Tono / Matiz

Color
Valor / Brillo Saturacin / Intensidad

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Color: Tonalidad
La tonalidad o matiz indica el estado puro del color: rojo, azul, verde, Hace referencia a la longitud de onda dominante

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Color: Saturacin
La saturacin o intensidad hace referencia a la pureza o viveza de un color Un color saturado es un color puro o vivo Cuanto ms gris tiene un color menos saturado est

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Color: Brillo
El brillo o valor indica lo claro u oscuro que es un color La agudeza visual mejora con la luminancia, pero cuando es muy elevada se incrementa el parpadeo Debe tenerse en cuenta que el usuario trabaja en un ambiente luminoso que influye en cmo se ve la informacin presentada en la interfaz
Ms brillo color claro Menos brillo color oscuro

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Psicologa del color

Los colores producen respuestas emocionales en las personas Es un elemento subjetivo a la hora de disear Incorporan significado

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Clidos / Fros

Colores Clidos
Atraen la atencin Son fuertes y agresivos Estimulan

Colores Fros
Calma y relajacin Seriedad Distanciamiento

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Claros / Oscuros

Colores Claros
liviandad descanso suavidad fluidez

Colores Oscuros
Seriedad Madurez

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Recomendaciones
Recomendaciones generales
Elegir combinaciones de colores compatibles. Evitar las combinaciones de colores opuestos: rojo-verde, azul-amarillo, verde-azul, rojo-azul Usar altos contrastes de color entre la letra y el fondo Limitar el nmero de colores (4 - 7) Usar azul claro slo para las reas de fondo Usar el blanco para la informacin perifrica Usar cdigos redundantes (formas adems de colores) Usar blanco, cian o verde con fondos oscuros Evitar colores muy saturados
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Recomendaciones para las pantallas

Universidad de Alicante

Tema 2

Interfaces de Usuario

Problemas
No se debe abusar del color como medio de codificacin porque los problemas de visin del color son muy comunes
El 8% de los hombres y el 1% de las mujeres tienen algn problema de visin del color
Tipo Tricrmata Dicromtico Protanopa Dicromtico Deuterpata Tritanopa Monocrmata
Universidad de Alicante

Descripcin Visin cromtica normal Insensible al rojo Insensible al verde Insensible al azul y amarillo Sin visin del color
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Percepcin / Atencin
El usuario recibe ms informacin de la que puede procesar al mismo tiempo (percepcin) La atencin funciona como un filtro que restringe la informacin que va a ser analizada en cada momento Hay una estrecha relacin entre percepcin y atencin Qu determina la atencin del usuario?
El ambiente: estmulos llamativos (imagen con colores brillantes) El propio usuario: las personas no rastrean la totalidad de la imagen sino que se centran en las reas de alto contenido informativo e ignoran otras
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Percepcin / Atencin
Conocimiento a travs de imgenes: uso de iconos Los iconos permiten un acceso directo y rpido a la informacin Recomendaciones:
Mnima diferencia entre el objeto real y el objeto representado Presentar en la misma posicin en todas las pantallas Fcilmente distinguibles del resto de iconos Evitar que tengan varias interpretaciones
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Percepcin texto
Leemos alrededor de 250 palabras por minuto en buenas condiciones La velocidad a la que leemos el texto es una medida de su legibilidad Los mejores tipos de letras estn entre 9 y 12 puntos La longitud de las lneas debe estar entre 6 y 13 cm Leemos mejor
Tipografas sans-serif en pantalla Tipografas serif en papel
Universidad de Alicante Grado en Ingeniera Multimedia

n n

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Sonido
El sonido es la propagacin de ondas en el aire captadas por el odo Permite la identificacin de la posicin de un objeto En las interfaces se utilizan
Individualmente para ofrecer informacin Como soporte o refuerzo de una informacin visual o de una accin

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Modelo de memoria
Ordenador Dispositivos Salida
percibir INTERFAZ

Dispositivos Entrada
actuar

Sensores Memoria sensorial

atencin

Efectores
rendimiento

recordatorio

Memoria de Trabajo
elaboracin recuperacin

Memoria de Largo Plazo

Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Memoria sensorial
La informacin llega a nuestros sentidos de forma continua y muy rpida
Mucha informacin Poco tiempo para procesarla

Los canales sensoriales tienen asociados memorias donde la informacin se almacena por cortos perodos de tiempo (milsimas de segundo)
Retienen la informacin para que pueda ser transferida a la memoria de trabajo antes de que desaparezca
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Memoria sensorial
Acta como buffer de los estmulos recibidos a travs de los sentidos Existen tantas memorias sensoriales como sentidos tenemos, y se actualizan constantemente Las que mejor conocemos actualmente son
Memoria Icnica, ligada al canal visual Memoria Ecoica, ligada al canal auditivo
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Memoria de trabajo
Conjunto de smbolos activos en un momento determinado a los que estamos prestando atencin, y que por tanto podemos manipular mediante control voluntario Los smbolos con los que se est trabajando se mantienen en ella mientras que los estemos usando y prestando atencin Ejemplos:
Recordar un nmero a marcar Realizar una operacin aritmtica
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Memoria de trabajo
Caractersticas
Acceso rpido, 70 mseg Rpida decada (se mantiene unos 200 ms) Baja capacidad Capacidad variable segn la persona Puede mejorarse mediante entrenamiento

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Memoria a largo plazo

La memoria a largo plazo almacena todo nuestro conocimiento Caractersticas
Gran capacidad (casi ilimitada) Acceso ms lento (1/10 s) Las prdidas ocurren ms lentamente

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos Interactivos

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Las interfaces de usuario se componen de diversos elementos interactivos que permiten al usuario utilizar el sistema Los usuarios estn habituados a estos elementos
Universidad de Alicante Elementos interactivos Contenedores Entrada / salida Informativos

Ventana

Botn

Icono

Barra de herramientas

Men

Barra de estado

Paneles

Listas

Barra de progreso

Cuadro de texto

Barra de desplazamiento Usabilidad y Accesibilidad

Grado en Ingeniera Multimedia

Tema 2

Interfaces de Usuario

Elementos interactivos
Ventanas
Usadas para la visualizacin, jerarquizacin y navegacin de la informacin (documentos, aplicaciones, iconos,) Pilar fundamental de la multitarea a nivel de interfaz Se comportan como objetos que pueden ser:
Abiertas Cerradas Movidas Escaladas Ampliadas (zoom) Navegadas (scrolling )
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Elementos interactivos
Barra de tareas / herramientas
Agrupa conos con los cuales es posible acceder a determinadas herramientas o funciones en una aplicacin

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Paneles (sidebar)
Permiten mostrar diferentes formas de informacin en un lado de una aplicacin o el escritorio

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Botones
Objeto de control que posibilita introducir un dato simple o de confirmacin al sistema Tipos
De relieve:
Metfora de un botn/pulsador fsico Usado para realizar acciones

De opcin (radio)
Permiten seleccionar un nico elemento de entre un conjunto

De confirmacin (check box)

Permiten seleccionar varias opciones
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Menus
Listas de comandos, atributos, o cualquier tipo de elementos (items), agrupados de forma estructurada Agrupan mucha informacin en poco espacio Inscritos en barras de mens Estado de los items
Activo: se puede pulsar Inactivo: no se puede pulsar Seleccionado: tiene el foco Activado: en el momento que se pulsa Pulsado: fue activado anteriormente

Tipos

Contextuales: dependientes de un objeto Navegacin: puede realizarse sobre ellos scroll Jerrquicos: items en forma de rbol
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Elementos interactivos
Listas
Permite a los usuarios seleccionar una o ms opciones de una lista

Puede ser desplegable (slo una opcin)

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Campo de texto
Usado para introducir texto en aplicaciones Indican en qu lugar del interfaz puede ser usado el teclado Incluye un cursor donde se especifica el punto de entrada de texto

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Barras de desplazamiento
Barra horizontal o vertical con dos extremos con flechas y que suelen ubicarse en los extremos de un cuadro (ventana, campo,) Permiten desplazar el contenido del cuadro hacia un lado u otro

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Iconos
Signos esquemticos que representan algn tipo de fichero, carpeta, aplicacin, dispositivos, Son reconocidos ms fcilmente que las indicaciones textuales Tienen un carcter internacional Transmiten conceptos en espacios reducidos

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Elementos interactivos
Barra de estado
Informacin sobre la aplicacin

Barra de progreso
Indica el avance de una tarea

Etiquetas
Informacin textual explicativa
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Diseo centrado en el usuario

Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Diseo centrado en usuario

Disear trabajando con los usuarios finales
Ayuda a definir qu tiene que hacer el sistema y qu no Requiere mucha interaccin, exploracin y retroalimentacin

Pensar en el sistema en trminos del usuario

Usuario Cliente

Entender el proceso de trabajo

Puntos de interaccin entre personas y mquinas

No est centrado en la tecnologa centrado en el usuario

Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Diseo centrado en usuario

Hay un alto nivel de proyectos que fallan
Incompletos por restricciones temporales o presupuestarios Completos pero difciles de aprender y usar

Solucin: una buena interfaz

Productos fciles de aprender y usar se venden mejor Ayuda a terminar en producto en plazo estipulado Reduce costos de entrenamiento Mejora la facilidad de uso
Universidad de Alicante Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Diseo centrado en usuario

Factores humanos a evaluar
Tiempo de aprendizaje Velocidad de desempeo Tasa de errores
Cunto tiempo toma aprender las tareas? Cunto tiempo toma para realizar las tareas? Cuntos errores y de qu tipo se hacen normalmente en tareas tpicas? Cuanto tiempo recuerdan los usuarios el manejo del sistema despus de un tiempo? Cun contentos estn los usuarios con el sistema?
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Retencin en el tiempo Satisfaccin

Universidad de Alicante

Tema 2

Interfaces de Usuario

Principios de diseo
Perfiles de usuarios
Principiantes o usuarios por primera vez Usuarios expertos intermitentes Usuarios expertos frecuentes Edad, sexo y habilidades fsicas Educacin y fondo cultural o tnico Entrenamiento Motivacin y metas Personalidad

Caractersticas del usuario

Perfiles de tareas

Frecuencias de uso Tareas por perfiles de usuarios (roles)

Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Reglas de diseo
Permitir uso de accesos directos para usuarios frecuentes
Abreviaciones, atajos y claves especiales Comandos ocultos y facilidades de macros

Reforzar consistencia
Es la regla que ms se incumple Terminologa Sugerencias Mens Ayuda en pantalla Estilo, color, capitalizacin y fuentes
Grado en Ingeniera Multimedia Usabilidad y Accesibilidad

Universidad de Alicante

Tema 2

Interfaces de Usuario

Reglas de diseo
Ofrecer retroalimentacin informativa

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Reglas de diseo
Disear dilogos para completar tareas
Conjunto de acciones deben organizarse secuencialmente Asistentes

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Reglas de diseo
Ofrecer prevencin del error y manejo del error simple

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Reglas de diseo
Permitir gestin bsica de acciones de forma sencilla
Deshacer acciones Rehacer acciones Descartar cambios

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Reglas de diseo
Informar sobre el estado o el desarrollo de acciones

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Tema 2

Interfaces de Usuario

Reglas de diseo
Reducir la carga de memoria de corto plazo
Dar la informacin apropiada en los sitios y momentos adecuados

Universidad de Alicante

Grado en Ingeniera Multimedia

Usabilidad y Accesibilidad

Interfaces de Usuario

Usabilidad y Accesibilidad
http://sm.ingenieriamultimedia.org/doku.php