Stencils en PPT
Vis
ión
de la
UxP
está hecha de
Árboles o diagramas
de
plantillas
Donde se ensamblan
componentes
construidos con
elementos
la experiencia de uso de una aplicación
Vis
ión
de la
UxP
Paso 2 Paso 3 Paso 4 Paso 5Paso 1
Plantilla
completar criterio de búsqueda
filtrar según ese criterio
recuperar datosseleccionar un
registrorealizar acción
sobre el registro
Buscador Resultados
Componente
Elemento
Tabla de resultados
input Botón buscar resultados Botón *acción*
Buscador
1. Definir los tipos de proceso que existen en la empresa
2. Identificar los pasos más comunes.
3. Definir para cada tarea tipo, qué elementos de interfaz son necesarios para su presentación.
Mod
elo
de e
jem
plo
de c
asos
de
uso Para definir el flujo
de pantallas
DATOS DE ENTRADA
FILTROS
1 nivel
2 pasos
FORMULARIOS
1 pantalla
2 pantallas
Proceso de 3 pantallas o más
Simple
Complejo a
Complejo b
ASISTENTE
1 pantalla
2 pantallas
Proceso de 3 pantallas o más
DATOS DE SALIDA
LISTADO
Tabulado
Simple
Paginado
Editable (Check) + Paginado + Ordenado
Editable (Radio) + Paginado + Ordenado
Editable (Check) + Paginado + Ordenado + Registro expansible
Editable (Radio) + Paginado + Ordenado + Registro expansible
Con viñeta
Ordenado (numerado)
MENSAJES DEL SISTEMA
Avisos
Alertas
Error
Confirmación
Área de navegación
Ret
ícul
aLuego se definen las plantillas
Área de contenido
Cursores para describir la interacción
Cur
sore
s
‹ › « »
Las variantes de interacción
Cursores para describir la interacción
Cur
sore
sY finalmente, los componentes y elementos
Primer nivel de navegación
Quinto nivel
Áre
a de
Nav
egac
ión
Seleccionada Mouse overOpción en reposoSeleccionada Mouse overOpción en reposo
Segundo nivel
Tercer nivel
Cuarto nivel
Quinto nivel seleccionado
Si la etiqueta de una opción de menú es extensa y dos filas no son suficiente, se utiliza punto suspensivo y un tooltip.
1Primer paso deun proceso 2 Pasos intermedios
del proceso 3 Fin de la tarea
1Primer paso activo 2 Pasos intermedios
activo 3 Fin de la tarea activo
Pasos de una tarea
Menú vertical para niveles sucesivos
Elementos de formulario
Áre
a op
erat
iva Inicio > Primer nivel > Segundo nivel de navegación > Nivel actual
Título de la página
Texto introductorio si se quiere incluir al inicio del módulo
Título del grupo de datos
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
dd/mm/aaaa
Grupo de checkboxes
Etiqueta de checkbox
x Checkbox seleccionado (formato alternativo)
Checkbox inactivo
Etiqueta de radio button
Checkbox seleccionado
07060504030201
14131211100908
21201918171615
28272625242322
313029
L M X J V S D
« Noviembre » 2010
Buscador de campo
I …
Grupo de radio buttons
Segundo radio button
Tercera opción con mouse overy 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
Botón múltiple
Primer ítem de opciones
Segunda alternativa
Acción tres mouse over
Cuarta operativa
Activo Inactivo Mouse over y click
TablaÁ
rea
oper
ativ
a
Código envío Situación del envío
Reembolso Referencia del envío Importe pagado
Tramo del envío Ab
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí
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 Mostrar 10/ pág
PE900549917658797543 Entregado Sí 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
Datos de salidaÁ
rea
oper
ativ
aDatos de salida
Primer campo de salida Campo de salida de dos textos
Primer campo de salida AD ANDORRA
Otro dato de salida Campo de salida de dos textos
Primer campo de salida Combo Segundo campo
Checkboxes seleccionados
Checkbox seleccionado (formato alternativo) Label de checkbox Checkbox seleccionado
« Volver
Ejemplo aplicado - Pasos de una búsqueda avanzada (1 de 2)E
jem
plo
apli
cado
Título del grupo de datos
Entrada de texto
Filtro |
13 caracteres máx.
ampliar búsqueda »
Limpiar Buscar
1 2 Completar búsqueda avanzada 3
Búsqueda avanzada colapsada1Completar criterios
de búsqueda
1 2 Completar búsqueda avanzada 3
Búsqueda avanzada colapsada1Completar criterios
de búsqueda
Título del grupo de datos
Entrada de texto
Filtro completado
13 caracteres máx.
ampliar búsqueda »
plegar »
Limpiar Buscar
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
Añadir todos >>
Añadir >
< Quitar
<< Quitar todos
Alternativa primera de la lista
Ejemplo aplicado - Pasos de una búsqueda avanzada (2 de 2)E
jem
plo
apli
cado
2 Completar búsqueda avanzada 3
Búsqueda avanzada colapsada1Completar criterios
de búsqueda
Inicio > Primer nivel > Segundo nivel de navegación > Nivel actual
Título de la página
Título del grupo de datos
Entrada de texto
Filtro completado
13 caracteres máx.
Limpiar Buscar
ampliar búsqueda »
Segundo nivel
Tercer nivel
Cuarto nivel
Segundo nivel
Segundo nivel
Segundo nivel
Seleccionada Mouse overOpción en reposo Opción en reposo Opción en reposo