Diseño de Interfaces de Usuario Miguel Gea ([email protected]) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu edición 2013 http://www.slideshare.net/mgea/tema-4-estrategias-de-diseo-2013
Estrategias de diseño Cuarto tema de la asignatura Diseño de Interfaces de Usuario Grado de Ingeniería Informática. Universidad de Granada
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Diseño de Interfaces de Usuario
Miguel Gea ([email protected]) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu
“Céntrate en el usuario y todo lo demás llegará” “..Google es la única empresa abocada a desarrollar el motor de búsqueda perfecto, algo que comprende exactamente lo que el usuario quiere decir y le entrega exactamente lo que está buscando"
Con ese fin en mente, Google insiste en continuar innovando y se niega a aceptar las limitaciones de los modelos existentes.
Crearon la empresa Google en 1988. http://www.google.com/corporate/tenthings.html
Larry Page, Sergey Brin
Google
Tema 4. Estrategias de Diseño
Tema 4. Estrategias de Diseño
Paradigmas de interacción Diseño orientado a objetos Metáforas Capa de presentación Diseño mediante estilos Documentación
Paradigmas de interacción Tema 4. Estrategias de Diseño
Modelos de los que se deriva el sistema de interacción y establece las características de la comunicación
1 Modelo de escritorio. 2 Realidad Virtual: Sistema (generado por ordenador) que produce una apariencia de realidad en la que el usuario tiene la sensación de estar presente en ella. 3 Realidad Aumentada: Sistema que define una visión directa o indirecta de un entorno físico del mundo real, cuyos elementos se combinan con elementos virtuales para la creación de una realidad mixta a tiempo real. 4 Computación Ubicua: integración de los sistemas informáticos en el entorno de la persona, de forma que los ordenadores no se perciban como objetos diferenciados.
Referencias: [Lores01]
realidad virtual
realidad aumentada
comp. ubicua
R: Realidad, C: Computador !" Persona - Computador !" Persona - Mundo real
!" Mundo real - Computador
Paradigmas de interacción Tema 4. Estrategias de Diseño
Referencias: [Lores01]
realidad!virtual!
realidad!aumentada!
Interacción: Modelo conceptual Tema 4. Estrategias de Diseño
• La interacción es una actividad cognitiva El usuario debe recordar una serie de órdenes Realizar unas acciones para conseguir una finalidad Conocimiento mediante aprendizaje
Referencias: Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience
Modelo Mental (Modelo de Usuario) • AprendizajePredecir
Modelo Conceptual • AsimilableConsistenteSimple
Diseño Orientado a Objetos Tema 4. Estrategias de Diseño
Modelo basado en: Objetos y Acciones Objetos intrínsecos y de Control
Diseño Orientado a Objetos Tema 4. Estrategias de Diseño
Acciones: Lenguaje de órdenes Acciones de grupo (insertar, ordenar, eliminar...) Seleccionar, Crear/Eliminar, Mover/Copiar, Modificar
Modos: estado que habilita un conjunto de tareas de interacción al usuario Acción-Objeto Objeto-Acción
Borrar Mover Rotar
El lenguaje modal debe suministrar información de estado
Diseño de Metáforas Tema 4. Estrategias de Diseño
Propósito: Descripción del modelo conceptual Establecer similitud entre dos elementos distintos (uno de ellos comprensible por el usuario)
Partes del modelo conceptual
MODELO DEL SISTEMA
MODELO DE TAREAS
METÁFORAS
Diseño de Metáforas Tema 4. Estrategias de Diseño
Diseño Identificación tareas usuario Generación de la metáfora Evaluación de la metáfora expresividad representatividad adaptabilidad a usuarios extensibilidad
Diseño de Metáforas Tema 4. Estrategias de Diseño
Procesador Textos
Selección de metáforas para tipo de aplicaciones
Máquina escribir ¿?
Sistema Operativo Escritorio
Bases de Datos Tablas de Datos
Web (HTML) Navegación
Maquetación Corta y pegar objetos
Aplicación Metáfora
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Escritorio:
Papelera
Ventana (contenedor) Carpetas (almacén)
Discos (dispositivos)
Apariencia visual de las metáforas
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Cortar Recortar
Borrar Borrar
Nuevo Pág en blanco
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Adelante/ Atrás
Rebobinar/Adelantar
Compartir Dar/ofrecer
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Ampliar Reducir
Lupa + -
Buscar Lupa/ Prismáticos
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Concepto (objeto):
Metáfora (objeto)
Elementos borrados
Papelera (contenedor)
Dispositivo almacenamiento
Buscar comportamiento
similar
Disquete
Metáforas y affordances Tema 4. Estrategias de Diseño
Diálogo con pestañas: - Intuitivo (y fácil de usar)
Version 1! Version 2!
Referencia:Joel Spolsky.Affordances and Metaphors. http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html"
Metáforas y affordances Tema 4. Estrategias de Diseño
Diálogo con pestañas: - Con sobrecarga de opciones pierde su eficacia
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Proporción Relación entre elementos
1:1! 1:2!
a!b! =! =!b!
a+b! 1.618...!
La sección Áurea
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(-) Alineación (-) Claridad visual: agrupar para reducir complejidad (-) Enfatizar etiquetas de campos de edición
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Formato 1:1 (+) Agrupación (+) Simetría
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Agrupación (+) Balanceado (+) Continuidad
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
2!
Ejemplos: Tamaños de despliegue
(-) Tamaño submenú frente a tamaño de pantalla (Windows XP)
Presentación: códigos visuales Tema 4. Estrategias de Diseño
Diseño de la Información:
Preparación de la información para mostrarla de forma comprensible, y que pueda ser utilizada por los humanos de forma eficiente y efectiva, utilizando los medios más naturales para su adquisición.
Técnicas:
- Comunicación visual- Representación espacial de conceptos - Simbología y codificación
Presentación: códigos visuales Tema 4. Estrategias de Diseño
El lenguaje icónico Representación gráfica de un concepto
Importancia:
Rápido Reconocimiento
Internacionalización
Espacio
$ % & ' ( ) *+
Presentación: códigos visuales Tema 4. Estrategias de Diseño
El lenguaje icónico: Propiedades
- Reconocimiento- Recuerdo- Discriminación
Elementos:
- Acciones - Objetos
Presentación: códigos visuales Tema 4. Estrategias de Diseño
Reconocimiento Discriminación
Presentación: diseño de Iconos Tema 4. Estrategias de Diseño
Diseño iconos. Principios
1. Usar la metáfora apropiada 2. Considerar compatibilidad internacional 3. Representación abstracta simbólica 4. Consistencia visual en familia de iconos
Presentación: el color Tema 4. Estrategias de Diseño
El color. Principios
4 - Códigos de color modificables por el usuario
Diseño mediante Estilos Tema 4. Estrategias de Diseño
Estilos de interacción
- Diseño Menús - Navegación - Formularios - Diseño Web - Patrones de Interacción
Estilo Menú Tema 4. Estrategias de Diseño
Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/"
Menú con diferente apariencia
Estilo Menú Tema 4. Estrategias de Diseño
Organización:
Simple Secuencial Arbol Red
Criterio - Número de opciones - Organización semántica - Información temporal
Estilo Menú Tema 4. Estrategias de Diseño
Componentes:
Estilo Menú Tema 4. Estrategias de Diseño
Estandarización:
- Nombre de las opciones - Ubicación relativa
Favorece el aprendizaje y la retención
Estilo Menú Tema 4. Estrategias de Diseño
Interacción guiada por acciones
Interacción guiada por objetos
Archivo Mantenimiento Movimientos Informes Ayuda Películas Socios Proveedores Auxiliares
Alquilar Devolver Reservar Pedidos
P. Alquiladas Socios Por demanda
Archivo Películas Socios Proveedores Auxiliares
Estilo Menú Tema 4. Estrategias de Diseño
Elementos Botones (simples, radio, check) objetos Menús (barra principal, pulldown y anidados)
Consideraciones No sobrecargar los menús (7± 2) Nombre significativo de los botones Minimizar el espacio (uso de lenguaje icónico) Aplicar agrupamiento:
Similitud Por importancia Alfabético
Más frecuentes
Favorece tiempo de respuesta, aprendizaje y retención en usuario
Estilo Menú Tema 4. Estrategias de Diseño
Técnicas: Desactivar
Evitar errores
Estilo Menú: ejemplos Tema 4. Estrategias de Diseño
Aplicar técnicas de agrupación y desactivar
Estilo Menú: ejemplos Tema 4. Estrategias de Diseño
15 ítem / 5 bloques / 2 anidados
9 ítem
Sobrecarga de items: aplicar técnicas de agrupación y desactivar
Estilo Formularios Tema 4. Estrategias de Diseño
Uso Introducción masiva de datos relativos a un concepto del dominio de la aplicación (cliente, propiedad)Método eficaz
Técnicas Agrupación y alineación : legibilidad Uso adecuado de controles Disposición de Acciones
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
Fundamentos:
1 Virtualidad Representación de la realidad manipulable
2 Transparencia Centrarse en la actividad en vez de la herramienta
3 Facilidad de uso Representación física y espacial más fácil de recordar
4 Centrado en el Ratón (mouse) Mecanismo de selección/arrastre
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
Principios:
1 Virtualidad Representación de la realidad manipulable Representación familiar de objetos y acciones
2 Transparencia Centrarse en la actividad en vez de la herramienta Iconos reconocibles
3 Facilidad de uso Representación física y espacial más fácil de recordar Realimentación visual (selección, acciones, etc.)
4 Centrado en el Ratón (mouse) Mecanismo de selección/arrastre
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
Manipulación tangible
Diseño Web Tema 4. Estrategias de Diseño
Objetivo: • Organizar y estructurar la información de forma adecuada • Favorecer la navegación • Problema de sobrecarga de información
Navegacion Web: • Donde estoy • De dónde vengo • Donde puedo ir • Como puedo llegar rápidamente
Organización Web: • Dividir en contenido en fragmentos lógico • Organizacion jerárquica (en base a importancia) • Establecer relaciones entre fragmentos de contenido • Balancear el diseño (p.e. dos niveles de profundidad)
Diseño Interacción: Patrones
Objetivo:
Técnicas:
Recursos: User Interface design Pattern library !
Pattern library for Interaction design!
- Reutilización de elementos de interacción frecuente!
Referencias ‣ W. Galitz, The Essential Guide to User Interface Design, Wiley 2002
‣ [Lores01] Metáforas, estilos y paradigmas. En J. Lorés (ed.) Interacción Persona-Ordenador: libro digital. ISBN: 84-607-2255-4, AIPO-2001 http://www.aipo.es/libro/pdf/03Metafo.pdf
‣ Interface hall of shame. http://interfacehallofshame.eu/
‣ Patrones de interacción. http://ui-patterns.com/