203
Cómo escribir para la Web Lima, 5 de noviembre de 2009 [email protected]

Como Escribir Para La Web Taller Guillermo Franco En Udep

Embed Size (px)

DESCRIPTION

La web es un medio diferente donde las reglas sobre el comportamiento de los usuarios tienen poco que ver con las que funcionan en el medio impreso.

Citation preview

Page 1: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Cómo escribir para la Web

Lima, 5 de noviembre de 2009

[email protected]

Page 2: Como Escribir Para La Web  Taller Guillermo Franco En Udep
Page 3: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Hipótesis

• Escribir para Internet es “absolutamente diferente” que hacerlo para otros medios, en particular los impresos.

• La web es un medio diferente donde las reglas sobre el comportamiento de los usuarios tienen poco que ver con las que funcionan en el medio impreso.

Page 4: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido en bancarrota

• Se vacía el contenido de publicaciones impresas: “shovelware”.

• Se considera a Internet un barril sin fondo, donde hay espacio para las versiones ladrillo o solo los documentos.

Page 5: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Los primeros estudios de Eyetrack

Page 6: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Los primeros estudios de Eyetrack

Page 7: Como Escribir Para La Web  Taller Guillermo Franco En Udep

“Eyetrack” para periódicos en línea

• Investigación realizada por el Poynter Institute y la U. de Stanford. Presentada en marzo de 2000.

• 67 sujetos reclutados a través de promocionales en el Chicago Sun-Times y el St. Petersburg Times.

• Los usuarios navegaron por 211 sitios de noticias, vieron cerca de 6.000 páginas.

• Promedio de sitios visitados: seis.

Page 8: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones “eyetrack”

• Los usuarios del sitio de noticias tienden a mirar primero y más intensamente el texto. Pasan por alto fotos e imágenes en la búsqueda de información textual significativa.

• Las historias cortas fueron tres veces más vistas que las largas.

• En general, la lectura es superficial, pero cuando se encuentra algo de interés es más profunda (se lee más del 75 por ciento del texto elegido).

• La calidad de los textos es importante para los usuarios.

Page 9: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Sea breve. Escriba no más del 50 por ciento del texto que usted hubiera usado para cubrir el mismo material en una publicación impresa.

• La investigación ha demostrado que la lectura en computador es alrededor de 25 por ciento más lenta que la lectura en papel. Como resultado, la gente no desea leer grandes cantidades de texto en las pantallas.

Guías de escriturade Jakob Nielsen (et al.)

Page 10: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escriturade Jakob Nielsen (et al.)

• Sea breve. Escriba no más del 50 por ciento del texto que usted hubiera usado para cubrir el mismo material en una publicación impresa.

• La investigación ha demostrado que la lectura en computador es alrededor de 25 por ciento más lenta que la lectura en papel. Como resultado, la gente no desea leer grandes cantidades de texto en las pantallas.

Page 11: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

• Escriba para poder encontrar las cosas (Diseño escaneable). No pida a los usuarios leer largos bloques de texto; en lugar de ello, use párrafos cortos, subtítulos y listas con puntos.

• Los usuarios tienden a no leer chorros de texto completo. A cambio, lo escanean (o si se quiere hacen un barrido) y escogen palabras clave, oraciones y párrafos de su interés, mientras “brincan” sobre aquellas partes del texto que les importan menos.

Page 12: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

• Nielsen y su colega John Morkes hicieron un estudio en el que encontraron que 79 por ciento de los usuarios siempre escaneaban cualquier página; solo un pequeño número leía palabra por palabra.

Page 13: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

• Además del cansancio que provocan las pantallas de computador, se enuncian las siguientes como posibles razones para que la gente escanee:– La web es un medio dirigido por el usuario. Este

tiene que moverse y hacer click en las cosas.– Cada página tiene que competir con millones.– La gente no tiene tiempo.

Page 14: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

• Formas de romper la uniformidad y crear un diseño escaneble:

Page 15: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

– Divida temáticamente el texto, si es posible, e identifíquelos con intertítulos.

• Identifíquelos con intertítulos• Mueva párrafos, de ser necesario.

Page 16: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

– Use párrafos cortos.

Page 17: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

– Use listados.• Estructura paralela• Número de ítems en una enumeración.

Page 18: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

– Diferenciación por color.• Negrilla• Enlaces.

Page 19: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Guías de escritura de Jakob Nielsen (et al.)

Page 20: Como Escribir Para La Web  Taller Guillermo Franco En Udep

– Nielsen y otros teóricos, como Crawford Kilian (autor de Writing for the web), recomiendan utilizar el principio de la pirámide invertida.

Guías de escritura de Jakob Nielsen (et al.)

Page 21: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Hay que comenzar cada página por las conclusiones.

• Los elementos más importantes al comienzo y los menos importantes al final.

• En la estructura de pirámide invertida, usted pone la información más importante (quién, qué, dónde, cuándo, por qué y cómo) primero. Los detalles y contexto van al final.

Page 22: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Estructura de la pirámide invertida :– El lead o entrada– El material que explica y amplifica el lead– El contexto necesario– Material secundario o menos importante.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 23: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Estructura de la pirámide invertida :– El lead o entrada– El material que explica y amplifica el lead– El contexto necesario– Material secundario o menos importante.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 24: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Estructura de la pirámide invertida :

Page 25: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Estructura de la pirámide invertida :

Page 26: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Estructura de la pirámide invertida :

Page 27: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Estructura de la pirámide invertida :

Page 28: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

Page 29: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

Page 30: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¿Y si no está escrito para Internet?

Page 31: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¿Y si no está escrito para Internet?

•¡Reescriba!

Page 32: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Ejemplos de reedición

• Veamos textos reescritos:

Page 33: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– Es recomendable entregar una idea por

párrafo. Con frecuencia, los usuarios que están escaneando el texto leerán solo la primera oración. Si usted cubre muchos temas en un simple párrafo, muchos usuarios nunca conseguirán ver la segunda idea, si la primera no detiene su ojo mientras escanean la página.

Page 34: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales redacción (Nielsen et al.)– Conserve los párrafos y oraciones

