Correos componentes visuales

1. Biblioteca de
componentes visuales
Usabilidad
DIRECCIÓN DE TECNOLOGÍA, SISTEMAS E INNOVACIÓN
Subdirección de Innovación e e-Business
Áreas de Arquitectura Empresarial y Negocio Electrónico
Fecha: Marzo 2011

2. Sumario
1. Introducción
2. Retícula y Ventanas
3. Elementos básicos

3. Introducción
Objetivos de la biblioteca de
componentes visuales
1

4. Objetivos de la biblioteca de componentes visuales
El objetivo principal, es que el planteamiento de diseño y
construcción de las aplicaciones, sea en base a
componentes comunes para toda la organización.
De esta forma se alcanzan otros objetivos más específicos como son:
• Unificar la visualización de ideas a nivel corporativo.
• Permitir la ilustración rápida de pantallas para representar ideas con una
herramienta que se utiliza a nivel corporativo (MS Power Point).
• Que las pantallas ilustradas se puedan editar siempre que se quiera y de forma
rápida.
• Que las pantallas ilustradas se integren con una presentación de forma nativa.

5. Retícula y Ventanas
Retícula 1024 x 768
Ventana de 1024 x 768px
Ventana de 800x600px
Ventana Pop-Up
Mensajes de sistema en ventana modal
Ventana login
2

6. Retícula de 1024 x 768px

7. Ventana de 1024 x 768px

8. Ventana de 800x600px

9. Ventana pop-up

10. Mensajes de sistema en ventana modal
Título del mensaje de aviso
El sistema requiere una selección
Cancelar Eliminar
Título del mensaje de aviso
El contenido de esta ventana es pertinente a su
tamaño aunque su altura es variable.
Se ubica centrado dentro de los límites de la zona
marcada, respetando las cotas mínimas del
componente.
Cancelar Aceptar
« Volver Aceptar
Alta de registro
* Tipo de registro
DNI
* Número de documento
59330497B
* Código de registro
1234567890000
13 caracteres máx.
8 dígitos y una letra, sin espacio
Los datos del registro se han modificado
Cerrar ventana

11. Ventana de login
Acceso a [nombre aplicación]
Usuario
Contraseña
Elección adicional
Entrar
Entrar
Enlace alternativo
***
E00
****
E002692
Ejemplo de dos líneas de texto con un
mensaje de error

12. Elementos básicos
Cabecera
Navegación de la aplicación
Navegación del contenido
Textos
Campos de formulario
Tablas
Datos de contexto
Controles
Iconos
3

13. Cabecera
OCA3
Día, dd/mm/aaaa - HH:MM:SS – Centro Directivo 0000000
Nombre Apellido Apellido – E001111 usuario
Barra de herramientas Menú auxiliar
Cambio de clave
Cambio de usuario
Buzón de peticiones
Gestión de sesión
Cambio de clave
Cambio de usuario
Buzón de peticiones
Tooltip opción CAU
A-Z
APPS
ALERTAS
TAREAS
EJEMPLO
EJEMPLO CAU
A-Z APPS ALERTAS TAREAS
« Lista Acciones 6
Formulario Alta TLF: 91 999 999
Fecha alta
dd/mm/aaaa
Tipo
Uso de la aplicación
Descripción
I
250 caracteres máx.
Mover a la lista
- -
Guardar
Enviar
Nombre extenso de la aplicación

14. Navegación de la aplicación
Quinto nivel seleccionado
Opción en reposo Mouse over
Opción seleccionada
Opción en reposo Mouse over
Opción seleccionada 4
3
Segundo nivel plegado con
etiqueta de dos filas e hijos
4
Segundo nivel expandido 6
Segundo nivel
Tercer nivel
Cuarto nivel
5
Quinto nivel mouse over
Segundo nivel mouse over
Tercer nivel mouse over
Cuarto nivel mouse over
Si la etiqueta de una opción
de menú es extensa y do…
4
6
Si la etiqueta de una opción de
menú es extensa y dos filas no
son suficiente, se utiliza punto
suspensivo y un tooltip.
Opción en reposo
Opción en reposo
5
6
6
6
Opción en reposo
Mouse over Opción seleccionada
Opción 3
Opción cuatro
Segundo nivel
Segundo nivel con una etiqueta
de dos filas
Mouse over y clic
Menú de navegación / flotante
Menú de navegación / vertical
Menú de navegación / pestañas
Opción seleccionada Mouse over
Opción en reposo Opción 3
Opción cuatro
Segundo nivel
Segundo nivel con una etiqueta
de dos filas
Mouse over y clic

