Desde luego que no es una ciencia exacta ni hay un método infalible… Pero sí que mediante una serie de claves nuestro posicionamiento será mejor. Nos vamos a referir a contenidos y técnicas que funcionan. Que están probadas. Y que nos ayudarán a posicionar mejor nuestro sitio web.

Optimiza el título

El título es uno de los elementos mas importantes de nuestra página web. Será lo primero que se vea en los resultados de búsqueda. En los maracadores/favoritos. Desde mi del.icio.us. Piensa en el usuario y te acercarás al posicionamiento en buscadores. Si manejas las técnicas pensando en los usuarios verás como tu posicionamiento mejorará.

Escribe un título descriptivo, olvidate de poner sólo tu dominio, olvídate de escribir barras, puntos, guiones, no intentes decorar la barra de título. No tiene sentido. Ve al grano. Escribe de que va la página. Limítate a escribir un par de frases sobre tu target.

Escribe un título apropiado para cada página, evita utilizar el mismo título para todas las páginas.

Elige unas palabras para las Meta Keywords

Selecciona unas cuantas palabras que sean el objetivo de la web, busca vacíos de mercado donde posicionar tu marca, no luches contra las grandes palabras. Utiliza palabras que aparecen dentro de la página. Mejor si están dentro del título o de los encabezados de sección.

Trabaja bien unas cuantas palabras clave, haz que se repitan dentro del contenido.

Selecciona unas palabras clave y construye tu contenido alrededor de ellas. Intenta no luchar contra las palabra más buscadas.

Utiliza la descripción

Usa esta etiqueta. No te olvides de ella. Recuerda que mejor que aparecer en buscadores, es conseguir que nos visiten desde buscadores. Para tener un mejor click through el texto debe atraer al usuaio. Selecciona un par de frases que describan el contenido de esa página en cuestión. No de todo el sitio. Usa descripciones distintas para cada una de las páginas.

Codifica semánticamente

Cuando maquetes tu página preocupate de la semántica. Utiliza las etiquetas de cabecera (h1, h2, h3, h4…) no te olvides de ellas, mejorarán notablemente el posicionamiento.

Piensa que estas cabeceras están para estructurar tu contenido. Para asignar importancia a los bloques de contenido.

Utiliza un documento en blanco. Un word, por ejemplo. Escribe el texto que tiene que contener cada página. Usa las negritas y tamaños de fuente igual que lo harías para dar importancia a un texto en papel. Luego llevalo a internet. Codifícalo de la misma manera. Pocas palabras pero claves y con sentido. Cuanto más arriba coloques tu h1, mejor.

No te olvides de las imágenes

Completa siempre el atributo alt de tus imágenes. Describe la imagen. Utiliza también, si puedes, las palabras clave. Las palabras que mejor describen la imagen. Si están cerca del contenido más relevante, mejor. Aunque el atributo alt hable de la imagen, si está relacionado con el contenido, que debe de estarlo, ayuda a posicionar la imagen.

El nombre del archivo de la imagen también es importante, incluye las palabras que describen la imagen. Además así te servirán para saber que contiene esa imagen sin verla. La usabilidad también debe de ser para nosotros y nuestros archivos.

Optimiza tu contenido

A pesar de todo lo que hemos visto, si no tenemos un contenido relevante de poco nos sirve nuestra web. Habla del mismo tema dentro de la página. No mezcles muchos temas. A ser posible, evita el javascript y el flash para mostrar información relevante. Procura que las palabras clave, el título, la descripción de la página y el resto de elementos tengan relación con el contenido.

Escribe para los usuarios. Escribe amenudo. Céntrate en un tema y desarrolla.

Escribe para internet. Utiliza etiquetas para enfatizar palabras, frases. Utiliza la etiqueta strong. Ve al grano.

Trabaja con la URL

Estudia la estructura de directorios y nombres de ficheros. Si puedes, reescribe dinámicamente las URL para evitar el paso de parámetros por la barra de dirección. Si tienes que utilizar mas de una palabra para un fichero o directorio, utiliza guiones para separar las palabras.

Si aún no tienes dominio, piensa que el dominio puede ser clave para un buen posicionamiento.

Cuida los enlaces

Utiliza enlaces dentro del propio sitio, para ello usa frases, en lugar de palabras sueltas. Usa frases que describan el contenido al que va el enlace. Piensa en el usuario. Da un motivo para pulsar el enlace. No uses el click aquí.

A ser posible consigue enlaces desde otras páginas con la misma temática. Mejor menos enlaces pero de más calidad.

Un sitio web es uno de los vehículos más eficaces para comunicar un mensaje. Además es la primera y, a veces, la única referencia que los usuarios (no olvidemos nunca: personas) tienen sobre nosotros. Por ello dejar de lado la información que aparecerá en nuestra página web es todo un error.

Diseño del contenido

Es imprescindible considerar el diseño del contenido como parte fundamental del desarrollo de nuestro sitio web. Debemos conocer bien todo el contenido o, al menos, la gran mayoría del que queremos publicar. De lo contrario, introducir el contenido sobre un diseño que no ha seguido la estructura real hace difícil que se vea de manera natural.

Consigue todo el contenido

Hazte con todo el contenido que puedas, repásalo, revísalo. Cuida que tenga el mismo tono, que se vea como parte del mismo conjunto. No es extraño encontrar sitios en los que se trata al usuario unas veces de usted, con una educación británica, y otras del más absoluto colegueo.

Elige cómo quieres tratar a tus clientes/usuarios y crea todo el contenido en la misma línea.

Divide el contenido

Divide el contenido en fragmentos, revisa, lee, modifica la línea, vuelve a fragmentar… extrae las líneas clave. De nada nos sirve copiar el texto que aparece en nuestros dossieres de información que entregamos al cliente en visitas, haz textos nuevos, escribelos para el medio.

Ya sabes, párrafos más cortos inserta enlaces de unos contenidos a otros. Fragmenta, detalla. Crea listas.

Hazlo tú mismo

No dejes este proceso en manos de quién te desarrolle la web, a menos que cuente con un equipo de contenidos, tú eres el que mejor sabe cómo funciona tu negocio. Tú eres el que mejor sabe qué quiere comunicar. Tú eres el que sabe qué imagen quieres dar de tu empresa.
Implícate.

El verdadero valor está en el contenido

La web es contenido. De él nació. Los buscadores encuentran el contenido en nuestras páginas. Los usuarios, tú mismo, cuando navegamos lo hacemos en busca de contenido, ya sea texto, vídeo, audio… lo que buscamos es el contenido.

Más

• Del contenido surge la forma. Botones, tablas, tipografía y párrafos, de César Martín
• Los Contenidos en Internet: importancia y recomendaciones, artículo de dnx

En los años 60, los países europeos firmaron la Convención de Viena sobre tratado de señales tráfico, la misión era estandarizar las regulaciones de tráfico en los países. Para, por un lado, facilitar el tráfico internacional y, por el otro, aumentar la seguridad vial.

El estándar

Se estandarizaron las formas y colores para fijar así los propósitos informativos de la señal. De esta manera acordaron utilizar formas triangulares para señalizar peligro. Para las prohibiciones un círculo con borde rojo. Rectángulos para señales informativas. Y alguna mas que conocemos.

Realismo pictórico, diferencias culturales y sociales

Un ejemplo estas diferencias lo encontramos en las señales de peligro que incluyen animales, depende del país en el que nos encontremos será fácil ver canguros, alces, ranas, ciervos, patos, vacas, ovejas, caballos, osos polares y hasta monos.

Y sin irnos tan al extremo estas diferencias hacen que incluso los pictogramas de hombres, mujeres y niños difieran de uno a otro país.

Durante mi último viaje me llamó mas la atención, al pasear por una calle, vimos la señal, entendimos lo que quería decirnos y apenas nos fijamos en las diferencias, pero, y si nos paramos. Si nos paramos y miramos la señal detenidamente, si estudiamos el pictograma que ante nosotros se muestra. Entonces encontraremos las diferencias. Analizando las señales de tráfico de distintas naciones podemos encontrarnos con multitud de curiosidades. En esta interesante recopilación de señales del mundo encontramos multitud de curiosidades.

En España

Aquí nos encontramos con una imagen como esta. Los niños son figuras de palo, las cabezas se encuentran desconectadas del resto del cuerpo. Parecen correr. Y los dos llevan una bolsa en sus manos. Este pictograma o variaciones muy similares son utilizados en Italia y Portugal, curiosamente los niños portugueses no llevan ninguna bolsa en la mano.

Curiosidades

Llaman la atención las influencias entre países, una generalización de algunas señales como por ejemplo los países mediterráneos, otras entre países con, a priori, menos relaciones culturales. Casi siempre se muestra una figura con dos niños, a veces la niña va delante y a veces se sitúa detrás del niño. Casi siempre uno de mayor tamaño que otro, que es el que orienta al más pequeño. En la mayoría de ocasiones el chico protege a la chica pero hay ocasiones en las que es ella la que protege al menor. Sería caso de estudio. También, aunque mas raro, hay ocasiones en las que aparece una sola figura, caso de Argentina o India.

Más información

• Bartolomeo: Roadsigns of the world
• Señales de tráfico
• Pasos de cebra, de Juan Leal

Top-10 Application-Design Mistakes

• Controles no estándares
• Inconsistencia
• Acciones no perceptibles
• Controles sin reacción
• Malos mensajes de error
• Preguntar por lo mismo dos veces
• No hay valores por defecto
• No explicar cómo funciona la aplicación
• No indicar qué se hace con la información
• Mostrar características internas

Controles no estándares

Las barras de desplazamiento son las víctimas mas habituales de los diseños con controles no estándares, su utilización hace que en la mayoría de los casos los usuarios sean víctimas de no encontrar información. Por mi experiencia en tests las barras de desplazamiento siempre suponen un obstáculo para los usuarios y una vez que consideran éstas como elementos comunes en la gran mayoría de sitios web, hacen que, si cambiamos su apariencia en nuestras aplicaciones, los usuarios vuelvan a encontrar dificultades para, primero, localizarla y, después, aprender su uso.

Algunos de los mejores diseñadores de interacción han perfeccionado el look-and-feel de estos controles durante más de 30 años, con el apoyo de miles de horas de tests con usuarios.

Es poco probable que vayas a inventar un botón mejor durante el fin de semana.

Un problema completamente opuesto es el de dar apariencia de botón a elementos que, en realidad, no lo son. En aplicaciones de comercio electrónico puede generar. Un porcentaje por pequeño que sea, abandonará la acción una vez pasada la confusión.

Cada pequeño error en el diseño reduce su uso en sólo una pequeña cantidad, pero la mayoría de interfaces contienen pequeños errores que hacen que el número de clientes perdidos sume.

Controles sin reacción

Para mejorar la usabilidad hay que mejorar la información que la aplicación devuelve al usuario. Situación actual, interpretación de la situación actual, informar de la situación futura.

Malos mensajes de error

Es importantísimo dar información al usuario sobre el error, el porqué se ha producido y cómo puede solucionarlo. El usuario está mas que acostumbrado a no leer esos mensajes de error porque están diseñados para dar información al programador de la aplicación, así es frecuente encontrar textos que indican códigos y textos en otro idioma. Los usuarios quieren superar el error, quieren saber porqué no ha funcionado pero a menudo se encuentran con textos que no le ayudan en nada, cuando un texto bien desarrollado puede hacer al usuario resolver el problema y continuar.

No indicar qué se hace con la información

Obligar a los usuarios a introducir información sin saber para que la utilizará en el futuro, conduce a muchos errores que se pueden solucionar explicando para qué va a necesitar el sistema esa información. Los casos mas comunes son la introducción de códigos postales al inicio de la aplicación o la introducción de nombres de usuario (nicknames) que el usuario no sabe muy bien para que servirá. De saberlo probablemente introduzca otra información más válida.

Más información

• Top-10 Application-Design Mistakes
• 10 errores en el diseño de aplicaciones

A veces, mas de las que quisiéramos, nos encontramos con algo que nos desconcierta, nos sorprende, a algunos nos inquieta y a otros les hace pensar que se han equivocado. No olvidemos que éstos, los que han de ir a google, teclear nuevamente el dominio y pulsar en su enlace para conseguir acceder a la web en cuestión, son la gran mayoría de usuarios de la web.

Los otros, los menos, nos situamos sobre la barra de direcciones y tecleamos simplemente una letra, tres veces. Si las dichosas www.

¿Que ha pasado?

