La ley de Hick en el diseño web

Ya hablamos una vez de la ley de Fitts. En este caso voy a hablar de la ley de Hick. Fue enunciada por William Edmund Hick, y dice que el tiempo que se tarda en tomar una decisión aumenta a medida que se incrementa el número de alternativas.

Todas las tareas se dividen en 4 pasos:

1. Identificación del problema.
2. Valoración de las opciones para solucionar el problema
3. Elección de una de las opciones.
4. Realización de la misma.

La ley de Hick, en realidad, se aplica solo al tercer paso, aunque obviamente afecta a las demás. Se puede mejorar la eficacia de un diseño minimizando el número de opciones. A la hora de diseñar un menú para una web, por ejemplo, es básico simplificar al máximo el número de clics que debe hacer un usuario para llegar a un determinado objetivo. Un ejemplo de exceso de opciones puede ser la cabecera de fnac.es, que llega a tener hasta 3 botoneras horizontales llenas de opciones… aparte de los banners en flash que presentan las ofertas en curso o las dos barras verticales que hay a cada lado del cuerpo central.

Firefox es mucho más que un navegador

También es un extintor!!!!!!!

Regalo invitaciones para wave

La aparición de google wave en el mundo de las redes sociales ha provocado tanta expectación… que al final nos hemos quedado todos con la cara partida. No es para tanto, y además es bastante complicado de aprender a manejar. Aún así, hay quien pierde el culo por una invitación. Yo tengo 7. Las reparto gratis a quien me comente en esta entrada su dirección gmail.

Aviso que, en realidad, no son invitaciones, sino recomendaciones a google para que ellos te inviten, o sea que no son inmediatas.

la ley de fitts en el diseño web

La ley de Fitts fue enunciada por Paul Fitts en 1954. Ésta dice que el tiempo necesario para desplazarse hasta un objetivo es una función del tamaño de dicho objetivo y de la distancia hasta el mismo.

Según esta ley, cuanto más pequeño y alejado está el objetivo, más tiempo se tarda en lograr adoptar una posición de descanso sobre dicho objetivo. Además, cuanto más rápido es el movimiento necesario y menor el objetivo, mayor es la probabilidad de error. Esto, que a priori puede parecer tan obvio, es medible gracias a la fórmula de Fitts. Y además, es aplicable al diseño. Cuando se apunta a un objeto en la pantalla del ordenador, el movimiento vertical u horizontal puede limitarse, lo que aumenta la velocidad con la que se puede llegar a los objetos, y se limita el error. Un ejemplo de cómo controlar esto son las barras de scroll. Unificar todos los botones en una misma zona también reduce el espacio entre objetivos, y por tanto minimiza el tiempo de respuesta.

Seminarios de Google: experiencias

Hace unas semanas recibí un email avisándome de la celebración de un Seminario AdSense de google sobre el uso de esta herramienta. Como soy un diseñogramador con aspiraciones de analista posicionador (vamos, que valgo para un roto y para un descosío), avisé en la empresa para apuntarme (es en horario de oficina), y como era gratis pues nada, a aprender como un loco. La primera de estas ponencias es hoy. De hecho, estoy participando en ella mientras comienzo la redacción de este artículo.

Después de leer varios avisos de google recordándome que era hoy (como si no supiera usar el Works para ponerme una alarma), entro en la sala 10 minutos antes, como me recomendaron, y no puedo entrar porque me pide un número de reunión que no tengo. Después de 15 minutos (o sea, ya empezada la ponencia), descubro que no es un problema de número de reunión, sino de que el software para seguir la charla no es compatible con safari. Así que la abro con firefox y sin problema. Se me descarga el WebEx y ¡sorpresa! para tener audio tengo que llamar a Estados Unidos y dar un número de asistente. O sea.. que básicamente he estado viendo diapositivas.

Después de 40 minutos de diapositivas, que prudentemente he capturado y guardado en jpg para poder tomar apuntes con tranquilidad, acaba la ponencia y comienza el turno de preguntas. Y yo ya no sé si es porque no sé usar el programa éste, pero he lanzado una pregunta y van ya 15 minutos que nadie me contesta. Lo cierto es que he hablado en el chat y tampoco contesta nadie. Y en la ventana que pone “participantes” dice que estamos el ponente y yo, cosa que tampoco me creo.

Conclusiones:

1. Mucha tecnología, pero esto falla más que una escopeta de caña.
2. Si me llegan a enviar un enlace desde www.slideshare.com hubiera tenido el mismo efecto.
3. Salvo dos o tres puntos interesantes, no he aprendido nada que no se pudiera deducir toqueteando el panel de administración de adSense.

¡¡¡Dentro de dos semanas otra!!!

La regla del 80/20

