Sebastián Thüer Blog » Usabilidad

Por qué los usuarios abandonan tu carrito de compras [infografía]

Sebastián Thüer — Fri, 25 Nov 2011 14:33:27 +0000

Una cuestión clave que conocen los vendedores de toda la vida es la habilidad para cerrar una compra. Una vez que llega el comprador, se interesa por un producto y comienza el proceso de decisión de compra hay una serie de elementos clave que ayudan al usuario a tomar la decisión de proseguir.

Esta infografía muestra algunos de los problemas más comunes en las ventas online y lo que se conoce como “shopping cart abandonment”, un problema no menor que afecta al 75% de las transacciones online. La clave está en una buen diseño de todo el proceso con indicaciones claras de los pasos a seguir, mostrar imágenes de los productos, permitir editar la compra para agregar o quitar productos, ofrecer protocolos seguros, ofrecer formas de contacto alternativas (el télefono todavía importa) y diversificar las opciones de pago.

También conviene recordar que NO hay que hacer: forzar el registro de usuarios, esconder costos finales (envío, gastos de procesamiento y otros galimatías) y uno que me parece muy importante: no ofrecer un cupón de descuento de forma innecesaria. Si lo haces, lo más probable es que el usaurio abandonde tu página para buscar algún cupón por ahí con el posible riesgo de que se pierda y no retorne.

Vía SearchEngineLand

Timeline, un nuevo concepto visual para repensar Facebook

Sebastián Thüer — Wed, 28 Sep 2011 14:50:38 +0000

Facebook modificará radicalmente la experiencia de usuario. Durante la semana pasada presentó en la conferencia de desarrolladores F8 un proyecto que avanza mucho más allá de los cambios estéticos y las pequeñas mejoras que venía realizando hasta ahora. Timeline es una nueva propuesta conceptual para orientarnos en las redes sociales donde el muro tradicional pasa a la historia.

¿Por qué semejante cambio? Básicamente porque el modelo visual de Facebook se está agotando. Hasta ahora su eje era el streaming de datos, esto es, el flujo de información desde la actividad de los contactos hacia el usuario: Fulano es amigo de Mengano, Sultano fue etiquetado en una foto o un amigo que te invita a su fiesta a través de los eventos.

El problema con este modelo es la cantidad de información. Las estadísticas oficiales de Facebook nos dicen que cada usuario tiene un promedio de 130 amigos y unas 80 conexiones adicionales entre páginas, eventos y grupos. Un número bastante alto si tenemos en cuanta que hay cuentas abandonadas, usuarios con más de una y perfiles falsos inactivos. Toda la información no puede entrar en el streamline, al menos no sin que el usuario sienta que el flujo de datos es un caos y termine agobiado por la cantidad de informacion que se le escapa.

La solución parcial de Facebook fue comenzar a filtrar datos. Por empezar, mostrarnos solo los datos de las personas con las cuales nos comunicamos más frecuentemente. El problema del criterio, es que no necesariamente más comunicación significa más cercanía o más interés por conocer lo que hace el otro.

Una idea reciente fue el de las listas inteligentes por las cuales nos crea automáticamente un grupo de “mejores amigos”, compañeros de estudio y de trabajo. Un intento sin mucho disimulo por emular los círculos de Google+ que tanto gustan a los analistas y expertos en social media. Como los círculos, en las listas inteligentes se puede elegir qué persona sale o ingresa de ellas.

El problema que sigue subsistiendo son los datos históricos ¿Cómo encontrar aquel comentario tan divertido que dejó un amigo hace un par de años? Si no es a través de una fotografía, probablemente la búsqueda sea muy difícil. El 50% de los usuarios de Facebook ingresa al sitio todo los días. Pero para la otra mitad, un día sin ingresar equivale a perder de vista información.

Facebook tenía un encanto especial cuando íbamos descubriendo viejos amigos o compañeros y nos enterábamos qué fue de su vida, pero lentamente la preocupación de los usuarios comienza a ser cómo dejar de recibir basura y orientarse en el incesante flujo de datos para encontrar lo que verdaderametne le interesa. En esa dirección apuntó Facebook al anunciar que deja de enviar un correo de notificación por cada cosa que pasara en nuestro muro para optar por un formato de resumen diario.

Adiós al muro

La presentación de Marck Zuckerberg en F8

Timeline borra de un plumazo el antiguo muro y organiza los datos como sucesos alrededor de una línea de tiempo donde se representan los sucesos más significativos de nuestra vida. Una especie de álbum de fotos multimedia con el registro de los momentos más relevantes según un algoritmo de Facebook, aunque esta selección automática puede corregirse y personalizarse.

