Sebastián Thüer

Comunicación, diseño y tecnología

ux

La usabilidad en dispositivos táctiles

· ·

No hay dudas que los dispositivos táctiles han revolucionado el mercado. Pero también afectaron ciertos principios de la experiencia del usuario. Áreas de interacción minúsculas o información escondida detrás de capas de botones y controles innecesarios terminan por frustrar al usuario.

Si estás pensando diseñar para dispositivos touch screen te recomiendo que leas este interesante post que me hace llegar la gente de Xperience Consulting donde se enumeran 10 principios de usabilidad para dispositivos táctiles a tener en cuenta:

  1. Utilizar eventos estándard
  2. Evitar eventos hover
  3. Evitar controles indirectos
  4. Áreas de interacción mayores
  5. Lo que no ve el usuario
  6. Considerar dónde interactúa el usuario para situar los elementos adecuadamente
  7. Considerar la posisión del dedo al poner mensajes
  8. Tener en cuenta el contexto
  9. Mejor el scroll que las capas
  10. Comunicar los resultados

¿Qué le falta o le sobra a esta lista? Me parece una buena síntesis, solamente indicaría que las áreas de interacción deben ser obvias y no dejar lugar a dudas. Mientras en el mouse nos posibilita «recorrer» el contenido con el puntero para ver en qué sitio el icono cambiar por una mano -y así reconocer que se trata de un área sensible-, el dedo no tiene esa posibilidad.

Nota: El gráfico es de la web de Xperience Consulting

Diseñando para WordPress 3.0

· ·

En estos días muchos blogs están comentando sobre WordPress 3.0 y sus nuevas funciones que la convierten en una plataforma cada vez más madura. Gestión de múltiples sitios, taxonomías, custom post types y otras funciones hacen que sea mucho más que un sistema para gestionar blogs. La presentación de Juan Rossi en el WordCamp Argentina ofrece una buena síntesis.

John O’Nolham ofrece una visión del proceso de desarrollo para documentar una parte bastante menos conocida: la creación de la UI y UX. En su post, O’Nolham nos acerca al desarrollo OpenSource en diseño que tiene diferencias importantes con el modelo de OpenSource en desarrollo. Básicamente, porque la subjetividad está mucho más presente y por más test y analíticas que se consideren de fondo es imposible medir cada variación y cambios en la interfaz de usuario.

El modelo de código abierto supone que el software siempre está en desarrollo y nunca se llega a un estado final. En el diseño, esto implica que cada cambio que se realice afectará al menos esta versión y probablemente las próxima del producto. Por ejemplo, la nueva versión privilegia la usabilidad y accesibilidad por lo cual el tradicional encabezado de fondo negro y letras claras cambia se invierte: grises claros de fondo y letras claras para el texto.

Cambios de este tipo, que seguramente no estarán mencionado en ningún anuncio de prensa, son analizados minuciosamente y pasan al menos cinco revisiones. A eso se le suman decisiones de tipo estratégico que pueden obligar varios cambios, por ejemplo usar o no usar CSS3. Esto implica que los degradados sean creados con imágenes o directamente se use el nuevo atributo para crear gradientes.

O’Nolham también analiza otro aspecto interesante: diseñar para un clientes vs. diseñar para millones de usuarios. El desafío de esto último es básicamente la flexibilidad. Palabras muy cortas en un idioma son más largas en otro,  idiomas con ideogramas o signos diferente del alfabeto occidental,  idiomas con escritura de derecha-izquierda, etc. En definitiva, Designing for Over Twenty Million Users: WordPress 3.0 es una lectura muy interesante para cualquier diseñador que quiera trabajar en proyectos masivos bajo el modelo OpenSource.

Cambios en el corazón de Google: nueva página de resultados de búsqueda

· ·

Finalmente hoy Google anunció el lanzamiento de su nueva página de resultados de búsquedas en lo que supone uno de los cambios más importantes en el diseño en toda su historia. Esta página -que la gente de marketing llama SERP (Search Engine Result Page) es la piedra basal de Google y cada mínimo cambio tiene mucho estudio detrás.

La nueva versión hace tiempo que estaba en prueba y podía accederse a través de un código que da vueltas por varios blogs.  Lo más significativo es que añade contextualización a las búsquedas porque te permite filtrar el contenido según el tipo de contenidos como fotos, videos, noticias, libros, etc.

A nivel de interfaz de usuario se añada una columna a la izquierda con las opciones de búsqueda para filtrar el contenido. El diseño ayuda a concentrarse en los resultados y mantiene bastante separada la publicidad de los resultados de búsqueda, algo que se agradece y deben haber estudiado con sumo cuidado porque es uno de los principios fundamentales en la interfaz de usuario y su filosofía de experiencia de usuario.

También hay cambios en la caja de búsquedas que es más grante y ahora emplea un tipografía de mayor tamaño. Además, han hecho algunos retoques en el logo de Google con una sombra más próxima y los colores de las letras parecen más claros y brillantes.

Danny Sullivan hace un detallado análisis de los cambios en SearchEngineLand y destaca el notorio parecido que tiene con su rival Bing.

Yo todavía no veo la nueva página por defecto de Google pero con el correr de las horas se irán extendiendo los cambios que ya comenzaron en los datacenters de Estados Unidos.

¿Te gustan los nuevos cambios de Google? ¿Hubieras agregado o quitado algo?

Diseñando para el Ipad

· ·

El iPad ya está en la calle y algunos sitios web han comenzado el proceso de adaptar sus aplicaciones para que se vean bien en el nuevo gadget de Apple. Pero hay algunos que buscaron anticiparse y quisieron tener sus diseños compatibles apenas se lanzó el producto. Todo un desafío para los diseñadores.

Information Arquitecture ha publicado una interesantísima reseña donde cuentan el proceso de diseño para un dispositivo que en ese momento no existía ¿Cómo testear el diseño y saber si verá bien? ¿Tendrá la tipografía el tamaño suficiente legible o se verá demasiado grande?

La respuesta no está en ningún artilugio sofisticado sino en algo mucho más habitual: pruebas impresas. Así es, imprimieron cientos de pantallas para evaluar la resolución y determinar tamaños, contrastes y la disposición de los elementos.

Compararon las resoluciones y tamaños de la tipografía con otros dispositivos como pantallas de monitores LCD y el iPhone. Como la interfaz es táctil los elementos interactivos deben sobresalir claramente el 3D está recomendado para botones.

Pero como ya he comentado anteriormente, si bien la interfaz táctil es mucho más natural y habitual tiene el problema que la entrada y salida de la información se realiza sobre el mismo soporte. Por lo tanto, hay que minimizar la interacción del usuario tanto como sea posible y pedirle su decisión sólo cuando es imprescindible. Nada de clics obvios solo para aceptar una acción que de todas maneras se ejecutará.

Jeffrey Zeldman hace un buen resumen del texto de Information Arquitecture y nos da algunos elementos claves cuando pensamos en diseñar para el iPad:

  • Minimizar la entrada de datos, maximizar la salida.
  • El tamaño mínimo de un elemento a pulsar es el círculo del dedo índice. El espacio vale oro y no hay que gastarlo en opciones secundarias.
  • Es más fácil transformar una aplicación para el iPad en un sitio web que hacerlo al revés.