Este documento contiene recomendaciones sobre el diseño de la navegación y el uso del color en sitios web. Se discuten temas como la persistencia en el diseño, los menús de navegación, el uso de colores básicos, y los colores apropiados para enlaces y fondos de página. El objetivo es garantizar la usabilidad y accesibilidad de los sitios para todos los usuarios.

1. 31/03/2009
1

2. 31/03/2009
¿Es usable este diseño?
2

3. 31/03/2009
Navegación y arquitectura de la información
(lectura recomendada “Arquitectura de la información
para la WWW, Ed. McGraw‐Hill,2000) de Louis
para la WWW Ed McGraw Hill 2000) de Louis
Rosenfeld y Peter Morville
http://www.archive.org (versiones de sitios Web)
htt // hi ( i d iti W b)
•
http://www.escaladesports.com
•
www.blackmountainbicycles.com
www blackmountainbicycles com
•
www.sandiego.gov
•
www.cummins.com
•
www.pixar.com
•
www.ssa.gov
•
www.bathandbodyworks.com
•
www.nestle.com
•
www.wynnlasvegas.com
•
3

4. 31/03/2009
4

5. 31/03/2009
http://blackmountainbicycles.com/
• Te permite ordenar por precio pero ¿dónde
está el precio?¿Cómo se hace un pedido?
está el precio?¿Cómo se hace un pedido?
5

6. 31/03/2009
Práctica: Navegación
6

7. 31/03/2009
7

8. 31/03/2009
Navegación
• Garantizar la persistencia en el diseño, garantiza seguridad al
usuario:
i
– Ver siempre el nombre del sitio Web, su logotipo, colores
identidad.
• El área de navegación sencilla y global de la parte superior
aparezca visible y consistente en todo el sitio.
• Diferenciar enlaces de navegación del resto de contenidos.
• El usuario tiene que saber en todo momento:
– D dó d i
De dónde viene, dónde está, dónde puede ir.
dó d tá dó d di
8

9. 31/03/2009
Navegación
• Sistema básico:
GLOBAL
CONTEXTUAL
CO
LOCAL
9

10. 31/03/2009
Navegación
• Migas de pan:
– Ocupan poco (1 línea).
Ocupan poco (1 línea).
– Indican niveles anteriores a su ubicación para facilitar el
regresar a ellos.
– Construir en horizontal(en vertical se confunden con
naveg. sec.)
– Incluir ruta completa
Incluir ruta completa.
– Colores que contrasten.
– Evitar textos “usted está aquí” no aportan nada.
Evitar textos usted está aquí no aportan nada.
– Evitar en la página ppal.
– Utilizar el símbolo “>” en la composición de la ruta.
10

11. 31/03/2009
Navegación‐ Menús
• Barra horizontal superior es perfecta para la navegación ppal.
o global.
g
• Barra vertical para la secundaria o local.
• La navegación global es más sólida (menos cambios) que la
local.
• Dejar el crecimiento vertical para los menús locales.
• Las solapas aporta usabilidad es claro la categoría dónde está
Las solapas aporta usabilidad, es claro la categoría dónde está,
jerarquía fácil de identificar y eliminan la ambigüedad en la
navegación.
• Paginación es fácil para todo tipo de usuarios (similar a las pág.
de un libro)
11

12. 31/03/2009
Menús variedad
48
12

13. 31/03/2009
Menús Pop Up Comportamiento usuarios
49
13

14. 31/03/2009
50
14

15. 31/03/2009
Navegación‐Menús
• Menús desplegables verticales: lo breve es bello
– Cuanto más largas sea la lista del menú, más difícil de controlar.
– Cuanto más bajo del menú tengan que ir los usuarios más
probable es que pierdan su posición.
• Menús multinivel: menos es más
Menús multinivel: menos es más
– Utilizar menús horizontales con moderación. No mostrar más de
2 niveles.
– Un 3º nivel suele ser señal de problemas.
– Un 4º nivel hace que sean inmanejables los menús.
– Asegurarse que los menús dinámicos no son más largos que la
Asegurarse que los menús dinámicos no son más largos que la
página para ayudar al usuario a realizar su selección.
– Los usuarios funcionan “la distancia más corta entre 2 ptos. es la
línea recta. Tienden a arrastrar el ratón en diagonal hacia los
subniveles.
15

16. 31/03/2009
http://www.pirineos3000.com/servlet/Index
16

17. 31/03/2009
http://www.organize.com
17

18. 31/03/2009
http://www.escaladesports.com/harvard‐
game‐table/index.html
game table/index html
18