Justamente este algoritmo es el que ha recibido más críticas ¿Está realmente listo Facebook para decirnos cuáles son los momentos más importantes de nuestra vida? Un cumpleaños, los estudios, un nuevo trabajo son solo algunos eventos bastante obvio debajo de los cuales hay mucha más información para procesar.

Además, dice Lance Ulanoff en Mashable, Timeline viene de la mano de OpenGraph que no es más que una aplicación para conocer patrones de conducta. En teoría, esto serviría para un grupo de amigos mirara una película o escuchara música al mismo tiempo y pueda comentar entre ellos lo que está sucediendo ¿Pero interesa realmente esto a los usuarios o está hecho a la medida de los gerentes de marketing y aunciantes que pueden conocer en detalle la audiencia a la cual se dirigen? Otra cuestión complicada de Timeline: revela quién dejó de ser nuestro amigo.

En el lado positivo encontramos que Timeline tiene un indudable atractivo para viajar hacia atrás en el tiempo y redescubrir sucesos, fotos y comentarios del pasado. Todo desde una sola pantalla y sin necesidad de usar buscadores o rastrear una imagen en decenas álbumes.

El nuevo formato permite muchas más opciones de personalización. Las ridículas fotos que Facebook pone al azar en nuestro perfil no necesariamente refleja la imagen que queremos. Por eso, además de la foto de perfil, existe ahora la opción de subir una foto de presentación donde mostrar la imagen que queremos. Más allá de esta cuestión particular, en general Timeline transmite la sensación de que hay mucho más control sobre lo que mostramos en nuestro perfil.

En conclusión…

Si Facebook quiere evolucionar el muro tradicional se convierte en un lastre. Creado en 2005, cuando apenas Facebook tenía un año, el formato no está pensado para la cantidad de información que circula hoy por las redes sociales ni el número de conexiones que se crean.

Los sucesivos cambios de controles de privacidad aportaron bastante lío al tema y es probable que muchos usuarios no tengan todavía demasiado claro qué están compartiendo y con quién a través de Facebook. A esto hay que sumarle la natural resistencia al cambio y las habituales quejas de los usuarios cada vez que algo se modifica. Un dato interesante: el 86% de los usuarios está disconforme cada ves que Facebook cambia algo de lugar.

Pero manterse tal como está no parece ser una alternativa razonable para Facebook. En definitiva, Timeline es una apuesta por naturalizar el flujo de información alrededor de una línea del tiempo donde el viejo formato de “caja de texto enriquecida” que aporta el muro queda superado por un ecosistema de datos donde la información luce más integrada y relacionada entre sí.

Habrá que esperar para saber si la nueva apuesta tiene éxito.

Guías de estilo sobre interfaces de usuario

Sebastián Thüer — Thu, 12 May 2011 13:00:00 +0000

En el campo de comunicación los documentos sobre cómo confeccionar un producto son una constante. Desde la investigación científica -donde suele haber estrictos formularios para completar con el fin de pedir subvenciones y ayudas- hasta la práctica periodística y la comunicación visual.

En general, el objetivo detrás de estas guías es establecer una serie de pautas comunes que garanticen un mínimo de calidad y, a la vez, permitan estandarizar prácticas y consolidar la información en grandes organizaciones.

En las interfaces de usuario hay muchas cuestiones que resolver que a veces no están tan a la vista para quienes no trabajan en esta área ¿Debo mostrar el botón de aceptar a la derecha o izquierda? ¿En qué casos abro una nueva ventana y cuándo muestro la información dentro de la actual? ¿Hay alguna restricción sobre el tamaño de las imágenes? ¿De qué tamaño son los iconos?

Las grandes empresas tienen normas estrictas acerca de cómo deben lucir las aplicaciones, plugins o software que se ejecute dentro de sus sistemas. En The UX Bookmark han recopilado una lista bastante exhaustiva sobre guías de estilo para diseñar interfases gráfica y de usuario. Apple, BBC, BlackBerry, Cambridge University, Microsfot, Nokia, Yale University y Yahoo son algunas de las organizaciones que integran esta lista.

La utilidad de esta guía no reside solamente en decirnos cómo diseñar para tal o cual sistema o plataforma, sino para analizar como se han sistematizado un conjunto de prácticas relacionadas con el diseño de interfaces y, si interesa, servir cómo punto de partida para construir nuestra propia guía.

A huge list of Style Guides and UI Guidelines

Anatomía de una landing page perfecta [infografía]

Sebastián Thüer — Sat, 12 Mar 2011 13:00:00 +0000

Técnicamente se conoce las “landing pages” (páginas de aterrizaje es una traducción horrible) es la página de entrada del usuario a nuestro producto o servicio. Normalmente, llega aquí luego de haber hecho clic en un aviso, resultado de Google o enlace publicado.

