Los profesionales freelance están normalmente tan ocupados con los proyectos de sus clientes que no suelen encontrar tiempo para poner su sitio web a punto. Es algo lógico y comprensible.

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.

(more…)

Craig Tomlin ha recopilado 24 herramientas para poner a prueba la usabilidad de un sitio web. Las hay de todo tipo: de pago y gratuitas, sencillas y complejas.

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

(more…)

- ¿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.

(more…)

La usabilidad es una disciplina que a veces resulta un tanto abstracta y difusa: las reglas no siempre son fijas, y a menudo se contradicen entre sí. Pero también es cierto que la usabilidad nos ha aportado algunos descubrimientos enormemente útiles para mejorar el diseño de nuestros blogs y sitios web.

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.

(more…)

Quizá no te has detenido a pensarlo, pero los usuarios -incluidos tus posibles clientes- huyen de los blogs desordenados y confusos.

¿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:

(more…)

¿Cómo procesamos la información de una página web? ¿En qué nos fijamos primero? ¿Hasta dónde leemos normalmente? Cuando diseñas una página web, o cuando redactas un texto online para tus clientes y usuarios, hay algunas reglas elementales que debes conocer, y que te ayudarán a dar en el clavo. Jakob Nielsen, gurú mundial de la usabilidad, las ha ido recopilando en su sección Alertbox.

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.

(more…)

Jakob Nielsen, gurú mundial de la usabilidad, nos muestra los 10 errores más comunes a la hora de estructurar y presentar la información en la web:

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.

(more…)

¿Tienes que diseñar un sitio web? ¿Necesitas realizar una propuesta de Experiencia de Usuario? Lo más importante es que no empieces la casa por el tejado. Para ordenar tus ideas, y para compartirlas con tus clientes y colaboradores, es mejor que arranques con una maqueta o wireframe. Así, a medida que avanzas, podrás incorporar todos los cambios necesarios sin poner el proyecto patas arriba.

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

(more…)

Demasiado a menudo, empezamos a construir un sitio web de arriba abajo: pintamos unas cuantas cajas vacías (un área de trabajo y una columna lateral para el menú, por ejemplo) y después nos dedicamos a rellenarlas de contenido. El problema de este sistema es que acabamos con un montón de cosas en la página que son “de relleno, y que realmente no sirven para cumplir nuestros objetivos de diseño y de negocio.

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:

(more…)

Si sabes cómo se comportan tus posibles clientes al entrar en tu sitio web, y qué esperan de la “visita”, es mucho más fácil que les proporciones exactamente aquello que buscan. Adriana Oppenheim (consultora de Experiencia de Usuario) nos propone unos consejos/reflexiones interesantes para mejorar el diseño de nuestro sitio web, y la forma en que prestamos nuestros servicios a los clientes. A grandes rasgos, la clave está en dejar lo mejor para el final. Te resumimos lo más interesante:

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.

(more…)