Tentándole (interacción)

francisco tosete | usabilidad, interacción, diseño y arquitectura de información

histórico de posts

July 24, 2009

Innovando en Experiencia de Usuario de Gnome y sistemas operativos

Post actualizado: 25 de julio de 2009 (*)

(*) En Mozilla se están tomando francamente en serio lo de crear una auténtica comunidad internacional de investigadores. Acaban de llamar a la participación de Universidades y Facultades de todo el mundo para evolucionar el concepto de navegador y publicar los resultados bajo licencias abiertas.

–0–

Éstas son algunas de las razones por las que los sistemas operativos actuales deben evolucionar, en lo que a interfaz de usuario se refiere, de manera más decidida y arriesgada, y por las que para estar en la vanguardia del diseño de Experiencia de Usuario es estratégico y crítico para la supervivencia del modelo de negocio (seas una consultora o seas cualquier compañía que desarrolle software):

…con el fin de desarrollar y estimular la Inteligencia Competitiva de la empresa:

Me acabo de comprar un portátil con Windows Vista para mi trabajo diario, tengo un iMac de 24 pulgadas para el ocio y la edición profesional y en cuanto pueda me instalaré alguna versión de Linux.

De todos ellos aprendo interacción




Ubuntu, Compiz, VirtualBox & Windows XP - Watch today’s top amazing videos here

Realmente alucinante Compiz y extraordinarias algunas de las propuestas de la tormenta de ideas para mejorar la usabilidad de Gnome. NO dejéis de verlas. Desde luego que unas cuantas ideas para incorporar, rediseñar y mejorar Firefox me han venido a la cabeza. La siguientes son una selección de las que más me han gustado:

Ventanas 3D para el escritorio de Gnome
Ventanas 3D

Salvado de sesiones para Gnome
Salvar sesiones activas del sistema operativo

Copiar y pegar multiple para Gnome
Copiar y pegado múltiple

Mozilla ya tiene sus convocatorias. A ver cuando Microsoft, Apple, Google y demás actores tecnológicos crean las suyas propias, establecen premios para la innovación y desarrollan plataformas tecnológicas para dar un altavoz y un lugar a través del cual los usuarios puedan expresarse, generar contenidos, ser creativos, compartir sus ideas, investigar, innovar, y por qué no, desarrollar.

Estos premios pueden fomentar la excelencia en Experiencia de Usuario, y participar en este tipo de convocatorias y ganarlas puede suponer un fuerte handicap para cualquier diseñador de interacción, empresa o consultora tecnológica.

Guías de Diseño de Experiencia de Usuario y Diseño de Interacción para móviles y smartphones

Las siguientes son algunas de las principales guías de Experiencia de Usuario y Diseño de Interacción para teléfonos móviles, smartphones y dispositivos móviles que he encontrado hasta la fecha:

Cualquier otro recurso que conozcas es bienvenido.

July 21, 2009

Métricas para evaluar la importancia jerárquica informativa de los elementos o componentes de una página web

Todos hemos hecho benchmarkings. Están a la orden del día y son casi parte cotidiana de nuestro trabajo cuando comenzamos a acometer un nuevo proyecto de re/diseño de un web.

Medir la Experiencia de Usuario es posible. Y no sólo es posible, es necesario. En los últimos 8 años hemos asistido a una evolución espectacular de la World Wide Web. El propio Jakob Nielsen periódicamente revisa muchas de sus directrices para ponerlas al día conforme el desarrollo de la tecnología, del software, de los dispositivos, de las telecomunicaciones y de los estándares dejan obsoletas las que propuso años atrás. Si releyéramos Usabilidad: Diseño de sitios web a buen seguro que se nos escapaba alguna que otra sonrisa de lo allí escrito.

La Web evoluciona, y con ella debe evolucionar la Experiencia de Usuario. Cada vez es más usual y menos raro que nos toque acometer un rediseño de un rediseño de un web con la consiguiente reflexión de fondo que se nos plantea, tanto a los gestores que deben hacer las ofertas, como a nosotros como profesionales y expertos en Experiencia de Usuario que debemos aportar un alto valor añadido que debe ir más allá de una rearquitectura o un cambio profundo de interfaz para centrarse más en aspectos de productividad, eficacia, eficiencia, innovación, aspectos emocionales, etc…