Hay muchas técnicas para persuadir usuarios y generar confianza pero todo puede arruinarse si no hay un buen diseño que permite ver con claridad cuál es la propuesta, su valor diferencial y permitir realizar la acción del usuario de forma rápida y efiza.

Esta infografía analiza algunos de los elementos más comunes de este tipo de páginas a la cual hay que prestarle especial interés porque de ella dependen que muchos empleados de empresas con negocios en la web cobren su sueldo a fin de mes.

Vía KissMetrics.com

Ubicación y diseño de botones en cuestionarios online

Sebastián Thüer — Thu, 10 Mar 2011 19:00:35 +0000

En apariencia, ubicar un par de botones debajo de una encuesta para continuar o retroceder es una decisión sencilla. Tiempo atrás publicaba un post sobre la usabilidad y los botones atrás / adelante donde cuestionaba la solución que una prestigiosa consultora había implementado: ubicar el botón de siguiente a la izquierda, en lo que parece un lugar anti natural y extraño.

Ahora llega la evidencia a través de un estudio elaborado por Mick Couper, de la Universidad de Michigan y Reg Baker, de la consultora Market Strategies International. Los investigadores publicaron el artículo Placement and Design of Navigation Buttons in Web Surveys donde reconocen que la simple ubicación de estos botones es un tema de discusión y que hay muchas diferencias de criterio.

La decisión más habitual es colocar el botón siguiente a la derecha. Así lo hacen los navegdores web, los buscadores como Google y es normalmente como se paginan las pantallas en la web. Colocar el botón siguiente a la izquierda sigue otra convención: seguir los lineamientos de la interfaz de Windows que siempre coloca la opción más habitual sobre este lado.

Una tercera posibilidad es ubicar ambos botones alineados a la izquierda uno debajo de otro. Finalmente, la cuarta variante es directamente ocultar el botón de atrás lo cual anula la posibilidad que el usuario corrija sus respuestas.

En total, las cuatro opciones habituales son estas:

Siguiente a la derecha, Anterior a la izquierda

Siguiente a la izquierda, Anterior a la derecha

Siguiente y Atrás a la izquierda con Atrás al final

Siguiente a la izquierda, sin botón Atrás

El estudio

A partir de los objetivos del estudio y del análisis de investigaciones previas los autores presentaron 5 alternativas diferentes para el colocar los botones en formularios online:

Botón Atrás en el extremo derecho, Siguiente en el extremo izquierdo
mbos botones alineados a la izquierda, primero opción Siguiente
Botón Siguiente a la izquierda, Botón Atrás a la izquierda debajo de Siguiente
Botón Siguiente a la izquierda, Botón Atrás a la izquierda con hipertexto
Ambos botones alineados a la izquierda, primero opción Atrás

El estudio empírico se realizó a través de un muestreo no probabilítisco entre usuarios mayores de 18 años en los Estados Unidos. A ellos se les solicitó que contestaran unas preguntas relacionadas con el consumo de energía. Utilizaron 3 herramientas online diferentes con un total de 1800 respuestas, 600 por cada una.

Los resultados que encontraron los investigadores se resumen en la siguiente tabla (clic para ampliar la imagen):

Tabla comparativa de resultados por variantes.

Conclusiones

En primer lugar, parece no haber diferencias significativas en el tiempo que emplean los usuarios según la diferente distribución de botones. No se pudo verificar que colocar la opción Atrás en un hipertexto para hacerla menos visible sirviera de algo. Por el contrario, la opción 5 registró el menor tiempo.

En segundo término, sí se observaron diferencias entre la cantidad de personas que usan la opción de volver según donde se ubique el botón Atrás. En los 2 primeros casos 1 de cada 5 usuarios usó la opción de volver. En cambio, en los casos restantes el uso cayó a menos de 1 cada 10.

La opción ganadora.

En síntesis, el estudio no permite establecer diferencias sustanciales según la ubicación de los botones. No obstante, hay que tomar nota que los usuarios que participaron del estudio están habituados a responder encuestas online. De todas maneras, la opción más razonable parece ser ubicar ambos botones alienados a la izquierda siguiendo el orden lógico de situar primero Atrás y luego Siguiente.

Estudio original: Placement and Design of Navigation Buttons in Web Surveys. Gracias a Sergio Ortega por el enlace.

Consejos para mejorar la usabilidad en el envío de formularios online

Sebastián Thüer — Thu, 10 Feb 2011 11:00:00 +0000

Los formularios suelen ser el talón de Aquiles en la usabilidad de muchos sitios web. Después de una página clara, atractiva, bien organizada y de fácil lectura suele venir un formulario que no siempre tiene el mismo esmero que el resto del sitio.