El resultado que encontramos, cuando esperamos encontrar la web a la que queremos acceder, es tan variado como desconcertante para la mayoría de los usuarios:

• DNS Server failure, eso sí en un perfecto inglés.
• Under Construction, con unas instrucciones para poner en marcha el servidor.
• It works!, de verdad ¿funciona? ¿el qué?
• Directory listing denied

Usabilidad, Accesibilidad

Muchas veces se presentan sitios que se etiquetan como usables, accesibles, web 2.0… que han pasado tests, automáticos, entrevistas con usuarios… Otras veces no tanto, pero se marcan como tales… Pero a la hora de configurar el servidor se olvidan, dejan, no prueban o abandonan este término a la suerte de la configuración del servidor, bien sea por defecto o lo que crea oportuno aquel que instale el mismo.

Eso también es usabilidad y accesibilidad

También es importante, también mejora la experiencia de uso, también hace mas accesible nuestra web, también es mejor para la empresa… mas visitas. Porque dejar la carga de esta operación sobre el usuario, cuando técnicamente es posible que dicha tarea sea realizada por el servidor. Son unos minutos de configuración que aportan más al usuario y a la empresa.

Más

• Make sure your website works with or without www
• www. is deprecated
• To www or not to www

A priori es una noticia más que interesante, la creación de una asociación para la provincia de Ciudad Real puede suponer un paso hacia la creación de un asociación a nivel regional. La cuestión está en si los profesionales de la provincia están/estamos capacitados para asociarnos, movernos, compartir… Sinceramente espero que sí y creo que algo está cambiando, pero no se si habrá cambiado tanto, tanto, tanto…

Baja cultura asociacionista

En una zona con una baja cultura asociacionista, donde mas que otra cosa se ve este tipo de iniciativas como “más para los mismos” quizás sería interesante contar con la participación de los diseñadores, conocer sus inquietudes, hacer una llamada a la participación de todos o, al menos, los que quieran y borrar así la imagen de “esto lo hacen los de siempre, para los de siempre”.

Crear comunidad

Al hilo de este tipo de iniciativas más oficiales, me gustaría dejar en el aire (si es que me lee alguien) crear algún tipo de movimiento, paralelo e independiente que ayude a la formación de esta asociación y que además sirva para compartir experiencias, conocimientos, establecer colaboraciones… hace tiempo lo intenté con la propia inquiettudes.com con un escaso éxito, una colaboración de la gente de milrayas y algún contacto con otro diseñador de la provincia.

Aquí, dejo mi propuesta

Iniciativas como Cadius podrían dar lugar a interesantes reuniones mensuales entre gente del diseño, diseño web, internet, bloggers… de la provincia que pueden traducirse en conferencias, jornadas, cursos… y ayudar, en el futuro, a la creación de la Asociación de Ciudad Real.

¿Que te parece?

Si te parece interesante la iniciativa, vives cerca de Ciudad Real y no te importaría compartir unas cervezas un día del mes para juntarte con gente que se mueve con las mismas inquietudes que tú, deja un comentario, mándame un mail o lo que quieras, sólo ponte en contacto conmigo.

¿Y que significa todo esto exactamente?

Sencillamente que gracias a este trocito de código podremos aplicar todas las pseudo clases y pseudo elementos para dar formato a nuestras páginas. Así conseguimos que Internet Explorer sea capaz de adoptar e interpretar todo lo necesario para acercarse un poco a un navegador que cumple los estándares.

¿En qué nos beneficia?

Pues sencillamente en que nuestros HTML serán más sencillos, por ejemplo: podremos olvidarnos de aquellas clases que indican cual es el último elemento de la lista, podremos añadir contenido directamente desde la hoja de estilos a nuestro HTML, modificar estilos según el atributo de un elemento… En definitiva todo lo que marca la W3C.

• Lista del soporte que da a MSIE

¿Y la accesibilidad?

Y, como llego tarde, ya he leído comentarios en blogs sobre la utilización de javascript y su accesibilidad. Para el número pequeño de usuarios que navegan con JavaScript desactivado, aproximadamente entre un 8% y un 6%, la página es completamente visible y funcional, no se verá de la misma manera, pero el contenido es accesible para todos los usuarios.

Ya pero… no valida

