|

El nuevo Flickr: Colores de fondo, por favor

ByLuis

flickr-gamma.png Si ya el rediseño de Techcrunch es vulgar, los cambios en la interfaz de Flickr, especialmente en la desaparición del gris como color de fondo en la navegación del header y el footer, solo hace abundar en la confusión. Tanto blanco se me hace aburrido. Incluso han eliminado el border de las fotos.

Austeridad al estilo Google en esta nueva fase bautizada como Gamma, pero se equivocan. En Flickr se navega interior y jerarquizadamente en el que referencias visuales, como pueden ser diferentes colores de fondo, son efectivas.

Entre las mejoras, ahí sí que han acertado:

  • Más protagonismo del buscador y los feeds (grupos incluidos).
  • Los sets lo sitúan ahora a la derecha que después de las conclusiones del Eyetrack III, el modelo de plantilla con lateral a la derecha es el que capta con mayor rapidez el contenido principal, en este caso las últimas fotos publicadas.
  • Potenciación del Organizr.

Flickr Gamma en la blogosfera:

Más en: Technorati | Agregax

Similar Posts

ModernCaptcha: captcha con usabilidad

ByLuis

Si el otro día mostrábamos un ejemplo de CAPTCHA, ahora mostramos un ejemplo de CAPTCHA en el que no se trata de reconocer un texto deformado, sino de asociar un logotipo a un nombre. Así por ejemplo saldría el logotipo de Sentido Web y el usuario debería seleccionar “Sentido Web” de una lista de nombres.
La idea es buena, ya que un impedido visual tendría problemas para reconocer el texto deformado, que ya de por sí nos cuesta reconocer al resto. Pero le encuentro un problema, se supone que el CAPTCHA está hecho para que procesos OCR automáticos, pero o bien se tiene una lista de logotipos enorme, o se podría reconocer la imagen del logo con el nombre correspondiente.
Así, sin pensarlo mucho, se podría hacer la media de cada componente RGB de cada pixel de la imagen para asociarla a cada nombre, claro que si la imagen se cambiara de tamaño o se rotara se evitaría este “ataque”, aunque sería ponerse a buscar otro algoritmo más eficiente, que seguro que se pueden encontrar por internet.
ModernCaptcha – when captcha meets usability
Vía / dzone

| |

Laboratorio: filtrado de tablas

ByLuis

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
filtrado-tablas.png

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “líquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
filtro.gif

Read More “Laboratorio: filtrado de tablas”

|

Basar el diseño del historial del navegador en la memoria del usuario

ByLuis

La usabilidad del historial del navegador podría ser mucho más útil si se rediseña pensando en cómo funciona la memoria del usuario. Es la acertada reflexión que hace Alex Faaborg, diseñador de experiencia de usuario en Mozilla y miembro del equipo de desarrollo de Firefox 3.

El objetivo del usuario cuando va al historial se podría resumir en algo como: "Yo vi algo en algún sitio hace poco y quiero volver ahí". Lo que normalmente hacemos para volver a encontrar esa información es ir al sitio donde lo vimos y recrear las acciones realizadas para volver a encontrar la información: esto suele ser más sencillo y rápido que usar el historial del navegador.

El problema es que el historial funciona mostrando una lista de titulos de páginas, además ordenados por orden alfabético y casi nadie se fija en el título de una página que, además, suele ser poco descriptivo.

Sin embargo hay elementos de la interacción con el navegador que son más fáciles de recordar:

  • Acciones específicas que hizo: recordamos más facilmente lo que hemos hecho que dónde hemos estado. Por ejemplo: yo busqué tal palabra, guardé tal sitio en mis favoritos o ví el enlace en tal blog.
  • El aspecto del sitio donde estuvimos: la ciencia cognitiva ha demostrado repetidamente que somos mucho mejores recordando imágenes que textos, especialmente en tareas de reconocimiento.
  • Palabras o frases que leímos
  • Cuándo hicimos algo: sabemos que hemos hecho algo hoy, ayer o hace varios días. No sabemos lo que hicimos hace exactamente 5 días o hace 7 días.

