INTERFACES DE USUARIO

Transcripción

1 INTERFACES DE USUARIO Contenidos Introducción El proceso de diseño de interfaces de usuario Principios de gestión del diseño Selección de elementos de interfaz Selección de medios Inclusión de aspectos socio-culturales

2 Ejemplos iniciales Interfaz de usuario Parte del sistema informático y su software que la gente puede ver, oír, tocar, hablar a, etc Componentes Entrada: cómo una persona comunica sus necesidades al sistema (teclado, ratón, pantalla táctil, voz) Salida: cómo un sistema informático muestra sus resultados al usuario (pantalla, voz, sonido) olfato, tacto?

3 Interfaz de usuario Mezcla de mecanismos bien diseñados de entrada y salida para satisfacer las necesidades, capacidades y limitaciones de los usuarios de la forma más efectiva. No debe ser el centro de atención, sino permitir hacer las tareas cómodamente Importancia de un buen diseño Por qué no se hacen buenos diseños? No nos importa? No tenemos sentido común? No tenemos tiempo? No sabemos qué hace ser bueno a un diseño? Identificación de interfaz y sistema Efectos sobre el desempeño profesional

4 Repaso histórico Repaso histórico al diseño de pantallas (I) Años 70: Pantallas con muchos campos ininteligibles. Comandos tecleados. Necesidad de manuales. Mensajes ambiguos.

5 Repaso histórico al diseño de pantallas (II) Años 80: Etiquetas significativas. Comando ejecutados mediante teclas de función. Mensajes más claros. Repaso histórico al diseño de pantallas (III) Años 90: Uso de gráficos. Grupos, botones, menús, formato, estilo.

6 Repaso histórico al diseño de pantallas (IV) Actualidad: Componentes multimedia, orientación al web, aspecto socioculturales. Objetivos que nos marcamos Comprender qué se debe aplicar en el proceso de diseño de interfaces y pantallas Comprender cómo emplear una metodología de diseño de interfaces efectiva Identificar los componentes de interfaces y pantallas gráficos y web Organizar los componentes efectiva y eficientemente Inclusión de aspectos socio-culturales Correcta elección de colores e iconos Desarrollo de interfaces de usuario y su evaluación

7 Características de los interfaces de usuario Interfaz gráfico de usuario (GUI) Interfaz web de usuario GUI: Definición Colección de técnicas y mecanismos para interaccionar con algo (interfaz de usuario) Mecanismo de interacción principal es un dispositivo apuntador de cualquier tipo (interfaz gráfico) Dispositivo mano Algo objetos

8 GUI Objetos: pueden ser vistos, oídos, tocados o percibidos de cualquier otra forma. visibles al usuario para realizar tareas Acciones acceso y modificación sobre objetos comportamientos estándar como resultado Manipulación directa Sistema como extensión del mundo real El entorno de trabajo trasladado a una pantalla Entornos familiares Visibilidad continua de objetos y acciones Acciones rápidas e incrementales con visualización de resultados Reversibilidad de acciones incrementales

9 Manipulación indirecta Operaciones que no se puede hacer directamente por: Dificultad de conceptualización gráfica Capacidad gráfica del sistema limitada Cantidad de espacio disponible para los controles de manipulación limitada Dificultad para aprender y recordar todas las operaciones Ej: uso de menús Ventajas de los sistemas gráficos (I) Se reconocen antes los símbolos que el texto Aprendizaje más rápido Uso y resolución de problemas más rápido Facilidad para recordar Naturalidad Explotación de factores visuales y espaciales Centran el pensamiento Proporcionan contexto Menos errores

10 Ventajas de los sistemas gráficos (II) Mayor sensación de control Información inmediata Respuestas previsibles Acciones fácilmente reversibles Menos ansiedad respecto al uso Más atractivo Ahorro de espacio en pantalla Independiente de idioma Posibilidad de añadir texto No hay que saber teclear Para quién son estas ventajas? Desventajas de los sistemas gráficos (I) Mayor complejidad de diseño Aprendizaje también necesario Falta de guías de diseño Inconsistencias en técnica y terminología Presencia del dominio de trabajo Posible falta de familiaridad Limitaciones de comprensión humana Requerimiento de manipulación de ventanas Limitaciones de producción

