- ¿Tienes que dibujar la maqueta o wireframe 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 compartir la información con el cliente y con el resto del equipo.

Estos consejos y herramientas pueden servirte de gran ayuda:

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.

(more…)

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

Simplicidad

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 modelo de negocio

Pocos sitios web tienen un modelo de negocio claro. Muchos intentan hacer dinero a través de una publicidad 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

(more…)

En 2009 no todo ha sido crisis económica y depresión anímica. También ha habido -como siempre sucede- buenas ideas y excelentes trabajos.

Te presentamos unas cuantas listas de “grandes éxitos” para que empieces 2010 cargado de inspiración.

- Los mejores diseños web de 2009. En un año de recesión, los presupuestos en publicidad han sufrido serios recortes. En muchos casos, esto ha hecho que la gente del marketing apueste por la web como herramienta de promoción de bajo bajo coste. Como vas a poder comprobar, el resultado final ha sido un trabajo creativo más que interesante: en D-lists han seleccionado los mejores diseños webs del año.

- 30 buenos diseños de formularios web y páginas de registro. No es fácil conseguir que un cliente se registre en nuestra página web. Pero para muchos negocios, éste es un paso imprescindible. Así que lo mejor es construir una página de registro y unos formularios web sencillos, prácticos y atractivos. Como los que han recopilado en dzineblog.

- Tablón de recursos útiles para diseñadores y desarrolladores. Imágenes gratuitas, plugins, CSS, plantillas, tutoriales de Flash y PHP, fuentes, hosting… Estos son solo algunos de los recursos que puedes encontrar en devlisting.

- Las aplicaciones favoritas de Guy Kawasaki. Guy Kawasaki ha creado una lista con las aplicaciones que para él resultan más útiles y productivas. Puede que ya conozcas muchas de ellas, pero seguramente encontrarás alguna nueva herramienta hecha a la medida de tus necesidades. Por ejemplo, para aumentar tu productividad, o para sacarle el máximo rendimiento a Twitter, a tu iPhone, etc. Solo tienes que echar un vistazo en la lista de favoritos de Kawasaki.

¿Cómo saber si un diseño es bueno o malo? Desde luego, no basta con que nuestro sitio web “tenga buena pinta”. Necesitamos otros elementos de juicio en los que apoyarnos.

Porque, para empezar, ¿quién define qué es una buena imagen y qué no?

Y para seguir: ¿de qué sirve exactamente que un sitio web tenga buena imagen si luego no nos ayuda a conseguir lo que queremos?

Necesitamos un método para medir el diseño. Te proponemos que sigas los siguientes pasos:

1. Entender qué es un “buen” diseño.

Podemos decir que un diseño es bueno cuando nos ayuda a conseguir nuestros objetivos de negocio.

2. Tener claros nuestros objetivos de negocio.

Por lo tanto, antes de abordar cualquier diseño debemos tener claros cuáles son  nuestros objetivos de negocio. Por ejemplo, vender más productos y servicios, obtener ingresos por publicidad, o dar a conocer nuestra marca.

3. Definir los objetivos del diseño.

Con esta información, podemos establecer qué es lo que queremos conseguir con el diseño: atraer usuarios mediante un mejor posicionamiento en buscadores, llegar a  un público objetivo más amplio, conseguir información útil para realizar acciones de marketing, agilizar el trabajo, y un larguísimo etcétera.

Ahora sí estamos preparados para definir una determinada línea de trabajo: una imagen gráfica, una estructura de navegación, una determinada distribución y ordenación de los elementos, etc.

4. Medir el impacto del diseño.

Ya hemos hecho nuestra apuesta: hemos construido nuestro diseño. Ahora llega el momento de determinar si funciona.

Debemos ser capaces de medir el impacto del nuevo diseño en nuestros objetivos de negocio. De ese impacto dependerá el éxito de nuestra apuesta. Entonces podremos decir si el diseño es bueno o no; es decir, si nos ha ayudado a conseguir nuestros objetivos, y en qué medida.

Esto nos lleva al siguiente paso.

5. Elegir las métricas más adecuadas.

Para medir el impacto, debemos apoyarnos en las métricas más adecuadas: aquellas que nos permiten conocer el nivel de cumplimiento de los objetivos que nos hemos marcado.

Métricas más utilizadas

En UI Patterns han recogido algunas de las métricas más comunes. Nosotros hemos las hemos completado:

- Posicionamiento en buscadores. Una posición privilegiada en la página de resultados de Google es como tener un escaparate en la mejor calle comercial. Si conseguimos posicionarnos bien en palabras clave para nuestro negocio, la afluencia de visitantes está prácticamente asegurada.

- Páginas vistas. Los sitios web que viven de la publicidad, y que tienen como objetivo conseguir muchas impresiones de banners, normalmente eligen esta forma de medir.

(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…)

En otoño las hojas se caen. Afortunadamente, las páginas web no.

Hemos ido recogiendo algunos sitios web que, por su diseño sencillo y efectivo, y por la forma directa de comunicar su mensaje, pueden servirte como fuente de inspiración:

- squarespace

- ukecosas

- train-ee

- envato

- tearoundapp

- boxuk

- dellustrations

- thoughtbot

- pixelounge

- slydial

- bookingbug

- ticketea

- saiku

- magntize

Y de postre, unos logos web interesantes, y unas cuantas técnicas y recursos interesantes para diseñar botones mediante CSS.

Las buenas ideas son un material imprescindible para realizar un buen trabajo, especialmente cuando nuestra actividad tiene mucho que ver con la creatividad.

Estas ideas pueden ayudarnos a:

- superar un bloqueo mental

- resolver un problema

- encontrar una nueva forma de hacer las cosas que nos permitirá diferenciarnos de la competencia

La pregunta es la siguiente: ¿de dónde sacamos esas buenas ideas?

En FreelanceFolder nos proponen unos cuantos consejos para generar ideas creativas:

Crea una “carpeta” específica para las ideas

Todo el mundo tiene ideas. Lo que ocurre muy a menudo es que, simplemente, no les prestamos atención. No las apuntamos cuando surgen. Y se nos olvidan. Desaparecen. Se evaporan. Se van como han venido.

Seguro que algunas de estas ideas eran muy aprovechables, pero nunca llegamos a saberlo porque no tenemos oportunidad de desarrollarlas.

Por eso, lo primero es hacer un “hueco” en nuestra agenda diaria para retener esas ideas.

Necesitas un espacio físico -por ejemplo, una carpeta en tu ordenador- para almacenar todas las ideas que se te van ocurriendo, y las cosas interesantes que vas encontrando y que no tienes tiempo de desarrollar en el momento.

Más adelante podrás recurrir a esas ideas para inspirarte, para encontrar nuevos caminos en tus proyectos.

Bueno. Ya tienes la carpeta. Ahora necesitas rellenarla de ideas.

Dónde encontrar buenas ideas

Estás rodeado de buenas -y malas- ideas. Sólo tienes que estar atento/a para descubrirlas. Te proponemos 10 fuentes que no suelen fallar:

La actualidad. Las noticias constituyen una fuente inagotable de ideas. Si estás atento/a a lo que sucede en el mundo, y a tu alrededor, siempre podrás encontrar propuestas interesantes. Debes aprender a rebuscar entre la montaña de información inservible. Con la práctica se agudiza el olfato.

El arte. El arte y la literatura siempre han sido fuentes de inspiración muy poderosas. Una obra de arte, un libro, una película pueden sugerirte un camino para tu próximo trabajo. Si tu área de actividad está relacionada con el diseño, este apartado es imprescindible.

(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…)

¿Harto/a de tomar siempre lo mismo? Hoy te traemos unas cuantas propuestas refrescantes para que amplíes el horizonte de tus diseños: gráficos atractivos, una herramienta para comparar tipografías, efectos para tus títulos, mejores prácticas del mercado y arte friki.

¿Alguien da más?

1. Infografía: la información es bella

Los datos son los datos, es verdad, pero para el usuario no es lo mismo consumirlos en forma de ladrillo que en pequeñas píldoras atractivas. En Informationisbeautiful hacen un esfuerzo por presentar la información de una forma más fresca y agradable, mucho más fácil de asimilar para el lector.

El resultado suele ser excelente, como por ejemplo, a la hora de explicar el extraño comportamiento de los usuarios de Twitter (del que ya hemos hablado alguna vez).

2. Alegría en la tipografía

Ayuda para elegir la tipografía adecuada y elaborar la CSS. Typechart es una aplicación muy útil para que selecciones la fuente web que necesitas: te permite comparar cómo se muestran en Mac y en Windows, y además te proporciona el código para la CSS (hoja de estilos).

(more…)