Disponer de métricas en Experiencia de Usuario y dar el siguiente paso en el diseño va siendo cada vez más necesario. E insisto para los excépticos, es posible medirla, con mayor o menor rigor, de manera más casera o automatizada pero es posible comenzar a plantear métricas que nos ayuden a reflexionar por donde debemos acometer rediseños evolutivos y en dónde y cómo debemos insistir y centrarnos para mejorar una interfaz/web.

A continuación una plantilla que bien podría representar una página web. La línea roja marca el pliegue de pantalla -aquella porción que se ve desde el borde superior del área de visualización del navegador hasta el inferior. Está dividida en quinceavos (representados por las líneas grises) y a su vez, en tercios (líneas azules). Otras divisiones son posibles. Por ejemplo, una retícula en doceavos, tremendamente común en muchos de los sitios de la Web, da bastante más juego en cuanto a modularización por tener un mayor número de divisores.

Retícula en quinceavos para la evaluación de interfaces web
Retícula en quinceavos para la evaluación de interfaces web


Retícula en quinceavos para la evaluación de la web de Mozilla Addons en español

Las preguntas, ante un benchmarking o el análisis de una página o interfaz web única:

  • ¿Qué métricas podemos aplicar a la vista de esta retícula para establecer la importancia o jerarquía informativa (que no de interacción, que es otro aspecto que en su momento también tocará considerar) de sus elementos o componentes?
  • ¿Qué indicadores, aspectos o criterios se os ocurren que se han de tener en cuenta para realizar una evaluación objetiva de la interfaz y de sus componentes en función de la posición espacial que ocupen?
  • ¿Cómo evaluamos esa interfaz?

¿Ideas, sugerencias, métricas? ¿Qué se os ocurre?

July 19, 2009

Enriqueciendo la navegación horizontal y mejorando el SEO en secciones de los periódicos digitales

Me gustan los periódicos digitales. Me encantan y creo que cuando uno se mete un poco a fondo a analizar lo que hay detrás de sus interfaces es realmente sorprendente lo que se puede aprender sobre sus arquitecturas de información y sobre el tremendo trabajo SEO que hay debajo de muchos de ellos del cual, normalmente, es dificil ser consciente.

Curiosísimo el módulo que presenta el Wall Street Journal. Cuando el usuario entra en un artículo de una sección se observa en la parte superior, inmediatamente debajo de la cabecera una minigalería con las noticias destacadas de la sección. Cada minimódulo de noticia dentro de la misma consta de: pequeña foto escalada de la foto principal de la noticia que funciona como enlace al artículo final, título, que es asimismo un enlace a la noticia, número de la noticia destacada y número total de noticias destacadas en la minigalería (que no número total de noticias en la sección correspondiente -¿en base a qué seleccionarán las noticias más populares? ¿aquellas más leídas por los usuarios? ¿las que seleccione manualmente el editor? ¿las más votadas? ¿enviadas? ¿?).

Wall Street Journal. Minigalería de noticias destacadas en subsección
Wall Street Journal. Minigalería de noticias destacadas en subsección

La noticia que se está visualizando de la minigalería tiene el fondo blanco para centrar la atención (indicación de qué está viendo el usuario) mientras que las demás presentan un fondo con una sutil variación en gris para distinguirlas de la anterior. Cuando el usuario hace clic en una noticia no consecutiva a la que se está visualizando se recarga la minigalería y se posiciona en primer lugar. La forma en ángulo de “Top stories in [nombre de sección]” y el ángulo en la parte inferior del rectángulo refuerza la idea de movimiento y de que esa y no otra es la noticia seleccionada por el usuario y la que está visualizando. Los controles azules para realizar scroll horizontal situados uno al lado del otro en lugar de a los extremos de la minigalería, como suele ser usual, y posicionados a la derecha del todo de la pantalla al mismo margen o borde del periódico mejoran la usabilidad al facilitar el scroll tanto hacia adelante como hacia atrás y al reducir el desplazamiento del cursor una vez el usuario lo ha posicionado en su área (normalmente para los diestros el cursor suele permanecer en el área derecha de la pantalla más que en la izquierda con lo cual y desde hace ya algún tiempo, se observa una fuerte tendencia en todos los nuevos diseños de webs e incluso en algunas aplicaciones de software a posicionar componentes esenciales o que deban tener una gran importancia desde un punto de vista de ejecución de interacción por parte del usuario en las esquinas superiores derechas o en la mitad superior derecha de la pantalla, un área que está ganando por momentos relevancia entre los diseñadores de interacción).

