Pero ¿qué ocurre cuando la actividad del mercado se ralentiza y hay menos trabajo? Pues que llega el momento de actualizar ese sitio web, que al fin y al cabo es el mejor escaparate de un profesional independiente.

En FreelanceSwitch nos recuerdan 7 cosas que no pueden faltar en el sitio web de un freelance:

1. Personalidad

¿Tu sitio web tiene personalidad? Debes tener una propuesta de valor propia. Asegúrate de que incluyes algunos detalles en tu sitio web que dejen ver cómo eres y qué cosas te gustan. Piensa que si alguien va a contratarte, primero querrá saber algo sobre ti. Los clientes buscan personas en las que confiar, personas que tengan pasión por lo que hacen. La información fría e impersonal no funciona.

El objetivo es construir un sitio web que te diferencie del resto. No se trata de utilizar “colores llamativos”, sino de hacer ver a tus clientes potenciales que pones pasión en todo lo que haces, y que no te has limitado a volcar la información de cualquier manera en una plantilla de diseño estándar.

2. Descripción del proceso de trabajo

¿Ofreces a los visitantes información sobre cómo trabajas? Para tus posibles clientes resulta muy útil poder ver cómo sería tu relación con ellos, cuál es tu proceso de trabajo, las diferentes fases, la metodología que empleas, por sencilla que esta sea.

De esta forma, el visitante de tu sitio web puede verse dentro de tu proceso, trabajando contigo. Es una información que aporta confianza y acerca a tus clientes potenciales.

Si eres diseñador, puedes crear un gráfico para mostrar cuál es tu proceso habitual de trabajo, y tu relación con los clientes.

3. Muestras de proyectos

¿Has incluido muestras de tus últimos proyectos realizados? Para un cliente, la forma más fiable de ver qué haces y cómo trabajas es repasar los proyectos que ya has completado. Si le gustan, si le parecen relevantes, bien resueltos, creativos, es muy posible que confíe en ti. Intenta que estas muestras de proyectos estén actualizadas, para no ofrecer la impresión de que llevas mucho tiempo sin trabajar.

Si puedes, incluye también testimonios y referencias positivas de otros clientes. Estos son elementos que transmiten mucha confianza. Y es normal que así sea: un cliente solo aceptará dar una buena opinión si su experiencia contigo ha sido realmente positiva.

Si acabas de empezar y tienes solo un par de proyectos, amplía los detalles sobre cada uno de ellos.

4. Precios aproximados y presupuestos

¿Ofreces a tus posibles clientes una idea de lo que cuesta contratar tus servicios? No hace falta que des un precio concreto. Eso podría limitar tus posibilidades, e incluso podría comprometerte. Pero muchos clientes se sentirán más tranquilos si obtienen una referencia, aunque sea orientativa, de cuánto les costaría realizar su proyecto contigo.

La forma más sencilla, y menos comprometedora, consiste en solicitar a los clientes que rellenen un formulario con los datos del proyecto. Así puedes devolverles un presupuesto. También puedes elaborar una tabla con precios aproximados.

Para elaborar estos precios, analiza en detalle el nicho de mercado en el que vas a trabajar. Analiza los precios de la competencia, lo que ofrece el resto de profesionales, etc.

5. Un blog

¿Tienes un blog? Si no lo tienes, este puede ser un buen momento para empezar. Si ya lo tienes, asegúrate de que el último post introducido no es demasiado antiguo. Eso siempre da sensación de descuido.

Si publicas información útil de manera regular, conseguirás que la comunidad te considere un experto. Ese prestigio puede convertirse en tu mejor argumento de venta, y seguramente hará que varios clientes se acerquen a ti.

Es verdad que mantener un blog supone un esfuerzo, pero piensa que si lo haces bien te pondrá en contacto con mucha gente valiosa: otros profesionales, clientes, amigos, etc.

6. Usabilidad

¿Resulta sencillo acceder a la información en tu sitio web? Asegúrate de que el tamaño del texto no es demasiado pequeño, de que el contraste de color entre el texto y el fondo es suficiente, y permite una lectura cómoda. Comprueba que las arañas de los buscadores pueden indexar tus contenidos, para mejorar tu posicionamiento. Utiliza textos alternativos para las imágenes. Estructura la información siguiendo categorías lógicas, de manera que el acceso a los contenidos sea rápido y sencillo…

Como ves, hay un montón de pequeñas cosas que pueden mejorar la experiencia del usuario que accede a tu sitio web. Pónselo fácil y saldrás ganando. Puedes consultar estos 10 grandes descubrimiento en el campo de la usabilidad.

7. Contacto fácil

¿Es fácil ponerse en contacto contigo? ¿Aparece tu teléfono móvil en tu sitio web? ¿Puede un cliente potencial enviarte un mail desde cualquier página en un par de clics? Haz que ponerse en contacto contigo sea lo más fácil del mundo. Evita la frustración de los posibles clientes que quieren preguntarte cualquier cosa, o pedirte un presupuesto.

El escaparate de los diseñadores

Danimata ha seleccionado unos cuantos sitios web de diseñadores y programadores. Son diseños sencillos y atractivos. Puedes tomar buena nota:

- Spiraldesign

- Artist in design

- Slicemachine (muestra muy bien el proceso de trabajo)

- Bcandullo (últimos proyectos destacados en la home)

- 31three

Puedes consultar el artículo 7 Elements of a Successful Freelancers Site, publicado por Seth Simonds en FreelanceSwitch.

Algunas son muy técnicas, y sólo tienen sentido si te dedicas profesionalmente a la “experiencia de usuario”.

Varias de ellas se centran en cómo recoger feedback de los usuarios, un aspecto que resulta fundamental.

Las tres primeras son de conocimiento obligado para alguien que trabaje en la web:

1. Papel y lápiz

2. El ya mítico Google Analytics

3. Google Website Optimizer

4. Website Grader

5. Concept Feedback

6. Chalkmark

7. Clickheat

8. ClickTale

9. Clixpy

10. Crazy Egg

11. Ethnio

12. Feng-GUI

13. Five Second Test

14. Feedback Army

15. Loop11

16. Mechanical Turk

17. Morae

18. Open Hallway

19. Silverback

20. Simple Mouse Tracking

21. Usabilla

22. UserFly

23. UserTesting.com

24. UserVue

Estas son las herramientas. Pero para los que estén interesados, mucho más y mucho mejor en el artículo de Craig Tomlin: descripción de cada aplicación, precios, ventajas y desventajas, etc.

- ¿Cuánto tiempo debe tardar un menú en desplegarse?

- ¿Cuántos minutos empleamos en realizar una compra por Internet?

- ¿Cuándo se convierte un usuario en experto?

- ¿Cuántos años transcurren hasta que se consolida un cambio social?

Jakob Nielsen, gurú de la usabilidad, nos propone un recorrido apasionante por las diferentes unidades de tiempo -décimas, segundos, minutos, días, años, décadas y siglos- que componen la experiencia del usuario. Es una información fundamental si quieres construir un sitio web a la medida de tus clientes.

Hemos preparado una selección/traducción con lo más interesante:

0.1 segundos

En apenas una décima de segundo, los usuarios ya son capaces decidir sobre el aspecto de un sitio web. Un estudio demostró que, exponiendo imágenes durante 0.05 segundos, los espectadores ya distinguían entre los diseños más y menos atractivos…

Es evidente que las páginas de un sitio web no aparecen y desaparecen, sino que permanecen allí de forma que el usuario puede consultarlas durante unos segundos. Así solemos hacerlo. Pero resulta muy interesante saber que una imagen visual fugaz ya es capaz de proporcionarnos algunos elementos de juicio.

La principal lectura que podemos extraer es la siguiente: 0.1 segundos es la medida de tiempo perfecta para dar respuesta a las peticiones del usuario en un interfaz. Con esta medida, el usuario tiene la sensación de que sus órdenes se están cumpliendo, y de que controla la aplicación.

Un ejemplo. Si tras hacer clic, el menú se despliega en 0.1 segundos, el usuario tiene la impresión de que ha sido él mismo el que ha ejecutado la orden: su petición ha tenido un efecto inmediato en la pantalla, el sistema ha respondido al instante a sus órdenes.

En cambio, si la respuesta tarda más de 0.1 segundos, la sensación es que “el ordenador” también ha participado en la acción. Se pierde, por tanto, el efecto de “instantaneidad”.

1 segundo

Como acabamos de explicar, cuando la aplicación tarda más de una décima pero menos de 1 segundo en responder, el usuario tienen la impresión de que es la aplicación la que está ejecutando la acción. Los usuarios, por tanto, perciben este pequeño “retraso”, pero mientras el tiempo de respuesta no supere el segundo, mantienen la concentración en la acción que han emprendido.

Eso significa que, con tiempos de respuesta de 1 segundo, los usuarios todavía conservan la sensación de control sobre la aplicación, aunque por encima de 0.1 segundos son conscientes de que hay una interacción con dos agentes: ellos mismos y la aplicación.

La conclusión es la siguiente: las páginas deberían descargar en 1 segundo para que el usuario sienta que controla la situación y que puede navegar de forma libre. El ancho de banda ha aumentado de forma notable, y ahora resulta posible, incluso cuando hay imágenes. Hoy, el principal obstáculo para una descarga rápida es la presencia excesiva de widgets y elementos dinámicos.

10 segundos

Después de 1 segundo de espera, el usuario comienza a impacientarse. A partir de los 10 segundos, su atención de dispersa, comienza a pensar en otras cosas, y el flujo de navegación queda roto. Lo más probable es que abandonen la acción y, por tanto, el sitio web en el que se encuentra.

10 segundos es, además, el tiempo que los usuarios dedican a examinar una página antes de decidir si merece la pena quedarse o si resulta mejor abandonar.

El tiempo medio de visita por página es de 30 segundos pero, cuanto más experto es el usuario, menos tiempo necesita para tomar decisiones.

1 minuto

En Internet, los usuarios deberían poder completar las tareas simples -por ejemplo, realizar una transferencia- en aproximadamente 1 minuto. Más allá de esa cifra, las opciones de abandono aumentan notablemente.

En la misma línea, los vídeos no deberían durar más de 1 ó 2 minutos, ya que el usuario que tiene en mente “navegar por Internet” no está dispuesto a pasar mucho más tiempo mirando de forma pasiva.

Las visitas a un sitio web suelen durar entre 2 y 4 minutos.

10 minutos

10 minutos puede considerarse una visita larga a un sitio web.

1 hora

La mayor parte de los test de usabilidad suelen durar entre 1 y 2 horas -algo menos en el caso de los niños- ya que resulta difícil convencer a la gente para que se quede más tiempo. En otras palabras, la gente se cansa…

Los usuarios suelen completar sus tareas en Internet en menos de una hora.

Según un estudio, los usuarios de los sitios de comercio electrónico realizan las compras 28 minutos después del “aterrizaje”.

1 día

El plazo máximo de respuesta para un servicio de atención al cliente es de 1 día, aunque lo ideal es enviar un mensaje de confirmación al usuario en 1 minuto, para que éste sepa que su petición -una compra, el cambio de un dirección, etc.- ha sido recibida correctamente.

La rapidez del servicio se valora, claro, pero el usuario asume que puede esperar hasta 1 día porque entiende que la respuesta requiere la intervención de una persona de carne y hueso. Es decir: no piensa que la aplicación se ha roto si no recibe una respuesta inmediata.

Muchos usuarios consultan información siguiendo el patrón de 1 día (es lo que se conoce como “seguimiento”). Así que 1 día puede ser un buen plazo para la actualización de ciertos contenidos.

1 semana