cortas. Según Kilian, los bloques de texto en la web deberían tener no más de 75 palabras cada uno.

Page 35: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales redacción (Nielsen et al.)– Conserve los párrafos y oraciones

cortas. Según Kilian, los bloques de texto en la web deberían tener no más de 75 palabras cada uno.

Page 36: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales redacción (Nielsen et al.)– Corte la palabrería. Empaquete el

máximo de información en el mínimo de texto.

Page 37: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– La frase larga es enemiga de la buena lectura.

• Resulta difícil leer una frase de más de 30 palabras.

• Resulta casi imposible mantener la claridad de una frase cuando excede las 55 palabras.

• Frases de más de 70 palabras no son frases: son emboscadas.

• Es recomendable usar frases que se mantengan por debajo de las 20 ó 30 palabras.

Page 38: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– La frase larga es enemiga de la buena lectura.

• Resulta difícil leer una frase de más de 30 palabras.

• Resulta casi imposible mantener la claridad de una frase cuando excede las 55 palabras.

• Frases de más de 70 palabras no son frases: son emboscadas.

• Es recomendable usar frases que se mantengan por debajo de las 20 ó 30 palabras.

Page 39: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– Efectos secundarios de la frase larga.

- Comitis: como hay que separar de alguna manera las partículas de la oración, el redactor arroja una manotada de comas sobre el texto gris.

-Queísmo: hilar trozos de una frase demanda el uso de relativos (que, quien, donde).

Concordancia: una frase larga generalmente obliga a mantener distantes los elementos d ela oración. Eso se vuelve terreno abonado para que un sujeto en singular termine con un verbo en plural o un participio pasado en femenino se arrime a un sujeto masculino.

Page 40: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– Efectos secundarios de la frase larga.

- Comitis: como hay que separar de alguna manera las partículas de la oración, el redactor arroja una manotada de comas sobre el texto gris.

-Queísmo: hilar trozos de una frase demanda el uso de relativos (que, quien, donde).

Concordancia: una frase larga generalmente obliga a mantener distantes los elementos d ela oración. Eso se vuelve terreno abonado para que un sujeto en singular termine con un verbo en plural o un participio pasado en femenino se arrime a un sujeto masculino.

Page 41: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– Efectos secundarios de la frase larga.

- Comitis: como hay que separar de alguna manera las partículas de la oración, el redactor arroja una manotada de comas sobre el texto gris.

- Queísmo: hilar trozos de una frase demanda el uso de relativos (que, quien, donde).

Concordancia: una frase larga generalmente obliga a mantener distantes los elementos d ela oración. Eso se vuelve terreno abonado para que un sujeto en singular termine con un verbo en plural o un participio pasado en femenino se arrime a un sujeto masculino.

Page 42: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.):– Efectos secundarios de la frase larga.

- Comitis: como hay que separar de alguna manera las partículas de la oración, el redactor arroja una manotada de comas sobre el texto gris.

- Queísmo: hilar trozos de una frase demanda el uso de relativos (que, quien, donde).

- Concordancia: una frase larga generalmente obliga a mantener distantes los elementos de la oración. Eso se vuelve terreno abonado para que un sujeto en singular termine con un verbo en plural o un participio pasado en femenino se arrime a un sujeto masculino.

Page 43: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use verbos fuertes. Escriba, por ejemplo,

“decidir” en lugar de “tomar una decisión”, “usa” en lugar de “hacer uso”, o “encuestar” en lugar de “hacer una encuesta”.

Page 44: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use verbos fuertes. Escriba, por ejemplo,

“decidir” en lugar de “tomar una decisión”, “usa” en lugar de “hacer uso”, o “encuestar” en lugar de “hacer una encuesta”.

Escriba, por ejemplo, “decidir” en lugar de “tomar una decisión”, “usa” en lugar de “hacer uso”, o “encuestar” en lugar de “hacer una encuesta”.

Page 45: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use la voz activa. La voz pasiva pone la

atención en la acción, no en los actores. En términos prácticos y desde el punto de vista de la economía, la voz pasiva alarga las frases.

– Veamos un ejemplo: “usted cometió un error” (voz activa, 4 palabras). “Un error fue cometido por usted” (voz pasiva, 6 palabras). Además, en muchos casos, la voz pasiva le resta fuerza a la frase.

Page 46: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use la voz activa. La voz pasiva pone la atención

en la acción, no en los actores. En términos prácticos y desde el punto de vista de la economía, la voz pasiva alarga las frases.

– Veamos un ejemplo: “usted cometió un error” (voz activa, 4 palabras). “Un error fue cometido por usted” (voz pasiva, 6 palabras). Además, en muchos casos, la voz pasiva le resta fuerza a la frase.

Page 47: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use la voz activa. La voz pasiva pone la atención

en la acción, no en los actores. En términos prácticos y desde el punto de vista de la economía, la voz pasiva alarga las frases.

– Veamos un ejemplo: “usted cometió un error” (voz activa, 4 palabras). “Un error fue cometido por usted” (voz pasiva, 6 palabras). Además, en muchos casos, la voz pasiva le resta fuerza a la frase.

Page 48: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertidaa la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Use la voz activa. Relación entre el abuso

político y el abuso del lenguaje: cómo los los líderes corruptos usan la voz pasiva para obscurecer las verdades indecibles y evadir la responsabilidad por sus acciones: “Debe ser admitido después de que el reporte fue revisado que fueron cometidos errores”, en lugar de “Leí el reporte y admito que cometí un error”. (Ref: Politics and the English Language, George Orwell.)

Page 49: Como Escribir Para La Web  Taller Guillermo Franco En Udep

De la pirámide pervertida a la pirámide invertida

• Guías generales de redacción (Nielsen et al.)– Cuídese de las metáforas extendidas.

Page 50: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Eyetrack III, información básica

• Autores: Poynter Institute, Estlow Center for Journalism & New Media, y Eyetools.

• Metodología: observación de 46 sujetos por una hora mientras sus ojos seguían sitios web noticiosos creados específicamente para las pruebas. Es una mezcla de ‘hallazgos’ basados en variables controladas, y ‘observaciones’ en las cuales no se realizó un control exhaustivo de las pruebas.