En base a estas premisas, algunas hipotéticas, pero muy lógicas, Faaborg hace una propuesta de rediseño del historial que se puede ver en este prototipo:

http://sentidoweb.com/img/2007/01/newHistory.jpg_large-thumb.jpg

y que tendría estas características:

  • Poder buscar sobre las búsquedas que has realizado
  • Estaría organizado sobre segmentos de tiempo y acciones realizadas (buscar, abrir pestaña, pulsar link…). Cada segmento se agruparía sobre la acción que disparó la visualización de una serie concreta de páginas.
  • Añadiría al título de la página una imagen en miniatura de la misma.

Una interesante propuesta que es posible que se convierta en una extensión para Firefox del laboratorio de Mozilla

Vía / Blog de Alex Faaborg

| |

Endless.com: Experimento de Amazon en comercio electrónico

ByLuis

endless_logo.pngEndless es una nueva tienda de Amazon, dedicada a la venta de zapatos y bolsos, en la que destaca una interfaz de usuario rica y novedosa a base de DHTML y AJAX.
El sitio merece una exploración en profunidad pero un primer recorrido ya nos permite ver detalles alentadores:

  • Explorador visual de los artículo con zoom
  • Filtros de productos por marcas, color, tamaño o precio mediante AJAX (espectacular el de precios)
  • Paginación AJAX

http://sentidoweb.com/img/2007/01/endless_cap_2-thumb.png
Una interfaz de usuario realmente lograda, ejemplo de lo que la web 2.0 está consiguiendo y posiblemente una referencia en patrones de diseño en comercio electrónico.
Una pequeña crítica: se echa de menos un poco de enfoque social; al menos comentarios sobre los productos.

| |

Posicionamiento y estilo de las imágenes en los lectores RSS

ByLuis

Este verano cuando hicimos las plantillas (web de uso interno) de Blogia 2.0, uno de los elementos que cuidamos fue el de dar estilo a las imágenes cuando el autor elige la posición de la imagen desde el editor WYSIWYG.

cssimg-feeds.jpg

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */
img.left, img.right, img.center {
border: 3px solid #d0dfc3;
padding: 3px
}
img.left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
img.right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center {
margin: 0 auto 10px auto;
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.

Introducción a una buena usabilidad

ByLuis

La usabilidad es algo muy importante que siempre hay que tener en cuenta , entre otras cosas porque se diseña para los usuarios y éstos deben estar cómodos visitando nuestra página.
Para los que necesiten empezar a aprender, el documento que pasamos a continuación introduce algunos de los aspectos importantes. Pero empieza diciendo algo importante: sobre el tema de usabilidad es muy difícil hacer algo nuevo, por lo que es mejor que no pierdas el tiempo inventando, copia de los grandes, que gastan mucho dinero en hacer que sus sitios sean usables.
Entre los consejos que da, trata el tema de los breadcrumbs (barra de navegación), indicando que debe ser la misma que los menús, no debes inventarte una navegación nueva, y que la página actual no debe tener enlace.
Sobre las pestañas indica que debe haber solamente una fila, y en el caso de que haya dos, la segunda debe ser dependiente de la primera (tipo submenús) y quedar diferenciadas en el diseño (por ejemplo con distintos colores).
De los enlaces dice que lo mejor es seguir los estándares, que sean azules y subrayados y que los enlaces visitados también se diferencien. Aunque si no lo quieres hacer así (lo más normal), deben ser claramente diferenciables del texto normal y si se usan imágenes, que estas cambien al pasar el ratón sobre ellas.
De los servicios que acortan URLs no habla demasiado bien, pero yo creo que su uso es muy correcto en determinados escenarios, sobre todo si el enlace solo se usa para ir a un contenido que se ha descrito anteriormente.
En resumen, un documento muy interesante para ir empezando con la usabilidad.
Introduction to Good Usability
Vía / Css Globe