Posts en la categoría 'diseño de interacción'

estandarizando interacciones incorrectas?

Del artículo sobre AJAX y diseño de interacción de Luke Wroblewski, (muy recomendable su lectura) me quedo con la cita:

we run the risk of “standardizing” non-optimal interactions: not confirmed with user testing and not leveraging years of client application design.

parecer más rápido

La importancia de la velocidad de carga de los sitios web para la experiencia de los usuarios es indiscutible. El debate gira en torno a cuánto tiempo están dispuestos a esperar los usuarios a que cargue un sitio y, aunque existen diversos estudios, no parece existir un consenso sobre este dato, si bien parece claro que el tiempo de espera tolerable por los usuarios se situa bastante por encima de los famosos 10 segundos del tío Jakob.

Habitualmente, los buenos diseñadores web se esfuerzan en minimizar el código XHTML, reducir el peso de las imágenes al máximo y otras diversas técnicas de optimización de sitios web. Pero existen otros factores influyentes que no son habitualmente considerados:

El tiempo de carga percibido

Dos páginas con el mismo tiempo de carga real pueden ser percibidas por los usuarios como una más rápida que otra. Existen muchas formas de influir en esta percepción y es realmente esta variable la que valorarán los usuarios.

Evitar que los elementos varien su posición durante la carga (para que el usuario pueda empezar a ojear aquellas zonas ya cargadas), permitir la descarga progresiva de los gráficos e imágenes, ofrecer un adecuado feedback durante la espera, ofrecer contenido de interés durante la carga (interesante para contenido realizado con flash), cargar primero aquella información que suelen venir buscando los usuarios y otra técnicas de este estilo, pueden ayudar a reducir el tiempo de espera percibido y/o hacerlo más llevadero.

La experiencia de uso comienza mucho antes de que el sitio haya terminado de cargar

Al igual que nuestra experiencia con un nuevo producto comienza desde el momento que tenemos el paquete en nuestras manos y no cuando ya lo estamos utilizando, nuestras experiencias con los sitios podemos considerar que comienzan desde el momento en que tecleamos la url en nuestro navegador. Por este motivo, debemos facilitar el que nuestros sitios puedan ser usados sin necesidad de que hayan cargado por completo.

Un ejemplo concreto: un usuario trata de encontrar una imagen en la que aparece un determinado personaje en una galería de 20 imágenes que se muestran a un tamaño considerable, en esta situación, un simple texto alternativo suficientemente explicativo en cada imagen sería de muchísima utilidad y le permitiría buscar la imagen sin necesidad de esperar a que hayan cargado todas.

iPod vs. The Cassette

Una divertida comparativa entre el revolucionario iPod y la tradicional cinta de audio.

dibujo hecho a mano de un ipod y una cinta de audio

Modernidad frente a frikismo… ufff, me cuesta decidir.

palette: exploración del color para diseñadores de información

Una de las partes más duras cuando te enfrentas a bocetar el diseño de una página web es la elección de la gama de colores.

Y, aunque hay buenas recopilaciones de recursos para generarlas, hace unos días Jose me desubrió Palette, una pequeña aplicación de la diseñadora (de interacción e información) Joanna Wiebe (fundadora de OneMind).

logotipo del programa y una gama cromática generada

El programa, además de generar gamas cromáticas que me han gustado mucho, recopila 10 consejos sobre el uso del color que no está de más recordar, además de una sección de enlaces con recursos sobre el tema.

interacción sitio usuario

Una sana costumbre de ávidos es leer artículos de diseño web en voz alta en el coche, de vuelta a casa.

Ayer Jose descubrió bíguel, un blog sobre usabilidad y experiencia del usuario, y volvimos leyendo uno de sus artículos: Midiendo la experiencia de usuario (fichero .zip)

Descubrimos un término interesante que acuñaba el autor del artículo: Interacción Sitio Usuario (ISU)

El concepto se deriva de una de mayor nivel: Interacción Persona Ordenador, IPO. Pero por considerar la interacción con la Internet un caso específico de tecnología con unas características que condicionan en gran medida la interacción con el usuario, los he creido conveniente separar.

La verdad es que me pareció un término estupendo. Quizá la interacción de los usuarios con la WWW merece ya un campo específico dentro de la IPO, y mucho más en el futuro.

sistemas de navegación

Los sistemas de navegación son una pieza de vital importancia para la experiencia del usuario de nuestro sitio web. Su aparente sencillez es lo que hace que a menudo olvidemos su importancia y descuidemos su elaboración.

Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos:

  • Establecer un modo de ir de un sitio a otro dentro de la web. La navegación debe ser clara, concisa, consistente y facilmente identificable dentro de la página.
  • Comunicar al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya.
  • Reflejar la arquitectura del sitio que subyace al sistema de navegación. Debemos diferenciar la navegación global, la navegación local o subsecciones y la navegación contextual.
  • Permitir volver a la página de inicio rapidamente. En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio.