15. Navegación del contenido (1 de 2)
Breadcrumb (Miga de pan)
Inicio > Primer nivel de navegación > Segundo nivel > Tercer nivel > Cuarto nivel de navegación > Opción seleccionada
Inicio > Primer nivel de navegación con un literal extenso > … > Cuarto nivel de navegación > Opción seleccionada
Segundo nivel > Tercer nivel
Pasos de navegación de un proceso
1Primer paso de
un proceso 2Pasos intermedios
del proceso 3 Fin de la tarea
1Primer paso de
un proceso 2Pasos intermedios
del proceso 3 Fin de la tarea
1Primer paso de
un proceso 2Pasos intermedios
del proceso 3 Fin de la tarea

16. Navegación del contenido (2 de 2)
Paginación de resultados
250 Registros encontrados Página 1 de 13 « Anterior 1 2 3 4 5 Siguiente »
Categorización alfabética (propuesta)
Etiqueta opcional: 0-9 ABC DEF GHI JKL MNO PQRS TUV WXYZ

17. Textos
Pestaña activa Pestaña en reposo Mouse Over + Clic
Título de módulo
Texto normal – etiqueta de campo
Título de página
Identificador de sesión
Segundo nivel de menú
Tercer nivel de menú
Cuarto nivel de menú
Breadcrumb > Enlace > Contenido actual
Nombre aplicación
Quinto nivel de menú
seleccionado *Campo obligatorio Formato del campo Enlace
« Volver Continuar »
Título de un grupo de enlaces
 Viñeta de primer nivel
– Enlace número uno
– Segundo enlace del segundo nivel
– Enlace número tres
– Cuarto enlace
Pié de imagen
“Cuando un texto es la transcripción literal de otro, debe representarse como una cita, tabulado 15px” en el margen
izquierdo y entre comillas. “ La referencia de la cita se propone en cursiva.
Un enlace puede ir dentro de un párrafo , aunque si va a abrir una ventana nueva, debe indicarlo 2
Un párrafo o texto más largo en páginas como las de ayuda, puede listar una serie de ítems que no son enlaces
sino texto estático. El formato de este texto es:
• Indentado el margen izquierdo..
• Es un texto gris #333333 de 12px de tamaño.

18. Campos de formulario (1 de 3)
Texto introductorio si se quiere incluir al inicio del módulo
Título del grupo
Entrada de texto
I
* Campo obligatorio
I
Fecha Inicio
I
13 caracteres máx.
dd/mm/aaaa
Código
I
* Campo erróneo
I
Hora Fin
I
hh:mm:ss
Grupo de checkboxes
Etiqueta de checkbox
x Checkbox seleccionado (formato
alternativo)
Checkbox inactivo
Etiqueta de radio button
a Checkbox seleccionado
Buscador de campo
I …
Grupo de radio buttons
Segundo radio button
Tercera opción con mouse over
y clic
Título del grupo de datos
Combo box Campo inactivo Drop down menú
Seleccionar una o varias opcio…
Alternativa primera de la lista
Segunda opción mouse over
Tercer ítem para seleccionar
Cuarta opción con el texto ext…
Alternativa primera de la lista
Segunda opción mouse over
Tercer ítem para seleccionar
Cuarta opción con el texto extenso
Seleccione el tipo de búsqueda
Opción número 1 Opción número 2

19. Campos de formulario (2 de 3)
Texto introductorio si se quiere incluir al inicio del módulo
Título del módulo
Activo Inactivo Mouse over y click
Ejemplo de dos filas
en reposo
On mouse over y clic Pestaña activa Literal de una fila
Búsqueda avanzada
»
Búsqueda ampliada
con datos
Búsqueda avanzada
»
Ampliar búsqueda
Búsqueda avanzada
»
Plegar
»
Pestañas
Entrada de texto
Criterio
13 caracteres máx.
Módulo de bandejas para selección de varios ítems de una lista larga
Listado inicial
Alternativa primera de la lista
Segunda opción mouse over
Tercer ítem para seleccionar
Cuarta opción con el texto ext…
Listado final
>>
>
<
<<
Alternativa primera de la lista
Módulo con contenido plegable
Pié de módulo

