Continuando el tema del artículo anterior, discutiremos brevemente los componentes de un sitio y como impactan en su usabilidad.
Todo sitio Web es la interacción de tres componentes: contenido, navegación y diseño gráfico. A continuación discutiremos brevemente cada uno de ellos.
El contenido
Los estudios de usabilidad señalan que se puede mejorar la facilidad de uso del sitio en 150% sólo re-escribiendo el contenido. Hay que tener en consideración que escribir para la Web es muy diferente de escribir para medios impresos, porque:
- El 79% de los usuarios escanean la página en vez de leerla
- La lectura desde la pantalla es 25% más lenta
En el sur de Chile la exuberante naturaleza protegida en parques nacionales no deja a nadie indiferente. Un paisaje acompañado por ríos para los que aman el deporte aventura, rodeados de volcanes y hermosos lagos. Belleza que se une a la isla de Chiloé, para muchos un paraíso en la tierra, hogar de un pueblo ante todo amistoso, autor de fantásticos mitos. Los fiordos y glaciares de la Patagonia impresionan por su majestuosidad, sumado a circuitos de trekking de fama internacional como el de Torres del Paine y lugares de gran atractivo, como los alrededores de la Carretera Austral y Tierra del Fuego. En la Antártica, los hielos eternos dan vida a un mágico escenario blanco. | En el sur de Chile la exuberante naturaleza no deja a nadie indiferente, encontrando distintas atracciones:
|
Es muy probable que ustedes ni siquiera hayan leído el texto de la izquierda ¿verdad?.
La navegación
La página principal (“home”) es la primera página que el usuario verá, por lo tanto se debe prestar especial atención a su diseño. Todas las páginas del sitio deben tener un enlace a ella, porque es posible que se llegue a una página más profunda que la inicial desde los resultados de una búsqueda, y por tanto debe ser posible acceder al home desde cualquier parte.
Los usuarios normalmente esperan que la barra de navegación general esté ubicada arriba debajo del encabezado de la página o al lado izquierdo. Esto no significa que todos los sitios tengan la misma estructura, pero si que la organización sea lo más explícita posible para el usuario. Como veremos en la siguiente sección, esto puede hacerse creativamente.
Los invito a revisar dos breves artículos sobre indicaciones de principios de diseño de navegación y algunas opciones que usar.
El diseño gráfico
Debe crear una lógica visual, un balance óptimo entre la sensación visual e información gráfica y textual porque:
- En su atractivo reside la motivación de leer
- Una continuidad visual y funcional de la organización, diseño gráfico y tipografía es esencial para convencer a los usuarios que encontrarán información actualizada, precisa y útil
Mucha gráfica puede aumentar el tiempo de descarga. No olvidemo que todos somos impacientes. Entonces el diseño gráfico debe ser atractivo, pero al mismo tiempo eficiente.
El diseño gráfico debe ser el punto de partida en vez del final del diseño orientado al usuario, porque es como los efectos especiales de una película, deben servir a la historia y no ser una excusa para el argumento. Y en este caso la gente después de breves segundos no verá su película.
Hay formas menos tradicionales de navegar por una página, pero que no rompen totalmente con lo ya conocido, gracias a un cuidado diseño gráfico. Un ejemplo es la página de Ingeniería del MIT. Otros ejemplos de navegación no convencional las podemos ver en el blog de SitePoint y en el de Onextrapixel.
 |  |
Ejemplos de diseño de layout de la página siguiendo la regla de 7±2 lo pueden encontrar aquí, aunque el autor del blog lo confunde con 5.
Qué leer o mirar
DesignVitality (2007) 100 Unconventional Sources for Web Design Inspiration.
ILT (2008) A guide to web typography.
Nielsen, J. (2003) Misconceptions About Usability.
OnextraPixel(2009)
- 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
- 12 Navigation Options That Help Users Navigate Through Your Website Effectively.
- The Art Of Applying Rule Of Five(sic) Plus Or Minus Two For An Effective Wireframe
- The Characteristics of a Less Conventional Website with Examples.
- Importance of Great Web Typography & Excellent Examples
WebMonkey (2010) Web Typography Tutorial.
Dombrovskaia, L. (2010) Tips para el diseño de páginas web usables - primera parte. Disponible en http://www.intelectivo.com/2010/08/tips-para-el-diseno-de-paginas-web_26.html
Próximamente: los errores más frecuentes del diseño en web.