Con este componente se mejora el SEO, la navegación por la sección y se hace “emerger” la información de la misma incitando al usuario a seguir navegando. En definitiva, un componente francamente elegante. Me gusta. Lástima no haberlo visto antes.

Se me ocurre que, variándolo, es perfectamente extrapolable a otros webs, por ejemplo, tiendas de comercio electrónico, librerías, mercados online, etc.

July 18, 2009

Metapatrones de diseño ambientales o Experiencia de Usuario y Diseño de Interacción Ambiental

Acabo de incorporarme a un proyecto en el que vamos a trabajar, como ha comentado en alguna ocasión Jesus Encinar, “al pixel”. En el que cada cambio que se acomete de la interfaz cuenta y ha de estar sustentado por una serie de decisiones que muevan a decidir la conveniencia de llevarlo a cabo o no. Y esta circunstancia, junto al hecho del transfondo de los proyectos que llevo como consultor de Experiencia de Usuario, Arquitecto de Información y Diseñador de Interacción (perdonad lo rimbombante que pueda parecer citar los tres campos principales de mi área de trabajo pero creo que es fundamental hacerlo a propósito de la esencia o idea principal que voy a tratar de exponer y defender en el presente post), me ha llevado a plantearme una cuestión interesante:

¿Existen metapatrones de diseño ambientales en UX, AI en HCI y más genéricamente en Diseño de Interacción?

¿Existen realmente?

En este proyecto acaban de pedirme que presente argumentos para ver la conveniencia de cambiar de lugar un “Teléfono de Atención al Cliente”. Lo curioso del tema es que la web en cuestión en la que estoy trabajando, por sus características, es bastante singular, no tiene un amplio campo (al menos a priori) de “competidores” o webs similares con las que poder comparar y realizar el clásico benchmarking a partir del cual extraer conclusiones válidas de diseño. De hecho, en España, es única, y en el mundo, que yo sepa, sólo hay tres organismos que se la puedan equiparar.

¿Cómo presentar razones sobre las que defender o no la conveniencia de acometer el cambio de lugar del teléfono a otra parte de la interfaz?

Bueno, hay muchas formas, y el benchmarking no es sino una de tantas. Por ejemplo, se pueden hacer test A/B, testar con usuarios reales, medir el aumento o disminución del número de llamadas al Call Center en función del lugar en el que se posicione el teléfono, echar mano de CrazyEg y monitorizar los puntos focales de atención o puntos calientes de interacción mediante mapas calientes generados a partir de donde clickan los usuarios en el actual diseño de interfaz, se pueden analizar los logs y tratar de extraer las pertinentes conclusiones asociadas al hecho de moverlo o no de lugar, etc.

Unas son más accesibles para el trabajo diario de cualquier consultor. Otras no. Así que una de las cosas que estaba haciendo era realizar un benchmarking cruzado de otro tipo de webs, no extrictamente ceñidas al campo de la actual (de hecho es lo que me habían aconsejado que hiciera para la presente tarea). Y con ello se me estaba planteando algo curioso.

Realmente creo que existen patrones de diseño que pueden considerarse desde múltiples y muy variados puntos de vista: UX, AI, HCI y Diseño de Interacción y en general, que exceden o implican a muchas más áreas de conocimiento a la vez. De ahí el hablar de metapatrones de diseño ambientales parafraseando a Peter Morville y su “nueva” disciplina, como ha dado en llamarla “Ambient Findability”.