La regla del 80/20 nos indica que el 80% de las cosas se consigue con el 20% de los recursos. De esta forma, el 80% del tráfico de una ciudad pasa por el 20% de sus carreteras; el 80% de los ingresos de una empresa procede del 20% de sus productos; el 80% del trabajo de una empresa lo realiza el 20% de sus trabajadores…

Un gran ejemplo de la regla del 80/20 lo encontramos en los programas informáticos. En las barras de herramientas es frecuente (sobre todo en el paquete Office) que los menús desplegables presenten solo unas pocas herramientas acompañadas de unas flechas hacia abajo que hacen desplegar aún más el menú, con las herramientas menos frecuentes.

En diseño esta regla es muy útil a la hora de maximizar los resultados rediseñando una página web. Analizar el flujo de clics de los visitantes y encontrar el 20% de aplicaciones de tu web que usan, te servirá para recolocar dichas herramientas en las zonas de máxima visibilidad y relegar las herramientas menos usadas a segundos planos. Además, evita perder el tiempo en implementar herramientas o aplicaciones que no nos ofrecen resultados.

Estética versus usabilidad

Este fin de semana he estado en Madrid, en el Congreso de Webmasters, y he notado que en dos días de ponencias (21 ponencias en total), no se ha hablado prácticamente nada de diseño. Sí de la importancia de éste en algunos aspectos, pero realmente no ha habido una sola ponencia sobre tipografía, maquetación web, nuevas tendencias, estilos, teoría de color, teoría compositiva… Lo cual me trae a colación ciertos textos que he ido leyendo los últimos meses sobre estética y usabilidad.

Existe una especie de confrontación entre estos conceptos. Parece ser que lo estético no es usable, y lo útil no puede ser estético. Lo cierto es que hay estudios científicos que demuestran que los diseños estéticos son más sencillos de utilizar que los que no prestan demasiada atención al apartado visual del mismo. Esto no es cierto, ya que lo útil es útil porque lo es, y no porque lo parezca. Esto me recuerda el viejo proverbio marinero que dice que un amarre no solo tiene que ser sólido… además tiene que parecerlo.

Los diseños estéticos parecen más fáciles de usar y tienen más probabilidades de ser empleados. Los diseños estéticos fomentan actitudes más positivas que los diseños no estéticos. Y esas actitudes producen un refuerzo emocional que contribuye al éxito final de la aplicación. En apenas unas fracciones de segundo podemos ahuyentar a un usuario de una web por culpa de un diseño poco estético, aunque por dentro de la web todo funcione correctamente, y el producto/servicio que ofrezca sea igualmente bueno.

Examen de CSS

Navegando por la red he encontrado un pequeño examen de CSS. Es de nivel básico-medio, pero está curioso. Yo he sacado un triste 80%. ¿Cuánto sabes tu?

Examen de CSS

IE para MAC

Vaya alegrón que acabo de darme… Resulta que existe una versión de IE para los que diseñamos web en Mac. Estoy empezando un proyecto grande, así que me va a venir de escándalo. En cuanto le haya dado unas vueltas, comentaré por aquí los resultados del invento.

Descárgatelo.

Como colgar videos en mp4 en tu web

Ya lo comenté hace unos días en twitter, y ahora lo traigo al blog. me costó un poco de trabajo encontrar esta información, y de hecho creo que la terminé encontrando en una web extranjera. Y como no todo el mundo tiene la posibilidad de entenderse en blogs y webs que estén en inglés, creo necesario traer a colación este tutorial.

La cuestión es que todos (o casi todos) sabemos cómo colgar un vídeo de youtube en una web o foro, ya que el propio portal de vídeos facilita el código que hay que poner, personalizable en tamaño y colores. Sin embargo, el otro día tuve que colgar unos vídeos en formato mp4, y no estaba seguro de si se debía colocar igual que un .swf o sería necesario algún código en particular. Después de mucho googlear, encontré el siguiente código:

<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” codebase=”http://www.apple.com/qtactivex/qtplugin.cab” width=”320″ height=”195″>
<param name=”src” value=”ruta_relativa.mp4″>
<param name=”autoplay” value=”true”>
<param name=”controller” value=”true”><embed height=”195″ pluginspage=”http://www.apple.com/quicktime/download/” src=”ruta_relativa.mp4″ type=”video/quicktime” width=”320″ controller=”true” autoplay=”true”>
</object>

Se copia este código, se pega donde se quiere poner el vídeo, y se sustituye la cadena ‘ruta_relativa.mp4′ por la dirección donde está el vídeo (que previamente habremos subido por ftp). La pega de este sistema es que está poco extendido, y no todo el mundo tiene los plugins necesarios para verlo, por lo que aparecerá la pieza del puzle advirtiendo de que necesitas descargarlos (los de quicktime, para ser exactos).