Otros hábitos de consulta, en cambio, son semanales, mensuales o incluso anuales, dependiendo de la estación, de las fechas de vacaciones, de los plazos para pagar impuestos, etc. En el caso concreto de las redes sociales, el hábito de consulta de Facebook y Twitter es diario para la mayor parte de los usuarios, mientras que MySpace y LinkedIn se consultan de forma semanal.

Aunque los usuarios normalmente dedican escasos minutos a consultar un determinado sitio web, las tareas complejas y las decisiones importantes suelen exigir una semana o más.

Eso implica que los sitios web deben estar preparados para reforzar este patrón de “revisita”, por ejemplo guardando las tareas realizadas por el usuario en visitas previas. De esta forma, en visitas posteriores, los usuarios pueden recuperar la acción donde la dejaron.

1 mes

Los procesos de negocio normalmente requieren más tiempo que las decisiones individuales, ya que exigen la participación de varios agentes. En los sitios de B2B y en las webs de colaboración, es muy común que transcurra 1 mes entre el inicio y el final de cada tarea.

1 año

Una vez que los usuarios han utilizado un sitio web durante 1 año entero, se convierten en usuarios expertos. Una de las consecuencias de este conocimiento es que las visitas se acortan: los usuarios tardan mucho menos tiempo en encontrar lo que buscan y en hacer lo que necesitan.

Esto no significa que los usuarios no puedan seguir aprendiendo, y la prueba más clara es Amazon, que cada vez incorpora páginas más complejas, con mucha más información y funcionalidades.

El cambio de una organización normalmente requiere años. Un ejemplo: las empresas necesitan entre 2 y 3 años para alcanzar el siguiente nivel en esta pirámide de madurez de la usabilidad diseñada por Nielsen.

10 años

Hacen falta casi 10 años para que los usuarios alcancen un conocimiento experto profundo de un sistema complejo como, por ejemplo, Unix. La curva de aprendizaje requiere, por tanto, varios años después del despegue inicial.

La información suele permanecer durante décadas, y casi siempre sobrevive al interfaz que permite acceder a esa misma información. Es decir, cambia la aplicación para acceder a los datos, pero los datos antiguos deben permanecer accesibles al usuario. Eso significa que necesitamos herramientas para migrar los datos antiguos al nuevo sistema.

100 años

Si el cambio en las organizaciones es cuestión de años, el cambio social puede tardar décadas, o incluso un siglo entero, en producirse. Eso hace que nos resulte muy difícil percibir el desarrollo de estos cambios.

Eso no significa, claro, que los cambios no se estén produciendo. Es posible, por ejemplo, que las herramientas de colaboración nos conduzcan, con el paso del tiempo, a una despoblación de las ciudades. También es posible que se imponga una información menos lineal y mucho más fragmentada, y que esto afecte a la educación y la forma de entender el mundo de los más jóvenes.

Todavía no hemos pasado 100 años -sino más bien 20- utilizando dispositivos digitales, pero los cambios llegarán, especialmente con la nueva generación, que ha nacido y crecido rodeada de móviles, ordenadores, videoconsolas, etc. Dentro de 80 años hablamos…

Más y mejor en Powers of 10: Time Scales in User Experience, publicado por Jakob Nielsen en Useit.

En SmashingMagazine han hecho una selección con 10 “reglas” de usabilidad que merece la pena tener en cuenta:

1. Las etiquetas de los formularios, mejor sobre el campo

Tras duras y largas discusiones, parece que al fin hemos descubierto cuál es la posición ideal para las etiquetas de los formularios en la web: encima del campo.

En la mayor parte de los casos, los diseñadores sitúan la etiqueta a la izquierda del campo, generando así una maquetación a dos columnas. Y aunque esta opción es correcta, no es la más usable. Esta es la explicación: los usuarios completan los formularios siguiendo un patrón vertical, de arriba abajo. Por eso, les resulta más cómodo encontrarse primero la etiqueta e inmediatamente debajo, el campo. Así de sencillo.

Además, si ponemos la etiqueta a la par del campo, nos planteamos un problema de alineación. Si alineamos los elementos a la izquierda, el usuario puede escanear bien la información, pero el literal y el campo quedan demasiado separados: dan sensación de desconexión. Si los alineamos a la derecha, en cambio, estarán bien ligados, pero su posición será menos cómoda para el escaneo del usuario…

La solución:

BIEN
Nombre: Felisa Moratín

MEJOR
Nombre:
Felisa Moratín

2. El usuario se fija en las caras

El cerebro del ser humano está preparado para reconocer y memorizar las caras de los demás. En la web sucede como en la vida real: nos fijamos primero en las caras y en los ojos de las personas que aparecen en pantalla. Éste constituye, por tanto, un recurso de marketing fundamental para captar la atención de los usuarios. Y es una de las razones por las que muchos sitios web, y muchos banners publicitarios, incorporan fotos de personas en su interior.

Pero todavía hay más: después de fijarnos en la cara y en los ojos, avanzamos en la dirección que marca la mirada del protagonista (la persona que aparece en la imagen).

3. La calidad del diseño en un poderoso indicador de credibilidad

Juzgamos un libro que no conocemos por su portada, y de la misma forma, la calidad del diseño de un sitio web condiciona nuestra percepción sobre él. Si nos parece un buen diseño, es mucho más fácil que depositemos nuestra confianza en ese blog o ese sitio web.

La maquetación, las tipografías, los colores y el estilo configuran, en buena parte, nuestra percepción sobre ese sitio web. Así que si queremos proyectar una buena imagen, lo mejor es que contemos con un buen diseño.

Otros factores importantes que afectan a la credibilidad de un sitio web son la calidad de los contenidos, la cantidad de errores, la facilidad de uso y la confianza que nos inspiran los autores.

4. La mayor parte de los usuarios NO HACÍA scroll (antes)

Según un estudio elaborado en su día por Jakob Nielsen -gurú de la usabilidad- tan sólo el 23% de los usuarios hacen scroll en su primera visita a un sitio web. Eso significa que la gran mayoría de los usuarios -un 77%- sólo ven el contenido que se muestra en pantalla. Y todavía hay más: el porcentaje de los usuarios que hace scroll va disminuyendo conforme realizan más visitas al sitio web. En la segunda visita, sólo el 16% hace scroll.

