No voy a hacer la típica lista interminable de atajos de Fireworks, para eso ya está la ayuda ( aclaro que hablo sobre la versión 8, aún de Macromedia ), sino sólo los que más uso en el día a día.

Algunos supongo que ya los sabréis:

• Mostrar todo el contenido: CTRL + 0
• Mostrar contenido a tamaño real (zoom 100%): CTRL + 1
• Zoom dinámico: CTRL + Rueda del ratón
• Mover visor: ESPACIO + Clic y arrastre de ratón
• Traer un nivel al frente el objeto seleccionado: CTRL + Flecha arriba
• Enviar un nivel al fondo el objeto seleccionado: CTRL + Flecha abajo
• Duplicar objeto: CTRL + ALT + D
• Mover objeto 10 pixels en alguna dirección: SHIFT + Flechas
• Pegar un objeto dentro de otro (con mascara): CTRL + SHIFT + v
• Pegar los atributos de estilo de un objeto a otro (color, efectos, etc.): CTRL + ALT + SHIFT + v (atención, peligro de lesión al usar una mano solo)
• Cambiar de fotogramas: RePág y AvPág
• Transformación libre de un objeto: Q

Estaría bien que nos dijerais cuales usáis con más frecuencia, seguro que hay muchos que no sabemos y que son realmente útiles.

Esta característica…

• Hizo de Google un lider mundial.
• Hace que los videojuegos sean tan jugables.
• Es por ella por la que los geeks prefieren usar el bloc de notas que el Word.
• Hace que algunas aplicaciones web sean tan frustrantes de usar.

Estamos hablando del tiempo de respuesta.

En el mundo real, tocas algo y se mueve. No tienes que esperar a que el universo tarde 3 segundos en calcular la nueva posición del objeto. Una respuesta inmediata es lo que espera el cerebro. Cualquier aplicación te hace esperar, esto mata el flujo de las acciones y el disfrute de la aplicación.

Sonic tenía un tiempo de respuesta inmediato. ¿Lo tiene tu aplicación?

Piensa sobre usar un ordenador 8 horas al día. Piensa cuanto tiempo estás esperando cosas:

• Esperando a que las páginas web se carguen.
• Esperando a que tu ordenador se reinicie.
• Esperando a que se inicien los programas (Photoshop por ejemplo)
• Tiempos de compilación o renderizado
• etc.

Coge estos tiempos y multiplícalos por las millones de veces que los has experimentado y tendrás un montón de tu tiempo malgastado.

Leer más…

A propósito del diseño de páginas web:

Entre dos explicaciones, elige la más clara; entre dos formas, la más elemental; entre dos expresiones, la más breve.

Eugeni d’ Ors (1881-1954) Escritor español.

El espacio que rodea a este bloque de texto es tan importante como otros factores, como el uso apropiado del color, el tipo y gráficos. Lo sé, hay una tendencia, especialmente en la web, de rellenar todos y cada uno de los rincones con texto. “El espacio en blanco está mal”, parece ser el eslogan, “¡debe ser eliminado!” “¡Abajo con espacios en blanco!”

Nota del traductor: Doy fe que este punto se repite hasta el aburrimiento…

Lo gracioso es que, a la mayoría de nosotros nos han enseñado desde la escuela primaria a utilizar los espacios en blanco. Recuerdo como mis maestros siempre insistian en que pusieramos un margen de 2cm en el lado izquierdo de cada página. Nos lo metieron tanto en la cabeza, hasta que se convirtió en un hábito que no he podido romper, incluso hasta el día de hoy. Lo cual es en realidad un gran hábito.

Entonces, ¿por qué es tan importante el espacio en blanco? Parte de la razón es psicológica y parte física: el texto necesita espacio para respirar. Cuando grandes cantidades de texto cruzan de lado a lado los bordes de la página, nos dan la sensacion de multitud y de que algo esta rebosando. Largos pasajes de texto, escritos de lado a lado, cansan a los ojos.

