Normas Generales de Diseño de Interfaz del Proyecto SIACE

SISTEMA INTEGRAL ADMINISTRATIVO DE
CONTRALORIAS DE ESTADO
(SIACE)
Página Elaboración
1/20 10/08/2015
NORMAS GENERALES DE DISEÑO
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Normas Generales de Diseño de Interfaz del Sistema Integral Administrativo de las Contralorías de
Estado (SIACE)
Versión 1.0
Noviembre de 2016
La información contenida en este documento es propiedad intelectual de las Contralorías de estados Orientales de Venezuela
Se prohíbe la reproducción total o parcial del mismo, sin consentimiento explícito de las mismas.
ENCUENTRO DE CONTRALORÍAS ORIENTALES-ENCOOVE – TODOS LOS DERECHOS RESERVADOS 2015.

(SIACE)
2/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
HISTORIAL DE REVISIÓN
FECHA VERSIÓN DESCRIPCIÓN AUTOR CARGO CONTRALORIA
10/08/2015 1.0 REDACCIÓN CARLOS ROMERO ANALISTA DE SISTEMAS III SUCRE
24/11/2016 2.0 ACTUALIZACIÓN YADIRA ARIAS ASISTENTE DE PLANIFICACIÓN
Y TELEMATICA II
MONAGAS

(SIACE)
3/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Con la firme intención de mantener un orden y homogeneidad en la programación y edición de código
fuente en la reingeniería del Sistema Integral Administrativo de Contralorías Estadales (SIACE) se
establecen los siguientes lineamientos:
Principios Generales del Diseño Visual
Las interfaces gráficas efectivas son visualmente comprensibles, proporcionando al usuario la
sensación de control y fluidez sobre la información presentada. Esta constituye una capa de
abstracción, ocultando al usuario el funcionamiento interno de la aplicación.
Por esta razón, se propone la aplicación de principios de diseño de interfaz comprobados, con la
finalidad de proveer a los usuarios finales de una interfaz clara, precisa, simple y ordenada, con la
información y procesos relevantes a las funciones que estos desempeñan.
Así, Bruce Tognozzi define un conjunto de principios fundamentales para el diseño de interfaz:
 Anticipación: una aplicación Web debe diseñarse para anticiparse a los movimientos del
usuario. Por ejemplo, si un usuario visita una página Web para solicitar información sobre
un driver para un sistema operativo, la aplicación debería facilitarle un enlace para poder
descargar dicho driver, ya que es la acción más probable a realizar por el usuario.
 Comunicación: la interfaz debe comunicar el estado de cualquier actividad iniciada por el
usuario. Dicha comunicación puede hacerse por una etiqueta (label), un diálogo, etc.
 Consistencia: el uso de los controles de navegación, menús, iconos y aspectos estéticos
(como colores, formas, etc.) deben ser consistentes en toda la interfaz. Por ejemplo, si un
subrayado de color azul indica un link, un texto que no sea un link no puede subrayarse de
esa forma.
 Autonomía controlada: la interfaz debe facilitar la navegación del usuario a través de la
aplicación, pero debe hacerlo de manera que se cumplan las restricciones establecidas para
la aplicación. Por ejemplo, controlar la navegación a determinadas funcionalidades de la
aplicación solicitando un nombre de usuario y contraseña.
 Eficiencia: el diseño de la aplicación Web y su interfaz deben optimizar el trabajo del
usuario.
 Flexibilidad: la interfaz debe ser lo suficientemente flexible para permitir que algunos
usuarios puedan realizar sus tareas directamente y para que otros puedan explorar la
aplicación más a fondo.

(SIACE)
4/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
 Centrada en el usuario: la interfaz de la aplicación (y el contenido que muestra) debe estar
centrado en las tareas que los usuarios deben realizar.
 Ley de Fitt: “el tiempo para cumplir un objetivo es una función de la distancia y el
tamaño de ese objetivo” [Tog01]. Esta ley es un método eficaz de modelado rápido, de tal
modo que, ante una secuencia de entradas o selecciones que se deben realizar en una acción,
la primera selección de la secuencia (como un clic de ratón) debe estar físicamente cercana a
la siguiente selección.
Por ejemplo, en una página Web de compras de productos, tras seleccionar la acción
Comprar Producto, se suceden otra serie de selecciones, como la selección del producto, la
cantidad, selección de otros productos relacionados, etc. Todo ello debe estar próximo, para
evitar que el tiempo que el usuario necesita para cumplir su objetivo sea demasiado alto.
 Objetos de la interfaz de usuario: existen enormes bibliotecas de objetos de interfaz y
patrones, por lo que éstos deben utilizarse a la hora de diseñar una nueva interfaz de usuario.
 Reducción de latencia: antes que hacer que el usuario espere para que se complete alguna
operación interna de la aplicación, ésta debería ser multitarea y permitir al usuario seguir
trabajando mientras la acción se completa. Además, se debe proporcionar una
realimentación (feedback) al usuario en los momentos de espera, en forma de aviso sonoro o
visual (reloj de espera, barra de progreso, etc.).
 Facilidad de aprendizaje: una interfaz de usuario debe ser diseñada para minimizar el
tiempo de aprendizaje.
 Metáforas: una interfaz que utilice una metáfora de interacción es más fácil de aprender y
de usar, siempre y cuando la metáfora sea adecuada para la aplicación y para el usuario
final. Por ejemplo, en una aplicación de compras se puede utilizar un libro de contabilidad
como metáfora gráfica para las facturas de los pedidos realizados.
 Legibilidad: toda la información presentada a través de la interfaz debe ser legible por
cualquier usuario.
 Navegación visible: un buen diseño de la interfaz genera “la ilusión de que los usuarios
están en el mismo sitio, pero con el trabajo traído hacia ellos”.
Diseño de Interfaz
Para el diseño general de la interfaz se utilizará el framework “Bootstrap”, el cual contiene diversas
plantillas con elementos como formularios, menús, tipografía, cuadros, botones, gráficos basados en
HTML, CSS y JavaScript, proporcionando facilidad al momento de construir la aplicación.

(SIACE)
5/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Diseño Estructural de Interfaz
El diseño estructural permite distribuir el espacio de trabajo en áreas, las cuales permitirán al usuario
ubicar con facilidad los elementos con los cuales va a interactuar y proporcionar consistencia a lo largo
de toda la aplicación,  siempre  y cuando respetando los colores establecidos de las ventanas, tablas,
pestañas, iconos, botones y todas las acciones a realizar dentro de las diferentes áreas del modulo. (Ver
Figura  N.º 1 y Figura  N.º 2 )

Figura  N.º 1 Área de Presentación

(SIACE)
6/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Figura N.º 2 Área de Notificaciones
Pauta Cromática
Con la finalidad de obtener una correcta visualización de la información presentada al usuario, se
establece el predominio del color blanco en el fondo y color negro para la fuente. Su aplicación radica
en formularios, tablas, contenidos y reportes a excepción de títulos.
Pauta Tipográfica
Las fuentes a utilizar en el marco de trabajo corresponden a "Roboto", sansserif, Helvetica, Arial,
sansserif;
Se utilizarán los siguientes tamaños de fuentes, proporcionados por Bootstrap.
• Para los títulos generales se utilizará la etiqueta h2, la cual corresponde a un tamaño equivalente
a 24px. Ejemplo. <h2>Listado de Empleados</h2>
• Para los títulos de tablas se utilizará la etiqueta h4, la cual corresponde a un tamaño equivalente
a 15px. <h4>Nombre</h4>
• En cuanto al contenido se utilizará el tamaño por defecto contenido en el marco de trabajo
equivalente a 13px;

(SIACE)
7/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Encabezado del listado
Ventanas
Las ventanas son un área visual, normalmente de forma rectangular, que contiene interfaz de usuario,
mostrando la salida y permitiendo la entrada de datos para uno de varios procesos que se ejecuten.
Debe guardar relación la opción a elegir con el encabezado dentro de la opción a ejecutar. (Ver Figura
N.º 3 y Figura  N.º 4)
Figura  N.º 3 OPCIÓN A ELEGIR
Figura  N.º 4 ENCABEZADO DE LA OPCIÓN

(SIACE)
8/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Elementos de Interfaz
Formularios
Los formularios de registro serán desplegados a través de una ventana modal. El estilo de animación
establecido para los formularios corresponde al indicado en  la Tabla 1. ( Ver ejemplo de formulario en
la Figura  N.º 5 )
Tabla 1. Estilo de formulario
NOMBRE DEL ELEMENTO NOMBRE DE LA CLASE APLICACIÓN
floating-label .form-group floating-label <div class="form-group floating-label">
<input type="text"class="form-control">
<label>Nombre</label></div>
Figura  N.º 5 FORMULARIO

(SIACE)
9/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Elementos de Formularios
En la Tabla 2 se indican los elementos del formulario a utilizar. Estos corresponden a casillas de
verificación y diversos selectores.
Tabla 2. Elementos de formularios
NOMBRE MODELO CLASE APLICACIÓN
Casilla de
verificación
(Checkbox)
. checkbox
checkbox-
styled
<div class="checkbox checkbox-styled">
<label><input type="checkbox"value="">
<span> Casilla de prueba</span></label>
</div>
Selector (Select) <div class="form-group floating-label"> <select
name="" class="form-control"> <option
value=""> </option><option
></select><label>Seleccionar</label></div>
Selector de fecha
(Datepicker)
.input-group
date
<div class="form-group control-width-normal">
<div class="input-group date" id="demo-date">
<div class="input-group-content">
<input type="text" class="form-control">
<label>Desde</label></div><span class="input-
group-addon"><i class="fa fa-
calendar"></i></span></div></div>

(SIACE)
10/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Tablas
Las tablas permiten ordenar la información y proveer de un ambiente controlado para el manejo de la
misma. Teniendo en cuenta que toda la información suministrada por estas tabla deberá ser en  español.
Nota:  Las acciones a realizar dentro de las tablas deben tener la información correspondiente con sus
respectivos iconos , todo esto situado en la parte debajo. (Ver  Figura  N.º 6).

Figura  N.º 6 TABLAS

(SIACE)
11/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
A continuación se muestran dos estilos de tablas para el manejo de la información del SIACE,
contenidas en las Tablas 3 y 4 respectivamente.
Tabla 3 . Modelo de tabla estática (Ver Figura N.º 7)
Stripped table .table-striped class="table table-striped"
Figura N.º 7 TABLA ESTÁTICA
Tabla 4. Modelo de tabla dinámica (Ver Figura N.º 8)
Show/hide columns
.table table-striped table-hover class="table table-striped table-hover"

(SIACE)
12/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Figura N.º 8 TABLA DINÁMICA
Estilo de Botones
Incorporar iconos alusivos a la acción a realizar. Los botones a utilizar son los siguientes:
Tabla 5. Estilo de botones
ACCIÓN MODELO CLASE APLICACIÓN
Registrar .btn ink-reaction btn-
raised btn-info
<button class="btn ink-reaction btn-raised btn-info">
<span class="glyphicon glyphicon-log-out"></span>
Registrar</button>
Guardar . btn btn-primary ink-
reaction btn-raised
<button type="button" class="btn btn-primary ink-
reaction btn-raised"><span class="glyphicon glyphicon-
floppy-disk"></span>Guardar</button>
Cancelar . btn btn-default ink-
reaction btn-raised
<button type="button" class="btn btn-default ink-
reaction btn-raised"><span class="glyphicon glyphicon-
floppy-remove"></span> Cancelar</button>

(SIACE)
13/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Editor de Texto
Los editores de texto son de gran ayuda al momento de registrar un gran volumen de párrafos, ya que
permiten gestionar la información introducida de manera eficiente. El editor de texto a utilizar se
encuentra definido en la Tabla 6.  (Ver  Figura  N.º 9)
Tabla 6. Editor de texto
NOMBRE DEL
ELEMENTO
NOMBRE DE LA CLASE APLICACIÓN
Estándar (Standar)
.form-control control-12-rows" <div class="card-body"><textarea id="ckeditor"
class="form-control control-12-rows"
placeholder="Coloque el texto">
</textarea></div>
Figura  N.º 9 EDITOR DE TEXTO
Tarjetas
El tamaño de la tarjeta (Card) queda a disposición del desarrollador, su especificación se muestra en la
Tabla 7. Modelo de tarjeta estándar. (Ver  Figura  N.º 10)
Tarjeta estándar(Card)
. card <div class="col-md-6">
<div class="card">
<div class="card-body">
<h4>Coloque el contenido en este

