GUI Stencil para la construcción modular de app corporativas

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


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



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í






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


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


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


de búsqueda


Entrada de texto

Filtro completado

13 caracteres máx.


plegar »

Limpiar Buscar

Módulo de bandejas para selección de varios ítems de una lista larga

Listado inicial




Cuarta opción con el texto ext…

Listado final

Añadir todos >>

Añadir >

< Quitar

<< Quitar todos


Ejemplo aplicado - Pasos de una búsqueda avanzada (2 de 2)E

jem

plo

apli

cado

2 Completar búsqueda avanzada 3


de búsqueda

Inicio > Primer nivel > Segundo nivel de navegación > Nivel actual

Título de la página


Entrada de texto

Filtro completado

13 caracteres máx.

Limpiar Buscar


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

GUI Stencil para la construcción modular de app corporativas

Design

Transcript of GUI Stencil para la construcción modular de app corporativas