Porque a pesar de hacer un benchmarking cruzado de diferentes sitios para observar dónde posicionan el “Teléfono de Atención al Cliente” en sus respectivas homes y webs, y a pesar de que son de campos de negocio diferentes, la cuestión principal, el leit motiv, o uno de los principales y más fuertes motivos, que puede mover a posicionar en todas ellas un teléfono en una posición particular es cuando menos fuertemente similar:

Es potenciar su visibilidad para que los clientes o usuarios del web lo vean con extremada facilidad, si tal es la meta -potenciar el Call Center-, u ocultarlo o posicionarlo en un lugar menos importante o con una jerarquía informativa inferior en la página para reducir el número de llamadas al mismo, frente al uso de la web u otros sistemas o ayudas en línea, si tal es el objetivo principal que se busca con el rediseño.

Así, no parece descabellado, sino ciertamente pertinente, conveniente, e incluso necesario realizar un benchmarking cruzado de sitios de diferentes áreas y modelos de negocio para analizar cómo y por qué posicionan el Teléfono de Atención al Cliente en determinados lugares en sus respectivas webs: evaluando tanto las razones contextuales que pueden llevar a tal decisión -las características particulares de diseño de la interfaz y los condicionamientos que pueden haber dado lugar a esa decisión en esa web concreta y en esa interfaz específica-, y las características que pueden haber llevado a tal decisión en otras webs no relacionadas e incluso en otros dispositivos y/o en otras interficies (no necesariamente superficies interactivas).

Un análisis ambiental intentando inferir las razones de diseño que guían un objetivo que se busca respecto a un propósito específico con un diseño en distintos soportes, interficies (web, papel) y dispositivos.

La busqueda de metapatrones de diseño ambientales.

Existen, pienso. Los patrones de diseño lo son, sólo hay que leerse el libro de Jennifer Tidwell uno de tantos otros por ejemplo, para ser conscientes de ello, y ampliar un poco el campo del razonamiento a otras interficies y dispositivos.

En general, analizar qué cuestiones desde un punto de vista ambiental pueden forzar a tomar una determinada decisión de diseño respecto a un elemento específico a evaluar y a un objetivo o meta concretos, tanto gráficamente hablando, de acuerdo a la importancia jerarquica informativa que tiene en la interfaz, hasta las razones desde un punto de vista diseño ergónomico (por ejemplo por qué en la máquina de café de nuestra oficina se pone el Teléfono de Atención al Cliente donde se pone -¿esquina superior derecha? donde suele estar la ranura por la que echamos la moneda para obtener el café? ¿Está posicionada en ese lugar por el condicionamiento físico de que una gran mayoría de la población es diestra y a una determinada altura porque la media de altura de la población, o más genéricamente del hombre y la mujer es “X”?) físico ¿qué factores influyen en el diseño del objeto físico, qué affordances ofrece? o cognitivo ¿cómo las percibimos y procesamos? con el fin de extrapolarlas al entorno digital.

Al fin y al cabo, el proceso psicofísico de percepción de nuestro mundo tridimensional, aunque complejísimo, reduce (creo, por favor, entiéndase esto con el debido, necesario y considerado excepticismo científico de quién no puede comprobarlo en laboratorio) la complejidad de los factores implicados en la toma de decisiones que guían nuestras acciones, nuestra percepción cotidiana y nuestro proceder cognitivo diario.

Metapatrones de diseño ambientales.

Amplía el campo de análisis de tu benchmarking y no te ciñas únicamente a las webs de tu sector de negocio, a tu interfaz concreta, a tu soporte informativo específico (papel o digital) o al dispositivo con el que trabajes.

Si lo amplías es posible que obtengas información, razonamientos y conclusiones que te pueden llevar a identificar metapatrones de diseño ambientales ciertamente interesantes.

Insisto, todo ello expresado con el necesario excepticismo científico. Pero aún así, creo que es una nueva área en cuanto al Diseño en general, y en cuanto a la Experiencia de Usuario y a la Interacción Hombre-Ordenador en particular se refiere, que debería comenzar a ser reconocida y tenida en cuenta y por ende, articulada e investigada.

