lineamientos de diseño y usabilidad para los … › 1759 › articles-310035...los lineamientos de...

Lineamientos de diseño y usabilidad para los

Sistemas de Información

Ministerio deEducación NacionalRepública de Colombia

23 de Marzo de 2012

Introducción

1. Elementos Gráficos que componen el Sistema de Información............................. 2

2. Tipografía .............................................................................................................. 8

3. Ventanas de alerta y de confirmación ................................................................... 9

4. Migas de Pan y memoria a corto plazo ................................................................. 9

5. Paleta de colores ................................................................................................ 10

6. Usos incorrectos en los Sistemas de Información .............................................. 11

7. Recomendaciones .............................................................................................. 11

............................................................................................................. 1

1.1 Cabezote del Sistema ............................................................................. 4

1.2 Caja de Usuario y contraseña................................................................. 4

1.3 Menú Principal ......................................................................................... 5

1.4 Buscador................................................................................................... 5

1.5 Menú lateral y submenú ........................................................................... 5

1.6 Formularios. ............................................................................................. 6

1.7 Tablas ....................................................................................................... 7

1.8 Pie de página ........................................................................................... 8

1.1.1 Título

1.1.2 Escudo........................................................................................ 4

1.1.3 Fondo.......................................................................................... 4

........................................................................................... 4


Sistemas de InformaciónMinisterio de

Educación NacionalRepública de Colombia

Índice de contenido

Introducción

Los Lineamientos de Diseño para los “Sistemas de Información” son un conjunto de parámetros creados para dar a cada Sistema la Unidad Gráfica que debe caracterizar a los sitios web del Ministerio de Educación Nacional.

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 Sistemas de Información del Ministerio de Educación Nacional, 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 Sistemas de Información una experiencia de navegación práctica, coherente y agradable que le permita encontrar la información o servicio que requiere.

1




Ministerio deEducación Nacional

República de Colombia

Escudo Fondo del cabezote

Menú principal

Menú lateraly submenú

Título del Sistema de Información

Pie de página

Caja de Usuario y contraseña

1. Elementos Gráficos que componen el Sistema de Información:

2

Usuario, Ayuda y Salida del Sistema

Tablas

Logo proveedor



Ministerio deEducación Nacional

República de Colombia

3

Formularios

Botones



Título Formulario

Subtítulo

Título Sección

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:

1.1.1 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.

1.1.2 Escudo: En la esquina superior derecha se ubica el Escudo del Ministerio de Educación Nacional siguiendo las normas del Manual de Imagen del Ministerio. Debe tener link a la página del MEN.

1.1.3 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

4

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: con un efecto de sombreado

gris y un botón amarillo con la palabra Ingresar.

#EBEBEB




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 : #1264BA a el color #0059B3

y las pestañas activas un degradé vertical que va : FFC100 FFAB00

La tipografía usada es Arial de 13 puntos Normal en color blanco sobre azul y en color negro sobre amarillo.

de el color

de el color# #a el color

1.3 Menú principal

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 color blanco #FFFFFF separados entre sí con líneas punteadas blancas.

Si este menú contiene un segundo nivel de navegación o submenú, este va enmarcado en un recuadro de color

Normal en

#F9F9F9submenú

5

1.4 Buscador

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.




1.3 Menú Principal

Título General

Borde del formularío

Título seccionesTexto interno

Botones

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

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 #064686.

4.El contenido del formulario debe estar con fondo de color #F9F9F9,en la tipografía Arial de 13 puntos Normal de color: #333333.

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 tipografía Arial de 14 puntos Normal en color negro #000000.

6. Los textos externos que hagan alguna aclaración o explicación sobre el formulario deberán ir en Arial de 12 puntos Normal color #333333.

7. 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.

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

## con

6

Elemento validación*







1.7 Tablas

Para el uso de tablas se deberán seguir las siguientes normas:

1. Si la tabla tiene un título general,

2. Los títulos de las columnas

3. El texto interior de las filas de las tablas deberá ir enmarcado en recuadros alternando los colores: #F9F9F9 y . La tipografía deberá ser Arial de 12 puntos Normal de color: #333333.

4. 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,

6.

deberá ir en altas y bajas en la tipografía Arial 22 puntos Normal en color #0860BA

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

#ECEFF0

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 #000000

Los textos externos que hagan alguna aclaración o explicación sobre la tabla deberán ir en Arial 12 puntos Normal color #333333.

Fondo de las filas

Título tabla

Texto interno

7

Título columna




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

Texto en general: Por facilidad de lectura la tipografía usada en los textos de los Sistemas de Información es la Arial.

funcionalidad y

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 1 2 3 4 5 6 7 8 9 0



Cabezotes: El nombre del sistema siempre debe ir en la fuente El color del texto de la primera línea es: #1368C3 El color del texto de la segunda línea es: #141D2A

tipográfica Swis721 BlkCnBt


8

Arial Normal

Arial Bold

Arial Cursiva




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

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í: > >

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í:', 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.

Sistemas de Información Gestión de contratación Normograma

'Usted está en:'

Migas de pan

9




5. Paleta de colores

Color Web#1A6ABF

Color Web#F9F9F9

Color Web#ECEFF0

Color Web#1264BA

Color Web #0059B3

Color Web#FFC100

Color Web#FFAB00

USOS: Barra de Menú, Título (primera línea), Viñetas

tablas y formulariosUSOS: Menú lateral izquierdo, Fondo para títulos de

Degradé vertical

Degradé vertical

Degradé vertical USOS: Menú activo

Color Web#121B24

del Sistema)USOS: Título (segunda línea nombre

USOS: Relleno intercalado de celdas en tablas y formularios

10

Color Web#14457B

Color Web#0568CE

del Sistema)USOS: Título (primera línea nombre




6. Usos incorrectos

Para conservar la unidad gráfica entre los Sistemas de Información 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

11

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.

xMenú desplegable

7. Recomendaciones

La finalidad de este manual es lograr que los usuarios de los diferentes sistemas de Información del Ministerio de Educación Nacional 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.

12

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 de Gob ie rno en l ínea

.

http://www.w3.org/

h t tp : / /p rograma.gob ie rnoen l inea .gov.co /apc-aa-files/5854534aee4eee4102f0bd5ca294791f/GEL108_CINTEL_Lineamientos_y_metodologias_en_usabilidad.pdf




lineamientos de diseño y usabilidad para los … › 1759 › articles-310035...los lineamientos de...

Documents