Page 51: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Tecnología del Eyetrack III

Page 52: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Representación simplista del patrón más común de movimiento de ojo que notaron los investigadores a través de múltiples diseños de páginas de inicio. Video.

Page 53: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Los titulares dominantes con más frecuencia atraen la atención cuando se ingresa a la página – especialmente cuando están en la parte superior izquierda, y con más frecuencia (pero no siempre) cuando están en la parte superior derecha-.

Page 54: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Con las páginas de inicio noticiosas, los ‘instintos’ de los lectores están para mirar primero la bandera/logo y los titulares principales en la parte superior izquierda. – Veamos el comportamiento:

• http://www.poynterextra.org/eyetrack2004/hp2.htm

• http://www.poynterextra.org/eyetrack2004/hp7.swf

Page 55: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• La gráfica muestra las zonas de importancia que se formularon a partir de los datos del Eyetrack. Aunque cada sitio es diferente, usted podría mirar en su propio sitio y ver qué contenido tiene en cuáles zonas.

Page 56: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Tipografías más pequeñas motivan el comportamiento de visión enfocada –(esto es, leer las palabras), mientras que las tipografías más grandes promueven el escaneo.

Page 57: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Tipografías más pequeñas motivan el comportamiento de visión enfocada –(esto es, leer las palabras), mientras que las tipografías más grandes promueven el escaneo.

Page 58: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Particularmente interesante fue el comportamiento de la gente cuando había titulares y ‘blurbs’ usados en las páginas de inicio. Los participantes en las pruebas del Eyetrack III tendían a ver ambos, el titular y el ‘blurb’, cuando el titular estaba en negrita y del mismo tamaño del texto del ‘blurb’ y que precedía el anuncio en el mismo renglón.

Page 59: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Con el titular más grande que el ‘blurb’ y en una línea separada, la gente tendía a ver los titulares y saltar los ‘blurbs’; escaneaban los titulares a través de la página más que el grupo que miraba los titulares más pequeños.

• Subrayar los titulares desanimó a quienes participaron en las pruebas de leer los ‘blurbs’ en la página de inicio.

Page 60: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Este es el ‘heatmap’(Un ‘heatmap’ -mapa de zonas calientes-) es una vista agregada de todas las fijaciones de ojo de los sujetos de la prueba. Abajo, el área naranja fue la más vista, las áreas azules, la menos.

Page 61: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Con una lista de titulares en una página de inicio, podemos ver dónde miró la gente y, de nuevo, más frecuentemente es el lado izquierdo de los titulares. En promedio, un titular tiene menos d eu minuto de atención del usuario.

Page 62: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• La gente típicamente escanea hacia abajo una lista de titulares, y con frecuencia no los ve completamente. Si las primeras palabras los animan, tienen la tendencia de continuar. En promedio, un titular tiene menos de un segundo de la atención de los visitantes.

Page 63: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Patrón de lectura en F

Page 64: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Patrón de lectura en F

Page 65: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Patrón de lectura en F

Page 66: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Patrón de lectura en F

Page 67: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

Page 68: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• Ruptura por temas:– Divida en bloques temáticos, identificados por

intertítulos.

Page 69: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• Ruptura por temas:– Divida en bloques temáticos, identificados por

intertítulos.

Page 70: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• Ruptura por temas:– Utilice enumeraciones.

• Cree una estructura paralela• Limite el número de ítems en la enumeración • No utilice números para identificar los ítems en la enumeración

Page 71: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• Ruptura por temas:– Utilice enumeraciones.

• Cree una estructura paralela• Limite el número de ítems en la enumeración • No utilice números para identificar los ítems en la enumeración

Page 72: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

Page 73: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

Page 74: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• La navegación:– La navegación ubicada en la parte superior de

la página de inicio se desempeñó mejor –esto es, fue vista por el mayor porcentaje de sujetos de prueba y mirada por la más larga duración.

Page 75: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Rompa la uniformidad del texto

• La navegación:– La navegación ubicada en la parte superior de

la página de inicio se desempeñó mejor –esto es, fue vista por el mayor porcentaje de sujetos de prueba y mirada por la más larga duración.

Page 76: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

Page 77: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• ¿La navegación?– En las pruebas se observó mejor uso (más

fijaciones de ojo y miradas de más larga duración) con navegación en la columna derecha que con la izquierda. Aunque en esto podría haber jugado el factor novedad –la gente no está acostumbrada a ver navegación al lado derecho- podría indicar que no hay razón para no colocar la navegación en esta posición de la página y usar la columna izquierda para contenido editorial o avisos publicitarios.

Page 78: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Explicaciones a la presunta mayor efectividad de la barra derecha de navegación:– “Porque la barra de ‘scroll’ del navegador

normalmente está al lado derecho. Y tener todos los objetos en un lado de la pantalla requiere menos movimientos de ratón”, Adrian Holovaty.

– “Entre más tiempo gaste la gente en una barra de navegacón, menos efectiva es”, Alan Jacobson, Brass Tacks Design.

Page 79: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Explicaciones a la presunta mayor efectividad de la barra derecha de navegación:– “Tener usuarios que gasten más tiempo en una

tarea no es una indicación de buen diseño sino de mal diseño. Ya que la gente está acostumbrada a encontrar la navegación en la izquierda o en la parte superior, es ahí donde debería permanecer”, Jakob Nielsen.

Page 80: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• El diseño del artículo, el estilo de la escritura– Los párrafos más cortos se desempeñaron

mejor que los más largos en la investigación del Eyetrack III. Nuestros datos revelaron que historias con párrafos cortos recibían el doble de atención visual que aquellos con párrafos más largos. El formato de párrafos largos parece desestimular su observación.

Page 81: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• El diseño del artículo, el estilo de la escritura– Los resultados del Eyetrack III mostraron que

el formato estándar de una columna se desempeñaba mejor en términos del número de fijaciones de ojo –en otras palabras, la gente miraba más-. Sin embargo, hay que tener en cuenta que los hábitos podrían variar estos resultados. Ya que la mayoría de gente está acostumbrada a los artículos web a una columna, la sorpresa de ver texto en tres columnas podría haber afectado su comportamiento visual.