20. Campos de formulario (3 de 3)
Título del módulo colapsado
Ejemplo de módulo con bandejas
Activo Inactivo Mouse over y click
Entrada de texto
I
* Campo obligatorio
I
Fecha Inicio
I
13 caracteres máx.
dd/mm/aaaa
Código
I
* Campo erróneo
I
Hora Fin
I
hh:mm:ss
Buscador de campo
I …
Título del módulo desplegado
Listado inicial
Alternativa primera de la lista
Segunda opción mouse over
Tercer ítem para seleccionar
Cuarta opción con el texto ext…
Listado final
Añadir todos >>
Añadir >
< Quitar
<< Quitar todos
Alternativa primera de la lista
Activo Inactivo Mouse over y click
« Volver Continuar »
Plegar todos
»
>>
>
<
<<
Ampliar todos
»
Módulos colapsables

21. Tablas (1 de 2)
Tabla simple
Título de la tabla simple
Activo Inactivo Mouse over y click
Código envío Situación del
envío
Reembolso Referencia del envío Ab
6 5 5 5
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… Sí
a

22. Tablas (2 de 2)
Tabla compleja
Código envío Situación del
envío
Leyenda Referencia del envío Importe
pagado
Tramo del envío Ab
6 5 5 5 5 5
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
a
250 Registros encontrados Página 1 de 13 « Anterior 1 2 3 4 5 6 Siguiente» Limpiar Modificar
Título de la tabla de resultados Exportar a PDF XSL
Mostrar
10/pág
PE900549917658797543 Entregado g Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
Título del detalle de la fila expandida
Otro dato de salida
Campo de salida de dos textos
Primer dato de detalle
Dato 1 Segundo dato
■ Opción de leyenda 2
■ Opción de leyenda 1
Fecha inicio
I
Tooltip opción
Tooltip opción

23. Datos de contexto (1 de 2)
Primer campo de salida
Primer campo de salida
Combo box
Combo
Checkboxes como dato de salida
r Checkbox seleccionado (formato alternativo)
Label de checkbox
a Checkbox seleccionado
…
›
Su código de reclamación es el 66778890
Operación realizada correctamente
Por favor, complete los datos obligatorios
Operación realizada correctamente
Mensajes en la misma ventana
?
Error de datos completados en la
pantalla de login.
50%
Carga de un documento
Documento en proceso.txt Cancelar
Datos de salida de formulario

24. Mensaje de espera (pop Up)
Datos de contexto (2 de 2)
Cancelar
Un momento, por favor…

25. Controles (1 de 2)
Botón buscar Ventana Login
Buscar Buscar
Buscar Entrar Entrar
Mouse over
Mouse over
Borrar Editar
Botones de módulo
Botón múltiple
Primer ítem de opciones
Segunda alternativa
Acción tres mouse over
Cuarta operativa
Mouse over
Botón múltiple Botón múltiple
Editar
Botones de página
Continuar >>
<< Volver Continuar >>
<< Volver Continuar >>
<< Volver
Botones de bandejas
>>
>
<
<<
Añadir todos >>
Añadir >
< Quitar
<< Quitar todos
>>
>
<
Añadir todos >>
Añadir >
< Quitar
<< Quitar todos
>>
>
<
<<
Añadir todos >>
Añadir >
< Quitar
<< Quitar todos
<<

26. Controles (2 de 2)
Plegar y desplegar
5
6
5
6
5
6
5
6
› › ›
Cambio de clave
Cambio de usuario
Buzón de peticiones
Gestión de sesión
Cambio de clave
Cambio de usuario
Buzón de peticiones
Gestión de sesión
4
3
»
«
4
Navegación
Iconos
r r … ?
… ? 07
06
05
04
03
02
01
14
13
12
11
10
09
08
21
20
19
18
17
16
15
28
27
26
25
24
23
22
31
30
29
L M X J V S D
« Noviembre » 2010 r

27. Iconos
27

28. Muchas gracias
DIRECCIÓN DE TECNOLOGÍA, SISTEMAS E INNOVACIÓN
Subdirección de Innovación y e-Business
Área de Arquitectura Empresarial y Negocio Electrónico