RSS
 

Archive for the ‘Tipografia’ Category

Escribir para la web

02 Jul

La primera recomendación es hacer el texto tan claro y conciso como sea posible; es decir, reduzca la cantidad de texto eliminando las palabras que no se necesitan.

Una segunda recomendación debe ser convertir la disposición del texto a un formato que sea más “agradable”.

Por ejemplo, las listas y las tablas con “bulleted” o numeradas se pueden hojear mucho más rápidamente que si alineamos el texto tradicional.

Listas de formato, texto del bloque, y tablas

Los títulos de los menúes y los artículos de menú se deben ajustar a lformato, usando las letras mayusculas y minusculas. Los sustantivos, los pronombres, los verbos, los adjetivos, y los adverbios deben comenzar con una mayúscula, mientras que las conjunciones y los artículos deben ser todo minúsculas.

Las listas tienen la ventaja de atraer el ojo del usuario. El único problema significativo de la utilidad de listas es la dificultad de interpretar las listas que se jerarquizan dentro de otras listas, evite hacer esto en la medida que sea posible.

Las tablas son una manera extremadamente útil de transportar el material en espacio muy pequeño, y de una manera que atraiga la atención del usuario.

Incluya cualidades que mejoren el funcionamiento y utilidad de la tabla. Las cualidades explícitas del tamaño aceleran las tablas dramáticamente, puesto que el browser no tiene que analizar el texto para determinarse cómo deben ser las columnas de anchas.

Utilice la ANCHURA y la ALTURA, en las especificaciones en ambos aspectos de la TABLA, y para todas las especificaciones del TD, en porcentajes.

También recuerde que las tablas complejas pueden tardar más tiempo en descargarse. Para mejorar funcionamiento y descarga, parta el contenido en tablas múltiples, más simples.

Mejorar la accesibilidad del web

Lo más importante que usted puede hacer para mejorar la accesibilidad del texto es utilizar etiquetas del estilo del HTML para identificar títulos.

Los “navegadores de Voz” exploran el Web buscando títulos y referencias para ayudar al usuario a orientarse y a ganar una sinopsis del contenido de la página.

Otra ayuda a la accesibilidad es utilizar texto en vez de imagenes donde sea posible. Los textos tienen la ventaja agregada de cargar más rápidamente que las imágenes.

Autor: Emilio Cercas (entraenlared.com)
fuente: http://www.webtaller.com

SocialTwist Tell-a-Friend
 
1 Comment

Posted in Accesibilidad, Estándares web, Tipografia, Usabilidad, e-marketing

 

Posible razón por el cambio de tipografías de Adsense

01 Jul

Desde hace un tiempo Google esta haciendo pruebas cambiando la tipografía de sus anuncios Adsense, al principio una de las primeras tipografías con las que se realizaron las pruebas fue con la Comic Sans, pero desde hace un tiempo se pueden ver muchas tipografías distintas.
Al principio pensaba que se trataba de unas pruebas para luego habilitar esta opción a los editores, pero ahora me di cuenta que se puede tratar de algo un poco mas “oscuro”.

Desde el cambio de códigos de Adsense muchos editores experimentaron un descenso en sus ganancias, justamente este descenso viene de la mano del cambio de tipografías, mi pregunta es ¿Google no estará probando a los editores y los clics que son por error?
Me explico, como muchos sabrán una de las técnicas para incrementar el CTR de los anuncios es fundir el contenido con los anuncios, haciendo prácticamente imperceptible la diferencia entre contenidos y anuncios, esta técnica es muy antigua, y para “confundir” a los visitantes las tipografías juegan un rol determinante, ahora digo, ¿esta no es una forma por la cual google se daría cuenta que editores logran incrementar sus ganancias mezclando sus anuncios con los contenidos de los que logran sus clics porque sus visitantes deciden clickear de forma conciente en la publicidad?

Por ejemplo si un editor integra los anuncios a sus contenidos de manera casi imperceptible y logra un CTR de 10% y cuando se le cambia la tipografía logra un 2% ¿no saltaría la termica en Google?