En Six Revision dan 10 consejos de usabilidad para enviar formularios por la web con recomendaciones muy sencillas y, la mayoría, que se puede implementar sin grandes complicaciones. Aquí va la lista:

Marcar claramente los campos requeridos
Proporcionar mensajes amigables y claros en caso de error.
Usar validación por JavaScript del lado del cliente
Marcar el campo que se encuentra activo para ayudar al usuario a saber dónde está.
Si hay varias páginas, mostrar claramente el proceso.
Guardar o cachear los datos ingresados por el usuario regularmente
Cambiar el texto “Enviar” por algo más directo y atractivo.
No usar el botón “Cancelar”
Mostrar claramente al usuario el formato de entrada de los datos (especialmente las fechas)
Mejor formulario de una columna en lugar de dos.

¿Que otras cuestiones tenés en cuenta para tus diseños? ¿A qué aspectos de usabilidad prestás más atención en el diseño de formularios? Tus comentarios son bienvenidos.

La usabilidad en dispositivos táctiles

Sebastián Thüer — Thu, 02 Dec 2010 21:00:06 +0000

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:

Utilizar eventos estándard
Evitar eventos hover
Evitar controles indirectos
Áreas de interacción mayores
Lo que no ve el usuario
Considerar dónde interactúa el usuario para situar los elementos adecuadamente
Considerar la posisión del dedo al poner mensajes
Tener en cuenta el contexto
Mejor el scroll que las capas
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

Ejemplos de diseño de formularios de registro

Sebastián Thüer — Fri, 19 Nov 2010 14:19:41 +0000

Los formularios de registro son imprescindibles para cualquier sitio o servicio 2.0. La clave es mantenerlos tan sencillos como sea posible, minimizar la información solicitada y, a la vez, no renunciar al estilo personalidad que refleja del sitio del sitio web en su conjunto.

En DJ Designer Lab han recopilado 25 buenos ejemplos de formularios de registro e inicio de sesión que siempre viene bien para inspirarse, aprender y encontrar elementos resulten de utilidad.

25 Cool Sign Up and Login Form Designs

Si te interesa más el tema podés consultar la serie de post anteriores sobre Patrones de diseño para registro de usuarios basado en un trabajo de Adaptative Path:

Mi tesis sobre diseño web

Sebastián Thüer — Thu, 16 Sep 2010 10:30:03 +0000

“El Departamento de Ciencias de la Comunicación en Red: Análisis y propuestas para el desarrollo de un sitio web” es el título de mi tesis de licenciatura en la carrera de Ciencias de la Comunicación que estoy recuperando del olvido gracias a que una limpieza despositó en mis manos el CD con los archivos originales.

La web cambió mucho desde que realicé la tesis donde la dificultad básica consistía en encontrar algo de bibliografía donde las propuestas de diseño web no fuesen solo una cuestión técnica. Recuerdo fundamentalmente dos libros que vinieron a mi auxilio y me ayudaron mucho: Producción y diseño gráfico para la World Wide Web de Antonio Fernández-Cocca y Usabilidad, Diseño de Sitios Web de Jacob Nielsen.

Mucho ha cambiado en la web desde entonces. Los blogs prácticamente no existían, las redes sociales no habían nacido y el diseño web estaba limitado enormemente por la secuela de la “guerra de navegadores” donde cada quien intentó imponer su estándar. Evidentemente, mucha de la bibliografía ha sido superada pero, sin embargo, creo que el trabajo todavía puede tener algún valor por la propuesta metodológica de análisis y la identificación de las etapas del proceso de diseño web.

El texto está bajo licencia Creative Commons Reconocimiento-No comercial 2.5 de Argentina que, en pocas palabras, permite el uso libre del texto siempre que se atribuya la autoría correctamente (enlace al PDF original y no republicarlo en otro sitio) y se utilice sin fines comerciales.

Descargar tesis diseño web (PDF)

Diseñando para WordPress 3.0

Sebastián Thüer — Tue, 18 May 2010 21:30:43 +0000

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.

Los datos en tiempo real no interesan a los usuarios en sus búsquedas

Sebastián Thüer — Thu, 11 Mar 2010 08:30:22 +0000

A finales del año pasado Google anunció la inclusión de la real-time web en los resultados de búsqueda de su página y fueron mucho quienes celebraron este cambio en el modelo. Especialmente Twitter, que acordó con Google y Bing ceder la información de las actualizaciones de estado de sus usuarios a cambio de USD $25.000.000. Sin embargo, para los usuarios la propuesta no resulta demasiado seductora por ahora.

