31/03/2009




        1
31/03/2009




¿Es usable este diseño?




                                  2
31/03/2009




Navegación y arquitectura de la información 
(lectura recomendada “Arquitectura de la información 
para la ...
31/03/2009




        4
31/03/2009




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




Práctica: Navegación




                               6
31/03/2009




        7
31/03/2009




Navegación

• Garantizar la persistencia en el diseño, garantiza seguridad al 
  usuario:
        i
   – Ve...
31/03/2009




Navegación

• Sistema básico:
                GLOBAL

                CONTEXTUAL
                CO
       ...
31/03/2009




Navegación
• Migas de pan:
  – Ocupan poco (1 línea).
     Ocupan poco (1 línea).
  – Indican niveles anter...
31/03/2009




Navegación‐ Menús
• Barra horizontal superior es perfecta para la navegación ppal. 
  o global.
    g
• Bar...
31/03/2009




Menús variedad




                 48




                             12
31/03/2009




Menús Pop Up Comportamiento usuarios




                                       49




                    ...
31/03/2009




50




            14
31/03/2009




Navegación‐Menús
• Menús desplegables verticales: lo breve es bello
   – Cuanto más largas sea la lista del...
31/03/2009




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




                                                   16
31/03/2009




http://www.organize.com




                                 17
31/03/2009




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




                    ...
31/03/2009




Técnicas de estilo de texto
• La selección de quot;colores básicosquot; de nuestro site se 
  debe mantener...
31/03/2009




Colores en la Barra de Navegación

• Lo mejor es tener dos colores, para identificar el 
  elemento activo ...
31/03/2009




Colores en los enlaces
• Es recomendable conservar los colores estándar (azul 
  subrayado). Si decides cam...
31/03/2009




Enlaces
• Si decidimos cambiar el color de los links, el sistema de color 
  que elijas sea similar al está...
31/03/2009




El Color de Fondo

    El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas 
•
    recomend...
31/03/2009




Percepción de usuarios que debemos evitar
• El texto es demasiado pequeño o confuso. Utilice fuentes de 
  ...
31/03/2009




• Práctica: Texto y contraste de colores




                                                  25
31/03/2009




Práctica: Texto y contraste de colores




                                                26
31/03/2009




Cuerpo del texto: la regla de los 10 puntos

• Tipo de público (puntos)
   – Público general 10‐12.
   – Te...
31/03/2009




Práctica: Texto y contraste de colores




                                                28
31/03/2009




Imágenes de texto

• Los gráficos hacen que los archivos sean más 
  pesados.
       d
• El texto basado en...
31/03/2009




Hojas de estilo

• Las hojas de estilo (CSS), permiten definir todo 
  el estilo en un único documento=> 
 ...
31/03/2009




Usar CSS para diseñar la presentación del 
contenido 
contenido
• Este ejemplo presenta una cabecera, un me...
31/03/2009




Usar CSS para diseñar la presentación del 
contenido 
contenido
• Poder insertar mas información por página...
31/03/2009




Planificar es parte de la estrategia de éxito 

 Algunas claves:
 • Estudiar los estilos actualmente aplica...
31/03/2009




Utilización actual de los colores de fondo 
• Las cabeceras de los sitios web, el nombre y el logo, suelen ...
31/03/2009




Utilización actual de los colores de fondo 

• En realidad el efecto es el contrario, el contenido con 
  f...
31/03/2009




Organizar información para los sitios Web 
(Informe de César Martín URL: http://www.unosaficionados.com)
(I...
31/03/2009




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

   Empezar desde el interior hacia el exterior. 
   E...
Próxima SlideShare
Cargando en…5
×

Usabilidad y Convertibilidad 2

548 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
548
En SlideShare
0
De insertados
0
Número de insertados
7
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Usabilidad y Convertibilidad 2

  1. 1. 31/03/2009 1
  2. 2. 31/03/2009 ¿Es usable este diseño? 2
  3. 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. 4. 31/03/2009 4
  5. 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. 6. 31/03/2009 Práctica: Navegación 6
  7. 7. 31/03/2009 7
  8. 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. 9. 31/03/2009 Navegación • Sistema básico: GLOBAL CONTEXTUAL CO LOCAL 9
  10. 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. 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. 12. 31/03/2009 Menús variedad 48 12
  13. 13. 31/03/2009 Menús Pop Up Comportamiento usuarios 49 13
  14. 14. 31/03/2009 50 14
  15. 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. 16. 31/03/2009 http://www.pirineos3000.com/servlet/Index 16
  17. 17. 31/03/2009 http://www.organize.com 17
  18. 18. 31/03/2009 http://www.escaladesports.com/harvard‐ game‐table/index.html game table/index html 18
  19. 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. 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. 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. 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. 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. 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. 25. 31/03/2009 • Práctica: Texto y contraste de colores 25
  26. 26. 31/03/2009 Práctica: Texto y contraste de colores 26
  27. 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. 28. 31/03/2009 Práctica: Texto y contraste de colores 28
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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

×