<?xml version="1.0" encoding="ISO-8859-1"?><article xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<front>
<journal-meta>
<journal-id>1683-0789</journal-id>
<journal-title><![CDATA[Acta Nova]]></journal-title>
<abbrev-journal-title><![CDATA[RevActaNova.]]></abbrev-journal-title>
<issn>1683-0789</issn>
<publisher>
<publisher-name><![CDATA[Universidad Católica Boliviana]]></publisher-name>
</publisher>
</journal-meta>
<article-meta>
<article-id>S1683-07892011000100007</article-id>
<title-group>
<article-title xml:lang="es"><![CDATA[Usabilidad Web]]></article-title>
</title-group>
<contrib-group>
<contrib contrib-type="author">
<name>
<surname><![CDATA[Frege Issa]]></surname>
<given-names><![CDATA[Telma C.]]></given-names>
</name>
<xref ref-type="aff" rid="A01"/>
</contrib>
</contrib-group>
<aff id="A01">
<institution><![CDATA[,Universidad Católica Boliviana Departamento de Ciencias Exactas e Ingeniería Cochabamba]]></institution>
<addr-line><![CDATA[ ]]></addr-line>
</aff>
<pub-date pub-type="pub">
<day>00</day>
<month>03</month>
<year>2011</year>
</pub-date>
<pub-date pub-type="epub">
<day>00</day>
<month>03</month>
<year>2011</year>
</pub-date>
<volume>5</volume>
<numero>1</numero>
<fpage>138</fpage>
<lpage>160</lpage>
<copyright-statement/>
<copyright-year/>
<self-uri xlink:href="http://www.scielo.org.bo/scielo.php?script=sci_arttext&amp;pid=S1683-07892011000100007&amp;lng=en&amp;nrm=iso"></self-uri><self-uri xlink:href="http://www.scielo.org.bo/scielo.php?script=sci_abstract&amp;pid=S1683-07892011000100007&amp;lng=en&amp;nrm=iso"></self-uri><self-uri xlink:href="http://www.scielo.org.bo/scielo.php?script=sci_pdf&amp;pid=S1683-07892011000100007&amp;lng=en&amp;nrm=iso"></self-uri></article-meta>
</front><body><![CDATA[  <h1 align="center"><font size="4" face="Verdana"><b>Usabilidad Web</b></font></h1>     <p align="center">&nbsp;</p>     <p align="center">&nbsp;</p>     <p align="center"><font size="2" face="Verdana"><b>Telma C. Frege Issa</b></font></p>     <p align="center"><font size="2" face="Verdana">Departamento de Ciencias Exactas    e Ingeniería, Universidad Católica Boliviana San pablo, c Márquez esq. Plaza    J. Trigo s/n, Cochabamba, Bolivia</font></p>     <p align="center"><a href="mailto:tfrege@gmail.com">tfrege@gmail.com</a></p>     <p align="center">&nbsp;</p>     <p align="center">&nbsp;</p> <hr align="center" noshade> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823411">Introducción</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Este documento presenta distintos    argumentos acerca de la importancia de contar con Sitios Web que cumplan con    requisitos de <i>Usabilidad</i>, métrica importante para garantizar el éxito    de un sitio en la Red Internet. También se explican los conceptos importantes    relacionados a esta métrica y las mejores prácticas y herramientas disponibles    en la actualidad.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823412">Significado    de Internet para las empresas en la actualidad</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Internet ha transformado drásticamente    la manera de hacer negocios. Aunque en sus inicios su principal uso fue de tan    sólo marketing básico de productos y servicios basado en páginas HTML estáticas,    con la rápida evolución de tecnologías y la mejora (aunque aún no perfecta)    de la seguridad &#8220;online&#8221;, Internet es ahora un entorno esencial para casi cualquier    industria, ofreciendo nuevos y revolucionarios modelos de negocios que hasta    hace poco no eran posibles. </font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">Esto se debe a distintas ventajas    que Internet ofrece en comparación a otros canales de comunicación: continua    evolución de la tecnología, expansión rápida en el mercado, marketing de bajo    costo, presencia global para una empresa  y apertura de canales de comunicación    con clientes y potenciales clientes, proveedores y socios.</font></p>     <p align="justify"><font size="2" face="Verdana">Sin embargo, no es suficiente    para una empresa tener un sitio Web en Internet. Un factor importante que definirá    el impacto de éste en la Red es su <i>Usabilidad</i>.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823413">Tipos    de Sitios Web</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Los sitios Web pueden ser clasificados    en tres categorías, dependiendo del uso para el que fueron diseñados [1][2]:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <b>Sitios Web Informacionales.-</b> Sitios enfocados en contenido estático,    como libros, <i>papers</i>, etc. La unidad básica de interacción es <i>el hecho</i>.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <b>Sitios Web Promocionales o de <i>&#8220;service rendering&#8221;</i>.-</b> enfocados    en entretenimiento, marketing, promoción de imagen e ideas. La unidad básica    de interacción es la <i>experiencia</i>.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <b>Sitios Web Orientados a Negocios, o Aplicaciones Web.-</b> enfocados a ventas,    intercambio de servicios, órdenes, llenado de formularios, <i>workflows</i>    y operaciones con bases de datos. La unidad básica de interacción es la <i>transacción</i>.</font></p>     <p align="justify"><font size="2" face="Verdana">Usabilidad Web hace un énfasis    especial en las últimas dos categorías.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823414">Usabilidad    Web</a></b></font></h2> <h3 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823415">Definición</a></b></font></h3>     <p align="justify"><font size="2" face="Verdana">En términos generales, el término    usabilidad se refiere a cuán bien los usuarios pueden usar un  producto para    alcanzar un objetivo y cuán satisfechos están con el proceso[5][9]. Usabilidad    Web se enfoca en aplicaciones desarrolladas para la red Internet.</font></p> <h3 align="justify">&nbsp;</h3> <h3 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823416">Importancia</a></b></font></h3>     <p align="justify"><font size="2" face="Verdana">Entre todos los criterios de    calidad que un sitio Web debe cumplir (como velocidad, seguridad, etc.), la    usabilidad es uno de los más importantes, porque hacer una aplicación fácil    de entender y utilizar es la clave para atraer y mantener usuarios. Si un usuario    no sabe cómo completar una tarea, o si la apariencia de la aplicación es complicada,    es probable que él/ella se frustre en pocos minutos y busque otras alternativas    que, en la actualidad, abundan en la Red.</font></p>     <p align="justify"><font size="2" face="Verdana">Una característica de los usuarios    de Internet es la impaciencia. Nielsen[11] incluso los denomina &#8220;ignorantes&#8221;.    Si a un usuario no le gusta esperar por una página, o si no quiere aprender    cómo funciona, simplemente buscará otras opciones por la simple razón de que    en Internet, existen muchas otras alternativas a cualquier servicio o producto    que una empresa ofrece. En cierto sentido, los usuarios de Internet se comportan    como niños malcriados, resultado de la alta competitividad entre empresas en    la red y la gran diversidad de facilidades que se ofrecen a los usuarios.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">En el aspecto económico una empresa    puede aumentar sus ganancias en más de un 100% si tan sólo presta atención a    la Usabilidad de su sitio Web[11]. Info Design ofrece algunos ejemplos de empresas    que han obtenido estos beneficios luego de haber rediseñado sus sitios Web[14]:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    FedEx incrementó el número de visitas en un 300%</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    IBM incrementó las ventas online en un 400% luego del rediseño de su sitio</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Fisher and Sless de Australia ahorró $536,023 al rediseñar su sitio y así reducir    el número de errores de usuario (y consecuentes llamadas a soporte) por mal    uso de transacciones</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Compuware Corporation reportó una ganancia de entre $10 y $100 por cada dólar    invertido en usabilidad</font></p>     <p align="justify"><font size="2" face="Verdana">El <i>Design Council of Britain</i>    realizó un estudio en distintas empresas sobre usabilidad y el impacto en el    rediseño de sitios Web considerando criterios de usabilidad. El estudio se realizó    a lo largo de 3 años y arrojó los siguientes resultados[14]:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Empresas que vieron mejora en la calidad del producto/servicio: 73%</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Sitios que mejoraron de la imagen de la empresa: 69%</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Empresas que aumentaron su retorno de inversión: 65%</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Empresas que tuvieron acceso a nuevos mercados: 65%</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Sitios que mejoraron la comunicación con los clientes: 65%</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Empresas que redujeron costos de mantenimiento:   41%</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823417">Carga    cognitiva</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Este concepto, aunque simple,    es importante al hablar de usabilidad. Cada pequeña funcionalidad en un sitio    Web añade &#8220;carga cognitiva&#8221; al usuario y reduce la probabilidad de que esta    persona desee regresar[7]. Esto significa que los usuarios que llegan a un sitio    Web deben invertir un mínimo de tiempo deduciendo cómo funciona el sistema o    dónde encontrar cierta información. Si este tiempo aumenta al añadir ciertas    funcionalidades innecesarias (o necesarias pero implementadas de forma complicada),    es muy probable que el usuario se frustre y abandone el sitio.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823418">Errores    comunes al pensar en usabilidad Web</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Cuando se documentan los requerimientos    del usuario, los analistas, clientes e ingenieros usualmente incluyen una sección    especial en el documento denominada <i>Requerimientos Implícitos</i>, o requerimientos    de calidad. En esta sección se escribe una lista de requerimientos como:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Velocidad</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Control de errores</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Usabilidad</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Seguridad</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Precisión</font></p>     <p align="justify"><font size="2" face="Verdana">La usabilidad es casi siempre    incluida en la lista pero en las siguientes etapas del desarrollo del sistema,    como el diseño, este criterio es prácticamente olvidado, porque se asume que    el sentido común de los diseñadores y programadores será suficiente para hacer    el sistema <i>usable</i>. En la mayoría de los casos, esto está muy lejos de    la realidad. Los diseñadores tienden a poner demasiadas cosas en cada pantalla    para hacerla lucir bien sin pensar en cuán difícil será de utilizar para los    usuarios. Los programadores a su vez tienen un enfoque más práctico pero poco    amigable para el usuario: construyen pantallas que están organizadas de manera    lógica y estructurada, pero que sólo son fáciles de usar para alguien con experiencia    técnica.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">Gerentes, diseñadores, programadores    y usuarios hablan idiomas distintos y muchos aspectos relacionados a la usabilidad    de un sistema son ambiguos y entendidos de maneras muy distintas dependiendo    del trasfondo y experiencia de cada persona.</font></p>     <p align="justify"><font size="2" face="Verdana">Para empeorar el problema, comúnmente    las deficiencias en usabilidad son descubiertas cuando los usuarios utilizan    el sistema por primera vez durante las pruebas de aceptación (User Acceptance    Test en inglés), que son ejecutadas al final del ciclo de desarrollo. En esa    fase cualquier cambio a la interfaz es muy costoso en tiempo y dinero, lo que    hace casi imposible cualquier mejora.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823419">Mitos    y realidades sobre Usabilidad Web</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">Existen tres mitos acerca de    cómo construir un sistema usable:</font></p>     <p align="justify"><font size="2" face="Verdana"><b>Cualquier persona con un mínimo    de sentido común puede hacer un sistema &#8220;usable&#8221;</b></font></p>     <p align="justify"><font size="2" face="Verdana">La mayor parte del tiempo, esto    no es cierto. Es importante contar con una persona en el equipo que tenga experiencia    en el diseño de interfaces de usuario.</font></p>     <p align="justify"><font size="2" face="Verdana"><b>Hacer un sistema &#8220;usable&#8221;    acarrea altos costos</b></font></p>     <p align="justify"><font size="2" face="Verdana">Un gerente o administrador de    proyectos debería saber cuán importante es la usabilidad del sistema. Algunas    veces, aunque se sabe que es importante, se decide no ejecutar &#8220;tests&#8221; de usabilidad    porque éstos son conocidos como los más costosos. Los expertos recomiendan el    uso de cámaras, software especial para grabar las acciones de los usuarios,    reclutar usuarios de distintos niveles de experiencia, reuniones de revisión    y adición de tiempo al cronograma para la corrección de errores.</font></p>     <p align="justify"><font size="2" face="Verdana">Todo esto, aunque deseable, no    es obligatorio. Existen alternativas menos costosas, que no requieren de tanta    tecnología. Krug[ 7] recomienda reuniones en las que se monitoree las acciones    de los usuarios, y luego breves reuniones para decidir los cambios.</font></p>     <p align="justify"><font size="2" face="Verdana"><b>Todos creemos conocer al &#8220;usuario    promedio&#8221;</b></font></p>     <p align="justify"><font size="2" face="Verdana">Este es quizás el mayor de los    errores. Todas las personas involucradas en el desarrollo de un sistema creen    conocer al usuario promedio y cómo él o ella reaccionará al utilizar el sistema.    Lo cierto es que el &#8220;usuario promedio&#8221; es un invento de estándares como la ISO    y el CMM[7]. El &#8220;usuario promedio&#8221; no existe. Cada usuario es diferente, y lo    que es importante para un usuario no lo será para otro. Sin embargo, es importante    encontrar terreno común para llegar a un diseño que sea atractivo a la mayoría    de los usuarios y para ello seguir una serie de recomendaciones, que se detallarán    más adelante.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823420">Problemas    críticos relacionados a Usabilidad</a></b></font></h2>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">Nielsen hace una recopilación    de los problemas más severos encontrados en sitios Web. Estos son listados en    orden de severidad en la siguiente tabla:</font></p>     <p align="center"><img src="/img/revistas/ran/v5n1/v5n1a07-12.gif" width="574" height="350"></p> <h2 align="justify"><font size="2" face="Verdana"><a name="_Toc290823421">&#8220;Checklist&#8221;    de puntos importantes a considerar</a></font></h2>     <p align="justify"><font size="2" face="Verdana">A continuación se presenta un    resumen de los puntos más importantes a considerar cuando se intenta diseñar    un sistema para que sea <i>usable</i>.</font></p>     <p align="justify"><font size="2" face="Verdana">El concepto básico a recordar    es: &#8220;no añadir dudas o carga cognitiva al usuario&#8221;.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823422">Velocidad</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Cada página debería demorar menos    de tres (3) segundos en cargar, y menos de un segundo en la mayoría de los casos.    Estudios han demostrado que los usuarios se ponen impacientes luego del primer    segundo [10].</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823423">Botones</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Se debe hacer que los botones    luzcan como botones y tengan descripciones claras. Reemplazar los botones por    enlaces o imágenes poco claras sólo confunde a los usuarios (como lo muestra    la Figura 1, en la que el botón con apariencia de triángulo está perdido en    la pantalla).</font></p>     <p align=center><font size="2" face="Verdana"><img width=324 height=181 id="Imagen 1" src="/img/revistas/ran/v5n1/v5n1a07-01.jpg" alt="search_la_razon"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 1:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Antiguo sitio de La Razón. El botón de búsqueda estaba prácticamente perdido    en la página.</font></p>     <p align="justify"><font size="2" face="Verdana">También es importante recordar    la importancia del botón &#8220;Volver&#8221; o &#8220;Regresar&#8221;. Muchos formularios y páginas    contienen este botón, y muchas veces simplemente no funcionan. Parece algo muy    básico, pero es uno de los problemas más comunes con formularios.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823424">Enlaces</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Similar a los botones, los enlaces    deben lucir como enlaces, teniendo una clara distinción del texto normal. Los    usuarios no deberían escanear todo el texto buscando qué es o qué no es un enlace.    Asimismo, los enlaces deben cambiar de color una vez visitados, para que los    usuarios recuerden cuáles ya fueron usados [11].</font></p>     ]]></body>
<body><![CDATA[<p align=center><font size="2" face="Verdana"><img width=455 height=186 id="Picture 1" src="/img/revistas/ran/v5n1/v5n1a07-02.jpg"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 2:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Sitio Web de Boliviaje.com. Los enlaces en la parte izquierda sólo funcionan    si el usuario hace &#8220;click&#8221; en las imágenes, los textos sólo son    etiquetas. La opción para regresar al inicio del sitio es un pequeño ícono,    y el logo en la esquina superior izquierda no tiene ninguna función (debería    llevar al usuario a la página de inicio).</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823425">Utilizar </a>convenciones</font></h3>     <p align="justify"><font size="2" face="Verdana">Muchos diseñadores intentan utilizar    diseños innovadores y totalmente originales en sus sitios Web. Localizan el    menú en diferentes lugares, evitan el uso de pestañas y ponen el logo hacia    la derecha&#8230; cualquier cosa con tal de que luzca distinto a los demás. Lo que    esto causa, sin embargo, es tan sólo la desorientación del usuario.</font></p>     <p align="justify"><font size="2" face="Verdana">Amazon fue uno de los primeros    sitios en Internet en utilizar el concepto de pestañas para organizar el sitio    en los distintos departamentos (libros, electrónicos, juguetes, etc.). El éxito    de esta idea fue tal que el uso de pestañas (o <i>tabs</i>) se ha convertido    en un estándar para los sitios de venta de productos. Prácticamente todos los    demás sitios las utilizan.</font></p>     <p align="justify"><font size="2" face="Verdana">Como las pestañas, existen otros    elementos que se han convertido en estándares, como la ubicación del logo en    la esquina superior izquierda, el carrito de compras en la sección superior    derecha y la opción de &#8220;logout&#8221; en la parte superior.</font></p>     <p align=center><font size="2" face="Verdana"><img width=474 height=130 id="Imagen 3" src="/img/revistas/ran/v5n1/v5n1a07-03.jpg"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 3:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Sitio Web de Amazon (<a href="http://www.amazon.com">www.amazon.com</a>).    Esta empresa fue pionera en el uso de ciertos elementos que luego se convirtieron    en estándares, como las pestañas, el carrito de compras en la parte superior    derecha y la información de la sesión de usuario en la parte superior.</font></p>     <p align="justify"><font size="2" face="Verdana">Cambiar este tipo de convenciones    se ha convertido en el &#8220;reinventar la rueda&#8221; en el mundo de la usabilidad Web,    por lo que se recomienda a los diseñadores no eliminar ciertos elementos que    los usuarios ya están acostumbrados a ver en Internet.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823426">Listas de selección o &#8220;<i>dropdowns</i>&#8221;</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Las listas de selección o <i>dropdowns</i>    son elementos comunes en páginas Web. Presentan una lista limitada de opciones    de entre las cuales el usuario debe escoger una.</font></p>     <p align="justify"><font size="2" face="Verdana">Al utilizar este elemento, cada    opción presentada debe ser clara y en lo posible no agrupar más de una idea.    Un ejemplo se presenta en la Figura 4, en la que el usuario debe seleccionar    la empresa de telecomunicaciones que utiliza. La opción &#8220;T-Mobile / Voicestream&#8221;    significa &#8220;seleccione esta opción si Ud. utiliza T-Mobile ó Voicestream&#8221;, cualquiera    de los dos. Esto puede ser obvio para muchos usuarios, pero otros dudarán si    la opción significa &#8220;cualquiera de los dos&#8221; o &#8220;los dos al mismo tiempo&#8221;. Si    es necesario, ambas opciones deberían ser presentadas independientemente; no    importa si el valor del campo (para procesar la transacción) es el mismo.</font></p>     ]]></body>
<body><![CDATA[<p align=center><font size="2" face="Verdana"><img border=0 width=244 height=286 id="Imagen 4" src="/img/revistas/ran/v5n1/v5n1a07-04.jpg" alt=dropdown></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 4:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Ejemplo de lista de selección o &#8220;<i>dropdown</i>&#8221;</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823427">Familias y tama</a>ños de fuente</font></h3>     <p align="justify"><font size="2" face="Verdana">Mantener coherencia en las familias    y tamaños de fuente (o tipos de letra). No mezclar Arial con Times New Roman    y Courier New. Esto no sólo causa confusión en los usuarios sino que también    hace que las páginas se vean desorganizadas [11].</font></p>     <p align="justify"><font size="2" face="Verdana">Se pueden combinar distintos    tipos de fuente que pertenecen a la misma familia, como Times New Roman, Garamond    y MS Georgia que pertenecen a la familia Serif, o Courier New y Lucida Console    que pertenecen a la familia de las mono-espaciadas, pero no mezclar las fuentes    de distintas familias.</font></p>     <p align="justify"><font size="2" face="Verdana">Para más información sobre las    familias de fuentes se puede consultar el sitio http://www.w3.org/TR/CSS2/fonts.html#generic-font-families.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823428">Sobrecarga de las páginas</a></font></h3>     <p align="justify"><font size="2" face="Verdana">No sobrecargar las páginas con    información inservible. Por ejemplo, páginas que capturan información sobre    pagos u otra información que es delicada para el usuario no deberían tener publicidad,    enlaces a otros sitios o distracciones innecesarias. Los usuarios pueden hacer    &#8220;click&#8221; en estos elementos y &#8220;perder el hilo&#8221; de lo que estaban hacienda, incluso    abandonar por completo el sitio y dejar su sesión activa con información confidencial.</font></p>     <p align="justify"><font size="2" face="Verdana">Un ejemplo se presenta en la    Figura 5. La página es el &#8220;carrito de compras&#8221;, pero está llena de enlaces,    publicidad e información poco relevante al pago del producto.</font></p>     <p align=center><font size="2" face="Verdana"><img border=0 width=443 height=415 id="Imagen 5" src="/img/revistas/ran/v5n1/v5n1a07-05.jpg" alt="cart_with_too_much_ads"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 5:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Página para procesar pagos de Zappos.com.</font></p>     <p align="justify"><font size="2" face="Verdana">El contenido mismo de la página    debe ser breve. Krug recomienda: &#8220;Deshacerse de la mitad de las palabras en    cada página, y luego deshacerse de la mitad de lo que haya quedado&#8221;[7].</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">Ningún usuario lee bloques completos    de texto. Esto aplica incluso fuera de Internet: nadie lee los manuales de usuario    o incluso la letra menuda de los contratos. Todos estamos acostumbrados a escanear    buscando las partes más importantes y, cuando algo falla, buscar ayuda de un    amigo, y en última instancia, leer los documentos completos. Esa es la naturaleza    humana. Entonces, ¿por qué llenar las páginas de nuestro sitio con texto que    nadie va a leer? Puede que haya mucho que queramos decir acerca de nuestra empresa,    productos o servicios, pero la realidad es que nuestros usuarios no prestarán    atención a menos que lo presentemos de forma breve, e incluso, puede hasta tener    un efecto negativo si los usuarios se encuentran con &#8220;testamentos&#8221; en cada página.</font></p>     <p align="justify"><font size="2" face="Verdana">Es importante recordar que los    usuarios de Internet:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Siempre están con prisa de encontrar lo que sea que buscan, por lo que no invertirán    mucho tiempo en una página.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Escanean buscando lo que necesitan y hacen <i>click</i> en el primer enlace    que parece contener la respuesta.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Son buenos en escanear la información, hacer <i>click</i> y encontrar lo que    necesitan. Puede ser que en un par de ocasiones se encuentren con callejones    sin salida, pero eventualmente encuentran lo que necesitan.</font></p>     <p align="justify"><font size="2" face="Verdana">Una razón para este comportamiento    de &#8220;click &#8211; escanear &#8211; click &#8211; escanear&#8221; es que no existe penalidad alguna.    Ningún usuario paga una cifra determinada por página visitada, y es fácil volver    atrás e intentar otras opciones y, aunque con tropiezos, todos como usuarios    somos buenos consiguiendo lo que necesitamos siguiendo este método. No todos    entienden cómo funciona algo, pero sí como obtener lo que necesitamos &#8220;paseando&#8221;    por Internet.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823429">Colores e imágenes de fondo</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Evitar el uso excesivo de colores    e imágenes en el fondo. Imágenes cargadas de colores fuertes no sólo resultan    en un diseño poco atractivo, sino que reducen a un mínimo las opciones de colores    para el texto. </font></p>     <p align="center"><font size="2" face="Verdana"><img border=0 width=482 height=241 id="Picture 7" src="/img/revistas/ran/v5n1/v5n1a07-06.jpg"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 6:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Sitio Web de la Escuela de Arte de la Universidad Yale (art.yale.edu). La    sobrecarga de colores e imágenes en el fondo no permiten distinguir el texto    localizado en la parte superior (que además está en color rojo claro).</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823430">Títulos y pestañas</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Cada página debe tener un título    claro y que se distinga del resto del texto. Es como los nombres de las calles:    cada usuario debe poder identificar dónde se encuentra de manera fácil.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">Como se explicó en la sección    anterior al citar el ejemplo de Amazon, el uso de pestañas es altamente recomendado.    Las pestañas ocupan poco espacio en la página y permiten organizar el sitio    de una forma simple.</font></p>     <p align=center><font size="2" face="Verdana"><img border=0 width=440 height=129 id="Imagen 6" src="/img/revistas/ran/v5n1/v5n1a07-07.jpg" alt=tabs></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 7:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Sitio Web de la aerolínea U.S. Airways, que muestra el uso de pestañas en    la parte superior.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823431">Imágenes y listas</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Al utilizar imágenes, siempre    se debe utilizar la propiedad &#8220;alt&#8221;, que permite poner una etiqueta. Esto ayuda    a los usuarios a obtener una breve descripción cuando posicionan el mouse sobre    el gráfico. Adicionalmente, permite desplegar un texto breve en los navegadores    que tienen las imágenes deshabilitadas[7][11], en vez de la poco agradable &#8220;X&#8221;    que a veces encontramos.</font></p>     <p align="justify"><font size="2" face="Verdana">Al utilizar listas, estas deben    tener viñetas claras, y en lo posible ser breves.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823432">Tamaño de cada página</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Idealmente, cada página debe    ocupar sólo el largo de una pantalla. Y si la información no cabe en este tamaño,    no debe exceder por más de un 20%[10][11].</font></p>     <p align="justify"><font size="2" face="Verdana">La visita a una página en particular    no debería demorar más de 10 minutos.</font></p>     <p align="justify"><font size="2" face="Verdana">Regresando al ejemplo mostrado    en la Figura 2, donde se muestra una página del sitio Boliviaje.com: si se está    mostrando un mapa, este debería mostrarse completo en la pantalla, el usuario    no debería tener que hacer uso de la barra de navegación para ver la mitad restante    de la imagen. En este ejemplo en particular, en la actualidad sitios como <i>Google    Maps</i> ofrecen buenas opciones para desplegar mapas que ya contienen opciones    de &#8220;<i>zoom in</i>&#8221; y &#8220;<i>zoom out</i>&#8221;.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823433">Navegación</a></font></h3>     <p align="justify"><font size="2" face="Verdana">La navegación en un Sitio de    Internet es como la navegación en los supermercados: cada pasillo tiene un letrero    que lista los tipos de productos que uno puede encontrar, y una vez que el cliente    camina por ese pasillo, cada producto tiene su lugar específico en los estantes.    De la misma forma, al navegar por un sitio Web, los usuarios deberían poder    identificar claramente a dónde deben ir para encontrar algo en particular, y    cómo salir de los &#8220;pasillos&#8221; para navegar por otras secciones.</font></p>     <p align="justify"><font size="2" face="Verdana">Es importante recordar que muchas    veces los buscadores como Google, Bing o Yahoo! llevarán a los usuarios a una    página en particular, no necesariamente a la página de Inicio, por lo que el    diseñador debe pensar en que cada página, por pequeña que sea u oculta en la    maraña de páginas que el sitio tendrá, es importante y puede ser la primera    en ser visitada. Es importante ofrecer a los usuarios una forma de llegar a    las páginas importantes desde los rincones a los que &#8220;aterrizaron&#8221;.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823434">Publicidades</a></font></h3>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">En lo posible se debe evitar    poner publicidad en el sitio Web. Si es inevitable, localizarla lejos del contenido    principal, y en definitiva, no ubicarla en medio de lo que el usuario leerá.</font></p>     <p align="center"><font size="2" face="Verdana"><img border=0 width=480 height=305 src="/img/revistas/ran/v5n1/v5n1a07-08.gif"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 8:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b><i>The Post Chronicle. </i>Uso excesivo de publicidad y mala ubicación de    ésta.</font></p>     <p align="justify"><font size="2" face="Verdana"><a name="_Toc290823435">Un ejemplo    se muestra en </a>la Figura 8. El sitio de noticias <i>The Post Chronicle</i>    pone las publicidades en medio de las noticias. Existen publicidades a la izquierda    de la pantalla, debajo del título y en medio de la noticia.</font></p> <h3 align="justify"><font size="2" face="Verdana">Ventanas emergentes o <i>pop-ups</i></font></h3>     <p align="justify"><font size="2" face="Verdana">Evitar el uso de ventanas emergentes.    Estas sólo distraen y molestan a los usuarios, y son completamente inútiles    [11].</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823436">Multimedia</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Evitar utilizar demasiados recursos    multimedia. No utilizarla en absoluto si no es relevante al sitio Web.  Esto    incluye sonidos, videos y animaciones entre otros [11].</font></p>     <p align="justify"><font size="2" face="Verdana">Los sonidos y videos solo deberían    utilizarse si son importantes para el(los) producto(s) que es(son) promocionado(s),    y los controles sobre éstos (iniciar, pausar, detener) deberían ser fácilmente    localizables por el usuario. Muy pocas personas disfrutan de tener una página    produciendo sonidos ni bien ésta termina de cargar y pasar los próximos 30 segundos    deduciendo cómo detenerlo.</font></p>     <p align="justify"><font size="2" face="Verdana">Un claro ejemplo de abuso de    imágenes y animaciones es <i>Haiti News</i>, mostrado en la Figura 9:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    La página está innecesariamente sobrecargada de imágenes</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Aproximadamente la mitad de las imágenes tienen animaciones</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Probablemente sólo 3 o 4 imágenes son relevantes para el propósito del sitio    (difundir noticias sobre Haití)</font></p>     <p align="center"><font size="2" face="Verdana"><img border=0 width=478 height=374 id="Picture 9" src="/img/revistas/ran/v5n1/v5n1a07-09.jpg"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 9:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </b>Sitio Web Haiti News (anselme.homestead.com/AFPHAITI.html). El sitio hace    un uso exagerado de imágenes y animaciones.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823437">Tener en cuenta a los usuarios con discapacidad o limitaciones    visuales y auditivas</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Es importante recordar que algunos    de los usuarios que utilicen el sistema tendrán ciertas limitaciones físicas,    debido a discapacidades o avance de la edad.</font></p>     <p align="justify"><font size="2" face="Verdana">Estas consideraciones incluyen:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Tamaño del texto y tipos de fuente. En lo posible evitar fuentes difíciles de    leer (como letras con decorado excesivo o espaciado estrecho). Ofrecer además    la opción de ampliar y reducir el tamaño del texto.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Colores: evitar los tonos suaves en el texto, o los fondos de pantalla con colores    fuertes. Mantener coherencia entre el color de fuente y el color del fondo,    haciendo que la lectura del texto sea fácil (ver Figura 6).</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Algunos Sitios ofrecen incluso la opción de lectores automáticos que leen el    texto a los usuarios que tienen limitaciones visuales.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Intentar evitar el uso de palabras rebuscadas o que son muy específicas a una    industria. Tomar en cuenta que no todos los usuarios tienen el mismo nivel de    educación o dominio de la industria que la persona redactando los textos. Por    ejemplo, si es un sitio web de una constructora, evitar el uso de términos específicos    a ingeniería civil e intentar reemplazarlos por términos más comunes que la    mayoría de la gente pueda entender.</font></p> <h3 align="justify"><font size="2" face="Verdana"><a name="_Toc290823438">Las cinco preguntas y los seis elementos clave</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Todos los puntos descritos anteriormente    tienen como objetivo ayudar a los usuarios a responder cinco preguntas que determinan    cuán usable es un sitio Web. Si los usuarios pueden responder a estas cinco    preguntas de forma rápida y clara, el sitio que están visitando cumple con todos    los requisitos de Usabilidad. Los ejemplos son basados en la Figura 10:</font></p>     ]]></body>
<body><![CDATA[<p align=justify><font size="2" face="Verdana"><i>1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </i>¿Dónde estoy?    <br>   Ejemplo: <i>&#8220;Me encuentro en la sección de Actualidad, en la subsección de Deportes&#8221;</i></font></p>     <p align=justify><font size="2" face="Verdana"><i>2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </i>¿Por dónde debo empezar?    <br>   Ejemplo: <i>&#8220;Puedo hacer click en el título de la primera noticia, o ampliar    la imagen haciendo click en la fotografía. También puedo navegar por otras secciones    o sub-secciones.&#8221;</i></font></p>     <p align=justify><font size="2" face="Verdana"><i>3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </i>¿Dónde pusieron la &lt;funcionalidad&gt;?    <br>   Ejemplo: <i>&#8220;Pregunta: ¿Dónde pusieron la opción para ir al detalle de la noticia?    Respuesta: Puedo hacer click en el título.&#8221;</i></font></p>     <p align=justify><font size="2" face="Verdana"><i>4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </i>¿Qué cosas son las más importantes en esta página?    <br>   Ejemplo: <i>&#8220;El campo de búsqueda, la barra de navegación, las noticias más    importantes, la sección se noticias más leidas y enviadas del día en el lado    derecho, etc.&#8221;</i></font></p>     <p align=justify><font size="2" face="Verdana"><i>5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </i>¿Por qué cada cosa importante en la página está ubicada en el lugar donde    fue ubicada?    <br>   Ejemplo: <i>&#8220;El campo de búsqueda está en la parte superior derecha porque debe    ser fácilmente identificable y accessible sin importar en que página estoy;    la barra de navegación está entre el logo y las noticias haciendo una clara    separación entre lo que es constante en todas las páginas, y lo que cambia dependiendo    de la sección elegida.&#8221;</i></font></p>     ]]></body>
<body><![CDATA[<p align=center><font size="2" face="Verdana"><img border=0 width=446 height=282 id="Picture 8" src="/img/revistas/ran/v5n1/v5n1a07-10.jpg"></font></p>     <p align="center"><font size="2" face="Verdana"><b>Figura 10:&nbsp;&nbsp;&nbsp;    </b>Sitio Web de Los Tiempos (www.lostiempos.com)</font></p>     <p align="justify"><font size="2" face="Verdana">Asimismo, los seis elementos    que deben ser fácilmente identificables en cada página son:</font></p>     <p align="justify"><font size="2" face="Verdana">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    El logo de la empresa, organización o grupo (que debe contener un enlace a la    página de inicio)</font></p>     <p align="justify"><font size="2" face="Verdana">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    El título de la página.</font></p>     <p align="justify"><font size="2" face="Verdana">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Las secciones y sub secciones a las que se pueden acceder desde la página.</font></p>     <p align="justify"><font size="2" face="Verdana">4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Navegación local: cómo utilizar la sección en la que me encuentro.</font></p>     <p align="justify"><font size="2" face="Verdana">5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Identificadores de &#8220;estoy aquí&#8221;: una manera clara de mostrar al usuario en qué    lugar del sitio se encuentra. Esto en inglés se conoce como <i>Breadcrumbs.</i></font></p>     <p align="justify"><font size="2" face="Verdana">6.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Búsqueda: el campo de búsqueda y su botón deben ser claramente identificables    y su uso debe ser simple.</font></p>     <p align="center"><font size="2" face="Verdana"><img border=0 width=480 height=367 src="/img/revistas/ran/v5n1/v5n1a07-11.gif"></font></p>     ]]></body>
<body><![CDATA[<p align="center"><font size="2" face="Verdana"><b>Figura 11:&nbsp;&nbsp;&nbsp;    </b>Sitio Web Ebay (www.ebay.com)</font></p> <h2 align="justify"><font size="3" face="Verdana"><b><a>Métricas,    métodos y herramientas</a></b></font></h2> <h3 align="justify"><font size="3" face="Verdana"><a name="_Toc290823440">Métricas</a></font></h3>     <p align="justify"><font size="2" face="Verdana">Las métricas de usabilidad miden    la calidad de un producto de software (aplicación web, aplicación de escritorio,    celular, etc) según la experiencia del usuario al utilizarlo.</font></p>     <p align="justify"><font size="2" face="Verdana">Distintos expertos han propuesto    distintos criterios para medir la Usabilidad de un producto:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Shackel[12]</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Wixon and Wilson[8]</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Shneiderman[13]</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Constantine and Lockwood[3]</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Jakob Nielsen[11]</font></p>     <p align="justify"><font size="2" face="Verdana">Todos estos expertos listan criterios    que se pueden resumir en los listados del gobierno de los Estados Unidos en    la página <a href="http://www.usability.gov">www.usability.gov</a> [2][5]:</font></p>     <p align="justify"><font size="2" face="Verdana">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Facilidad de aprendizaje.- ¿qué tan rápido el usuario puede aprender a utilizar    el sistema?</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Eficiencia.- una vez que el usuario ha aprendido a utilizar el sistema, ¿cuánto    tiempo él o ella necesita para completar todas las transacciones?</font></p>     <p align="justify"><font size="2" face="Verdana">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Memorabilidad.- ¿El usuario recuerda que utilizó este sistema antes, o tiene    que aprender a utilizarlo nuevamente cada vez que regresa?</font></p>     <p align="justify"><font size="2" face="Verdana">4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Frecuencia y severidad de errores: ¿los errores cometidos por el usuario son    frecuentes? Y, ¿qué tan serios son estos errores? ¿El sistema es capaz de recuperarse    bien de estos errores, o simplemente deja de funcionar?</font></p>     <p align="justify"><font size="2" face="Verdana">5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Satisfacción: ¿el usuario disfruta utilizando el sistema?</font></p> <h3 align="justify">&nbsp;</h3> <h3 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823441">Métodos para evaluar </a>la Usabilidad de un Sitio Web</b></font></h3>     <p align="justify"><font size="2" face="Verdana">Los métodos para evaluar la Usabilidad    de un Sitio Web se agrupan en dos categorías [2][4]: inspecciones y tests de    usuario</font></p> <h4 align=justify><font size="2" face="Verdana">Inspecciones</font></h4>     <p align="justify"><font size="2" face="Verdana">Estos métodos incluyen evaluaciones    heurísticas, caminatas cognitivas, reuniones e inspecciones colaborativas.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Evaluaciones heurísticas: revisiones hechas por expertos que evalúan si cada    página cumple con una lista mínima de principios de usabilidad.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Caminatas cognitivas: pruebas hechas por personas no familiarizadas con la aplicación    en las que se evalúa la facilidad con la que una persona puede completar una    tarea.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Reuniones e inspecciones colaborativas: reuniones en las que gerentes, diseñadores,    programadores e incluso clientes evalúan cada página y discuten qué cosas deberían    modificarse.</font></p> <h4 align=justify><font size="2" face="Verdana">Tests de Usuario</font></h4>     <p align="justify"><font size="2" face="Verdana">Estos métodos consisten en la    recolección de información basada en observaciones a usuarios utilizando el    sistema por primera vez.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">También incluyen revisiones de    prototipos de pantallas y entrevistas a clientes y usuarios[4].</font></p>     <p align="justify"><font size="2" face="Verdana">La primera opción es la más realista    porque incluye a usuarios reales utilizando el sistema, y la captura de sus    reacciones. Los resultados que se obtienen de estas pruebas son los más útiles.    Sin embargo, hay que tener en cuenta que son pruebas más caras porque requieren    de más tiempo e incluso pagar a los usuarios para que asistan a las pruebas.    Krug recomienda el uso de cámaras caseras para grabar sus reacciones y revisarlas    luego[7].</font></p>     <p align="justify"><font size="2" face="Verdana">Ejecutar pruebas de Usabilidad    con usuarios que no están familiarizados con la aplicación es importante. Krug    explica:</font></p>     <p align="justify"><font size="2" face="Verdana">&#8220;Es como tener amigos de visita    en la ciudad. Cuando muestras a una persona algo sobre tu ciudad, siempre descubres    algo nuevo que habías ignorado en las décadas que llevas viviendo ahí.&#8221;[7].</font></p>     <p align="justify"><font size="2" face="Verdana">Si los diseñadores y programadores    son los únicos en ejecutar las pruebas, es seguro que pasarán por alto cosas    importantes.</font></p>     <p align="justify"><font size="2" face="Verdana">Las pruebas con usuarios demoran    usualmente entre una y dos horas (no se puede retener a los usuarios por más    tiempo). Este breve espacio de tiempo, sin embargo, es importante y otorga valiosos    resultados. Los programadores pueden darse cuenta de los errores más grandes    observando a los usuarios.</font></p>     <p align="justify"><font size="2" face="Verdana">Durante estas pruebas se recomienda    a los usuarios describir en voz alta lo que están haciendo. Esto ayuda a entender    el proceso que están siguiendo mentalmente para aprender a usar el sistema y    da pistas a los diseñadores y programadores de cómo hacer que ciertas funcionalidades    sean más fáciles de utilizar (requieran un proceso más corto para el usuario).</font></p>     <p align="justify"><font size="2" face="Verdana">Los pasos a seguir en estas pruebas    son [4][7]:</font></p>     <p align="justify"><font size="2" face="Verdana">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Reclutar a los usuarios.</font></p>     <p align="justify"><font size="2" face="Verdana">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Ejecutar pruebas de Usabilidad con los usuarios: darles una computadora y una    o dos horas de interacción con el sistema.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Grabar las acciones de los usuarios. Esto se puede hacer tomando apuntes, usando    cámaras caseras, grabadoras de voz o software especializado en grabar los &#8220;clicks&#8221;    del teclado y mouse</font></p>     <p align="justify"><font size="2" face="Verdana">4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Revisar las pruebas y hacer una lista de las correcciones a realizar en el sistema.</font></p>     <p align="justify"><font size="2" face="Verdana">5.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Al hacer la lista de correcciones, evitar los problemas &#8220;kajak&#8221;: aquellos que    ocurren rara vez y que toman mucho tiempo en ser corregidos. Si el cronograma    no permite dedicar tiempo a los problemas &#8220;kajak&#8221;, éstos pueden ser ignorados    hasta que se haga un nuevo &#8220;release&#8221; del sistema.</font></p> <h3 align="justify">&nbsp;</h3> <h3 align="justify">&nbsp;</h3> <h3 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823442">Herramientas</a></b></font></h3>     <p align="justify"><font size="2" face="Verdana">Las mejores herramientas son    los <i>checklists</i>. Seguir una lista de recomendaciones y verificar que la    aplicación cumple con la mayoría de éstas. Los siguientes sitios contienen buenos    ejemplos de estos <i>checklists</i>:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    User effect: <a href="http://www.usereffect.com">www.usereffect.com</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Daily bits: <a href="http://www.dailybits.com">www.dailybits.com</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Net Mechanic: <a href="http://www.netmechanic.com">www.netmechanic.com</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Guías de Diseño elaboradas por el Gobierno de los Estados Unidos sobre distintos    elementos de una página (texto, enlaces, botones, listas, etc.) [5].</font></p>     <p align="justify"><font size="2" face="Verdana">Otras herramientas para test    automático y captura de resultados de pruebas de usuario incluyen [6]:</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Usabilla: <a href="http://usabilla.com/">http://usabilla.com/</a></font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Concept Feedback: <a href="http://www.conceptfeedback.com/">http://www.conceptfeedback.com/</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Chalkmark: <a href="http://www.optimalworkshop.com/chalkmark.htm">http://www.optimalworkshop.com/chalkmark.htm</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Silverback: <a href="http://silverbackapp.com/">http://silverbackapp.com/</a></font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Ethnio: <a href="http://www.ethnio.com/">http://www.ethnio.com/</a></font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <h2 align="justify"><font size="3" face="Verdana"><b><a name="_Toc290823443">Conclusiones</a></b></font></h2>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    La usabilidad es una de las cualidades más importantes de una aplicación Web.    Gerentes, diseñadores, desarrolladores y &#8220;testers&#8221; deben prestar especial atención    a este aspecto.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Es un error asumir que cualquier persona sabe cómo hacer un sistema usable,    o que el sentido común es suficiente.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Hacer un sistema usable puede incrementar las ganancias de una empresa en un    100%.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Los &#8220;tests&#8221; de usuario son el mejor método para validar la usabilidad de una    aplicación.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Se sabe que un sistema ha alcanzado un buen nivel de Usabilidad cuando los usuarios    cometen menos errores, las llamadas a soporte técnico son mínimas y la cantidad    de usuarios incrementa.</font></p>     <p align="justify"><font size="2" face="Verdana">·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Existen diversas herramientas disponibles para pruebas de Usabilidad, desde    simples &#8220;checklists&#8221; hasta aplicaciones que automatizan la captura de resultados.</font></p> <h2 align="justify">&nbsp;</h2> <h2 align="justify">&nbsp;</h2> <hr align="center" noshade> <h2 align="justify"><font size="3" face="Verdana"><a name="_Toc290823444"><b>Referencias</b></a></font></h2>     ]]></body>
<body><![CDATA[<!-- ref --><p align="justify"><font size="2" face="Verdana">[1]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Keith Andrews. <i>Information Architecture and Web Usability</i>. Graz University    of Technology, 2009.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#160;<a href="javascript:void(0);" onclick="javascript: window.open('/scielo.php?script=sci_nlinks&ref=770357&pid=S1683-0789201100010000700001&lng=','','width=640,height=500,resizable=yes,scrollbars=1,menubar=yes,');">Links</a>&#160;]<!-- end-ref --><!-- ref --><p align="justify"><font size="2" face="Verdana">[2]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Hena Banati, Punam Bedi, and P.S. Grover. <i>Evaluating web usability from the    user&#8217;s perspective</i>. Journal of Computer Science 2 (4): 314-317, 2006, 1,    2005. Department of Computer Science University of Delhi, India.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#160;<a href="javascript:void(0);" onclick="javascript: window.open('/scielo.php?script=sci_nlinks&ref=770358&pid=S1683-0789201100010000700002&lng=','','width=640,height=500,resizable=yes,scrollbars=1,menubar=yes,');">Links</a>&#160;]<!-- end-ref --><!-- ref --><p align="justify"><font size="2" face="Verdana">[3]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    L. L. Constantine and L. A. D. Lockwood. <i>Software for Use: A Practical Guide    to the odels and Methods of Usage-Centered Design</i>. Addison-Wesley, 1999.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#160;<a href="javascript:void(0);" onclick="javascript: window.open('/scielo.php?script=sci_nlinks&ref=770359&pid=S1683-0789201100010000700003&lng=','','width=640,height=500,resizable=yes,scrollbars=1,menubar=yes,');">Links</a>&#160;]<!-- end-ref --><!-- ref --><p align="justify"><font size="2" face="Verdana">[4]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Peter Farrell-Vinay. <i>Manage Software Testing</i>. Auerbach Publications,    2008.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#160;<a href="javascript:void(0);" onclick="javascript: window.open('/scielo.php?script=sci_nlinks&ref=770360&pid=S1683-0789201100010000700004&lng=','','width=640,height=500,resizable=yes,scrollbars=1,menubar=yes,');">Links</a>&#160;]<!-- end-ref --><p align="justify"><font size="2" face="Verdana">[5]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Gobierno de los Estados Unidos. Guías para desarrollo de Sitios Web Usables.    <a href="http://www.usability.gov/">http://www.usability.gov/</a>, 2009. </font></p>     <p align="justify"><font size="2" face="Verdana">[6]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Tomlin, W Craig. 24 Usability Testing Tools, 2009. <a href="http://www.usefulusability.com/24-usability-testing-tools/">http://www.usefulusability.com/24-usability-testing-tools/</a></font></p>     <p align="justify"><font size="2" face="Verdana">[7]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Steve Krug. <i>Don&#8217;t Make Me Think: A Common Sense Approach to Web Usability</i>.    New Riders Press, 2nd. edition, 2005.</font></p>     <p align="justify"><font size="2" face="Verdana">[8]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    D. Wixon and C Wilson. <i>The usability engineering framework for product design    and evaluation. Human-Computer Interaction handbook,</i> 1997. Elsevier North-Holland.</font></p>     <p align="justify"><font size="2" face="Verdana">[9]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    Jakob Nielsen. <i>Use It</i>. http://www.useit.com/alertbox/20030825.html, 2009.</font></p>     <p align="justify"><font size="2" face="Verdana">[10]&nbsp; Jakob Nielsen. <i>Powers    of 10: Time Scales in User Experience</i>. http://www.useit.com/alertbox/timeframes.html,    2009.</font></p>     ]]></body>
<body><![CDATA[<p align="justify"><font size="2" face="Verdana">[11]&nbsp; Jakob Nielsen and    Hoa Loranger. <i>Prioritizing Web Usability</i>. New Riders Press, 1st. edition,    2006.</font></p>     <p align="justify"><font size="2" face="Verdana">[12]&nbsp; B. Shackel. <i>Usability-context,    framework, design and evaluation. Human Factors for Informatics Usability</i>,    1991. Cambridge University Press, Cambridge.</font></p>     <p align="justify"><font size="2" face="Verdana">[13]&nbsp; B. Shneiderman. <i>Designing    the User Interface: Strategies for Effective Human-Computer Interaction</i>.    Addison-Wesley, 1998.</font></p>     <p align="justify"><font size="2" face="Verdana"><a name="_Ref343005302">[14]&nbsp;    Info Design. <i>Usability and Performance Improvement Statistics</i>. http://www.infodn.com/class/pdf/Usability%20Performance%20Stats.pdf,    2011</a></font></p>       ]]></body><back>
<ref-list>
<ref id="B1">
<nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Andrews]]></surname>
<given-names><![CDATA[Keith]]></given-names>
</name>
</person-group>
<source><![CDATA[Information Architecture and Web Usability. Graz University of Technology]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B2">
<nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Banati]]></surname>
<given-names><![CDATA[Hena]]></given-names>
</name>
<name>
<surname><![CDATA[Bedi]]></surname>
<given-names><![CDATA[Punam]]></given-names>
</name>
<name>
<surname><![CDATA[Grover]]></surname>
<given-names><![CDATA[P.S.]]></given-names>
</name>
</person-group>
<source><![CDATA[Evaluating web usability from the user’s perspective]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B3">
<nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Constantine]]></surname>
<given-names><![CDATA[L. L.]]></given-names>
</name>
<name>
<surname><![CDATA[Lockwood]]></surname>
<given-names><![CDATA[L. A. D.]]></given-names>
</name>
</person-group>
<source><![CDATA[Software for Use: A Practical Guide to the odels and Methods of Usage-Centered Design]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B4">
<nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Farrell-Vinay]]></surname>
<given-names><![CDATA[Peter]]></given-names>
</name>
</person-group>
<source><![CDATA[Manage Software Testing]]></source>
<year></year>
</nlm-citation>
</ref>
</ref-list>
</back>
</article>