Podria ser una posibilidad, y que las pruebas de Google sean otra forma mas de combatir el fraude, o al menos los clics involuntarios.

fuente: kbytes.com

SocialTwist Tell-a-Friend
 
No Comments

Posted in Google, SEO, Tipografia, e-marketing, usuarios web

 

Importancia de los espacios en blanco en el diseño

11 Feb

El espacio que rodea a este bloque de texto es tan importante como otros factores, como el uso apropiado del color, el tipo y gráficos.

El espacio que rodea a este bloque de texto es tan importante como otros factores, como el uso apropiado del color, el tipo y gráficos. Lo sé, hay una tendencia, especialmente en la web, de rellenar todos y cada uno de los rincones con texto. “El espacio en blanco está mal”, parece ser el eslogan, “¡debe ser eliminado!” “¡Abajo con espacios en blanco!”

Lo gracioso es que, a la mayoría de nosotros nos han enseñado desde la escuela primaria a utilizar los espacios en blanco. Recuerdo como mis maestros siempre insistian en que pusieramos un margen de 2cm en el lado izquierdo de cada página. Nos lo metieron tanto en la cabeza, hasta que se convirtió en un hábito que no he podido romper, incluso hasta el día de hoy. Lo cual es en realidad un gran hábito.

Entonces, ¿por qué es tan importante el espacio en blanco? Parte de la razón es psicológica y parte física: el texto necesita espacio para respirar. Cuando grandes cantidades de texto cruzan de lado a lado los bordes de la página, nos dan la sensacion de multitud y de que algo esta rebosando. Largos pasajes de texto, escritos de lado a lado, cansan a los ojos.

Pruébalo. Coje hoja de papel normal, y escribe varias líneas de texto de un borde de la página al otro, sin dejar ningún espacio en la parte superior o margen izquierdo y derecho. Ahora coje otra hoja de papel y justo en el medio, escribe unas líneas de texto, dejando una generosa cantidad de espacio en blanco en todos los lados (por ejemplo 2.5 cm en cada lado y 3 en la parte superior.) Ahora compara las dos páginas. ¿Cuál es más fácil de leer?

Por cierto, los espacios en blanco no tienen porque ser en blanco. Pueden ser de cualquier otro color. Con espacio en blanco nos referimos a cualquier área vacía (de color o blanco, opaco o transparente) que carece de texto.
En esta columna por ejemplo, te habrás dado cuenta que está rodeada de una generosa cantidad de espacio en blanco. Esto combinado con un menor ancho de columna, mejora la legibilidad del texto y que hace que sea mucho más fácil de leer.

Otra razón para el uso de espacio en blanco se relaciona con un tema que voy a revisar con más detalle en una próxima columna: contraste. Una gran cantidad de espacio en blanco alrededor de un bloque de texto llama mucho la atención del lector, especialmente en un medio donde hay mucho texto, como un periódico, donde cada rincón está lleno de lineas de información.

Al igual que este texto, por ejemplo.

Puedes comprobar que leyendo esta columna de un vistazo, escaneándola, te pararás a ver que pone en esa linea que está tan solitaria, y no prestarás atencion a todos los demas párrafos. Ese es el poder de un espacio en blanco. Muchas veces, en los periódicos como el Wall Street Journal o el New York Times, verás anuncios de página completa, con casi nada más en la página excepto una solitaria frase del texto. Podrias pensar que están tontos o algo, que una empresa paga miles de euros por este anuncio de página completa, y luego no se aprovechan de él llenándolo de texto, mensajes, etc. Y, sin embargo, puede que no puedas evitar saltarte el anuncio. Ese es el poder de los espacios en blanco (y el contraste.).

Así que la próxima vez que te encuentres preparando un informe, un boletín de noticias, o un anuncio de una venta de una casa, piensa en el espacio en blanco. La primera vez que lo haces conscientemente, puede resultar difícil (lo sé) Pero con el tiempo te acostumbrarás a él, y me pregunto cómo hacia las cosas sin el.

Autor: Design matters
http://www.sheriftariq.org/design/whitespace/index.html

