a:5:{s:4:"body";a:1:{s:2:"es";a:1:{i:0;a:3:{s:5:"value";s:11062:"<p>Se entiende por "Experiencia de usuario" a lo que siente y experimenta un usuario que ingresa a cada página web. Si bien no es fácil de medir y adquiere un tono subjetivo al hablar de sensación, sí es un elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por el usuario que visita el Sitio Web.</p>
<p>Además de ser un campo de estudio muy abordado desde diferentes disciplinas, el área de Experiencia de usuario ha recibido aportes muy notables en el último tiempo gracias a la introducción de tecnologías de seguimiento de las acciones del usuario en un Sitio Web, tales como las de "<a href="/articulo/elementos-del-diseno-de-interfaces-e-interaccion" title="Ir a Elementos del diseño de interfaces e interacción">eyetracking</a>" han permitido entender de manera real y concreta la forma en que los usuarios emplean los espacios digitales.</p>
<p>En este sentido, se ha observado que los usuarios necesitan confirmaciones visuales de las percepciones que tienen de los contenidos que revisan. Por ejemplo, la utilización de un lenguaje claro genera una tasa de respuesta más alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el usuario. Lo mismo ocurre cuando los elementos interactivos como enlaces, botones y zonas de ingreso de información no se diagraman con las formas a las que el usuario está acostumbrado.</p>
<p>Debido a lo anterior, a continuación se entregarán recomendaciones acerca de tres elementos que son claves en la experiencia que tiene el usuario y que se utilizan con gran frecuencia: nos referimos a los enlaces, botones y formularios.</p>
<p><a name="botones" id="botones"></a></p>
<h4>Uso de botones</h4>
<p>Los botones son los elementos que permiten que el usuario realice o confirme acciones solicitadas en las pantallas del Sitio Web. Por lo mismo,&nbsp;<strong>su forma debe ser estándar</strong>, similar en todo el sitio y no ofrecer dudas acerca de su presencia o de la accián a la que invita.</p>
<p>Para ello es necesario que se cuide tanto su aspecto físico como la palabra que contiene, ya que ambos permitirán que el usuario entienda, sin lugar a dudas, qué ocurrirá si lo presiona.</p>
<div id="fig011" class="imgSet"><img src="/guia-v2/capitulos/03/images/fig.011.jpg" alt="El buscador siempre debe tener una forma estndar." title="El buscador siempre debe tener una forma estndar." width="400">
<p class="caption"><a href="/guia-v2/capitulos/03/images/fig.011.htm" title="El buscador siempre debe tener una forma estndar.">[D]</a>&nbsp;Figura 11. El buscador siempre debe tener una forma estándar para que el usuario sepa claramente cuál es la acción que debe desarrollar.</p>
</div>
<p>En el ejemplo que se muestra en la&nbsp;<strong>Figura 11</strong>, queda claro que hay un espacio para escribir y luego el botón Buscar; además se ofrece un breve título explicativo de lo que permite hacer el formulario. De esa manera se facilita la comprensión del funcionamiento del mismo y el usuario tiene claro cuál será el efecto de la acción que emprenderá.</p>
<div id="fig012" class="imgSet"><img src="/guia-v2/capitulos/03/images/fig.012.jpg" alt="En este ejemplo, el formulario de bsqueda carece de ttulo explicativo y el botn de bsqueda es poco convencional, lo que afecta la comprensin de la accin ofrecida." title="En este ejemplo, el formulario de bsqueda carece de ttulo explicativo y el botn de bsqueda es poco convencional, lo que afecta la comprensin de la accin ofrecida." width="200">
<p class="caption"><a href="/guia-v2/capitulos/03/images/fig.012.htm" title="En este ejemplo, el formulario de bsqueda carece de ttulo explicativo y el botn de bsqueda es poco convencional, lo que afecta la comprensin de la accin ofrecida.">[D]</a>&nbsp;Figura 12. En este ejemplo, el formulario de búsqueda carece de título explicativo y el botón de búsqueda es poco convencional, lo que afecta la comprensión de la acción ofrecida.</p>
</div>
<p>En el ejemplo de la&nbsp;<strong>Figura 12</strong>, hay dos cambios importantes: el formulario no tiene un título que explique para qué es el formulario de manera breve, sino que se enfoca a lo que el usuario ya sabe, que es que debe ingresar una palabra o frase para buscar; además el botón al no decir sólo ¨Buscar¨ también genera un problema de comprensión ya que obliga al usuario a pensar si efectivamente eso es un botón o es una etiqueta descriptiva.</p>
<p>Otro elemento importante es la palabra que acompaña al botón. Esta necesariamente debe estar relacionada con la acción a realizar y dicha acción debe ser coherente con lo que se ofrece en la pantalla en la que se está trabajando. Además, debe ser una sola palabra y corresponder a un verbo que defina adecuadamente la acción ofrecida.</p>
<p>Finalmente el último elemento relevante es que el botón debe cambiar de estado cuando el mouse está sobre él, utilizando alguna tecnología que haga evidente su comportamiento como botón activo.</p>
<p>En conclusión, para que un formulario sea efectivo y apoye la experiencia que tendrá el usuario que visite el Sitio Web, los botones deben parecer tales (en tamaño, forma, acción y contenido) y deberán estar ubicados de manera que el usuario sepa qué ocurrirá cuando los presione. Asimismo, deben ser parte integrante de formularios que logren indicar en una frase breve y explicativa, qué ocurrirá al utilizarlos.</p>
<p><a name="enlaces" id="enlaces"></a></p>
<h4>Uso de enlaces</h4>
<p>Los enlaces son una de las características esenciales de los Sitios Web, ya que permiten al usuario visitar otros documentos del mismo o externos, sólo haciendo clic sobre una zona demarcada. En este sentido, si bien el estándar indica que el enlace debe ser subrayado y de color azul, los cambios tecnológicos han permitido que haya otras formas de hacerlos evidentes.</p>
<p>No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son los siguientes:</p>
<ol>
<li><strong>Deben ser diferentes al texto:</strong>&nbsp;los enlaces se deben diferenciar del texto que los rodea para explicar visualmente al usuario que se ofrece una acción a partir de su contenido. La forma de diferenciarlo puede variar pero al menos se debe procurar que esté subrayado y de color diferente o bien, si no está subrayado, sí se debe mostrar en otro color.</li>
<li><strong>Su estado debe ser visual:</strong>&nbsp;los enlaces tienen cuatro estados posibles los que deben visualizarse de manera simple y directa.<ol>
<li><strong>Enlace sin visitar:</strong>&nbsp;es el color que tiene antes de que se le haga clic encima; su color debe ser diferente del texto que lo rodea.</li>
<li><strong>Enlace destacado:</strong>&nbsp;es el color que puede adoptar cuando se le pasa el mouse sobre el enlace y permite ayudar al usuario a descubrir su existencia.</li>
<li><strong>Enlace activo:</strong>&nbsp;es el color que tiene cuando se le da clic encima; normalmente es un color fuerte que permite notar que se le ha activado.</li>
<li><strong>Enlace visitado:</strong>&nbsp;es el color que tiene el enlace cuando ya ha sido activado y la pgina a la que conduce ya ha sido visitada.</li>
</ol>
<div id="fig013" class="imgSet"><img src="/guia-v2/capitulos/03/images/fig.013.jpg" alt="En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces." title="En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces." width="500">
<p class="caption"><a href="/guia-v2/capitulos/03/images/fig.013.htm" title="En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces.">[D]</a>&nbsp;Figura 13. En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces.</p>
</div>
</li>
<li><strong>Su contenido debe ser explicativo:</strong>&nbsp;los enlaces deben contener palabras que expliquen hacia dónde se dirige la acción, de tal manera de evitar que lo enlazado sean frases como "clic aquí" y otras similares. Adicionalmente y para efectos de aumentar su accesibilidad, la sintaxis HTML de los enlaces debe contener el modificador "title" de tal manera que se despliegue un recuadro explicativo acerca del efecto que tendrá hacer clic sobre el enlace elegido.</li>
</ol></ol>
<div id="fig014" class="imgSet"><img src="/guia-v2/capitulos/03/images/fig.014.jpg" alt="En la imagen se ve cmo el texto explicativo ofrece ms informacin al poner el mouse sobre el enlace." title="En la imagen se ve cmo el texto explicativo ofrece ms informacin al poner el mouse sobre el enlace." width="500">
<p class="caption"><a href="/guia-v2/capitulos/03/images/fig.014.htm" title="En la imagen se ve cmo el texto explicativo ofrece ms informacin al poner el mouse sobre el enlace.">[D]</a>&nbsp;Figura 14. En la imagen se ve cómo el texto explicativo ofrece más información al poner el mouse sobre el enlace.</p>
</div>
<p><a name="elementos" id="elementos"></a></p>
<h4>Uso de elementos especficos</h4>
<p>Los restantes elementos interactivos que requieren ser revisados son los que permiten definir el tipo de interacción que se desea ofrecer a los usuarios del Sitio Web.</p>
<p>El primero de ellos es el llamado&nbsp;<strong>"Text Area"</strong>&nbsp;que es el que permite que el usuario pueda ingresar información en los formularios. Respecto de éste, se define como buena práctica ofrecer un espacio adecuado para escritura (por ejemplo, 500 caracteres que equivalen a seis líneas de texto). Sin embargo, una práctica más adecuada consiste en emplear un contador reverso que informe el total de caracteres que se puede escribir y que los vaya restando a medida que el usuario va ingresando la información; de esa manera se le ofrece una retroalimentación adecuada.</p>
<p>El segundo elemento es el&nbsp;<strong>"check button"</strong>&nbsp;que permite marcar las opciones que sean las más adecuadas para la acción que se está realizando dentro de un formulario. Hay que tener en cuenta que un campo de este tipo siempre permite la selección múltiple de opciones.</p>
<p>El tercer elemento es el&nbsp;<strong>"radio button"</strong>&nbsp;que permite marcar la opción más adecuada para la acción que se está realizando dentro de un formulario; normalmente se trata de opciones excluyentes entre ellas.</p>
<div id="fig015" class="imgSet"><img src="/guia-v2/capitulos/03/images/fig.015.jpg" alt="En la imagen se ve el uso del radio button para marcar el campo Sexo." title="En la imagen se ve el uso del radio button para marcar el campo Sexo." width="321">
<p class="caption"><a href="/guia-v2/capitulos/03/images/fig.015.htm" title="En la imagen se ve el uso del radio button para marcar el campo Sexo.">[D]</a>&nbsp;Figura 15. En la imagen se ve el uso del radio button para marcar el campo Sexo.</p>
</div>
<p>Para efectos de que el usuario tenga una experiencia adecuada al usar el Sitio Web, es imprescindible que los elementos citados slo se empleen de la forma señalada.</p>
<div class="chapterNav">&nbsp;</div>";s:7:"summary";s:0:"";s:6:"format";s:8:"php_code";}}}s:21:"field_libro_categoria";a:1:{s:3:"und";a:15:{i:0;a:1:{s:3:"tid";s:2:"13";}i:1;a:1:{s:3:"tid";s:2:"14";}i:2;a:1:{s:3:"tid";s:2:"18";}i:3;a:1:{s:3:"tid";s:2:"20";}i:4;a:1:{s:3:"tid";s:2:"21";}i:5;a:1:{s:3:"tid";s:2:"22";}i:6;a:1:{s:3:"tid";s:2:"24";}i:7;a:1:{s:3:"tid";s:2:"25";}i:8;a:1:{s:3:"tid";s:2:"28";}i:9;a:1:{s:3:"tid";s:2:"30";}i:10;a:1:{s:3:"tid";s:2:"31";}i:11;a:1:{s:3:"tid";s:2:"33";}i:12;a:1:{s:3:"tid";s:2:"42";}i:13;a:1:{s:3:"tid";s:2:"43";}i:14;a:1:{s:3:"tid";s:2:"44";}}}s:16:"field_libro_tags";a:1:{s:3:"und";a:6:{i:0;a:1:{s:3:"tid";s:3:"105";}i:1;a:1:{s:3:"tid";s:2:"73";}i:2;a:1:{s:3:"tid";s:3:"136";}i:3;a:1:{s:3:"tid";s:3:"137";}i:4;a:1:{s:3:"tid";s:3:"138";}i:5;a:1:{s:3:"tid";s:3:"185";}}}s:22:"field_libro_valoracion";a:0:{}s:20:"field_libro_capitulo";a:1:{s:3:"und";a:1:{i:0;a:1:{s:3:"tid";s:3:"335";}}}}