Eyetrack y diseño centrado en el usuario

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

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

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

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

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

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

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

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

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

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/

Estructura de un sitio web

Cabecera:

• Nombre del sitio• Logo• Buscador• Publicidad • Información de contexto• Redes sociales

Fuente: Javier Casares http://www.javiercasares.com

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

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

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

Wireframes

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í”.

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.

Plantillas

Cuadrícula de 12 columnasColumnas 60px, espacio 20px. Total 960px.

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/

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