Me gustaría ver algún día el equivalente del libro de Jennifer Tidwell “Diseñando interfaces: Patrones para un Diseño de Interacción efectivo”, el propio título de su libro lo dice, escrito e identificando patrones de diseño, de organización de contenidos y de interacción no ciñéndose a la World Wide Web, sino ampliado a diversas áreas de conocimiento, ocio o negocio, a distintos soportes informativos y a diversos dispositivos que no tienen porque ser necesariamente el ordenador (la interacción que mantenemos actualmente con el mismo y el paradigma que ahora está cayendo sobre el que se ha sustentado hasta ahora la HCI clásica, forma física del ordenador y periféricos de entrada como el teclado o el ratón, es ciertamente limitada cuando podría ser potenciada, como se está comenzando a hacer ahora por otros medios de interacción multimodales como el tacto, la vista, o la voz).

Una concepción mucho más universal del Diseño de Interacción y la Experiencia de Usuario en línea o mucho más próxima a la Teoría del Diseño de Información e Interacción integral explicitada por Nathan Shedroff.

“One of the most important skills for almost everyone to have in the next decade and beyond will be those that allow us to create valuable, compelling, and empowering information and experiences for others. To do this, we must learn existing ways of organizing and presenting data and information and develop new ones. Whether our communication tools are traditional print products, electronic products, broadcast programming, interactive experiences, or live performances makes little difference. Nor does it matter if we are employing physical or electronic devices or our own bodies and voices. The process of creating is roughly the same in any medium. The processes involved in solving problems, responding to audiences, and communicating to others are similar enough to consider them identical for the purposes of this paper. These issues apply across all types of media and experiences, because they directly address the phenomena of information overload, information anxiety, media literacy, media immersion, and technological overload–all which need better solutions. The intersection of these issues can be addressed by the process of Information Interaction Design. In other circles, it is called simply Information Design, Information Architecture, or Interaction Design, Instructional Design, or just plain Common Sense”.

Explicitada por Sharp, Rogers y Preece (1):

“How many interactive products are there in everyday use? Think for a minute about what you use in a typical day: cell (mobile) phone, computer, personal organizer, remote control, coffe machine, ATM, ticket machine, library information system, the web, phtocopier, watch, printer, stereo, DVD player, calculator, video game… the list is endless. Now think for a minute about how usable they are. How many area actually easy, effortless, anda ajoyable to use? All of them, several, or just one or two? This list is probably considerably shorter. Why is this so?…

The main aims of this chapter are to:

Explain the difference between good and porr interaction design.
Describe what interaction design is and how it relates to human-computer interaction and other fields.
Explain what is meant by the user experience and usability.
Describe what and who is involverd in the process of interaction design.
Outline the differente forms of guidance used in interaction design.
Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the goals and core principles of interaction design”

¿What is Interaction Design?”

o implicita en la definición comunitaria de la Wikipedia sobre Arquitectura de la Información:

“La Arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

La Arquitectura de la Información trata indistintamente del diseño de: sitios web, interfaces de dispositivos móviles o gadgets (como los iPod), CDs interactivos, videoclips digitales, relojes, tableros de instrumentos de aviones de combate o civiles, interfaces de máquinas dispensadoras, interfaces de juegos electrónicos, etc.

Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido”.

Realmente está todo escrito. El conocimiento y la Ciencia avanzan a partir de, y evolucionando, el propio conocimiento y la Ciencia existente en un momento dado, examinando el “estado del arte” en un campo o cuestión determinada. Tan sólo hay que tener curiosidad y otro (muchas veces necesario) punto de vista.

Metapatrones de diseño ambientales.

–0–

REFERENCIAS BIBLIOGRÁFICAS:

(1) Capítulo 1. p. 0: Sharp, Helen; Rogers, Yvonne; Preece, Jenny. Interaction design : beyond human-computer interaction. 2ª ed. reimpr. corr. Hoboken : John Wiley & Sons, 2007. 775 p. ISBN 978-0-470-01866-8

(nota, lo de página 0 no es una errata, realmente es el primer libro que veo que empieza por la página 0 en lugar de por la 1 ¿error del editor? :-)

« Artículos anteriores | Artículos posteriores »





















Get free blog up and running in minutes with Blogsome
Theme designed by Hadley Wickham