Sistemas de Información 23 de Marzo de 2012

Transcripción

1 23 de Marzo de 2012

2 Índice de contenido Introducción Elementos Gráficos que componen el Sistema de Información Cabezote del Sistema Título Escudo Fondo Caja de Usuario y contraseña Menú Principal Buscador Menú lateral y submenú Formularios Tablas Pie de página Tipografía Ventanas de alerta y de confirmación Migas de Pan y memoria a corto plazo Paleta de colores Usos incorrectos en los Recomendaciones... 11

3 Introducción Los Lineamientos de Diseño para los son un conjunto de parámetros creados para dar a cada Sistema la Unidad Gráfica que debe caracterizar a los sitios web del. El presente documento debe ser un manual de consulta que compete a cada uno de los profesionales que intervienen en el desarrollo y montaje de los del, ya que este, contiene las reglas establecidas para cumplir con los requisitos de usabilidad y accesibilidad que exigen el nuevo manual de Gobierno en línea. El uso de las normas aquí descritas han sido desarrolladas por profesionales en Diseño y accesibilidad Web teniendo como objetivo darle al usuario final de los una experiencia de navegación práctica, coherente y agradable que le permita encontrar la información o servicio que requiere. 1

4 Lineamientos de diseño y usabilidad para los 1. Elementos Gráficos que componen el Sistema de Información: Caja de Usuario y contraseña Título del Sistema de Información Fondo del cabezote Escudo Menú principal Usuario, Ayuda y Salida del Sistema Tablas Menú lateral y submenú Pie de página Logo proveedor 2

5 Título Formulario Subtítulo Formularios Título Sección Botones 3

6 1.1 Cabezote del Sistema El cabezote es el recuadro superior que demarca el nombre del Sistema en el cual se encuentra el usuario y se mantiene en todos los niveles de navegación, está compuesto por: Título: Este se divide en dos líneas, si el texto lo permite, dejando en la primera línea preferiblemente la palabra Sistema o en su defecto, la descripción de este, en la segunda línea se coloca exclusivamente el nombre del sistema. Los títulos siempre deben ir en la fuente tipográfica Swis721 BlkCnBt Normal El color del texto de la primera línea es: #0568CE Tamaño: 35 puntos El color del texto de la segunda línea es: #121B24 Tamaño: 34 puntos Debe tener el link a la página de inicio del sistema para que el usuario pueda regresar Escudo: En la esquina superior derecha se ubica el Escudo del Educación Nacional siguiendo las normas del Manual de Imagen del Ministerio. Debe tener link a la página del MEN Fondo: El fondo que caracteriza los sistemas de Información es un degradé vertical que va de color #F9FBFB a color #E6EEF0 Con una na malla de color #D3DEEA 1.2 Caja de Usuario y contraseña Esta es la caja de logueo para ingresar al sistema, es un recuadro de 350 px X 148 px con un degradé vertical que va de color blanco #FFFFFF a color: #EBEBEB con un efecto de sombreado gris y un botón amarillo con la palabra Ingresar. 4

7 1.3 Menú principal Principal El menú principal contiene los principales contenidos del Sistema y se enmarca en un cuadrado con las puntas inferiores redondeadas. Las pestañas inactivas tienen un degradé vertical que va de el color: #1264BA a el color #0059B3 y las pestañas activas un degradé vertical que va de el color: # FFC100 a el color # FFAB00 La tipografía usada es Arial de 13 puntos Normal en color blanco sobre azul y en color negro sobre amarillo. 1.4 Buscador En el caso en que el Sistema requiera un buscador debe estar ubicado debajo del menú principal, acompañado de un botón que contiene una lupa. Buscador 1.5 Menú lateral y Submenú El menú lateral se ubica al lado izquierdo, debajo del menú principal, a diferencia de este último, no se mantiene en toda la navegación si no que varía según cada uno de los botones o contenidos del menú principal. Se enmarca en un cuadrado con puntas redondeadas en la parte superior en un degradé vertical que va de color #1A6ABF a el color #14457B y sus textos se escriben en Arial de 13 puntos Normal en color blanco #FFFFFF separados entre sí con líneas punteadas blancas. submenú Si este menú contiene un segundo nivel de navegación o submenú, este va enmarcado en un recuadro de color #F9F9F9 5

