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