<?xml version="1.0" encoding="iso-8859-1"?>
<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>blogold &#187; diseño de interacción</title>
	<atom:link href="http://www.avidos.net/blogold/categoria/diseno-de-interaccion/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.avidos.net/blogold</link>
	<description></description>
	<lastBuildDate>Tue, 25 Mar 2008 21:19:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>estandarizando interacciones incorrectas?</title>
		<link>http://www.avidos.net/blogold/estandarizando-interacciones-incorrectas/</link>
		<comments>http://www.avidos.net/blogold/estandarizando-interacciones-incorrectas/#comments</comments>
		<pubDate>Mon, 16 May 2005 09:43:58 +0000</pubDate>
		<dc:creator>missha</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Del artículo sobre AJAX y diseño de interacción de Luke Wroblewski, (muy recomendable su lectura) me quedo con la cita: we run the risk of &#8220;standardizing&#8221; non-optimal interactions: not confirmed with user testing and not leveraging years of client application design.]]></description>
			<content:encoded><![CDATA[<p>Del artículo sobre <a href="http://www.lukew.com/resources/articles/ajax_design.asp">AJAX y diseño de interacción</a> de <a href="http://www.lukew.com/">Luke Wroblewski</a>, (muy recomendable su lectura) me quedo con la cita:</p>
<blockquote><p>we run the risk of &#8220;standardizing&#8221; non-optimal interactions: not confirmed with user testing and not leveraging years of client application design.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/estandarizando-interacciones-incorrectas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>parecer más rápido</title>
		<link>http://www.avidos.net/blogold/parecer-mas-rapido/</link>
		<comments>http://www.avidos.net/blogold/parecer-mas-rapido/#comments</comments>
		<pubDate>Thu, 16 Dec 2004 03:02:09 +0000</pubDate>
		<dc:creator>jose</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[La importancia de la velocidad de carga de los sitios web para la experiencia de los usuarios es indiscutible. El debate gira en torno a cuánto tiempo están dispuestos a esperar los usuarios a que cargue un sitio y, aunque existen diversos estudios, no parece existir un consenso sobre este dato, si bien parece claro [...]]]></description>
			<content:encoded><![CDATA[<p>La importancia de la velocidad de carga de los sitios web para la experiencia de los usuarios es indiscutible. El debate gira en torno a cuánto tiempo están dispuestos a esperar los usuarios a que cargue un sitio y, aunque existen diversos estudios, no parece existir un consenso sobre este dato, si bien parece claro que el tiempo de espera tolerable por los usuarios se situa bastante por encima de los famosos <a href="http://www.useit.com/papers/responsetime.html" title="artículo en inglés donde se explica">10 segundos</a> del tío <a href="http://www.useit.com" title="Useit: web del gurú de la usabilidad Jakob Nielsen">Jakob</a>.</p>
<p>Habitualmente, los buenos diseñadores web se esfuerzan en minimizar el código XHTML, reducir el peso de las imágenes al máximo y otras diversas técnicas de <a href="http://www.amazon.com/exec/obidos/ASIN/0735713243/ref%3Dnosim/websiteoptimi-20/104-3687187-5763147" title="libro sobre optimización de sitios web, en inglés">optimización de sitios web</a>. Pero existen otros factores influyentes que no son habitualmente considerados:</p>
<h3>El tiempo de carga percibido</h3>
<p>Dos páginas con el mismo tiempo de carga real pueden ser percibidas por los usuarios como una más rápida que otra. Existen muchas formas de influir en esta percepción y es realmente esta variable la que valorarán los usuarios. </p>
<p>Evitar que los elementos varien su posición durante la carga (para que el usuario pueda empezar a ojear aquellas zonas ya cargadas), permitir la descarga progresiva de los gráficos e imágenes, ofrecer un adecuado feedback durante la espera, ofrecer contenido de interés durante la carga (interesante para contenido realizado con flash), cargar primero aquella información que suelen venir buscando los usuarios y otra técnicas de este estilo, pueden ayudar a reducir el tiempo de espera percibido y/o hacerlo más llevadero.</p>
<h3>La experiencia de uso comienza mucho antes de que el sitio haya terminado de cargar</h3>
<p>Al igual que nuestra experiencia con un nuevo producto comienza desde el momento que tenemos el paquete en nuestras manos y no cuando ya lo estamos utilizando, nuestras experiencias con los sitios podemos considerar que comienzan desde el momento en que tecleamos la url en nuestro navegador. Por este motivo, debemos facilitar el que nuestros sitios puedan ser usados sin necesidad de que hayan cargado por completo. </p>
<p>Un ejemplo concreto: un usuario trata de encontrar una imagen en la que aparece un determinado personaje en una galería de 20 imágenes que se muestran a un tamaño considerable, en esta situación, un simple texto alternativo suficientemente explicativo en cada imagen sería de muchísima utilidad y le permitiría buscar la imagen sin necesidad de esperar a que hayan cargado todas.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/parecer-mas-rapido/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>iPod vs. The Cassette</title>
		<link>http://www.avidos.net/blogold/ipod-vs-the-cassette/</link>
		<comments>http://www.avidos.net/blogold/ipod-vs-the-cassette/#comments</comments>
		<pubDate>Sat, 16 Oct 2004 09:43:07 +0000</pubDate>
		<dc:creator>missha</dc:creator>
				<category><![CDATA[detalles]]></category>
		<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Una divertida comparativa entre el revolucionario iPod y la tradicional cinta de audio. Modernidad frente a frikismo&#8230; ufff, me cuesta decidir.]]></description>
			<content:encoded><![CDATA[<p>Una <a href="http://homepage.mac.com/danielturek/PhotoAlbum50.html" title="diapositivas que van comparando diversos aspectos de ambos formatos de almacenamiento y reproducción de música">divertida comparativa</a> entre el revolucionario <a href="www.apple.com/ipod/" title="página del producto de Apple">iPod</a> y la tradicional <a href="http://www.polaralert.com/exhibition/top100/index.html" title="colección de tapas de cintas de audio">cinta de audio</a>. </p>
<p class="centro"><a href="http://homepage.mac.com/danielturek/PhotoAlbum50.html" title="diapositivas que van comparando diversos aspectos de ambos formatos de almacenamiento y reproducción de música"><img src="http://www.avidos.net/blogold/imagenes/ipodcasette.gif" alt="dibujo hecho a mano de un ipod y una cinta de audio" /></a></p>
<p>Modernidad frente a frikismo&#8230; ufff, me cuesta decidir.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/ipod-vs-the-cassette/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>palette: exploración del color para diseñadores de información</title>
		<link>http://www.avidos.net/blogold/palette-exploracin-del-color-para-diseadores-de-infomacin/</link>
		<comments>http://www.avidos.net/blogold/palette-exploracin-del-color-para-diseadores-de-infomacin/#comments</comments>
		<pubDate>Sat, 25 Sep 2004 22:28:28 +0000</pubDate>
		<dc:creator>missha</dc:creator>
				<category><![CDATA[colores]]></category>
		<category><![CDATA[diseño de interacción]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Una de las partes más duras cuando te enfrentas a bocetar el diseño de una página web es la elección de la gama de colores. Y, aunque hay buenas recopilaciones de recursos para generarlas, hace unos días Jose me desubrió Palette, una pequeña aplicación de la diseñadora (de interacción e información) Joanna Wiebe (fundadora de [...]]]></description>
			<content:encoded><![CDATA[<p>Una de las partes más duras cuando te enfrentas a bocetar el diseño de una página web es la elección de la gama de colores.</p>
<p>Y, aunque hay buenas <a href="http://www.furilo.com/archivos/recursos-de-color/" title="post en el weblog de Furilo con recursos de color">recopilaciones de recursos</a> para generarlas, hace unos días <a href="autores.html" title="más información sobre el otro autor de este blog">Jose</a> me desubrió <a href="http://www.joannawiebe.com/palette.html" title="descarga e información sobre el programa">Palette</a>, una pequeña aplicación de la diseñadora (de interacción e información) <a href="http://www.joannawiebe.com/" title="Página personal y weblog sobre fotografía y diseño de información">Joanna Wiebe</a> (fundadora de <a href="http://www.onemind.com" title="empresa dedicada al diseño de interfaces">OneMind</a>).</p>
<p class="centro"><a href="http://www.joannawiebe.com/palette.html" title="descarga e información sobre el programa"><img src="http://www.avidos.net/blogold/imagenes/palette.gif" alt="logotipo del programa y una gama cromática generada" /></a></p>
<p>El programa, además de generar gamas cromáticas que me han gustado mucho, recopila 10 consejos sobre el uso del color que no está de más recordar, además de una sección de enlaces con recursos sobre el tema.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/palette-exploracin-del-color-para-diseadores-de-infomacin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>interacción sitio usuario</title>
		<link>http://www.avidos.net/blogold/interaccin-sitio-usuario/</link>
		<comments>http://www.avidos.net/blogold/interaccin-sitio-usuario/#comments</comments>
		<pubDate>Tue, 03 Aug 2004 21:02:29 +0000</pubDate>
		<dc:creator>missha</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Una sana costumbre de ávidos es leer artículos de diseño web en voz alta en el coche, de vuelta a casa. Ayer Jose descubrió bíguel, un blog sobre usabilidad y experiencia del usuario, y volvimos leyendo uno de sus artículos: Midiendo la experiencia de usuario (fichero .zip) Descubrimos un término interesante que acuñaba el autor [...]]]></description>
			<content:encoded><![CDATA[<p>Una sana costumbre de  <a href="http://www.avidos.net" title="empresa donde jugamos al Quake y, a veces, hacemos páginas web">ávidos</a> es leer artículos de diseño web en voz alta en el coche, de vuelta a casa.</p>
<p>Ayer <a href="http://www.avidos.net/blogold/autores.html" title="una foto del co-autor de blogold">Jose</a> descubrió <a href="http://www.biguel.com/index.html" title="blog de Jesús Carreras">bíguel</a>, un blog sobre usabilidad y experiencia del usuario, y volvimos leyendo uno de sus artículos: <a href="http://www.biguel.com/static/textos/midiendo_la_Experiencia_del_Usuario.zip" title="archivo PDF comprimido en un archivo ZIP">Midiendo la experiencia de usuario (fichero .zip)</a></p>
<p>Descubrimos un término interesante que acuñaba el autor del artículo: <strong>Interacción Sitio Usuario (ISU)</strong></p>
<blockquote><p>El concepto se deriva de una de mayor nivel: Interacción Persona Ordenador, IPO. Pero por considerar la interacción con la Internet un caso específico de tecnología con unas características que condicionan en gran medida la interacción con el usuario, los he creido conveniente separar.</p></blockquote>
<p>La verdad es que me pareció un término estupendo. Quizá la interacción de los usuarios con la <acronym title="world wide web" xml:lang="en" lang="en">WWW</acronym> merece ya un campo específico dentro de la <acronym title="Interacción Persona Ordenador">IPO</acronym>, y mucho más en el futuro.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/interaccin-sitio-usuario/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>sistemas de navegación</title>
		<link>http://www.avidos.net/blogold/sistemas-de-navegacin/</link>
		<comments>http://www.avidos.net/blogold/sistemas-de-navegacin/#comments</comments>
		<pubDate>Sun, 27 Jun 2004 09:43:01 +0000</pubDate>
		<dc:creator>jose</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>
		<category><![CDATA[diseño de interfaces]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Los sistemas de navegación son una pieza de vital importancia para la experiencia del usuario de nuestro sitio web. Su aparente sencillez es lo que hace que a menudo olvidemos su importancia y descuidemos su elaboración. Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos: Establecer un modo de ir de un [...]]]></description>
			<content:encoded><![CDATA[<p>Los sistemas de navegación son una pieza de vital importancia para la <a href="http://www.nethodical.com" title="blog sobre experiencia del usuario, muy recomendable">experiencia del usuario</a> de nuestro sitio web.  Su aparente sencillez es lo que hace que a menudo olvidemos su importancia y descuidemos su elaboración.</p>
<p>Todo buen sistema de navegación debe satisfacer al menos los siguientes objetivos:</p>
<ul>
<li>Establecer un modo de ir de un sitio a otro dentro de la web. La navegación debe ser clara, concisa, consistente y facilmente identificable dentro de la página.</li>
<li>Comunicar al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya.</li>
<li>Reflejar la arquitectura del sitio que subyace al sistema de navegación. Debemos diferenciar la navegación global, la navegación local o subsecciones y la navegación contextual.</li>
<li>Permitir volver a la página de inicio rapidamente. En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/sistemas-de-navegacin/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>un chiste sobre diseño de interacción</title>
		<link>http://www.avidos.net/blogold/un-chiste-sobre-diseo-de-interaccin/</link>
		<comments>http://www.avidos.net/blogold/un-chiste-sobre-diseo-de-interaccin/#comments</comments>
		<pubDate>Thu, 10 Jun 2004 08:31:02 +0000</pubDate>
		<dc:creator>missha</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[There are a widely told joke in the computer industry that goes like this: A man is flying in a small airplane and is lost in the clouds. He descends until he spots an office building and yells to a man in a open window, &#8220;Where am I?&#8221; The man replies, &#8220;You are in an [...]]]></description>
			<content:encoded><![CDATA[<blockquote lang="en" xml:lang="en"><p>There are a widely told joke in the computer industry that goes like this: A man is flying in a small airplane and is lost in the clouds. He descends until he spots an office building and yells to a man in a open window, &#8220;Where am I?&#8221; The man replies, &#8220;You are in an airplane about 100 feet above the ground.&#8221; The pilot immediately turns to the proper course, spots the airport and lands. His astonished passenger asks how the pilot figured out which way to go. Te pilot replies, &#8220;The answer the man gave me was completely correct and factual, yet it was no help whatsoever, so I knew immediately he was a software engineer who worked for Microsoft and I know where Microsoft&#8217;s building is in relation to the airport.&#8221;</p></blockquote>
<p class="fuentecita"><strong>The Inmates Are Running the Asylum</strong>, de <a href="http://www.cooper.com" title="la empresa de Cooper, una consultoría de diseño de interacción">Alan Cooper</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/un-chiste-sobre-diseo-de-interaccin/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>ley de Fitts</title>
		<link>http://www.avidos.net/blogold/ley-de-fitts/</link>
		<comments>http://www.avidos.net/blogold/ley-de-fitts/#comments</comments>
		<pubDate>Sat, 17 Apr 2004 15:11:07 +0000</pubDate>
		<dc:creator>jose</dc:creator>
				<category><![CDATA[diseño de interacción]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[&#8220;el tiempo necesario para alcanzar un objetivo esta en funcion de la proximidad y tamaño del objetivo&#8221; Uno de los principios generales del diseño de interacción es la llamada &#8220;ley de Fitts&#8221;. Ésta nos permite determinar el tiempo necesario para alcanzar un objetivo visual con cualquier dispositivo apuntador manual y demuestra que dicho tiempo depende [...]]]></description>
			<content:encoded><![CDATA[<p class="cita">&#8220;el tiempo necesario para alcanzar un objetivo esta en funcion de la proximidad y tamaño del objetivo&#8221;</p>
<p><img class="imgizqda" src="http://www.avidos.net/blogold/imagenes/fitts.gif" height="132" width="200" alt="Ilustración del experimento original realizado por Paul Fitts en 1954" /></p>
<p>Uno de los <a href="http://www.asktog.com/basics/firstPrinciples.html" title="artículo de Bruce Tognazzini, ex-diseñador de interfaces de Apple">principios generales del diseño de interacción</a> es la llamada <a href="http://ei.cs.vt.edu/~cs5724/g1/" title="enunciación formal de la ley">&#8220;ley de Fitts&#8221;</a>. Ésta nos permite determinar el tiempo necesario para alcanzar un objetivo visual con cualquier dispositivo apuntador manual y demuestra que dicho tiempo depende del tamaño del objetivo y la distancia a la que se encuentre el puntero de él.</p>
<p>La ley de Fitts puede resultar muy obvia, ya que cualquiera entiende que un objetivo grande y cercano es mas fácil de alcanzar que uno pequeño y lejano. Pero lo más interesante de esta ley son las aplicaciones para el diseño de interfaces que se derivan de ella. Nos permite, por ejemplo, conocer las características de tamaño, posición y expresividad que debe poseer un objeto para que sea fácil interactuar con él, y en la actualidad se aplica en las <a href="http://www.aci.com.pl/mwichary/guidebook/index" title="estupenda recopilación de capturas de pantalla de las diferentes interfaces de sistemas operativos a lo largo de la historia">interfaces de los sistemas operativos más utilizados</a>. </p>
<p>Una de las afirmaciones derivadas de la ley es que los elementos situados en los <strong>bordes y esquinas</strong> de la pantalla son facilmente alcanzables, característica que utilizan casi todos los sistemas operativos <a href="http://www.xvsxp.com/general/" title="comparación sobre cómo utilizan la ley de Fitts el OS X y el XP">(unos mejor que otros)</a>. Por ejemplo, en las <a href="http://developer.kde.org/documentation/design/ui/fittslaw.html">guias de diseño de interfaz de KDE</a> tienen esta ley en cuenta.</p>
<p>La ley de Fitts puede ser aplicada también para predecir el tiempo que se tardará en alcanzar un objetivo y, a partir de éste, calcular el llamado índice de dificultad. Esto permite que se puedan hacer comparaciones entre diferentes dispositivos apuntadores, determinando cuales son mejores para una determinada tarea. En 1991 se llevaron a cabo estudios para comparar distintos dispositivos para las tareas de arrastrar y de pinchar y concluyeron que si bien el ratón es más efectivo para pinchar, a la hora de arrastrar, el trackball resultaba un dispositivo mejor.</p>
<p>Las páginas web, como interfaces que son, pueden beneficiarse de las aplicaciones de la ley de Fitts, aunque muy a menudo vemos que no se tiene en cuenta. El <a href="boton-fitts.html" title="demostración de aplicación de la ley de Fitts en botones web">ejemplo</a> más comun del error es el uso de botones muy difíciles de pinchar por su reducido tamaño o porque no todo el área del botón es pinchable, sino que sólo se puede hacer click en el texto del botón.</p>
<p>Otro ejemplo de aplicacion a paginas web es la navegacion por resultados paginados. Normalmente, cuando una pagina devuelve resultados paginados (como hace <a href="http://www.google.es" title="genial buscador, os recomiendo que lo probéis">google</a>) se establece una navegacion que nos permite movernos por las diferentes paginas de resultados yendo directamente a una página de resultados concreta, a la siguiente o a la anterior. Los enlaces que suelen usarse para esta navegacion es comun que presenten este aspecto:<br />
<img class="imgcentro" src="http://www.avidos.net/blogold/imagenes/pag-mal.gif" height="25" width="88" alt="paginación encontrada en Softonic.com" /><br />
En este caso el problema vuelve a ser el pequeño tamaño del area activa, que, junto a la cercanía entre enlaces, hacen que sea realmente difícil acertar sobre el enlace que queremos. Esto además tiene serias implicaciones sobre la accesibilidad del sitio, pues una persona con dificultades para manejar el ratón lo tendría muy difícil.</p>
<p>Un ejemplo de este mismo tipo de navegacion en el que se ha tenido en cuenta la ley de fitts es el siguiente:<br />
<img class="imgcentro" src="http://www.avidos.net/blogold/imagenes/pag-bien.gif" height="28" width="182" alt="paginación encontrada en Altaxarquia.com" /><br />
En este caso se puede pinchar sobre todo el cuadro y no sólo solo los números y además la separación es mayor para reducir la probabilidad de fallos.</p>
<p> el tema podéis leer un <a href="http://www.asktog.com/columns/022DesignedToGiveFitts.html" title="test en el que se analizan las preguntas básicas que debe responder un buen diseñador de interacción">genial artículo</a> de <a href="http://www.asktog.com/index.html" title="página personal del gurú del diseño de interfaz">Bruce Tognazzini</a> y os recomiendo realizar este <a href="http://www.tele-actor.net/fitts/" title="experimento en el que tienes que ir pinchando objetos en la pantalla para comprobar la ley de Fitts">test on-line</a> que además de ver cómo es el experimento os divertireis mucho ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.avidos.net/blogold/ley-de-fitts/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