Según este estudio, la lección está clara: hay que situar los contenidos y servicios más importantes a la vista, especialmente en la principales páginas de “aterrizaje”, para que el usuario pueda encontrarlos sin necesidad de hacer scroll.

Evidentemente, no puedes ponerlo todo en la parte superior de la página. Eso es sencillamente imposible. Pero sí puedes utilizar ese espacio para promocionar lo esencial.

En el caso de la home, estos son los elementos que no pueden faltar:

- El nombre del sitio web.

- Tu propuesta de valor al cliente/usuario: aquello que le ofreces.

- La navegación por las principales secciones del sitio web.

… pero las costumbres cambian. El hecho es que hay una lección todavía más importante: las costumbres de los usuarios cambian, están en continua evolución. Según varios estudios posteriores, a la gente cada vez le cuesta menos hacer scroll. De hecho, muchos usuarios lo prefiere a la paginación, y no tienen inconveniente en llegar hasta el final de la página.

Por eso, te recomendamos que no satures el espacio superior. Cuando el usuario encuentra demasiadas cosas, no sabe qué hacer y se desorienta. Es mejor que organices la información a lo largo de la página dejando un espacio en blanco entre cada área de contenidos.

5. El color azul es el mejor para los enlaces

Conseguir que tu sitio web sea diferente a los demás es importante, pero cuando hablamos de usabilidad, basarse en los estándares -lo comúnmente aceptado- suele ser la mejor receta. Es muy sencillo: cuando la gente accede a un sitio web, espera encontrar las cosas de la misma forma que en el resto de sitios web que ha visitado anteriormente. Son los conocidos como patrones de uso.

Y siguiendo este razonamiento, el azul es el color por excelencia para señalar los enlaces. Es el color por defecto de los navegadores, y el que usa Google (ahí es nada).

No tienes por qué hacerlo todo igual que los demás, claro. Si decides optar por otro color para los enlaces, ten en cuenta las siguientes consideraciones:
- Debe ofrecer un buen contraste de color con el fondo: si el fondo es claro, debe ser un color oscuro, y viceversa.
- El color de los enlaces debe ser diferente al del texto común empleado en el sitio web, para que el usuario perciba la diferencia.

6. 27 caracteres para la caja de búsqueda (aprox.)

El ancho ideal para la caja de búsqueda se sitúa en torno a los 27 caracteres.

Según un estudio publicado por Nielsen, casi todos los buscadores ofrecen un espacio demasiado pequeño para introducir las palabras clave. El problema es que, aunque la caja permita introducir un texto más largo, parte de esa palabra desaparece de la vista. Es un sistema incómodo y que se presta a errores: el usuario no sabe exactamente qué ha introducido.

En cambio, con un ancho de 27 caracteres se cubre el 90% de los términos de búsqueda (en inglés, puede que en castellano haga falta algún carácter más).

Para calcular el ancho, utiliza como referencia el carácter “m”. Recuerda: para el usuario, resulta más cómoda una caja de búsqueda ancha, aunque después sobre el espacio.

7. Deja que la página respire para facilitar la comprensión lectora

Los buenos diseñadores conocen bien el valor de un espacio en blanco. Los espacios “blancos” entre los párrafos, las imágenes, los botones, los márgenes, etc. hacen respirar a la página. La información se muestra menos apelotonada y mucho más ordenada, y al usuario le resulta mucho más fácil la lectura. Además, los espacios le permiten distinguir las diferentes áreas del sitio web, cada una con su importancia.

Según un estudio, el espacio entre párrafos, y en los márgenes izquierdo y derecho, facilita la comprensión en un 20%, ya que permite a los usuarios concentrarse mejor en los contenidos.

8. No hace falta que hagas el super test

Según un estudio de Nielsen, los tests de usabilidad efectuados con sólo 5 usuarios permiten descubrir el 85% de los problemas del sitio web. Si realizas el test con 15 usuarios, descubrirías todos los problemas, pero debes decidir si merece la pena el gasto y el esfuerzo… De hecho, con sólo dos usuarios ya serías capaz de descubrir la mitad de los problemas.

En resumen: no hace falta que gastes todos tus recursos en un test extensivo. Eso sí, aunque sea de forma modesta, intenta poner tu sitio web a prueba. Por modesto que sea tu testing, te permitirá conseguir mejoras significativas.

9. Ofrece información detallada sobre tus productos y servicios

Si tu sitio web vende productos o servicios, es evidente que mucha gente va a querer consultar toda la información disponible antes de tomar la decisión de compra. Parece obvio, pero normalmente los sitios web no ofrecen suficiente información. Según los estudios, la falta de información sobre productos es el origen del 8% de los problemas de usabilidad, y es una mala práctica que causa el 10% de los fracasos en las ventas.

Así pues, ofrece a tus usuarios información detallada, pero no se la hagas llegar en forma de “ladrillo”. Pártela en trozos digeribles: utiliza imágenes, listas, títulos y subtítulos de apartados para que el texto no se vuelva pesado y poco atractivo. Insistimos: incluye imágenes para que el usuario pueda hacerse una idea realmente aproximada. Y nada de términos demasiado técnicos.

10. Somos (casi) inmunes a la publicidad

La mayor parte de los usuarios ni siquiera se fija en los banners publicitarios. Acceden al sitio web y obtienen la información que buscan. Los reclamos publicitarios ni siquiera consiguen distraerles, incluso si se encuentran justo al lado del texto.

La principal conclusión es que los usuarios evitan la publicidad y, por consiguiente, también evitan cualquier cosa que tenga el mismo aspecto que la publicidad, aunque no lo sea. Así que descarta los elementos de tu sitio web que tienen el aspecto de un banner publicitario y se sitúan en las zonas que normalmente ocupan los anuncios (por ejemplo, en el lateral derecho del texto).