8 1.6 Formularios Para el uso de formularios se deberán seguir las siguientes normas: 1. El título general del formulario deberá ir en altas y bajas en la tipografía Arial 22 puntos Normal en color #0860BA 2. El subtítulo del formulario deberá ir en altas y bajas en la tipografía Arial 16 puntos Normal en color blanco #FFFFFF con un fondo degradé vertical que va de color #0B4783 al color #073C72 3. Los títulos de las secciones deben ir enmarcados en un recuadro de color #ECEFF0, con la tipografía Arial de 13 puntos Normal en color # El contenido del formulario debe estar con fondo de color 13 puntos Normal de color: # #F9F9F9,en la tipografía Arial de 5. Los botones que generan acciones como Aceptar y Cancelar, entre otros, deberán ir enmarcados en recuadros redondeados con degradé vertical que va de color # FFA400 a el color # FFB500 con tipografía Arial de 14 puntos Normal en color negro # Los textos externos que hagan alguna aclaración o explicación sobre el formulario deberán ir en Arial de 12 puntos Normal color # El contenido de los formularios debe tener una línea externa de color: #ECEFF0 8. En el caso en el que los formularios sean muy largos se recomienda separar las lineas de información con fondos intercalados de color #F9F9F9 y el color #ECEFF0. 8. Los formularios deben tener elementos de validación que le permitan al usuario saber cuales son los campos obligatorios y a demás señalarle cuando los campos no han sido diligenciados de manera correcta. Título General Texto interno Elemento validación * Título secciones Borde del formularío Botones 6

9 1.7 Tablas Para el uso de tablas se deberán seguir las siguientes normas: 1. Si la tabla tiene un título general, deberá ir en altas y bajas en la tipografía Arial 22 puntos Normal en color #0860BA 2. Los títulos de las columnas deberá ir en altas y bajas en la tipografía Arial 13 puntos Normal en color blanco #FFFFFF con un fondo degradé vertical que va de color #0B4783 al color #073C72 3. El texto interior de las filas de las tablas deberá ir enmarcado en recuadros alternando los colores: #F9F9F9 y #ECEFF0. La tipografía deberá ser Arial de 12 puntos Normal de color: # El ancho de las filas y columnas estará dado por la necesidad específica del formulario. 5. Los botones que generan acciones como agregar, eliminar, guardar y filtrar, entre otros, deberán ir enmarcados en recuadros redondeados con degradé vertical que va de color #FFA400 a el color #FFB500 en tipografía Arial de 14 puntos Normal color negro # Los textos externos que hagan alguna aclaración o explicación sobre la tabla deberán ir en Arial 12 puntos Normal color # Título tabla Título columna Texto interno Fondo de las filas 7

10 1.8 Pie de página El pie de página se encuentra en la parte inferior de la página después de la información, es una franja que va de extremo a extremo con un degradé vertical que va de color : #106ACA a el color #045CB6, mide 32 pixeles de alto y ocupa el ancho de la página. Esta franja se caracteriza por tener un triángulo invertido ahuecado en la esquina superior izquierda. Lleva una sutil sombra gris clara. Si es necesario, se recomienda poner en este espacio el logotipo del proveedor del sistema en color blanco, con fondo transparente y en la esquina inferior derecha junto al número de la versión del producto. 2. Tipografía Cabezotes: El nombre del sistema siempre debe ir en la fuente tipográfica Swis721 BlkCnBt El color del texto de la primera línea es: #1368C3 El color del texto de la segunda línea es: #141D2A Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Z z Texto en general: Por funcionalidad y facilidad de lectura la tipografía usada en los textos de los es la Arial. Arial Normal Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Z z Arial Bold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Z z Arial Cursiva Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Z z

11 3. Ventanas de alerta y de confirmación Estas ventanas son una forma en que el Sistema puede brindarle información al usuario. Se recomienda que sean de tamaños moderados, si tienen título, este deberá estar enmarcado en una pestaña con degradé vertical que va de el color #1264BA a el color #0059B3 y el contenido deberá estar en un recuadro con degradé vertical de el color #FFFFFF al color #F9F9F9.Para el uso de las fuentes tipográficas y botones, se deben usar las recomendadas en este manual. 4. Migas de pan y memoria a corto plazo Migas de pan Las 'migas de pan' son un elemento utilizado para que el usuario no se pierda, indicándole dónde está y la relación jerárquica de ese nodo con el resto de la estructura de la web. Suelen tener la siguiente forma: Usted está aquí: > Gestión de contratación > Normograma Se deben utilizar con una correcta jerarquía visual, y deberán tener siempre una forma parecida a la del ejemplo anterior, pues es la más común y a la que el usuario está acostumbrado. Es decir, un texto del tipo 'Usted está aquí:', 'Usted está en:' o 'Estás aquí', y las diferentes secciones (siempre como enlaces) separadas por el símbolo '>'. En cuanto a la memoria a corto plazo, la forma más sencilla de indicarle al usuario dónde ha estado es ofreciendo una tonalidad de color diferente para los enlaces ya visitados. 9

12 5. Paleta de colores #1264BA #0059B3 USOS: Barra de Menú, Título (primera línea), Viñetas Degradé vertical #1A6ABF #14457B USOS: Menú lateral izquierdo, Fondo para títulos de tablas y formularios Degradé vertical #0568CE #121B24 USOS: Título (primera línea nombre del Sistema) USOS: Título (segunda línea nombre del Sistema) #FFC100 #FFAB00 USOS: Menú activo Degradé vertical #F9F9F9 #ECEFF0 USOS: Relleno intercalado de celdas en tablas y formularios 10

13 6. Usos incorrectos Para conservar la unidad gráfica entre los y cumplir con las normas de usabilidad y accesibilidad, es necesario guardar los parámetros descritos en este manual y seguir las siguientes reglas: 1. No se deben usar menús desplegables Menú desplegable x 2. No se deben usar interfaces en movimiento (animaciones en flash) 3. No se deben cambiar los colores o fuentes tipográficas corporativas, ni la ubicación de los elementos fundamentales del Sistema. 7. Recomendaciones La finalidad de este manual es lograr que los usuarios de los diferentes sistemas de Información del tengan una buena experiencia de navegación, por lo que sugerimos que esta sea práctica y sencilla. 1. Se recomienda el uso de etiquetas alt para las imágenes, estas son textos que describen la imagen y se hacen visibles al pasar el ratón sobre ellas. 2. La información debe llegar al usuario rápidamente, así que nuestro objetivo será que este encuentre lo que busca dando el menor número de clics posibles. 3. El usuario debe tener la posibilidad de cambiar o deshacer acciones. 4. Se recomienda el uso de textos descriptivos que hagan la experiencia más fácil y completa. 11

14 5. Los botones de los formularios deben estar al final de los mismos. 6. El usuario debe poder acceder al menú principal del Sistema desde cualquier página. 7. Se recomienda hacer la verificación del código HTML y CSS conforme los estándares emitidos por la W3C Para ello ingrese a las herramientas de validación oficiales. 8.Tambien se recomienda remitirse al documento de Lineamientos y metodologías en usabilidad d e Gobierno e n l ínea h ttp://programa.gobiernoenlinea.gov.co/apc-aafiles/ aee4eee4102f0bd5ca294791f/gel108_cintel_lineamientos_y_metodologias _en_usabilidad.pdf. 12