Page 82: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

Page 83: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Las fotos en las páginas de los artículos:– Los sujetos de prueba típicamente miraron los

elementos de texto antes que sus ojos aterrizaran en una foto acompañante, justo como en las páginas de inicio.

Page 84: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Utilización de sumarios introductorios a las notas:– Cuando la gente vio el párrafo introductorio

entre 5 y 10 segundos –como fue normalmente el caso- su comportamiento promedio de lectura del resto del artículo fue aproximadamente el mismo que cuando veían artículos sin un párrafo de sumario. El párrafo de sumario no hacía la diferencia en términos de cuánto era consumida la historia.

Page 85: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Sobre la publicidad:– Lo primero que se notó es que la gente con

frecuencia ignora los avisos, pero que la ubicación importa. Cuando de verdad se quedan mirando un aviso es solo durante 0,5 o 1,5 segundos. La buena ubicación y el formato correcto pueden mejorar estas cifras.

– Se encontró que los avisos en las porciones superior e izquierda de una página de inicio recibían más fijaciones de ojo. Los avisos al lado derecho no lo hacían tan bien, y los avisos en la parte inferior de la página eran vistos, típicamente, por solo un pequeño porcentaje de la gente.

Page 86: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Sobre la publicidad:– Cuando un aviso era separado de los temas

editoriales, ya fuera por un espacio o una línea, el aviso recibía menos fijaciones de ojo que cuando no había tal barrera.

– A los avisos cercanos a los titulares de la parte superior de la página les fue bien. Un banner publicitario sobre la bandera (flag) de la página de inicio no atrajo tantas fijaciones de ojo como un aviso que estaba debajo de ella y sobre el contenido editorial.

Page 87: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Sobre la publicidad:– Los avisos de texto fueron vistos más

atentamente, de todos los tipos que se evaluaron. En las páginas de prueba, los avisos de texto consiguieron un tiempo de duración promedio de ojo de cerca de 7 segundos; el aviso de mejor despliegue logró solo 1,6 segundos, en promedio.

– Los pequeños avisos en el lado derecho de las páginas de inicio típicamente fueron vistos solo por solo un tercio de los sujetos de prueba.

Page 88: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Sobre la publicidad:– En las páginas interiores de los artículos, los

avisos de ‘media página’ fueron los más intensamente vistos por los sujetos. Sin embargo, ellos fueron vistos solo un 38 por ciento del tiempo; la mayoría de la gente nunca los miró.

– Los avisos que más se vieron fueron aquellos ubicados en la mitad del texto del artículo. Los avisos ‘Skyscraper’ (verticales delgados en la columna izquierda o derecha) estuvieron en tercer lugar.

Page 89: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Sobre las fotos:– Aunque se determinó que la mayoría de los

participantes no miraban las imágenes primero, también se observó que ellas recibían un significativo número de fijaciones de ojo. Se determinó que a mayor tamaño de la imagen, la gente se tomaba más tiempo para mirarla. Una foto estampilla fue vista por el 10 por ciento de los participantes. Compare eso con una foto de tamaño promedio (230 píxeles de ancho x 230 de alto) que atrajo la atención de aproximadamente un 70 por ciento.

Page 90: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Conclusiones ‘Eyetrack III’

• Presentaciones multimedia:– En total, se observó que era más probable que

los participantes recordaran correctamente hechos, nombres y lugares cuando eran presentados con la información en formato texto. Sin embargo, la información conceptual, no familiar, era más exactamente recordada cuando los participantes la recibían en un formato gráfico multimedia.

Page 91: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Críticas al ‘Eyetrack III’

• Contenido neutro: – El gran defecto del estudio es que asume que

las noticias actuales no tienen efecto sobre los lectores.

• Muestras de sitios: – ¿Cuántos de los movimientos de ojo fueron el

resultado de no haber visto el sitio antes?

• Ubicación: – ¿Qué tan representativos son 51 participantes

de la ultraconectada, ultraconocedora y ultrainternet San Francisco?

Page 92: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Críticas al ‘Eyetrack III’

• Motivaciones y reacciones: – El estudio dice lo que la gente ve cuando ve un

sitio de prueba. No dice nada sobre si es gusta el sitio, o si es fácil o difícil de usar.

Page 93: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El usuario pierde el control

5406920001121662

Page 94: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El usuario pierde el control

5406 9200 0112 1662

Page 95: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Estándares: – Logo en la esquina superior izquierda de la

página.– Opción de búsqueda en la página de inicio.– Ausencia de página de bienvenida.

Page 96: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Convenciones: – Mapa de sitio.– Cambiar el color de los enlaces visitados.– Enlace al carrito de compras en la esquina

superior derecha.

Page 97: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Muchos de los estándares están referidos a la página de inicio, por eso para entender su función comparémosla con:– La carátula de una revista.– Con la primera impresión.– Obra de arte.– Recepción de un hospital.– Recepción de un edificio.

Page 98: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Carátula de una revista:– La primera meta de la carátula de una revista

es hacer que el comprador la escoja de un mar de publicaciones en el estante o quiosco.

Page 99: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Carátula de una revista:– La primera meta de la carátula de una revista

es hacer que el comprador la escoja de un mar de publicaciones en el estante o quiosco.

– En contraste, los usuarios no ven una página hasta que ya lo han decidido. Así, las páginas no necesitan estar en un estante para llamar la atención de los usuarios.

– Un trabajo secundario de la carátula de una revista es definir el contenido, estilo. Esta es la tarea donde usted debe aprender la mayoría de lecciones para el diseño web.

Page 100: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

Page 101: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• La primera impresión:– El viejo dicho sostiene que usted solo tiene una

oportunidad para hacer una primera impresión.

Page 102: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• La primera impresión:– El viejo dicho sostiene que usted solo tiene una

oportunidad para hacer una primera impresión.

– En la web usted solo tiene una oportunidad de formar cualquier impresión. Cuando la primera impresión no es buena, usted no tiene una segunda oportunidad porque el usuario no retorna.