Mucho más y mucho mejor en 10 Useful Usability Findings and Guidelines, publicado por Dmitry Fadeyev en Smashing Magazine.

¿A qué nos referimos cuando hablamos de confusión? Básicamente, a los obstáculos que dificultan la navegación del usuario.

En Men with Pens nos dan unas cuantas pistas. Estos son algunas de las peores prácticas:

- Banners que parpadean como una máquina tragaperras, hasta provocar dolor de cabeza.

- Toneladas de enlaces con literales vagos, difíciles de identificar.

- Widgets y anuncios de redes sociales que saturan todo el espacio.

- Una columna lateral más larga que la Enciclopedia Britannica.

¿Qué es lo que tus clientes buscan en realidad?

Se supone que en ese desorden, tu cliente potencial debe ser capaz de encontrar:

- El artículo que quiere leer.

- Tu lista de servicios.

- La razón por la que eres capaz de darle un empujón a su negocio.

- Una muestra de trabajos anteriores.

- Información profesional sobre ti.

En resumen: lo que a ti te interesa es conseguir que tus posibles clientes descubran tu trabajo y encuentren enseguida la forma de contratarte. Pero cuando reina la confusión, lo más normal es que renuncien a su propósito y huyan despavorido de tu sitio web.

Estos consejos pueden ayudarte a conseguir un blog limpio y ordenado:

1. Menos widgets

Añadir widgets a tu blog constituye toda una tentación. Hay miles de ellos. Surge uno nuevo cada día. Hay muchos que son realmente atractivos, útiles e interesantes. Pero no puedes insertarlos todos en tu sitio web. Acabarías sepultando los contenidos realmente importantes, y volverías locos a tus usuarios y posibles clientes. Además, ralentizan mucho la carga de tu página.

Así que es mejor que te libres de todos aquellos widgets que no están directamente relacionados con tu actividad. Si no aportan valor a tus usuarios, visitantes y lectores, sobran.

Piensa que esto es algo así como ordenar tu oficina: cuando está recogida, puedes encontrarlo todo en menos tiempo y con menos esfuerzo.

2. Afina el aspecto y el espacio que ocupan tus anuncios

Los anuncios son una especie de "mal necesario" para muchos blogs y sitios web. A veces molestan, pero son una fuente de ingresos.

El hecho es que el dinero que aportan suele venir por el número de visitas y de clics efectuados sobre ellos. Si incluyes en tu blog anuncios poco atractivos y excesivamente molestos para la navegación, lo más normal es que los usuarios nunca hagan clic. Y, en ese caso, ¿qué sentido tiene insertar anuncios?

Intégralos en el diseño y haz que resulten atractivos. La mejor forma: conseguir que ofrezcan información útil para tus usuarios. Algo que sea capaz de seducirles.

No abuses. Esta podría ser una buena combinación: entre 2 y 4 anuncios, a lo sumo 3 productos, y una lista de 5 enlaces como máximo. Ordénalos bien para que resulten visibles pero no confundan a los lectores.

3. Huye de los flashes y animaciones

Nada de movimiento gratuito para tus anuncios: ni banners que parpadean, ni gifs animados, ni ventanas emergentes (pop-ups). Todos estos son enemigos comunes de la usabilidad. Distraen la atención de tus usuarios y crean un fuerte sentimiento de confusión.

4. No te quedes con la configuración estándar

WordPress es una herramienta excelente para crear y gestionar un blog. Pero las configuraciones estándar suelen incorporar bastantes widgets que, a primera vista, parecen útiles, y luego no aportan nada a tus usuarios. Por ejemplo, el típico calendario.

Además, si eres diseñador, la gente esperará de ti que vayas un poco más allá de las plantillas ya predefinidas. Dale tu toque personal al blog. Haz que sea tuyo. Pero subordina siempre la imagen a la función principal: comunicar tu negocio.

Menos es más

Resumiendo: menos es más . Es mejor que te deshagas de todo lo que sobra para crear un espacio de comunicación más limpio y ordenado. Tus visitantes lo agradecerán. Y aumentará el número de tus contactos con clientes potenciales.

Un poco de inspiración: los mejores del año y unas buenas prácticas de diseño

¿Necesitas un poco de inspiración para diseñar tu próximo blog? Estos 11 diseños son frescos y creativos, y te aportarán nuevas ideas .

¿Quieres aprender de los mejores? Estos son los 50 mejores sitios web de 2009 según la revista Time .

Puedes consultar el artículo Your Clutter is Killing Your Customers , publicado en Men with Pens .

Hoy te proponemos 3 consejos que nos parecen fundamentales:

1. El Patrón F: no leemos, escaneamos

Cuando nos encontramos frente a una página web no leemos, escaneamos. Y lo hacemos siguiendo un patrón en forma de F: las primeras líneas en horizontal, y después un descenso prácticamente en vertical, en el que sólo nos fijamos en el primer término de cada línea. El patrón tiene las siguientes características:

1. El primer movimiento del usuario es una lectura horizontal de la parte superior de la página, donde suele estar el título. Ésta sería la barra superior de la letra F.

2. En el segundo movimiento, el usuario desplaza la vista un poco más abajo, y realiza otra lectura horizontal, de izquierda a derecha, pero sin cubrir un área tan amplia como en el primer movimiento. Esta sería la barra horizontal inferior de la letra F.

3. Finalmente, los usuarios escanean el área izquierda de contenidos en un movimiento vertical. A veces, este escaneo es lento y sistemático; en otras ocasiones es mucho más rápido, y se compone de “puntos” más que de una línea continua. Esta sería la barra vertical de la F.

Consecuencias del Patrón F:

- Los usuarios no leen todo el texto, y no lo hacen palabra a palabra. Las lecturas exhaustivas son algo extraordinario.

- Los dos primeros párrafos deben contener la información principal. Si consiguen captar la atención del usuario, es posible que éste pase a leer los siguientes párrafos.