un chiste sobre diseño de interacción

There are a widely told joke in the computer industry that goes like this: A man is flying in a small airplane and is lost in the clouds. He descends until he spots an office building and yells to a man in a open window, “Where am I?” The man replies, “You are in an airplane about 100 feet above the ground.” The pilot immediately turns to the proper course, spots the airport and lands. His astonished passenger asks how the pilot figured out which way to go. Te pilot replies, “The answer the man gave me was completely correct and factual, yet it was no help whatsoever, so I knew immediately he was a software engineer who worked for Microsoft and I know where Microsoft’s building is in relation to the airport.”

The Inmates Are Running the Asylum, de Alan Cooper

ley de Fitts

“el tiempo necesario para alcanzar un objetivo esta en funcion de la proximidad y tamaño del objetivo”

Ilustración del experimento original realizado por Paul Fitts en 1954

Uno de los principios generales del diseño de interacción es la llamada “ley de Fitts”. Ésta nos permite determinar el tiempo necesario para alcanzar un objetivo visual con cualquier dispositivo apuntador manual y demuestra que dicho tiempo depende del tamaño del objetivo y la distancia a la que se encuentre el puntero de él.

La ley de Fitts puede resultar muy obvia, ya que cualquiera entiende que un objetivo grande y cercano es mas fácil de alcanzar que uno pequeño y lejano. Pero lo más interesante de esta ley son las aplicaciones para el diseño de interfaces que se derivan de ella. Nos permite, por ejemplo, conocer las características de tamaño, posición y expresividad que debe poseer un objeto para que sea fácil interactuar con él, y en la actualidad se aplica en las interfaces de los sistemas operativos más utilizados.

Una de las afirmaciones derivadas de la ley es que los elementos situados en los bordes y esquinas de la pantalla son facilmente alcanzables, característica que utilizan casi todos los sistemas operativos (unos mejor que otros). Por ejemplo, en las guias de diseño de interfaz de KDE tienen esta ley en cuenta.

La ley de Fitts puede ser aplicada también para predecir el tiempo que se tardará en alcanzar un objetivo y, a partir de éste, calcular el llamado índice de dificultad. Esto permite que se puedan hacer comparaciones entre diferentes dispositivos apuntadores, determinando cuales son mejores para una determinada tarea. En 1991 se llevaron a cabo estudios para comparar distintos dispositivos para las tareas de arrastrar y de pinchar y concluyeron que si bien el ratón es más efectivo para pinchar, a la hora de arrastrar, el trackball resultaba un dispositivo mejor.

Las páginas web, como interfaces que son, pueden beneficiarse de las aplicaciones de la ley de Fitts, aunque muy a menudo vemos que no se tiene en cuenta. El ejemplo más comun del error es el uso de botones muy difíciles de pinchar por su reducido tamaño o porque no todo el área del botón es pinchable, sino que sólo se puede hacer click en el texto del botón.

Otro ejemplo de aplicacion a paginas web es la navegacion por resultados paginados. Normalmente, cuando una pagina devuelve resultados paginados (como hace google) se establece una navegacion que nos permite movernos por las diferentes paginas de resultados yendo directamente a una página de resultados concreta, a la siguiente o a la anterior. Los enlaces que suelen usarse para esta navegacion es comun que presenten este aspecto:
paginación encontrada en Softonic.com
En este caso el problema vuelve a ser el pequeño tamaño del area activa, que, junto a la cercanía entre enlaces, hacen que sea realmente difícil acertar sobre el enlace que queremos. Esto además tiene serias implicaciones sobre la accesibilidad del sitio, pues una persona con dificultades para manejar el ratón lo tendría muy difícil.

Un ejemplo de este mismo tipo de navegacion en el que se ha tenido en cuenta la ley de fitts es el siguiente:
paginación encontrada en Altaxarquia.com
En este caso se puede pinchar sobre todo el cuadro y no sólo solo los números y además la separación es mayor para reducir la probabilidad de fallos.

el tema podéis leer un genial artículo de Bruce Tognazzini y os recomiendo realizar este test on-line que además de ver cómo es el experimento os divertireis mucho ;)

Sobre blogold

blogold era un blog sobre desarrollo y estándares web, diseño gráfico, usabilidad, new media y ciberespacio.


Otros blogs de ávidos

ring
blog sobre desarrollo y usabilidad web para dispositivos móviles.
detalles
blog sobre diseño gráfico, ilustración, motion graphics y street art.
blog
noticias sobre los últimos movimientos y proyectos de ávidos.