SocialTwist Tell-a-Friend
 
No Comments

Posted in Creatividad, Diseño, Estándares web, Interfases, Tipografia, informacion, usuarios web, web 2.0

 

9 principios para un buen diseño web

26 Dec

Artículo publicado en psdtut llamado 9 Essential Principles for Good Web Design:El diseño Web puede llegar a ser engañosamente difícil. Ya que debes crear un diseño que a la vez sea usable y agradable, que muestre información y que a la vez haga marca y que técnicamente y visualmente sea coherente. Los principios son:

  1. Precedencia (guiando al ojo),  esto se refiere a la facilidad con que el usuarios encuentra algo en la pantalla sin mucho esfuerzo, para lograrlo es necesario tomar en cuenta la posición, el color y el contraste de los elementos, un ejemplo de un sitio con buena precedencia es: Capture the Valley que usa barras de color para guiar el ojo a través de las secciones desde arriba hasta abajo.
  2. Espaciado,  el espaciado hace que las cosas se vean más claras, debes tomar en cuenta el espacio entre líneas, el padding y los espacios en blanco, un ejemplo de un buen uso de espacios es Marius que tiene un sitio muy limpio, simple y usa bien los espacios
  3. Navegación, para la navegación debes tomar en cuenta estos dos tipos de navegación: la que te dice a donde puedes ir y la que te indica donde estás que se refiere a la del tipo: Inicio ? Sección ? Subsección, cómo ejemplo a todo esto tenemos a Noodlebox tiene un buen trabajo en cuanto a los botones de navegación que indican cuando están activo y cuando no.
  4. Diseñar para construir,  debes tener en cuenta antes de diseñar algo que todo puede cambiar, por ejemplo si alguien cambia la resolución de pantalla, cómo simplificar las cosas,  etc.
  5. Tipografía, el texto es uno de los elementos más importantes del diseño así que no lo debemos olvidar y debemos considerar cosas cómo el tipo de fuente, el tamaño de la fuente, el espaciado, lo largo de la línea, el color y los párrafos, en iLoveTypography! utilizan muy bien las tipografías.
  6. Usabilidad, para diseñar s sitio usable debemos apegarnos a los estándares web, pensar en el usuario y que pueda hacer lo que queremos que haga y ponernos en su lugar, un ejemplo de usabilidad es Happycog que tiene un sitio muy usable ya que es simple y fácil de usar.
  7. Alineación, mantener las cosas alineadas es muy importante para el diseño de un sitio web, un ejemplo claro de alineación es Electric Pulp.
  8. Claridad, para lograr un diseño claro debes detallar my bien cada borde, asegurarte que a cada texto se le aplica bien el anti-alias, asegurarte que el contraste de los colores el alto, y enfatizar sólo un poco los bordes, no exagerar. El sitio de ExpressionEngine tiene un diseño muy claro, cada elemento está perfectamente posicionado y claro.
  9. Consistencia, se refiere a que todo debe coincidir tamaños de los títulos, estilos colores, elementos, etc., el sitio de Veerle hace un gran trabajo de mantener incluso los detalles más minúsculos constantes.

Puedes encontrar más información en el libro How to Be a Rockstar Freelancer escrito por el mismo autor de estos 9 principios.

fuente: http://www.carlosleopoldo.com/2007/12/17/9-principios-para-un-buen-diseno-web/

SocialTwist Tell-a-Friend
 
4 Comments

Posted in Accesibilidad, Creatividad, Diseño, Estándares web, Interfases, Tipografia, Usabilidad, html, usuarios web

 

Como lee los Usuarios en la Web

16 Jun

Los usuarios en la Web no leen, o por lo menos no lo hacen de la misma forma secuencial que cuando tienen entre manos un periódico, un libro, un artículo o un cómic. Los usuarios tienen necesidades y objetivos, metas que alcanzar, y saben que la forma de conseguir dichas metas no suele ser dedicando largos ratos a cada nodo web que visitan, leyendo de principio a fin sus contenidos y enlaces. El usuario, en una página, hará clic sobre el primer enlace que crea puede llevarle a lo que busca, necesita o pudiera interesar. Eso quiere decir que muchos de los contenidos y enlaces de ese nodo ni siquiera serán vistos por el usuario.