- Las primeras palabras de una frase, las listas y los subtítulos son importantes. El usuario podría detenerse en estos elementos mientras escanea. Raramente lo hará, por ejemplo, con una palabra situada en la mitad del texto.

Más información sobre el Patrón F.

2. Las 2 primeras palabras son la clave para captar la atención del ojo

Si en realidad no leemos, sino que escaneamos, debemos disponer la información de manera que consigamos captar la atención del usuario. Los estudios de Jakob Nielsen muestran que el usuario “procesa” los primeros 11 caracteres del título. Por eso, las 2 primeras palabras son clave. El usuario no llegará más allá en una primera visión.

Lo mismo ocurre con los listados de elementos y enlaces: normalmente el usuario “ve” las 2 primeras palabras, un poco más si son cortas, y sólo la primera cuando ésta es muy larga.

Más información sobre las 2 primeras palabras.

3. Usa números en vez de palabras (23 en vez de veintitrés)

Según los estudios de eyetracking -seguimiento de lo ojos- elaborados por Nielsen, en la web resulta mucho más efectivo escribir el número -por ejemplo “23”- que escribir la palabra -“veintitrés”- para captar la atención del usuario.

Los números son capaces de atraer y retener la atención del usuario cuando éste se encuentra “escaneando” la información. ¿Por qué?, te preguntarás. Porque los números representan datos concretos. Piensa en una página de producto. El número te da información útil y concisa: cuánto pesa el producto, cuánto cuesta, cuánto dura. Es información directa, y el usuario la prefiere a los párrafos “explicativos”.

Bueno, y la siguiente pregunta que debemos hacernos es: ¿por qué nuestros ojos se detienen en los números (23) y no en la palabra que los describe (veintitrés)? Muy sencillo: su forma es distinta a la del resto de palabras, y nuestros ojos la detectan enseguida. Para nuestros ojos/mente, 2415 se distingue perfectamente de “tres”, aunque ambos tienen 4 caracteres.

Así que ya sabes: en la web es mejor emplear números en vez de palabras. Y, por cierto, no tengas miedo a los números exactos aunque no sean “redondos”. Por ejemplo: “Nos han escrito 2.347 personas”. La exactitud proporciona credibilidad. De hecho, sería mucho más “sospechoso” que nos hubiesen escrito justo “3.000 personas”, ni una más, ni una menos…

Algunas excepciones:

- Cuando el número no hace referencia a un dato concreto. Por ejemplo: “Hemos hablado de ello un millón de veces”. No se trata de un número exacto, sino de una expresión hecha para enfatizar que ya hemos hablado de ello un montón de veces.

- Cuando la cifra es muy elevada: por ejemplo, seguramente queda más claro si escribes “1.000 millones” que si optas por 1.000.000.000

Más información sobre el uso de números.

1. No hay peor estructura que NO tener estructura
2. La búsqueda y la estructura no están integradas
3. Faltan páginas de categorías
4. Demasiadas jerarquías
5. Micrositios mal integrados con el sitio web principal
6. Opciones de navegación invisibles
7. Elementos de navegación incontrolables
8. Navegación inconsistente
9. Demasiadas técnicas de navegación
10. Opciones de menú “de la casa”

Los desarrollamos a continuación en dos grandes grupos: errores de estructura y errores de navegación:

A. ERRORES DE ESTRUCTURA

1. No hay peor estructura que NO tener estructura

El problema más grave se produce cuando los diseñadores conciben el sitio web como un gran “balsa” sin un principio organizador que  aglutine a los diferentes elementos. Es verdad que los usuarios pueden “pescar” en esa balsa utilizando el buscador, los enlaces de las opciones destacadas, o las entradas desde sitios externos. Pero así no hay manera de acceder/entender el resto de la oferta de contenidos del sitio.

Este problema es especialmente frecuente en los sitios de noticias y en los sitios de comercio electrónico, basados en catálogos de productos. Es allí donde los elementos son tratados como unidades sueltas, sin conexión con otros elementos relacionados. Eso hace que los usuarios abandonen el sitio con rapidez.

2. La búsqueda y la estructura no están integradas

Sabemos, desde hace tiempo, que los usuarios conceden mucha importancia a las búsquedas. Pero esto no significa que el buscador pueda solucionarlo todo.

Llegar a una página a través de una búsqueda es como llegar en paracaídas a una ciudad. Es muy posible que aterrices en la ciudad que buscas -en París, y no en Amsterdam, por ejemplo- pero no es nada fácil que pongas pie justo en la entrada del restaurante al que quieres entrar. Seguro que te quedas a varias calles de distancia. A partir de ese punto, hay que caminar, o coger un taxi. De manera análoga, la búsqueda en un sitio web no basta. Los usuarios a veces necesitan navegar por la estructura del sitio web para encontrar su destino.

Y lo cierto es que en muchos sitios web, la integración entre búsqueda y navegación no es buena. La usabilidad de la página de resultados del buscador mejora cuando cada uno de los resultados muestra su situación dentro de la estructura del sitio web.

Los buscadores externos -tipo Google- a veces no pueden hacerlo, porque no conocen la estructura de tu sitio web. Pero tú sí.

3. Faltan páginas de categorías

Es recomendable que cada categoría tenga una especie de página de entrada en la que el usuario pueda echar un vistazo general a lo que se va a encontrar, un pequeño escaparate. Muchas veces los sitios web se limitan a ofrecer enlaces directos a las páginas individuales. Esto reduce el número de páginas, es cierto, pero también las posibilidades de que los usuarios encuentren detalles, productos y servicios que pueden interesarles.

Estas páginas de categorías ayudan al posicionamiento en buscadores, porque se convierten en uno de los puntos con más entradas del sitio web, especialmente cuando la gente busca un tipo determinado de producto, de servicio o de información.

4. Demasiadas jerarquías

