Apuntes Narrativa Nuevas Tecnologias

NARRATIVA DE LAS

NUEVAS TECNOLOGAS

Magdalena Adrover Gay

Curso 2010/2011

Magdalena Adrover Gay Narrativa de las Nuevas Tecnologas - Curso 2010/2011 2

INTRODUCCIN: Leyes de la percepcin o de la Gestalt

Las leyes de la Gestalt son reglas que explican cmo la gente percibe lo que ve.

Ley de cercana

Percibimos los objetos que estn juntos como formando un todo. De esta forma, interpretamos que lo que est cerca tiene relacin, mientras que lo que est separado lo percibimos como algo distinto. Para que el usuario sepa qu elementos son informaciones distintas a golpe de vista es mejor que se separen.

Al enfrentarnos a la pgina, nuestro cerebro la interpreta definiendo una serie de bloques, elementos que relacionamos entre s y mens de diferentes tipos que estn separados.

El tiempo que necesita el usuario para interpretar la informacin es mnimo, porque las informaciones estn ordenadas por bloques.

Ley de similitud

Misma funcin, mismo diseo

Los objetos que son parecidos se interpretan como iguales. Por lo tanto, aquello que tiene funciones diferentes tendr que mostrarse de forma diferente. Por ejemplo, cuando hay un texto de otro color que es un enlace, todos tienen que ser iguales, puesto que el usuario los interpretar como enlaces.

Si todos los botones son iguales, adems de estar relacionados, tendrn la misma importancia jerrquica (excepto sutilmente el 1). Todo lo que forma parte de un men deber ser igual.

Es importante que el usuario no est pendiente de interpretar la informacin, sino de leerla o asimilarla.

Ley de continuidad

Si unos objetos se agrupan de forma continua, nuestro cerebro los interpreta en base a dicha continuidad. Hay lneas visuales que nos sirven para agrupar los contenidos: cabecera (en la que se incluye el men de navegacin).

Se llama el hilo o las migas a lo que forma parte de la estructura de contenidos, una barra incrustada dentro de la informacin.

El Usuario tiene alergia a la publicidad, que se suele situar a la derecha.

Ley de simetra

Los objetos ordenados de forma simtrica se interpretan como conjunto y ganan en importancia visual. Por otro lado, los objetos dispersos pasan desapercibidos.

Eyetracker: tcnica en la que podemos saber en cada segundo dnde est mirando el usuario. De aqu surgen los mapas de calor, estas imgenes muestran las zonas ms calientes en rojo, que son dnde ha estado fijndose continuamente el usuario.

La publicidad tiene distintos impactos visuales dependiendo del formato y del tiempo. Es una carrera en la que las publicidades ms ingeniosas tendrn ms atencin.

Los textos tienen que ser claros: cmo piensa el usuario?


Pruebas de usabilidad

Camtasia: programa para hacer tutoriales.

Las pruebas de usabilidad enfrentan al usuario con una pgina web, para observar cmo el usuario interacta con la informacin. As se tiene una visin crtica de la web.

La experiencia del usuario

El usuario no hace lo que quiere, sino lo que puede, cuando se enfrenta a una web.

1. El usuario es impaciente, tiene prisas. No pierde el tiempo, sino que salta casi inmediatamente a otra parte.

2. El usuario tiene claro que, cuando trata de navegar, el analizar cmo est distribuida la web no es garanta de xito. Muchas veces, las pginas no estn bien pensadas.

3. Si el usuario se equivoca, no hay consecuencias graves. 4. Por todo ello, a veces el usuario pincha de manera aleatoria en lugar de hacer bsquedas

metdicas. As se evita el aburrimiento y el estrs.


TEMA 2

Antes de entrar a analizar la arquitectura de contenidos es necesario comentar aspectos importantes que definen la experiencia del usuario frente a la web.

2.1.- Experiencia de Usuario

Para un usuario cada pgina debe justificar la inversin de tiempo. Si una pgina no lo hace inmediatamente de forma clara va a otra. El usuario es muy impaciente, la media de permanencia en pgina es de 27 segundos.

No hay nada que certifique a los usuarios de que la pgina que est viendo merece su atencin, es necesario convencerlos.

Jakob Nielsen destaca algunos datos muy significativos sobre la interaccin entre la web y el usuario: Slo un 66% de los usuarios que intentaban realizar una tarea predeterminada la finalizaban con xito. Aunque la tasa de xito se refiere a sitios nuevos para el usuario, no se puede olvidar que es dicho xito el que condiciona que el usuario regrese o no al sitio.

La nica opcin de atraer usuarios es que la experiencia de uso sea fcil durante la primera visita. Nuestra pgina debe ser a prueba de torpes.

La tasa de xito baja al 60% cuando la tarea comienza frente a un navegador en blanco, la necesidad de buscar un sitio que le permita realizar la tarea marcada se convierte as en un hndicap.

Al analizar la opinin subjetiva del usuario se descubre que ste suele tener una visin de la web mucho ms favorable de lo que se podra deducir por la tasa de xito obtenida.