Page 103: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con una obra de arte:– La gente mira las obras de arte en dos pasos.

Primero echa un vistazo para ver si le interesa. Luego se toma un tiempo para realmente apreciarla o analizarla.

Page 104: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con una obra de arte:– La gente mira las obras de arte en dos pasos.

Primero echa un vistazo para ver si le interesa. Luego se toma un tiempo para realmente apreciarla o analizarla.

– Muchos equipos de diseño piensan sus páginas de inicio como obras de arte e invierten solo en lo visual, en lugar el diseño de interacción de la página.

Page 105: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la recepción de un hospital:– La recepción en sí misma no es en sí mismo un

destino, usted pasa a través de ella. La página de inicio es un punto de entrada y embudo de tráfico en diferentes direcciones. Así, cada página de inicio necesita buena señalización como las señales en el lobby de un hospital a diferentes áreas y departamentos. Muchos equipos de diseño piensan sus páginas de inicio como obras de arte e invierten solo en lo visual, en lugar el diseño de interacción de la página.

Page 106: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la recepción de una compañía:– Aquí hay alguien (un humano) dirigiendo los

visitantes al lugar correcto, dando guía útil y amistosa, recibiendo a los clientes que regresan y haciendo que la gente se sienta atendida.

Page 107: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la tabla de contenido de un libro:– El diseño para la tabla de contenido de un libro

se enfoca en suministrar un vistazo jerárquico. Dando una lista de opciones, la tabla de contenido lo lleva directamente a su elección a través de los números.

Page 108: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la tabla de contenido de un libro:– El diseño para la tabla de contenido de un libro

se enfoca en suministrar un vistazo jerárquico. Dando una lista de opciones, la tabla de contenido lo lleva directamente a su elección a través de los números.

– Esta metáfora es una que se ajusta estrechamente a la mecánica de los enlaces de hipertexto, que es la base del uso de la web.

Page 109: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• Con la tabla de contenido de un libro:– El diseño para la tabla de contenido de un libro

se enfoca en suministrar un vistazo jerárquico. Dando una lista de opciones, la tabla de contenido lo lleva directamente a su elección a través de los números.

– Esta metáfora es una que se ajusta estrechamente a la mecánica de los enlaces de hipertexto, que es la base del uso de la web.

Page 110: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la primera página de un periódico:– La primera página de un periódico presenta un

vistazo jerarquizado y corto de las más importantes noticias.

Page 111: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Con la primera página de un periódico:– La primera página de un periódico presenta un

vistazo jerarquizado y corto de las más importantes noticias.

– Los periódicos podrían tener otros elementos adicionales, además de las noticias, pero no tienen que representarlos a todos ellos en la primera página, ya que el formato estándar de un periódico es tan reconocible y la navegación es tan simple como pasar a una página. Los sitios web necesitan representar muchos más servicios porque el género está menos establecido que el de los periódicos.

Page 112: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• La página de inicio de su sitio debe comunicar en una corta mirada dónde está el usuario, qué hace su compañía y qué tareas se pueden hacer en su sitio.

Page 113: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• La página de inicio de su sitio debe comunicar en una corta mirada dónde está el usuario, qué hace su compañía y qué tareas se pueden hacer en su sitio.– Muestre el logo y el nombre de la compañía en

un tamaño razonable y una ubicación notable. La esquina superior izquierda es usualmente la mejor ubicación para lenguajes que se leen de izquierda a derecha.

Page 114: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• La página de inicio de su sitio debe comunicar en una corta mirada dónde está el usuario, qué hace su compañía y qué tareas se pueden hacer en su sitio.– Incluya un ‘tag line’ que explique y resuma lo

que el sitio de su compañía hace.• Debe ser breve• Son innecesarios cuando el nombre de la

compañía explica por sí mismo lo que esta hace.• Cuando su vagos o usan jergas puede confundir.

Page 115: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• ¿Qué sitio le viene a la cabeza cuando usted encuentra el siguiente ‘Tag Line’: ‘Striving to make the world a better place’?

Page 116: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 117: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 118: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 119: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 120: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• Enfatice lo que su sitio hace desde el punto de vista del usuario, así como en qué difiere de los de sus competidores.– El ‘tag line’ es un gran recurso para hacer esto

Page 121: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• Enfatice las tareas de alta prioridad de forma tal que los usuarios tengan una claridad comenzando en la página de inicio.– Asígnele a estas tareas una ubicación

prominente.

Page 122: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 123: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 124: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito del sitio

• Designe claramente una página como la de inicio de su sitio.– Dentro de sitio, restrinja el uso de términos

como ‘home’ y ‘home page’ para referirse a ella. Los usuarios no deberían usar múltiples botones o enlaces que digan home y vayan a diferentes lugares

– Use un diseño ligeramente diferente para ella. Esta distinsión visual y navigacional asegura que su usuario pueda reconocer el punto de entrada.

Page 125: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar la información sobre su compañía

• Agrupe la información corporativa -tal como ‘Quiénes somos’ (About us), prensa, empleo en un ´rea distintiva-.– Esta agrupación da a la gente que desea la

información un lugar para ir. Al mismo tiempo, ayuda a los usuarios que no les importa a omitirla.

Page 126: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar la información sobre su compañía

• Incluya un enlace a la sección de ‘Quiénes somos’, que dé a los usuarios un vistazo sobre la compañía y enlaces a cualquier detalle relevante sobre productos, servicios, valores de la compañía, equipo de administración, etc..

Page 127: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar la información sobre su compañía

• Incluya un enlace para que los usuarios puedan entrar en contacto con usted: ‘Contáctenos’- Contact us’.

Page 128: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar la información sobre su compañía

• No incluya información interna de la compañía que está dirigida a los empleados en un sitio público.

Page 129: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar la información sobre su compañía

• Si es necesario incluya un enlace a las cláusulas de privacidad.

Page 130: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Use un lenguaje orientado a su usuario. Marque las secciones y categorías de acuerdo con el valor que ofrecen a los usuarios o clientes, no de acuerdo con lo que ellos hacen para la compañía.

Page 131: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