Sobre esto mejor que yo lo explica Alberto Fortes en su post: Validadores automáticos del w3c si, pero no. No podemos hablar de usabilidad, accesibilidad, diseño centrado en el usuario, personas… y luego dejar todo del lado de un validador automático que no olvidemos que es una máquina. Es decir una maquina va a evaluar si el sitio está indicado para personas. Ojo con los validadores, ojo con las herramientas automáticas de validación de la accesibilidad.

¿Quieres saber más?

• Los selectores de CSS son ya posibles en internet explorer, gracias Alberto
• JavaScript library, IE7
• Validadores automáticos del w3c si, pero no
• Accesibilidad y herramientas automáticas

Actualización:

Como siempre, se me han adelantado… Gabriel Porras ha traducido el texto completo en su blog. 10 Principios para un Diseño Web Efectivo

No me hagas pensar

Un sitio web siempre ha de ser obvio. Existen multitud de patrones que nuestros usuarios han aprendido a utilizar. Es inútil intentar inventar lo que ya está inventado y, además, funciona. Ayuda a los usuarios con una navegación intuitiva y clara. Estructura bien el sitio web y deja que el usuario navegue y descubra que servicios son los que ofrece la página. No olvides que la competencia está a un sólo clic.

No me hagas perder el tiempo

Deja al usuario navegar por tu web. Siempre vamos a querer recopilar toda la información posible sobre nuestros usuarios, pero antes de eso pregúntate: ¿ cuantos de esos datos necesito ?, ¿para qué? Deja que los usuarios exploren la web, prueben, usen… es mejor tener menos usuarios pero convencidos que han usado el servicio y lo seguirán usando, que mas usuarios que se han registrado sólo para conocernos, o incluso peor, perder usuarios que no nos han conocido por no tener tiempo para completar un formulario.

Ayúdame a enfocar la atención

El ojo humano no es lineal. Nuestros usuarios esperan encontrar bordes, fondos, movimientos, formas… Utilicemos estos elementos visuales para ayudar a identificar partes de nuestro sitio. Nuestro usuario se encontrará más orientado, más cómodo en nuestro sitio. Y alcanzaremos el objetivo de los dos primeros puntos. No pensamos y no perdemos el tiempo.

Muéstrame

La llamada web 2.0 pone el énfasis en guiar al usuario, botones grandes, colores llamativos, procesos marcados, listas… Si dejamos ver al usuario que es lo que hace nuestro sitio web y cómo hacerlo conseguiremos que nuestros usuarios puedan comprender fácilmente nuestro sitio web.

Escribe para mí, pero piensa en el medio

Hay que ajustar los textos para la web. Está claro que nuestros usuario prefieren leer sobre papel, así que si voy a leer de la pantalla pone las cosas mas fácil. Habla claro. Usa frases cortas, recuerda que no tenemos mucho tiempo. Escribe para ojear, categoriza el contenido, utiliza encabezados, párrafos. Y si nos van a imprimir, hazselo fácil. Imprime para el papel y no para una pantalla, elimina nevegaciones, cabeceras… elimina la información que no sirve para el medio.

Hazlo simple

Los usuarios raramente visitan una web por su diseño, olvídate de ti o de mí, los usuarios buscan información, servicios, contenidos… no pasan las horas visitando sitios por su diseño.

Déjame respirar

El temido miedo al blanco, necesitamos espacios donde reducir la carga cognoscitiva, es una cuestión de mejorar la percepción de la información de los usuarios. Nos ayuda a determinar secciones, áreas, partes del sitio web. Sin estos espacios nuestros usuarios no podrán percibir la jerarquía dentro del sitio web.

Aplica la comunicación visual

Organiza, da al usuario una estructura conceptual, Una jerarquía.

Simplifica, simplificar la carga da claridad, marca lo realmente importante y pon el énfasis en lo que realmente es importante.

Usa las convenciones

Usa los patrones que nuestros usuarios ya han/hemos aprendido. Piensa en tus usuarios. ¿Qué es lo que esperan encontrar?. Navegación, botones, estructura, formularios…

Usa, pero desde el principio