Al realizar tareas, los usuarios desconocen el nivel de rendimiento que obtienen de la visita a un sitio web, para ellos obtener algo de informacin puede ser un xito.

As, un usuario valora la informacin de un sitio web en base a lo que ve, que en muchas ocasiones es significativamente menos de lo que hay.

Si el usuario no accede al total de la informacin por falta de usabilidad de la web, desde el punto de vista del creador es un claro fracaso.

Un dato importante a tener en cuenta es que la probabilidad de que un sitio web descartado previamente sea visitado de nuevo es del 12%. Esta decisin de descartar o no un sitio web se tomar en menos de 2 minutos de navegacin.

Si la primera vez que un usuario visita la web le sale bien, podemos convertirnos en su referente; si no, da por sentado que no funciona / es una mierda y no vuelve. No hay segundas oportunidades.

Tambin es posible la opinin buena con resultados negativos; cundo pasa esto? Cuando el usuario no encuentra la informacin y piensa que no est, en lugar de creer que no puede encontrarla.

Cuando el usuario accede a la web debe ver: de qu va y si cumple sus expectativas.

2.2.- Pgina principal


La pgina principal de un sitio web es aquella que se muestra al acceder a travs del dominio (ej.: yahoo.es).

Ofrece informacin general del sitio web y muestra la estructura de navegacin del mismo, permitiendo al usuario hacerse una idea de que puede encontrar en l. Segn la tipologa del sitio web, la pgina del sitio puede incluir todo tipo de noticias, enlaces directos (o enlaces profundos, como los denomina Nielsen) publicidad, etc.

Es importante tener en cuenta que en el 40% de las ocasiones la primera toma de contacto del usuario se hace a travs de la pgina principal. sta sirve de orientacin en la web, para que el usuario se ubique.

Suelen ir tambin a esta pgina cuando quieren saber de forma general que ofrece un sitio, independientemente de la pgina por la que entraron.

Por ello la pgina inicial, por su intencionalidad de presentacin y gua del sitio web, tiene que ser el resumen perfecto del trabajo hecho durante el diseo de la estructura de navegacin y la arquitectura de contenidos.

A la hora de decidir qu informacin mostraremos en la pgina principal hay que tener en cuenta que los usuarios permanecen en ella unos 30 segundos.

Adems, de los 25-35 segundos que el usuario permanece en la pgina principal, slo unos pocos se dedican a leer el contenido, la mayora del tiempo se usa en pensar el siguiente movimiento.

Tiempo de permanencia en la pgina principal:

Primera visita 31 segundos Segunda visita 25 segundos Tercera visita 22 segundos Cuarta y posteriores 19 segundos

As, podemos asumir que la informacin que no se lea en ese momento no ser leda ms tarde. Los anlisis dejan claro que las visitas posteriores son an ms breves. En pocas palabras, las pginas con mucha informacin en la portada conllevan que sta no se lea; por lo tanto, hay que olvidar la idea de hacer pginas con grandes textos de presentacin.


No es el nico dato descorazonador, los usuarios raramente se desplazan por la pgina, ven lo que se les muestra en la pantalla del navegador y toman una decisin sin investigar la informacin que queda por debajo.

Porcentaje de usuarios que se desplazan por la pgina principal:

Primera visita 23% Segunda visita 16% Tercera visita 16% Cuarta y posteriores 14%

El usuario vuelve a la portada slo para reiniciar la navegacin. La portada es un punto desde donde empezar la navegacin web; por lo tanto, la informacin de la portada debe contener la estructura de navegacin.

Al final, la portada resulta de una suma de contenido, obligaciones de publicidad, marketing, exigencias del jefe y los clientes, La realidad hace que uno pueda sugerir, pero que tambin tenga que ceder. Hay que intentar solventar fallos que sabemos que se van a dar. Por lo tanto, hay que dar toda la informacin fundamental sin desplazarse: informacin breve y clara, primando la definicin del sitio web.

Al margen de esto, Nielsen constata que los buscadores estn produciendo un cambio en la forma de acceder a la web. Se ha pasado de una bsqueda de sitios web a una bsqueda de respuestas, donde lo importante es acceder a una informacin especfica independientemente del sitio web de donde proceda. Ya no se compite por el sitio, sino por la pgina.

Este uso de la red no invalida el hecho de que el usuario siga acumulando un bagaje de sitios preferidos, pero marca una tendencia importante que es necesario tener en cuenta.

Consejos generales

Los elementos principales tienen que ser estticos y claros evitando la navegacin complicada y confusa.

Ningn diseo innovador justifica una complicacin de la navegacin por parte del usuario, es el contenido el que influye en el diseo artstico y no al revs. Las pginas con cargas lentas aburren al usuario. Ser innovador no justifica saltarse las normas; hay que seguir un mnimo (la estructura de navegacin).

No hay que dar reas de navegacin mltiples para el mismo tipo de enlaces. Crear enlaces con nombres similares obliga a buscar diferencias entre ellos y aumenta la confusin.