Perdón, Cómo ojean los usuarios

El usuario, ante una página, ojea a saltos la información contenida. No podemos predecir con exactitud cuál será el camino que el usuario seguirá durante su exploración visual de la página, pero sí a qué zonas le presta mayor atención en su búsqueda:

Hay zonas del interfaz de la página que confieren una mayor jerarquía a la información que contienen, como la zona 1. La Jerarquía Visual[1] proporciona relaciones jerárquicas del tipo ‘esto es parte de esto’ y ‘esto va a continuación de esto’ entre los objetos informativos de la página, mientras que la Jerarquía de Información o Contenidos establece relaciones del tipo ‘esto es más importante que esto’.

Para enfatizar la importancia de unos objetos informativos de la página sobre otros, es decir, para definir la Jerarquía de la información, se pueden utilizar diversas técnicas:

  • Colocar la información más importante en zonas del interfaz más relevantes (ver figura anterior)
  • Enfatizar mediante efectos tipográficos
  • Aumentar el tamaño de los textos de mayor importancia
  • Utilizar el contraste del color para distribuir y discriminar objetos informativos
  • Agrupar objetos informativos relacionados entre sí

Al contrario de lo que pueda parecer, los objetos informativos parpadeantes, cambiantes o deslizantes no serán percibidos por el usuario como importantes. Pueden ser percibidos como publicidad, ya que es un mecanismo demasiado explícito para atraer la atención del usuario.

Además, al diseñar la información de nuestra página (jerarquía visual y la jerarquía de información), si definimos demasiados objetos informativos como ‘muy importantes’, se produciría en el usuario una sobrecarga de información, con lo que habremos fallado en nuestro objetivo.

El problema es que el usuario en la Web no es único ni uniforme. Cada usuario que visite el sitio web tendrá necesidades, expectativas y comportamientos diferentes, por lo que el diseño de la información debe realizarse para satisfacer al mayor número de usuarios posibles.

Si dispone de los conocimientos y tecnología suficiente podría realizar un diseño dinámico que mediante perfiles se adaptara a las diferentes necesidades de cada grupo de usuarios, o idealmente, a cada usuario en concreto. La jerarquía de información de cada página sería diferente para un usuario que visitara el sitio web una media de 3 veces por semana y que ya hubiera comprado un par de productos, que para el usuario que es la primera vez que visita el sitio web.

Conclusiones

Los usuarios usan las páginas, no las leen. Aún en el caso del usuario, que después de haber realizado una navegación compulsiva e irreflexiva, se encuentra con un texto o artículo cuyo contenido en general es de su interés, no empezará a leerlo. Antes lo ojeará, leerá los títulos y epígrafes, mirará las figuras, gráficos e imágenes, quizás lea algún párrafo en el que se encuentre algún término de su interés enfatizado, y sólo después de esto, empezará a leer. Una vez que empiece a leer el texto (no necesariamente desde el principio), puede que incluso lo abandone haciendo clic sobre algún enlace que tuviera embebido.

La causa de este comportamiento es sencilla: los usuarios odian leer en pantalla, e intentarán por todos los medios extraer de los textos toda la información que necesiten o interese con el menor esfuerzo posible.

Fuente: nosolousabilidad.com
Yusef Hassan Montero
Grupo SCImago, Universidad de Granada

SocialTwist Tell-a-Friend
 
No Comments

Posted in Accesibilidad, Curiosidades, Estándares web, Interfases, Tipografia, Usabilidad, informacion, usuarios web, web 2.0

 

Tipografía en la web

28 Apr

El diseño digital tiene sus problemas propios, a los que se suma el hecho que existen diferentes plataformas y distintos monitores, y nunca es posible saber exactamente cómo un mismo website será visto por los diferentes usuarios.