Las pruebas desde el principio del desarrollo. Nos darán un conocimiento temprano sobre los problemas futuros, situaciones… Cuesta mas resolver errores en las últimas fases del proyecto que en las primeras. Es un proceso iterativo. Prueba con otros, los que ven nacer el proyecto y trabajan con él a diario (diseñadores, maquetadores, programadores) conocen demasiado el proyecto como para que tengan una perspectiva adecuada del proyecto.

Artículo original y traducción

• 10 Principles Of Effective Web Design
• 10 Principios para un Diseño Web Efectivo

A partir de un rompecabezas de pentaminós, un juego que consiste en rellenar un rectángulo a partir de los 12 pentaminós existentes sin dejar huecos entre ellos, Alexey Pazhitnov programó un juego (dicen que en una sola tarde) en el que caían piezas desde la parte superior y el objetivo era ir colocándolas como en un puzzle hasta formar líneas completas que desaparecían, impidiendo así que la pantalla se llenase de piezas.

El jugador podía mover la pieza en sentido horizontal para buscar la mejor posición en la que colocarla y girar la pieza durante su caída para poder encajarla en los huecos que las piezas que estaban en la base habían dejado.

Un juego basado en la simplicidad

El éxito del juego estaba en su simplicidad, en palabras del propio Alexey “el objetivo era que cualquiera que cogiese el juego fuese capaz de jugar y no lo pudiese dejar…”, de esta manera el juego iba dirigido a una audiencia masiva. En un momento en el que los juegos de ordenador estaban dirigidos a un público masculino no era difícil ver al público femenino enfrentándose a las piezas que caían por la pantalla.

Las claves del éxito

Releyendo a John Maeda y sus Leyes de la simplicidad encuentro que el Tetris es una verdadera muestra de simplicidad, de cómo reducir características y a pesar de ello conseguir de un producto un éxito.

Siguiendo las leyes que nos da el libro me gustaría ser capaz de abstraerme al tetris y sacar una serie de conclusiones, vamos a intentarlo:

• La simplicidad, la mecánica del juego es extremadamente simple. Algo que parece sencillo de hacer pero que es tremendamente complicado de conseguir.
• Aprendizaje, gracias a la simplicidad del juego éste no requiere mucho tiempo para aprender a jugar.
• Tiempo, es un juego que permite jugar durante pequeños intervalos de tiempo.
• Continuidad, el juego no terminará nunca. Un usuario irá alcanzando niveles superiores sucesivamente, pero el hecho de no tener un final definido quita al usuario la presión de terminar el juego.
• Interfaz, la interfaz gráfica es un ejemplo de simplicidad, no hay elementos que distraigan, botones, acciones distintas a las esperadas… sólo se puede mover las piezas.
• Atemporal, es completamente atemporal, tanto en mecánica de juego como en interfaz (quizás esta última sea por el aire retro o quizás por la nostalgia que nos provoca recordarlo)

En fin… que al leer que Alexey Pazhitnov estaba por aquí me ha dado por pensar…

O quizás es que me estoy haciendo mayor…

Jared M. Spool nos da una interesante lista, de las muchas que hay, sobre los errores que cometemos al diseñar formularios de resgistro de usuarios, inicio de sesiones… una lista para tener siempre a mano.

• Account Sign-in: 8 Design Mistakes to Avoid

Actualización:

Veo en torresburriel.com que Sergio Ortega ha publicado una traducción del texto original: 8 errores al diseñar los registros de cuentas.

23 conclusiones extraídas de sesiones de eye-tracking

Daniel Torres Burriel, con un blog imprescindible, nos deja la traducción en español de Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies

• 23 conclusiones extraídas de sesiones de eye-tracking

Web Strategy: How to evolve your irrelevant corporate website

Post de hace ya unos meses, pero no por ello menos interesante para vovler a leerlo. Jeremiah Owyang nos da las claves para evolucionar el sitio web de nuestras empresas.

• Web Strategy: How to evolve your irrelevant corporate website

Why design?

Vídeo de Philippe Starck, a través de 18 minutos viaja a lo largo de la historia del diseño desde la misma raíz humana. Al final la conclusión es mas sencilla de lo que parece.

• Why design?

Algunos desatinos de la prensa online española

Esta vez es Javier Cañada en su cosmonauta el que da un soberano repaso a la prensa digital española y su moda “doscerista”. Para leer y aprender.

• Algunos desatinos de la prensa online española