<?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; estados inactivos</title>
	<atom:link href="http://www.tentandote.com/tag/estados-inactivos/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>Thu, 09 Sep 2010 18:42:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</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>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>
	</channel>
</rss>