Hay que evitar siempre las pginas de portada tipo presentacin o animacin en flash (aunque el usuario pueda saltrselas. Ej.: www.insomniainteractiva.com). Tambin aquellas en las que nicamente se deja ejecutar una accin (como elegir un idioma); por cdigo se puede saber de qu pas viene el usuario, aunque se puede poner la opcin de cambiar de pas (normalmente arriba). No se pueden crear primeras pginas para que el usuario tome nicamente una decisin

Estructura bsica de la pgina de portada

Cabecera: Contiene la imagen corporativa y define el producto que ofrece a travs del sitio web. Situaremos la marca y un lema explicativo. Es el lugar para la imagen corporativa (lema y logo). La cabecera tambin es un buen sitio para introducir el mapa web. Es el sitio adecuado para los datos de contacto y opcionalmente para cambio de idiomas y acceso restringido. Lo correcto es dar por supuesto que los datos de contacto son importantes, aunque a veces las empresas son reacias (no quieren que las llamen, sino que desean que los usuarios les manden e-mails o que contacten a travs de los formularios). La publicidad se situar siempre por encima de cualquier elemento de la estructura de navegacin, nunca por debajo de la cabecera y del men. Hay que mantener la estructura de cabecera y mens en las pginas interiores, aunque lo que s se permite es que la cabecera de la portada sea ms grande que el resto.

Estructura de navegacin: Conjunto de mens que han de mantenerse a lo largo del sitio web. Define tambin el espacio en el que se cargarn los submens y las zonas dedicadas a enlaces directos. La zona habitual para la situacin de los mens es la parte superior (bajo la cabecera) o la zona lateral izquierda. La estructura de navegacin est compuesta por los elementos de la pgina que permiten moverse por la web. La zona lateral derecha puede utilizarse como zona de navegacin, pero nicamente para contener enlaces directos y publicidad.


Zona de contenidos: Zona dedicada a la informacin. Ha de optimizarse para ocupar siempre el mximo posible de espacio en pantalla. Contendr un ttulo como elemento principal, que deber estar ms destacado visualmente. Esta zona tambin tiene una estructura de navegacin, y una jerarqua clara.

Pie de Web: Contiene enlaces a Aviso legal y/o Poltica de privacidad, adems de contener el Copyright, empresa realizadora del sitio o Webmaster y enlaces tcnicos como RSS y otras soluciones tcnicas aplicadas. El pie de web va de un extremo a otro de la pgina. La estructura comentada no es incuestionable, sino que es adaptable segn las necesidades y, por supuesto, es posible plantear estructuras distintas para casos particulares. Estos cambios han de plantearse con plena conciencia de los problemas que su realizacin conlleva, y de las medidas que van a de tomarse para minimizarlos. En cualquier caso, planteamientos diferentes a los comentados no se admitirn como vlidos para los trabajos a presentar en la asignatura


La estructura definida en la pgina de portada ha de mantenerse a lo largo del sitio web, porque cambiar la navegacin entre pginas obliga al usuario a parar y reubicarse. En ningn caso sern admisibles cambios en la situacin de mens y submens, as como la desaparicin de elementos como la cabecera.

La mejor navegacin es aquella que es predecible.

Sobre el tamao de la cabecera

El tamao de la cabecera ha de ser el estrictamente necesario para alojar los contenidos que lo conforman. Nunca ha de ser un espacio para alojar ilustraciones o animaciones innecesarias, ni una excusa para llenar espacio.

Como norma general, 100-200 px es ms que suficiente, incluso para cabeceras con muchos elementos. Solo en casos excepcionales la cabecera y el banner superarn los 200-250 px de forma conjunta.

Sobre los datos de contacto

Para la maquetacin de los datos de contacto es suficiente con seguir 2 sencillas normas:

1. Los nmeros de telfono y fax han de dividirse de forma que faciliten la lectura: en grupos de dos (609 02 03 99) o en grupos de tres (947 212 900). Si hay duda sobre como dividirlo, la mejor opcin es usar grupos de tres, que es lo ms estndar.

2. Las direcciones de email sern textuales y con formato de enlace o botn: [email protected]

Sobre el botn de inicio

Desde el momento que definimos una pgina como portada o pgina de inicio, sta ha de ser representada en el men como el resto de secciones. Cuando estemos en la web de inicio, el botn correspondiente ha de estar marcado como activo.

Resulta comn (y recomendable) que al pulsar sobre el logo se dirija al visitante a la pgina inicial. Aunque hacer esto supone reduplicar enlaces (tanto el logo como el botn inicio llevan a la misma pgina), el enlace a travs de logotipo no puede sustituir nunca al botn correspondiente del men.

Sobre el apartado de compras

Los sitios web con opcin de realizar compras han de disponer de un botn desde el que acceder a una seccin de gestin de compras. Este botn (generalmente con un icono de carro de compra vinculado al testo del enlace) se situar en la zona superior derecha y permanecer visible durante la navegacin por las diferentes pginas. El botn puede ser slo un elemento de enlace o acompaarse de informacin ms o menos extensa sobre las compras realizadas (ej.: www.casadellibro.com).


Sobre el buscador