Page 132: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Evite contenido redundante. Repetir ítems idénticos, tales como categorías y enlaces, en la página de inicio a fin de enfatizar su importancia solo reduce su impacto.

Page 133: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• No use frase inteligentes o lenguaje promocional que le haga al usuario difícil entender qué es lo que usted quiere decir.

Page 134: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

Page 135: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

Page 136: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• No marque un área para identificar contenido si este se explica suficientemente por sí mismo. Por ejemplo, no es necesario identificar el principal titular ya que el tamaño y la ubicación así lo definen.

Page 137: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Evite utilizar categorías y listados de un simple ítem.

Page 138: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Evite utilizar categorías y listados de un simple ítem.

Page 139: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Evite que frases que deban ir juntas se partan lo que dificulta su escaneo y entendimiento.

Page 140: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Contenido escrito

• Explique las siglas, acrónimos, etc... la primera vez que las mencione. Son excepción abreviaciones que son ampliamente conocidas, tales como DVD.

• Evite utilizar el signo de admiración para destacar contenido.• Evite utilizar textos completamente en mayúsculas.• EVITE UTILIZAR TEXTOS COMPLETAMENTE EN MAYÚSCULAS o en

bastardilla.• Evite utilizar espacios y puntuación inapropiadamente para

E.N.F.A.T.I.Z.A.R

Page 141: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Revele el contenido a través de ejemplos

• Use ejemplos para revelar el contenido del sitio, en lugar de solo describirlo.

– Con frecuencia, toma más espacio y palabras describir una categoría que mostrar algún contenido de la misma y enlazar a más información. Por ejemplo, una categoría llamada noticias de última hora con una descripción que dice “Consiga todas las historias principales de hoy aquí” no es tan interesante o informativa como mostrar los cinco principales titulares, seguido por un enlace a los demás.

Page 142: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Revele el contenido a través de ejemplos

• Use ejemplos para revelar el contenido del sitio, en lugar de solo describirlo.– Una categoría que dice ‘Ítems en

venta’ no es tan convincente como ver unos productos con su respectivo precio. Las páginas de inicio podrían echar mano del recurso de mostrar pequeñas imágenes de producto.

Page 143: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Evite páginas de bienvenida

• Son molestas y los usuarios se las quitan de encima con la mayor rapidez posible (caso Interprint).– Pueden servir para filtrar usuarios y advertirles

sobre el contenido que van a encontrar. (Ejemplo de paginas porno)

Page 144: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Utilización de metáforas

Page 145: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Utilización de metáforas

Page 146: Como Escribir Para La Web  Taller Guillermo Franco En Udep

La función de búsqueda

• En páginas de inicio la búsqueda debería ser un campo para digitar y no un enlace.– El campo de búsqueda debería permitir digital la consulta

típica.– No ofrezca la búsqueda avanzada desde la página de inicio.

Ofrézcala como un enlace en los resultados de la búsqueda.

Page 147: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Sitios de adolescentes

• Mitos sobre los adolescentes:– Son unos genios de la tecnología y se le meten a lo que sea. Su tasa de

éxito (success rate) es menor que la de los adultos. La tasa de éxito indica la proporción entre las veces que los usuarios pudieron completar una tarea posible y representativa en un sitio dado. Eso es debido a:

• Habilidades de lectura insuficientes.• Menos sofisticadas estrategias de búsqueda.• Bajo nivel de paciencia.

Page 148: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Sitios de adolescentes

• Realidades sobre los adolescentes:– Les gustan los sitios con gráficas agradables y prestan

mucha atención al atractivo visual. Sin embargo, los sitios que calificaron más alto por satisfacción subjetiva eran de diseño relativamente modesto y limpio.

– Nos les gusta leer mucho.– Nos les gustan las fuentes pequeñas.

Page 149: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Sitios de adolescentes

• Realidades sobre los adolescentes:– Les encanta la interactividad, en

lugar de la lectura pasiva: • Retroalimentación o preguntas.• Votaciones, juegos• Compartir imágenes e historias• Tableros de mensajes, foros, agregar

contenido.

Page 150: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Sitios de adolescentes

• Convenciones:Disfrutable, interasante y atractivo, o los usuarios pueden fácilmente ajustarse a él.Los usuarios podrían apreciarlo en cierta medida, pero el sobreuso puede ser problemático.A los usuarios les disgusta, no lo hacen o lo encuentran difícil de operar.

Page 151: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Sitios de adolescentes

Animación y efectos de sonido

Barrido de anlaces

Publicidad Scrolling Lectura

Niños

Adolesles.

Adultos

Page 152: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Convenciones de diseño

• En este ambiente limitado de diseño, están emergiendo un pequeño número de convenciones de diseño. Como la diagramación y el diseño de periódicos, la web está evolucionando a un estilo de diseño uniforme para el diseño y la diagramación. He aquí una muestra de las convenciones que están emergiendo.

– Texto negro sobre fondo blanco (si quiere que alguien lea en pantalla más de 300 palabras).– Cabezote. Esta es la parte superior del área de la página. Contiene el logo en la izquierda y la

opción de búsqueda a la derecha o a la misma izquierda, debajo del logo. Esta parte está llegando a ser muy liviana para maximizar la cantidad de espacio para la presentación del contenido.

Page 153: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Convenciones de diseño

– Diseño de tres columnas: los diseñadores han encontrado que la forma óptima de colocar la máxima cantidad de contenido y navegación con el máximo de lecturabilidad es la aproximación de las tres columnas. La columna izquierda contiene el área de navegación (un directorio de las principales áreas de contenido del sitio); la mitad, el contenido reciente; y la derecha, las características (o productos) especiales.

– Pata (footer): contiene la navegación global, detalles de cómo contactar, derechos de autor y cláusulas de privacidad.

– Navegación global. Esto relaciona una pequeña selección de enlaces esenciales que son presentados en cada página.

Page 154: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• Elementos estandarizados: – Estándar: el 80 por ciento o más de los

sitios utilizan la misma aproximación de diseño.

– Convención: entre el 50 y el 79 por ciento de los sitios web utilizan la misma aproximación de diseño.

– Confusión: no domina una simple aproximación..