La agencia de marketing One Up Web hizo un estudio de eye-tracking donde analiza cómo los usuarios responden a la inclusión de las actualizaciones de Twitter dentro de las páginas de resultados de búsqueda. El análisis de los datos muestra que los usuarios no prestan demasiada atención a esta información.

Twitter, un gorila en los resultados de búsqueda

Hay un estudio de percepción clásico donde se le pide a los espectadores que miren a un grupo de personas que se pasan un par de pelotas y cuenten la cantidad de pases que realizan. Entremedio, otra persona disfrazada de gorila cruza la escena. Solo un 10% de los observadores son capaces de advertir esta extraña presencia porque su atención está focalizada en un asunto específico y es “ciego” a lo que ocurre fuera de este punto de interés. Con Twitter pasa algo similar.

El estudio tomó a 44 voluntarios y los dividió en dos grupos: a) los que buscaban información sobre un producto que iba a adquirir próximamente; b) un grupo de control que buscaba la misma información pero sin intención de compra definida. Ambos grupos tuvieron la misma consigna y visualizaron las mismas páginas de resultados que proporciona Google. El resultado del test:

El grupo A tardó 1,77 segundos de media en fijar su atención en los primeros 5 resultados de búsqueda; y 12,02 segundos en detenerse los resultados de la real-time web.
El grupo B demoró 2,15 segundo en focalizarse en el top 5, mientras que empleó 10,94 para detenerse en los resultados en tiempo real.

En conclusión

La inclusión de la web en tiempo real dentro de los resultados de búsqueda fue anunciada por Google como un cambio importante dentro del paradigma de su página de resultados de diez enlaces. En una entrevista a The Guardian Marissa Meyer, vicepresidente de productos de búsqueda y experiencia del usuario, señaló:

“We think the real-time search is incredibly important, and the real-time data that’s coming online can be super-useful in terms of finding out whether – something like, is this conference today any good? Is it warmer in San Francisco than it is in Silicon Valley? You can actually look at tweets and see those types of patterns emerge, so there’s a lot of useful information about real-time interactions that we think ultimately will really affect search.”

Sin embargo, por ahora no parece tener un efecto decisivo entre los usuarios. Más aun, se calcula que un usuario tarda menos de 10 segundos desde que obtiene los resultados hasta que hace clic en algún enlace (ver informe en PDF). En consencuencia, la web en tiempo real no resulta relevante por el momento a la hora de traducir una buena posición dentro de Google en clics para obtener tráfico.

Vía: The Guardian
Quizás te interese: Twitter y las búsquedas de lo que está pasando ahora

¿Sirve un equipo de escritorio con touch screen para trabajar?

Sebastián Thüer — Tue, 02 Feb 2010 17:50:11 +0000

Es la base del nuevo iPad de Apple. La utilizan prácticamente todos los Smart Phones. La pantalla táctil o touch screen ofrece una experiencia de usuario única porque nos hace recobrar un contacto más directo y real con los diferentes dispositivos. Si el mouse nos obliga a una mediación física y simbólica, tocar botones o iconos es un modo mucho más natural de relacionarnos con el mundo que nos rodea. Así funcionan el teléfono, la televisión y prácticamente todos los electrodomésticos.

¿Pero podemos esperar que el touch screen se extienda y termine llegando a los equipos de escritorio? Es la pregunta que tiempo atrás se hacía Michael Arrington en Why Desktop Touch Screens Don’t Really Work Well For Humans y la conclusión es que a pesar de todas las ventajas que ofrece no resulta del todo cómodo: tener el brazo en alto constantemente cansa. Podría solucionarse emulando a los tableros de dibujo que usan arquitectos en ingeniero, que trabajan con una inclinación de 45 grados. De esta forma, los brazos pueden estar apoyados y descansar mejor.

Pero enfrentamos otro inconveniente: que el dispositivo de salida y entrada de datos sean físicamente lo mismo significa que mientras operamos la pantalla nuestra vista está parcialmente obstaculizada. Mientras el puntero del mouse es pequeño, discreto y apenas ocupa lugar, nuestros dedos son bastantes más grandes y si cruzamos los brazos delante de los ojos tendremos la vista obstruida.

Touch Screen

No hay duda que para determinadas tareas una pantalla touch screen resulta muy cómodo. Por ejemplo, cuando se usa la computadora como terminar de punta de venta (TPV) y se repite muchas veces una secuencia breve: así lo hacen algunos bares, restaurantes, tiendas de ropa y locales comerciales. También es bastante interesante para apuestas y juegos estilo póquer o casino en línea.

