Herramientas gratuitas -o casi- para diseñar la estructura de navegación de un sitio web

Sábado, 19 de marzo de 2011

Estructura_edificioYa hemos comentado muchas veces que NO tiene sentido ponerse a diseñar y construir un sitio web “a lo loco”, por muy sencillo que éste sea.

Lo primero que conviene hacer es diseñar un sencillo de , y una de esquemática pero muy bien pensada (un ).

Este trabajo previo nos permitirá ordenar nuestras ideas, y nos ayudará a descubrir y solucionar pequeños defectos e incoherencias en la navegación que, de otra manera, hubiesen pasado inadvertidos.

Trabajar con wireframes es fundamental, porque siempre resulta más práctico y efectivo realizar cambios con los borradores -que todavía no tienen el diseño ni la funcionalidad definitiva- que hacerlo con el producto real, cuando ya es demasiado tarde para rectificar (y demasiado costoso).

Aquí tienes 16 aplicaciones para diseñar la de tu próximo sitio web. Prácticamente todas -con excepción de las dos primeras, muy conocidas- son gratuitas o incluyen, al menos, un plan gratuito.

(más…)

Recursos para elaborar wireframes, diagramas, gráficos, y flujos de navegación

Domingo, 14 de febrero de 2010

Boceto_Canaletto- ¿Tienes que dibujar la o de un sitio web?

- ¿Necesitas representar un flujo de navegación?

Ya sabes que antes de arrancar cualquier proyecto, lo más útil que puedes hacer es dibujar lo que tienes en la cabeza. De esta forma contarás con una referencia para ordenar el trabajo, para valorar el alcance real, y para detectar los problemas con los que puedes encontrarte. Además, estos esquemas te permitirán la información con el cliente y con el resto del equipo.

Estos consejos y herramientas pueden servirte de gran :

1. ¿Qué tipo de gráfico me conviene elaborar?

¿Tienes que elegir una forma de presentación para tus datos y no sabes por dónde empezar? Esta recopilación de tipos de gráficos puede servirte como inspiración.

2. Prefiero trabajar con lápiz y papel

Hay gente que prefiere trabajar al estilo tradicional, con lápiz y papel. Muchas veces, sobre todo en la fase de arranque, puede resultar más rápido e intuitivo, y además no pone límites a nuestra creatividad e imaginación: podemos dibujar y apuntar cualquier cosa, como en un cuaderno de notas.

La ventaja es que ahora no tenemos por qué arrancar de un papel en blanco. Aquí tienes unas plantillas imprimibles para que después completes tus wireframes o maquetas a mano.

(más…)

El futuro (inmediato) del diseño web: un pronóstico para 2010

Domingo, 17 de enero de 2010

Bola de cristal- ¿Hacia dónde se dirige el diseño web?

- ¿Cuáles serán las principales tendencias y claves de éxito en 2010?

La gente de Information Architects ha hecho un pronóstico interesante, que os ofrecemos traducido (libremente) y resumido:

Todavía hoy muchos sitios web son demasiado difíciles de utilizar. Están repletos de información irrelevante y su funcionalidad es demasiado confusa. En estos sitios, hay 3 elementos esenciales que se echan en falta:

a) Un

Pocos sitios web tienen un modelo de negocio claro. Muchos intentan hacer dinero a través de una aleatoria e insistente, pensando que la “cantidad” se transformará automáticamente en mayores ventas.

Pero lo cierto es que los sitios web de éxito, como Google, Flickr, o World of Warcraft, hacen justamente lo contrario, demostrando que la clave está en:

- hacer algo realmente bien

- simplificar

- no apoyarse en publicidad aleatoria

(más…)

Los 10 errores más comunes en la usabilidad de un sitio web

Lunes, 18 de mayo de 2009

, gurú mundial de la , 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 que NO tener
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 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 , 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.

(más…)

Aprovecha los screencasts: cosas útiles que puedes hacer grabando tu propia navegación

Lunes, 1 de diciembre de 2008

¿Qué es un ? Un screencast es una grabación digital de la información que aparece en la pantalla de tu ordenador. Es como si una especie de cámara grabase, a una orden tuya, todo lo que estás haciendo en pantalla: el programa que estás usando, el recorrido del cursor, el texto que subrayas, el menú que activas, la página web por la que estás navegando, etc.

Cuando has terminado la “grabación”, puedes enviar ese archivo en formato vídeo a quien quieras, para que reproduzca de forma exacta la secuencia de completa, con todos los pasos que has dado. Además, es posible acompañar las imágenes con una narración de audio para hacer la descripción todavía más precisa.

¿Para qué puedo utilizar un screencast? Por ejemplo, para mostrarle a alguien cómo funciona una página web, un programa o una aplicación. En vez de llamarle por teléfono y guiarle paso por paso, o de redactar un mail con las instrucciones, puedes enviarle una grabación de la secuencia correcta.

Elaborar demos. Gracias a los screencasts, también puedes crear demos muy sencillas de aplicaciones, productos o servicios. Simplemente, pulsas el botón de grabación y comienzas a utilizar la aplicación, acompañando si quieres la navegación con una explicación oral.

. La formación es otro de los campos en los que los screencasts han tenido más éxito, ya que permiten generar el material didáctico de manera barata y sencillla. Además, ese material puede reutilizarse sin coste alguno para la organización, y la asistencia personal puede reservarse para aquellos cursos que requieran una verdadera interacción.

Ayudas. Este sistema también resulta muy práctico a la hora de construir “ayudas” para el usuario, ya sea para navegar por una página web concreta, para usar una aplicación o, simplemente, para mostrarle a alguien cómo usar el ordenador.

¿Cómo puedo crear mi propio screencast? Hay aplicaciones para todos los gustos, y casi todas son muy sencillas de utilizar. Entre las gratuitas están:

Tipcam permite almacenar y hasta 250 megas de vídeos.

Wink te permite realizar anotaciones, y está también en español. Tiene versiones para Windows y para Linux.

Screencast-o-Matic es una aplicación muy sencilla que funciona mediante un applet de Java. Visualmente no es ninguna maravilla, pero es muy fácil de usar. Genera los vídeos en formato Quicktime.

Ya en la sección de pago, para los que quieran algo más profesional, Snagit y Camtasia son algunas de las opciones más conocidas.

En . Una alternativa novedosa frente a los screencast grabados es la de compartir la navegación en tiempo real con tus colaboradores. Puedes conseguirlo utilizando aplicaciones como Vyew my PC o Mikogo. Son altamente recomendables.

¿Se te ocurre algún otro uso práctico?