|

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

| |

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.

| |

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”

Lanzamiento de YouAre.com

ByLuis

Los amigos de BlogsMedia acaban de lanzar YouAre.com, proyecto en el que he colaborado un poco, por lo que me hace mucha ilusión que ya salga a la luz.
youare.png
YouAre es una publicación de contenidos por microblogging, pudiendo publicar textos, vídeos y fotos, permite networking, canales de ciudad, bookmarking, importación de contenidos (delicious, flickr y youtube) y muchas cosas más (y las que faltan por venir).
En YouAre puedes incluir tu curriculum profesional y tus estudios para así poder contactar con otros usuarios, para mucha gente es importante la trayectoria que llevas hasta ese momento.
Como dirían en YouAre: Twitter + Tumblr + Linkedin + Del.icio.us + Ingrediente secreto = YouAre
Mucha suerte para JL y Gabi
disclamer: he participado en el desarrollo del proyecto [¡dios!, siempre he deseado poner un disclamer]

8 consejos para mejorar la usabilidad

ByLuis

8 buenos consejos para que podamos mejorar la usabilidad de nuestras aplicaciones web, algo que a veces se ignora pero que hace sufrir a algún que otro usuario.

  • Cuanta más interacción se necesite para realizar una tarea, más difícil se vuelve: cuando se necesite realizar una acción hay que evitar pedir todas las posibles características de la acción, simplemente pide lo estrictamente necesario. Por ejemplo, un buscador, puedes pedir que te ofrezcan la categoría, el número de resultados, el criterio de orden, … o simplemente pedir la palabra a buscar y si se quiere ofrecer una búsqueda avanzada para quien quiera refinar la búsqueda.
  • Cuanto mayor tiempo de concentración se necesite para realizar una tarea, menor es la usabilidad: intenta que la aplicación responda lo más rápido posible para que el usuario mantenga su atención.
  • Cuanto más tenga que trabajar el usuario, menos efectiva es la interfaz: lo que nos lleva a otro punto, haz la interfaz intuitiva.
  • No vayas en contra de lo que espera el usuario: el usuario está acostumbrado a una serie de herramientas: botón para volver, recargar, … Diseña la aplicación teniendo en cuenta que el usuario está acostumbrado a algo y es lo que espera encontrar. El mal uso de Ajax a veces va en contra de esta premisa.
  • Las páginas de error no gustan: nada es peor que mostrar uno o dos errores al usuario al mismo tiempo.
  • Permite al usuario modificar la interfaz: a todo el mundo le gusta modificar los colores y el aspecto del entorno de trabajo. Que la gente se sienta cómodo con los colores es también algo a tener en cuenta.
  • No esperes que los usuarios lean las instrucciones: debido a ello, la interfaz debe ser lo más parecido a lo que se está acostumbrado, para que cuando se encuentren con lo que tienen que hacer sea igual o muy parecido que lo de siempre.
  • Mantén al usuario libre de errores: por ejemplo, una página 404 no dice nada, en vez de ello ofrece alternativas.

5 (+3) tips to increase web application usability

Vía / dzone

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

ByLuis

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

|

Fireflix: controla tu cuenta de Flickr desde Firefox

ByLuis

fireflix.pngEncuentro en firefoXtensions (página que recomiendo que sigas si eres usuario de Firefox), una extensión que facilitará mucho el trabajo a los usuarios de Flickr.
Con esta extensión podras subir fotos nuevas, crear thumbnails en formato HTML de las fotos seleccionadas, buscar fotos en Flickr, eliminiar fotos, trabajar con sets de fotos y más cosas.
La primera vez que lo ejecutas, te aparecerá en Flickr una pestaña nueva para poder permitir el acceso a la extensión, una vez concedido ya podrás trabajar con ella perfectamente.
fireflix
Vía / firefoXtensions