Pero, ¿qué pasa cuando el usuario debe trabajar mucho tiempo delante de la pantalla y además de comodidad se busca productividad? Para un determinado tipo de sistemas simbólicos como mapas, álbum de fotos, reproducción de videos y música una pantalla táctil ofrece una experiencia inigualable. Pero para trabajar, parece que todavía necesitamos de los teclados.

C. Miller de 10/GUI explora algunos de estos problemas en un video de 8:30′ genial que puede servir para discutir y dar vueltas sobre el tema de las pantallas táctiles.

Conocé tus contenidos más visible con Google Browser Size

Sebastián Thüer — Thu, 17 Dec 2009 21:30:36 +0000

Google sigue sacando herramientas para optimizar sitios web y ahora es el turno de Google Browser Size que hace algo muy simple: te muestra tu sitio web y por encima una capa semitransparente con el porcentajes de usuarios que ven el contenido basado en la resolución de los navegadores y la cantidad de gente que hace scroll.

Captura de Google Browser Size

El concepto es bastante sencillo y viene de la época del diseño de diarios. Tradicionalmente la mitad de arriba es el espacio privilegiado donde está el titular principal y toda aquella información que se considera que puede atraer al lector. Esto es porque los diarios, especialmente los formato sábana, se exhiben doblado a la mitad.

Trasladado a la web sería que la parte más importante del contenido es aquella que se encuentra visible sin que haya necesidad de usar las barras de desplazamiento. Google utiliza las estadísticas que obtiene de las visitas a la página principal de su sitio y a partir de ahí estima qué porcentaje de usuarios llegan a ver el contenido que se encuentra fuera del área que muestra por defecto el navegador.

Por ejemplo, el contenido que se ve desde entre los 600 pixeles de ancho y los 350 de alto es visto por el 99& de los usuarios, pero si superamos los 800 pixeles de ancho el porcentaje baja hasta el 90%. En el blog de Google hay más información y cuentan como pudieron aumentar las descargas de Google Earth con solo subir el botón que dice “Download” 100 pixeles hacia arriba.

La herramienta está buena pero en mi opinión el tema es un poco más complejo. Que el usuario tenga que hacer scroll no significa que el contenido sea invisible, influye mucho el diseño y cómo se ha organizado al espacio para mostrar al usuario que hay más cosas interesantes cuando mueve la barra de desplazamiento. Y para aquellos que digan que hacen faltan datos para sostener esta afirmación aquí va un artículo intereante: The myth of the page fold: evidence from user testing.

Importante: No hay que confundir este herramienta de Google que se basa en probabilidades con el eyetracking que mide dónde efectivamente miran los usuarios.

Google Chrome OS: Un modelo de interacción mínimo para maximizar la web

Sebastián Thüer — Fri, 20 Nov 2009 23:41:34 +0000

Nueves meses después de lanzar su navegador Google anunciaba que iba a extenderlo hasta transformarlo en un sistema operativo. Un sistema rápido, liviano, de código abierto y pensado para personas cuyo día a día transcurre en la web. Hoy ese día llegó.

Google Chrome OS fue anunciado oficialmente ayer aunque en realidad no han hecho más que liberar el código base y, algo que resulta muy interesante, poner en marcha un projecto para definir la intefaz de usuario y el diseño. Estas dos últimas áreas se están transformando en un punto crítico: en general, hay problemas de usabilidad en el software libre.

Interactuando con Chrome OS

Para hacerse una idea de cómo funciona el sistema lo mejor es visualizar este video que no llega a los 2 minutos, donde nos explican el modelo de interacción con el usuario que escogió Google.

¿Qué es Chrome OS? Básicamente, un navegador extendido. A nivel de usuario lo primero que llama la atención es la ausencia de un escritorio. Tampoco hay barra de tareas ni la posibilidad de trabajar con ventanas solapadas.

La interacción básico con Chrome OS

La metáfora clásica del escritorio queda de lado y en el lugar central lo ocupa la ventana del navegador. Esta ventana contiene pestañas y un conjunto de iconos que ofrecen acceso directo al correo (Gmail), creación de documento (Google Docs) y calendario (Google Calendar).

El botón de inicio en Chrome OS

El botón de inicio nos muestra una serie de servicios que funcionan sobre la web. En pocas palabras, conceptualmente Chrome OS es el envoltorio natural para el ecosistema de aplicaciones de Google.

Tampoco hay barra de tareas. Las tareas que se ejecutan en segundo plano se muestran a través de paneles flotantes o partiendo la pantalla, como vemos en la siguiente imagen.

Paneles flotantes para aplicaciones en segundo plano

