Interesante artículo publicado en Grokdotcom, y traducido por RedaccionSEO, en el que comentan la importancia del ritmo en la escritura, “El ritmo es un poderoso elemento en tus textos”. La habilidad de escribir un buen copy marca la diferencia entre captar a más usuarios o hacer que huyan de un texto lento, pesado, ininteligible y soso.

El autor describe dos tipos de ritmos de escritura: Visual Mood y Verbal Music.

• Visual Mood: comprender un texto a través de la imagen que nos hacemos de él. Los lectores se hacen una imagen de lo que están leyendo, por lo que debes intentar escribir facilitándoles la visualización de la idea del texto a través de tus palabras. Si deseas animar y excitar al lector, escribe de forma que el texto ofrezca una sensación de velocidad: puntua intencionadamente, utiliza verbos de acciones y palabras cortas. Si lo que quieres es relajar, entonces escribe frases largas e incluye descripciones.
• Verbal Music: Al igual que la música tiene ritmo, nuestro texto puede tenerlo. La forma de lograr un buen copy es consiguiendo que nuestro texto tenga ritmo, para ello debemos escribir frases de distinta longitud, unas cortas, otras medianas y otras largas, mezclándolas y logrando una mixtura que no suponga repetición y monotonía. Así lograremos un mayor impacto en el lector, instándolo a considerar la calidad de nuestro texto e invitándolo a leer más artículos de nuestra página web o blog.

La idea fundamental del artículo nos ofrece una clave para tratar de captar y mantener usuarios en nuestra página web o blog, reduciendo así el bounce rate (porcentaje de rebote), que indica el porcentaje de usuarios que visitan la página y se marchan sin navegar por ésta.

Lógicamente cada tipo de texto depende del público al que va destinado y del tema a tratar, por lo que deberemos variar el ritmo y la velocidad de lectura adaptándonos a nuestros lectores. Lo más importante es evitar la monotonía variando la longitud de las frases y evitando que éstas sean excesivamente largas. Y tú, ¿cómo haces tus copys?

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Prácticas de buen Copywriter: el ritmo en tus textos

Hoy he entrado al Tuenti y para mi sorpresa, o consternación (sí, estoy enganchado a la tuentimania ;P), el servicio está de mantenimiento. Como había un enlace al blog de la red social, he entrado a cotillear un poco. Entre los diversos artículos, comentarios y entradas de branding, he visto una pequeña creatividad ofertando un puesto de trabajo en Tuenti. Como curiosidad, he hecho clíck y me he puesto a mirar unas cuantas fotos que tienen de sus oficinas y puedo decir que poco o nada tienen que envidiar de las de Google: salas de reuniones con sofas y sillones, puestos de trabajo espaciosos y bien iluminados, salas comunes dotadas de fanásticos sofás para tomar un KitKat, etc. Al grano. Entre los diversos puestos que desean cubrir, el único interesante es uno de Usabilidad y Diseño Web. Entre los requerimientos que exigen, hay uno que utiliza un tecnicismo, que si bien nunca había visto u oído, es fácilmente deducible: cross-browsing. Por asi acaso, he entrado en la Wikipedia a ver qué significaba y como me imagino que no seré el único en desconocer esta palabreja de la jerga de los desarrolladores web, os comeno qué significa.

La etimología de la palabra compuesta nos lleva a pensar en los navegadores web (browsing) y una posible relación entre ellos (cross), que desde mi punto de vista o interpretativo, lleva a pensar a un recorrido que abarque a todos ellos.

Según la Wiki, cross-browsing es la habilidad de un desarrollador web de escribir un código que sea compatible con todos los navegadores y se muestre de forma correcta en cualquiera de ellos, sin importar la versión, ni el navegador. Nació en la década de los 90, durante las guerras de los navegadores (Browser Wars), donde se batieron duramente Internet Explorer y Netscape. Durante este tiempo ambos navegadores añadieron nuevas funcionalidades sin coordinarse entre ellos. Como resultado, muchas funcionalidades que eran soportadas por ambos tenían distintas formas de desarrollarse e interpretarse, provocando que los desarrolladores web tuviesen que aprenderse a escribir el código de dos formas distintas para obtener el mismo resultado.

Otro concepto similar es el multi-browsing. Su significado es similar, con la diferencia de que este tecnicismo sólamente implica que cualquier código debería funcionar en varios navegadores, mientras que cross-browsing implica a todos los navegadores y a todas sus versiones.

Por código se entiende, sobre todo, scripts de lado del cliente (client-side script), como JavaScript, aunque también habría cabida a multitud de clases CSS que Microsoft se ha venido sacando de la manga desde tiempos inmemoriables y que sólamente, por inspiración divina, usa Internet Explorer.

Si bien a día de hoy la mayoría de navegadores cumplen los estándares del W3C, Internet Explorer continúa teniendo sus pequeños detalles que lo hacen diferente del resto de navegadores del mercado y continúa fastidiándonos a los webmasters. Así que ya sabes, si eres capaz de desarrollar páginas web, hojas de estilo, scripts o cualquier código, que sea compatible con todos los navegadores (sin importar nombre o versión), puedes incluir en tu CV una bonita palabra que le dará un toque más cool y más técnico.

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Cross-browsing y la guerra de navegadores

Andrea Hidalgo nos ha enviado información sobre una conferencia internacional sobre Usabilidad Web. The Cocktail patrocina un año más el congreso From Business to Buttons, que de nuevo se celebra en Malmö, Suecia. Como en ediciones anteriores, el objetivo es analizar cómo el diseño puede ayudar a al negocio, qué metodologías emplear y conocer casos prácticos.

La conferencia cuenta con ponentes como Garr Reynolds, autor de Presentation Zen y considerado uno de los mejores conferenciantes del mundo, Matt Jones, fundador de Dopplr, Scott Berkun, autor del libro The Myths of Innovation y Gene Liebel, socio de HUGE.

Microsoft, patrocinadora de la conferencia From Business to Buttons llevará su mesa interactiva Surface. La conferencia también está patrocinada por la española The Cocktail.

Más info | The Cocktail

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

From Business to Buttons, conferencia internacional sobre Usabilidad Web

Hoy han publicado un interesante artículo en Site-Reference.com donde abordan este tema. A grandes rasgos, nos cuentan que en términos generales existen dos tipos de contenido en una página web: texto y gráficos. Los motores de búsqueda indexarán el contenido de nuestra página web gracias, en parte, al texto que tengamos publicado, por ello, es importante que la proporción de texto/gráficos vaya de lado del texto.

El contenido gráfico, ya sean imagenes, flash o multimedia, sólo nos reportará beneficios en términos de diseño y concepto visual, pero no para el posicionamiento web, la usabilidad o la accesibilidad. De hecho, según la W3C, es imprescindible ofrecer contenido alternativo para cualquier elemento que pueda provocar dificultades para su lectura o comprensión.

En el artículo argumentan varios puntos negativos en la utilización de contenidos Flash en nuestra página web, ya sean algunos elementos de la web o todo el diseño:

• Algunas animaciones, presentaciones o diseños web en flash requieren la descarga de ficheros pesados. Para conexiones lentas puede resultar mortal y los usuarios pueden optar por abandonar la página. Como ejemplo personal, el otro día entré en la web de Opel para ver el nuevo modelo Insignia. El microsite del configurador del coche estaba desarrollado en flash y tardó una eternidad en descargarse, por lo que me quedé sin ver las prestaciones del coche.
• Hay que tratar de buscar el equilibrio y la proporción entre el contenido gráfico y el texto. Normalmente un diseño web en flash tiende a concentrarse en las animaciones flash más que en el texto, que es lo importante para los motores de búsqueda y el posicionamiento web.
• A los motores de búsqueda no les gusta el contenido Flash. En este punto estoy en desacuerdo con el autor del artículo, ya que argumenta que los buscadores no son capaces de detectar el contenido flash, y como ya demostramos hace tiempo, Google sí indexa páginas web en Flash.