En comparación con el mundo físico, el mundo online ofrece una ventaja muy importante: los elementos pueden estar en varias ubicaciones a la vez. Los sitios web pueden clasificar sus productos y servicios en diferentes dimensiones y categorías, de manera que los usuarios puedan navegar por listados menos extensos, más fáciles de entender y manejar, apoyándose también en enlaces relacionados.

Esto, que en principio es bueno, puede convertirse en un problema. Porque en vez de dedicar tiempo a construir diferentes categorías lógicas bien pensadas y ordenadas, lo que se está haciendo es crear una multitud de listados y categorías con escasa solidez.

El impacto, desde el punto de vista de la usabilidad, es el siguiente: cuando hay demasiadas opciones, nos vemos obligados a pensar más antes de tomar una decisión. Eso supone más tiempo y más esfuerzo. Se produce, además, una cierta confusión, porque los usuarios encuentran el mismo elemento en muchas categorías diferentes, y acaban cuestionándose la solidez de la estructura de información. Esta falta de confianza resulta especialmente negativa en los sitios en los que se realizan compras y transacciones online.

5. Micrositios mal integrados con el sitio web principal

La web está llena de micrositios “abandonados”, auténticos residuos de las antiguas campañas de marketing.

Diseñar un micrositio específico puede ser una buena idea en un momento dado. Pero un año después, lo más probable es que no haga más que sembrar la confusión entre tus usuarios, socavando tu estrategia online.

Por eso, suele ser mejor eliminar el micrositio e integrar el contenido realmente útil en la estructura principal del sitio web.

B. ERRORES DE NAVEGACIÓN

6. Opciones de navegación invisibles

Lo que el usuario no puede ver, simplemente no existe. Así que las opciones de navegación invisibles constituyen un error casi tan grave como el de no tener navegación.

Menús que se activan al deslizar el cursor por encima. Según diversos estudios, a los niños pequeños les gusta deslizar el ratón por la pantalla para descubrir qué es lo que hay escondido, pero a los adolescentes no les gusta, y los adultos simplemente lo odian…

Navegación con pinta de publicidad. De manera similar, conviene evitar los elementos de navegación que tienen aspecto de banners, o que se encuentran demasiado cerca de otros elementos promocionales o publicitarios. Porque, incluso si están presente en pantalla, pueden ser invisibles para el usuario.

7. Elementos de navegación incontrolables

Normalmente, cualquier cosa que se mueve es perjudicial para la usabilidad web. Si los elementos de navegación se mueven cuando el usuario está intentando encontrar algo, peor todavía. Los usuarios deben poder centrarse en los “problemas de alto nivel”: dónde van a ir. Y no en los “problemas de bajo nivel”: cómo manejar el interfaz.

Dos errores típicos:
1) Los rollovers que lanzan y bloquean contenido
2) Los elementos que se mueven y rotan por su cuenta

Los usuarios siguen quejándose de estos elementos. Es evidente que los diseñadores y programadores que siguen incluyéndolos subestiman el impacto de la “frustración del usuario”.

8. Navegación inconsistente

La navegación existe para ayudar a los usuarios. No se trata de construir un complicado rompecabezas. Los usuarios deberían poder entenderla inmediatamente, para después aplicar ese mismo patrón en el resto del sitio web.

Por desgracia, muchos sitios web cambian sus opciones de navegación a medida que los usuarios se mueven por la estructura. Las opciones vienen y se van, y hacen que los usuarios sientan que han perdido el control. “¿Cómo recupero las opciones de menú?”, se preguntan.

Aunque la navegación global no es el elemento más utilizado de un sitio web, su presencia sirve a un propósito importante: ayuda a los usuarios a entender dónde se encuentran, y les permite volver atrás con facilidad cuando se han perdido.

9. Demasiadas técnicas de navegación

Cada técnica de navegación puede ser útil para un determinado sitio web, o para una determinada Intranet. Pero si utilizas varias técnicas diferentes en el mismo sitio, no estás sumando las ventajas de cada una, sino que estás creando un gran caos…

10. Opciones de menú “de la casa”

Todavía existen demasiados sitios que siguen empleando sus propias etiquetas y su propia terminología para las opciones de navegación. Por si confundir al usuario no fuera suficiente, el uso de terminología “no estándar” también afecta negativamente a las búsquedas: si el usuario no sabe cómo se llama ese elemento en tu sitio web, no puede buscarlo.

Es mejor que utilices palabras sencillas y ya consolidadas. Es difícil que un usuario seleccione una opción de menú que no entiende.

Puedes leer el artículo original Top 10 Information Architecture Mistakes, publicado por Jakob Nielsen. Si te has quedado con ganas, puedes consultar una edición anterior de los errores recopilados por Nielsen (también traducida al castellano).

¿Tienes que diseñar un sitio web? ¿Necesitas realizar una propuesta de Experiencia de Usuario?

En SitePoint han recopilado unas cuentas herramientas específicas que te ayudarán a construir la estructura y el flujo de navegación de tu sitio web. También pueden resultarte útiles para organizar un proyecto complejo.

Casi todas las aplicaciones incluyen una demo y una versión de prueba, que puede valerte para un trabajo puntual. Las hay gratuitas y de pago, baratas y caras, digitales y analógicas.

Aquí van, cada una con su precio aproximado:

Gratis o con versión gratuita

1. Pencil

2. iPlotz

3. Inkscape (aunque está más enfocado al dibujo)

De pago

4. Axure El estándar del mercado, por 589 dólares. A medida que construyes la estructura, el programa va generando la documentación

5. Visio La propuesta de Microsoft, por 129 euros

6. iRise Desde 6,99 dólares

7. SmartDraw por 197 dólares

8. Lucid Spec por 499 dólares

9. Balsamiq Mockups por 79 dólares

10. ConceptDraw Pro por 199 dólares

11. MockupScreens por 89,95 dólares

12. Protoshare por 29 dólares

13. OmniGraffle por 99,95 dólares

Alternativas menos específicas