El concepto de ventanas se redefine. Por defecto el área de trabajo está maximizada y no es posible solapar dos ventanas. En realidad, podría definirse a cada ventana como un conjunto de pestañas del navegador agrupadas entre sí y a la cual podemos acceder a través de la tecla TAB, tal como cambiamos de ventanas en los sistemas operativos de escritorio tradicionales

Las limitaciones del modelo de interacción

Google Chrome OS es un sistema operativo para trabajar sobre la web. Si no, hay pocas cosas (o nada) para hacer. Como dice Antonio Ortíz, se trata un sistema operativo capado que impide ejecutar cualquier cosa que no sea un navegador.

Para quienes trabajan sobre la web presenta muchas ventajas: velocidad (afirman que puede arrancar en 7 segundos), estabilidad y una austeridad total que permite concentrarse en lo que realmente importa: la interfaz de la página web. De hecho, el diseño de Chrome OS se ha reducido a un mínimo de elementos imprescindibles donde lo que realmente importa son los controles que ofrece la aplicación web.

Esta filosofía calza perfectamente para el uso que se puede hacer de una netbook: leer el correo, buscar información, escribir un documento o realizar una edición básica de fotografías. Sin embargo, aunque Chrome OS puede correr en cualquier equipo de escritorio no parece muy razonable instalar este sistema operativo cuando no va a aprovechar los recursos de hardware que se dispone. Para cualquier trabajo semi profesional con imágenes, videos, programación o diseño todavía no hay aplicaciones web maduras y parece bastante improbable que tengamos un Photoshop online en poco tiempo.

Los próximos pasos de Chrome OS

Se espera que Chrome OS esté disponible para el consumidor final recién a mediados de 2010. Solo funcionará sobre una serie de equipos previamente seleccionados y aprobados por Google. aunque en TechCrunch acaban de publicar unas sencillas instrucciones para ejecutar Chrome OS en una PC con Windows.

Tampoco se prevee lanzar una página para descargar aplicaciones como exitoso App Store para el iPhone o utilizar el modelo de descarga de aplicaciones de código abierto que emplea el Google para Android.

En lugar de competir con los sistemas operativos existenes Google está buscando su propio nicho: el de las personas que viven su día a día en la web. Y aunque podamos objetar que no hay mucho para hacer con Chrome OS fuera de la red, no se trata de un mercado menor.

Los 7 pecados capitales de la usabilidad web

Sebastián Thüer — Wed, 18 Nov 2009 09:10:31 +0000

La usabilidad es un aspecto clave de una página o aplicación web que tiene que ver con la claridad y elegancia con la cual se diseña la interacción entre la persona y el sistema. Muchos veces los estudios de usabilidad son campo exclusivo de especialistas que realizan análisis heurísticos, paneles con usuarios y a partir de los resultados diagnostican problemas y sugieren mejoras a implementar.

Sin embargo, no hace falta nada de esto para desterrar algunas prácticas totalmente obsoletas que atentan contra la experiencia del usuario en una página web. Estos 7 pecados de la usabilidad web son una lista de estas prácticas e indican que tu sitio necesita urgentemente una revisión. El problema no es tanto cometer alguna de estas faltas, su presencia indica que con toda seguridad habrá muchas otras cuestiones a revisar.

1. Tener una introducción al sitio

Cuando encargaste la página web probablemente te lo dijeron pero no le diste importancia. Por alguna misteriosa razón querías que tu sitio tuviera una bonita animación en Flash como primera página ¿Qué la gente la aburre? Entonces agregamos el botón para saltar la presentación.

Seguramente sea el botón que más presionan los usuarios en tu sitio. Y con toda certeza sea la página más odiada por aquellos que tienen que acceder a tu web repetidamente. Es como ver una película con publicidad cuando está la opción de verla sin interrupciones. Una animación puede ser bonita la primera o segunda vez, luego cansa y termina por fastidiar aunque merezca un Oscar por el trabajo que tiene.

Cuando la comunicación tiende a circular en tweets de 140 caracteres hacerle perder el tiempo a la gente mirando una página innencesaria es un anacronismo. Hasta Google ofrece la posibilidad de saltarla porque entiende que una introducción en Flash no representa un resultado de búsqueda relevante. Y tiene razón.

2. Poblar tu página de animaciones

El diseño y la gráfica tiene sus leyes para que la interacción con un documento visual resulte agradable. La animación también cuenta con sus propias reglas y muchas las veces resulta difícil su convivencia. Hay que trabajar mucho para animar dos o más objetos en una página y hacer que el conjunto sea agradable para el usuario. Y como el tiempo cuesta dinero existe una alta probabilidad de que si tu página tiene más de un elemento animado se vea mal.