El buscador ha de colocarse preferentemente en la zona superior de la web (preferentemente en la cabecera. Constar siempre de una caja en la que insertar nuestros trminos de bsqueda y un botn con texto (no iconos) para ejecutar la accin. Tambin se pueden poner, en el campo de bsqueda, frases en gris y en cursiva que indiquen al usuario lo que debe hacer, como introduzca su bsqueda.

Si el buscador tiene opciones suplementarias, stas han de estar visualmente integradas con el resto de elementos.

Sobre la altura de web

Aunque para el curso se ha colgado una captura de pantalla para comprobar los trabajos, el problema de la altura de referencia para un prototipo web es complejo.

Al margen del continuo cambio en los formatos de las pantallas, y aunque aceptemos una resolucin base de 1.024x768 pxeles, no deberamos ajustar nuestra web a una altura exacta. Las diferencias entre navegadores condicionan la altura casi tanto como la resolucin.

La anchura estndar se conoce (1.000 px), pero con la altura no tenemos esa certeza. Los navegadores tienen distintas alturas y, adems, a veces los usuarios (en ocasiones sin saber cmo ni por qu) instalan barras de herramientas que no saben (o no quieren) quitar.

Es preferible en muchas ocasiones trabajar con una altura de 540-560 pxeles que ajustar el diseo a la pantalla. Por otro lado, la diferencia de contenido entre las pginas de una web pequea har que slo podamos ajustar algunas de ellas. Hay que tener en cuenta que lo que est por debajo de esos 560 px es poco probable que se vea (ver datos de desplazamiento por la pgina principal). Ms que ajustar a la altura, hay que ser conscientes de que no se ver lo que est por debajo.

La altura ser, por tanto, una referencia con la que trabajar, pero no un objetivo en s mismo.


En los prototipos, dejaremos un pequeo margen para que se vea cmo ser el fondo cuando la anchura sea mayor de 1.000 px.

Los enlaces directos (o en profundidad) te llevan al interior de la web; se trata de situar en la portada algo que est a ms de 1 nivel de click. En un sitio grande siempre habr que elegir qu enlaces directos se van a poner y cmo. No hay que olvidar que, cuantos ms enlaces haya, menos importancia tendrn.


TEMA 3: Textos para la web

Lorem ipsum (lipsum.com): Texto de relleno.

Se utiliza porque no despista al usuario del diseo. A veces, la gente no es capaz de abstraerse y percibir el resultado global. Una manera de evitarlo es utilizar ttulos reales y texto de relleno, aunque a veces es mejor no utilizar siquiera el texto en latn.

3.1.- Reglas de maquetacin

Usar mrgenes claros para todo el contenido. Las lneas de composicin de la estructura en la pgina web han de respetarse. Separar suficiente las cajas de texto en relacin con imgenes y otros elementos de la web (men,

cabecera )

Es importante que la estructura se mantenga. Lo primero y ms importante son los mrgenes, que sern inamovibles.

Paso 1: Mrgenes


Paso 2: Mrgenes de las imgenes

Es necesario establecer un margen para las fotografas (igual para todas). Las fotografas nunca se distorsionarn.

Paso 3: Cajas de prrafos y vinculacin con imgenes

Las imgenes siempre van ligadas al contenido, tiene que haber una correlacin entre la imagen y el contenido. Hay que crear lneas de prrafo, para crear aire que haga que percibamos distintos bloques. Esto evita el caos visual.


Paso 4: No utilizar nunca sangra para la primera lnea

La utilizacin de la sangra provoca mayor dificultad para leer. Esto es as porque en las pantallas se lee mejor sin sangra, aunque en los medios impresos la sangra mejora la sangra.

Paso 5: Alineacin del texto

Justificar el texto si el prrafo es ancho y alinear el texto a la izquierda si el prrafo es estrecho. Nunca se debe centrar el texto (ni siquiera el ttulo). Si es posible, hay que evitar partir palabras con guiones.

Paso 6: Separacin de prrafos


Hay que dividir el texto en prrafos cortos y separados visualmente. Tambin se deben situar los ttulos ms cerca del prrafo al que corresponden que del prrafo anterior.

La separacin entre prrafos ser la imprescindible para ordenar el contenido. Hay que evitar espacios en blanco injustificados. En Internet, el espacio es importante porque el usuario no ve el contenido todo de golpe.

En definitiva, hay que dividir el texto en prrafos cortos y separados visualmente (bloques de contenido).

Mucho texto ahuyenta al usuario; muchos son lectores de titulares (ttulos, entradillas, negritas,)

Paso 7: Ttulos y jerarqua

Es preferible alinear ttulos a la izquierda. Los ttulos, subttulos y dems elementos deben tener una jerarqua visual clara. El ttulo debe definir por completo la pgina, es lo ms importante. No hay que ponerle subttulos al ttulo.

Los ttulos y subttulos deben ser lo ms claros posibles, no hay que sustituir ttulos por imgenes, y nunca hay que subrayar un ttulo (se puede confundir con los enlaces). El ttulo principal no puede competir ni con fotos ni con enlaces (el ttulo es lo ms importante). Nada puede estar con l en la misma lnea.


No situar imgenes como fondo de la caja de contenido. Hay que usar preferentemente fondos de color plano, las imgenes y degradados dificultan la lectura, y lo que realmente interesa al usuario es el texto (el contenido).

Fuentes

Al contrario que en texto impreso, las fuentes sin serifa son ms cmodas de leer. Se usarn preferentemente para el texto general. Cuanto ms sobrio sea el texto, ms fcil ser para el usuario.

El tamao de texto ser de 11 -13 puntos, dependiendo de la fuente. En los ttulos es ms libre. Adems, es necesario utilizar fuentes de sistema para evitar problemas de visualizacin. Hay que tener eln cuenta que el cliente no lo ve como nosotros (Google tiene una herramienta que detecta la resolucin de pantalla del visitante).


El texto no se distorsionar bajo ningn concepto.

Adems, una vez decidida la fuente y el tamao para cada tipo de texto, se mantendr en toda la web.

Tamao pantalla

Un tamao estndar es de 1.000 px (1.024 px menos la barra de desplazamiento o scroll)

Listas

Usar listas de boliches cuando no se requiera un orden particular. Las listas numeradas, en cambio, se utilizarn para dar instrucciones secuenciales.

El texto del listado se alinea con el prrafo y no con el boliche.

*NOTA: Medidas de los puntos de Photoshop: 0,352 mm. (medida absoluta) 72 ppp/1px

3.2.- Reglas para contenido

Normas generales

No usar palabras complicadas. No usar trminos en ingls (Ej.: Newsletter). No usar jerga tcnica (Ej.: "TRF" en Zara).


No escribir en exceso (Ej.: Hacer. No se puede obligar al usuario a leer tanto texto). Redactar de forma sencilla y clara (que puedan entenderlo de los primeros cursos de secundaria). Reducir el contenido superfluo. Ofrecer lo esencial de forma rpida y dejar los detalles para una lectura opcional (Ej.: Pestaas

dentro de la misma pgina). En el caso de productos, es importante que el PVP est junto al producto (es el 50% de la decisin).

El usuario no permanece mucho tiempo en la misma pgina: o Dividir el contenido pero manteniendo la informacin relacionada en la misma pgina. o Enlazar mediante vnculos claros y explicativos la informacin distribuida en varias pginas.

Ej.: IKEA (muy bueno) o Hay que tener en cuenta que no por el mero hecho de poner un botn, hay que dar por

supuesto que la gente har click.

Prrafos

Evitar ms de una idea por prrafo.

Destacar la idea principal en la primera lnea (negrita en las palabras ms importantes, resaltar el contenido ms importante, pero lo mnimo).

Resaltado

No resaltar prrafos completos o frases largas. Es preferible resaltar partes de la frase o palabras principales. No abusar de la negrita o del resaltado en color, demasiados elementos resaltados minimizan el efecto de nfasis. Los elementos de resaltado aplicados a una funcin se mantendrn constantes (Misma funcin = Mismo diseo).

Listado

Omitir artculos y palabras repetitivas al comienzo del texto.

Usar una estructura de frases paralelas:

Todos los verbos en el mismo tiempo Si elegimos resaltar algo (ej.: tiempo) hay que hacerlo siempre Los pasos ms importantes en negrita. Se pueden usar todos los elementos de resalte que se

quieran, siempre que no nos pasemos y caigamos en el efecto contrario.


Textos, prrafos e imgenes

Estas normas son una ampliacin de las vistas anteriormente y aaden matices nuevos a lo comentado.

Si es posible, se alinear la imagen con el prrafo. Si no lo es (prrafo muy corto, por ejemplo) optaremos por alinear con el ttulo. Pero siempre se har igual, a no ser que se trate de contenido muy diferenciado.

Dejar siempre un margen amplio entre fotos y texto. Como referencia: 25-30 pxeles es una distancia adecuada, nunca menos. Siempre que sea posible las imgenes irn alineadas y se evitarn diferencias de ancho no justificadas. A efectos prcticos, trataremos la imagen y el pie de foto como un todo.

Los pies de foto deben ser descriptivos. La fuente puede ser ms pequea que el texto, y puede ir en cursiva. Siempre que se pueda, hay que evitar la doble lnea.

Es preferible evitar lneas hurfanas. Para ello, se puede poner una columna de imgenes (a la derecha).

Paginacin


Cuando marquemos el nmero de pgina en la que estamos, la marca debe estar encima del nmero (debe notarse a primera vista).

Hay que dar informacin clara del nmero de pginas que hay y en qu pgina estamos. Tambin debe dar oportunidad de saltar ms de una pgina.

No se debe dar por supuesto que el usuario sabe de qu van algunos smbolos, como la tpica flechita con una barra para ir al inicio.

En la paginacin se debe poder avanzar y retroceder de 1 en 1, pero tambin ir al principio y al final.

Lo ideal es que tenga el icono, los nmeros de las pginas, el total de las pginas (ej.: pgina x de xx) o incluso el de resultados, y el texto (Anterior/Retroceder, Inicio/Primera, Siguiente/Avanzar, Final/ltima).

Tambin se pueden usar frmulas como Elige la pgina a la que quieres ir.

Enlaces de texto

Un enlace siempre ha de parecer, a simple vista, un enlace.

Los mejores mtodos son los que podemos considerar como estndares: texto subrayado, en otro color, flechas e iconos

En cualquier caso el nico formato que podemos considerar plenamente satisfactorio es el subrayado con texto azul (el estndar).

Evitaremos subrayar cualquier texto que no sea un enlace.

Por cuestiones creativas es imposible restringir el enlace a un subrayado en azul. Usaremos el subrayado como mtodo general para marcar el enlace, independientemente del color que usemos.

El resto de opciones pueden inducir a error si no se usan correctamente, las evitaremos durante este curso. En el futuro, si se usa un cambio de color sin subrayar para los enlaces, no se debe usar el cambio de olor para nada ms.

Un enlace siempre ha de interactuar con el usuario. Es imprescindible que el enlace cambie de forma clara e inequvoca al situarse el cursor sobre l (un enlace debe comportarse como un enlace). El cambio debe ser suficientemente claro, y preferiblemente que cambie el texto, y no slo el icono.

En determinadas ocasiones muy justificadas es necesario diferenciar enlaces (ej.: Wikipedia). Estas opciones debern ser siempre iguales.


Los estudios sobre usabilidad nos revelan que marcar un enlace de texto como visitado ayuda a los usuarios a navegar por la pgina.

Este punto sin embargo necesitara varias puntualizaciones: Un enlace de texto que forme parte de un men ha de funcionar como un botn.

En los listados y pginas de directorios, esta norma es realmente imprescindible. Esta norma es prescindible para los textos que no dispongan de una carga importante de hipertexto.

Usar nombres de enlaces breves y claros. Comenzar los enlaces por el trmino clave y prescindir de los trminos superfluos (nombre de la compaa en cada enlace, etc.). Evite iniciar diferentes enlaces con frases idnticas.

No usar instrucciones genricas (pinche aqu), hay que dar informacin sobre qu suceder al realizar cada accin. No hay que usar un mismo texto para dos enlaces distintos. Y no enlazar a un mismo recurso usando dos textos distintos.

Tablas

Las tablas, como los listados, son una solucin habitual para la presentacin de informacin.

Hay pocas normas, lo ms importante es utilizar el sentido comn.


El elemento principal de la tabla es la cabecera, en la cual se establecen los atributos. En cada una de las filas se dar un valor determinado para cada uno de los atributos establecidos en las columnas que forman la cabecera. En la prctica, esta estructura no se sigue de forma estricta.

La Web es un medio en el que los contenidos pueden ampliarse slo de forma vertical (la opcin de pginas con desplazamiento horizontal se desech por su escasa usabilidad). Las pginas con scroll horizontal suelen estar mal hechas.

Por ello en muchas ocasiones encontraremos tablas donde los atributos se definen en la primera columna.

Este formato encuentra su justificacin cuando un nmero reducido de elementos se define mediante un gran nmero de atributos. En este sentido, est bien saber si la tabla ser fija o si se podr ir ampliando.

En la tabla, los productos han de definirse mediante un atributo (ej.: modelo de coche). Esto puede hacer necesario definir esta columna mediante un estilo diferenciado que aumente su importancia visual.

Cuando se da informacin de un producto, deben tener un lugar prominente el precio y el botn de compra. Esconder el precio hace que el usuario se ponga a la defensiva. Una vez convencido, el usuario debe poder comprar desde la misma pgina.

En ocasiones, la propia maquetacin lleva a prescindir de la celda que define el atributo producto. Estos casos han de tratarse con cuidado y estar debidamente justificados. Si queda clara la informacin que contiene, se puede prescindir de esa celda (en ocasiones el contexto y la maquetacin lo hacen innecesario).


Para asegurar la correcta legibilidad de las tablas definiremos una serie de consejos de aplicacin general:

Hay que potenciar visualmente la cabecera (atributos) y los valores del atributo principal (producto, compaa, persona)

Definir visualmente la estructura de la tabla mediante fondos, lneas y elementos de tipografa Adaptar el ancho de la columna a la informacin que contiene y no nicamente a la cabecera.

Establecer mrgenes de celda adecuados que potencien visualmente la divisin de la informacin. Las lneas han de ayudar a la informacin y no ser un elemento visualmente importante. Si es

posible podemos sustituirlas por fondos de color.

Alinear preferentemente a la izquierda. En determinados casos es posible alinear de diferentes maneras si suponen una mejora en la legibilidad. Hay que plantearse cada columna por separado.

o Nunca centrar, los datos quedan en escalera y no son homogneos. o Los nmeros y las cantidades se pueden alinear como en la imagen, para que el usuario no

tenga que volver arriba a consultar la cabecera.


Naturalmente, siempre hemos de estar abiertos a plantear otras opciones.

En el ejemplo, tanto el tamao de la cabecera como el inters por potenciar visualmente el producto pueden hacer que nos replanteemos la estructura. El usuario a veces discrimina por precio, no por nombre de producto.

Columnas y bloques de informacin

Para abordar la divisin del texto en columnas tendremos en cuenta una nica norma: Cada bloque de informacin ha de ser abarcable sin necesidad de usar la barra de desplazamiento.

La diferencia fundamental entre la pgina web y la pgina impresa es que el usuario accede a la primera de manera parcial mientras que con la segunda dispone siempre de una visin general.

Si el bloque de informacin es visible por completo sin desplazar la web, la divisin en columnas es vlida.

Como siempre, hay que recordar que este tipo de opciones de maquetacin ha de ser justificadas.


Si la divisin en columnas no aporta una mejora de cara al acceso del usuario a la informacin no tiene sentido alguno aplicarla. Una ocasin en la que sera adecuado aplicarla sera, por ejemplo, cuando tenemos lneas enormes de texto plano, de punta a punta, que agobien al usuario.

Otra opcin para maquetar el contenido es el uso de cajas diferenciadas para informacin complementaria.

Las dos normas a usar son tambin muy sencillas:

La informacin ha de ser complementaria a la informacin principal y no una parte de la informacin principal maquetada de otra manera.

La caja de informacin complementaria respetar la unidad visual de la zona de contenido (y estar incluida en ella).

Remarcar para dejar claro que la informacin tiene carcter propio (cajas paralelas / fichas)

Controles de sonido

Los controles de sonido son muy importantes en las pginas en las que hay msica. En muchas ocasiones, el usuario las visita en momentos en que no quiere que la msica le interrumpa.

Deben estar bien visibles, normalmente en la derecha, arriba o abajo. Es importante que tengan tanto icono como texto, no hay que dar por supuesto que el usuario conoce las convenciones sobre los iconos de altavoces.


TEMA 4

4.1.- Formularios

Los formularios son todo aquello donde se solicita informacin al usuario.

Reglas generales

Los usuarios son siempre reacios a crear un formulario, mxime cuando no tiene un objetivo claro.

Es imprescindible explicar mediante un texto breve la funcin del formulario y los beneficios que se obtendrn posteriormente.

Todos los formularios deben maquetarse con las mismas reglas. Cuando el usuario rellena un formulario, el usuario nos hace un favor. Tal y cmo est Internet hoy en da, el usuario puede encontrar otras opciones fcilmente. Por ello debemos cuidarle y agradecer que nos elija. No se puede violentar al usuario; si el usuario no encuentra una justificacin a lo que le pedimos, puede pensar que intentamos venderle algo.

Los formularios aburren, el usuario est pensando en lo que har luego. Cuanto ms breve, suave y ameno sea el formulario, tanto mejor. Hay que poner una pequea cabecera que explique en dos lneas lo que conseguir. Ej.: Wordpress, en su formulario, especifica que se hace en un solo paso.

Los formularios no deberan ser largos sin motivo. No se debe pedir nunca datos que no sean estrictamente necesarios (Ej.: Sexo). Los formularios deben ser breves y ajustados a lo que ofrecemos.

La peticin de datos no habituales ha de estar siempre justificada y explicada claramente.


En caso de que algunos datos no sean imprescindibles para tramitar el formulario, deben marcarse de forma clara al inicio del proceso (normalmente con un asterisco). En algunas ocasiones se pone al final, pero en este caso el usuario se siente engaado, y puede optar por abandonar el proceso.

Secuenciar la entrada de datos

Es necesario clarificar la introduccin de datos mediante una maquetacin adecuada que agrupe de forma lgica las distintas entradas. Clarificando la entrada de datos con ttulos y bloques de informacin, el formulario resulta ms ameno para el usuario y parece ms simple.

Si el cuestionario es excesivamente largo puede dividirse en secciones. Un cuestionario que se rellene por fases ha de dejar claro en qu punto del mismo se encuentra el usuario y cuantas secciones componen el proceso.

Dar indicaciones precisas de como rellenar los campos

Caracteres que pueden usarse. Validez de maysculas o no.


Si se necesita formato especfico en los datos aportados deber sealarse (se puede hacer con un ejemplo debajo o dentro del propio campo, o tambin con pestaas).

Longitud obligada en las contraseas o preferiblemente sistemas visuales de fortaleza de clave no coercitivos. El usuario es reacio a usar formatos de clave limitados sin una razn clara y por imposicin; por lo tanto, hay que explicar las ventajas, pero dejar que el usuario decida.

Adaptar el tamao de la caja al contenido

Es importante ajustar el tamao de la caja de insercin de datos a la longitud del contenido que se espera. Definir la longitud visualmente ayuda a confirmar al usuario que est introduciendo los datos de forma correcta (ej.: cdigo postal).

Consejos

Antes de trabajar, crear un esquema en papel del formulario para corregir posibles errores de concepto y definir claramente los campos y pasos. Definir la longitud del formulario y si se va a dividir en secciones.

Hay que justificar a la derecha los nombres de los campos.

Cuando el usuario falla, hay que decirle dnde y por qu ha fallado. Hay que tratar de facilitar al usuario la introduccin de datos.

Ejemplos de buenos formularios

Twitter: por su brevedad. Contras: no explica por qu la contrasea es dbil. Wordpress: por el sistema de cajas. Contras: la contrasea. Photoshop.com: es muy claro y detecta el error al momento.


TEMA 5

5.1.- Mailing

Herramienta de mrketing que ha ido a menos, pero que todava se sigue usando.

Ventajas del uso de mailings como medio publicitario

El coste no depende de la distancia. El coste no depende del nmero de destinatarios, permitiendo envos masivos o abordar perfiles

de pblico fragmentados sin coste adicional. Es casi gratuito y casi inmediato. Tambin es el tipo ms comn de publicidad en Internet. El peso es indiferente. Podemos enviar tanta informacin como queramos (siempre que se

mantengan ciertas normas, el tamao mximo de un email no debe ser superior a 100 Kb). Permite el uso de hipertexto y el acceso a recursos multimedia e informacin adicional Permite la respuesta automtica del usuario a travs de mltiples canales, facilitando la

consecucin de objetivos. Facilita la construccin de una imagen de marca. Es un sistema eficaz para fidelizar al cliente, siempre y cuando los contenidos sean tiles para el

usuario y la frecuencia no sea excesiva (lo que puede hacer que el usuario ignore nuestros mensajes.)

Recomendaciones importantes para el diseo de mailings

El ancho no debe ser superior a 600 px, esto facilita su completa visualizacin en diferentes pantallas y clientes correo electrnico.

La cabecera puede medir ms, pero el contenido siempre medir 600 px. Lo que sobresalga de esa medida deber ser algo que no sea necesario ver.


El logo debe estar en la parte superior izquierda para ser visible desde un primer momento y transmitir confianza. Hay que ponerlo siempre.

La marca tambin debe de estar presente en la lnea de asunto y considerarse como un elemento clave. Esta es la primera referencia que tiene el usuario al ver un e-mail. Tambin es una referencia para bsquedas. Damos por sentado que el cliente est interesado en lo que le podemos mandar.

La lnea de asunto ha de incitar a la apertura del mail, ser lo suficientemente corta como para leerse de un vistazo. Esto es bastante subjetivo, hay que dejar claro lo que se ofrece realmente. Hay que dejar claro quines somos y qu le vamos a contar. Esto crea confianza y buena imagen corporativa; otra cosa es jugar a enganchar clientes con ofertas y precios especiales. Ejemplos:

Accede a Gmail desde tu telfono mvil. Expiracion Licencia Demo ESET Smart Security. Csar, actualiza tu configuracin de privacidad de Facebook. Ahora REDD es tu amigo en MySpace. Envo de artculo en ELPAIS.com

Si inundamos al usuario con e-mails intiles o que no dejan claro lo que es, el usuario terminar por no abrirlos.

Se comenzar con texto para superar problemas de formato en clientes de correo electrnico. Es una herramienta para que el usuario tenga una segunda oportunidad.


Un usuario poco experimentado puede presuponer que el correo est daado o que contiene virus. Uno nunca puede hacerse a la idea del nivel de conocimiento que tiene el usuario.

La llamada a la accin debe ser clara e inequvoca. Se usar el imperativo: compre, pinche aqu, regstrese ahora, no deje pasar esta oportunidad. No hay que dejar lugar a la duda, hay que ser rotundo.

Personalizar el mensaje cuando sea posible, esto lo har ms relevante y atrayente (dirigirse al cliente de forma concreta, por ejemplo, con su nombre). Aunque la autntica personalizacin publicitaria es la que se refiere a la adaptacin real de las ofertas al perfil individual del cliente (sobre esto hablaremos en el 2 cuatrimestre). No obstante existe un tipo de personalizacin que no debemos menospreciar, referirnos al cliente de t a t es una opcin a tener siempre en cuenta.

Indicar la poltica de privacidad y facilitar al mximo el proceso de baja, preferentemente mediante un vnculo directo. El usuario es perezoso, y es probable que nunca se d de baja, pero con estoo se descarga la sensacin negativa que puede tener si no tiene la opcin de darse de baja. Un buen ejemplo es:

Este email se ha enviado a [email protected] por IKEA FAMILY Enviar a un amigo | Informacin legal | Poltica de privacidad | Darme de baja IKEA Barakaldo Parque Comercial Megapark 48902 Barakaldo - Vizcaya

Para no perderte ninguna de nuestras comunicaciones electrnicas por favor aade la direccin ([email protected]) a tu lista de contactos

Inter IKEA System B.V. 2010

La mecnica de compra ha de ser simple y rpida, no es suficiente con enviar a la URL principal. Si se promociona un producto, habr que poner un enlace al sitio concreto para la compra.

Personalizar distintas lneas de interaccin con el email optimiza nuestras notificaciones (personalizacin de distintas lneas de interaccin).


Establecer un gran nmero de links distintos para facilitar el mayor nmero de puertas de entrada razonables: URLs, email, fax, telfono Hay que dar las mximas opciones de acceso y datos posibles.

Ofrecer la ventaja principal al principio como gancho, dejando como opcin la lectura de otras partes del email. No tiene por qu dedicarse todo el e-mail a un nico tema.

Apuntes Narrativa Nuevas Tecnologias

Documents

Transcript of Apuntes Narrativa Nuevas Tecnologias