11 Desventajas de los sistemas gráficos (II) Menor existencia de iconos probados Ineficiencia para mecanógrafos Ineficiencia para usuarios expertos No siempre es el estilo de interacción preferido No siempre la forma más rápida de interacción Aumento de posibilidades de confusión Distracciones Mayor consumo de espacio en pantalla Limitaciones de hardware Para quién son estas desventajas? Algunas conclusiones iniciales El diseño del interfaz (y no el estilo de interacción) determina su usabilidad Se deben considerar las preferencias de usuario al elegir estilo de interacción En muchos casos, las palabras son más significativas para los usuarios que los iconos El contenido de una pantalla gráfica es crítica para su utilidad El éxito de un sistema gráfico depende de la capacidad de los diseñadores para seguir los principios de usabilidad

12 Características del GUI Presentación visual sofisticada Interacción elegir y seleccionar Conjunto restringido de opciones de interfaz Visualización Orientación a objetos Uso de la capacidad de reconocimiento de las personas Realización concurrente de funciones Presentación visual sofisticada Reflejar mundo real en la pantalla Elementos Líneas, dibujos, iconos Fuentes, tamaños, estilos, colores Animaciones, fotos, vídeo Organización Ventanas Menús Controles

13 Interacción elegir y seleccionar Identificación (elección) del objeto sobre el que realizar la acción Selección del objeto mediante ratón o puntero rápido y de respuesta inmediata mediante teclado Opciones limitadas de interfaz What You See Is What You Get (WYSIWYG) Se muestra en pantalla las opciones disponibles

14 Visualización Proceso cognitivo que permite comprender información difícil de percibir por ser muy voluminosa o abstracta Cambio de representación para mostrar gradualmente la estructura o función del sistema o proceso Mejor método de visualización? Depende de lo que la gente quiere aprender de los datos Mostrar lo más relevante, no necesariamente todo Orientación a objetos (I) Objetos Manipulados como unidad Subobjetos (p.ej., documentos) Clases de objetos Datos Contenedores de objetos Lugar de trabajo (escritorio) Carpeta Área de trabajo (temporal) Dispositivos Tipo y persistencia

15 Orientación a objetos (II) Relaciones entre objetos Colecciones Restricciones Composiciones Contenedor Propiedades o atributos Características únicas Orientación a objetos (III) Acciones Comandos Manipulan objetos Manipulación directa o botón Especificar atributo/propiedad Seleccionar objeto Elegir la acción a aplicar Ejecución

16 Orientación a objetos vs orientación a aplicación Aplicación Se abre la aplicación Se selecciona un objeto Objeto Se escoge un objeto Se selecciona la aplicación Más características GUI Vistas Compuesta: información de objeto y subobjetos Contenidos: listas de objetos Opciones: cambiar propiedades Ayuda Uso de memoria de reconocimiento Más fácil recordar lo que se ha visto Funciones concurrentes Se puede hacer varias cosas al mismo tiempo

17 Interfaz web de usuario Diseño de navegación y presentación de información Contenido, no datos Construir jerarquía de menús y páginas que se usen fácil y naturalmente Dificultades tradicionales del diseño web HTML Navegación back-forward Procesamiento batch de formularios Dificultad de estandarización

18 Similitudes GUI-Diseño Web Diseño software Para personas Interactivos Experiencias visuales a través de pantalla Componentes similares Diferencias GUI- Páginas Web (I) Dispositivos GUI: bien definidos Web: desconocidos a priori Foco de usuario GUI: Datos, aplicaciones, transacciones, procesos bien definidos Web: Información, navegación, back-forward, poco estructurado Datos/información GUI: fuentes fiables, datos privados y compartidos Web: fuentes fiables?, contenidos desconocidos

