Este documento presenta información sobre el diseño centrado en el usuario, investigaciones de seguimiento ocular, y las diferencias entre lectores digitales y lectores impresos. Incluye datos sobre el comportamiento de lectura de usuarios, recomendaciones para el diseño de sitios web, y ejemplos de estructuras y herramientas comunes para el diseño de sitios web.

1. Eyetrack
y diseño centrado en el usuario

2. Las investigaciones de Eyetrack
(‘rastreo’ o ‘seguimiento’ de ojo’)

4. El patrón en F
El patrón en F, advierte Jakob Nielsen, algunas veces adquiere
la forma de E. Las flechas indican la trayectoria

5. Datos
• Mientras que el tiempo medio que los lectores dedican al diario impreso
es de 20 minutos, en el caso de la Web dicho lapso se reduce a siete
minutos.
• El 79 por ciento de los usuarios no lee el texto completo. Sólo el 16 por
ciento lee palabra por palabra (Jacob Nielsen).
• Los usuarios que leen en sitios de Internet tienden a enfocar primero el
texto del artículo y mirar luego las fotos y gráficos.
• No se deben utilizar textos parpadeantes o deslizantes, ya que dificultan la
tarea de leer y hacen difícil prestar atención a otro punto de la página.
Fuente: Manual de estilo de LaVoz.com.ar http://archivo.lavoz.com.ar/institucional/pdf/manual.pdf

6. Datos
•
Un estudio de Nielsen y Morkes (1997) muestra que el lenguaje conciso y objetivo,
así como una estructura ojeable (escaneable), aumentan la usabilidad de un sitio
web en 124 por ciento. Éstas las principales conclusiones:
•
Los textos deben ser cortos y precisos pero atractivos y bien escritos. Deberían ser
la mitad de largos que los destinados a las ediciones impresas. Es aconsejable
dividir los artículos en bloques de texto de no más de 500 palabras y ubicarlos en
páginas diferentes del mismo sitio, aunque enlazados.
•
En general, la lectura es superficial. Sin embargo, cuando se encuentra algo de
interés es más profunda (más del 75 por ciento del texto elegido).
•
La extensión de los párrafos no debe superar las cinco o seis líneas on line, no
como se ven en los procesadores de texto sino tal como aparecen en pantalla. Esto
porque según estudios recientes, la lectura en pantalla es un 25 por ciento más
lenta que en papel, por lo cual la extensión de los textos deben ser la mitad de
larga.
•
Fuente: Manual de estilo de LaVoz.com.Ar http://archivo.lavoz.com.ar/institucional/pdf/manual.pdf

7. Lector digital vs Lector impreso
• El lector digital necesita que el medio jerarquice las noticias. El
lector del impreso tiene varios puntos de entrada a las páginas,
aunque puede ser influido por la tipografía, el tamaño de los títulos
y el espacio dado a determinada información.
• El lector digital necesita conocer la hora de la actualización de la
información. El lector del impreso sabe que está leyendo noticias
de ayer.
• El lector digital tiene la posibilidad de elegir de inmediato, sin salir
de su computadora. El lector del impreso no puede abandonar con
un clic el periódico y debe someterse a los contenidos que le
impone este medio.
•
Fuente: Manual de estilo de LaVoz.com.Ar http://archivo.lavoz.com.ar/institucional/pdf/manual.pdf

8. Lector digital vs Lector impreso
• El lector digital no tiene mucho tiempo: el contenido debe ser
rápido, directo, fluido, totalizador. El lector del impreso tiene
tiempo para leer, necesita profundidad, contextos, referentes. Tiene
el hábito de volver a leer lo que le ha interesado. El lector del
impreso utiliza el periódico como un documento cuando lo
considera necesario.
• El lector digital necesita selección adecuada de contenidos, no
abundancia. El lector del impreso quiere mucho material para leer,
prefiere seleccionar él lo que le ofrece el menú del periódico.
• El lector digital ya piensa en multimedia: texto, audio, video,
animación. El lector del impreso privilegia el texto escrito y la
fotografía como elementos principales de la información.
•
Fuente: Manual de estilo de LaVoz.com.ar http://archivo.lavoz.com.ar/institucional/pdf/manual.pdf

9. Lector digital vs Lector impreso
•
El lector digital necesita rapidez, contundencia y economía de lenguaje. El lector
del impreso acepta de manera inconsciente las repeticiones de ideas, porque las
páginas de un periódico de papel están diseñadas con el concepto de entradas
múltiples.
•
El lector digital no tiene límites: su periódico se actualiza en forma permanente y
no cesa de entregarle nueva información. El lector del impreso tiene un límite: la
edición que tiene en sus manos se cerró a determinada hora y siempre estará
desactualizada en relación con el medio digital.
•
Tiende a ser más especializado. Será parte de una comunidad virtual, personas
que comparten los mismos intereses aunque estén localizados a grandes distancias
uno del otro.
•
Fuente: Manual de estilo de LaVoz.com.Ar http://archivo.lavoz.com.ar/institucional/pdf/manual.pdf

