31/03/2009

1

31/03/2009

2

¿Es usable este diseño?

31/03/2009

3

Navegación y arquitectura de la información (lectura recomendada “Arquitectura de la información para la WWW Ed McGraw Hill 2000) de Louispara la WWW, Ed. McGraw‐Hill,2000) de Louis Rosenfeld y Peter Morville

htt // hi ( i d iti W b)• http://www.archive.org (versiones de sitios Web)

• 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

31/03/2009

4

31/03/2009

5

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?

31/03/2009

6

Práctica: Navegación

31/03/2009

7

31/03/2009

8

Navegación

• Garantizar la persistencia en el diseño, garantiza seguridad al iusuario:

– Ver siempre el nombre del sitio Web, su logotipo, colores identidad.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 dó d tá dó d d i– De dónde viene, dónde está, dónde puede ir.

31/03/2009

9

Navegación

• Sistema básico:

GLOBAL

COLOCAL CONTEXTUAL

31/03/2009

10

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.

31/03/2009

11

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)

31/03/2009

12

Menús variedad

48

31/03/2009

13

Menús Pop Up Comportamiento usuarios

49

31/03/2009

14

50

31/03/2009

15

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.

31/03/2009

16

http://www.pirineos3000.com/servlet/Index

31/03/2009

17

http://www.organize.com

31/03/2009

18

http://www.escaladesports.com/harvard‐game table/index htmlgame‐table/index.html

31/03/2009

19

Técnicas de estilo de texto

• La selección de "colores básicos" de nuestro site se debe mantener dentro del rango de 256 coloresdebe 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.

A l h d l i l l d b• A la hora de seleccionar los colores debemos identificar las partes del site.

31/03/2009

20

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 paraelemento activo de la barra de navegación y para identificar los elementos apagados. Es mejor si el elemento activo "avanza" sobre los demás elementoselemento activo  avanza  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.

31/03/2009

21

Colores en los enlaces

• Es recomendable conservar los colores estándar (azul subrayado) Si decides cambiarlo recuerda losubrayado). 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 normalnormal.

31/03/2009

22

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 "no visitado“

– un color mas oscuro para los "enlaces visitados". 

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

31/03/2009

23

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 

ió i i ifi d á i l iatención pero tiene un significado mas estático. Por ultimo, no es recomendable la combinación de rojo y negro.

31/03/2009

24

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

31/03/2009

25

• Práctica: Texto y contraste de colores

31/03/2009

26

Práctica: Texto y contraste de colores

31/03/2009

27

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úsculasContra 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 ;‐))

31/03/2009

28

Práctica: Texto y contraste de colores

31/03/2009

29

Imágenes de texto

• Los gráficos hacen que los archivos sean más dpesados.

• El texto basado en gráficos no es apto para la búsqueda.

• El texto basado en gráficos no es gseleccionable.

• 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ácilmentegráfico fácilmente.

31/03/2009

30

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 aceleransite se simplifican y aceleran.

El documento se coloca en el servidor y seEl documento se coloca en el servidor y se adjunta la llamada <link rel="stylesheet" href="MiHojaDeEstilo css"> en todas lashref= MiHojaDeEstilo.css > en todas las paginas web en la parte del <head>

31/03/2009

31

Usar CSS para diseñar la presentación del contenidocontenido 

• Este ejemplo presenta una cabecera, un menú lateral y contenido Es decir el típico esquemalateral y contenido. Es decir, el típico esquema que cualquier site puede utilizar. Todos estos elementos han sido definidos en la hoja deelementos han sido definidos en la hoja de estilo dejando el HTML limpio para el contenidocontenido.

• Web Zen garden

• PDF ejemplos

31/03/2009

32

Usar CSS para diseñar la presentación del contenidocontenido • Poder insertar mas información por página sin llegar a 

aumentar el peso. Esta información puede venir en el formato p pde 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. 

31/03/2009

33

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 "borrón y cuenta nueva".

• Conocer las necesidades de las diferentes partes queConocer las necesidades de las diferentes partes que colaboraran dentro del site y saber transmitir posibilidades, limitaciones.

• Aplicar un método de trabajo que permita "probar / cambiar" 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. 

31/03/2009

34

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 acontenidos importantes del sitio en la cabecera o cercano a ella. 

L l d f d bié ili i lLos colores de fondo también se utilizan para intentar resaltar 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. 

31/03/2009

35

Utilización actual de los colores de fondo 

• En realidad el efecto es el contrario, el contenido con f d d l l d lfondo de color es anulado y cuanto mayor sea la intensidad del color utilizado, menor será la visibilidad de ese contenidovisibilidad de ese contenido.

31/03/2009

36

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 "fichas producto"producto  

B l b l l ód l• Buscar palabras clave que agrupen los módulos y generen las etiquetas de los menús. 

• Generar páginas lanzadera: "Home", secciones, resultados de búsquedaresultados de búsqueda... 

31/03/2009

37

1. Desmenuzar la información hasta el módulo básico 

Empezar desde el interior hacia el exterior. Ej: una "ficha producto" (podría ser un articulo de j p (pinformación, una foto, etc...) 

Darle forma en todo detalle Campos de información que loDarle 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.