19 Diferencias GUI- Páginas Web (II) Tareas de usuarios GUI: Instalar, configurar, ejecutar, abrir archivos, familiaridad Web: links, formularios, descargas, navegación, falta de familiaridad Espacio conceptual de usuario: GUI: Controlado y restringido por la aplicación Web: tan ilimitado como desorganizado Elementos de presentación GUI: Ventanas, menús, controles, datos, barras de herramientas, actualización dinámica, diseñado, estandarizado Web: navegador+página, limitaciones de diseño y estandarización Diferencias GUI- Páginas Web (III) Navegación GUI: limitada por diseño y estilo estandarizado, invisible, mediante menús, listas, árboles, etc Web: poco limitada, poco estandarizada, parte del diseño, mediante enlaces, bookmarks, etc Contexto GUI: Rutas de navegación restringidas, múltiples ventanas visibles Web: página como unidad, rutas no restringidas Interacción GUI: menú, botones, listas de selección, copiar/pegar Web: clics

20 Diferencias GUI- Páginas Web (IV) Tiempo de respuesta GUI: Instantáneo Web: Depende de la velocidad de transmisión, contenido de la página, etc Estilo visual GUI: restringido por el entorno de desarrollo, sin mucha personalización Web: más artístico Capacidad del sistema GUI: Capacidad ilimitada proporcional a la sofisticación de hardware y software Web: Restringido por hardware, navegador, deseos del usuario,etc Diferencias GUI- Páginas Web (V) Eficiencia de tareas GUI: tareas específicas para destinatarios específicos Web: quiénes son los destinatarios? Para público general Consistencia GUI: Garantizada por las herramientas y pautas de diseño Web: Cada sitio pretende tener su propia identidad, uso de estándares diferentes, poco seguimiento de las pautas Ayuda a usuario GUI: parte esencial, uso de mecanismos estándares Web: poca ayuda disponible e incrustada en la página

21 Diferencias GUI- Páginas Web (VI) Integración GUI: A nivel de aplicaciones Web: A nivel de funcionalidades (navegación, impresión, etc) Seguridad GUI: Proporcional al grado de inversión Web: Depende de las posibilidades del navegador y del manejo del usuario de las mismas Fiabilidad GUI: Proporcional al grado de inversión Web: Susceptible a problemas causados por usuario, líneas de comunicación, etc Implicaciones del diseño web Tamaño de página Página como entidad global compuesta por piezas cuyas dimensiones varían en función del dispositivo de visualización Degradación del impacto visual Partes no visibles Uso de scroll Implicaciones de diseño Empezar por lo más relevante e indicar esas partes no visibles

22 Implicaciones del diseño web Generación visual de la página Tiempo depende de conexión y contenido Implicaciones de diseño: los usuarios deben recibir los contenidos rápidamente sin que tengan sensación de espera Layout Disposición aproximada en la página Implicaciones de diseño: comprender las restricciones y diseño para las herramientas más comunes Implicaciones del diseño web Resolución de página Lectura en pantalla es más lenta que lectura en papel Implicaciones de diseño: buscar formas sencillas de imprimir documentos web grandes Foco de usuario Sensación de información en la web prácticamente ilimitada y navegable, fácil perderse Implicaciones de diseño: Crear páginas fáciles de escanear y limitar el contenido textual. Proporcionar esquemas descriptivos de la información y de los enlaces.

23 Implicaciones del diseño web Navegación de página Toma continua de decisiones sobre qué enlace seguir Implicaciones de diseño: Esquemas claros de información sobre contenidos y enlaces Sensación de lugar Los documentos electrónicos no suelen poseer guías que nos sitúen en el contexto espacial del documento Implicaciones de diseño: Proporcionar guías que sitúen dentro del documento Implicaciones del diseño web Interactividad Permitir que las manos muevan la información junto con los ojos Implicaciones de diseño: Comprensión de este proceso. Independencia de página Cada página puede ser accedida desde casi cualquier página, por lo que debe tener su identidad. Implicaciones de diseño: Proporcionar encabezados y piés de página

24 Intranets y Extranets Combinación de Web, GUI, bases de datos, etc para sistemas empresariales. Diferencias con Internet Usuarios Tareas Tipo y cantidad de información Hardware y software Extranets Conjunto especial de páginas web Intranet accesibles desde el exterior