10. El lector digital, además:
• Busca sólo las noticias que le interesan. Quiere tener la oportunidad
de elegir, entre una amplia oferta, aquella información que le afecte
según sus condiciones y aspiraciones personales.
• Tiene conocimientos de multimedia, sabe algo de informática, le
interesan las nuevas tecnologías.
• Le gusta descubrir cosas: no es pasivo y explora Internet hasta
encontrar las páginas que más le atraigan a sus inquietudes de
información y entretenimiento. Demanda innovación permanente.
Fuente: Rubén Darío Butrón. Ponencia presentada en Quito, Ecuador, entre el 24 y el 28 de
noviembre de 2003. Publicada en Sala de Prensa, URL: http://www.saladeprensa.org

11. El lector digital, además:
• Es joven o tiene actitud joven. Es una generación menos
lectora o refractaria a la solución monomediática de lo
impreso y es más abierta a códigos visuales, diseño,
interactividad, efectos tecnológicos, etcétera.
• Se siente más cercano al equipo de redacción de los
periódicos digitales. La interactividad y la inmediatez que
ofrece Internet le da la posibilidad de sentirse parte de la
redacción, de charlar con los editores, cuestionar su trabajo y
ser parte del periódico al proporcionar información.
• Lee Internet en forma discriminada. Sólo entra y se queda en
aquello que le interesa.
•
Fuente: Rubén Darío Butrón. Ponencia presentada en Quito, Ecuador, entre el 24 y el 28 de
noviembre de 2003. Publicada en Sala de Prensa, URL: http://www.saladeprensa.org

12. Estructura de un sitio web
•
•
•
•
Zona 1: Cabecera
Zonas 2 y 4: Navegación
Zona 3: Contenido
Zona 4: Pie de página
•
Fuente: Javier Casares
http://www.javiercasares.com/

13. Estructura de un sitio web

14. Cabecera:
•
•
•
•
•
•
Nombre del sitio
Logo
Buscador
Publicidad
Información de contexto
Redes sociales
Fuente: Javier Casares http://www.javiercasares.com

15. Navegación
• Menús
• Enlaces a ciertos contenidos destacados
• Módulos (Galerías de imagen, videos, audios,
comentarios, noticias recientes, lo más
popular, publicidad, hemerotecas, baners, )
• Widgets de redes sociales.
• Servicios (clima, clasificados, guías, etc.)
•
Fuente: Javier Casares http://www.javiercasares.com

16. Contenido
• Diarios digitales: Noticias (formato
multimedia,
• Sitio web institucional: Noticias, documentos,
actividades, convocatorias).
• Sitio web de Universidad: Oferta académica
•
Fuente: Javier Casares http://www.javiercasares.com

17. Pie de página
•
•
•
•
•
•
•
Enlaces a datos legales correspondientes a cada país.
Servicios
Mapas de sitios
Logos de apoyos o patrocinios
Dirección de contacto
Créditos
Términos y condiciones
•
Fuente: Javier Casares http://www.javiercasares.com

18. Wireframes

19. Qué es un wireframe
• “Es la metodología que permite hacer diseños simplificado
detallando su estructura y los elementos relevantes que se
incorporarán para atender a las “personas” que llegan a
visitar el sitio web o espacio digital que se desarrolla”. Juan
Carlos Camus.
• “Un wireframe o dibujo esquemático, es
una representación visual muy sencilla del “esqueleto” o
estructura de una página web (o aplicación web), se lo
utiliza como un primer paso que sentará las bases del resto
del diseño. El objetivo es definir sencillos bloques de
contenido y su posición, incluyendo navegación, elementos
de la interfaz, bloques de contenido y analizar como éstos
funcionarán entre sí”.

20. Un wireframe grafica básicamente:
• Elementos de navegación: menús, accesos directos e
hipervínculos.
• Elementos de información: contenidos de texto o
multimedia.
• Elementos de interacción: herramientas o funcionalidades
que el usuario puede realizar.
• Elementos de publicidad: espacio dedicado a banners
publicitarios o a destacados internos del propio producto.

22. Plantillas

28. Cuadrícula de 12 columnas
Columnas 60px, espacio 20px. Total 960px.

30. Ejemplos:
•
•
•
•
•
•
El Clarín http://www.clarin.com/
Los Tiempos http://www.lostiempos.com/
El País http://elpais.com/
La Razón http://www.la-razon.com/
Página Siete http://www.paginasiete.bo
Erbol http://erbol.com.bo/

31. Herramientas
•
Mockflow: cuenta con una librería de plantillas donde podrás elegir la más
adecuada para organizar tu contenido web. Si bien es gratuito, existe una versión
de pago para usuarios que necesiten funciones más avanzadas.
•
Mockingbird: permite crear y compartir wireframes online. Interfaz drag and
drop muy simple de utilizar, interfaz limpia y fácil de usar.
•
Lovely Charts: herramienta online gratuita para crear el esquema de tu sitio web.
Ideal para quienes buscan una alternativa simple para diseñar su wireframe.
•
Cacoo: es una herramienta fácil de utilizar para
crear wireframes completamente online. Su característica más destacable es la
posibilidad de colaborar entre usuarios en tiempo real.
•
Gliffy: otra herramienta gratuita y online para crear mockups de tu sitio web.
Cuenta con una librería de esquemas y con una API para que los desarrolladores
puedan integrar la herramienta con sus aplicaciones