14. Los típicos programas para hacer presentaciones: Powerpoint o OpenOffice Impress. Son menos cómodos que los anteriores, pero tienen la ventaja de que ya estás acostumbrado a ellos.

15. Lápiz y papel. Es un poco menos sofisticado, pero todavía funciona.

16. Mapas mentales, si la estructura no es muy compleja y necesitas un extra de creatividad. Puedes probar con Freemind, que además es gratuito.

¿Qué es un mapa mental? Es un diagrama en el que se representan las palabras, ideas, tareas, u otros conceptos ligados y dispuestos radialmente alrededor de una palabra clave o de una idea central. Se utiliza para la generación, visualización, estructura, y clasificación taxonómica de las ideas, y como ayuda interna para el estudio, organización, solución de problemas, toma de decisiones y escritura.  

Puedes consultar el artículo original 16 Design Tools for Prototyping and Wireframing, publicado por Gary Barber en SitePoint

Afortunadamente, existen otros caminos. En el el blog de 37 signals nos proponen un método sencillo y efectivo para diseñar el interfaz de usuario de un sitio web. A ellos les ha ido siempre muy bien. Aquí va resumido:

1. Haz una lista con todas las cosas que esa pantalla debe hacer. Estas preguntas pueden ayudarte a descubrirlo: ¿Qué es lo que el usuario debe ser capaz de conseguir? ¿Cuánta información es necesario que se muestre? ¿Qué funcionalidades son necesarias para que los clientes completen un proceso? Una vez que hayas descubierto los requisitos, etiquétalos con números.

2. Define cuáles de estos elementos numerados tienen relación entre ellos, ya sea de manera espacial (uno va al lado del otro) o conceptual (tratan sobre el mismo tema). Asigna una letra a cada grupo de elementos relacionados.

3. Realiza un boceto (o varios) para cada una de las letras (que agrupan a los números).

4. Agrupa todos esos diseños en un diseño único, para hacer que todas las piezas formen una unidad.

El siguiente paso consistiría en elaborar un wireframe o maqueta.

Si todavía lo ves un poco abstracto, aquí tienes un pequeño ejemplo:

Haz una lista con los requisitos que necesitas:

1. Información de la compañía.
2. Información del usuario.
3. Enlace a búsqueda.
4. Fecha de creación.
5. El cambio de contraseña es una operación muy común.

Establece las relaciones entre cada requisito. Algunos estarán estrechamente ligados, y otros serán independientes. Se trata de ver qué impacto genera cada requisito en los demás:

A: 1, 2, 4
B: 3
C: 2, 5

Establece prioridades:

Lo más importante: A
Necesario: C
Estaría bien tenerlo: B

Dibuja cada “trozo o pieza” del interfaz: Desde el momento en que ya hemos agrupado los requisitos que están relacionados, podemos diseñar cada parte de manera individual sin preocuparnos por los posibles conflictos.

Une todas las piezas. Se trata de ponerlas todas juntas. Unos consejos:

- Piensa en las limitaciones que han surgido al efectuar los diseños individuales.

- Ten en mente la prioridad que has establecido.

- Busca un equilibrio.

- Y ponte a dibujar. Primero un boceto. Después obtendrás algo parecido a un wireframe.

Conviértelo en realidad: Puede que funcione bien en papel, pero que en pantalla genere algún problema. Así que llega el momento de hacer un diseño mucho más cercano al resultado final.

Más información sobre el método.

Nuestra memoria es limitada

Estamos expuestos a una gran cantidad de información, y las ciencias del comportamiento (behavioral sciences) han demostrado que como usuarios tenemos una memoria (y una atención) de alcance limitado, por lo que resulta importante centrarse en lo esencial. Se trata de que el usuario se “acuerde” de lo que nosotros le proponemos, y no de todo lo demás (el ruido).

De menos a más, sí…

Los usuarios preferimos ir mejorando de manera progresiva, aunque sea poco a poco. Podemos aceptar que el inicio sea flojo y que la mitad sea discreta, siempre que el final sea bueno. Éste es, más o menos, el espíritu de las versiones beta.

Aunque, también habría que señalar que el inicio debe ser, al menos, prometedor, porque de lo contrario nunca probaríamos ese servicio, esa web o esa aplicación.

…pero nunca de más a menos

No tenemos piedad a la hora de juzgar un servicio que empieza bien pero nos defrauda después. Ir subiendo, sí; bajar, nunca.

Más atención a las “páginas interiores”

Una de las principales consecuencias de lo visto es que debemos dedicar más atención a los niveles interiores de nuestro sitio web, porque una página de inicio atractiva y un fiasco posterior sólo servirá para “espantar” a nuestros posibles clientes. Lo mismo aplica a nuestros servicios profesionales: es mejor un inicio discreto que un desenlace fatal. 

Las cosas engorrosas, mejor al principio

Preferimos afrontar desde el principio las cosas “desagradables”, para quitárnoslas de enmedio cuanto antes y poder pasar a otros asuntos más ligeros y divertidos. Parece obvio, pero sigue siendo una buena pista: si tenemos que pedirle al usuario que se registre, o tenemos que informarle de alguna cláusula un tanto restrictiva, resulta mejor hacerlo cuanto antes.

Un final dulce, por favor

De toda la experiencia (que, como los relatos, comprende un principio, un nudo y un desenlace), lo que más recordamos es un buen final.

Tensión positiva de principio a fin

En resumen: si no tenemos gancho -un buen reclamo con el que atraer a los clientes potenciales- nadie se va a acercar a nosotros, pero si no conseguimos proporcionar una experiencia satisfactoria a esos clientes -con un buen final incluido- sólo habremos perdido nuestro tiempo y nuestro crédito. Así que la única opción posible es la de mantener una especie de tensión positiva desde el principio hasta el final. Mejor todavía si la cosa va in crescendo. Casi nada…

Podéis leer el artículo Forgetul and Happy, publicado por Adriana Oppenheim en su blog Lady on the Bus.

PD: Gracias a Robot por el soplo.