Page 155: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¿Por qué me hablan de escribir si yo soy diseñador?•La web es un medio diferente donde las reglas sobre el comportamiento del usuario tienen poco que ver con las que funcionan en otros medios, en particular los impresos.

Page 156: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¿Por qué me hablan de escribir si yo soy diseñador?

•¡La lectura es la actividad primaria de la red, entonces la lecturabilidad es la función primaria del diseño web!

Page 157: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• A diferencia del diseñador web, uno de papel tiene una gran superficie para trabajar, lo que le permite presentar diseños llamativos, intrincados y de mucho más impacto.

• En términos de velocidad, en una fracción de segundo el ojo se puede mover de lo general a los detalles.

Page 158: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• El diseño impreso está basado en permitir que los ojos se muevan, ‘caminen’, sobre la información, mirando selectivamente los objetos informativos y usando yuxtaposición espacial para hacer que los elementos de la página mejoren y expliquen entre ellos.

Page 159: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Los diseñadores web están restringidos por factores que no afectan a los diseñadores impresos de forma alguna:– El tamaño de la pantalla del usuario y la

resolución (Ver eltiempo.com en diferentes resoluciones).

Page 160: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Hoy: el lenguaje Bde las restricciones, pero...

Page 161: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Otros factores que restringen a los diseñadores web:– El sistema operativo que usa la persona.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 162: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Otros factores que restringen a los diseñadores web:– El sistema operativo que usa la persona.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 163: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Otros factores que restringen a los diseñadores web:– El sistema operativo que usa la persona.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 164: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Otros factores que restringen a los diseñadores web:– El sistema operativo que usa la persona.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 165: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Otros factores que restringen a los diseñadores web:– La calidad de los colores que un monitor

puede reproducir.– Qué tan poderosa es la máquina.– Que navegador, y qué versión, usa la

persona. – Qué tipo de conexión a Internet y velocidad

tiene el usuario.

“La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 166: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• Todas estas restricciones implican que los diseñadores no pueden garantizar 100 por ciento que el sitio web luzca o se comporte de cierta manera. Así que tiene que asumir ciertas cosas o adherirse a ciertos estándares tan estrechamente como sea posible. “La idea es impartir su mensaje tan pronto como sea posible, dado que no hay tiempo”, dice Crawford Kilian, en su libro Writing for the Web (Escribiendo para la web).

Page 167: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• ¿Hasta cuándo? – Según los expertos, durante los próximos 10

años o más las diferencias entre impresos y web subsistirán, lo que dictará restricciones en el diseño web: menos gráficos, más pequeños, texto más corto (ya que no es placentero leer en línea), menos derroche de tipografía (ya que usted no sabe cuáles tiene el usuario instaladas), y diseños menos ambiciosos.

Page 168: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• ¿Hasta cuándo? El futuro ofrecerá– Ancho de banda suficientemente rápido

para descargar páginas de la red tan rápido como voltear una página en el papel.

– Resoluciones de pantalla suficientemente agudas como para acercarse a la resolución del papel.

– Pantallas del tamaño de un periódico.

Page 169: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• ¿Hasta cuándo? Incluso cuando se tenga el hardware perfecto en 10 años, continuará siendo necesario limitar el número de palabras ya que los usuarios son más impacientes en línea y son motivados a moverse. También será necesario diseñar la información web para una diagramación de pequeño formato ya que los dispositivos portátiles tendrán pequeñas pantallas, aunque tengamos grandes pantallas en la oficina.

Page 170: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Aún con restricciones, hoy la web requiere buen diseño

• El diseño web es empobrecido dado que muchos sitios abrazan equivocadamente los estándares de excelencia que tienen sentido en el mundo impreso. Normalmente, la página de inicio de un sitio web es la expresión concentrada del buen o mal diseño.

• Demasiados diseñadores web se enfocan en las cosas que deslumbran – tipografías fantásticas, animaciones inteligentes. Estudio tras estudio muestra que la gente no está interesada en este brillo superficial.

• Todo lo que es un gran diseño impreso es probable que sea un pésimo diseño web.

Page 171: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Aún con restricciones, hoy la web requiere buen diseño

• Definamos la función de una buena página de inicio a través de varias comparaciones: – Con la carátula de una revista.– Con la primera impresión.– Con una obra de arte.– Con la recepción de un hospital.– Con la recepción de un edificio o

compañía.– Con la tabla de contenido de un libro.

Page 172: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Aún con restricciones, hoy la web requiere buen diseño

• Además de la lectura, otra actividad primaria en la red es la búsqueda y la navegación. Así que la organización del contenido para hacerlo fácilmente buscable y navegable es una función primaria del diseño web. El principio número uno del diseño web es la simplicidad. El diseño web de calidad debería hacerle al usuario más fácil encontrar el contenido, y fácil leerlo (texto negro en fondo blanco, fuentes sans serif, tamaños razonables de fuentes).

Page 173: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Aún con restricciones, hoy la web requiere buen diseño

• La web es para publicar contenido de una forma organizada. Todo sitio web es un directorio. Todos los grandes sitios web están conducidos por grandes directorios que permiten a la gente encontrar rápidamente el contenido que desea. Aquellos sitios que fallan son aquellos que frustran a lector. No clasifican bien su contenido. La búsqueda no trabaja bien. La navegación es pobre. Sus páginas están llenas de gráficas que toman siglos en cargarse. (Ejemplo sitio XXX).

Page 174: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Restricciones del diseño web

• En oposición al ‘gran lienzo’ del impreso, una página web es fundamentalmente una experiencia de desplazamiento (‘scrolling’):– Es posible tener una pequeña cantidad de

diagramación 2-dimensional.– Más importante que la relación 2-

dimensional entre los elementos de la página es la relación 1-dimensional (qué aparece primero y qué aparece después en la página).

Page 175: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El contrapeso alas restricciones

• El aspecto N-dimensional del diseño web proviene de la navegación del hipertexto, que es la esencia de la red. Moverse (navegar) es la esencia de la red. Cuando se analiza el ‘look and feel’ –’mirar y sentir- de un sitio web, el ‘feel domina completamente la experiencia del usuario. Después de todo, hacer es más memorable y produce un impacto emocional más fuerte que ver.