Como conclusión personal, opino que a día de hoy un diseño full en flash es visualmente muy atractivo pero lleva consigo algunos de los problemas que ya hemos comentado. Para mí, lo ideal sería crear una web en XHTML insertando algunos elementos en flash, como cabeceras o menús, y siempre permitiendo una versión alternativa, tanto para mejorar la accesibilidad web del sitio, como para mejorar la indexación en buscadores, ¿y tú? ¿qué diseño web prefieres?

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

¿Diseño web en flash? ¿o no?

Interesante artículo publicado en Janko donde nos enseñan cinco formas distintas de mejorar el aspecto de los links de nuestra página web o blog. Por línea general los diseñadores web asignan distintos colores (normalmente los corporativos) a los enlaces para que los usuarios los identifiquen como tal; en otras ocasiones, los enlaces tienen un estilo clásico, color azul oscuro y subrayados. Sin embargo, si queremos darle un toque original a nuestros enlaces, tenemos a nuestra disposición varios recursos en CSS y JavaScript que nos facilitarán la tarea, teniendo en cuenta que el objetivo de un enlace es que pueda ser identificado como tal por un usuario, ya sea novel o con experiencia, por lo que buscaremos detalles que lo hagan resaltar respecto el resto del texto del website.

En Janko nos proponen cinco formas para conseguirlo, desde la más sencilla, que es aplicar un subrayado con estilo a los enlaces (en este caso el subrayado tiene la propiedad dashed, por lo que será un subrayado con guiones), a la más compleja, que sería mediante un plugin de JavaScript, crear un pequeño efecto de animación de desplazamiento.

Para mí, las más interesantes son las de incluir un pequeño icono junto al enlace con CSS (en la Wikipedia lo usan y lo cierto es que es muy descriptivo) y el que ya he comentado de incluir un subrayado estilizado a los enlaces, de hecho, para la web de un cliente utilicé una técnica parecida, con la diferencia de que también tenía un subrayado en la parte superior en el hover, por lo que al pasar el ratón por encima, el enlace quedaba enmarcado por arriba y por debajo con dos líneas de guiones (style=”border-top: 1px dashed #333, border-bottom: 1px dashed #333“). Aunque lo cierto es que sigo siendo uno de esos webmasters clásicos que sólo cambian el color de los enlaces y aplican en el hover el subrayado, ¿y tú? ¿Qué estilo aplicas a tus enlaces?

Más info | http://www.jankoatwarpspeed.com

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

5 formas sencillas para mejorar el aspecto de los links

Con Userfly podrás realizar completos estudios de usabilidad de tu página web sobre usuarios reales. Simplemente incluyendo una línea de código JavaScript en tus páginas podrás ver en video el comportamiento de los usuarios de tu página web instantes después de su visita. La información se muestra en un video que funciona como un Video Screener, que graba todos los movimientos y acciones del cursor; además, en la parte superior van apareciendo las acciones que ha realizado el usuario (click, submit (enviar un formulario), etc.).

La aplicación UserFly es de pago, aunque nos ofrecen una demo que sólo permite almacenar los datos de 10 usuarios cada hora. Sin duda, es una herramienta de gran utilidad, ya que nos permite conocer qué partes de nuestra web son las más visitadas y cuáles deberíamos mejorar para llamar la atención de los usuarios.

Si bien herramientas de este tipo ya existen en el mercado, como la Superposición de Sitio de Google Analytics, UserFly destaca por ofrecer información en video y prácticamente en tiempo real.

Más info | http://www.userfly.com
Fuente | http://wwwhatsnew.com

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

UserFly, estudia la usabilidad de tu página web a través de videos

Por otro lado, comenta la posibilidad de utilizar distintos tipos de tipografías para estructurar el texto: Serif (las terminaciones de cada letra están marcadas para identificarlas mejor en una lectura rápida, como la Times New Roman) para las cabeceras y Sans Serif (las letras están redondeadas y sin terminaciones marcadas, como la verdana o arial) para el cuerpo del texto. Además de estructurar el texto, estamos aplicando a nuestra página una mejora de usabilidad web, ya que clasificamos y permitimos una mejor identificación del contenido.

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Importancia de la tipografia en entornos web

Recientemente he revisado este aspecto de la primera web que hice, que aunque la tengo olvidada, de vez en cuando la arreglo alguna cosilla (de las muchas que tiene, empezando por la CSS y la estructura de la web, que no tiene navegabilidad en varias páginas).

El proyecto original de la web tenía una prehome con el logotipo en grande y un botón típico: ENTRAR, o SALTAR INTRO (en caso de flash). El contenido de la web era muy elemental, además del logo y el botón de acceso al resto del website, había un párrafo con un Disclaimer y varios mini-logos de webs amigas (la mitad mías, pero bueno).

Está claro que la navegabilidad de la web suspende, sólo se puede acceder a la home, luego, ¿para qué crear una página de presentación?. Está claro que para algunos proyectos sí puede ser interesante una prehome con una buena intro en Flash que ofrezca al usuario suficiente información sobre el site como para que éste le dedique varios segundos. Sin embargo, muchos usuarios o bien pasarán directamente de la intro pulsando un botón de acceso al website, o bien directamente abandonarán la web (sea por que no le atrae la web, no ve suficiente contenido como para interesarle, es un usuario novel y no ha detectado el botón para acceder al website, etc.). En mi caso, mi prehome no ofrecía prácticamente nada al usuario. Sí, el logotipo es característico de la temática de la web, ¿pero cuántas webs lo tienen?; el disclaimer es una nota informativa, pero ¿quién se lo lee?, está claro que la web es de un aficionado y no pretende lucrarse con marcas o imágenes de otras empresas. Por este motivo decidí quitar la prehome y dar acceso directamente a la home de la página.

¿Han mejorado las visitas?, sí. Google Analytics indica que el tiempo medio del usuario ha aumentado, además de nuevas visitas. Esto último ha sido gracias a que la nueva página principal (llamémosla de ahora en adelante home, ya que la prehome ha dejado de existir) está mejor preparada para el posicionamiento: tiene mucho texto con palabras sugerentes para el posicionamiento; bien etiquetadas las imágenes, enlaces y tablas; navegación (¡por fin!); sitemap en el footer de la página, etc., es decir, ha cambiado totalmente el aspecto y el contenido de la home. Hemos pasado de 4 imágenes y el disclaimer a más de 30 imágenes y suficiente texto como para que los robots le dediquen más tiempo, y por supuesto, le pongan mejor cara

Si en vez de haber eliminado la pre-home, la hubiese revisado ¿qué hubiese hecho?. Para empezar retocar todos los códigos: metas, etiquetas, titles, etc. Después meter algún texto informativo al usuario para orientarle a qué página va a entrar, de qué trata y que contiene. Esto se puede conseguir con ese texto y con un pequeño sitemap en el footer con enlaces a las secciones principales, de forma que el usuario, además de ser capaz de pinchar en los enlaces y acceder al contenido de la web, pueda hacerse una idea de la información a la que podrá acceder a través de la página. Pero aún nos queda lo más difícil. Hay que ser muy explícitos e indicar muy bien al usuario cómo puede saltar al contenido principal a través de la prehome. El sitemap nos va a brindar una gran ayuda, pero está en el footer, de modo que tendremos que utilizar el propio logotipo o presentación o flash, o el elemento más importante que hayamos utilizado en la prehome, para darle acceso a la web. Un botón que destaque sobre el resto de la página, por el color, por estar recuadrado, lo que se nos ocurra, pero darle más importancia que el resto de los elementos para que el usuario sepa dónde está la llave maestra de acceso al site.

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

La pre-home de una web, ¿indispensable?