Diseño de los elementos de...
40
Diseño de los elementos de interacción Diseño de la pantalla Mensajes de error Color Guías para los estilos de interacción
Transcript of Diseño de los elementos de...
Diseño de los elementos de
interacción
Diseño de la pantalla
Mensajes de error
Color
Guías para los estilos de interacción
Diseño de pantalla
El diseño de la pantalla siempre tiene elementos artísticos y que requieren creación.
Se pueden establecer algunos principios básicos que se deben cumplir desde el punto de vista de presentación en la pantalla.
Diseño de pantalla
Elegancia y simplicidad
Estilo unitario, refinado y adecuado
Escala, contraste y proporción
Los elementos deben ser claros, existir armonía entre ellos
y con la actividad que llevan a cabo
Organización y estructura visual
La información debe estar agrupada, aprovechar las
jerarquías y relaciones, y estar balanceada
Diseño de pantalla
Módulo y programa
Módulos enfocados a la resolución del problema global y
consistentes con la aplicación
Imagen y presentación
Inmediatez en su significado, generalidad, unidad y
caracterización
Estilo
Distintivo de la aplicación, integrado, comprensible y
apropiado
Ejemplo de diseño de pantalla
(1/7)
PÉREZ,MARIA23456789ZJUAN PEDRO DÍAZ
ANA230193TOMAS021090LUISA301299
Ejemplo de diseño de pantalla
(2/7)
PÉREZ, MARIA 23456789Z JUAN PEDRO DÍAZ
ANA 230193
TOMAS 021090
LUISA 301299
Ejemplo de diseño de pantalla
(3/7)
PÉREZ, MARIA 23.456.789Z JUAN PEDRO DÍAZ
TOMAS 02-10-90
ANA 23-01-93
LUISA 30-12-99
Ejemplo de diseño de pantalla
(4/7)
MARIA PÉREZ 23.456.789Z JUAN PEDRO DÍAZ
TOMAS 02-10-90
ANA 23-01-93
LUISA 30-12-99
Ejemplo de diseño de pantalla
(5/7)
Empleada: MARIA PÉREZ Documento nacional de identidad:23.456.789Z
Cónyuge: JUAN PEDRO DÍAZ
Hijos: Nombres y fechas de nacimiento
TOMAS 02-10-90
ANA 23-01-93
LUISA 30-12-99
Ejemplo de diseño de pantalla
(6/7)
EMPLEADA: María Pérez DNI:23.456.789Z
CÓNYUGE: Juan Pedro Díaz
HIJOS:
NOMBRES FECHAS DE NACIMIENTO
Tomás 02-10-90
Ana 23-01-93
Luisa 30-12-99
Ejemplo de diseño de pantalla (7/7)
EMPLEADA: María Pérez DNI: 23.456.789Z
CÓNYUGE: Juan Pedro Díaz
HIJOS:
Nº NOMBRE FECHA DE NACIMIENTO
1 Tomás 02-10-1990
2 Ana 23-01-1993
3 Luisa 30-12-1999
Mensajes de error
Los mensajes de error deben ayudar al usuario a detectar el problema y a resolverlo.
Mensajes poco adecuados pueden crear malas experiencias en los usuarios.
Se debe incluir el diseño de estos mensajes dentro del proceso de desarrollo.
Mensajes de error
Algunas guías a tener en cuenta: Los mensajes deben ser específicos
ERROR DE SINTAXISFalta el paréntesis izquierdo
DATO ERRÓNEO El rango de los días es de 1 a 31
FICHERO INCORRECTO Los ficheros deben empezar por una letra
Mensajes de error
Algunas guías a tener en cuenta: Los mensajes deben contener consejos
constructivos y el tono debe ser positivo
DESBORDAMIENTO DE CADENA DESASTROSO. TRABAJO ABANDONADO No existe espacio para la cadena. Revise el programa para usar cadenas más cortas o crear un espacio mayor para las cadenas
ETIQUETA NO DEFINIDA Defina las etiquetas antes de usarlas
Mensajes de error
Algunas guías a tener en cuenta:
Redacción centrada en el usuario
Ayudas contextuales, mensajes de comprensión,...
Formato físico apropiado
Posicionamiento del error, uso de sonidos, ...
Mensajes de error
Ejemplo:
Error al utilizar un escáner1. No se encuentra el dispositivo. Compruebe que está conectado al equipo.
2. La aplicación no encuentra el dispositivo. El error puede deberse a una mala conexión con el equipo. Ver como resolver este problema.
3. No se encuentra el dispositivo. En la documentación podrá encontrar como resolver el problema.
Color
El beneficio del color es indudable en aplicaciones como: Videojuegos
Objetos tridimensionales
...
No está claro su beneficio en: Terminales alfanuméricos
Hojas de cálculo
...
Color
Algunos consejos útiles:
Usar el color de forma conservadora
Limitar el uso de colores
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Color
Algunos consejos útiles:
Utilizar el color como técnica de codificación
Codificar en función de la cultura de los colores
Rojo: parar, caliente o negativo
Azul: frío o agua
2000
1000
1000
1000
500
500Total:
Color
Algunos consejos útiles:
Mantener la consistencia de colores
Diseñar para monocromo primero
Color
Algunos consejos útiles:
Emparejar colores compatibles
Negro sobre azul y azul sobre blanco las mejores
combinaciones
Magenta sobre verde y verde sobre blanco las peores
combinaciones
Prueba Prueba Prueba Prueba
Color
Algunos consejos útiles:
Usar el color para incrementar la densidad de información
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Prueba
Guías para los estilos de
interacción
Selección por menú
Rellenado de huecos
Lenguajes de comandos
Lenguaje natural
Manipulación directa
Guías para los estilos de
interacción
Selección por menú
Menús binarios
Utilizar elementos opuestos (“OK” y “Cancelar”) o “Radio
buttons”
Menús múltiples de selección simple
Utilizar “radio buttons”
Guías para los estilos de
interacción
Selección por menú
Menús múltiples de selección múltiple
Utilizar “checkbox”
Menús “pull-down”
Cambio de color, deshabilitado, posición constante
Menús “pop-up” (de DENIM tool)
Guías para los estilos de
interacción
Selección por menú Barras de desplazamiento
Elementos definidos dinámicamente o un número muy elevado
Enlaces embebidos
Menús de iconos, barras de herramientas y paletas
Guías para los estilos de
interacción
Selección por menú
Secuencias lineales
Conjunto de menús simples que definen una secuencia
Menús múltiples
Varios menús en uno solo
Menús estructurados en árbol
Sitemaps
¿Profundidad o anchura?
Guías para los estilos de
interacción
Selección por menú
Cada menú debe incluir tareas semánticamente relacionadas
Estructurar jerárquicamente las tareas y anidarlas
Ordenar las opciones de un menú de acuerdo con algún criterio (secuencia alfabética, agrupación,...)
Emplear separadores cuando se produzca un salto entre las tareas
No anidar en exceso
Más de dos niveles es complicado, más de tres inmanejable
Guías para los estilos de
interacción
Selección por menú Los nombres de las funciones deben ser cortos y
fáciles de recordar
Es conveniente incluir teclas de menú que guarden relación con el nombre de la función
Hay que distinguir visualmente entre las opciones que se pueden activar y las que no
Puede haber opciones excluyentes
Se pueden dar pistas visuales sobre las opciones seleccionadas
Guías para los estilos de
interacción
Selección por menú
Ejercicio:
Estructurar los siguientes elementos:
Ver, Barra de herramientas, Suavizar, Barra de estado,
Unidades de Medida, Perfilar, Acuarela, Imagen, Centímetro,
Pixel, Recortar, Cambiar el tamaño, Rotar, Regla, Efectos,
Estampado
Guías para los estilos de
interacción
Solución
Ver
Barra de herramientas
Regla
Barra de estado
--
Unidades de Medida
Centímetro
Pixel
Imagen
Recortar
Cambiar el tamaño
Rotar
Efectos
Suavizar
Perfilar
--
Acuarela
Estampado
Guías para los estilos de
interacción
Rellenado de hueco Los huecos deben etiquetarse con nombres
significativos
El tamaño de los huecos puede dar una pista sobre su contenido
Organizar los campos por distancia semántica
Utilizar una plantilla para alinear los campos y sus etiquetas
Dar pistas visuales sobre los campos que es obligatorio rellenar
Guías para los estilos de
interacción
Rellenado de hueco
En aquellos campos que tienen que ajustarse a un
determinado formato de entrada
Dar información o pistas visuales sobre el tipo soportado (v.g.
en fechas)
Si es un conjunto restringido de valores, ofrecer campos
desplegables con valores predefinidos
Guías para los estilos de
interacción
Rellenado de hueco
Agrupamiento y secuencia lógicos
Permitir el movimiento rápido con los
cursores
Guías para los estilos de
interacción
Lenguaje de comandos
Buscar un equilibrio entre potencia y simplicidad
Los comandos (léxico) tendrán nombres del entorno de la tarea que:
puede diseñarse jerárquicamente
deben ser familiares, congruentes, específicos, consistentes y discriminables
pueden sustituirse por abreviaturas
Guías para los estilos de
interacción
Lenguaje de comandos
La sintaxis debe:
ser consistente, natural y fácil de recordar
ser del tipo acción + objeto para cada comando
evitar signos de puntuación
dar soporte a parámetros opcionales
Guías para los estilos de
interacción
Lenguaje de comandos
La interacción con el lenguaje:
la línea de comandos debe estar en un lugar visible y poder
abrirse y cerrarse
debe haber una ayuda interactivo (v.g. "prompt" interactivo)
soportar teclas de función para comandos habituales
dar soporte a parámetros opcionales
dar soporte a sinónimos definidos por el usuario
Guías para los estilos de
interacción
Lenguaje natural
El usuario no emplea un subconjunto restringido del
lenguaje con el que habitualmente se comunica
existe una semántica dependiente del contexto
existe un léxico predefinido
existen unas construcciones sintácticas reconocibles
Guías para los estilos de
interacción
Lenguaje natural
La forma de interacción es similar a la del lenguaje de comandos
Acaba siendo similar a un lenguaje de comandos...
... aunque con los problemas del lenguaje natural (ambigüedad, dependencia del contexto...)
Guías para los estilos de
interacción
Manipulación directa
Minimizar la distancia semántica y la articulatoria
Dar información sobre la posición, selección, movimiento y
estados
Seguir guías genéricas
Ofrecer una interfaz distinta a expertos y noveles