Page 176: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El contrapeso alas restricciones

• Los impresos pueden abrumar a los lectores con visualización de alto impacto, pero el medio en línea gana por el vínculo con el usuario, que es hecho posible por los elementos no estáticos del diseño. La web puede mostrar imágenes en movimiento bajo el control del usuario y le permite manipular elementos interactivos.

Page 177: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El contrapeso alas restricciones

• El diseño web funciona permitiendo que las manos muevan la información (haciendo ‘scrolling’ o ‘clicking’), las relaciones entre la información son expresadas temporalmente como parte de la interacción y el movimiento del usuario.

 

Page 178: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Comunicar el propósito de su sitio

Page 179: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Cómo escribir para la Web

[email protected] Junio 16 de 2009.

Page 180: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Premisas básicas

Page 181: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Premisas básicas

Page 182: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• La mejor manera de promover el concepto de ‘Gobierno en Línea’ es que este funcione: y una de las formas de garantizarlo es centrarse en (las necesidades de) el usuario.

Premisas básicas

Page 183: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¡Que funcione!

• RUT

Page 184: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¡Que funcione!

• Pase

Page 185: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El usuario pierde el control

Page 186: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Preguntas: – ¿Cuántas teclas tiene cada uno? ¿Cuántas

de ellas usa usted con relativa frecuencia?– ¿Tienen una forma que permite

diferenciarlos de otros controles de otros aparatos, sobre todo en la oscuridad?

– ¿Está la tecla de encendido en la misma posición, tienen el mismo color, el mismo aspecto?

– Para realizar ciertas funciones, como cambiar de canal o subir de volumen, usa una tecla o dos?

– Cuando hay teclas que se balancean, el eje es vertical u horizontal?

El usuario pierde el control

Page 187: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Preguntas: – ¿Son claramente entendibles los textos que

identifican las teclas para alguien que lo usa por primera vez?

– La disposición del teclado numérico es igual? ¿Se parece a la de un teclado más común, por ejemplo el de un teléfono?

El usuario pierde el control

Page 188: Como Escribir Para La Web  Taller Guillermo Franco En Udep

El usuario pierde el control

Page 189: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Sitios Web: – Realizar tareas simples puede convertirse

en una tragedia porque cada sitio presenta la misma información en formas diferentes

– Las operaciones más simples y comunes son presentadas en miles de formas diferentes.

– En lugar de hacer las cosas en una forma estándar, hay diseñadores de sitios que inventan interfaces anormales.

– Muchos sitios ofrecen muchas más características de las que probablemente necesite el usuario.

El usuario pierde el control

Page 190: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Recuperar el control

• ¿Cómo podríamos mejorar el control remoto? – Darles menos poder.– Disminuir las características.– Utilizar formas estandarizadas de hacer las

cosas.

Page 191: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Usabilidad

• ¿Qué es? – “Usabilidad es la efectividad, eficiencia y

satisfacción con la que un grupo de usuarios específicos pueden realizar un conjunto específico de tareas en un ambiente particular” (International Standards Organization –ISO-).

Page 192: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Usabilidad

• Es la característica de ser fácil de usar. El término se refiere a software, pero es relevante en cualquier artefacto humano -y sitios de Internet-. La facilidad de uso puede ser medida por cuán rápido se realiza una tarea, cuántos errores se cometen, qué tan rápido se aprende el sistema y cuán satisfechas están la personas que lo usan.

Page 193: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Hay que desmitificar el concepto de usabilidad.

Usabilidad

Page 194: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• El desarrollo de sitios es una tarea conjunta de gente de tecnología, diseño y contenido. ¿Quién de ellos representa al usuario, al ciudadano?

Usabilidad

Page 195: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Las evaluaciones de usabilidad se deberían volver en parte esencial del proceso de desarrollo.

Usabilidad

Page 196: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Las pruebas de usabilidad son diferentes de los ‘focus group’. Ejemplo de los mapas de Transmilenio. ¿Cuál es la tarea?

Usabilidad

Page 197: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• El usuario va a un sitio a realizar tareas específicas.

Usabilidad

Page 198: Como Escribir Para La Web  Taller Guillermo Franco En Udep

• Tenemos que adaptar el mundo de papel al mundo en línea.

Usabilidad

Page 199: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Usabilidad

Page 200: Como Escribir Para La Web  Taller Guillermo Franco En Udep

¿Cómo consulto el estado de mi transacción?¿Qué estados de transacción existen?¿Qué puedo hacer con el PIN que adquiero?¿Qué es el código de verificación?¿Qué puedo hacer con el código de verificación?¿Cuál es la vigencia del Certificado Judicial en Línea?¿Diferencias entre el certificado judicial físico y en línea.¿Cada cuanto debo obtener un Certificado Judicial en línea?¿Cómo evito que el código de verificación que di a una persona no sea usado indiscriminadamente por otras personas?¿Cómo se que la persona a la que le di el código de verificación ya verificó mis antecedentes judiciales?¿Cada cuanto debo acercarme a las instalaciones del DAS para actualizar la información personal?

Usabilidad

Page 201: Como Escribir Para La Web  Taller Guillermo Franco En Udep

- Estado de mi transacción, ¿cómo lo consulto? ¿Qué estados de transacción existen?

- PIN, ¿qué puedo hacer con el que adquiero?- Código de verificación (¿qué es? ¿qué puedo hacer

con él? ¿cómo evito que sea usado indiscriminadamente? ¿Cómo saber que ya verificaron mis antecedentes?) - Vigencia del Certificado Judicial en Línea, ¿cada

cuánto lo debo obtener? - Certificado judicial físico y en línea, diferencias

entre ellos- Actualización de información ante el DAS

Usabilidad

Page 202: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Usabilidad

Page 203: Como Escribir Para La Web  Taller Guillermo Franco En Udep

Usabilidad

• Ejemplo clásico sitio Nebraska (1997). Cómo modificando los textos a la luz de conceptos como lenguaje objetivo (para oponerlo al lenguaje promocional), concisión y diseño escaneable, se lograban mejoras significativas en la usabilidad.