Leer más…

C.R.A.P es el acrónimo de Contraste, Repetición, Alineación y Proximidad. Son 4 principios básicos que te ayudarán a crear mejores diseños. Una posible definición de estos principios:

• Contraste. Elementos que no son lo mismo, deben de ser diferentes, haciéndolos ligeramente diferentes solo llevan a la confusión de relacionarlos incoscientemente entre ellos. Contrastando fuertemente los elementos, conseguiremos que el usuario se desplace de un elemento a otro acertadamente hasta el final de la página, evitando así un mar de similitud resultando muy aburrida.
• Repetición. Repite el estilo de tu página durante toda ella, creando consistencia. Si relacionas elementos de una determinada manera en un área, repite esta tendencia en otras áreas.
• Alineación. Todo en la página necesita estar visualmente conectado con alguna otra cosa, nada debería estar fuera de su lugar o distinto para todos los demas elementos de diseño.
• Proximidad. La proximidad crea una relación de significados, elementos relacionados deberían agruparse, y entre elementos diferentes debería haber el suficiente espacio entre ellos para que se apreciara esa diferenciación.

Contraste.

Un buen contraste permite relacionar areas que tienen alguna similitud o relación, y separar las que no la tienen. Asegúrate de contrastar tus elementos y secciones.

Un ejemplo lo encontramos en el blog de Jason Csizmadi, Dangergraphics.com.

Su sitio está separado en dos columnas perfectamente diferenciadas visualmente, lo que indica que son contenidos completamente distintos. El lado derecho es un blog, y el izquierdo contiene algunos de sus trabajos más recientes y links a otros sitios.

Leer más…

Muchas veces quieres tener la información, guardarla y seguir adelante. Y no puedes. Las pesadillas de la usabilidad, que forman parte de la rutina diaria más que de una excepcion aparecen una y otra vez. En este artículo “Porque los sitios que ganan premios son tan horrorosos” Ferry McGovern apunta que “las superficies brillantes ganan premios, mejoras reales ganan clientes” y eso es absolutamente cierto. No importa el diseño que tengas, y tampoco importa que funcionalidad quieres ofrecer, si tus visitantes no entienden que tienen que hacer para llegar del punto A al punto B, no usarán tu página.

En la mayoria de los diseños profesionales (excepto en diseños especiales para mostrar cosas como por ejemplo portfolios) necesitas ofrecer a tus visitantes:

• Navegación clara y sencilla, que hable por si misma de como usarla.
• Texto de presentación preciso y directo.
• Búsquedas.
• Estructura visible de la página.

Esto significa que solo tienes que seguir los principios básicos de la usabilidad y sentido común. Quieres comunicarte con tus visitantes, ¡no los eches fuera!

En este artículo daremos una vuelta por algunas de las pesadillas de la usabilidad que deberias evitar para tener una página funcional y usable. Al final del artículo también podras encontrar 8 puntos más que probablemente debas aplicar.

1.- Formularios de login ocultos

Backpack, una de las herramientas mas utiles de organización y gestion de proyectos de 37signals, explica exactamente lo que la herramienta puede ofrecer, como usarla y que características tiene. Sin embargo, una vez que te has registrado, necesitas unos cuantos minutos para encontrar el lugar para poder empezar a usar la herramienta.

El enlace de login (ayuda: en el rectangulo amarilllo) podría tener un tamaño de fuente mayor o estar acompañado de algún icono. Cada usuario registrado tiene su propia página personalizada, sin embargo los nuevos usuarios registrados tienen que pasar un tiempo buscando donde pueden logearse. Como comenta As Lee “alguien que haya perdido el tiempo registrándose en tu pagina puede permitirse mas de 2 segundos encontrando como logearse”. Vale, ¿pero porque debería hacerlo? ¿Porque el enlace no está en un sitio visible? Suena bastante razonable.

Leer más…