<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>tentándote.com &#187; Diseño de interacción</title>
	<atom:link href="http://www.tentandote.com/category/diseno-de-interaccion/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tentandote.com</link>
	<description>francisco tosete &#124; diseño de interacción, usabilidad, arquitectura de información</description>
	<lastBuildDate>Fri, 30 Jul 2010 06:45:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>

   <image>
    <title>tentándote.com</title>
    <url>http://1.gravatar.com/avatar/dccd532553e1d0034e04d0c0c5d49770?s=48&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536</url>
    <link>http://www.tentandote.com</link>
   </image>
		<item>
		<title>Human Interface Guidelines para el diseño de interfaces de usuario de apps en el iPad</title>
		<link>http://www.tentandote.com/2010/05/28/human-interface-guidelines-para-el-diseno-de-interfaces-de-usuario-de-apps-en-el-ipad/</link>
		<comments>http://www.tentandote.com/2010/05/28/human-interface-guidelines-para-el-diseno-de-interfaces-de-usuario-de-apps-en-el-ipad/#comments</comments>
		<pubDate>Fri, 28 May 2010 17:32:48 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[Herramientas de diseño]]></category>
		<category><![CDATA[Interacción háptica y táctil]]></category>
		<category><![CDATA[Interfaz]]></category>
		<category><![CDATA[Metodologías y técnicas]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[iPad]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=732</guid>
		<description><![CDATA[Apple acaba de publicar las Directrices para el diseño de Interfaz Humana del iPad y de elementos de interfaz de usuario de sus aplicaciones.]]></description>
			<content:encoded><![CDATA[<p>Apple acaba de publicar las <a title="iPad Human Interfaces Guidelines" href="http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html">Directrices para el diseño de Interfaz Humana del iPad</a> y de elementos de interfaz de usuario de sus aplicaciones.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/05/28/human-interface-guidelines-para-el-diseno-de-interfaces-de-usuario-de-apps-en-el-ipad/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Uso de iconos y texto en la navegación principal del Aeropuerto de Kansai</title>
		<link>http://www.tentandote.com/2010/05/16/uso-de-iconos-y-texto-en-la-navegacion-principal-del-aeropuerto-de-kansai/</link>
		<comments>http://www.tentandote.com/2010/05/16/uso-de-iconos-y-texto-en-la-navegacion-principal-del-aeropuerto-de-kansai/#comments</comments>
		<pubDate>Sun, 16 May 2010 14:01:32 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Arquitectura de información]]></category>
		<category><![CDATA[Diseño de información]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[Diseño gráfico]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[Aeropuerto Internacional de Kansai]]></category>
		<category><![CDATA[Arquitectura de Interacción]]></category>
		<category><![CDATA[iconos]]></category>
		<category><![CDATA[modelo GOMS]]></category>
		<category><![CDATA[rótulos]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=690</guid>
		<description><![CDATA[Navegando he ido a dar con la home del Aeropuerto Internacional de Kansai El caso, es que me ha llamado la atención cómo han diseñado el menú de navegación principal. No es un diseño muy ortodoxo que se diga ya que añaden iconografía a cada sección junto al correspondiente rótulo. Así, los iconos predominan visualmente [...]]]></description>
			<content:encoded><![CDATA[<p>Navegando he ido a dar con la home del <a href="http://www.kansai-airport.or.jp/en/index.asp">Aeropuerto Internacional de Kansai</a></p>
<p>El caso, es que me ha llamado la atención cómo han diseñado el menú de navegación principal. No es un diseño muy ortodoxo que se diga ya que añaden iconografía a cada sección junto al correspondiente rótulo.</p>
<p>Así, los iconos <strong>predominan visualmente frente a los nombres de cada sección convirtiéndose en puntos focales de atención, dificultando la legibilidad de los rótulos</strong> e impactando en la usabilidad.</p>
<p>Diseño del menú de navegación con iconos y rótulos:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadTextIcons.png"><img class="aligncenter size-full wp-image-691" title="KansaiAirport_HeadTextIcons" src="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadTextIcons.png" alt="" width="700" height="91" /></a></p>
<p>Sólo iconos:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadIcons.png"><img class="aligncenter size-full wp-image-693" title="KansaiAirport_HeadIcons" src="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadIcons.png" alt="" width="700" height="91" /></a></p>
<p>Sólo rótulos:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadText.png"><img class="aligncenter size-full wp-image-692" title="KansaiAirport_HeadText" src="http://www.tentandote.com/wp-content/uploads/2010/05/KansaiAirport_HeadText.png" alt="" width="700" height="91" /></a></p>
<p>En el caso de los menús de navegación de un sitio web no creo que sea buena idea añadir los iconos por la problemática intrínseca que tienen. Y menos en el sitio web de un aeropuerto internacional.</p>
<p>Por ejemplo, el avión de la primera sección sí se asocia a vuelos, pero  también a aeropuertos, con lo cual la interpretación ya es cuando menos  ambigua. El coche cuesta distinguirlo como coche por ser tan cuadrado en lugar de utilizar formas más redondas. Esta línea gráfica supone una menor usabilidad al reconocerse el coche con mayor dificultad. El tercer icono sí se interpreta más como llegadas y salidas,  aunque también puede indicar tránsito o viajeros en tránsito (haciendo escalas). El de la cuarta sección no sé por  qué, pero lo asocio a una bolsa bursátil o, por su forma, al monumento de Lincoln:</p>
<div id="attachment_710" class="wp-caption aligncenter" style="width: 710px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/700px-Lincoln_memorial_dc_20041011_095847_1.3008x2000.jpg"><img class="size-full wp-image-710" title="700px-Lincoln_memorial_dc_20041011_095847_1.3008x2000" src="http://www.tentandote.com/wp-content/uploads/2010/05/700px-Lincoln_memorial_dc_20041011_095847_1.3008x2000.jpg" alt="Lincoln memorial - Monumento a Lincoln" width="700" height="466" /></a><p class="wp-caption-text">Lincoln memorial - Monumento a Lincoln. Imagen de Wikimedia Commons</p></div>
<p>El quinto se interpreta bien,  tiendas y comida (restaurantes) y los dos últimos no los entiendo (el  concepto que me evoca el último es el de radio) y el icono del mapa,  puede ser cualquier cosa menos un mapa. ¿El perfil de la terminal del  aeropuerto quizá? ¿?</p>
<p>Entre otros problemas que presentan los iconos pueden apuntarse:</p>
<ul>
<li>Hay iconos que más o menos pueden ser indicativos de la información que hay en la sección, pero para otros, su interpretación puede variar de cultura a cultura, e incluso de individuo a individuo en base a sus experiencias y vivencias personales. Cada uno visualizamos el conocimiento y el lenguaje de forma, y con formas gráficas diferentes. Y aunque como individuos con estructuras cognitivas similares podemos deducir e identificar patrones universales que nos permiten reconocer más o menos las mismas formas, precisamente por esas diferencias, interpretar un icono y darle un significado correcto puede costarnos más o menos a cada uno (si  logramos darle el significado correcto, circunstancia que a veces no no es posible).</li>
<li>Por ello, a, a menudo los iconos requieren de ayudas textuales (tooltips que aparecen al posicionar el cursor del ratón encima del icono, o directamente, rótulos asociados al mismo) para poder comprenderse sin dificultades. En tal caso, la pregunta que se plantea es ¿por qué utilizar iconos en lugar de texto? ¿Por qué y cuando utilizar ambos?</li>
<li>Los diseñadores gráficos pueden encontrarse con <strong>serias dificultades para representar y sintetizar conceptos abstractos complejos mediante una imagen que no es más que una metáfora, y más, a través de un icono con un tamaño, diseño o color determinados -</strong>, dificultades que son extensibles a los usuarios a la hora de comprenderlos.</li>
<li><strong>No es lo mismo una aplicación que un sitio web.</strong> En una aplicación, predominan los &#8220;verbos &#8221; en las barras de herramientas. Las tareas que permite acometer la aplicación al usuario (por ejemplo, en un procesador de texto, entre otras tareas podemos: poner en negrita un texto, en cursiva, centrarlo, disminuir o aumentar su fuente, encontrar y reemplazar texto, etc). <strong>En una aplicación se diseña más una ARQUITECTURA DE INTERACCIÓN (el término es mío, no es una incorrección) que una Arquitectura de Información.</strong> Los espacios que se diseñan, aunque similares, son diferentes. Al igual que se definen espacios de información en cualquier sitio web, <strong>en una aplicación definimos espacios de interacción</strong>. E <strong>igualmente que hacemos como entregable, el mapa de un sitio web, deberíamos hacer entregables que sean mapas de interacción, que expliciten el modelo de interacción que subyace en la interfaz de la aplicación</strong>.  En un sitio web, la navegación se construye en base a una organización y jerarquización de su información<strong> (un espacio de información), y dado que hablamos principalmente de contenidos y no de acciones (verbos) o tareas, el lenguaje textual puede funcionar mejor en ellos, antes que los iconos.</strong></li>
<li>Añadiendo iconos junto a los rótulos en la navegación del sitio del aeropuerto, aparte de empeorar la legibilidad de los  rótulos, los iconos interfieren directamente con nuestra capacidad cognitiva para abstraer la estructura de información del sitio y poder hacernos un mapa mental de las secciones. Los iconos <strong>en este caso</strong> son superfluos, ocupan un espacio innecesario y no añaden un valor determinante a la interfaz que justifique su presencia.</li>
</ul>
<p>¿Cuando está justificado el uso de los iconos? ¿Cuando conviene utilizarlos? ¿Sólos, o con texto?</p>
<p>La respuesta, como suele serlo en cuanto a cuestiones de usabilidad se refiere, es depende de la circunstancia y el contexto.</p>
<p>Los iconos, por su tamaño, permiten un extraordinario grado de plegado de información y una vez que se aprende su código (a qué corresponde cada icono, al fin y al cabo familiarizarnos con la iconografía y funcionalidad de cualquier aplicación es aprender un código y un lenguaje visual, específico para la misma) pueden facilitar la búsqueda visual de una función<strong> en una aplicación y en una interfaz que utilicemos de manera intensiva y cotidiana</strong>:</p>
<div id="attachment_698" class="wp-caption aligncenter" style="width: 710px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/MicrosoftVisio_Ribbon700.png"><img class="size-full wp-image-698" title="MicrosoftVisio_Ribbon700" src="http://www.tentandote.com/wp-content/uploads/2010/05/MicrosoftVisio_Ribbon700.png" alt="Microsoft Visio - Ribbon" width="700" height="137" /></a><p class="wp-caption-text">Ribbon de Microsoft Visio. Al utilizar de manera cotidiana la aplicación y ser consistentes los iconos principales con las funcionalidades asociadas a lo largo de todas las aplicaciones de la suite (Word, Excel, Power Point, etc) terminamos por aprender parte del código iconográfico de las mismas con lo cual visualmente resulta mucho más rápido localizar las funcionalidades.</p></div>
<p>Si tuviéramos que expresar con palabras por ejemplo, las funcionalides del grupo de &#8220;Fuente&#8221; de la pestaña &#8220;Inicio&#8221; de la Ribbon de Word 2007 quedaría algo similar a:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/05/MicrosofVisio_Ribbon_Texto.png"><img class="size-full wp-image-712 aligncenter" title="MicrosofVisio_Ribbon_Texto" src="http://www.tentandote.com/wp-content/uploads/2010/05/MicrosofVisio_Ribbon_Texto.png" alt="Microsoft Visio - Ribbon con texto en lugar de iconos" width="723" height="177" /></a></p>
<p>Nótense tres cosas:</p>
<ul>
<li>El texto de las funcionalidades de un sólo grupo (a pesar de que aquí no está en la misma escala en la captura de la imagen que en el prototipo en blanco y negro) ya permite darnos cuenta de que ocupa mucho mayor espacio que los iconos gráficos. <strong>La densidad informativa de la interfaz que se comunica por píxel de pantalla es mucho mayor</strong>. Al fin y al cabo <a title="Directrices de Experiencia de Usuario de la Ribbon de las aplicaciones de Office de Microsoft" href="http://msdn.microsoft.com/en-us/library/cc872782%28v=MSDN.10%29.aspx">con la Ribbon se ha hecho un ejercicio de deconstrucción</a>. Estadísticamente se han determinado qué funcionalidades de los menús eran las más usadas y se han explicitado directamente en la interfaz, con apoyo, en su caso, de rótulos textuales al lado de los iconos, cuando la interpretación de éstos no era directamente explícita. Con ello se han logrado suprimir las jerarquías de interacción presentes en los menús desplegables, ahorrando tiempo al usuario tanto para acceder a los comandos buscados, como para, en algunos casos, ver directamente el resultado de la acción del menú antes de aplicarlo, dado que al posicionar el cursor encima del icono esto ya provoca un feedback y un cambio inmediato en el texto inferior seleccionado.</li>
<li>A pesar de que el texto suprime ambiguedades a veces es difícil expresar de forma precisa y con la concisión posible a través de una o dos palabras, la acción que se ejecutará cuando se haga clic sobre él.</li>
<li>Dado que requiere de su lectura, el texto conlleva una mucho mayor cantidad de tiempo para leerlo y decidir qué funcionalidad estamos buscando, que si se utilizan iconos. Visualmente el texto cuesta más de escanear.</li>
</ul>
<div id="attachment_715" class="wp-caption aligncenter" style="width: 703px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/CuadroDialogoPersonalizacion_MicrosoftWord2007.png"><img class="size-full wp-image-715" title="CuadroDialogoPersonalizacion_MicrosoftWord2007" src="http://www.tentandote.com/wp-content/uploads/2010/05/CuadroDialogoPersonalizacion_MicrosoftWord2007.png" alt="Cuadro de diálogo para la personalización de la Ribbon en Microsoft Word 2007" width="693" height="685" /></a><p class="wp-caption-text">Cuadro de diálogo para la personalización de la Ribbon en Microsoft Word 2007. Si se conoce la forma correspondiente del icono de la funcionalidad que se está buscando es mucho más rápido hacer un escaneado visual de los iconos que se están viendo, que ir leyendo uno a uno sus nombres textuales.</p></div>
<ul>
<li>En una interacción continua en un dilatado período de tiempo (por ejemplo, 8 horas como las que cotidianamente nos pasamos delante del ordenador en una jornada laboral típica) la suma de los tiempos de las microinteracciones es francamente importante y significativa, al igual que el esfuerzo cognitivo que tenemos que hacer para llevar a cabo las tareas con mayor o menor eficacia con la aplicación. Esto en definitiva, es de lo que trata la <a title="Definición de usabilidad de la wikipedia" href="http://es.wikipedia.org/wiki/Usabilidad">usabilidad</a>, de optimizar la eficacia y la eficiencia de una aplicación para alcanzar unos objetivos específicos en un contexto de uso específico. Y uno de los modelos clásicos para evaluar una interfaz en términos de eficacia y eficiencia es el conocido como GOMS (por Goals = Metas, Operators = Operadores, Methods = Métodos, y Selection rules = Reglas de selección) desarrollado por Card, Moran y Newell. Este modelo permite medir de forma cuantitativa, el rendimiento y el coste en términos de esfuerzo cognitivo y tiempo, de una interfaz frente a otra (al respecto puede consultarse el capítulo 4  &#8220;Cuantificación&#8221; del libro de Jef Raskin: <a title="Jef Raskin. The Humane Interface" href="http://books.google.com/books?id=D39vjmLfO3kC&amp;printsec=frontcover&amp;dq=the+humane+interfaces&amp;cd=1#v=onepage&amp;q=the%20humane%20interfaces&amp;f=false">&#8220;The Humane Interface&#8221;</a>). Dicho modelo parte del hecho de que el tiempo que lleva a un sistema usuario-ordenador el ejecutar una tarea, es la suma de los tiempos de los gestos elementales que hay que llevar a cabo para ejecutar la tarea.  Estos se sintetizan en una serie de tiempos típicos característicos que son:
<ul>
<li><strong>K = 0,2 sec.</strong> Keying (tecleado): El tiempo que lleva al usuario pulsar una tecla en el teclado.</li>
<li><strong>P = 1,1 sec.</strong> Pointing (apuntar): El tiempo que lleva a ul usuario posicionar el cursor en un lugar específico de la pantalla.</li>
<li><strong>H 0 0,4 sec.</strong> Homing (mover la mano): El tiempo que lleva a un usuario desplazar la mano desde el teclado hasta el Dispositivo Gráfico de Interfaz, tal como un ratón, o desde éste hasta el teclado.</li>
<li><strong>M = 1,35 sec.</strong> Mentally preparing (preparación mental): El tiempo que lleva a un usuario prepararse mentalmente para el siguiente paso después de una microacción.</li>
<li><strong>R</strong> Responding (respuesta): El tiempo que un usuario ha de esperar para que el ordenador responda a su input.</li>
</ul>
</li>
<li>Conforme a estos parámetros puede medirse la eficacia y la eficiencia de utilizar sólo iconos, sólo texto o ambos elementos en la interfaz de una aplicación. A bote pronto, en el caso de usar sólo texto, lleva más tiempo su lectura y comprensión, que el visualizar un icono del cual ya se conoce la funcionalidad que desempeña. Por otro lado, el texto al ocupar mayor espacio, conlleva un menor tiempo para ser alcanzado por el cursor, y menor precisión para ser pulsado que un icono pequeño.</li>
</ul>
<p>En cuanto a usabilidad se refiere, hay que medir el coste de lo que representa tomar una decisión de diseño de la interfaz u otra.<strong> O, como mínimo y dada la imposibilidad que tenemos en muchas ocasiones de testarlo o medirlo en laboratorio, ser al menos conscientes de ello y de cómo las decisiones que se toman impactan en el rendimiento de la aplicación o del sitio web.</strong></p>
<div id="attachment_704" class="wp-caption aligncenter" style="width: 710px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/ZohoMail_BarraFuncionalidades1.png"><img class="size-full wp-image-704" title="ZohoMail_BarraFuncionalidades" src="http://www.tentandote.com/wp-content/uploads/2010/05/ZohoMail_BarraFuncionalidades1.png" alt="Zoho Mail - Barra de funcionalidades" width="700" height="63" /></a><p class="wp-caption-text">Barra de funcionalidades de Zoho Mail. Utilizan iconos y rótulos</p></div>
<div id="attachment_700" class="wp-caption aligncenter" style="width: 710px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/Thunderbird_BarraFuncionalidades.png"><img class="size-full wp-image-700" title="Thunderbird_BarraFuncionalidades" src="http://www.tentandote.com/wp-content/uploads/2010/05/Thunderbird_BarraFuncionalidades.png" alt="Thunderbird - Barra de funcionalidades" width="700" height="87" /></a><p class="wp-caption-text">Barra de funcionalidades del cliente de correo Thunderbird. En este caso conviven iconos y rótulos ¿són lo suficientemente significativos y se entienden sin problemas los iconos? ¿El de &quot;responder&quot; y &quot;responder todos&quot;? Nótese que los botones de archivar y basura no llevan icono, y que el icono de la funcionalidad &quot;eliminar&quot; se asocia al de cerrar las ventanas de Windows lo que produce una disonancia cognitiva e impacta en la usabilidad</p></div>
<div id="attachment_699" class="wp-caption aligncenter" style="width: 710px"><a href="http://www.tentandote.com/wp-content/uploads/2010/05/Gmail_BarraFuncionalidades.png"><img class="size-full wp-image-699" title="Gmail_BarraFuncionalidades" src="http://www.tentandote.com/wp-content/uploads/2010/05/Gmail_BarraFuncionalidades.png" alt="GMail - Barra de funcionalidades" width="700" height="91" /></a><p class="wp-caption-text">Barra de funcionalidades de GMail. En este caso Google opta por no usar iconos junto a los rótulos</p></div>
<p>En cuanto a la World Wide Web, y dado que en cada sitio web solemos estar de forma muy puntual, e interactuando con su interfaz durante tiempos muy reducidos, no es la mejor idea construir y utilizar un código iconográfico propio que conviva con los rótulos de las secciones, en la navegación principal, ni para facilitar la misma, ni para realzar el diseño desde un punto de vista gráfico.</p>
<p>Por cierto, un último detalle más en cuanto a la barra de navegación del aeropuerto, la pestaña &#8220;top&#8221; de la derecha es un <a title="Elemento superfluo de interfaz" href="http://tentandole.blogsome.com/2007/09/09/elemento-superfluo-en-national-geographic/">elemento 100% superfluo 2.0</a>).</p>
<p>¿Opiniones? ¿En qué contextos consideráis que los iconos juegan un papel importante y son recomendables y en qué ocasiones no? ¿Más ejemplos que conozcáis?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/05/16/uso-de-iconos-y-texto-en-la-navegacion-principal-del-aeropuerto-de-kansai/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Facilitar el registro a los usuarios en las aplicaciones y sitios</title>
		<link>http://www.tentandote.com/2010/04/06/facilitar-el-registro-a-los-usuarios-en-las-aplicaciones-y-sitios/</link>
		<comments>http://www.tentandote.com/2010/04/06/facilitar-el-registro-a-los-usuarios-en-las-aplicaciones-y-sitios/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 07:36:41 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[Interacción]]></category>
		<category><![CDATA[aplicaciones móviles]]></category>
		<category><![CDATA[logado]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[reducir la fricción]]></category>
		<category><![CDATA[registro]]></category>
		<category><![CDATA[sign up]]></category>
		<category><![CDATA[sitios web]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=592</guid>
		<description><![CDATA[Me gusta el módulo de registro en la home de ZML.com Para registrarse tan sólo es necesario que el usuario proporcione su cuenta de correo electrónico, que explícite cual va a ser su contraseña y que la confirme. Y de momento nada más. Tan sólo se le requiere la información mínima e imprescindible. Simple, rápido [...]]]></description>
			<content:encoded><![CDATA[<p>Me gusta el módulo de registro en la home de <a href="http://www.zml.com">ZML.com</a></p>
<p style="text-align: center;"><a href="http://www.tentandote.com/wp-content/uploads/2010/04/ZML_SignUp.png"><img class="size-full wp-image-593 aligncenter" title="Pantalla de registro de ZML.com" src="http://www.tentandote.com/wp-content/uploads/2010/04/ZML_SignUp.png" alt="Pantalla de registro de ZML.com" width="388" height="407" /></a></p>
<p style="text-align: center;">
<p>Para registrarse tan sólo es necesario que el usuario proporcione su cuenta de correo electrónico, que explícite cual va a ser su contraseña y que la confirme.</p>
<p>Y de momento nada más. Tan sólo se le requiere<strong> la información mínima e imprescindible</strong>. Simple, rápido y sencillo.</p>
<p>Uno de los aspectos críticos a tener en cuenta al lanzar una aplicación web, y especialmente en el contexto móvil, <strong>es reducir la fricción durante el registro de los usuarios</strong>. Joshua Porter le dedica <a title="Joshua Porter, Designing for the Social Web. Google Books" href="http://books.google.com/books?id=CNJuvYBl_IsC&amp;printsec=frontcover&amp;dq=joshua+porter+designing+for+the+social+web+google+books&amp;source=bl&amp;ots=_1PBPJHuXS&amp;sig=zI7ZDJ5jA-ejKvyD5AySKUOulmQ&amp;hl=en&amp;ei=FZu0S8-QG5OJ4gajl4j7Dg&amp;sa=X&amp;oi=book_result&amp;ct=result&amp;resnum=6&amp;ved=0CBsQ6AEwBQ#v=onepage&amp;q=&amp;f=false">un capítulo entero en su libro</a> al tema. Y es que como comenta &#8220;tenemos alrededor de ocho segundos para realizar la conexión [con el usuario]&#8221; (capítulo 4, p. 65).</p>
<p>No creo que la cosa sea tan radical y que el tiempo sea tan corto, pero en cualquier caso, es muy muy reducido, al igual que la atención que se le presta al sitio en un momento dado.</p>
<p>Reducir la fricción para que se <strong>registren </strong>y<strong> prueben</strong> nuestra aplicación <strong>es vital</strong> dado que:</p>
<ul>
<li>Hay millones de aplicaciones y de sitios web a los que llegamos o descubrimos cotidinamente y que en un momento puntual puede interesarnos probar.</li>
<li>Si llegamos a ellos porque estamos realizando una búsqueda estaremos más motivados para intentar registrarnos. Si los descubrimos por casualidad es posible que los guardemos para revisarlos posteriormente con tranquilidad y ver si merece la pena registrarnos o no. En ambos casos el tiempo y la atención que le dedicamos a un sitio o aplicación nueva es muy muy limitado.</li>
<li>No malgastamos nuestro tiempo en aquello que no consideramos que sea de nuestro interés o que no nos vaya a ser útil o relevante.</li>
<li>No damos a la ligera nuestra información personal, y mucho  menos en un sitio desconocido.</li>
<li>En aplicaciones de móviles, cada carácter escrito cuesta, y mucho. Cada campo extra reduce las posibilidades de que los usuarios se registren o al menos que se lo piensen.</li>
</ul>
<p>Cuanto más fácil lo tenga el usuario para registrarse más posibilidades existen de que se cree una cuenta y de que pruebe nuestro servicio para ver si le convence o no, que es de lo que se trata.</p>
<p>Con posterioridad, <strong>una vez que se ha registrado con unos datos mínimos, que ha utilizado la aplicación o el sitio, que le ha gustado y que le hemos conseguido fidelizar, ya habrá tiempo de que complete si es necesario su perfil.</strong></p>
<p>Aunque no comulgo especialmente con las siguientes prácticas, comento cómo lo hacen algunos.</p>
<p>En LinkEdin por ejemplo cada paso adicional que el usuario da para completar su perfil le otorga un porcentaje extra hasta llegar al 100%. A nadie le gusta dejar las cosas a medio hacer, ni mucho menos tener un porcentaje bajo en su perfil profesional, circunstancias ambas que le impelen a completarlo con posterioridad en el momento en que mejor le convenga.</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/04/Linkedin_CompletarPerfilUsuario.png"><img class="aligncenter size-full wp-image-594" title="Linkedin - Cómo motivar a los usuarios a completar el perfil" src="http://www.tentandote.com/wp-content/uploads/2010/04/Linkedin_CompletarPerfilUsuario.png" alt="Linkedin - Cómo motivar a los usuarios a completar el perfil" width="590" height="593" /></a></p>
<p>En Monster.com en lugar de utilizar un porcentaje otorgan una valoración al perfil del candidato en función de que esté más o menos completo. Cuanto más datos aporte mayor es la &#8220;Calidad del perfil&#8221;.</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/04/Monster_CompletarPerfilUsuario.png"><img class="aligncenter size-full wp-image-595" title="Monster - Cómo hacer para que los usuarios completen su perfil" src="http://www.tentandote.com/wp-content/uploads/2010/04/Monster_CompletarPerfilUsuario.png" alt="Monster - Cómo hacer para que los usuarios completen su perfil" width="482" height="470" /></a></p>
<p>Por igual circunstancia que en LinkEdin, el usuario se encuentra incitado a completar la información de su perfil cuanto antes con el fin de aumentar la calidad del mismo.</p>
<p>Para terminar, existen más formas para reducir aún más la fricción durante el primer contacto del usuario con la aplicación y lograr que al menos la pruebe.</p>
<p>¿Cómo?</p>
<p>Una de las maneras más comunes es <strong>utilizando APIs de terceros para gestionar la identidad digital</strong>, por ejemplo la de Google o la de Facebook tal y como hacen en <a href="http://www.ideeli.com">Ideeli.com</a> (esta es una captura antigua, en estos momentos tienen cerrado el registro)</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/04/Ideeli_PantalladeRegistro.png"><img class="aligncenter size-full wp-image-596" title="Ideeli.com - Pantalla de registro y utilización de la API de Facebook, Facebook Connect" src="http://www.tentandote.com/wp-content/uploads/2010/04/Ideeli_PantalladeRegistro.png" alt="Ideeli.com - Pantalla de registro y utilización de la API de Facebook, Facebook Connect" width="689" height="558" /></a></p>
<p>Otra es permitir directamente al usuario acceder a la aplicación y cuando desee realizar determinadas acciones, como publicar un mensaje (caso de Twitter) o votar (Digg, Menéame) por citar dos ejemplos, pedirle que se registre. En este caso es recomendable una vez que el usuario se ha registrado, devolverle al punto en el que comenzó el proceso.</p>
<p>Por cierto, un par de cosas que podrían mejorarse tanto en <a href="http://www.zml.com">ZML.com</a> como en <a href="www.ideeli.com">Ideeli.com</a>. En la primera<strong> se le podría pintar un rostro al icono del usuario</strong>. <strong>Los usuarios son personas</strong> y nos sentimos mucho más identificados con una persona que con &#8220;algo&#8221; que no tiene cara. <strong>El impacto emocional es importante</strong>. En cuanto al segundo,<strong> prefiero pedir la cuenta de correo electrónico antes que el nombre de usuario</strong>:</p>
<ul>
<li><strong>La cuenta de correo electrónico no suele variar y es más fácil de recordar</strong>.</li>
<li>Con los nombres de usuario existe el riesgo de que el usuario introduzca uno cualquiera para registrarse y probar el sitio o curiosear, y que posteriormente no recuerde el mismo con lo cual si luego se le pide como requisito para logarse, estaremos poco más que perdiéndolo.</li>
<li>En cualquier caso, es una buena práctica</li>
</ul>
<p>¿Se os ocurren más buenas prácticas, recomendaciones o consideraciones a tener en cuenta en cuanto al registro o el logado?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/04/06/facilitar-el-registro-a-los-usuarios-en-las-aplicaciones-y-sitios/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Widgets de TAT para Android y reconocimiento facial</title>
		<link>http://www.tentandote.com/2010/03/31/widgets-de-tat-para-android-y-reconocimiento-facial/</link>
		<comments>http://www.tentandote.com/2010/03/31/widgets-de-tat-para-android-y-reconocimiento-facial/#comments</comments>
		<pubDate>Wed, 31 Mar 2010 08:33:21 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[Interfaz]]></category>
		<category><![CDATA[Realidad Aumentada - Augmented Reality]]></category>
		<category><![CDATA[animación]]></category>
		<category><![CDATA[cinestesia]]></category>
		<category><![CDATA[interfaces]]></category>
		<category><![CDATA[movimiento]]></category>
		<category><![CDATA[reconocimiento facial]]></category>
		<category><![CDATA[TAT]]></category>
		<category><![CDATA[The Astonishing Tribe]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=570</guid>
		<description><![CDATA[The Astonishing Tribe, más conocida como TAT, es una compañía sueca de la que ya hemos hablado antes por estos lares . Sus aplicaciones e interfaces no dejan indiferente a nadie y en buena medida, con cada una de ellas que lanzan introducen nuevos conceptos y patrones de interacción. En esta ocasión acaban de presentar [...]]]></description>
			<content:encoded><![CDATA[<p>The Astonishing Tribe, más conocida como <a href="http://www.tat.se">TAT</a>, es una compañía sueca de la que ya <a href="http://tentandole.blogsome.com/2009/07/14/the-astonishing-tribe-id-y-realidad-aumentada/">hemos hablado antes por estos lares </a>. Sus aplicaciones e interfaces no dejan indiferente a nadie y en buena medida, con cada una de ellas que lanzan introducen nuevos conceptos y patrones de interacción.</p>
<p>En esta ocasión acaban de presentar varios widgets para Android en los que la cinestesia (movimiento, animación) y los efectos &#8220;orgánicos&#8221; (por llamarlos de alguna forma) están a la orden del día. En mi opinión creo que incluso <strong>se está comenzando a abusar demasiado de ellos</strong>, pero bueno. Al fin y al cabo es un recurso -la animación- nuevo que tenemos y que estamos aprendiendo a utilizar.</p>
<p>Lo mejor que tiene el espacio digital es que es maleable lo que significa que podemos retorcerlo y hacer con él lo que nos dé la gana.</p>
<p>¿Qué hay detrás de una interfaz plana como la pantalla de un monitor?</p>
<p>Pues un espacio literalmente n-dimensional que podemos conceptualizar como queramos. La imaginación es el límite y propuestas como la de TAT para Android son precursoras de los nuevos patrones de interacción que están viniendo en las nuevas interfaces:</p>
<p><center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://www.youtube.com/v/bOGmnnGpoqg&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;hl=en_US&amp;feature=player_embedded&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="385" src="http://www.youtube.com/v/bOGmnnGpoqg&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;hl=en_US&amp;feature=player_embedded&amp;fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></center></p>
<p>¿Dónde se pueden encontrar más fuentes de inspiración para nuevos modelos de interacción y espectaculares efectos de cinestesia&#8230;?</p>
<p>Pues en la naturaleza, por supuesto, que para algo ya ha hecho por nosotros un estupendo trabajo de <a href="http://es.wikipedia.org/wiki/Evoluci%C3%B3n_biol%C3%B3gica">diseño evolutivo</a> desde hace millones de años  ;-)</p>
<p>Cambiando de tercio, ojeando sus otras propuestas veo que acaban de presentar asimismo una aplicación con una interfaz ya más pulida de su aplicación de realidad aumentada para el reconocimiento facial:</p>
<p><center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://www.youtube.com/v/tb0pMeg1UN0&amp;rel=0&amp;border=1&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;hl=es_ES&amp;feature=player_embedded&amp;fs=1" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="385" src="http://www.youtube.com/v/tb0pMeg1UN0&amp;rel=0&amp;border=1&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;hl=es_ES&amp;feature=player_embedded&amp;fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></center></p>
<p>Ojalá tuviera proyectos en el que pudiera diseñar cosas como estas.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/03/31/widgets-de-tat-para-android-y-reconocimiento-facial/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Controles de interfaz y estados de interacción (febrero 2010)</title>
		<link>http://www.tentandote.com/2010/02/16/controles-de-interfaz-y-estados-de-interaccion-febrero-2010/</link>
		<comments>http://www.tentandote.com/2010/02/16/controles-de-interfaz-y-estados-de-interaccion-febrero-2010/#comments</comments>
		<pubDate>Tue, 16 Feb 2010 09:49:26 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño gráfico]]></category>
		<category><![CDATA[Interfaz]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[checkbox]]></category>
		<category><![CDATA[colores]]></category>
		<category><![CDATA[estado activo]]></category>
		<category><![CDATA[estados de interacción]]></category>
		<category><![CDATA[estados inactivos]]></category>
		<category><![CDATA[Google Dos]]></category>
		<category><![CDATA[Spreadshet]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=475</guid>
		<description><![CDATA[Estos son dos de los controles de interfaz que me han llamado la atención últimamente. Ambos pertenecen a la suite de Google Docs. El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. [...]]]></description>
			<content:encoded><![CDATA[<p>Estos son dos de los controles de interfaz que me han llamado la atención últimamente. Ambos pertenecen a la suite de Google Docs.</p>
<p>El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. A continuación se muestra tal cual aparece nada más acceder a Google Docs, sin haber hecho clic en el control:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_SeleccionarElementos_SinDesplegar.png"><img class="aligncenter size-full wp-image-480" title="Google Docs - Seleccionar elementos sin desplegar" src="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_SeleccionarElementos_SinDesplegar.png" alt="" width="698" height="484" /></a></p>
<p>En lugar de utilizar el clásico checkbox incluido en la cabecera de  tabla alineado con los checkbox inferiores que permite, activándolo o desactivándolo, seleccionar todos los elementos de una sola vez en lugar de hacerlo uno por uno (ver estados de interacción a  continuación en AOL Mail y el Explorador de Windows Vista):</p>
<p style="text-align: center;"><a href="http://www.tentandote.com/wp-content/uploads/2010/02/AOLMail_ElementossinSeleccionar1.png"><img class="aligncenter" title="AOL Mail - Elementos sin seleccionar" src="http://www.tentandote.com/wp-content/uploads/2010/02/AOLMail_ElementossinSeleccionar1.png" alt="" width="699" height="587" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.tentandote.com/wp-content/uploads/2010/02/AOLMail_ElementosSeleccionados.png"><img class="aligncenter" title="AOLMail - Elementos seleccionados" src="http://www.tentandote.com/wp-content/uploads/2010/02/AOLMail_ElementosSeleccionados.png" alt="" width="699" height="587" /></a></p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/WindowsVista_ExploradorArchivos_CheckboxSeleccionElementos.png"><img class="aligncenter size-full wp-image-481" title="Windows Vista Explorador de archivos - Checkbox selección de elementos" src="http://www.tentandote.com/wp-content/uploads/2010/02/WindowsVista_ExploradorArchivos_CheckboxSeleccionElementos.png" alt="" width="800" height="600" /></a></p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/WindowsVista_ExploradorArchivos_CheckboxSeleccionElementos_ElementosSeleccionados.png"><img class="aligncenter size-full wp-image-482" title="Windows Vista - Explorador de archivos - Checkbox selección elementos - Elementos seleccionados" src="http://www.tentandote.com/wp-content/uploads/2010/02/WindowsVista_ExploradorArchivos_CheckboxSeleccionElementos_ElementosSeleccionados.png" alt="" width="800" height="600" /></a></p>
<p>en Google Docs, al hacer clic sobre el mismo aparece un menú desplegable con dos  opciones:</p>
<ul>
<li>Seleccionar todos los elementos (nº elementos)</li>
<li>No  seleccionar ninguno</li>
</ul>
<p>que permiten realizar las mismas opciones pero explicitándolas haciendo que sea más predecible el funcionamiento del componente.</p>
<p style="text-align: center;"><a href="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_SeleccionarElementos.png"><img class="aligncenter" title="GoogleDocs - Seleccionar elementos" src="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_SeleccionarElementos.png" alt="Control de checkbox para seleccionar todos los elementos de un  listado y menú desplegable con las opciones de los estados explícitas" width="698" height="499" /></a></p>
<p>Una cosa que no termina de convencerme es que, en el diseño del control, estén o no estén los elementos inferiores seleccionados, el checkbox aparece siempe como seleccionado.</p>
<p>También me llama mucho la atención el uso del color que se hace en el gestor de Google Docs. Tal ycomo está ahora mismo, por defecto, todos los elementos del listado aparecen con un color de fondo que es un azul muy claro que indica un estado inactivo:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_ColorElementossinSeleccionar.png"><img class="aligncenter size-full wp-image-484" title="GoogleDocs Color elementos sin seleccionar" src="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_ColorElementossinSeleccionar.png" alt="" width="698" height="287" /></a></p>
<p>Cuando se seleccionan uno o varios elementos el color de fondo cambia a uno más claro indicando el estado activo:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_ColorElementosSeleccionados.png"><img class="aligncenter size-full wp-image-485" title="Google Docs - Color claro de fondo en los elementos seleccionados" src="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_ColorElementosSeleccionados.png" alt="" width="699" height="275" /></a></p>
<p>Es justo el patrón contrario que se ha seguido hasta ahora en todos los sistemas operativos Windows, Mac, Linux y aplicaciones web (ver por ejemplo la captura del explorador de Windows Vista más arriba para observarlo), color claro para estado sin seleccionar, color más oscuro para elementos seleccionados.</p>
<p>El otro control de interfaz que me ha llamado la atención es el que aparece en la paleta de colores de Spreadsheet de Google Docs. Concretamente el diseño del recuadro de color cuando se ha seleccionado en la paleta. A continuación el aspecto que tiene en Spreadsheet de Google Docs:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_HojaCalculo_ColorSeleccionado.png"><img class="aligncenter size-full wp-image-486" title="GoogleDocs_HojaCalculo_ColorSeleccionado" src="http://www.tentandote.com/wp-content/uploads/2010/02/GoogleDocs_HojaCalculo_ColorSeleccionado.png" alt="" width="700" height="370" /></a></p>
<p>Además de resaltar sutilmente con un borde que da aspecto de botón hundido el color seleccionado, le ponen una marca de check al mismo para distinguirlo claramente.</p>
<p>El mismo control en Excel con un color seleccionado (recuadro sombreado en rojo):</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/Excel_ColorSeleccionado.png"><img class="aligncenter size-full wp-image-487" title="Excel_ColorSeleccionado" src="http://www.tentandote.com/wp-content/uploads/2010/02/Excel_ColorSeleccionado.png" alt="" width="699" height="363" /></a></p>
<p>¿Qué os parecen los controles? ¿Opiniones sobre los distintos estados de interacción / diseños gráficos?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/02/16/controles-de-interfaz-y-estados-de-interaccion-febrero-2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>La evolución de la comunicación en la World Wide Web</title>
		<link>http://www.tentandote.com/2010/02/09/la-evolucion-de-la-comunicacion-en-la-world-wide-web/</link>
		<comments>http://www.tentandote.com/2010/02/09/la-evolucion-de-la-comunicacion-en-la-world-wide-web/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 09:48:42 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Arquitectura de información]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Experiencia de usuario]]></category>
		<category><![CDATA[Interacción]]></category>
		<category><![CDATA[Prospectiva de la información]]></category>
		<category><![CDATA[Reflexiones]]></category>
		<category><![CDATA[Sociedad de la Información]]></category>
		<category><![CDATA[Tendencias]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[Web móvil]]></category>
		<category><![CDATA[World Wide Web]]></category>
		<category><![CDATA[comunicación]]></category>
		<category><![CDATA[Designing for the Social Web]]></category>
		<category><![CDATA[evolución]]></category>
		<category><![CDATA[Joshua Porter]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=461</guid>
		<description><![CDATA[Llevo unos días leyéndome el libro de Joshua Porter: Designing for the Social Web lo que me ha llevado a toparme con una reflexión en las páginas 14 y 15 que Porter sumariza en un estupendo gráfico de esta última. En concreto la reflexión viene en torno a la evolución de la comunicación que ha [...]]]></description>
			<content:encoded><![CDATA[<p>Llevo unos días leyéndome el libro de <strong>Joshua Porter:</strong> <a title="Designing for the Social Web" href="http://www.amazon.com/Designing-Social-Web-Joshua-Porter/dp/0321534921">Designing for the Social Web</a> lo que me ha llevado a toparme con una reflexión en las páginas 14 y 15 que Porter sumariza en un estupendo gráfico de esta última.</p>
<p>En concreto la reflexión viene en torno a la evolución de la comunicación que ha tenido lugar en la World Wide Web.</p>
<ul>
<li>Desde los primeros años de su aparición hasta aproximadamente 1998, <strong>la comunicación que se daba era fundamentalmente unidireccional</strong>, de los sitios de las empresas a las personas. El contenido era estático, los sitios eran estáticos, las tecnologías inmaduras y el potencial de la Web como canal, medio y espacio social no se había desarrollado todavía. La Usabilidad y la Experiencia de Usuario no se habían formalizado.</li>
<li>Desde 1998 la evolución de las redes de telecomunicaciones, del hardware y del software (especialmente con los hitos históricos que supusieron la aparición de Windows 95, 98 y XP en el 2001 con sus interfaces gráficas) unidos a la extraordinaria mejora de la facilidad de uso de los sistemas operativos, de los navegadores y de la aparición de tarifas planas para navegar, popularizaron definitivamente la Web. Las tecnologías web permitieron desarrollar las primeras aplicaciones en línea. La Interacción (en mayúsculas) comenzó a tomar fuerza en la Red de redes  y con ella, la Arquitectura de Información.<strong> La comunicación comenzó a ser bidireccional aunque muy limitada todavía, entre aplicaciones y personas</strong>.</li>
<li>En torno a 2001 se da un punto de inflexión. La <strong>Web </strong>comienza a volverse más <strong>semántica</strong>. En 1999 se publica la <a href="http://en.wikipedia.org/wiki/History_of_web_syndication_technology">primera especificación del RSS</a> y aparece el cliente de mensajería instantánea Messenger de Microsoft. Google, fundado en 1998, comienza a tomar fuerza. Las tecnologías web maduran.<strong> La comunicación bidireccional empieza a tomar realmente fuerza y a fluir entre aplicaciones y personas</strong>. Eran los inicios de la Web 2.0 y de la comunicación de &#8220;n&#8221; a &#8220;n&#8221; o de muchos a muchos, entre individuos.</li>
<li>A finales de 2003 &#8211; 2004 &#8220;estalla&#8221; la <strong>Web Social</strong>. O&#8217;Reilly populariza el <a href="http://es.wikipedia.org/wiki/Web_2.0">término de Web 2.0 en su famosa conferencia</a>. En 2003 aparecen <a href="http://es.wikipedia.org/wiki/Myspace">MySpace</a>, Linkedin y XING (hasta 2006 llamada OpenBC). Un año más tarde, en 2004 surge <a href="http://es.wikipedia.org/wiki/Facebook">Facebook</a>, y en 2006 <a href="http://es.wikipedia.org/wiki/Tuenti">Tuenti</a>. Las interfaces empieza a volverse más líquidas y las <a href="http://es.wikipedia.org/wiki/Rich_Internet_Applications">aplicaciones y la interacción, ricas, con la constante evolución de las tecnologías</a>. La plataforma estaba preparada. La potencia del hardware y la evolución del software y del diseño de las interfaces comienza a ser suficiente para dar lugar a una interacción mucho más fluida, sincrónica (simultánea en el tiempo) y asincrónica entre las personas, los sitios y las aplicaciones web.</li>
</ul>
<p>Esta trayectoria se recoge y sumariza en el gráfico original de <strong>Joshua Porter</strong> publicado  en la página 15 de<strong> Designing for the Social Web</strong> que me he permitido traducir y adaptar para mejorar su comprensión:</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/02/EvolucionComunicacion_WorldWideWeb.png"><img class="aligncenter size-full wp-image-463" title="EvolucionComunicacion_WorldWideWeb" src="http://www.tentandote.com/wp-content/uploads/2010/02/EvolucionComunicacion_WorldWideWeb.png" alt="Evolución de la comunicación en la World Wide Web" width="750" height="519" /></a></p>
<p>En la actualidad estamos viviendo otro profundo cambio en el modelo de comunicación que gira en torno a los siguientes paradigmas:</p>
<ul>
<li> el declive del papel como principal soporte informativo, que está siendo reemplazado por la aparición de dispositivos digitales como el <a href="http://es.wikipedia.org/wiki/Ipad">iPad</a> y los tablet que permiten una conexión permanente con la Web.</li>
<li>La tendencia de las aplicaciones a migrarse a la nube lo que implica que la información pueda ser accedida en cualquier momento, desde cualquier lugar y por múltiples tipos de dispositivos más allá de los PCs y portátiles (particularmente los teléfonos inteligentes o smartphones como el iPhone o los basados en el sistema operativo <a href="http://www.android.com/">Android</a>).</li>
<li>La aparición de nuevos dispositivos que extienden la <a href="http://es.wikipedia.org/wiki/H%C3%A1ptica">interacción háptica</a> o táctil al mundo digital.</li>
<li>La mejora de las redes de telecomunicaciones y especialmente la <a href="http://es.wikipedia.org/wiki/4G">introducción del 4G</a> que en breve permitirá comunicaciones entre 100 Mbps y 1 Gbps, incluso en dispositivos móviles.</li>
</ul>
<p>Las tecnologías existen y están bastante maduras. Se ha avanzado extraordinariamente en los 15 últimos años en lo que a Usabilidad, Arquitectura de Información y Diseño de Interacción se refiere.</p>
<p><strong>Ahora es cuando los aparatos y las interfaces comienzan a diluirse y hacerse verdaderamente invisibles para centrarse en los humanos</strong> y cuando la <a href="http://es.wikipedia.org/wiki/Comunicaci%C3%B3n_multimodal">comunicación comienza a ser realmente natural y multimodal</a>. <strong>Una comunicación humana centrada en los humanos y para los humanos, no para usuarios que sufren la tecnología</strong>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/02/09/la-evolucion-de-la-comunicacion-en-la-world-wide-web/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Arquitectura de Información y Diseño de Interacción, dos disciplinas diferenciadas en el marco de la Experiencia de Usuario</title>
		<link>http://www.tentandote.com/2010/01/18/arquitectura-de-informacion-y-diseno-de-interaccion-dos-disciplinas-relacionadas-en-el-marco-de-la-experiencia-de-usuario/</link>
		<comments>http://www.tentandote.com/2010/01/18/arquitectura-de-informacion-y-diseno-de-interaccion-dos-disciplinas-relacionadas-en-el-marco-de-la-experiencia-de-usuario/#comments</comments>
		<pubDate>Mon, 18 Jan 2010 20:48:04 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Arquitectura de información]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Experiencia de usuario]]></category>
		<category><![CDATA[Reflexiones]]></category>
		<category><![CDATA[Thinkepi]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=351</guid>
		<description><![CDATA[Dos de las mejores cosas que tiene el escribir un blog son el esfuerzo que exige para mantenerte al día si quieres publicar algo mínimamente decente, y los comentarios que hacéis, con los que en ocasiones uno aprende mucho, y más, que lo que ofrece. El otro día a partir de uno de esos comentarios [...]]]></description>
			<content:encoded><![CDATA[<p>Dos de las mejores cosas que tiene el escribir un blog son el esfuerzo que exige para mantenerte al día si quieres publicar algo mínimamente decente, y los comentarios que hacéis, con los que en ocasiones uno aprende mucho, <strong>y más</strong>, que lo que ofrece. El otro día a partir de uno de esos comentarios que hizo <a href="http://www.linkedin.com/in/sortegasa"><strong>Sergio Ortega Santamaría</strong></a> fuí a dar con un <strong>estupendo post de su blog titulado</strong>:</p>
<p style="text-align: center;"><strong><a href="http://www.sortega.com/blog/%C2%BFel-paraguas-sera-la-experiencia-de-usuario/#comments">¿El paraguas será la Experiencia de Usuario?</a></strong></p>
<p style="text-align: left;">sumamente interesante que ha inspirado dos breves notas Thinkepi. Una, la tenéis un poco más abajo. Le he pedido permiso a Sergio y a <a href="http://www.torresburriel.com/weblog/">Daniel Torres Burriel</a> para reproducir íntegramente su post y comentarios, para publicarlos como una sóla unidad documental en el próximo anuario <a href="http://www.thinkepi.net/">Thinkepi</a> en papel y en este blog, así como para distribuirlos en la lista de Información y Documentación <a href="http://www.rediris.es/list/info/iwetel.html.es">Iwetel</a></p>
<p style="text-align: left;">A ambos, <strong>muchas gracias</strong>.</p>
<p style="text-align: left;">La otra, posiblemente vea la luz la semana que viene. Os dejo con el post de Sergio y el Thinkepi:</p>
<p style="text-align: center;">&#8211;0&#8211;</p>
<p><strong>¿EL PARAGUAS SERÁ LA EXPERIENCIA DE USUARIO?</strong></p>
<p>SERGIO ORTEGA SANTAMARÍA. Post publicado el 28 dic. 2009</p>
<p style="text-align: center;">&#8211;0&#8211;</p>
<p>Recogiendo la metáfora del paraguas de UXnet que describíamos en el Informe APEI, Thomas Memmel reflexiona sobre la integración de roles y disciplinas bajo el concepto Experiencia de Usuario (UX).</p>
<p><strong><a href="http://www.tentandote.com/wp-content/uploads/2010/01/ParaguasUx.gif"><img class="aligncenter size-full wp-image-400" title="ParaguasUx" src="http://www.tentandote.com/wp-content/uploads/2010/01/ParaguasUx.gif" alt="" width="720" height="540" /></a><br />
</strong></p>
<p>Lo curioso es que el autor no duda en augurar para el 2010 la desaparición de la Arquitectura de Información (IA), disciplina que sería absorbida por el Diseño de Interacción (IxD):</p>
<blockquote><p>&#8220;La Arquitectura de Información se ha asociado especialmente con la definición de estructuras de contenido y navegación estáticas. Hoy día, las tecnologías como Silverlight, AJAX y Flash han convertido a la Web en un medio altamente interactivo. Debido a que el diseño de estos sistemas interactivos es conocido con el término de Diseño de Interacción (IxD) ésta absorberá a la AI como disciplina. Naturalmente, esto vendrá acompañado de una necesidad creciente de Arquitectos de Información que extiendan sus capacidades de diseño y su conocimiento más allá de las formas estáticas de representación del contenido&#8221;.</p>
<p>&#8220;IA was especially associated with an expertise in building content and navigation structures that rather had a static form. Today, technologies like Silverlight, AJAX and Flash turn the web into a highly interactive media. Because the design of interactive systems is headlined with the term interaction design (IxD), it will absorb IA as a discipline. Naturally, this comes with an increasing need for IAs to enhance their knowledge and design capabilities beyond static forms of content representation&#8221;.</p></blockquote>
<p>No estoy tan de acuerdo con estas afirmaciones ya que se está reduciendo en exceso la IA  sin valorar su importancia en otros contextos y entornos de desarrollo.</p>
<p>Por esa y otras muchas razones prefiero pensar en el 2010 como el año en el que descubrimos el verdadero sentido de un enfoque multidisplinar donde puedan surgir nuevas actividades profesionales, nuevos roles y nuevas formas de trabajo que sirvan para aunar esfuerzos. Si la UX nos ayuda a encontrar el nexo de unión, bienvenida sea.</p>
<p>Pero creo que la clave no está en remover la terminología que está en la superficie como en llegar a una mayor y profunda comprensión de cada disciplina y de de la tarea y la responsabilidad que cada uno debemos asumir en el trabajo conjunto.</p>
<p>En ese sentido me parece muy apropiado el Dilema de Branzi y los últimos párrafos de esa lectura profunda y reflexiva de Buchanan (PDF, 52Kb), recordada por Ghost in the Pixel, y tan adecuada para estos últimos días de año:</p>
<blockquote><p>&#8220;No hay razón para sentirse infeliz con la pluralidad de las exploraciones del diseño en el mundo contemporáneo mientras no nos hagan caer en ideologías, y cada uno de nosotros podamos elegir nuestro propio camino dentro de unos razonables límites de responsabilidad, basada en discusiones meditadas acerca de lo que es bueno, oportuno, útil o placentero.<br />
Podemos preocuparnos por el trabajo que vemos hoy día en torno al diseño gráfico o industrial y estar encantados por una amplia gama de otros trabajos.<br />
El Diseño es muy joven y todavía tiene mucho camino por recorrer en la exploración de su rol en la cultura. Para muchos de nosotros esto significa una comprensión más profunda de las disciplinas del pensamiento del diseño, no simplemente cambios en el estilo y en el tratamiento de su superficie. Esperamos que la calidad de la discusión continúe avanzando y que los diseñadores no se preocupen porque sus ideas y su trabajo sea sometido a un debate más amplio y en profundidad que en el pasado. Tenemos mucho que aprender viviendo en una cultura que no es fija ni inmutable, y esta es, a la vez nuestro placer y nuestra responsabilidad&#8221;.</p>
<p>&#8220;There is no reason to be unhappy with the pluralism of design explorations in the contemporary world, so long as these explorations are not entrapped in ideology and each of us may pursue our own paths in design within the reasonable bounds of responsibility, based on informed discussions of what is good, just, useful, and pleasurable.<br />
We may be distressed by some of the work that we see in graphic and industrial design today and delighted by a wide range of other work.<br />
Design is very young and has far to go in the exploration of its role in culture. For many of us, this means better understanding of the disciplines of design thinking, not merely changes in style and surface treatment. Our hope that the quality of discussion about design continues to improve and that designers do not become afraid of having their ideas and work subjected to wider and more insightful discussion than in the past. We all have much to learn about living together in a culture that is not fixed and changeless, and this is both our pleasure and our responsibility&#8221;.</p></blockquote>
<p>COMENTARIOS:</p>
<p><cite class="fn"><a class="url" rel="external nofollow" href="http://www.torresburriel.com/">torresburriel</a></cite> <span class="says">dice:</span></p>
<div class="comment-meta commentmetadata"><a href="http://www.sortega.com/blog/%c2%bfel-paraguas-sera-la-experiencia-de-usuario/comment-page-1/#comment-1085">28 / Diciembre / 2009 en 21:12</a></div>
<p>Precisamente hoy estaba pensando, en el transcurso de una sesión de trabajo, que la estrategia de diseño basada en la simplicidad por la vía de la priorización hace que la arquitectura de información parezca dejar de tener sentido.</p>
<p>Entiendo que eso sólo sería posible si realmente los proyectos redujeran al máximo su alcance (en cuanto a información, contenidos, funcionalidad), cosa poco probable hoy día, salvo en contados ejemplos: twitter o la versión lite de facebook, por poner dos ejemplos (<a rel="nofollow" href="http://ow.ly/PNDe">http://ow.ly/PNDe</a>).</p>
<div class="comment-author vcard"><cite class="fn"><a class="url" rel="external nofollow" href="http://www.sortega.com/">Sergio</a></cite> <span class="says">dice:</span></div>
<div class="comment-meta commentmetadata"><a href="http://www.sortega.com/blog/%c2%bfel-paraguas-sera-la-experiencia-de-usuario/comment-page-1/#comment-1087">28 / Diciembre / 2009 en 23:40</a></div>
<p>Pero fíjate que aun perdiendo predominancia en algunos proyectos, tal y como señalas, creo que la arquitectura no deja de ser una parte muy importante que siempre esta presente, que no podemos obviar, aunque no hayamos pensado en ella (seguramente porque otro lo ha hecho por nosotros).</p>
<p>De esta manera, desde una perspectiva sistémica, las “propiedades emergentes” de un sistema (equilibrio, funcionalidad, placer de uso… ) no las vamos a encontrar en la arquitectura, en el diseño de la interfaz,en el diseño de interacciones… Creo que dichas propiedades surgen cuando todas esas partes actúan. De ahí la insistencia de valorar la responsabilidad y la tarea de cada actividad profesional en el conjunto.</p>
<p style="text-align: center;">&#8211;0&#8211;</p>
<p style="text-align: left;"><strong>THINKEPI: ARQUITECTURA DE INFORMACIÓN Y DISEÑO DE INTERACCIÓN, DOS DISCIPLINAS DIFERENCIADAS EN EL MARCO DE LA EXPERIENCIA DE USUARIO</strong></p>
<p>En mi opinión, la Arquitectura de Información (AI) no desaparecerá. Creo que el Diseño de Interacción es una cosa y la AI es otra. Ambas a su vez, conforman efectivamente, una parte importante de la Experiencia de Usuario  que veo como marco global. Ahora bien, la AI es la vertiente más &#8220;documental&#8221; del diseño de <strong>espacios de información</strong> y una parte imprescindible e insoslayable de dicho diseño por lo que <strong>no creo ni que desaparezca, ni que pueda ser obviada ni asumida por terceras disciplinas</strong>.</p>
<p>El Diseño de Interacción tiene unos objetivos específicos que no son precisamente los de sistematizar el espacio de información, ni plantear una adecuada navegación, ni facilitar que los elementos o unidades informativas del sitio estén correctamente descritos, de que exista una metaestructura informativa adecuada, de que el contenido sea adecuado, de que se puedan indexar correctamente sus elementos constituyentes, de que se puedan compartir y difundir (vía sindicación de contenidos o terceros medios) o de que puedan ser correcta y fácilmente encontrados y recuperados por parte de los usuarios y gestores de los mismos (o lo que es lo mismo, que sean &#8220;findables&#8221;). Esas tareas no entran dentro de lo que se entiende como Diseño de Interacción y sí dentro de lo que se entiende como Arquitectura de Información.</p>
<p>El Diseño de Interacción se centra principalmente en el diseño de la interfaz y de los elementos con los que interactúa el usuario, en la identificación y análisis de los objetivos y tareas que se dan en un espacio de información, y en el análisis del diseño de los flujos y procesos de interacción en el mismo.</p>
<p>AI y Diseño de Interacción son complementarias. El hecho de que como sintetiza perfectamente Torres Burriel &#8220;la estrategia de diseño basada en la simplicidad por la vía de la priorización [haga] que la arquitectura de información parezca dejar de tener sentido&#8221; y de que ambas disciplinas las lleve a cabo habitualmente la misma persona o profesional de forma recurrente (aunque algún compañero conozco que en algún proyecto ha actuado y actúa exclusiva y únicamente como Arquitecto de Información puro y duro -lo que no es lo usual-) no implica que puedan y deban diferenciarse, ni que la primera vaya a desaparecer absorbida por la segunda. Conviven en el marco de la Experiencia de Usuario.</p>
<p>En cuanto a la denominación de la persona que las ejerce, si se quiere buscar un título común quizá se pueda hablar como se hace ya desde hace algún tiempo de <strong>Arquitectos de Experiencia de Usuario</strong> en lugar de Arquitectos de Información o de Diseñadores de Interacción. Ahora bien, <strong>cada cual que use el nombre que más le convenga o con el que más cómodo se encuentre. El debate está abierto</strong> y creo que es precisamente una consecuencia natural de la evolución de estas disciplinas en los últimos años, lo que por otro lado es una buena muestra de su dinamismo, pertinencia y vigencia, y de que están madurando.</p>
<p><strong>BIBLIOGRAFÍA:</strong></p>
<ul>
<li>Ortega Santamaría, Sergio. ¿El paraguas será la Experiencia de Usuario? [en línea]. Sortega: Comunicación, usabilidad, diseño e interacción. 28 dic. 2009. http://www.sortega.com/blog/%C2%BFel-paraguas-sera-la-experiencia-de-usuario/#comments [Consulta: 06 ene. 2010]</li>
<li>Torres Burriel, Daniel. Weblog: Torresburriel.com [en línea] http://www.torresburriel.com/weblog [Consulta: 7 ene. 2010]</li>
<li>UXNet: The User Experience Network [en línea] http://www.uxnet.org/</li>
<li>Tosete Herranz, Francisco. La rueda de la Experiencia de Usuario [en línea]. Imaginas.net. http://www.imaginas.net/esquemas</li>
<li>Hassan Montero, Yussef, Ortega Santamaría, Sergio. Informe APEI sobre Usabilidad [en línea] no solo usabilidad. http://www.nosolousabilidad.com/manual/1.htm [Consulta: 6 ene. 2001]</li>
<li>Memmel Zuerich, Thomas. Under the umbrella of User Experience &#8211; Usability Engineering and Interaction Design in 2010 [en línea] The usability architect. http://www.usability-architect.com/2009/12/under-umbrella-of-user-experience.html  [Consulta: 6 ene. 2001]</li>
<li>Buchanan, Richard. Branzi&#8217;s Dilemma: Design in Contemporary<br />
Culture [en línea] http://mitpress.mit.edu/journals/DESI/Buchanan.pdf [Consulta: 6 ene. 2001]</li>
<li>Gajendar, Uday. What it all comes down to [en línea] Ghost in the pixel. http://www.ghostinthepixel.com/?p=295</li>
</ul>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px;">http://www.sortega.com/blog/%C2%BFel-paraguas-sera-la-experiencia-de-usuario/#comments</p>
<p>&#8212;&#8212;&#8212;&#8212;<br />
¿El paraguas será la Experiencia de Usuario?<br />
28 de Diciembre de 2009 &#8211; Publicado por Sergio en a debate, experiencia de usuario</p>
<p>Recogiendo la metáfora del paraguas de UXnet que describíamos en el Informe APEI, Thomas Memmel reflexiona</p>
<p>sobre la integración de roles y disciplinas bajo el concepto Experiencia de Usuario (UX).</p>
<p>El paraguas de la UX<br />
Lo curioso es que el autor no duda en augurar para el 2010 la desaparición de la Arquitectura de Información</p>
<p>(IA), disciplina que sería absorbida por el Diseño de Interacción (IxD):</p>
<p>IA was especially associated with an expertise in building content and navigation structures that rather</p>
<p>had a static form. Today, technologies like Silverlight, AJAX and Flash turn the web into a highly interactive</p>
<p>media. Because the design of interactive systems is headlined with the term interaction design (IxD), it will</p>
<p>absporb IA as a discipline. Naturally, this comes with an increasing need for IAs to enhance their knowledge</p>
<p>and design capabilities beyond static forms of content representation.</p>
<p>No estoy tan de acuerdo con estas afirmaciones ya que se está reduciendo en exceso la IA  sin valorar su</p>
<p>importancia en otros contextos y entornos de desarrollo.</p>
<p>Por esa y otras muchas razones prefiero pensar en el 2010 como el año en el que descubrimos el verdadero</p>
<p>sentido de un enfoque multidisplinar donde puedan surgir nuevas actividades profesionales, nuevos roles y</p>
<p>nuevas formas de trabajo que sirvan para aunar esfuerzos. Si la UX nos ayuda a encontrar el nexo de unión,</p>
<p>bienvenida sea.</p>
<p>Pero creo que la clave no está en remover la terminología que está en la superficie como en llegar a una mayor</p>
<p>y profunda comprensión de cada disciplina y de de la tarea y la responsabilidad que cada uno debemos asumir en</p>
<p>el trabajo conjunto.</p>
<p>En ese sentido me parece muy apropiado el Dilema de Branzi y los últimos párrafos de esa lectura profunda y</p>
<p>reflexiva de Buchanan (PDF, 52Kb), recordada por Ghost in the Pixel, y tan adecuada para estos últimos días de</p>
<p>año:</p>
<p>There is no reason to be unhappy with the pluralism of design explorations in the contemporary world, so</p>
<p>long as these explorations are not entrapped in ideology and each of us may pursue our own paths in design</p>
<p>within the reasonable bounds of responsibility, based on informed discussions of what is good, just, useful,</p>
<p>and pleasurable.<br />
We may be distressed by some of the work that we see in graphic and industrial design today and delighted</p>
<p>by a wide range of other work.<br />
Design is very young and has far to go in the exploration of its role in culture. For many of us, this</p>
<p>means better understanding of the disciplines of design thinking, not merely changes in style and surface</p>
<p>treatment. Our hope that the quality of discussion about design continues to improve and that designers do not</p>
<p>become afraid of having their ideas and work subjected to wider and more insightful discussion than in the</p>
<p>past. We all have much to learn about living together in a culture that is not fixed and changeless, and this</p>
<p>is both our pleasure and our responsibility.<br />
&#8212;&#8212;&#8212;&#8212;</p>
<p>Opinión personal, la AI no desaparecerá como disciplina ni se puede fusionar ni asimilar con otras. Creo que el</p>
<p>Diseño de Interacción es una cosa y la AI es otra. Ambas a su vez conforman parte de la Experiencia de Usuario</p>
<p>que veo como marco global del Diseño Centrado en el Usuario. Desde mi punto de vista la AI es la vertiente más</p>
<p>&#8220;documental&#8221; del diseño de espacios de información y una parte imprescindible e insoslayable de dicho diesño.</p>
<p>El Diseño de Interacción tiene unos objetivos específicos que no son precisamente los de sistematizar el</p>
<p>espacio de información, ni plantear una adecuada navegación, ni facilitar que los elementos o unidades</p>
<p>informativas del sitio estén correctamente descritos, de que exista una metaestructura informativa adecuada, de</p>
<p>que el contenido sea adecuado, de que se puedan indexar correctamente sus elementos constituyentes, de que se</p>
<p>puedan compartir y difundir (vía sindicación de contenidos o terceros medios) o de que puedan ser correcta y</p>
<p>fácilmente encontrados y recuperados por parte de los usuarios y gestores de los mismos (o lo que es lo mismo,</p>
<p>que sean &#8220;findables&#8221;).</p>
<p>El Diseño de Interacción se centra principalmente en el diseño de la interfaz y de los elementos con los que</p>
<p>interactúa el usuario, en el diseño de los flujos y en los procesos de interacción para llevar a cabo las</p>
<p>tareas dentro del sitio.</p>
<p>AI y Diseño de Interacción son complementarias. El hecho de que como sintetiza perfectamente Daniel &#8220;la</p>
<p>estrategia de diseño basada en la simplicidad por la vía de la priorización [haga] que la arquitectura de</p>
<p>información parezca dejar de tener sentido&#8221; y de que ambas disciplinas las lleve a cabo la misma persona de</p>
<p>forma recurrente (aunque algún compañero conozco que en algún proyecto ha actuado y actúa exclusiva y</p>
<p>únicamente como Arquitecto de Información puro y duro) no implica que puedan y deban diferenciarse. En este</p>
<p>sentido creo qué, efectivamente la Experiencia de Usuario debe ser considerada como la disciplina paraguas, o</p>
<p>marco.</p>
<p>En cuanto a la denominación de la persona que las ejerce, quizá sea mejor hablar como se hace ya desde hace</p>
<p>algún tiempo en algunos foros norteamericanos de Arquitectos de Experiencia de Usuario en lugar de Arquitectos</p>
<p>de Información o de Diseñadores de Interacción.</p>
<p>Pero como digo, es tan sólo una opinión personal. El debate está abierto y creo que es precisamente una</p>
<p>consecuencia natural de la evolución de las disciplinas en estos últimos años, lo que es buena muestra de su</p>
<p>dinamismo, pertinencia y vigencia, y de que están madurando.</p>
<p>Incluso en cuanto a Twitter creo que la Arquitectura de Información es clave. Ayer precisamente estaba</p>
<p>reflexionando sobre ello. Twitter es pura Arquitectura de Información, sólo que ésta no es precisamente y que</p>
<p>se diga muy explícita para los usuarios.</p>
<p>En Documentación se habla de Lenguajes de Clasificación, de taxonomías de contenidos, de descriptores (palabras</p>
<p>simples o términos compuestos que describen un ítem informativo asignados por un experto en información</p>
<p>-documentalista, bibliotecario, archivero&#8230;-) de palabras clave (cuya diferencia básicamente respecto a los</p>
<p>descriptores es que son aquellas que un usuario, que no tiene por qué ser profesional, asigna al documento).</p>
<p>La World Wide Web supone un nuevo canal que introduce unos nuevos factores característicos interesantísimos en</p>
<p>cuanto a cinco ejes -creación, descripción, compartición, difusión y recuperación de la información- que pueden</p>
<p>ser equiparados a lo que &#8220;tradicionalmente&#8221; se ha concebido como operaciones de la cadena documental, factores</p>
<p>que no se dan mediando documentos o soportes físicos y que son:</p>
<p>- Sincronía, tanto por parte del productor del ítem informativo como del usuario del mismo en el momento en que</p>
<p>se crea, describe, comparte&#8230;,<br />
- Inmediatez en su producción, descripción, difusión&#8230;,<br />
- Socialización (creación colaborativa, descripción colaborativa, compartición colaborativa&#8230;)</p>
<p>En la World Wide Web hablamos de folksonomías por contraposición a los lenguajes de clasificación y las</p>
<p>taxonomías de contenidos y ahora, creo que deberíamos comenzar a hablar también (y estudiar) de hastags en</p>
<p>contraposición a los descriptores y las palabras clave.</p>
<p>Twitter es un compendio de todas estas características que aúna a creadores, usuarios y un extraordinario</p>
<p>ecosistema social. En su esencia es pura (¿micro?)Arquitectura de Información e Ingeniería Social.</p>
<p>Desde un punto de vista documental es fascinante.</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/01/18/arquitectura-de-informacion-y-diseno-de-interaccion-dos-disciplinas-relacionadas-en-el-marco-de-la-experiencia-de-usuario/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Controles de interfaz: deslizadores, filtros en navegación de segundo nivel y diseño de sitio</title>
		<link>http://www.tentandote.com/2010/01/03/controles-de-interfaz-deslizadores-filtros-en-navegacion-de-segundo-nivel-y-diseno-de-sitio/</link>
		<comments>http://www.tentandote.com/2010/01/03/controles-de-interfaz-deslizadores-filtros-en-navegacion-de-segundo-nivel-y-diseno-de-sitio/#comments</comments>
		<pubDate>Sun, 03 Jan 2010 19:33:38 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de información]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño gráfico]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[Boo.com]]></category>
		<category><![CDATA[Clearleft.com deslizadores]]></category>
		<category><![CDATA[control de interfaz]]></category>
		<category><![CDATA[filtros en navegación de segundo nivel]]></category>
		<category><![CDATA[Interacción]]></category>
		<category><![CDATA[menús de navegación]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=337</guid>
		<description><![CDATA[Algunos controles de interfaz y páginas web que me han llamado la atención navegando: En Boo.com me he encontrado un curioso filtro. En la home se puede observar junto al box de búsqueda por ciudad o nombre de hotel un deslizador que permite restringir los resultados a los hoteles de &#8220;n&#8221; estrellas. El uso del [...]]]></description>
			<content:encoded><![CDATA[<p>Algunos controles de interfaz y páginas web que me han llamado la atención navegando:</p>
<p>En <a href="http://www.boo.com/">Boo.com</a> me he encontrado un curioso filtro. En la home se puede observar junto al box de búsqueda por ciudad o nombre de hotel un deslizador que permite restringir los resultados a los hoteles de &#8220;n&#8221; estrellas. El uso del deslizador permite establecer un rango de las categorías de hoteles que nos gustaría consultar: entre ninguna y 3 estrellas, entre 2 y 5 estrellas..</p>
<p><a href="http://www.tentandote.com/wp-content/uploads/2010/01/Boo_FiltroHoteles.gif"><img class="aligncenter size-full wp-image-338" title="Boo.com Deslizador. Filtro de hoteles" src="http://www.tentandote.com/wp-content/uploads/2010/01/Boo_FiltroHoteles.gif" alt="Boo.com Deslizador. Filtro de hoteles" width="650" height="365" /></a></p>
<p>Lograr el mismo comportamiento sin utilizar el deslizador y con controles &#8220;más estándares&#8221; es complicado y menos usable. Un posible diseño sería disponer de dos combos desplegables, uno rotulado como &#8220;hoteles desde&#8230;&#8221; y cuyos valores fueran desde ninguna estrella hasta 5, separando ambos combos la palabra &#8220;hasta&#8221; y otro combo rotulado como &#8220;hoteles hasta&#8230;&#8221; con valores que deberían variar en función de la selección que hiciera el usuario en el primer combo.</p>
<p>Muy complejo. Mejor el deslizador aunque habría que chequear su uso de cara a accesibilidad para asegurarnos de que no da ningún problema.</p>
<p>Por cierto, la forma en que se ha resuelto el diseño gráfico de las pestañas en ese módulo de búsqueda es francamente mala cuesta muchísimo percibirlas como tales y establecer la correcta asociación entre la pestaña que está activa y la parte inferior.</p>
<p>Cuando se ha hecho una búsqueda cualquiera me ha llamado también la forma en que han resuelto el sistema de navegación más allá de la propia home:</p>
<div id="attachment_339" class="wp-caption aligncenter" style="width: 660px"><a href="http://www.tentandote.com/wp-content/uploads/2010/01/Boo_NavigationBar.png"><img class="size-full wp-image-339" title="Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación" src="http://www.tentandote.com/wp-content/uploads/2010/01/Boo_NavigationBar.png" alt="Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación" width="650" height="405" /></a><p class="wp-caption-text">Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación</p></div>
<p>En el segundo nivel de navegación, situados a la izquierda, los dos combos desplegables permiten escoger el país y la ciudad y en función de la selección realizada, el resto de opciones de segundo nivel de navegación que a su vez actúan como filtros, se actualizan. Algo similar al sistema de navegación de <a href="http://www.idealista.com">Idealista.com</a> u <a href="http://www.11870.com">11870.com</a>. Quizá, lo mejor de ello sea lo compacto que queda, y la fuerte jerarquía y relación horizontal que se establece. Normalmente los filtros solemos verlos en una columna situada a la derecha y cuyos elementos se jerarquizan de arriba a abajo. Esta es otra opción de navegación. Me gusta.</p>
<p>Cambiando de sitio, navegando he ido a dar con una consultora inglesa cuyo diseño del sitio me parece francamente majo: <a href="http://clearleft.com/">Clearleft.com</a></p>
<p>Un diseño muy limpio, una escala de colores muy cálida, cercana, verde lima, con todos los valores positivos que se le asocian. En la home dejan bien claro lo que hacen, sus fortalezas, lo que quieren y la forma de contacto todo por encima del pliegue de pantalla y haciendo scroll vertical, desplegando el resto de información importante en tres bloques adicionales &#8220;Web design &amp; Consultancy&#8221;, &#8220;Clearleft news&#8221; y &#8220;What next&#8221; resaltados fuertemente gráficamente sobre un rectángulo de fondo marrón con un borde de 1px blanco que lo potencia respecto del fondo y que funciona como conector entre las camas de color de los cuatro bloques en los que está separada la home, el primero situado por encima del pliegue de pantalla y los tres restantes citados.</p>
<p>La retícula en tres columnas al 33% con sus medianiles y que rompen en el primer módulo (el pliegue de pantalla) en el que se entra al 100% de ancho  y el último &#8220;What next&#8221; en el que las columnas se distribuyen al 66% y 33% respectivamente dan fuerza, ritmo e interés al diseño.</p>
<p>Se utiliza una jerarquía tipográfica muy clara jugando con los tamaños y con los cuerpos en negrita para centrar la atención donde interesa. Se hace un uso muy comedido de la imagen y con excepción del tercer módulo, se cuida bastante la carga textual de cada bloque.</p>
<div id="attachment_340" class="wp-caption aligncenter" style="width: 660px"><a href="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_Home.png"><img class="size-full wp-image-340" title="Home de la consultora de UX inglesa Clearleft.com" src="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_Home.png" alt="Home de la consultora de UX inglesa Clearleft.com" width="650" height="2034" /></a><p class="wp-caption-text">Home de la consultora de UX inglesa Clearleft.com</p></div>
<p>Me gusta el detalle de las pestañas superiores y como crean una fuerte tensión visual rompiendo la linealidad del bloque de la cabecera con las opciones de navegación, y la pestaña activa que conecta la cabecera con el módulo inferior al desbordar sus límites. Utilizan además una sombra creando un efecto de oclusión o 3D sutil, para resaltarla. Asimismo, me gusta también el efecto de hover en el que se establece claramente el estado de transición antes de hacer clic en la pestaña sobre la que se encuentra situado el cursor:</p>
<div id="attachment_342" class="wp-caption aligncenter" style="width: 590px"><a href="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_TabsTransitionState1.png"><img class="size-full wp-image-342" title="Clearleft.com Pestañas de navegación. Estado" src="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_TabsTransitionState1.png" alt="Estado de transición de las pestañas de la navegación principal. Cuando el cursor se posiciona encima de una se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada" width="580" height="158" /></a><p class="wp-caption-text">Estado de transición de las pestañas de la navegación principal. Cuando el cursor se posiciona encima de una (en este caso &quot;What we do&quot;) se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada, y su cuerpo cambia de color a gris oscuro</p></div>
<p>Por último, como comentaba, se hace un buen uso de la imagen. En la captura, la página del equipo. Muy buen detalle el romper la linealidad recta del diseño alabeando ligeramente a izquierda y derecha las fotos de los miembros y superponiéndo las esquinas unas encima de otras como si las tuviéramos encima de una mesa y no enfrente de nosotros:</p>
<div id="attachment_345" class="wp-caption aligncenter" style="width: 660px"><a href="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_WhoWeAre2.png"><img class="size-full wp-image-345" title="Clearleft.com Who we are" src="http://www.tentandote.com/wp-content/uploads/2010/01/Clearleft_WhoWeAre2.png" alt="Equipo de trabajo de Clearleft.com" width="650" height="929" /></a><p class="wp-caption-text">Equipo de trabajo de Clearleft.com</p></div>
<p>Por cierto, <strong>no tengo absolutamente nada que ver con ellos</strong>, ni les conozco ni pienso irme a trabajar a Inglaterra. <strong>Simplemente, me gusta el diseño de su site</strong>. Por estos lares también tenemos muy buenos ejemplos, y por latinoamérica también.</p>
<p>Si vendes consultoría de Experiencia de Usuario hay que predicar con el ejemplo. Si tu web tiene más de 4 años quizá sea hora de ir dándola una vuelta y actualizándola. Al fin y al cabo, la Web, es un organismo mutable y vivo, extremadamente dinámico. Y una de las mejores tarjetas de presentación de tu trabajo es el site de tu consultora. Yo no confiaría en alguién cuya imagen no refleja un mínimo de calidad, pero lo mismo es que soy un poco de <a href="http://images.google.es/images?hl=es&amp;source=hp&amp;q=marte&amp;btnG=Buscar+im%C3%A1genes&amp;gbv=2&amp;aq=f&amp;oq=#start=0&amp;imgsz=l">Marte</a>, quién sabe :-)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2010/01/03/controles-de-interfaz-deslizadores-filtros-en-navegacion-de-segundo-nivel-y-diseno-de-sitio/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Utilizar el color calabaza o naranja para mejorar la usabilidad de los botones de acción</title>
		<link>http://www.tentandote.com/2009/12/19/utilizar-el-color-calabaza-o-naranja-para-mejorar-la-usabilidad-de-los-botones-de-accion/</link>
		<comments>http://www.tentandote.com/2009/12/19/utilizar-el-color-calabaza-o-naranja-para-mejorar-la-usabilidad-de-los-botones-de-accion/#comments</comments>
		<pubDate>Sat, 19 Dec 2009 13:21:29 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de información]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Interacción]]></category>
		<category><![CDATA[Usabilidad]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=283</guid>
		<description><![CDATA[Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador. Una captura de la página de de Apple para la descarga de Safari 4.0: Fijaros cómo [...]]]></description>
			<content:encoded><![CDATA[<p>Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador.</p>
<p>Una captura de la <a href="http://www.apple.com/safari/download/">página de de Apple para la descarga de Safari 4.0</a>:</p>
<p><img class="aligncenter size-full wp-image-284" title="Safari_Button2_Blue" src="http://www.tentandote.com/wp-content/uploads/2009/12/Safari_Button2_Blue.png" alt="Safari_Button2_Blue" width="700" height="836" /></p>
<p>Fijaros cómo se utilliza el color azul degradado para el botón de la descarga y el naranja en el rectángulo superior de la página para crear un punto focal de atención. Al igual que podemos establecer jerarquías de información durante el diseño de un componente con sus correspondientes elementos, podemos establecer jerarquías de información basadas en colores.</p>
<p>En este diseño creo que el uso del color no es óptimo y se puede mejorar. Como <a href="http://www.tentandote.com/2009/11/08/universos-de-busqueda-botones-microinteracciones-y-usabilidad-en-buscadores/">me comentaba un compañero el otro día, Fernando</a>, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul. Generalizando más, también para las descargas y las llamadas a la acción.</p>
<p>Fijaros en la diferencia entre la pantalla de arriba y la de abajo con el código de color del botón y del rectángulo de la esquina invertido:</p>
<p><img class="aligncenter size-full wp-image-285" title="Safari_Button2_Orange" src="http://www.tentandote.com/wp-content/uploads/2009/12/Safari_Button2_Orange.png" alt="Safari_Button2_Orange" width="700" height="836" /></p>
<p>Habría que testarlo pero apuesto a que este segundo tendría un ratio de número de clics mayor que con el actual botón azul. La jerarquía de color es óptima (el más cálido y llamativo es el elemento más importante en el que se quiere crear el punto focal de atención -el botón de la descarga-) y el azul para el otro elemento que crea un punto focal de atención secundario en la página tanto por su color característico frente al gris y al blanco que lo rodea, como por su forma triangular que rompe con todas las líneas rectas y bordes redondeados del diseño.</p>
<p>AOL, por ejemplo, también usa el naranja-calabaza para el botón de buscar del buscador de su home:</p>
<div id="attachment_288" class="wp-caption aligncenter" style="width: 710px"><img class="size-full wp-image-288" title="AOL_ButtonOrangeSearch" src="http://www.tentandote.com/wp-content/uploads/2009/12/AOL_ButtonOrangeSearch.png" alt="Botón de buscar del buscador principal en la home de AOL" width="700" height="161" /><p class="wp-caption-text">Botón de buscar del buscador principal en la home de AOL</p></div>
<p>Curiosamente en la pantalla de logado del webmail invierten el patrón y centran la atención en el botón de registrarse y crear cuenta frente al de logarse:</p>
<div id="attachment_290" class="wp-caption aligncenter" style="width: 660px"><img class="size-full wp-image-290" title="AOL_Mail_ColorsButton_BlueOrange" src="http://www.tentandote.com/wp-content/uploads/2009/12/AOL_Mail_ColorsButton_BlueOrange.png" alt="Botón de logado de color azul en AOL y naranja para el de crear nueva cuenta" width="650" height="412" /><p class="wp-caption-text">Botón de logado de color azul en AOL y naranja para el de registrarse y crear nueva cuenta</p></div>
<p>Yahoo España y Yahoo internacional siguen el mismo patrón de colores para los botones del buscador y de acción:</p>
<div id="attachment_291" class="wp-caption aligncenter" style="width: 710px"><img class="size-full wp-image-291" title="YahooEspana_ColorButtonOrange" src="http://www.tentandote.com/wp-content/uploads/2009/12/YahooEspana_ColorButtonOran.png" alt="Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario" width="700" height="258" /><p class="wp-caption-text">Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario</p></div>
<p>En Amazon.com usan el naranja como color para el botón de &#8220;Mostrar todos los departamentos&#8221; y el botón para lanzar la búsqueda con el rótulo &#8220;Go&#8221; que además lo hacen circular para convertirlo en un punto focal de atención por su forma (el círculo es un elemento que añade una fuerte tensión visual e interés a cualquier diseño):</p>
<div id="attachment_292" class="wp-caption aligncenter" style="width: 660px"><img class="size-full wp-image-292" title="Amazon_ColorButtonMenuNavig" src="http://www.tentandote.com/wp-content/uploads/2009/12/Amazon_ColorButtonMenuNavig.png" alt="Botones de color naranja de &quot;Mostrar todos los departamentos&quot; y ejecutar búsqueda de Amazon" width="650" height="270" /><p class="wp-caption-text">Botones de color naranja de &quot;Mostrar todos los departamentos&quot; y ejecutar búsqueda de Amazon</p></div>
<p>En lugar del naranja-calabaza, <a href="http://www.mozilla.com/en-US/">Firefox utiliza un color verde para el botón de descarga</a>, también admisible. Originalmente el verde que utilizaban era muy oscuro y con el paso del tiempo se ha ido aclarando mucho. Además incorporan la palabra &#8220;Free&#8221; al rótulo principal con lo que han conseguido, como comenta Yusef (no encuentro el enlace, si localizo la presentación donde lo ví lo pongo) incrementar el número de descargas del navegador.</p>
<p>En este caso particular es posible que la elección del color verde para el botón sea plenamente consciente e intencionada para potenciar el logotipo de Firefox y no robarle protagonismo. Los colores naranja, calabaza y amarillo otorgan gran predominancia al logotipo junto al hecho de que sea redondo frente al resto de elementos de líneas rectangulares (con excepción de las palomas, no entiendo el motivo de que figuren ahí al igual que el ¿altavoz? ¿biberón? de la cañería) convierténdolo en un punto focal de atención muy fuerte. En la página creo que hay demasiado ruido por el uso de la imagen de fondo lo que va en detrimento de la usabilidad de la tarea principal a la que está enfocada la página -la descarga del navegador- si la quitasen o planteasen otro diseño mucho más limpio como el de Apple posiblemente obtendrían un mayor número de descargas:</p>
<div id="attachment_289" class="wp-caption aligncenter" style="width: 660px"><img class="size-full wp-image-289" title="Firefox_DownloadButton" src="http://www.tentandote.com/wp-content/uploads/2009/12/Firefox_DownloadButton.png" alt="Botón verde de descarga de Firefox" width="650" height="545" /><p class="wp-caption-text">Botón verde de descarga de Firefox</p></div>
<p>El <a href="http://www.usolab.com/wl/2009/11/el-color-capaz-de-mejorar-nuestra-experiencia.php">uso de los colores es un aspecto crítico para las webs</a>.</p>
<p>Es necesario conocer los fundamentos básicos de la teoría del color para poder juzgar de manera mínimamente objetiva y con razones y argumentos de peso por qué funcionan unos diseños y otros no. De nuevo, queda pendiente publicar un post (otro) sobre colores y usabilidad. El tema es realmente fascinante y mucho más complejo de lo que uno podría pensar a priori, y lo más llamativo, es un aspecto al que prácticamente hasta hace muy poco no se le ha comenzado a prestar atención más allá de la pura faceta estética o emocional cuando en realidad, es un aspecto fundamental para la usabilidad de cualquier interfaz.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2009/12/19/utilizar-el-color-calabaza-o-naranja-para-mejorar-la-usabilidad-de-los-botones-de-accion/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>La Interfaz Humana como evolución de los Sistemas Operativos y los navegadores</title>
		<link>http://www.tentandote.com/2009/12/05/la-interfaz-humana-como-evolucion-de-los-sistemas-operativos-y-los-navegadores/</link>
		<comments>http://www.tentandote.com/2009/12/05/la-interfaz-humana-como-evolucion-de-los-sistemas-operativos-y-los-navegadores/#comments</comments>
		<pubDate>Sat, 05 Dec 2009 16:02:10 +0000</pubDate>
		<dc:creator>tentandote</dc:creator>
				<category><![CDATA[Controles de interfaz]]></category>
		<category><![CDATA[Diseño de interacción]]></category>
		<category><![CDATA[Diseño de interfaces]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Interacción]]></category>
		<category><![CDATA[Interfaz]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Navegadores - browsers]]></category>
		<category><![CDATA[Tendencias]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[World Wide Web]]></category>

		<guid isPermaLink="false">http://www.tentandote.com/?p=257</guid>
		<description><![CDATA[Cuando desde la Fundación Mozilla se afirma que no están interesados en desarrollar o convertir Firefox en un Sistema Operativo están siendo literalmente sinceros&#8230; &#8230;porque no están desarrollando un Sistema Operativo. Lo que están desarrollando es una Interfaz Humana. O lo que es lo mismo están evolucionando el concepto de los actuales sistemas operativos que [...]]]></description>
			<content:encoded><![CDATA[<p>Cuando desde la Fundación Mozilla se afirma que no están interesados en desarrollar o convertir Firefox en un Sistema Operativo están siendo literalmente sinceros&#8230;</p>
<p>&#8230;porque no están desarrollando un Sistema Operativo. Lo que están desarrollando es una Interfaz Humana.</p>
<p>O lo que es lo mismo están evolucionando el concepto de los actuales sistemas operativos que están tendiendo a converger en la nube, a ser multidispositivos y multimodales.</p>
<p>Intento explicarlo de forma breve.</p>
<p>Me estoy terminando de leer <a href=".com/books?id=D39vjmLfO3kC&amp;dq=the+humane+interface&amp;printsec=frontcover&amp;source=bn&amp;hl=en&amp;ei=RDIaS5qIIsK64QaOlpnyAg&amp;sa=X&amp;oi=book_result&amp;ct=result&amp;resnum=5&amp;ved=0CBkQ6AEwBA#v=onepage&amp;q=&amp;f=false">&#8220;The Humane Interface: New directions for designing interactive systems&#8221;</a> de <a href="http://en.wikipedia.org/wiki/Jef_Raskin">Jef Raskin</a>, el padre de Aza, jefe de Experiencia de Usuario de Mozilla Labs. El título es literal y lo dice todo acerca de lo que están haciendo los ingenieros de la Fundación Mozilla:</p>
<p style="text-align: center;">&#8220;La Interfaz Humana: Nuevas direcciones para diseñar sistemas interactivos&#8221;</p>
<p style="text-align: left;">Han transcurrido 34 años desde que apareciera la primera versión de la <a href="http://en.wikipedia.org/wiki/Macintosh">interfaz gráfica de Macintosh</a> que fue desarrollada por Steve Jobs y Jef Raskin, y 34 desde la aparición de la primera versión de Windows.</p>
<p style="text-align: left;">Y aún a pesar de que han transcurrido tres décadas, los sistemas operativos siguen siendo tan duros, tan extraños y ajenos para los usuarios como un transbordador espacial.</p>
<p style="text-align: left;">Un sistema operativo no está centrado en las personas, en los humanos, lo está sobre todo en las máquinas y en un modelo de interacción artificial y extraño a cómo pensamos y funcionamos. El Diseño de Interacción está centrado literalmente en la Interfaz Gráfica de Usuario (GUI) cuando debería estar centrado en el usuario, en la persona, en lo que quiere hacer, en dar respuesta a sus necesidades, sus objetivos y sus tareas.</p>
<p style="text-align: left;">Sí, los actuales Sistemas Operativos lo hacen, pero están anclados en un modelo conceptual que, para más pecado, está centrado en el paradigma de la metáfora del escritorio (desktop) local y en un modelo de interacción basado en un periférico, el ratón que va siendo hora de que sea superado. En cuanto a los periféricos de entrada Apple acaba de dar <a href="http://www.apple.com/magicmouse/">el primer tímido paso</a> para ir más allá de la tremenda limitación que supone interactuar con una interfaz virtual a través de un dispositivo tan extremadamente limitado como el ratón. Una herramienta que no sólo NO amplifica las capacidades humanas (la función de nuestras manos) sino que además las está limitando tremendamente y por ende anclando el diseño, la evolución de las nuevas interfaces humanas y el Diseño de Interacción.</p>
<p style="text-align: left;">Hay que dar otro paso. El ecosistema social y tecnológico está preparado. Tenemos la tecnología hardware y software necesaria para llevar a buen puerto tal empresa y comenzar a hacer que los ordenadores sean menos máquinas y más humanos y que la interacción que mantenemos con ellos se parezca más a las de las personas y menos a las de los robots basadas en la asimilación de conductas y patrones de interacción &#8220;artificiales&#8221; inventados como metáforas del mundo real por los Diseñadores de Interacción.</p>
<p style="text-align: left;">El objetivo de la Fundación Mozilla es ambicioso. Está desarrollando la primera Interfaz Humana. Es una apuesta ganadora porque no rompe con lo anterior y con lo que está funcionando actualmente, sino que no es ni más ni menos que  <strong>una nueva capa inteligente que permite un diálogo y una interacción más fluidas entre la persona y las interfaces gráficas de los actuales sistemas operativos (Windows, OS X, Ubuntu, Gnome, Android&#8230;) buscadores y World Wide Web.</strong></p>
<p style="text-align: left;"><strong> </strong>Lo más interesante, además y aquí no sé si en la Fundación Mozilla son plenamente conscientes de esta circunstancia, es que el día de mañana si quisieran, dicha interfaz podría ser independiente incluso del navegador utilizado por el usuario: Firefox, Internet Explorer, Chrome, Opera o cualquier otro&#8230;</p>
<p style="text-align: left;">&#8230;ya que lo único que hace falta es una línea de texto, un campo input en el que introducir texto u órdenes ya sea mediante el teclado físico o virtual o mediante la voz y un área en la que apareciese la interfaz ad-hoc pertinente con la que interaccionar o dicho de otra forma, menos críptica y más tangible: Ubiquity o evolucionar como están evolucionando las actuales barras de navegación de los navegadores hacia barras de interacción con un lenguaje o formas más humanos.</p>
<p style="text-align: left;">La de Mozilla es una apuesta ganadora porque además va a fusionar otra interfaz todavía más revolucionaria de una forma totalmente transparente y natural para el usuario: la interfaz de Google. Imita la exitosa estrategia de neg0cio del buscador basada en la <a href="http://www.wired.com/techbiz/it/magazine/16-03/ff_free?currentPage=all">Larga Cola y los modelos freemiun</a> con suma brillantez y lógica naturalidad evolutiva desde un punto de vista tecnológico.</p>
<p style="text-align: left;">Al <strong>nuevo modelo de interacción </strong>que ofrece <strong>Ubiquity</strong> -<strong>abierto</strong> a su desarrollo y evolución por parte de la comunidad de programadores y con la iniciativa de <strong>JetPack</strong>, abierto también a usuarios sin conocimiento de programación- se da una tremenda y potente solución a algo que ha sido el talón de aquiles de la moderna Biblioteconomía y Documentación desde sus orígenes hace cien años y algo crítico para las personas y su actividad diaria: la Findability o cualidad de poder navegar por un sistema de información digital y recuperar los documentos o la información puntual que necesiten en cualquier momento.</p>
<p style="text-align: left;">En el contexto tecnológico en el que nos encontramos, este &#8220;sistema de información digital&#8221; es la World Wide Web, y al centrar el desarrollo tecnológico en ella, el Ordenador Personal -Personal Computer- se desvanece surgiendo la Identidad Digital -Digital Identity- o Espacio Personal -Personal Space- centralizada en esa Interfaz Humana &#8220;navegador&#8221;, que son precisamente los <a href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/">ejes en los que está trabajando Mozilla</a>.</p>
<p style="text-align: left;">En Firefox se va a fusionar Ubiquity, Google ¿Bing? Wikipedia, etc, etc&#8230; y se va ha hacer totalmente transparente el sistema operativo que corra por debajo. No interesa la herramienta tecnológica, interesa el servicio y la funcionalidad que presta.</p>
<p style="text-align: left;">Al integrar Google en la nueva Interfaz Humana, Mozilla se asegura a futuro la percepción de su principal fuente de ingresos incorporando automáticamente todas las mejoras que desarrolle el Buscador, mientras que ellos se centran en evolucionar la capa crítica en cuanto a la interacción con los usuarios y la Experiencia de Usuario se refiere.</p>
<p style="text-align: left;">Y por supuesto, al desarrollar Firefox como proyecto de código abierto, multiplataforma y multidispositivo creando y dinamizando una comunidad social y de usuarios se asegura su éxito a futuro.</p>
<p style="text-align: left;">Es un modelo de negocio ganador. Y lo más paradójico es que es bueno para todas las partes implicadas en el ecosistema tecnológico: Google, Microsoft, Apple&#8230; todos ganan con esta nueva Interfaz Humana por dos razones fundamentales:</p>
<ul>
<li>porque la base que sostiene sus modelo de negocio -los usuarios- van a seguir necesitando, <strong>al menos de momento</strong>, los actuales sistemas operativos comercializados,</li>
<li>y porque el tiempo que los usuarios van a dedicar tanto en su trabajo como en su ocio, se va a incrementar y perpetuar sea la dirección que sea en la que evolucionen sus herramientas tecnológicas.</li>
</ul>
<p style="text-align: center;">Todo está convergiendo en la World Wide Web y en la nube.</p>
<p style="text-align: center;">
<p style="text-align: left;">Después de treinta años por fin estamos superando el paradigma del Sistema Operativo, del Ordenador Personal y de sus periféricos tradicionales.</p>
<p style="text-align: left;">Por fin se está desarrollando la Interfaz Humana.</p>
<p style="text-align: left;">Os recomiendo que os leáis <a href=".com/books?id=D39vjmLfO3kC&amp;dq=the+humane+interface&amp;printsec=frontcover&amp;source=bn&amp;hl=en&amp;ei=RDIaS5qIIsK64QaOlpnyAg&amp;sa=X&amp;oi=book_result&amp;ct=result&amp;resnum=5&amp;ved=0CBkQ6AEwBA#v=onepage&amp;q=&amp;f=false">&#8220;The Humane Interface: New directions for designing interactive systems&#8221;</a> de Jef Raskin. Es una nueva concepción de Sistema Operativo que creo que está tomando una dirección insospechada a albur del actual desarrollo tecnológico.</p>
<p style="text-align: left;">En cuanto a la gestión de identidades en Firefox podéis echar un vistazo a <a href="http://www.flickr.com/photos/azaraskin/4131699030/sizes/o/">la última maqueta publicada por Alex Faaborg</a> sobre ello o a la de la <a href="http://people.mozilla.com/~faaborg/files/20091012-personalWeb/bookmarksLocationBar-i1.png">navegación por los bookmarks y etiquetas</a>. Tengo muchas ganas de ver la nueva interfaz de Firefox 3.7.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tentandote.com/2009/12/05/la-interfaz-humana-como-evolucion-de-los-sistemas-operativos-y-los-navegadores/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