La tipografía en la web es un tema nuevo, y si bien pueden aplicarse muchas reglas del medio impreso, existe un número importante de características propias del medio digital que deberán considerarse para redefinir pautas. En este momento, estas últimas están siendo creadas con el sistema de prueba-error. Las diferencias más importantes pueden enumerarse de la siguiente manera:

  • La orientación de las páginas es normalmente horizontal, en lugar de vertical;
  • Generalmente no se ve al mismo tiempo la totalidad del material;
  • El diseñador tiene mucho menor control de la tipografía y de la puesta en página que en el material impreso;
  • En general, la resolución es menor, por lo que los detalles finos no están bien definidos;
  • Por todo lo expuesto anteriormente, la velocidad de lectura es aproximadamente un 30% menor;
  • Los lectores escanean en lugar de leer, por lo que la comprensión y retención se reduce a un 50%;
  • Se suman las barras de scroll como problema/obstáculo;
  • El hipertexto es más fácil.

En un principio, era sumamente complicado tener un control de la tipografía y el creador de un website tenía muy poco control sobre cómo el usuario lo vería verdaderamente.

Desde la creación de las Cascading Style Sheets (CSS) –algo así como Páginas de Estilo–, una característica disponible en la mayoría de los browsers de la actualidad, es posible controlar varios aspectos de la tipografía y del formato de la página en general.

El buen uso de la tipografía depende del contraste visual entre fuentes y entre los bloques de texto y el blanco. El ojo es naturalmente atraído por los contrastes.

El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras; no en reconocer cada letra para luego juntarlas y formar la palabra. El ojo escudriña la parte posterior de las letras en el momento de leer y es por ello que las palabras compuestas todas en mayúsculas tienen menor legibilidad.

El ojo ve primero el conjunto de la puesta en página y el contraste que la misma presenta, para pasar en segundo plano al reconocimiento de las partes y por último, llegar al detalle de las palabras.

El uso de textos en pantalla viola las convenciones sobre las reglas básicas creadas para las piezas impresas. Las líneas de los bloques de texto son, en general, mucho más largas que lo necesario para una lectura relajada. En libros o revistas, por ejemplo, a una distancia del papel normal, el alcance ocular a lo ancho es de unos 8 cm, y es por eso que los párrafos (standard) conservan estas proporciones. El uso de líneas más anchas requieren que el lector gire su cabeza ligeramente o fuerce los músculos del ojo para poder seguir las líneas. Desgraciadamente, gran parte de las páginas en la web tienen el doble de ancho del alcance normal del ojo, por lo que se requiere de un esfuerzo extra para leer estos textos. Además, si la línea es demasiado ancha, como al ojo le cuesta ir de un extremo al otro, provoca que esa línea sea salteada o leída dos veces.

Como dijéramos anteriormente, con el uso de CSS es posible controlar varios aspectos de la puesta en página y, por lo tanto, hacer párrafos de líneas más cortas e incrementar la interlínea, que al ser utilizada generosamente (un 150% más que en impresión) mejora notablemente la legibilidad. Esto especialmente en tipografías sans serif, que no cuentan con la guía horizontal que forman las serifas, y que ayudan al ojo a seguir el flujo de texto.

La elección de la tipografía a utilizar es de suma importancia en el diseño digital, como lo es, por supuesto, en las piezas de diseño impreso.

Hay tipografías diseñadas especialmente para la pantalla y otras producidas por un cálculo basado en una descripción por software de la fuente. Las fuentes para pantalla están pensadas para calzar en la grilla de pixeles y cada caracter está pensado y optimizado en función a ésta. Las tipografías están diseñadas para ser usadas en tamaños específicos, como cuerpo 8, 9, 10, 12, 14, etc. Si se las utiliza en un cuerpo para el que no han sido pensadas, como por ejemplo cuerpo 11 ó 13, van a ser generadas mediante un cálculo que aproxima visualmente al tamaño solicitado, pero que pierde todas las sutilezas de diseño original.
 Copyright © (bi)gital» 2001 | http://bigital.com/

SocialTwist Tell-a-Friend
 
1 Comment

Posted in Estándares web, Interfases, Tipografia, Usabilidad