Comencemos por el principio ¿Animar para qué? Una transición de fotografías puede aportar valor porque permite visualizar información dentro de un mismo espacio de una manera sencilla. Pero si tu logo está fijo o animado en 3D me da exactamente lo mismo. Si hay un personaje saltarín, un puntero de mouse que suelta estrellas o el insufrible icono de correo que da vueltas a lo loco molestan, distraen y terminan por entorpecen la experiencia del usuario.

Un espacio prolijo y ordenado donde todos los elementos están bajo control y sin ser animados por un espíritu superior que les insulfa vida es un deleite para la vista y un relax para los sentidos.

3. Texto subrayado que no es enlace

El texto subrayado es feo. Habiendo tantos recursos gráficos (color, tamaño, negrita, itálica) querer remarcar una palabra agregando el subrayado como si se tratara de un resumen para la escuela es volver a la época de la máquina de escribir.

Pero hay otro problema más grave: cuando se crearon las páginas web a alguien le pareció que era una forma interesante para señalar el hipertexto. Nada más que agregar. El subrayado es para los enlaces y punto.

4. Optimizado para…

En una época el oficio de diseñador web era duro. Era una profesión nueva, había poca información y encima Microsoft y Netscape se peleaban para ver quién lograba imponer sus estándares. Crear una página bonita que se viese bien en todos lados era un poco más difícil que ahora por lo cual los sitios se poblaron de carteles anunciando que había unas condiciones óptimas para visualizarlo: con el navegador fulanito y la resolución de pantalla pepito.

Pero el mundo cambio, la industria y los desarrolladores se dieron cuenta de que era mejor seguir los estándares del W3C antes que pelearse y gracias a ello hoy vivimos en un ambiente un poco más ordenado. Por eso, las páginas web ya se hacen para todo el mundo y no para quienes tienen tal o cual requerimiento. Seguir manteniendo el cartel dichoso cartelito o (peor) hacer que el sitio funciona solo bajo ciertas condiciones es como colocar una letrero en una ruta que diga “Optimizada para el Ford Fiesta”.

5. Tiempo de carga elevado

La paciencia es una virtud, pero en la web es un milagro. La velocidad de respuesta de un sitio es un factor crítico en la experiencia del usuario. Más de 2 segundos con la pantalla en blanco es una invitación a retirarse del sitio o un preanuncio de las penurias que tendremos para navegar decentemente. Y por si fuera poco, próximamente Google tendrá en cuenta la velocidad de una web para mostrar sus resultados de búsqueda.

Hay muchos factores involucrados en la velocidad de la página pero hay dos sobre los que se pueden actuar. El primero no es más que tomar una buena decisión: contratar un hosting decente y no dejarte seducir por precios ridículos o películas de ciencia ficción como la banda ancha ilimitada. El segundo es trabajo para el diseñador o desarrollador que tiene que optimizar el rendimiento de la página web.

Hay veces en que por las características de la página es imposible ofrecer un tiempo de respuesta bajo como consultas complejas a una base de datos, accesos imágenes y archivos multimedia de gran tamaño o mucho javascript. En este caso, y sólamente cuando sea imposible mejorar la velocidad de la página, un simple cartel de “Cargando” nos da unos segundos extra de benevolencia por parte del usuario (siempre y cuando lo que viene después justifique el tiempo invertido).

6. Ir al inicio y volver

Enredarse en un laberinto puede ser divertido, pero en una web es frustrante. Los usuarios saben de memoria la solución para ello: volver a atrás o ir al inicio. El botón volver del navegador es una salida de emergencia fácil, intuitiva y que resuelve la mayor parte de los problemas: si llego a un lugar que no me gusta siempre tengo la opción de regresar para elegir otro camino. Obstruir esta salida (con javascript, por ejemplo) es inadmisible.

El otro gran recurso que incorporan los usuarios cuando están confundidos es regresar al inicio de la página. A veces los usuarios llegan desde Google a una página en particular pero no logran hacerse una idea correcta de cómo está organizada la web. Suponen que la home mostrará lo más importante y les ayudará a entender cómo está organizada la información. Por eso es esencial tener a mano una manera clara e inconfundible de cargar la página principal del sitio. Y la manera más clara es tener un botón o texto que diga “Inicio”.

7. Enlaces rotos

Los enlaces son la columna vertebral de un sitio. Conectan unidades de información mediante palabras clave, botones, imágenes o un menú. Una página huérfana que no enlaza con el sitio es una invitación sin fecha ni lugar. Igual un enlace que lleva a ninguna parte.

La mejor página de error es la que no existe, pero como a veces en sitios muy grandes no podemos asegurar que el 100% de los enlaces funciones hay algunos recursos para crear páginas de error personalizada. Si hay un mensaje de error, que al menos sea personalizado y fácil de comprender.