(SIACE)
14/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
lugar</h4></div></div>
Figura  N.º 10 TARJETAS
Pestañas o Fichas
Las vistas por pestañas o comúnmente conocidas en programación como “Tabs” son un elemento muy
útil de navegación. Consta de un conjunto de enlaces secuenciales de los cuales se desprende la
información de manera ordenada y versátil. La Tabla 8 muestra su uso.
Tabla 8. Modelo de pestaña
Pestañas (Tabs)
. nav nav-tabs <div class="card"><div class="card-head">
<ul class="nav nav-tabs" data-toggle="tabs">
<li class="active"><a href="#first1">Opción
1</a></li><li><a href="#second1">Opción
2</a></li></ul></div><div class="card-body tab-content"><div
class="tab-pane active"><p>Contenido
1</p></div><div class="tab-pane"><p>
Contenido 2</p></div></d
Acordeón
Se utilizará el modelo “Cards” de acordeón contenido en el material admin ya suministrado. (Ver
Figura  N.º 11)

(SIACE)
15/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Figura  N.º 11 ACORDEÓN
Wizard
Se utilizará el modelo “Form wizard” contenido en el material admin ya suministrado. (Ver  Figura
N.º 12)
Figura  N.º 12  Wizard

(SIACE)
16/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Iconos
Se utilizará la gama de iconos contenidos en el marco de trabajo ya suministrado. Los iconos a utilizar
deben estar relacionados con la acción a realizar.
✔ Los iconos de los botones deben estar situados del lado izquierdo. Se establece que al situar el
mouse encima del botón, se indique la acción que realiza el mismo.
Editar
. btn btn-default ink-
reaction btn-primary
<button type="button"
class="btn btn-default ink-
reaction btn-
raised"><span class="fa
fa-edit"></span>
Cancelar</button>
Eliminar
. btn ink-reaction btn-
raised btn-xs btn-danger
<button class="btn ink-
reaction btn-raised btn-xs
btn-primary" data-
backdrop="static"><i
class="md md-delete"
style="color:
#ffffff;"></i></button>
Ver o Consultar
.btn ink-reaction btn-raised
btn-xs btn-warning
btn-danger"><i class="md
md-remove-red-eye"
style="color:
Anular
md-not-interested"
style="color:
Imprimir
raised btn-xs btn-info
md-print" style="color:

(SIACE)
17/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Cerrar
md-close” style="color:

A continuación se muestran algunos de los iconos contenidos.
A continuación se establece para todos los módulos los iconos para Procesos, Reportes y Maestros:
El Icono para Procesos será el siguiente:

(SIACE)
18/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
El Icono para Reportes será el siguiente:
El Icono para Maestro será el siguiente:
Gráficos
Los gráficos permiten representar estadísticas y diversos estatus. Se obtuvo una recopilación de
gráficos a utilizar los cuales serán indicados a continuación.
Tabla 10. Gráfico interactivo
Interactive linechart .flot height-6 <div class="card"><div class="card-
body">
<div id="visitor-chart" class="flot
height-6" data-title="Site visits" data-
color="#9C27B0,#0aa89e"></div>
</div>
</div>

(SIACE)
19/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Figura N.º 13 GRÁFICO INTERACTIVO
Tabla 11. Gráfico en tiempo real
NOMBRE DEL
ELEMENTO
NOMBRE DE LA CLASE APLICACIÓN
Gráfico en Tiempo real
(Realtime chart)
.flot height-6 <div class="card"><div class="card-body">
<div id="realtime-chart" class="flot height-6" data-
title="Site visits" data-color="#2196F3"></div>
</div>
</div>
Figura N.º 14 GRÁFICO EN TIEMPO REAL

(SIACE)
20/20 10/08/2015
DE INTERFAZ
Versión
1.0
Actualización
24/11/2016
Tabla 12. Gráfico de barras agrupadas
Gráfico de barras agrupadas
(Grouped bar chart)
.height-7 <div class="card">
<div class="card-body">
<div id="morris-bar-graph" class="height-7" data-
colors="#9C27B0,#2196F3,#0aa89e"></div></div>

</div><!--end .card →
Figura N.º 15 GRÁFICO DE BARRAS AGRUPADAS
Nota:
Los elementos indicados anteriormente se encuentran en el paquete Material Admin, donde se
puede observar su funcionamiento.

Normas Generales de Diseño de Interfaz del Proyecto SIACE

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Normas Generales de Diseño de Interfaz del Proyecto SIACE

Ähnlich wie Normas Generales de Diseño de Interfaz del Proyecto SIACE (20)

Normas Generales de Diseño de Interfaz del Proyecto SIACE