19. 31/03/2009
Técnicas de estilo de texto
• La selección de quot;colores básicosquot; de nuestro site se
debe mantener dentro del rango de 256 colores.
debe mantener dentro del rango de 256 colores
Ampliar el rango en elementos no fundamentales
(fotos, ilustraciones, etc.) pero debemos asegurarnos
que el 100% podrá acceder a nuestro site sin
problemas.
• Al h
A la hora de seleccionar los colores debemos
d li l l db
identificar las partes del site.
19

20. 31/03/2009
Colores en la Barra de Navegación
• Lo mejor es tener dos colores, para identificar el
elemento activo de la barra de navegación y para
elemento activo de la barra de navegación y para
identificar los elementos apagados. Es mejor si el
elemento activo avanza sobre los demás elementos
elemento activo quot;avanzaquot; sobre los demás elementos
con lo que colores cálidos (rojo, naranja) y saturados
se presentaran mas cercanos al usuario frente a
colores fríos (azul y verde) y poco saturados.
20

21. 31/03/2009
Colores en los enlaces
• Es recomendable conservar los colores estándar (azul
subrayado). Si decides cambiarlo, recuerda lo
subrayado) Si decides cambiarlo recuerda lo
siguiente: Los links tienen 2 estados (sin pulsar y
pulsado) por lo que tendrás que elegir un color
saturado para el estado sin pulsar y otro menos
saturado para el estado pulsado.
• Sin visitar (Link): Es el color de un link antes de ser
pulsado. El color azul es el normal.
• Visitado (Vlink): Es el color que presenta un link
cuando ha sido pulsado. El violeta (#CC33CC) es el
normal.
normal
21

22. 31/03/2009
Enlaces
• Si decidimos cambiar el color de los links, el sistema de color
que elijas sea similar al estándar.
– un color brillante para el estado de quot;no visitado“
– un color mas oscuro para los quot;enlaces visitadosquot;.
• Si el recurso no es de tipo HTML indicarlo de forma CLARA.
• Incluir tambien el tamaño (500KB,..).
• Si el idioma del recurso es distinto al de la página indicarlo
Si el idioma del recurso es distinto al de la página, indicarlo.
• Coherencia entre el texto que muestra y el título de la página a
la que enlaza.
• No incluir demasiados enlaces, cuidar la densidad.
22

23. 31/03/2009
El Color de Fondo
El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas
•
recomendable es el fondo blanco (#FFFFFF) o el amarillo claro (#FFFFCC).
( ) ( )
Otros colores claros son menos cómodos para leer, pero si tu site no exige
lecturas prolongadas, puedes usarlos para llamar la atención y conseguir
una lectura mas compulsiva.
Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto
en blanco (#FFFFFF). El amarillo y negro es una combinación que llamara la
atención pero tiene un significado mas estático. Por ultimo, no es
ió i i ifi d ái li
recomendable la combinación de rojo y negro.
23

24. 31/03/2009
Percepción de usuarios que debemos evitar
• El texto es demasiado pequeño o confuso. Utilice fuentes de
tamaño 10 o superiores.
p
• El texto no puede cambiarse de tamaño fácilmente.
• El color de texto tiene un contraste inadecuado en el fondo.
Utilice texto negro sobre fondos blancos.
• El texto queda oscurecido por lo elementos de diseño
circundantes. Evite los fondos demasiado llenos, mínimo texto
circundantes Evite los fondos demasiado llenos mínimo texto
en movimiento.
• No usar texto falso “lorem ipsum” muy habitual en
diseñadores. No notará que es ilegible.
24

25. 31/03/2009
• Práctica: Texto y contraste de colores
25

26. 31/03/2009
Práctica: Texto y contraste de colores
26

27. 31/03/2009
Cuerpo del texto: la regla de los 10 puntos
• Tipo de público (puntos)
– Público general 10‐12.
– Tercera edad y personas con problemas de visión 12‐14.
– Niños y otros lectores principiantes 12‐14.
– Adolescentes y jóvenes 10‐12.
• Probar diferentes tipos de letra
– Cuando el mismo tamaño parece más pequeño
Cuando el mismo tamaño parece más pequeño.
– Ver diferencias, 12pts (Georgiaa o Times New Roman).
• Contra las mayúsculas
Contra las mayúsculas
– Reduce la velocidad de lectura en un 10%.
– Aspecto de infantil, o agresivo y poco profesional.
– Sólo usar en encabezados cortos y títulos (y para gritar ;‐))
27

28. 31/03/2009
Práctica: Texto y contraste de colores
28

29. 31/03/2009
Imágenes de texto
• Los gráficos hacen que los archivos sean más
pesados.
d
• El texto basado en gráficos no es apto para la
búsqueda.
• El texto basado en gráficos no es
g
seleccionable.
• El texto gráfico no es escalable.
El texto gráfico no es escalable.
• Los lectores de pantalla no pueden leer texto
gráfico fácilmente.
gráfico fácilmente
29

30. 31/03/2009
Hojas de estilo
• Las hojas de estilo (CSS), permiten definir todo
el estilo en un único documento=>
el estilo en un único documento >
actualizaciones y mejoras en el aspecto del
site se simplifican y aceleran.
site se simplifican y aceleran
El documento se coloca en el servidor y se
El documento se coloca en el servidor y se
adjunta la llamada <link rel=quot;stylesheetquot;
href= MiHojaDeEstilo.css > en todas las
href=quot;MiHojaDeEstilo cssquot;> en todas las
paginas web en la parte del <head>
30

31. 31/03/2009
Usar CSS para diseñar la presentación del
contenido
contenido
• Este ejemplo presenta una cabecera, un menú
lateral y contenido. Es decir, el típico esquema
lateral y contenido Es decir el típico esquema
que cualquier site puede utilizar. Todos estos
elementos han sido definidos en la hoja de
elementos han sido definidos en la hoja de
estilo dejando el HTML limpio para el
contenido.
contenido
• Web Zen garden
• PDF ejemplos
31

32. 31/03/2009
Usar CSS para diseñar la presentación del
contenido
contenido
• Poder insertar mas información por página sin llegar a
aumentar el peso. Esta información puede venir en el formato
p p
de banners mas ricos, mejores promociones, mapas del web
mas completos.
• El peso por documento se puede ver rebajado en un 50%.
Este peso por documento se acumula y podemos ver como al
final de la actualización el site en global reduce su peso en
Megas =>optimización en la transferencia de datos.
32

33. 31/03/2009
Planificar es parte de la estrategia de éxito
Algunas claves:
• Estudiar los estilos actualmente aplicados para poder reciclar y
construir sobre una base evitando el quot;borrón y cuenta nuevaquot;.
• Conocer las necesidades de las diferentes partes que
Conocer las necesidades de las diferentes partes que
colaboraran dentro del site y saber transmitir posibilidades,
limitaciones.
• Aplicar un método de trabajo que permita quot;probar / cambiarquot;
lo necesario.
• No dar por bueno la version 1 0
No dar por bueno la version 1.0
• Pensar a lo grande, documentar, publicar guías.
33

34. 31/03/2009
Utilización actual de los colores de fondo
• Las cabeceras de los sitios web, el nombre y el logo, suelen
tener color de fondo en casi todos los sitios. Es información de
contexto poco relevante para el usuario y por ello es el área
más ignorada. En ningún caso se debe colocar un vínculo a
contenidos importantes del sitio en la cabecera o cercano a
contenidos importantes del sitio en la cabecera o cercano a
ella.
Los colores de fondo también se utilizan para intentar resaltar
L l df d bié ili i l
la publicidad, promociones y los contenidos del sitio que se
quieren potenciar, es decir, contenidos que el usuario no
busca, pero se quiere que vea.
34

35. 31/03/2009
Utilización actual de los colores de fondo
• En realidad el efecto es el contrario, el contenido con
fondo de color es anulado y cuanto mayor sea la
f dd l ld l
intensidad del color utilizado, menor será la
visibilidad de ese contenido.
visibilidad de ese contenido
35

36. 31/03/2009
Organizar información para los sitios Web
(Informe de César Martín URL: http://www.unosaficionados.com)
(Informe de César Martín URL: http://www unosaficionados com)
• Modulizar la información. para generar quot;fichas
producto
productoquot;
•B
Buscar palabras clave que agrupen los módulos y
lb l l ód l
generen las etiquetas de los menús.
• Generar páginas lanzadera: quot;Homequot;, secciones,
resultados de búsqueda...
resultados de búsqueda
36

37. 31/03/2009
1. Desmenuzar la información hasta el módulo básico
Empezar desde el interior hacia el exterior.
Ej: una quot;ficha productoquot; (podría ser un articulo de
j p (p
información, una foto, etc...)
Darle forma en todo detalle. Campos de información que lo
Darle forma en todo detalle Campos de información que lo
componen, tipo de campos (nombre, descripción, fecha
modificación, precio, dimensiones) longitud máxima de
dichos campos, fuente de estos campos.
37