• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Usabilidad

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

Sebastián Thüer · 20.11.2009 ·

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 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 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
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 · 18.11.2009 ·

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

usabilidad-1-intro

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

usabilidad-2-animado

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

usabilidad-3-subrayado

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…

usabilidad-4-optimizado

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

usabilidad-5-tiempo

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

usabilidad-6-atras

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

usabilidad-7-links

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.

10 consejos prácticos de usabilidad para diseñadores web

Sebastián Thüer · 30.09.2009 ·

10 consejos prácticos de usabilidad para diseñadores web
10 consejos prácticos de usabilidad para diseñadores web.

Smashing Magazine ha publicado una lista increíblemente útil con 10 consejos prácticos de usabilidad para diseñadores web. Muchas veces he visto estudios de eyetracking o conclusiones de cuestionarios de usabilidad pero no siempre los resultados obtenidos son generalizables. Pero en este caso es diferente.

Dmitry Fadeyev, del excelente blog Usability Post, hace una lista donde propone una serie de acciones concretas para mejorar la usabilidad de cualquier página web. Aquí va el listado en cuestión con algunos breves comentarios:

1. Las etiquetas de los campos, mejor arriba.

Según un estudio de UX Matters el mejor lugar para colocar la etiqueta es arriba del propio campo. La mayoría de los formularios las sitúa a la izquierda, pero parece ser que el recorrido natural es leer un formulario de arriba hacia abajo.

2. Hacer foco en las caras.

Otro  estudio: los usuarios centran su atención sobre los rostros de las fotografías, según informa Usable World. Por eso es importante hacer que la dirección de la mirada se relacione con el contenido de la página y así desviar la mirada del usuario hacia el titular o texto que nos interesa.

3. La calidad del diseño es un indicador de credibilidad.

Simple, contundente y casi de sentido común: el diseño de calidad inspira confianza. Hay varios estudios que así lo indican y (1, 2 y 3). Recuerdo que hace bastante tiempo leí un estudio sobre la credibilidad de la prensa y afirmaban que errores aparentemente intrascendentes -como un error tipográfico, por ejemplo- terminan por afectar la credibilidad del medio. No hay razón para pensar algo distinto de la web: una empresa que comunica su producto o servicio con claridad está un paso por delante de quien conserva un diseño confuso.

4. Los usuarios no hacen scroll.

En el primer libro de usabilidad que leí uno de los aspectos que más se comentaba era aprovechar la parte superior de la página y colocar allí la información esencial del sitio ¿La razón? Muchos usuarios (cerca del 70%) no se molesta en hacer scroll para descubrir si debajo hay algo interesante. Algunos han malinterpretado esto y abarrotaron la parte superior de información. Sin embargo, la idea es ubicar aquí sólo lo indispensable de manera clara y legible. Fadeyev propone tres elementos: nombre del sitio, proposición de valor (value proposition) y enlaces para navegar las principales secciones.

5. El azul es el mejor color para los enlaces.

Siempre me pareció demasiado categórica esta afirmación pero tengo que aceptar que cualquier usuario que haya navegado un par de veces por la web reconoce fácilmente el texto azul y subrayado como un enlace. Google lo sigue haciendo y si no existe ningún criterio estético que justifique hacer lo contrario, mejor dejarlo así.

6. Cajas de búsqueda de 27 caracteres.

Tener un campo de búsqueda amplio ayuda visualizar nuestra consulta al buscador sin tener que desplazarnos. Según un estudio en promedio las cajas de búsqueda tienen 18 caracteres pero la longitud de la consulta es de 27. Recientemente también Google aumentó el tamaño de su caja de búsqueda.

7. Los espacios blanco mejoran la comprensión.

Todo diseñador conoce la importancia de un adecuado balance y contraste visual. Los blancos son zonas de descanso visual y constituyen el elemento visual más sencillo y claro para separar áreas.

8. El testing de usabilidad no necesita muchos usuarios.

Cuando pensamos en estudios de usabilidad tal vez tengamos en mente los criterios de la estadística para seleccionar una muestra de nuestro universo. Sin embargo, según un estudio de Nielsen el 85% de los problemas de usabilidad se pueden diagnosticar con un pequeño grupo de no más de 15 usuarios.

9. Las páginas de productos con información ayudan a destacarte.

Con la premisa de que los usuarios no leen en pantalla muchos sitios obvian información importante que es necesaria para la toma decisiones. Sin bombardear al usuario de datos técnicos o jerga específica, hay que procurar brindar toda la inforamación relevante sobre un producto o servicio de manera digerible. La página del iPod lo hace muy bien, por ejemplo.

10. Casi todos los usuarios son ciegos a los avisos.

La peor manera de promocionar algo en tu propia página es crear un banner. La mayoría de los usuarios ignora esta información y directamente no mira esta zonas de la página. Mejor emplear un formato diferente y usar recursos más creativos.

  • Si te gustó el listado y querés conocer más detalles te recomiendo el post original que además incluye un pequeño bonus:  10 Useful Usability Findings and Guidelines

¿Qué debe saber un diseñador web?

Sebastián Thüer · 17.06.2009 ·

que-debe-saber-un-diseñador-webCada tanto alguien me dice que quiere ser diseñador o desarrollador web y me pregunta por dónde comenzar. No es fácil responder porque el diseño web como disciplina no tiene unos límites claros y, además, los perfiles de quienes quieren acercarse a ella varían enormemente: puede ser un programador, un diseñador gráfico o simplemente un entusiaste que quiere hacerse la página de su empresa u organización.

Se puede salir del paso diciendo frases genéricas como “hay que estar abierto a aprender de forma constante”, “hay que tener espíritu autodidacta” o “son muchas horas detrás de la computadora”, pero esto en realidad no sirve de mucho más que para esquivar con relativa elegancia el interrogante.

Creo que una forma adecuada para encarar la cuestión es tratar de identificar diferentes perfiles que abarquen las actividades más habituales que se suelen realizar hoy en día, a cada una de las cuáles les corresponde una serie de conocimientos y competencias específicas. [Leer más…] acerca de ¿Qué debe saber un diseñador web?

21 recursos para tus páginas de error 404 personalizadas

Sebastián Thüer · 06.04.2009 ·

error 404

Hacer un par de días fue 4 de Abril o 4.04, una fecha curiosa para los desarrolladores web que recuerda el código de error 404 que devuelve un servidor al no encontrar un recurso. El error 404 es una de las páginas más odiadas por los usuarios porque significa que el webmaster ha puesto mal un enlace o algo ha fallado al intentar acceder a un recurso web.

Tiempo atrás había comentado la forma de crear páginas de error personalizadas con un widget de Google. Es una de las opciones posibles porque hoy existen muchas herramientas para hacerlo. Además de darle un toque profesional al diseño, una página de error personalizada puede ser una oportunidad interesante para generar algún tipo de complicidad con el usuario. Todo depende del público al que nos dirigimos y de las características del propio sitio.

Para estar a tono con la fecha, aquí dejo una lista con distintos recursos para tener una página de error más profesional, algunos ejemplos de inspiración y también un par de curiosidades. [Leer más…] acerca de 21 recursos para tus páginas de error 404 personalizadas

  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder