Lineamientos de diseño y usabilidad para los … › 1759 › articles-310035...Los Lineamientos de...
Transcript of 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
Lineamientos de diseño y usabilidad para los
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
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
Lineamientos de diseño y usabilidad para los
Sistemas de Información
Ministerio deEducación Nacional
República de Colombia
3
Formularios
Botones
Lineamientos de diseño y usabilidad para los
Sistemas de Información
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
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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.
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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*
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
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
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
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
8
Arial Normal
Arial Bold
Arial Cursiva
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
Lineamientos de diseño y usabilidad para los
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia
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
Sistemas de InformaciónMinisterio de
Educación NacionalRepública de Colombia