MANUAL PARA LA ELABORACIÓN DE UNA INTERFAZ WEB …

1

MANUAL PARA LA ELABORACIÓN DE UNA INTERFAZ WEB OPTIMA Y CONSISTENTE.AUTORES: EDWARD PARRA SEBASTIÁN LUNA

Mayo 28 de 2012

MANUAL PARA LA ELABORACIÓN DE UNA INTERFAZ WEB OPTIMA Y CONSISTENTE


2 3

RESUMEN

El buen desarrollo de un sitio web requiere de una serie de habilida-des que no siempre se encuentran en una sola persona, por ello, es ne-cesario tener un equipo de trabajo experimentado en áreas a fin con el diseño web, como: la programación, arquitectura de la información, recursos humanos, ingeniería de la y diseño grafico. Implementando las disciplinas nombradas anteriormente, en cada una de las fases del desarrollo de una página web, como se propone en esta investigación, se lograra una interfaz web óptima y consisten-te que le brinde al usuario la usabilidad esperada, entendiendo esta, como la cualidad que tiene un producto interactivo de ser fácil de usar y comprender.

Por eso, en el presente manual pretendemos brindar un marco de tra-bajo en el que cualquier persona involucrada con el desarrollo del sitio web, pueda encontrar una guía con criterios y mecanismos que le faci-liten seguir el proceso para la creación de una interfaz web centrada en el usuario.

ÍNDICE

RESUMEN……………………………………………………. 2INTRODUCCIÓN……………………………………………… 4ANTECEDENTES……………………………………………… 6JUSTIFICACIÓN……………………………………………..... 7MANUAL DE INTERAZ WEB…………………………………. 8 FASE 1. OBSERVACIÓN………………………………… 9 Paso de la observación………………………… 11 1. Objetivos del sitio web ………………… 12 2. Identificar al usuario…………………….. 16 3. Arquitectura de la información………… 20 4. Restricciones del sitio web……………… 25 5. Dificultades del diseño web……………… 26 FASE 2. DISEÑO………………………………………… 30 Pasos en el diseño……………………………… 31 1. Modelo conceptual……………………… 32 2. Navegación………………………………. 39 Fases del diseño……………………………….. 43 1. Diseño de la navegación…………… 44 2. Diseño del contenido………………. 49 3. Prototipos…………………………………. 56 Lineamientos de usabilidad y consistencia……… 59 FASE 3. EVALUACIÓN…………………………………… 146 Formato prueba de usabilidad………………… 148 Prueba de usabilidad……………………………. 151 Como analizar los resultados…………………. 164Conclusiones.............................................................................. 165Bibliografía…………………………………………………… 168



4 5

Un reto único que tiene el diseñador de la interfaz web frente al de-sarrollo de cualquier otro tipo de interfaz de usuario, es no tener el control total sobre la presentación final que tendrá el sitio, es decir, los usuarios pueden cambiar el tamaño de las ventanas, de las fuentes tipográficas y hasta los colores varían dependiendo de la calibración de la pantalla y la forma varía dependiendo del navegador que se esté utilizando.

El desarrollo de una página web no es netamente una actividad de dia-gramar información, sino que también está compuesta por una serie de factores con gran importancia para que el desarrollo de una página web tenga éxito y además, la página sea funcional para el usuario y para quien va a administrar la página.

INTRODUCCIÓN

La creación de una interfaz web requiere ser desarrollada bajo la filo-sofía del diseño centrado en el usuario (DCU). Bajo esta filosofía, se aglutinan gran cantidad de métodos y técnicas de distintos autores que definen unas fases que aseguren que la página web cumplirá con los niveles de usabilidad y navegabilidad de forma satisfactoria.

Este proyecto investigativo está fundamentado principalmente bajo las teorías planteadas por Charles J. Lyons y Jon Meads, quienes afir-man que el buen desarrollo de una interfaz requiere estrictamente el uso de tres etapas que se dividen en: Observación, Diseño y Evalua-ción.

Cada una de ellas será llevada a cabo de forma repetitiva, ya que por medio de la evaluación continua del prototipo, se aumentaran las pro-babilidades de éxito de la interfaz, siempre y cuando se vea al usuario como centro del universo, y las decisión de diseño sean tomadas en pro de facilitar las tareas que necesite desarrollar.

Un reto único que tiene el diseñador de la interfaz web frente al de-sarrollo de cualquier otro tipo de interfaz de usuario, es no tener el control total sobre la presentación final que tendrá el sitio, es decir, los usuarios pueden cambiar el tamaño de las ventanas, de las fuentes tipográficas y hasta los colores varían dependiendo de la calibración de la pantalla y la forma varía dependiendo del navegador que se esté utilizando.



6 7

ANTECEDENTES

El internet se encuentra ahora en lo que se ha denominado la WEB 2.0, y ha facilitado la presencia en el de cualquier entidad que así lo desee. La red se ha convertido en parte esencial en la vida de muchas personas, para nosotros los diseñadores gráficos es una herramienta fundamental y una posible fuente de ingresos, pero ¿cuáles son los lineamientos bajo los cuales se debe desarrollar una página web opti-ma y consistente?

Seguramente, usted ya hace parte de lo que hoy en día conocemos como redes sociales, de ser así ya es conocedor del sistema básico de navegación en internet, y ha tenido la experiencia de interactuar con una interfaz, según el libro Diseño de Sitios Web (Pipes, 2011)afirma que todos los diseñadores deberían tener su propia página web, ya que esta le proporciona el ser accesible a sus clientes, de igual mane-ra las páginas de las entidades educativas. La accesibilidad se emplea para describir el grado en que un sitio puede llegar a ser visitado por la mayor cantidad posible de personas, es decir que sea global, pero esto no determinara el que una página tenga o no tenga éxito, para ello, es necesario comprender los factores que hacen a una interfaz optima dentro del marco de la usabilidad.

JUSTIFICACIÓN

Hoy en día vivimos en un mundo donde la tecnología está incluida en gran parte de nuestro diario vivir, convirtiéndose en un gran instru-mento para el intercambio de información y la comunicación interac-tiva a larga distancia.

El internet ofrece herramientas que permiten la posibilidad de crear y mantener comunidades virtuales con intereses y necesidades comu-nes. Gracias a este medio se pueden fortalecer los métodos de ense-ñanza e intercambio de información importante para el usuario.

Teniendo en cuenta lo anterior, esta herramienta es fundamental para que la universidad pueda fortalecer su facultad de comunicación, pro-poniendo e implementando áreas que desarrollen en el estudiante habilidades cognitivas, búsqueda, evaluación, síntesis y habilidades básicas (Siever & Andrew, 2005) en un medio alternativo como lo es una página web, que podrá ser visualizada en computadores o en dis-positivos móviles.



8 9

MANUAL INTERFAZ WEB

Las fases están divididas en capítulos temáticos propuestos, para que una interfaz web sea optima y consistente:

FASE1. Observación

FASE2. Diseño

FASE3. Evaluación

FASE 1. OBSERVACIÓN

“Lo que los usuarios realmente quieren son buenas herramientas, todos los sistemas de software, desde los sistemas operativos y los lenguajes, hasta la entrada de datos y las aplicaciones de apoyo a la toma de decisiones, son solo herramientas. Los usuarios finales esperan de las herramientas que construimos para ellos, lo mismo que nosotros de las herramientas que creamos, quieren sistemas fáciles de aprender y que les ayu-den a hacer su trabajo” (Constantine)



10 11

Constantine argumenta que la usabilidad de una página web, no la de-termina el que estéticamente se vea bien o que haya sido desarrollada con tecnologías avanzadas, sino el hecho de que una página web sea fácil de usar cuando el usuario lo requiera.

“facilidad de uso es una medida de la manera en que un sistema de computo facilita el aprendizaje, ayuda a quienes aprenden a recodar lo que han aprendido, reduce la posibilidad de errores, les permite ser eficientes y los deja satisfechos con el sistema” (Pressman, 2010)

Respecto a lo anterior, proponemos a la observación como la fase más importante en el ciclo del desarrollo web, donde se lleva a cabo un análisis de los objetivos, usuarios e información del sitio. En esta se propone permitir al usuario su vía de navegación hacia el conocimien-to y comprensión de la información.

Pasos en la observación

1. Objetivos del sitio web

2. Identificar al usuario

3. Arquitectura de la información

4. Restricciones del sitio web

5. Dificultades del diseño web



12 13

1. Objetivos del sitio web

A la hora de desarrollar un sitio web, el determinar los objetivos y lo que se espera de la página, constituye uno de los pasos más importan-tes para definir la conceptualización, el diseño y la implementación del portal web.

Los objetivos nos permitirán realizar una evaluación sobre el éxito de la página, por esta razón deben ser formulados de manera clara, con-creta y sin ambigüedades.

Para conseguir esto, es necesario recopilar los datos sugeridos en la siguiente lista.

- Información de la empresa- Definir el nicho al que se quiere llegar (usuario)- Información sobre productos y servicios- Permitir a los clientes proporcionar datos e información- Proporcionar la venta online de productos y servicio

Esta información se puede obtener a través de:

- Entrevistas a las áreas involucradas- Mesas de trabajo donde se generen lluvias de ideas y debates- Encuestas



14 15

Asegúrese que los objetivos estén bien definidos, para ello cree un documento en el cual se plasmen cada uno de ellos y se presenten también los antecedes y el proceso de definición. Trasmita los objeti-vos a todos los miembros del equipo y cualquier persona relacionada con el portal.

Ejemplo de objetivos:

- Expedir a través de la pagina el certificado de estudio- Crear el habito de consulta continua- Crear un espacio donde los alumnos puedan subir sus trabajos y exponerlos.

Evaluación Para evaluar el éxito de su sitio web, obteniendo resultados específi-cos y cuantificables, deberá tener en cuenta lo siguiente:

- ¿Cuántos usuarios van a visitar su sitio web por día o por semana?

- ¿Cuánto tiempo permanecen los usuarios en el sitio?

- ¿Cuántas páginas o recursos visitan los usuarios durante una sesión normal?

- ¿Con qué frecuencia vuelven los usuarios a visitar el sitio?

Esta serie de preguntas le ayudara a obtener información precisa que será favorable y aportará al éxito de su sitio web.



16 17

2. Identificar al usuario

La elaboración de un perfil de usuario, es una metodología que nos permitirá analizar las necesidades de los usuarios que visitarán el sitio web.

Esta serie le preguntas le ayudaran a tener un breve panorama de in-formación sobre su usuario:

- ¿Quién es el usuario?- ¿Qué quiere o que espera?- ¿Cuáles son las necesidades de información del usuario?- ¿Puede cualquier persona acceder al sitio?

No olvide determinar el contexto en el cual el usuario llevara a cabo el proceso desde que formula su necesidad hasta su llegada al sitio web.

Podemos analizar al usuario siguiendo estos criterios:

1) Información general del usuario y demografía:

- Intereses - Nombre - edad - Necesidades - Conocimientos - Posibilidades - Presunciones

2) Escenarios de uso y metas

- Plataforma - Navegador - Velocidad de conexión - Grado de conocimiento - Experiencia web



18 19

El éxito del sitio web esta determinado por la capacidad que tenga de responder a las necesidades de los usuarios. Tanto el usuario como sus motivaciones están relacionados con los objetivos del sitio web. Los usuarios deberán ser segmentados de acuerdo con sus caracte-rísticas, identificar roles o grupos nos permite definir las necesidades que atienen a la mayor parte de usuarios y centrarse en lo mas proba-ble en vez de todo lo posible.

Para recopilar dichas necesidades, sugerimos utilizar los siguientes re-cursos:

- Encuestas - Entrevistas personales

Un ejemplo de especificación de los objetivos para un grupo de usua-rios es el siguiente.

- Estudiantes egresados: En este grupo se encuentran todos aquellos estudiados ya graduados de la universidad y la mayo ría de ellos están entre los 22 a 30 años.

- Necesidades:

o Encontrar fácilmente los requisitos para solicitar un certificado de grado. o Enterarse de los últimos avances de la facultad. o Encontrar la información de contacto para comuni carse con la universidad.

Al igual que los objetivos de la entidad, genere un documento donde especifique cada una de estas necesidades incluyendo los anteceden-tes y el proceso que se llevo a cabo para identificarlas.



20 21

3. Arquitectura de la información

Es la combinación de organizar la información en categorías, con el fin de ayudar a los usuarios a encontrar y manejar la información de ma-nera eficiente. Incluye aspectos como la planificación del contenido, la organización de las páginas, el etiquetado de información y el diseño de la navegación.

La arquitectura de la información es uno de los componentes más im-portantes en la usabilidad de un sitio web y en la experiencia del usua-rio. Tiene una relación directa con la facilidad que tendrá el usuario para encontrar lo que busca, es quizás la razón por la que diversos estudios, demuestran que la gran mayoría de errores en pruebas a usuarios, se deben a problemas con la arquitectura de la información.

Para comprobar los resultados existen diversas técnicas de informa-ción y evaluación, algunas de estas son (Carvajal & Saab, 2010):

• Card Sorting: El Card Sorting generalmente es usado para pro-bar los mapas de navegación o blueprints. Permite a través de una téc-nica de agrupación de tarjetas, obtener información acerca del mapa mental de los usuarios o probar una estructura ya existente por medio de lo que se denomina un Card Sorting cerrado.

• Tree Testing: Este test se emplea para probar específicamen-te mapas o estructuras de sitio. El usuario recibe una tarea, y se le presenta el mapa del sitio para que intente encontrar lo que busca. La clave del test está en mostrar la estructura del sitio por niveles de jerarquía, con lo que es posible medir el porcentaje de usuarios que llegaron directamente al objetivo, el porcentaje de retrocesos, entre otros.

• Test de 5 segundos: El principio de este test es ver cómo reac-cionan los usuarios en un margen de tiempo reducido. Los test de 5 segundos presentan al usuario opciones y exigen una respuesta antes del tiempo estipulado. Es usado para comprobar por ejemplo rótulos a usar en las categorías, o incluso para identificar qué elementos de la interfaz son memorizados con mayor facilidad.



22 23

Asegúrese de que la arquitectura de información de su sitio esta argu-mentada y basada en pruebas con usuarios. Para esto, exija los repor-tes de las evaluaciones hechas con los usuarios a los mapas de sitio y entregables del proceso de arquitectura.

Detrás de la estética y la ingeniosa redacción se encuentra una estra-tegia comercial básica diseñada para vender. Los sitios destacados tie-nen la misión de proporcionar información de forma entretenía e inte-ractiva, que ayude no solo a abrir una ventana, sino a crear un cliente de por vida.

A pesar de que la meta de marketing para cada sitio es diferente, la mayoría de empresas descubren que deben ofrecer generalmente la siguiente información:

- Nombre de la empresa - Información de contacto- Logotipo y eslogan- Declaración de posicionamiento- Noticas o secciones recientes- Mensaje del presidente de la empresa- Boletines de prensa- Formularios de registro de clientes- Testimonios y recomendaciones- Avisos de oferta para empleos en la empresa- Cupones y ofertas especiales- Mapa del sitio si tiene mas de 15 paginas aproximadamente- Fecha de ultima actualización- Buscados interno del sitio- Premios conseguidos por el sitio y la empresa- Iconos de medios que han escrito acerca de la empresa- Iconos de otras empresas de renombre- Avisos de derechos de autor

Tener buenos contenidos o información que represente valor para los visitantes es fundamental para el éxito de un sitio web frente a los usuarios y frente a los buscadores. Mas adelante entraremos en deta-lle de como se debe estructurar la información para que esta sea leída por los buscadores mas usados en la internet. (cuatrop, 2012)



24 25

Asegúrese de que la arquitectura de información de su sitio esta argu-mentada y basada en pruebas con usuarios. Para esto, exija los repor-tes de las evaluaciones hechas con los usuarios a los mapas de sitio y entregables del proceso de arquitectura.

Detrás de la estética y la ingeniosa redacción se encuentra una estra-tegia comercial básica diseñada para vender. Los sitios destacados tie-nen la misión de proporcionar información de forma entretenía e inte-ractiva, que ayude no solo a abrir una ventana, sino a crear un cliente de por vida.

Legibilidad

- Títulos, subtítulos, viñetas, numeración, tablas y esquemas. - Lenguaje adecuado a la población a quien va dirigido. - Alineación izquierda en textos largos, es más legible. - Alineación justificada, si se asegura un espacio entre letras ade cuado. - Alineación derecha y centrada o asimétrica, para bloques pe queños. - Uso de mayúsculas y minúsculas para una mayor velocidad de lectura. - Evitar imágenes de fondo, buscar máximo contraste entre fon do y texto.

4. Restricciones del sitio web

Hay restricciones que pueden afectar la optimización y el rendimiento del sitio web. Las restricciones son obstáculos que deben ser esquiva-dos para asegurar el éxito del sitio web. Para jerarquizar las restriccio-nes identificadas, podemos aplicar una escala de bajo, medio y alto, lo que nos permitirá tener mejor claridad y determinar las personas que le darán solución a cada una de esas restricciones, determinando la fecha con la que se deben implementar.

Ejemplo de algunas posibles restricciones:

- Información privada a terceros: no tener control en manos de quién caen los datos ni que uso se puede hacer de ellos.- Cambios en las condiciones del servicio: Puede que el servicio sea gratis hoy y mañana no.- Mal diseño: estructuración de la página con programas que no son 100% compatibles con el lenguaje html.- Incompatibilidad: casos cuando el diseño en general o porcio nes del sitio web no son compatibles con los exploradores que visitan la pagina, debido a que se encuentran mal estructu radas, impidiendo que se desplieguen en todos los explorado res.- Tiempo de Carga: cargarse la página en el explorador en un tiempo prolongado, evitará el acceso a ella por parte de los usuarios.- Mal Hosting: un servidor recargado puede hacer de la web un sitio lento e incluso, colapse continuamente.



26 27

5. Dificultades del diseño web

a) Demasiada información b) Impaciencia del usuario c) Leer de la pantalla es mas difícil que leer del papel d) Limitaciones de la memoria a corto plazo e) Tendencia a perderse

a) Demasiada Información

La web esta compuesta de información que en ocasiones se encuentra desorganizada y es difícil de digerir, para entender esta información, el lector a menudo tiene que acudir a la prueba y error para encontrar la lógica que haya querido reflejar el autor.

b) Impaciencia del usuario

- Las páginas web pueden cargar lentamente, lo que hará que los usuarios se frustren. - Los usuarios abandonan un sitio web en unos dos segun dos sino ven algo útil al principio. - A menudo el motivo de esta rápida salida es que la infor mación se esta presentando de una manera desorganiza da y confusa o en su defecto, ni siquiera se pudo visuali zar por su demora al cargar.

c) Leer en la pantalla es más difícil que leer en papel

Existen una serie de motivos que no permiten que la lectura web sea fluida como la que leemos en papel. Las fuentes no son tan claras, los lectores suelen ver una pantalla a la vez y el espacio de lectura es limitado, por ello el diseñador recurrir a un diseño que presente la información en pantalla de manera eficaz y que facilite la acción de navegar en ella.



28 29

d) Memoria a corto plazo

A la par que la impaciencia del usuario, se encuentran las limitaciones de la memoria a corto plazo, conocida como STM. Esta memoria es la que utilizamos y empleamos todos los días y por ello es muy frágil. Por ejemplo, supongamos, una señora va de salida y lleva las llaves en su mano, de repente suena el teléfono y coloca las llaves al lado del teléfono mientras contesta la llamada, al colgar se dirige a la puerta y sale olvidando las llaves. Seguramente al volver se dará cuenta que no las tiene, y habrá olvidado donde las dejo.

Hay limitaciones de la STM que son independientes de la cultura, de la inteligencia y del género. Por regla general una persona del común puede manejar de cuatro a seis elementos de información a la vez. La presentación de información de cuatro a seis elementos de infor-mación resulta esencial para ofrecer a los lectores ojear rápidamente una página web y encontrar lo que buscan. Teniendo en cuenta que la lectura en la web es mas lenta que en un soporte de papel.

e) Tendencia a perderse

Generalmente encontramos páginas web mal organizadas y que ma-nejan distintos formatos, confundiendo y generando dificultades al lector. Con un buen diseño de interfaz se puede guiar a los usuarios por un sitio de manera intuitiva, tal forma que el usuario pueda nave-gar por el sin recurrir a la prueba y error.

d) Memoria a corto plazo

A la par que la impaciencia del usuario, se encuentran las limitaciones de la memoria a corto plazo, conocida como STM. Esta memoria es la que utilizamos y empleamos todos los días y por ello es muy frágil. Por ejemplo, supongamos, una señora va de salida y lleva las llaves en su mano, de repente suena el teléfono y coloca las llaves al lado del teléfono mientras contesta la llamada, al colgar se dirige a la puerta y sale olvidando las llaves. Seguramente al volver se dará cuenta que no las tiene, y habrá olvidado donde las dejo.

Hay limitaciones de la STM que son independientes de la cultura, de la inteligencia y del género. Por regla general una persona del común puede manejar de cuatro a seis elementos de información a la vez. La presentación de información de cuatro a seis elementos de infor-mación resulta esencial para ofrecer a los lectores ojear rápidamente una página web y encontrar lo que buscan. Teniendo en cuenta que la lectura en la web es mas lenta que en un soporte de papel.

e) Tendencia a perderse

Generalmente encontramos páginas web mal organizadas y que ma-nejan distintos formatos, confundiendo y generando dificultades al lector. Con un buen diseño de interfaz se puede guiar a los usuarios por un sitio de manera intuitiva, tal forma que el usuario pueda nave-gar por el sin recurrir a la prueba y error.



30 31

FASE 2. DISEÑO“Internet ofrece esplendidas posibilidades, pero también presenta cu-riosas dificultades. Para empezar, hace poco no era posible controlar demasiado la forma en que los diseños y plantillas aparecían en pan-talla. Solo se puede especificar fuentes tipográficas que el usuario ya tenga instaladas en su ordenador. Tampoco se puede especificar el tamaño en que se verán las fuentes ni las medidas empleadas. Tendre-mos que aceptar que nuestro diseño tendrá distintas apariencias en distintos navegadores y maquinas diferentes.

Sin embargo algunos diseñadores consideran que estas limitaciones resultan liberadoras, puesto que no hay que preocuparse por el for-mato y la resolución de las imágenes (todas son de 72 dpi) ni por la producción para imprenta. Además, como el modelo empleado es el RGB (rojo, verde y azul) que ofrece una gama más amplia que el CMYK, (cian, magenta, amarillo y negro) usado en la imprenta, es posible ele-gir entre más colores.

En muchos aspectos el internet es un medio ideal para comunicar: económico (casi gratis), global, instantáneo y, a pesar de lo dicho, ex-tremadamente versátil.” (Pipes, 2011)

Pasos en el Diseño

1. Modelo conceptual 2. Navegación 3. Prototipos



32 33

1. Modelo Conceptual

Un modelo conceptual es un modelo que se usa para representar la esencia, el tema y el estilo del sitio web. El modelo conceptual debe coincidir con el nivel del usuario. Un prototipo sencillo puede determi-nar fácilmente si el modelo o metáfora conceptual es apropiada.

Basados en la teoría planteada en el libro Guía Esencial del Diseño Web (Lyons, 2001), establecemos que los siguientes principios generales de diseño se deberán tener en cuenta en esta fase.

Principios generales de diseño

- Diseño centrado en el usuario

El diseño centrado en el usuario implica centrarse desde el principio y continuamente en los usuarios. Es preciso conocer los usuarios, por lo que tenemos que llevar a cabo un análisis de tareas. También tenemos que desarrollar objetivos estables y efectuar pruebas iniciales y conti-nuas, que se pueden hacer a través de simulaciones o prototipos.

- Trabajo en equipo

El diseño de los sitios web, requiere una serie de habilidades que no siempre se encuentran en una sola persona. A la hora de diseñar el si-tio web, necesitamos experiencia en áreas que incluyen la programa-ción, recursos humanos o ingeniería de la usabilidad, diseño grafico, videografía y conocimientos sobre servidores de sitios web.

Aunque podría ocurrir, es bastante raro que una persona reúna todas estas aptitudes. Es cierto que hay personas que, como los eruditos del renacimiento, son multidimensionales y poseen aptitudes muy varia-das. Pero, al igual que ocurre en el campo de la medicina, el diseño de sitios web sofisticados, pueden incluir el comercio electrónico, proba-blemente sea mas efectivo con una ayuda de especialistas en discipli-nas concentras.



34 35

- Globalización

En el diseño, es necesario tener en cuenta una serie de conocimientos y preferencias de la audiencia. Entre los usuarios, es muy probable que haya una gran variedad de plataformas tecnológicas provistas de una gran variedad de sistemas operativos y software. Estas plataformas de hardware-software pueden ser tan variadas que es preciso cono-cer la problemática que puede presentar esta variedad en nuestro di-seño e implementación.

También es necesario considerar la diversidad del contexto en el que la audiencia ve la información. Con una audiencia global muy amplia, no es muy probable que una sola representación contextual de un si-tio web sea acertada. Posiblemente necesitemos implementar distin-tas interfaces para estas audiencias.

- Prototipos

Desde el principio del desarrollo del sitio web, podemos desarrollar un prototipo, probarlo, rediseñarlo en base a las entradas de usuario, cambiar el prototipo, volverlo a probar y continuar con este proceso hasta que se satisfagan las necesidades de información del usuario. También podemos hacer prototipos de dos o tres alternativas de di-seño y mostrarla a los usuarios para que estos determinen cual pre-fieren. Podemos ejecutar una prueba de usabilidad en cada uno de los dos o tres diseños y determinar cual es más eficaz en términos de rendimiento, como por ejemplo, la velocidad y la exactitud.

- Como evitar la tecnología sangrante

Existe un dicho en la medicina que dice que un medico no debe ser el primero que escriba un nuevo medicamento ni el ultimo que se des-prenda de uno viejo. Lo mismo es extensible a la elección de las herra-mientas. El nuevo software puede contener errores. Si dispone de una herramienta de desarrollo de software que satisfaga las necesidades de desarrollo del proyecto y que se vislumbre que va a estar vigente durante una larga temporada, es mejor que utilice esa herramienta de software que aceptar el último software que prometa comerse el mundo. Deje que sean otras personas y empresas las que trabajen con el ultimo software, y cámbiese a el solamente cuando añada valor a su proyecto sin correr el riesgo de dañarlo.

Al diseñar, tenga presente lo que las herramientas puede y no pueden hacer. No prometa al usuario algo que sus herramientas no le permiti-rán hacer. Recuerde lo que cuesta el proyecto y las restricciones tem-porales a las que se esta enfrentando.

Además, tenga presente las aptitudes de su personal. Si no tiene una experiencia de programación muy solida, es mejor que diseñe el mar-co de las aptitudes de su equipo, siempre que el producto satisfaga las necesidades de los usuarios. Un proyecto que tenga un plazo de ejecución muy corto no es el recibimiento que merece el personal, ya que le exige la realización de objetivos o tareas que quedan claramen-te lejos de sus conocimientos. Si lo hace, es posible que incumpla el plazo de implementación del proyecto y/o entregue un producto que no satisfaga las expectativas de los usuarios.



36 37

- Soporte del usuario

Recuerde que el sitio web que esta desarrollando debe ayudar a los usuarios en las tareas que estén llevando a cabo. Es preciso tener en cuenta las tareas del usuario en el contexto de:- Los pasos específicos que seguirán para cada tarea- Los reconocimientos y experiencias que necesiten para un ren-dimiento mas satisfactorio

- La solución minimalista

Menos es mas, a veces nos vemos tentados por adornar la pagina web con motivos que no son relevantes para las tareas que el usuario esta llevando a cabo.

Los sitios web que sean demasiado complicados para el uso que se espera de ellos sin duda frustraran al usuario y conviertan su manteni-miento en una pesadilla. La sofisticación puede añadir valor, pero los adornos innecesarios que ensalzan la capacidad de usar un software determinado deben ser evitados en la medida de lo posible.

Recuerde que su sitio web tiene un objetivo, y su intención suele ser la de ayudar al usuario en la realización de su trabajo. Evidentemente, hay sitios de entretenimiento donde el audio, video y otros efectos sean lo que la audiencia espera.

- Establezca objetivos de usabilidad calculables

Los objetivos de usabilidad son los criterios que vamos a usar para calcular la rapidez con la que alguien pude utilizar su sitio web come-tiendo el menor número de errores posible. Un objetivo de usabilidad debe ser:

- Calculable- Especifico- Realista

Vamos a considerar este objetivo: el usuario ara dos transacciones en el tiempo oportuno. Este objetivo no es calculable. Un tiempo oportu-no es algo muy inexacto. Lo que es apropiado para una persona puede ser inapropiado para otra. Así que, si somos específicos, y declaramos que nuestro objetivo es que: el usuario puede hacer dos transacciones en dos minutos, con un 99% de exactitud, estaremos acercándonos mucho a la capacidad de cálculo. No obstante, es preciso definir ese 99% de exactitud. ¿Significa esto que el 1%de error esta bien? Como vemos, debemos ser muy rigurosos a la hora de definir los objetivos de usabilidad.



38 39

Y por ultimo, los objetivos debes ser realista, o susceptibles de ser satisfechos. Si ponemos el listón muy algo como por ejemplo, 20 tran-sacciones en 3,5 minutos, estaremos pegando de falta de realismo.He aquí algunos ejemplos de objetivos de usabilidad:

1) El usuario será capas de montar el equipo, hacer la instalación y reiniciar la computadora con las instrucciones en 45 minutos.2) El recepcionista será capaz de tramitar 10 pedidos de servicio en 15 minutos, sin errores.3) El usuario web será capas de encontrar la política de presta mos del sitio x en 30 segundos.

2. Navegación

En cualquier momento, el usuario de un sitio web puede responder a estas preguntas:

- Donde estoy- Donde puedo ir- Como puedo llegar- Como puedo volver

La gente ha estado navegando en los libros durante años. Pueden marcar las páginas, acceder a sus índices y encontrar sus páginas con facilidad.

Se encuentran cómodos con la materia forma de un libro y leyendo letras negras en un fondo blando, sin embargo, en la web, todos los lectores se encuentran ante una pantalla con espacio limitado. Con-secuentemente, en l base a los limites perceptivos de memoria, la na-vegación del lector por el sitio se vuelve problemática, el limite de la web es de cuatro a seis elementos de información, lo que es mas, la gente desea buscar, y no leer, en la web. Además la resolución de los mejores monitores es insuficiente si la comparamos con la del soporte de papel. Las fuentes aparecen distintas, dependiendo del software y hardware que se use. Dado que los usuarios pueden cambiar el tama-ño de sus ventanas, los hipervínculos pueden ser menos evidentes.

Nuestro reto consiste en construir un sitio intuitivo donde el lector pueda navegar fácilmente haciendo lo que le apetezca hacer en ese momento.



40 41

Principios fundamentales del diseño web

- Panorámica

Aparte de las técnicas sofisticadas que se oyen respecto al diseño web, existen cuatro principios fundamentales que proponen la base de la navegación y diseño del contenido de la web. Estos principios son tan fundamentales que el hecho de no incluirlos en el análisis y di-seño puede hacer que un sitio no sea adecuado para el consumo, por muchas técnicas avanzadas que podamos usar.

- La fragmentación: Agrupe la información en pequeños fragmentos de 4 a 6 ele mentos, a continuación del límite de fragmentación online de más 5 o menos 1.- La relevancia: Incluya en el fragmento únicamente lo que sea igual. Excluya las irrelevancias.- El etiquetado: Etiquete cada fragmento- La coherencia: Presente la información de un modo coherente, sin que haya diferencias.

Aplicación a la estructura arquitectónica y navegabilidad de un sitio web

- Fragmentación

- Asegúrese de que las rutas de la estructura y navegación de su sitio web se adaptan a los límites preceptivos y de corto plazo de las personas. - Organice su sitio en fragmentos que sean visibles.

- Relevancia

- Las partes, o fragmentos, de su sitio web solo deben con tener aquello que sea relevante a ese fragmento o parte - Las irrelevancias deben ser trasladadas a otro lugar, o ser eliminadas

- Etiquetado

- Utilice el etiquetado para conseguir que la arquitectura de su sitio web sea obvia e intuitiva para el lector - No tenga nunca información, vínculos o navegación que no estén debidamente etiquetadas - Evite etiquetas como atrás, siguiente, arriba y abajo. De pendiendo del contexto de la página y el uso de los foto gramas, estos tipos de etiqueta pueden hacer que el usuario se pierda - La navegación puede ser ayudada no solo por herramien tas de software, como iconos y botones, sino también por la naturaleza y coloración de la información de las páginas



42 43

Coherencia

- Utilice una navegación coherente, por ejemplo, un botón de ayuda que tenga el mismo tamaño y ubicación en to das las páginas web del sitio

- Utilice una coherencia determinada en los widgets.

Por ejemplo:

Utilice palabras con hipervínculos, para que el usuario tenga una ventana desplegable que contenga una defini ción Utilice botones de ayuda siempre que aparezca la ayuda No estamos hablando de coherencia sin sentido. Las di ferencias que hayan en la navegación tienen que ser de bidas a que la naturaleza de la navegación es diferencie. En otras palabras, todas las diferencias deben existir por algún motivo. No tienen que haber diferencias donde no marquen la diferencia Cuando una diferencia tenga un motivo, el usuario proba blemente reconocerá la causa fundamental de la elección Cuando haya una diferencia que se deba a un capricho sin causa lógica, el lector se frustrara y se vera obligado a utilizar la prueba y el error, o saldrá del sitio en tres o cuatro segundos.

Fases del diseño

El diseño se puede dividir en dos sub fases:

1.Diseño de la navegación 2.Diseño del contenido



44 45

1. Diseño de la navegación

Esquema navegacional

El diseño de un sitio web, la construcción de un esquema navegacio-nal permite al diseñador obtener una instantánea de la arquitectura del sitio y de las distintas rutas que el usuario habría podido tomar para navegar en el.

Anteriormente, desarrollamos una taxonomía de la información, mos-trando la división lógica de la información en un sitio. Esta taxonomía de la información era una herramienta de análisis que se usaba para separar todas las diferencias.

El esquema de navegación es una herramienta de diseño que se usa para integrar todas las similitudes.

Si se ha desarrollado una taxonomía de la información precisa, esta puede convertirse con facilidad en un esquema de navegación.

Estructura de la información

-Necesidades de la estructura

Los usuarios a veces se encuentran desamparados haciendo clic de página en página. Un buen diseñador presentaría al usuario un sitio estructurado y controles de navegación para desplazarse en el.

Para poder llevar a cabo esto, el diseñador deberá:

o Construir una estructura del sitio intuitivao Hacer que la estructura sea visible para el usuario, incluso si esta parece intuitivao Dar a los usuario información sobre la ubicación, de forma que sepan donde están y donde pueden iro Presentar al usuario métodos de navegación claros y coheren tes.



46 47

- Estructura de la información web

Es importante pensar en las formas en que se puede organizar la infor-mación en la web. Esta organización también puede ser un factor del diseño navegacional de las paginas de un sitio web. La organización de la información puede ser

a) Secuencialb) Jerárquicac) Asociativad) Estructuras de combinación

a) Estructura secuencial

La estructura secuencial es la mas conocida para la mayoría de usua-rios.

Ejemplo de estructuras secuenciales son

a) Procedimientos paso a pasob) Flujos de procesosc) Descripción de los eventos en su momento

b) Estructura jerárquica

El ejemplo mas común de la estructura jerárquica es el esquema orga-nizativo de una empresa. Un uso normal de la estructura jerárquica en las páginas web implica que haya una página principal con hiper-vínculos de menú con los niveles inferiores de detalle en las páginas subsiguientes.



48 49

c) Estructura asociativa

Implica una navegación no lineal. Podría ser un hipervínculo con un término de un glosario, o una recuperación de un diagrama de un cir-cuito de una base de datos. La navegación asociativa es, en esencia, toda navegación que no sea secuencial o jerárquica. La navegación de una estructura asociativa también puede ser llevada a cabo a través de palabras completas o búsquedas de palabras clave.

d) Estructuras de combinación

A veces, vemos combinaciones de estructuras en un sitio web. Por ejemplo, podría haber un menú (jerárquico), que es una determinada secuencia (orden de importancia), con un hipervínculo en uno de los elementos de menú, lo que podría llevarnos a una definición de un término (asociativo).

- Como aplicar las estructuras de información

Es importante tener presente que utilizamos las estructuras secuen-cial, jerárquica y asociativa como conjuntos de ideas que nos podrían ayudar a pensar en la estructura del contenido del sitio web. No hay que obligar a esta información a que entre en estas estructuras.

2. Diseño del contenido

Introducción

Ahora que hemos tratado los temas relativos a la navegación y al dise-ño navegacional, vamos a centrarnos en el diseño del contenido.

Tipos de contenido: panorámica

Es útil pensar en la información como categorizada en distintos tipos de contenido. Esto nos ayuda a ser coherentes con la forma en que vamos a presentar información similar en un sitio web. La información puede ser dividida en las siguientes categorías:

- Hechos Información especifica en forma de instrucción o de datos- Conceptos Los conceptos y las definiciones son necesarios para entender que es una cosa- Procedimientos Indica un numero secuencial de pasos que le indican como ha cer algo especifico- Procesos Explican como funciona algo- Principios Los principios y las directrices son concejos generales de exper tos que tienen el don de desarrollarlos bien- Estructuras Se usan en los diagramas de objetos que tienen partes y límites



50 51

Principios fundamentales aplicados al contenido

Recordara que cuando veíamos la navegación, establecíamos cuatro principios fundamentales a aplicar en el desarrollo de la navegación en un sitio web. Estos mismos cuatro principios se pueden aplicar al contenido web.

Como ayudar al usuario

Los seis tipos de contenido anteriores ayudan al usuario a aprender algo o hacer algo en su sitio web, los usuario aprecian este tipo de contenido en el sitio, ya que es concreto, fácil de seguir y anima al usuario a cometer una acción sin tener que recurrir a la prueba y el error.

Como representar los tipos de contenido en la web

- Hechos ¿Cuál es cual? Utilice tablas para mostrar códigos, números, datos y fechas, etc.

- Concepto ¿Qué es? Describa definiciones coherentemente

1) Tómese su tiempo para explicar lo que no significa el concepto, por ejemplo, la diferencia entre lápices y plumas. Los lápices no son plumas, ya que contienen grafito, no tinta. 2) Utilice gráficos, imágenes jpg, fotografías, etc., para mostrar ejemplos de los conceptos.3) Utilice hipervínculos para ofrecer una definición emergente de un elemento, que puede seleccionarse de modo opcional.

- Procedimientos ¿Cómo lo hago?

1) Numere los pasos procedimentales y utilice verbos de acción y con texto de objeto. Ejemplo 1, escriba su nombre de usuario y pulse intro.2) Cada paso debe representa una acción lógica que pueda estar en la memoria a corto plazo del lector y realizarse.3) Indique al usuario el resultado esperado de cada paso.4) Incruste pequeñas opciones graficas para ayudar al usuario.5) Utilice vínculos para mostrar posibles decisiones o acciones a acometer.



52 53

- Procesos ¿Cómo funciona?

1) Separe los procesos en fases.2) Céntrese en los movimientos, condiciones y sus resultados.3) Proporcione una explicación de como funcionan los procesos o de que ocurre durante el proceso.4) Utilice gráficos como esquemas de proceso5) Utilice la dramatización y el video para demostrar como funcio na el proceso6) Atención: adopte una solución minimalista, pruebe con las ani mación en vez de con videos las animaciones ocupan menos re cursos y aparecen mas deprisa, también pueden excluir los de talles innecesario y hacer que el proceso sea mas sencillo de ob servar.7) El audio podría resultar útil para pasar rápidamente los proce sos pero asegúrese de que el audio no difiere de lo que aparece en la pantalla no permita que el usuario se encargue de procesar las modalidades de información que puedan entrar en conflicto como por ejemplo el sonido y la animación.

- Principios

1) ¿Qué normas o directrices hay? Explique la causa y el efecto del principio

2) ¿Qué aria un experto? Identifique los orígenes del principio de la norma

- Estructura ¿a que se parece?

1) Muestre los diagramas de circuito o conmutadores. Elabórelo con las partes y funciones resaltadas en el diagrama y detalla das en una tabla de apoyo.2) Muestre las partes de los comandos de computadora3) Suprima las fotografías y videos que muestren demasiada granularidad y detalle innecesario. 4) Puede usar gráficos animados en vez de videos y ahorrar en ta maño y almacenamiento de archivo Principios fundamentales aplicados al contenido

- Fragmentación

1) Recuerde que el usuario prefiere no leer, sino ojear en la web.2) Los lectores tienen a examinar la información de la parte infe rior de la ventana.3) Los lectores emplean de tres a cuatro segundos para encontrar algo útil en su sitio.4) Fragmentar la información entre cuatro y seis elementos facili ta a los lectores encontrar y usar la información.5) Utilice la fragmentación en cada uno de los niveles del sitio web, de forma que su organización sea visible.6) El lector percibirá entonces que su sitio es intuitivo.7) Agrupe lo relevante.8) Las irrelevancias confunden al lector y hacen que su credibili dad disminuya a pasos agigantados



54 55

- Etiquetado

1) El etiquetado de la información supone una forma rápida para que el lector pueda acceder a la información.2) Los fragmentos desprovistos de etiquetas hacen que el lector desempeñe la tarea (sin valor añadido) de adivinar una etique ta, dándose cuenta de que no ha acabado bien su trabajo.3) El etiquetado también le ayuda como diseñador web.4) Si no puede ofrecer una buena etiqueta en un fragmento de in formación, significa que tiene mucho material que tiene que ser separado y ensamblado en otros fragmentos.5) Haga que la etiqueta sea clara, precisa y descriptiva de la natu raleza de la información del fragmento.6) La etiqueta deberá contener cinco palabras o menos, haciendo hincapié en menos.7) La mayor parte de sus etiquetan deberán estar entre una y cua tro palabras.

- Coherencia

1) La terminología coherente, las presentaciones coherentes y la disposición de la información promueven el entendimiento.2) Si por ejemplo ahí que definir un termino y decide y utilizar la etiqueta definición, quédese con esa etiqueta. No se entreten ga con de que trata o cualquier otro sinónimo.3) El lector esta buscando consiente o inconscientemente patro nes.4) Cualquier cambio en la terminología deberá reflejar la naturale za distinta de la información.5) Nuevamente, no emplee distinciones que no marquen una dife rencia.

- Estructura ¿a que se parece?

1) Muestre los diagramas de circuito o conmutadores. Elabórelo con las partes y funciones resaltadas en el diagrama y detalla das en una tabla de apoyo.2) Muestre las partes de los comandos de computadora3) Suprima las fotografías y videos que muestren demasiada granularidad y detalle innecesario. 4) Puede usar gráficos animados en vez de videos y ahorrar en ta maño y almacenamiento de archivo Principios fundamentales aplicados al contenido

- Fragmentación

1) Recuerde que el usuario prefiere no leer, sino ojear en la web.2) Los lectores tienen a examinar la información de la parte infe rior de la ventana.3) Los lectores emplean de tres a cuatro segundos para encontrar algo útil en su sitio.4) Fragmentar la información entre cuatro y seis elementos facili ta a los lectores encontrar y usar la información.5) Utilice la fragmentación en cada uno de los niveles del sitio web, de forma que su organización sea visible.6) El lector percibirá entonces que su sitio es intuitivo.7) Agrupe lo relevante.8) Las irrelevancias confunden al lector y hacen que su credibili dad disminuya a pasos agigantados



56 57

3. Prototipos

Un prototipo es un modelo de sistema. Los prototipos pueden ir de “baja fidelidad” (por ejemplo, un prototipo de papel, a “alta calidad” (por ejemplo, uno que use java, XML Macromedia Dreamweaver y Flash). Los prototipos de baja fidelidad son baratos, fáciles de cons-truir y, a menudo, pueden ayudarle a dar a los usuarios una idea del aspecto que tendrá el sitio web. Los prototipos de alta fidelidad son más realistas y su construcción lleva más tiempo.

El camino hacia el éxito

Por medio de los prototipos, los desarrolladores construyen un pro-totipo, lo prueban, realizan los cambios en el diseño, lo prueban de nuevo, y continúan este proceso hasta que el prototipo satisface las necesidades del lector.

Prototipos en soporte papel

Antes de crear un prototipo de alta fidelidad y dedicarle mucho tiem-po, a menudo es útil construir un prototipo en soporte de papel. Este tipo de prototipos pueden dibujarse en papel rápidamente, con bo-tones, casillas de verificación y otros widgets esbozados. En un pro-totipo de alta fidelidad, se tarda más en construir estos widgets (que tardan más en aparecer en la página). Con un prototipo de papel, las primeras ideas erróneas pueden abandonarse de una forma rápida y económica. El prototipo de alta fidelidad puede dedicarse a un diseño que este más próximo a las expectativas del usuario.

Los prototipos en soporte papel son útiles para probar un modelo o metáfora conceptual del sitio. Si se muestra una metáfora de un es-critorio a una enfermera, es muy probable que no sea capaz de re-lacionarlos con el modelo de la tarea. Por el contrario, si se usa una metáfora de una enfermería, la enfermera probablemente entienda mejor el sitio web propuesto y proporcione una información valiosa, que redunde en mayor eficiencia.



58 59

Ventajas de los prototipos

Los prototipos nos permiten entrar en las mentes de los usuarios y entender mejor sus expectativas. Los temas concretos son más procli-ves a emerger con el uso de un prototipo que con el uso de preguntas abstractas. Hace algunos años, las únicas herramientas disponibles eran los esquemas, los diagramas de flujo de datos, los diagramas de relaciones de identidad, etc.

Estas herramientas antiguas solo suponían una representación estáti-ca de la funcionalidad del sistema, y no atendían la cuestión de como el usuario podía interactuar con el sistema, ni como este ultimo podía ayudar al primero. Tras muchos meses de desarrollo, la típica respues-ta del usuario era: “no es lo que yo quería”.

Los prototipos, conjuntamente con las metodologías complementa-rias, como el análisis de eventos, hacen posible una construcción más rápida del sistema y sitios web que satisfacen las necesidades de los usuarios.

Lineamientos de usabilidad y consistencia

Teniendo en cuenta cada una de las teorías mencionadas anteriormen-te, determinamos una serie de alineamientos que deberán ser adapta-dos para el buen desarrollo de la interfaz.

Los cuales hemos ordenado de manea ascendente según su nivel de impacto, siendo 5 el nivel de mayor importancia y 1 el de menor pero de igual forma fundamental.



60 61

1. Fuentes tipográficas comunes (Research, Research), (NIELSEN & LORANGER, 2006)Nivel de Impacto: 1

Asigne fuentes tipográficas universales desde la hoja de estilo CSS para todos los textos.

En el diseño gráfico de libros, revistas o cualquier publicación impre-sa, el maquetador puede seleccionar entre un listado muy extenso de tipografías. Cuando el documento sale impreso, las tipografías, los ta-maños, los márgenes, los espacios y todos los elementos usados por el maquetador quedarán iguales, como los diseño, en su computadora.

Pero en el diseño web, el manejo tipográfico está reducido a unas po-cas fuentes universales. ¿La razón? A diferencia del papel, en la web la tipografía mostrada debe estar instalada en el computador del usua-rio, así que si el diseñador web seleccionó la fuente “Centabel Book” de su computadora, para que el usuario vea exactamente igual el dise-ño, deberá tener instalada esta fuente en su computadora.

¿Qué ocurre si el usuario no tiene instalada la fuente asignada por el di-señador? El navegador mostrará la información, pero con otra fuente tipográfica. Ahí es donde se pierde cierto control del diseño.

Por lo tanto esta directriz busca fomentar el uso de aquellas fuentes tipográficas universales, es decir, que se encuentran instaladas en prácticamente todos los computadores, en cualquier sistema operati-vo (Windows, Linux o Macintosh)

En la siguiente tabla se presentan las fuentes universales:

Para comprobar que el lineamiento se está cumpliendo abra las hojas de estilo, puede hacerlo desde un navegador como firefox o simple-mente con el programa de diseño web Dreamweaver, compruebe que los estilos tienen fuentes universales asignadas, a menos que se utilice una sustitución mediante distintas técnicas de fuentes, a discreción de la institución queda el uso de tipografías distintas a las mencionadas anteriormente.



62 63

2. Justificación del texto (WCAG)Nivel de Impacto: 1

Evite la alineación justificada del texto de prosa al margen izquierdo y derecho a la vez.

El diseño tipográfico que contempla la alineación justificada (margen derecho e izquierdo al mismo tiempo), es una práctica habitual en la industria de los impresos (libros, revistas, folletos).

Los diseñadores pueden, a través del software de edición, determinar la separación silábica apropiada para que lograr el anhelado “gris tipo-gráfico”16. En la web, la separación de sílabas no es posible de manera automática. Por ello, justificar un texto puede generar problemas de legibilidad y el gris tipográfico será difícil de conseguir.

La tendencia a pensar que la justificación de los textos es una práctica necesaria para mostrar rigurosidad, autoridad y orden en las páginas web, debe ser revaluada a la luz de las recomendaciones mismas del Consorcio W3C, que las empezó a considerar en la nueva versión de las Pautas de Accesibilidad al Contenido Web.

Gris tipográfico: es el color producido por la caja tipográfica, cuando es vista como un bloque. Cuando tiene tendencia al negro, la tipogra-fía puede estar muy junta y no está bien. Cuando la tendencia es al blanco, la tipografía está muy separada, tampoco está bien. Lograr ese gris, significa tener una composición tipográfica equilibrada y en ello tiene mucho qué ver la alineación justificada del texto.

A través de la observación, el evaluador puede determinar en las prin-cipales páginas web del sitio si existe texto justificado. También podrá hacerlo a partir de una búsqueda en la hoja de estilo CSS de la regla:

- text-align: justify;

Fotografia tomada de: http://trinis.es/ y http://www.utadeo.edu.co/



64 65

3. Desplazamiento horizontalNivel de Impacto: 2

Use un diseño de página que no genere desplazamiento horizontal.

La resolución mínima para monitores de computador que debe tener-se en cuenta en la actualidad para los sitios del Estado colombiano, es de 1024 x 768 pixeles. Sobre esta medida, el diseñador debe probar su diseño para que en ningún navegador aparezca la barra de desplaza-miento horizontal.

Por ello se sugiere una medida de 960 pixeles de ancho, que encaja perfectamente en la resolución establecida en esta directriz y que no generará barra de desplazamiento horizontal.

Para comprobarlo, haremos varias pruebas de visualización en nave-gadores que permitan simular distintas resoluciones de pantalla, en firefox por ejemplo vaya al menú Tamaño > Redimensionar ventana y escriba la resolución que pretende evaluar (1024 x 768).

Fotografia tomada de: http://www.elespectador.com



66 67

A partir de la lectura de los documentos de la primera fase, en la ar-quitectura de Información se establece la jerarquía de la información, para verificar si se cumple este lineamiento o no.

4. Contenidos de ejemplo en la página de inicio (Research, Research)Nivel de Impacto: 2

Diseñe en la página de inicio contenidos que ejemplifiquen con clari-dad el resto del sitio web.

La página de inicio debe servir como la puerta de entrada para el resto de contenidos del sitio web, por supuesto, sin convertirse en una la cartelera de moda donde cada departamento busca “colgar” su infor-mación.

Para ello está la directriz sobre la importancia de priorizar las tareas más importantes. Pero también será muy importante mostrar en la página de inicio algún contenido que ejemplifique el resto de conteni-dos internos del sitio web.

Fotografia tomada de: http://www.youtube.com



68 69

5. Ruta de migasNivel de Impacto: 2Diseñe y proporcione una ruta de migas.

La ruta de migas es una lista de enlaces que se ubica generalmente en la parte superior de la página y que muestra la ruta que ha seguido el usuario hasta el lugar dónde se encuentra.

Aunque es probable que el usuario haya ingresado a una página in-terna a través de un motor de búsqueda, la ruta de migas muestra también la jerarquía de contenidos del sitio y funciona como un meca-nismo de navegación auxiliar.

Incluir de forma adecuada una ruta de migas en un sitio web tiene los siguientes beneficios:

- Permite al usuario saber su ubicación actual en el sitio.- En caso de que el usuario haya seguido una ruta de navega ción, responde a las preguntas ¿dónde estoy? y ¿dónde he estado?- Reduce el riesgo de tener páginas huérfanas y permite al usua rio acceder fácilmente a secciones relacionadas.

Para que la ruta de migas sea coherente se debe garantizar que en to-das las páginas corresponda fielmente a la jerarquía de contenidos del sitio, también es importante diseñarla de modo que sea reconocible, sencilla y fácil de usar.

Fotografia tomada de: http://www.elespectador.com y http://www.eltiempo.com



70 71

6. Información transmitida a través de color (Research)Nivel de Impacto: 2

Asegúrese que toda la información transmitida a través de color, está también disponible a blanco y negro.

Debido a que un porcentaje de la población (8% de hombres y 1% de mujeres) tiene una percepción visual diferente, llamado daltonismo, el diseño de las páginas web debe asegurar que cuando se transmita información a través del color, se provean mecanismos alternativos para que toda la población entienda.

Esta medida beneficiaría no solo a la población con daltonismo, sino también a personas que utilicen pantallas con deficiencia cromática, monocromáticas o en condiciones donde la percepción de luz pueda verse alterada.

El evaluador debe identificar si en el sitio web existe alguna página que transmita información a través del color. En aquellas páginas que lo hagan, se debe observar si existe algún elemento gráfico o informa-tivo que redunde la información transmitida a través del color.

Si se desea realizar unas pruebas más exhaustivas, se puede consultar la página con un lector de pantalla. Generalmente cuando se escucha la versión para lectores, es posible encontrar la mayoría de errores de este tipo.

Fotografia tomada de: http://www.goldnuggetwebs.com



72 73

7. Vínculo a la página de inicioNivel de Impacto: 2

Habilite el acceso a la página de inicio, mediante hipervínculo en el lo-gotipo y con un vínculo de texto rotulado como “Inicio”.

Una gran cantidad de visitantes de los sitios web, ingresan a través de motores de búsquedas, vínculos y marcadores, a páginas internas di-rectamente, evitando pasar por la página de inicio. Dado que muchos usuarios querrán ir a la página de inicio, es conveniente habilitar este hipervínculo en cualquier página interna.

Normalmente, este enlace debe estar asociado al logotipo, por una parte (los usuarios esperan este comportamiento en el logotipo). Sin embargo, es aconsejable habilitar un hipervínculo con el rótulo “ini-cio” de forma totalmente explícita.

No es buena idea usar otros rótulos como “portada”, “principal”, “home”, que pueden ser más creativos, pero que no transmiten con la misma rapidez el mensaje que la palabra que la gente ya asocia a la acción: “Inicio”.

A través de la observación, el evaluador debe recorrer las principales páginas del sitio web y verificar si el logotipo tiene hipervínculo al ini-cio y si existe un claro rótulo con la palabra “Inicio” que de igual forma esté vinculado a la página principal del sitio web.

Fotografia tomada de: http:// www.fcom.us.es y http://puj-portal.javeriana.edu.co/portal/page/portal/PORTAL_VERSION_2009_2010/es_inicio



74 75

8. URL limpios.Nivel de Impacto: 2

Use URL limpios en todo el sitio web.

Comentarios.

El URL es el la abreviatura de Uniform Resource Locator (Localizador Uniforme de Recursos), es el nombre técnico con el que se conoce a la comúnmente llamada “dirección”.

Un esquema de URL limpios tiene las siguientes características:

- Corresponde a la jerarquía del sitio- No incluye caracteres especiales como $, &, ?, =, entre otros.

Presentar los URL de una manera limpia y ordenada puede ayudar al usuario a reconocer su ubicación dentro del sitio, incluso puede con-vertirse en un mecanismo de navegación que permita al usuario visitar la sección anterior en jerarquía.

El posicionamiento en motores de búsqueda también se puede ver be-neficiado por el cumplimiento de esta práctica, algunos como Google, muestran el URL en los resultados de búsqueda y lo toman en cuenta para generar los resultados de búsqueda.

El posicionamiento en motores de búsqueda también se puede ver be-neficiado por el cumplimiento de esta práctica, algunos como Google, muestran el URL en los resultados de búsqueda y lo toman en cuenta para generar los resultados de búsqueda.

Un sitio web con URL limpios en general tiene un mejor aspecto y es un indicador de que el sitio se ha preocupado por seguir una conven-ción de la web. Visite varias páginas de su sitio y verifique que los URL son limpios, es decir que no incluyen caracteres especiales y corres-ponden de manera adecuada con la jerarquía de contenidos del sitio.



76 77

Para verificar varios URL puede ingresar a Google y hacer la búsqueda “site:http://www.sitio-a-evaluar.com”; esta consulta traerá todas las páginas que Google haya indexado del sitio que se ingresó en lugar de “sitio-a-evaluar” y le permitirá hacer una verificación de forma masiva.

Tenga en cuenta que los resultados de búsqueda tardan en actualizar-se, por lo que sí hizo correcciones en los URL deberá esperar a que el motor de búsqueda haga una nueva indexación y los muestre adecua-damente.

9. Optimice el códigoNivel de Impacto: 2

Verifique que el código HTML y CSS de su sitio cumpla estándares.

Codificar de acuerdo con los estándares es en principio una forma de garantizar que el sitio web se verá adecuadamente en la mayoría de navegadores y dispositivos. Escribir código válido no solo es un indi-cador de calidad, sino una clara manifestación de que quien diseña el sitio hace un esfuerzo por generar un sitio interoperable y accesible.

Para verificar que el código se escribe de acuerdo con el estándar emi-tido por la W3C, existen diversas herramientas de validación. La herra-mienta oficial de validación de HTML del W3C que puede ser accedida en línea a través del vínculo validator.w3.org/ detecta los errores en el código, y presenta algunos comentarios para realizar correcciones.Fotografia tomada de: buscador de google. http://google.com



78 79

10. Evite el texto subrayado Nivel de Impacto: 2

Evite usar texto subrayado, a menos que sea un hipervínculo

En sus inicios, los navegadores diferenciaban los textos de enlace, a través del subrayado y el color (azul). De esta manera, los usuarios se acostumbraron a que cuando observaban un texto subrayado y azul, significaba que era un enlace.

Con el invento de las hojas de estilo en cascada CSS, los diseñadores pudieron quitarle a los enlaces el subrayado y, además, ponerle subra-yado a los textos (aunque no fueran enlaces). El resultado: un usuario confundido, que no diferencia un enlace de un texto normal.

Por ello, la directriz busca evitar que los diseñadores usen el subra-yado para destacar algún texto no hipervinculado. Si se trata de des-tacar dicho texto, el diseñador puede recurrir a otro tipo de cambios tipográficos, como el énfasis moderado (etiqueta <em>) o el énfasis fuerte (etiqueta <strong>).

La W3C también ofrece una opción de validación para las hojas de es-tilo en cascada CSS jigsaw.w3.org/css-validator/.

Verifique que el código HTML y CSS de su sitio no contiene errores de validación y se hace conforme los estándares emitidos por la W3C. Para ello ingrese a las herramientas de validación oficiales, ingrese el URL de su sitio, y verifique que el código sea válido.

Fotografia tomada de: http:// www.validator.w3.org



80 81

11. Ejemplos en los campos de formularioNivel de impacto: 2

Proporcione ejemplos en los campos de formulario que sean de difícil comprensión.

Los ejemplos son una forma sencilla y clara de orientar al usuario. El visitante entiende claramente la forma de diligenciar un formulario a través de ejemplos, especialmente en aquellos campos que requieren algún formato especial.

Puede utilizar una corta descripción de ejemplo bajo la etiqueta del campo, para indicar al usuario cómo llenarlo. Asegúrese de aplicar el estilo gráfico adecuado, para que el ejemplo se entienda como una información auxiliar y el usuario pueda omitirla con facilidad si no la necesita.

El evaluador podrá hacerlo de forma manual por cada una de las pá-ginas más importantes, revisando si todos los subrayados correspon-den a hipervínculos o no.

Es posible también, a través del código fuente, realizar una búsqueda de la regla:

- text-decoration: underline;

Si existe, se hará necesario identificar a qué elemento está asignado y establecer de forma consciente si se ha usado correctamente.

Fotografia tomada de: http://www.goldnuggetwebs.com



82 83

12. Ubicación del logotipo (3.1.6))Nivel de Impacto: 2

Ubique el logotipo de la entidad en el mismo lugar en todas las pági-nas y vincúlelo con la página de inicio.

Hay estándares que se imponen por la reiteración en el uso. Se le de-nominan “estándares de facto”. Uno de ellos es la ubicación del lo-gotipo que identifica un sitio web, que en Occidente se impuso en la parte superior izquierda.

Este fenómeno se puede ver en un porcentaje muy alto de sitios. Es-tos son algunos links de páginas universitarias que han aplicado este factor:

- http://www.fecom.us.es- http://www.facartes.unal.edu.co

Cerciórese de que aquellos campos que deben ser diligenciados de forma especial, o que pueden ser confusos cuentan con un ejemplo que clarifique el modo en que un usuario debe llenar dicho campo. Ve-rifique que el estilo gráfico utilizado muestra la información de ejem-plo como algo auxiliar, y que no se confunde fácilmente con la etique-ta del campo.

Fotografia tomada de: http://www.palermo.edu



84 85

13. Tiempo de carga de las páginas ((2010))Nivel de Impacto: 3

Optimice su sitio para asegurar que el tiempo de carga de sus páginas sea mínimo.

Un sitio web que tarda demasiado tiempo en cargar eventualmente puede ser abandonado por el usuario. La respuesta rápida de un sitio está relacionada con la necesidad que tiene el visitante de recibir una respuesta a sus acciones en un tiempo prudente.

Las páginas que tardan demasiado en cargar pueden dar la impresión de que se encuentran fuera del aire, y los usuarios que tengan conexio-nes a internet demasiado lentas podrían decidir buscar en algún otro sitio que les proporcione lo que buscan sin esperas.

El rendimiento es también un factor que aporta a la experiencia de usuario. Un portal rápido es percibido en algunas ocasiones como un portal más fácil de utilizar. Google decidió incluir en su algoritmo de ordenamiento para el motor búsqueda, el tiempo que tardan los sitios web en cargar. La razón la resumieron en las siguientes palabras:

“Los sitios rápidos producen usuarios felices, y hemos visto en nues-tros estudios que cuando un sitio responde lentamente, los visitantes gastan menos tiempo en él.”

Además de la ubicación, el usuario entiende de manera predetermina-da que al hacer clic en el logotipo, regresará a la página de inicio.

Fotografia tomada de: http:// www.fcom.us.es, http://puj-portal.javeriana.edu.co/, http://www.palermo.edu, http://www.unal.edu.co/



86 87

14. Campos de formularioNivel de Impacto: 3

Distinga claramente los campos obligatorios de los opcionales.

Uno de los elementos que puede afectar la experiencia de usuario es una mala señalización de los campos de formulario. El usuario se ha habituado a encontrar una convención para aquellos campos que son requeridos, por eso en ocasiones los campos sin señalización pueden ser interpretados como opcionales.

No llenar un campo obligatorio desencadena en una página de error por ausencia de datos, un formulario con demasiados campos podría llegar a generar tantas páginas de error como para causar el abando-no.

Asegúrese de que todos los campos obligatorios en sus formularios están etiquetados y son distinguibles de los opcionales. Incluso de ser posible, provea mecanismos de validación dinámicos que eviten que el usuario deje vacío un campo requerido antes de enviar el formulario.

Google y Yahoo, ofrecen herramientas para evaluar el rendimiento de una página, y obtener recomendaciones. Estas herramientas son gra-tuitas y están disponibles en línea.

Verifique que el desarrollo de su sitio ha contemplado la optimización para reducir los tiempos de carga. Para esto, genere un reporte de los análisis de rendimiento realizados, y los cambios efectuados con base en los resultados.

Un recurso para realizar esta evaluación de velocidad de carga es:

- Page Speed: herramienta de Google para analizar y mejorar el rendimiento de páginas web.

o code.google.com/intl/es-ES/speed/page-speed/

Fotografia tomada de: http:// www.render.com.co



88 89

15. Asociación de etiquetas y campos (Matters)Nivel de Impacto: 3

Asocie claramente las etiquetas con los campos de formulario.

Para que el usuario tenga una interacción fluida con los formularios se hace necesario que conozca los datos que el sistema espera que ingre-se en cada campo. Un adecuado rotulado de los campos de formula-rio, permite una lectura rápida y un ingreso ágil de la información.

Cuando no es clara a primera vista la asociación entre el campo y su etiqueta, se pueden desencadenar errores por datos ingresados en los lugares incorrectos; errores que pueden afectar en alguna medida la experiencia del usuario y su percepción general del portal.

Para diseñar etiquetas asociadas claramente con los campos pueden ser útiles los siguientes criterios:

- Ubique las etiquetas de los campos en la parte superior: Los usuarios realizan generalmente una lectura vertical del for mulario.- Reserve un espacio en blanco: Considerable para separar unos campos de otros.- Cuando emplee listas de selección no provea etiquetas: Haga que el valor predeterminado del campo sea la etiqueta.

La convención generalmente utilizada para señalar estos campos con-siste en un asterisco de color en la parte superior derecha de la etique-ta del campo. Sin embargo, proveer mecanismos mucho más visibles nunca está demás, podría reducir el tiempo de interpretación y mejo-rar la experiencia del usuario.

Visite todas las páginas de su sitio que contengan formularios y verifi-que que todos los campos obligatorios se señalan con claridad. Inclu-so, realice pruebas sencillas con un par de usuarios en los que observe la facilidad que tienen estos para interpretar los formularios y su reac-ción frente a las acciones que deben realizar.




90 91

16. Tagline (NIELSEN, 2001)Nivel de Impacto: 3

La palabra Tagline es un anglicismo de difícil traducción, pero general-mente aceptado en el medio de la Web. Una traducción cercana pero no aceptable sería la palabra Eslogan.

La tagline es la frase que normalmente subtitula a un sitio web. Gene-ralmente se ubica debajo del identificador del sitio, y su función princi-pal es responder en una sola frase alas preguntas del usuario ¿dónde estoy? y ¿para qué me sirve este sitio?

Una tagline bien escogida puede ayudar a los usuarios a decidir rápida-mente si permanecer en el sitio o abandonar. Adicionalmente, hacer que la tagline aparezca también en el título de la página puede mejo-rar la primera impresión de su sitio, en las páginas de resultados de un motor de búsqueda.

Para elegir una buena Tagline se debe tener en cuenta el propósito del sitio y lo que esperan los usuarios de él. Reunir una adecuada lista de características del sitio, formular algunas tagline provisionales y pro-barlas luego con los usuarios, podría ser una buena forma de comen-zar.

Visite las páginas de su sitio que contengan formularios y verifique que la asociación entre los campos y sus etiquetas es clara y reconoci-ble a primera vista. Puede también realizar test sencillos con un par de usuarios en los que se les solicite llenar el formulario. Observar juicio-samente el proceso puede ayudar a identificar errores de interpreta-ción de las etiquetas o incluso del flujo de trabajo del formulario.




92 93

17. Ancho del cuerpo de texto (SHAIKH, DAWN SHAIKH)Nivel de Impacto: 3

Utilice un ancho promedio entre 60 y 80 cpl (caracteres por línea) para el cuerpo de texto.

El cpl es una medida de cuántos caracteres por línea tiene una caja ti-pográfica. ¿Cuál es el cpl ideal para la lectura del cuerpo de texto en la web? Diversos autores han realizado investigaciones en este sentido, con conclusiones variadas:

- Dyson y Kipping (1998) 80-100 cpl- Dawn Shaikh (2004) 95 cpl- García y Short (2002) 60-80 cpl

Un renglón corto en cpl implica que el ojo tiene que realizar constan-temente saltos de línea, que lo lleva rápidamente a cansarse. De otra parte, para un renglón demasiado largo la vista deba realizar un reco-rrido muy largo, produciendo de igual forma fatiga visual.

Verifique que la tagline se ubique cerca al identificador del sitio, dónde esperan encontrarla la mayoría de usuarios, y verifique que aparece también junto al título de la página principal.

Cerciórese de que su sitio web cuenta con una tagline clara y útil para los usuarios. Para ello verifique que existe un estudio de tagline en el cual justifique la frase escogida, tomando como base los objetivos del sitio y las necesidades de los usuarios.

Fotografia tomada de: http://www.trinis.es



94 95

18. Vínculos visitados (Research, Research), (NIELSEN J. , Top Ten Web Design Mistakes of 2005 en Alertbox, 2005)Nivel de Impacto: 3

Diferencie claramente los vínculos visitados de los vínculos sin visitar.

Mostrar al usuario el camino que ha recorrido es un elemento que dis-minuye la posibilidad de error y mejora la navegación. Para el visitante la pregunta ¿donde he estado? es clave, no solo para encontrar rápi-damente el contenido que fue útil la primera vez, sino para evitar las páginas que no correspondieron con lo que éste esperaba.

No diferenciar los vínculos visitados de los vínculos por visitar es uno de los errores de usabilidad identificados por varios autores como muy frecuentes, pero fácil de corregir.

El color estándar empleado para estos vínculos es el púrpura. Aunque otros colores podrían funcionar, siempre y cuando sean diferentes al color del vínculo estándar, usar el color púrpura garantiza mayor com-prensión por parte del usuario.

Para los sitios web universitarios, se propone seleccionar un tamaño medio, apartir de la investigación de García y Short (2002) que sugiere el renglón ideal entre 60-80 cpl.

Fotografia tomada de: http://www.admisiones.lasalle.edu.co/



96 97

Asegúrese de que en su sitio web se diferencian claramente los vín-culos visitados de los vínculos aún sin visitar. Para ello siga al menos 10 de los enlaces de su portal y verifique que al volver atrás han que-dado señalados como vínculos visitados. La diferencia con el resto de enlaces debería señalarse a través de un color diferente al del vínculo estándar y ser lo suficientemente clara.

Si el sitio está utilizando hojas de estilo CSS para separar el contenido de la capa de presentación, bastará con corroborar que existe una re-gla de estilo apropiada para los vínculos visitados.

Esta directriz presenta una excepción planteada por NIELSEN J; lla-mó “funcionalidad orientada a los comandos”, se refiere a aquellos vínculos o secciones que deben ser visitados una y otra vez —en el caso de una intranet por ejemplo— y en las que de cierto modo pierde relevancia señalarlos como visitados.

Ejemplo: Google emplea el color púrpura para diferenciar los vínculos visitados de los vínculos aún sin visitar.

Fotografia tomada de: http://www.google.com



98 99

19. Memoria a corto plazo (LARSON, 1998)Nivel de Impacto: 3

Diseñe teniendo en cuenta las limitaciones de memoria de los usuarios

La memoria a corto plazo de los seres humanos, llamada también me-moria operativa, es definitivamente limitada. Algunos estudios con-cuerdan en que su capacidad de almacenar elementos oscila entre 7 (±2) elementos durante 10 segundos si no se repasa.

La memoria a corto plazo es la memoria operativa del usuario, en ella por ejemplo, almacena temporalmente los elementos de un diseño, los pone en consideración y toma decisiones. Todo este proceso se lleva a cabo en pocos segundos —o al menos ese es el ideal–.

Cuando un sitio presenta demasiada información o la presenta con poca consistencia, puede causar problemas en la memoria del usua-rio. Idealmente el navegante prefiere que haya una gran cantidad de información que pueda estar en el sitio web y de ese modo evitar me-morizar y simplemente dedicarse a navegar y encontrar lo que está buscando.

Algunas recomendaciones en este sentido son:

- Presentar los elementos de navegación de forma consistente, evitando que el usuario tenga que recordarlos y permitiéndole consultarlos siempre que sea necesario.- Hacer que los enlaces cambien de color cuando se visitan, de ese modo el usuario podrá saber en qué páginas ha estado sin recurrir a su memoria.- Diseñar interfaces sencillas, que faciliten la recordación y no so brecarguen la memoria del usuario.- Suministrar recordatorios visibles, de aquella información que el usuario siempre debe tener presente. Un ejemplo es la infor mación de si el usuario se encuentra o no logueado en el sitio.- Diseñar interfaces sencillas, que faciliten la recordación y no so brecarguen la memoria del usuario.



100 101

20. Validación dinámica de datosNivel de Impacto: 3

Proporcione una validación dinámica de datos, antes de que el usua-rio envíe un formulario.

Los lenguajes de programación ejecutados del lado del cliente pueden beneficiar mucho la experiencia de los usuarios al diligenciar formu-larios. Proporcionar una validación dinámica en línea antes de enviar el formulario completo hace más sencillo el flujo de trabajo y evita al usuario errores innecesarios.

Proporcione a sus campos obligatorios una validación en línea, que despliegue inmediatamente un mensaje en caso que el usuario no in-grese datos, o los ingrese de manera incorrecta. Este principio de re-troalimentación permite al usuario conocer el efecto de sus acciones de manera inmediata, y puede mejorar la percepción general del sitio.

Asegúrese de que su sitio tiene en cuenta las limitaciones de memoria de los usuarios. Evalúe si existen elementos de navegación consisten-tes, y si existe alguna zona del diseño del sitio que permita el acceso a los elementos que el usuario más utiliza. Verifique que no existan situaciones en las que el usuario requiera de un manejo exhaustivo de la memoria.




102 103

21. Motor de búsqueda y ubicaciónNivel de Impacto: 4

Provea un motor de búsqueda interno en todas las páginas y ubíquelo preferiblemente en la parte superior derecha.

Aquellos usuarios que no usan las estructuras de navegación del por-tal o prefieren encontrar directamente lo que buscan, se ven bene-ficiados de la presencia de un buscador interno. Proveer este meca-nismo alternativo de navegación es vital para muchos usuarios, y su presencia puede contribuir mucho para que el usuario encuentre lo que busca. Un estándar de facto para la ubicación del cajón de bús-queda es en la parte superior derecha.

Para que el cajón de búsqueda sea útil, también es importante garan-tizar que el tamaño sea suficiente para que el usuario introduzca fra-ses completas. Algunos estudios están de acuerdo en que un tamaño adecuado es 27 caracteres, sin embargo este tamaño puede crecer en función de los usuarios y el propósito del sitio.

Visite las páginas de su sitio que contengan formularios e intente aban-donar los campos obligatorios sin llenarlos. El sistema debería ser ca-paz de reproducir una alerta sutil que recuerde la ausencia de datos.

Verifique que el sistema funciona de manera similar al ingresar datos incorrectos, en el caso de direcciones de correo y números, provea mensajes que indiquen inmediatamente si los datos no fueron ingre-sados del modo correcto.

Fotografia tomada de: http://www.hotmail.com



104 105

22. Sugerencias de búsquedaNivel de Impacto: 4

Incluya en las páginas de resultados sugerencias para ayudar al usua-rio a encontrar lo que busca.

Es probable que para un usuario resulte difícil traducir su necesidad en una consulta. También es frecuente que en las búsquedas el usua-rio cometa errores de digitación, ortografía, sintaxis entre otros. Las sugerencias de búsqueda son una ayuda efectiva para los usuarios. Aparecen para corregir las consultas que el usuario escribe mal, pero también para orientar al usuario con resultados similares a lo que con-sultó.

Las búsquedas en un motor como Google serían un poco más difíciles si no existiera un mecanismo de sugerencias. Es más, muchos usuarios realizan consultas poco definidas con la esperanza de que el motor de búsqueda sugiera algo mucho más próximo a lo que esperan.

Asegúrese de que en todas las páginas de su sitio se ofrece un motor de búsqueda interno, verifique que esté ubicado en la parte superior derecha y que tenga un ancho mínimo de 27 caracteres.

Fotografia tomada de: http://www.ucaldas.edu.co/



106 107

23. Ubicación en los 10 primeros puestos (Nielsen, Usabili-dad prioridad en el diseño web, 2006)Nivel de Impacto: 4

Sea fácil de encontrar en los 10 primeros resultados de los motores de búsqueda para frases y palabras clave relacionadas con su entidad.

Los contenidos y recursos de un sitio web solo serán útiles si los usua-rios a los que se dirigen son capaces de encontrarlos. Cada vez es más común que los usuarios prefieran acudir a un motor de búsqueda que a una página directamente; por esta razón, los sitios deben asegurar su presencia en los diez primeros resultados de búsqueda, para todas las consultas relacionadas.

Una estadística en el 2006 demostró que tan solo el 7% de los usuarios ojean los enlaces de la segunda página de resultados de un motor de búsqueda20. Si un sitio web no aparece en la primera página de resul-tados, está perdiendo visitas y sobre todo la oportunidad de ayudar al usuario.

La práctica más básica para garantizar que un sitio web aparezca como resultado de una búsqueda, es el seo, posicionamiento en motores de búsqueda.

Realice consultas en su motor de búsqueda interno y asegúrese de que este es capaz de hacer sugerencias tanto de contenidos relacionados, como de correcciones en la forma de escribir la consulta. Puede ser útil para verificarlo hacer consultas cometiendo errores de escritura, o buscando frases relacionadas con alguno de los artículos del sitio.




108 109

SEO, Posicionamiento en motores de búsqueda.

La sigla SEO (Search Engine Optimization) se refiere a la optimización que debe aplicarse a un sitio web, para garantizar su aparición en los primeros lugares de las páginas de resultados, en los motores de bús-queda.

La profesión del SEO se basa en conocer la forma como el motor de búsqueda clasifica y da prioridad a las páginas web, con el fin de for-mular una estrategia de optimización y posicionamiento.

La estrategia de posicionamiento depende directamente del propósi-to y objetivo del sitio web. El experto en posicionamiento evalúa una serie de características, analiza el contexto (competencia), y define una serie de acciones a realizar para mejorar el posicionamiento en búsquedas y palabras clave específicas. Entre las directrices que pue-den llegar a aplicar el profesional en SEO se encuentran:

- Definir una estructura jerárquica de enlaces clara y coherente. - Realizar un listado de palabras clave que utilicen los usuarios para buscar lo que se ofrece, llévela al código fuente de cada una de las paginas e insértelas en una etiqueta <meta name=”keywords” content= “diseño grafico, periodismo, mer cadeo, publicidad>- Optimizar el contenido para asegurar la aparición de las frases clave.- Mejorar los títulos individuales de cada página para asegurar que correspondan con lo que buscan los usuarios.- Buscar enlaces rotos y corregirlos.- Sugerir la utilización de esquemas de url amigables, que corres pondan adecuadamente con la estructura del sitio.- Sugerir el uso de dominios que puedan ser potencialmente fáci les de posicionar.- Establecer una estrategia para generar vínculos externos hacia el sitio.- Articular la estrategia de SEO con alguna campaña de pauta en motores de búsqueda. SEM (Search Engine Marketing)- Sugerir modificaciones en la estructura del sitio para disminuir el porcentaje de rebote y ofrecer un mejor servicio a los usua rios.



110 111

24. Error de página no encontradaNivel de impacto: 4

Diseñe e implemente una página específica para el error de página no encontrada.

Que no exista ningún tipo de error cuándo los usuarios interactúan con un sitio web es algo difícil de garantizar. Un simple enlace mal for-mulado, una URL que cambia, un dato ingresado de manera incorrec-ta e incluso una acción equivocada del usuario pueden desencadenar en un error.Un error común es el de página no encontrada, conocido a veces por su código.

Es un error que aparece cuándo el usuario intenta ingresar a una pá-gina del sitio que no existe o ha sido eliminada. Teniendo en cuenta que este tipo de error aparece cuándo el usuario está buscando algo, es de vital importancia generar una página que gestione este error de manera personalizada e inteligente. El propósito debe ser el de orien-tar de nuevo al usuario, proveerle opciones de contenido similares, e incluso generar un mensaje que minimice el impacto en el usuario.

Las páginas de error pueden ser aprovechadas para llevar al usuario a contenidos que lo orienten, como el mapa del sitio o los artículos de ayuda, siempre teniendo en cuenta no realizar una redirección auto-mática sino dejando en claro que la página solicitada no existe. Una página de error personalizada puede indicar al usuario la preocupa-ción de sus propietarios por proveer un sitio web de calidad, y una experiencia satisfactoria.

Realice búsquedas en los motores de búsqueda más conocidos, en es-pecial en Google, y asegúrese de que su sitio aparece en los primeros 10 resultados. Consulte no solo el nombre de su organización, tam-bién los servicios e información más relevante y todo aquello que sea de valor agregado para sus usuarios. Cuando busque utilice términos cercanos al usuario, formule la búsqueda de la manera que lo haría un usuario convencional.




112 113

25. Navegación global Nivel de Impacto: 4

Proporcione una navegación global visible y consistente a lo largo del sitio web.

La navegación global está compuesta generalmente por las catego-rías principales o por el denominado “menú principal” del sitio web. Esta navegación responde a la necesidad concreta del usuario de sa-ber a dónde dirigirse y lo que puede hacer dentro del sitio.

Al presentar la estructura de navegación global se debe garantizar su consistencia, que aparezca de la misma forma y en la misma ubicación a lo largo de todo el sitio web.

El ofrecer una navegación global consistente le permite al usuario con-tar con un mecanismo de navegación siempre presente, fácil de recor-dar y a la mano. Seguir esta práctica también reduce el fenómeno de las páginas huérfanas, páginas individuales en las cuales el usuario no puede establecer claramente a qué sitio pertenecen, y las opciones de navegación disponibles.Si no existe una navegación global consistente a lo largo de todo el sitio, se estará aumentando el riesgo de que el usuario se desoriente dentro del portal.

Diríjase a una URL errónea en su sitio y verifique que la página de error ha sido personalizada. Asegúrese de que esta página indica que el con-tenido que busca no se encuentra en el sitio, y que proporciona opcio-nes para que el usuario retome la navegación o encuentre contenidos relacionados.

Fotografia tomada de: http://www.google.com/imagenes



114 115

26. Navegación de contextoNivel de Impacto: 4

Proporcione una navegación de contexto siempre que sea necesario.La navegación de contexto indica al usuario los lugares del sitio a los que se puede dirigir dentro de su nivel de navegación actual o local. Este menú se presenta cuando el usuario visita las secciones principa-les del sitio y muestra las subsecciones o páginas que pertenecen a la sección principal actual.

Un menú de opciones contextuales puede mejorar considerablemen-te la experiencia de usuario y hacer mucho más sencilla la exploración del sitio por parte del usuario. Como un estándar de facto el usuario espera encontrar el menú secundario o de contexto a un costado de la interfaz, sin embargo esquemas diferentes pueden funcionar siempre que sean claros y consistentes.

Las secciones con grandes cantidades de información así como las estructuras de sitio profundas se pueden ver muy beneficiadas de la presencia de una navegación contextual. Verifique que existe una na-vegación contextual en todas las páginas que lo requieren. Para ello, visite aquellas secciones principales y verifique que el menú contex-tual muestra las páginas y subsecciones que pertenecen a la sección principal actual.

Verifique que el sistema de navegación global es consistente a lo largo del sitio. Para ello, asegúrese de que existe un menú principal (o glo-bal) que aparece en la mayoría de las páginas del sitio y que además preserva su estructura, los nombres de sus enlaces, y el orden de los mismos.




116 117

27. Enlaces bien formulados.Nivel de Impacto: 4

Formule enlaces claros, sencillos y sin ambigüedades

Los enlaces son parte esencial de internet. Representan la conexión entre dos páginas o contenidos y son el principio básico de la nave-gación. Por su importancia en la experiencia de usuario, los enlaces deben ser claros, reconocibles y sin lugar a ambigüedades.

Algunas sugerencias a tener en cuenta para garantizar buenos enlaces son:

- Usar títulos de enlaces significativos, que indiquen claramente el contenido al cual conducen.- Emplear un lenguaje sencillo y cercano al usuario en la formula ción de enlaces.- No usar terminología técnica ni lenguaje especializado.- No usar palabras como “haga clic”, el usuario ya sabe que los enlaces son para hacer clic en ellos.- Utilizar en el enlace las palabras mínima necesaria para que el usuario comprenda su propósito. Los enlaces cortos son más fáciles de escanear y leer.

El menú de navegación contextual también debería aparecer en las páginas internas o de mayor profundidad del sitio. En este caso, debe ser lo suficientemente claro para indicar, al usuario, exactamente en qué sección y subsección se encuentra.

Fotografia tomada de: http://puj-portal.javeriana.edu.co/portal/page/portal/PORTAL_VERSION_2009_2010/es_inicio



118 119

Ejemplos de enlaces mal formulados:

Ir a la sección de noticias Haga click aquí para descargar el instructivo de impuesto pre dial Para ingresar al sistema de trámites en lineas haga click aquí

Los mismos ejemplos con correcciones:

Visite nuestra sección de Noticias Descargar el instructivo de impuesto predial Ingresar al sistema de trámites en línea

Verificación

Visite varias páginas de su sitio y compruebe que los enlaces estén bien formulados.

Cerciórese de que sean claros, cortos y descriptivos.

Fotografia tomada de: http://mipana.unipanamericana.edu.co/



120 121

28. Tareas clave en la página de inicioNivel de Impacto: 4

Enfoque claramente todos los elementos de la página de inicio en las tareas clave de los usuarios.

Un usuario ingresa a un sitio web universitario porque claramente ne-cesita consultar una información o realizar un trámite o servicio en línea. Todo lo demás, estorba.

Para sustentar esta posición, se sugiere realizar un ejercicio mental, muy simple. Piense en el sitio web que usted utiliza cada vez que deci-de buscar información. ¿Google?

Seguramente, la interfaz de Google está enfocada en esa labor con-creta que usted realizará:

Sitio web inicial de Google: la limpieza llevada al extremo. No existen más elementos, que un logotipo, un cajón de búsqueda y dos botones.




122 123

Nada más, es el extremo de la limpieza. Y aunque un sitio web univer-sitario no es un motor de búsqueda, este principio debe mantenerse, priorizando las actividades más críticas que los usuarios realizarán, cuando ingresen

Para evaluar si esta directriz se cumple en el sitio, solicite la documen-tación que exista sobre la planeación del sitio web (Guía web o estudio de personajes y escenarios de uso), donde hayan quedado claramente cuáles son las tareas clave más prioritarias que debe satisfacer el sitio web.

Luego, observe la página de inicio y evalúe si en el diseño se han te-nido en cuenta o no estas tareas. Ponga a prueba este aspecto con usuarios, de manera directa.

29. Contraste en brillo y colorNivel de Impacto: 4

Verifique que el texto y las imágenes de texto tengan suficiente con-traste de brillo y color con el fondo.

Un deficiente contraste afectará la legibilidad de los textos y, por lo tanto, significará una barrera de acceso a la información por parte de algunas personas con dificultades visuales.

Sin embargo, es necesario aclarar que cualquier persona, indepen-dientemente de sus capacidades visuales, tendrá problemas al usar textos poco contrastados en situaciones como mala calibración del monitor, incidencia directa de la luz solar o, simplemente, un desgaste en las lámparas de un proyector (video beam).



124 125

Tenga en cuenta que existen múltiples herramientas para verificar el contraste exigido:

- Herramienta cuenta gotas en programas de edición de imagen- Colorkit

30. Independencia de navegador (Websites)Nivel de Impacto: 5

Diseñe el sitio web independientemente del navegador.

Gracias a la variedad de navegadores que hoy en día podemos utilizar no es conveniente diseñar pensando solo en un navegador. Esto ocu-rre con mucha frecuencia en sitios web que, inclusive, avisan de mane-ra abierta que el sitio está optimizado para Internet Explorer.

El problema aparece cuando un usuario no utiliza dicho navegador, bien porque no le interesa, o bien porque tiene una plataforma dife-rente (Linux o Macintosh), donde dicho navegador no funciona.

Anunciar que el sitio ha sido realizado para un navegador y para una resolución en particular, evidencia que no se diseñó para múltiples na-vegadores

Fotografia tomada de: http://www.col-leoburnett.com



126 127

31. Búsquedas con términos familiares y errores de digita-ción (Jakob, NIELSEN Jakob)Nivel de Impacto: 5

Permita las búsquedas con términos familiares para los usuarios y con-temple los errores de digitación.

En un sistema es inevitable que se produzcan errores, y en las con-sultas a motores de búsqueda los errores de digitación son quizás los más frecuentes. Aparte de los errores que se pueden producir cuan-do el usuario introduce su consulta, también es posible que el usuario cometa errores ortográficos, escriba mal una palabra, o se refiera en términos diferentes a un mismo contenido.

Los motores de búsqueda internos deben tener la capacidad de adap-tarse a la forma como consultan los usuarios, deben permitir el uso de términos familiares, e incluso contemplar los errores de ortografía y digitación más frecuentes.

Asegúrese de que el sitio funciona, en cualquier navegador de acuer-do a como fue concebido originalmente por el equipo de desarrollo. Para ello, realice una visita al sitio con el navegador recomendado por el desarrollador y observe el correcto funcionamiento. Posteriormen-te, visítelo desde otros navegadores, preferiblemente los más popu-lares y corrobore que funcione tal y como lo hace en el navegador recomendado, es decir, que sin importar el navegador utilizado el sitio funcione de la misma forma.

Fotografia tomada de:http://www.uba.ar/homepage.php



128 129

32. Ubicación del usuario.Nivel de Impacto: 5

Una pregunta que normalmente se hace un usuario al visitar un sitio web es “¿en dónde estoy?” El portal debe estar en la capacidad de mostrar en todo momento a los usuarios su ubicación dentro del si-tio, no solo para responder esta pregunta, también debido a que los usuarios que acceden a una página interna a través de un motor de búsqueda querrán saber exactamente dónde están.

Mostrar de forma clara al usuario el lugar donde se encuentra depen-de de varios sistemas de navegación. En ellos se debe indicar el lugar que ocupa la página actual dentro de toda la jerarquía de contenidos del portal.

Asegúrese de que las búsquedas realizadas con términos familiares para los usuarios producen resultados válidos. Provea también un mecanismo que retorne resultados útiles aun cuando se comentan errores de digitación u ortografía. Puede aprovechar el historial de búsquedas para identificar los errores que cometen los usuarios con frecuencia y proporcionar alternativas.




130 131

Algunos de los mecanismos de navegación que pueden indicar al usua-rio en dónde se encuentra son:

- Navegación globalEn esta se debe mostrar la sección principal a la cual pertenece la pá-gina actual.

- Navegación de contextoEn esta se debe mostrar la sub sección o sub secciones a la cuales per-tenece la página actual.

- Ruta de migasMuestra al usuario el camino que debería recorrer para llegar desde la página de inicio hasta su ubicación actual.

- URL limpiaUna dirección clara también da una idea al usuario de las secciones a las cuales pertenece la página donde se encuentra.

33. Uso adecuado del espacio en blancoNivel de Impacto: 5

Utilice el espacio en blanco para generar relaciones entre los elemen-tos y contenidos de la página.

El espacio en blanco es tan importante como el contenido. No se trata de espacio desaprovechado, por el contrario, un buen diseño contie-ne el espacio en blanco suficiente para garantizar la comprensión y legibilidad.

El espacio en blanco no se refiere exclusivamente a los espacios que no tienen color, sino a aquellos que no presentan ningún tipo de con-tenido. Su uso efectivo se refiere a respetar el espaciado entre los grupos de información, y con esto, ayudar al usuario a entender las relaciones que existen entre los elementos que componen la interfaz.

Los sitios que no proveen espacio entre sus elementos, generalmente lucen congestionados e impiden al usuario decidir fácilmente a dónde ir.



132 133

34. Páginas de confirmaciónNivel de Impacto: 5

Redacte páginas de confirmaciones claras e informativas.

Uno de los principios claves para garantizar una buena experiencia de usuario es la retroalimentación. La interacción entre una persona y el ordenador se constituye en un diálogo, por tanto el usuario espera del computador una respuesta a cada acción realizada. Una buena re-troalimentación es fundamental para que el usuario conozca en todo momento el estado del sistema, y además obtenga la seguridad de que éste se encuentra en funcionamiento.

En las aplicaciones interactivas es especialmente importante que exis-ta la retroalimentación. En general cada acción que realice el usuario debe mostrar un resultado claro y visible. Las páginas de confirmación son un caso particular de una acción que realiza el aplicativo para re-troalimentar al usuario. Un portal web que proporcione mecanismos de interacción debería proporcionar mensajes de confirmación a to-das aquellas acciones en las que el usuario espera una respuesta.

Visite las páginas de su sitio web y asegúrese de que el espacio en blanco es usado de manera eficiente. Un usuario debería poder iden-tificar rápidamente y sin dificultad, los diferentes bloques o grupos de contenido que componen la interfaz. El espacio en blanco también debería ser utilizado para alivianar los bloques que contienen texto de prosa, y hacer evidente la diferencia entre títulos, párrafos, listas, etc.

Fotografia tomada de: http:// www.fcom.us.es



134 135

Mensaje de respuesta de Flickr, cuando un usuario ha subido correcta-mente una imagen. Es importante resaltar el uso del icono verde y el mensaje agradable, con un excelente copy que Flickr les ofrece a los usuarios.

Asegúrese de que el sitio web provee páginas de confirmación para las acciones más frecuentes de los usuarios. Para ello, llene los formu-larios que ofrece el sitio y verifique que existe una página de confirma-ción con un mensaje claro.

35. Ventanas emergentesNivel de impacto: 5

No despliegue ventanas no solicitadas por el usuario.

En la Web, es necesario garantizar al usuario el control de la interac-ción. A diferencia de las aplicaciones de escritorio, en Internet el usua-rio se mueve por voluntad propia, explora los sitios que desea, aban-dona los sitios que no le satisfacen, y activa los eventos que necesita.

Las ventanas emergentes son uno de los errores que intervienen di-rectamente con la voluntad del usuario y que causan mayor molestia. De hecho, los fabricantes de navegadores se han preocupado por in-cluir bloqueadores de ventanas emergentes por razones de seguridad y de comodidad con el usuario.

Las ventanas no solicitadas se interpretan muchas veces como publi-cidad fraudulenta, y en la mayoría de las ocasiones los usuarios las cierran a la primera oportunidad. Muchos usuarios las califican de mo-lestas.Incluir elementos de contenido o aplicaciones en ventanas emergen-tes siempre constituye un riesgo, ya sea porque el navegador puede bloquearlo por interpretarlo como publicidad o incluso, puede que el usuario cierre la ventana sin siquiera ver su contenido.

Fotografia tomada de: http://www.flickr.com/



136 137

36. Botón atrásNivel de Impacto: 5

Verifique que el botón atrás nunca deje de funcionar dentro del sitio.

El botón más utilizado en el navegador web es el botón atrás. Es ape-nas natural pensarlo ya que en la interacción con la web el usuario constantemente está explorando y volviendo en sus pasos.Este importante botón se encuentra en el navegador por una razón simple: constituye la funcionalidad que permite al usuario deshacer sus acciones. También genera confianza en el usuario, sin importar el sitio web al que ingrese el usuario o lo perdido que pueda llegar a ver-se, siempre podrá volver en sus pasos hasta el inicio.

Pese a la relevancia de este botón en el día a día del usuario de Inter-net, algunos sitios inhabilitan esta funcionalidad. Algunos eventos en los que frecuentemente se evidencia este error son:

- Generación de ventanas emergentes: En los que se eliminan los controles del navegador por comple to.- Enlaces internos que se abren en nuevas pestañas: Para algunos usuarios el concepto de pestaña no está claro, al abrirse una nueva intentan ir atrás pero no lo consiguen.- Errores de programación: Que causan que al usar el botón atrás, el usuario sea redirigido al mismo lugar donde ya se encuentra entrando en un “ciclo in finito”.

Los usuarios que no cuentan con amplia experiencia en Internet no tienen la facilidad para trabajar con múltiples ventanas o pestañas, esto les impone una barrera para volver en sus pasos y entender en qué momento se ha abierto una nueva ventana de navegación.

Fotografia tomada de: http://www.mercadolibre.com.co/ y http://msn.com



138 139

37. Diseño ordenado y limpioNivel de Impacto: 5

Diseñe páginas web que sean consideradas ordenadas y limpias por los usuarios.

Los usuarios asocian el orden y la limpieza del diseño de interfaz con la credibilidad que le otorgan a un sitio web. Pero no solo esta directriz está sustentada en un atributo de “credibilidad”, sino también en la eficiencia de uso.

Efectivamente, diseños desordenados y confusos producen frustra-ción en el usuario al impedirle encontrar información fácilmente. Es claro que cuando los ciudadanos visitan un sitio web del Estado, ne-cesitan encontrar una información concreta o realizar un trámite (o servicio). Toda la información que se interponga, puede considerarse ruido, incluso estorbo. Por ello, la importancia de establecer con total claridad, en el proceso de planeación del sitio, aquellas tareas más co-munes que un usuario realizará cuando lo visite.

En una evaluación heurística, será criterio del observador decidir so-bre el cumplimiento de esta directriz, a través de la observación de las páginas más importantes del sitio, entre ellas: página de inicio, porta-dillas, página de contacto, mapa del sitio, páginas transaccionales más utilizadas y, en general, aquellas páginas web que según las estadísti-cas tengan mayor número de visitas.

Un error crítico, aunque menos frecuente, es la sustitución de este elemento por botones de diseño personalizado. El usuario reconoce perfectamente el botón atrás en su navegador, forzarlo a aprender a identificar y usar uno nuevo no solo es ir en contra de su voluntad sino en contra de los estándares de facto.

Explore las páginas y secciones más relevantes de su sitio web y aque-llas que reciben más visitas. Asegúrese de que el botón atrás siempre funciona y que cumple su cometido, es decir que conduce a la página inmediatamente anterior.

Fotografia tomada de: http://www.localhost/poll/answers



140 141

38. Interfaces en movimiento Nivel de Impacto: 5

Evite diseñar interfaces en movimiento.

Las posibilidades de movimiento de elementos de las interfaces, a partir de tecnologías como Flash, animaron a algunos diseñadores a proponer páginas web más llamativas visualmente, por la misma no-vedad que supone la diferencia. Sin embargo, este recurso conlleva di-ficultades, particularmente en la facilidad de uso y en la accesibilidad.

Asegúrese de que en el sitio no existen interfaces en movimiento. Ten-ga en cuenta que las interfaces se refieren en especial, a aquellos me-canismos que permiten al usuario interactuar con el sitio web. Entre las interfaces en movimiento más comunes se encuentran los menús animados.

Tenga en cuenta que el orden del diseño está determinado por facto-res como el uso adecuado del espacio en blanco, el manejo acertado de la tipografía, el uso de colores cromáticamente armónicos y una composición clara permita al usuario establecer relaciones entre los elementos de contenido.

Para el caso de una evaluación con usuarios, el cumplimiento del cri-terio se puede evaluar a partir de la deducción de los investigadores sobre el comportamiento del usuario, a partir de la asignación de una tarea concreta sobre el sitio, y nunca sobre la pregunta directa al usua-rio: “¿Considera ordenado y limpio el diseño de esta página?”.

Fotografia tomada de: http://www.col-leoburnett.com



142 143

39. Contenido que parece publicidad (useit), (Blindness) (Jakob, 2007)Nivel de Impacto 5

Evite que los contenidos y elementos importantes de su sitio sean confundidos con publicidad.

El usuario desarrolla con la navegación patrones y conductas que le ayudan a defenderse de los elementos no deseados —por ejemplo ventanas emergentes y la publicidad— es así como sistemáticamente ignora aquello que se mueve o quiera llamar forzosamente su aten-ción.

Estudios realizados con técnicas como el eyetracking han demostrado que el texto plano llama más la atención del usuario que los elemen-tos en movimiento. Diseñar contenidos o elementos importantes de un portal, de forma similar a la publicidad, es una idea desaconsejada. Emplear banners para llamar la atención en temas que son institucio-nales, o propios del sitio, no causarán otro más que indiferencia por parte del usuario.

Verifique esta directriz en la página de inicio y todas aquellas páginas internas más importantes, como la página de contacto, el mapa del sitio, las portadillas y páginas transaccionales.

Fotografia tomada de: http://www.superricas.com



144 145

Asegúrese de que en su sitio la información no es confundida con pu-blicidad. Evite presentar información en movimiento, en la zona peri-férica de la página, o en cajas con dimensiones similares a los banner publicitarios.

Si tiene dudas respecto a si alguna información parece publicidad, conduzca pruebas de usuario para comprobar si el usuario fija o no su atención en dicha información.

Para la prueba se puede solicitar al usuario que realice una tarea de consulta de información, diferente de la que proporcionan los banner. Posteriormente preguntarle acerca de alguno de los elementos que se sospecha pueden parecer publicidad y corroborar si el elemento fue observado o no. La prueba debería hacerse con una muestra de varios usuarios (mínimo 5).

En general se debe evitar presentar información relevante en movi-miento, o en las zonas periféricas, en las que normalmente se ubica publicidad. La ubicación de elementos informativos cerca a elementos publicitarios, eventualmente podría causar que sean ignorados o pa-sados por alto.

Fotografia tomada de: http://www.useit.com/alertbox/reading_pattern.html



146 147

FASE 3. EVALUACIÓN“La Usabilidad es una disciplina que nace en los años 80 y que se de-sarrolla más formalmente a partir del trabajo de Jacob Nielsen (www.useit.com) en la década de los 90, con la aparición de las aplicaciones comerciales de Internet.

Su área de trabajo es la de apoyar el desarrollo de interfaces compu-tacionales que faciliten el trabajo que cualquier persona deba hacer ante una pantalla, permitiendo que pueda interactuar intuitivamente con la información que se ofrece, sin necesidad de contar con ayuda externa para completar cualquier proceso que se ofrezca.

Dado lo anterior, el área de trabajo de la disciplina está íntimamente ligada al diseño y desarrollo de los contenidos digitales, dado que en estos espacios los usuarios habitualmente se desempeñan solos y de-ben contar con pantallas auto explicativas que les permitan completar sin problemas las tareas que deban realizar.” (Chile)

No obstante, el estudio de la Usabilidad no termina en la aplicación de dichos estándares, sino que avanza más allá, en la interrelación entre dichas normas y la calidad de los mensajes y la experiencia que se de-see ofrecer al visitante del sitio web.

Es “experiencia” puede ser medida a través de las Pruebas de Usa-bilidad, que se enfocan en medir la manera en que el usuario se rela-ciona con las interfaces ofrecidas por el sitio web en estudio y en su capacidad para cumplir con las metas que haya tenido al momento de visitarlo.

En esta fase de evaluación, se ofrece una Prueba de Usabilidad con-creta, enfocada a sitios del tipo de una biblioteca, que ofrezcan gran cantidad de información y documentación y que deban navegar por el contenido en busca de elementos específicos que les sirvan en sus ta-reas. A través de su aplicación, será posible determinar si el sitio cum-ple con las normas de Usabilidad normalmente aceptadas y quedarán en evidencia las correcciones que sea necesario realizar.

Es importante considerar que si bien la usabilidad siempre busca el mismo objetivo, esto es, lograr que una persona pueda interactuar con el contenido y funcionalidades de una página web de manera sim-ple y directa, los elementos medidos pueden variar dependiendo de las características que tengan las interfaces que se estén evaluando.



148 149

<Nombre usuario>, le agradezco su disposición de participar en esta “Prueba de Usabilidad” que nos ayudará a detectar problemas en el sitio que desarrollamos, si es que los tuviera. Vamos a comenzar con algunas preguntas que permitirán saber quién es Usted y cómo utiliza Internet.

Presentación del Usuario

Buenos días, soy [Nombre, Apellido, Cargo, Empresa]

1. ¿Cual es su nombre?2. ¿A qué se dedica [Profesión, Actividad]?3. ¿Qué experiencia tiene en Internet?4. ¿Navega habitualmente?, Incluya el número de horas que utili za el correo electrónico. Si No5. ¿Cuantas horas navega al día, a la semana?6. ¿Qué sitios visita habitualmente?7. ¿Cuáles son sus sitios preferidos?8. Cuando desea encontrar algo en Internet9. ¿Cómo llega a un sitio que pueda tener esa información?10. ¿Usa un Buscador?11. ¿Cuál?12. Si no usa un buscador, ¿cómo lo hace?

No obstante, hay normas generales, como las que plantea J. Márquez (MÁRQUEZ) en su propia metodología, o bien las que incorpora J. Nielsen2 en la suya. (J N. )

Formato Prueba de Usabilidad

Entrevistador:Fecha:Sitio Web:

NOTA para el responsable de la prueba:

- Entregar todas las instrucciones de forma simple y repetitiva.- Mantener una actitud pasiva, paciente con el usuario, evitando “caras” de impaciencia, enojo, preocupación o cualquier gesto que haga sentir mal al usuario- Anotar todo lo posible- Aparte de las instrucciones necesarias para completar la prue ba, no se deben entregar pistas al usuario de lo que tiene que hacer cuando navegue el sitio web.- Grabar la prueba en video de la cara y de lo que hace en panta lla.- Acompañan al usuario el encargado de la prueba y, a lo más, 1 asistente que toma notas.



150 151

Secciones de Preguntas

<Nombre usuario>: Queremos comentarle antes de comenzar con las preguntas sobre el sitio mismo, que lo más probable es que en la prue-ba que hagamos, haya ciertas acciones que no podrá completar. Si eso ocurre, significará que el sitio debe ser perfeccionado y la prueba será exitosa. Si todo sale bien, significará que el sitio fue diseñado pen-sando en el usuario y también significará que esta prueba alcanzó el éxito. La prueba tiene una duración máxima de 30 minutos aproxima-damente. Le vamos a pedir que durante las acciones que desarrolle, vaya manifestando en voz alta lo que vaya pensando con el fin de que podamos entender qué le sugiere lo que va mostrando cada pantalla.

Las preguntas que le surjan en la navegación sólo las podremos res-ponder al final de la prueba.

Una vez agradecemos su ayuda. Ahora, vamos al sitio que vamos a probar

Prueba de Usabilidad

La Prueba de Usabilidad se divide así:

a. Identidadb. Contenidoc. Navegaciónd. Gráfica Webe. Búsquedaf. Feedbackg. Utilidad

En cada una de las áreas que se miden en la prueba, hay diferentes elementos que son revisados, con el objetivo de evaluar los aspectos que sean de mayor interés para los desarrolladores del sitio.

En este sentido, dejamos en claro que la Prueba de Usabilidad puede ser modificada con el fin de orientar las preguntas hacia el área o las áreas de interés que se tengan en un momento determinado; en este sentido, la prueba busca establecer elementos generales que permi-tan entender cuál es la percepción del usuario respecto a la oferta de contenidos y funcionalidades de un sitio web específico.



152 153

A continuación explicaremos cuales son dichas preguntas y el tipo de información que se busca obtener a través de su formulación.

a. Identidad

Este tipo de preguntas busca establecer si un nuestro sitio logra dife-renciarse de otros a fin con él, y recalcar la imagen corporativa de la institución frente a su usuario. Por ello, las preguntas se enfocan es-pecialmente en determinar si a primera vista el usuario sabe ha donde ha ingresado.

Se hace hincapié en que estas preguntas se deben hacer cuando el usuario está mirando la pantalla inicial y antes de comenzar a navegar o hacer “clic” sobre algún contenido, debido a que lo que se busca es obtener la “primera impresión” del usuario.

Varias de las preguntas están enfocadas a entender si el usuario se ha dado cuenta de la existencia de elementos en la pantalla que indiquen a qué institución pertenece el sitio.

Tanto la pregunta 1 “¿Con la información que se ofrece en pantalla, es posible saber a qué institución o empresa corresponde el sitio? ¿Cómo lo sabe?” como la pregunta 2, “¿Hay algún elemento gráfico o de texto que le haya ayudado a entender más claramente a que institución o empresa pertenece el sitio?” buscan establecer eso.

Adicionalmente se hacen preguntas sobre la imagen corporativa y so-bre elementos que pueden ser discordantes de ésta, con el fin de en-tender si el usuario ayuda a identificar áreas de ésta que no estén bien definidas o que aun estándolo, puedan generar contradicciones con la imagen que la institución espera proyectar. En este sentido se debe tener cuidado de que las preguntas 4 y 5 sólo deben formularse en el caso de que no hayan sido mencionadas en las repuestas entregadas por el usuario a las preguntas 1 y 2.

La pregunta 6 en tanto, busca determinar si el usuario se siente “invi-tado” por el sitio web por ser considerado como parte de la audiencia. En este caso se deberá revisar si parte de los contenidos que estamos ofreciendo están dentro de los intereses del usuario.

Finalmente, la Pregunta 7 busca establecer un parámetro claro de uti-lidad e identidad, para saber si el usuario puede obtener de manera directa la información que identifique a la institución con el fin de rea-lizar una actividad.

Una vez que se ha terminado este grupo de preguntas, se debe invi-tar al usuario a navegar por el sitio, con el objetivo de responder las siguientes interrogantes de la prueba.



154 155

Preguntas: Estas preguntas se deben hacer cuando el usuario está mirando la pantalla inicial y antes de comenzar a navegar o hacer “clic” sobre algún contenido.

1. ¿Con la información que se ofrece en pantalla, es posible saber a qué institución o empresa corresponde el sitio?- ¿Cómo lo sabe?2. ¿Hay algún elemento gráfico o de texto que le haya ayudado a entender más claramente a que institución o empresa pertene ce el sitio?3. ¿Relaciona los colores predominantes en el sitio web con la ins titución? - ¿Relaciona la dirección del sitio web con la institución?4. ¿De los elementos que muestra esta pantalla, hay algo que us ted crea que está fuera de lugar, porque no pertenece a la insti tución o empresa que usted identifica como propietaria?5. ¿Distingue alguna imagen que represente (logotipo) a la institu ción?- ¿Cree que aparece en un lugar importante dentro de la página? - ¿Puede leer el nombre de la institución?- ¿Es claro?6. ¿Hacia qué tipo de audiencia cree usted que está dirigido este sitio? - ¿Por qué?7. Si tuviera que tomar contacto telefónico o enviar una carta tra dicional a la institución o empresa propietaria del sitio web, ¿se ofrece información de números o direcciones? - ¿Son útiles como para hacer esa tarea?- ¿Le costó encontrar esa información?

b. Contenido

Las preguntas de esta sección buscan tener una opinión acerca de lo que está viendo el usuario y como esta navegando por los contenidos del sitio web.

El objetivo es determinar la importancia que el usuario le asigna a los contenidos y si la forma como se están presentando le permite al usuario hacerse una idea concreta de la información que se le está entregando a través del sitio web. Como se verá en las preguntas 1,2 y 3, el énfasis es determinar si la forma de mostrarlos ayuda a entender lo que se ofrece en las páginas del sitio.

Luego, con las Preguntas 4, 5 y 6 se busca que el usuario entregue una opinión sobre la forma de acceder a la información a partir de los títulos, enlaces y archivos adjuntos que se ofrecen, determinando de esta manera si la manera de agrupar los contenidos le es fácil de com-prender.



156 157

Preguntas: Estas preguntas se deben hacer luego de permitir al usua-rio navegar el sitio, con el fin de que se forme una opinión acerca de lo que está viendo y la forma de navegar por sus contenidos.

1. ¿Le parece adecuada la selección de contenidos destacados en la portada o usted echó de menos otras áreas de información que le habría gustado ver destacadas?2. ¿Al ver la portada del sitio, pudo distinguir de una sola mirada cuál era el contenido más relevante que se ofrecía? ¿Cómo lo gró hacer esa distinción?3. ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por ejemplo, es posible saber cuándo fue la última actua lización del sitio?4. ¿Los textos usados en los contenidos de los enlaces son sufi cientemente descriptivos de lo que se ofrece en las páginas ha cia las cuales se accede a través de ellos?5. ¿En caso de que los contenidos ofrecieran archivos adjuntos, fue fácil saber su peso o si eran de un formato diferente al de una página web? ¿Le ayudó la información ofrecida por el sitio sobre dichos archivos? ¿O no recibió ninguna información?6. En caso de haber información relacionada con la que estaba viendo, ¿se le ofreció de manera simple? ¿O tuvo que volver a navegar para encontrarla?

c. Navegación

Las preguntas de esta sección permiten establecer si la forma de or-ganizar la información dentro del sitio web es adecuada de acuerdo a la experiencia, conocimiento y expectativas que tenga el usuario que visite el sitio web.

Con este objetivo se formulan las preguntas 1 y 2, mientras que las Preguntas 3 a 6 buscan determinar si las pantallas ofrecen los datos necesarios para que el usuario pueda avanzar por ellas y regresar al punto de partida, sin perderse en el intento.

Es importante que el usuario pueda navegar y que en medio de ese proceso, se le vayan haciendo constantes preguntas, para obtener de él la respuesta correspondiente, pero que además que podamos determinar si efectivamente el usuario utiliza los elementos de nave-gación del sitio o, sólo usa los botones del programa de navegación (browser) para ejecutar los movimientos.



158 159

Preguntas:

1. ¿Puede ver en la portada y las demás páginas, la forma en que se navega por el sitio? ¿Se distingue fácilmente?2. ¿Existen elementos dentro de las páginas, que le permitan sa ber exactamente dónde se encuentra dentro de este sitio y cómo volver atrás sin usar los botones del programa navega dor?3. ¿Cómo vuelve desde cualquier página del sitio a la página de ini cio? ¿Ve alguna forma de hacerlo, que no sea presionando el bo tón del buscador? ¿Le parece claro?4. ¿Habitualmente, cómo logra acceder directamente a los conte nidos sin tener que navegar? ¿Usa el buscador? ¿Usa el Mapa del Sitio? ¿Los puede ver en este sitio? ¿Echa de menos algu no?5. ¿Logra distinguir gráficamente los enlaces visitados de aquellos que no ha visitado aún? ¿Le ayuda esa diferencia?6. El sitio tiene varios niveles de navegación y Usted ha ingresado y salido de varios de ellos. ¿La información que se le ofrece en pantalla le parece adecuada para entender dónde está ubica do en cualquier momento? ¿Se ha sentido perdido dentro del sitio? ¿Si lo ha sentido, recuerda en qué área fue? ¿Si no lo ha sentido, qué elemento del sitio cree que le ayudó más a orien tarse?

d. Gráfica Web

Esta sección buscan establecer si al usuario le ayuda la información gráfica que se le ofrecemos a través de las pantallas del sitio web, como también su percepción acerca de la velocidad de despliegue de información. (Pregunta 2).

Respecto de la Pregunta 4, la repuesta debe ser “filtrada” para deter-minar cuáles son los parámetros de comparación del usuario. En este sentido si el usuario considera que el sitio es “recargado”, se le debe solicitar un sitio de ejemplo que no lo sea, con el fin de entender de manera clara a qué se refiere con su comentario.

Finalmente la Pregunta 5 acerca de los “banners” busca establecer si el usuario es “ciego” a este tipo de avisos, de tal manera de com-prender más cabalmente su respuesta a las preguntas que luden a los temas gráficos.



160 161

Preguntas:

1. ¿Le pareció adecuada la forma en que se muestran las imáge nes en el sitio web? ¿Son nítidas? ¿Son adecuadas para repre sentar el contenido del que trata el sitio?2. ¿Las imágenes grandes se demoraron más de lo esperado? ¿Tuvo que seguir navegando sin que llegaran a mostrarse completamente? ¿Cree que el sitio es muy lento?3. ¿Se fijó si el sitio tenía gráficas con animaciones? ¿Hay alguna que le haya llamado la atención? ¿Ninguna?4. ¿Considera que gráficamente el sitio está equilibrado, muy sim ple o recargado?5. ¿Recuerda si el sitio tenía banners (avisos) publicitarios? ¿Tuvo intención o llegó a hacer clic sobre alguno? ¿Por qué le hizo clic? ¿Qué le llamó la atención?

e. Búsqueda

Estas preguntas buscan establecer si el sistema de búsqueda cubre las necesidades de acceso a información que tiene el usuario.

En este sentido, la Pregunta 1 “¿Utiliza normalmente un buscador al acceder a un sitio web?” permite saber si el usuario los emplea, ya que en caso de no hacerlo, se deberán filtrar sus respuestas respecto de lo que espera obtener a través de ellos.

Finalmente es importante que la Pregunta 3 referida a los resultados de la búsqueda se haga en el orden indicado (antes de buscar y des-pués de ver los resultados), de tal manera de entender claramente si la función de búsqueda le aporta la información que necesita.

Preguntas:

1. ¿Utiliza normalmente un buscador al acceder a un sitio web? ¿Distinguió si en este sitio se ofrecía un buscador? ¿Dónde está?2. <antes de usar el buscador> ¿Cómo haría la operación de bus-car? ¿Qué escribiría? ¿Dónde lo escribiría?3. <antes de presionar el botón Buscar > ¿Qué espera encontrar? <al ver la página de resultados> ¿Ese es lo que esperaba encontrar?, ¿Le sirve?



162 163

f. Feedback

En esta sección, buscamos establecer si el usuario encuentra la forma de ponerse en contacto con la institución. Hay que tener en cuenta que la Pregunta 1 es similar a la Pregunta 7 de la sección de Identidad, por lo que sólo debería efectuarse dependiendo de la respuesta reci-bida en ésta.

Preguntas:

1. ¿Encuentra alguna forma online y offline de ponerse en contac to con la empresa o institución, para hacer sugerencias o co mentarios? <ver pregunta similar en la parte de Identidad>2. <Tras la operación de enviar algún formulario vía web> ¿Al man dar datos mediante un formulario, el web le avisa si los recibió correctamente o no?

g. Utilidad

Las preguntas de esta sección son las finales de la prueba y tienen el objetivo de establecer una especie de resumen general de la expe-riencia de navegar el sitio. Por lo mismo, se ofrece la Pregunta 3 en la que se pueden considerar temas que no hayan sido rejuntados en las secciones anteriores, pero que sea de utilidad conocer.

Preguntas:

1. ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio? ¿Qué contenidos y servicios ofrece? ¿Los puede enumerar?2. ¿Cree que los contenidos y servicios que se ofrecen en este si tio son de utilidad para su caso personal?3. ¿Qué es lo que más te llamó la atención positivamente o negati vamente de la utilidad que ofrece el sitio web?



164 165

Cómo analizar los resultados

La Prueba de Usabilidad permitirá determinar cuáles son las tareas más difíciles de completar por parte de los usuarios, así como los ele-mentos del sitio web que sean menos comprensibles. Esa información deberá ser evaluada y priorizada con el objetivo de hacer una lista de tareas que permita hacer las correcciones que mejor apoyen la capaci-dad del sitio para ser usable.

CONCLUSIONES

Hoy en día vivimos en un mundo donde la tecnología está incluida en gran parte de nuestro diario vivir, convirtiéndose en un gran instru-mento para el intercambio de información y la comunicación interac-tiva a larga distancia.

El internet ofrece herramientas que permiten la posibilidad de crear y mantener comunidades virtuales con intereses y necesidades comu-nes. Gracias a este medio se pueden fortalecer los métodos de en-señanza e intercambio de información importante para la educación primaria y superior.

Teniendo en cuenta lo anterior, esta herramienta es fundamental para que la universidad pueda fortalecer su facultad de comunicación, im-plementando métodos que desarrollen en el estudiante habilidades cognitivas, búsqueda, evaluación, síntesis y habilidades básicas por medio de una página web bien desarrollada desde su primera fase, que permita el fácil acercamiento al sujeto con el cual se pretende co-municar.



166 167

Gracias a las evaluaciones a las cuales sometimos a distintas páginas web universitarias, entre ellas la de la Institución Universitaria Pana-mericana, percibimos falencias en algunos de los factores que propo-nemos como fundamentales para que la pagina cumpla con su usa-bilidad y sea optima, por eso llegamos a la conclusión, que tanto la pagina web que se tiene proyectada para la facultad como la misma página de la universidad deberán tener en cuenta y aplicar las fases y cada uno de los lineamientos que proponemos en nuestra investiga-ción fundamentada en una extensa bibliografía y fuentes de investiga-dores con amplia experiencia en el tema.

También nos dimos cuenta que muchas páginas solo se centran en do-tar al diseño web de elementos estéticos que muchas veces saturan el objeto o soporte, creando un diseño estructural inadecuado, motivo por el cual no pueden ser accesibles y usables para cualquier persona, independientemente del navegador, ordenador o dispositivo móvil que se utilice.

A su vez, se concluyó que existen muchas determinantes a la hora de elaborar una página web, entre las cuales mencionamos algunas con un alto impacto a considerar:

• Mantener además del logo, la barra o menú de navegación pre sente en todas las pantallas y ubicarlo siempre en el mismo es pacio con la misma disposición inicial.• Menos es Más. La gran regla del diseño también aplica en la web, los espacios en blanco también son necesarios.• Optimizar la arquitectura de la información, para presentar de una forma más ordenada los contenidos y permitir al usuario moverse de forma intuitiva.• Optimizar contenidos como videos e imágenes para reducir el tiempo de carga. • Tomar medidas para optimizar el posicionamiento en motores de búsqueda (SEO).• El uso de una tipografía legible en pantalla, preferiblemente de la familia Sans Serif.• Tanto el uso de tablas como páginas totalmente elaboradas en flash no son reconocidas por los dispositivos móviles, es reco mendable prescindir de ellas.



168 169

BIBLIOGRAFÍA

(2010), U. s. (s.f.). Using site speed in web search ranking (2010). Obte-nido de Webmaster Central Blog : googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html3.1.6), (. (s.f.). Swedish National Guidelines for Public Sector Websites (Directriz 3.1.6).Bevan, N. (9 de 1991). What is usability? Recuperado el 2 de 3 de 2012, de nigelbevan: www.nigelbevan.com/papers/whatis92.pdfBlindness, N. J. (s.f.). Old and New Findings en Alertbox. Obtenido de www.useit.com/alertbox/banner-blindness.htmlBonsiepe, G. (1998). Del objeto a la interface: Mutaciones del diseño. Buenos Aires: Ediciones Infinito Buenos Aires.Carvajal, M., & Saab, J. (2010). Directrices de Usabilidad para Sitios Web del Estado Colombiano. Bogota D.C: Ministerio de Tecgnologias de la Información y las comunicaciones.Chile, M. G. (s.f.).Constantine, L. (s.f.). ensayo facilidad de uso.cuatrop. (2012). usabilidad en interfaz. Obtenido de http://www.cua-trop.com.uy/paginas-web-uruguay-diseno-internet/capitulo2.htmDave, O. (2009). Tree Testing, A quick way to evaluate your IA. Recu-perado el 27 de 4 de 2012, de www.boxesandarrows.com/view/tree-testingFlorida Cortes, A. (2000). Area de Ingenieria de Proyectos. Departa-mento de ingenieria de diseño y fabricacion. . Centro Politecnico Su-perior, Universidad de Zaragoza.Gestalt. (2010). leyes de la Gestal aplicadas a la web. Buenos Aires: paganny.HASSAN, M., & ORTEGA, S. (2009). Informe APEI sobre Usabilidad. Obtenido de Asociación Profesional de Especialistas en Información: http://e-spacio.uned.es/fez/eserv.php?pid=bibliuned:19426&dsID=n03valenzue05.pdfHASSAN, Y., & ORTEGA, S. (2009). Informe APEI sobre Usabilidad. Re-cuperado el 23 de 4 de 2012, de www.nosolousabilidad.com/manual/index.htm

J, N. (s.f.). Obtenido de http://www.useit.com/papers/heuristic/heu-ristic_list.htmlJ, N. (s.f.). Obtenido de http://www.useit.com/papers/heuristic/heu-ristic_list.htmlJ, N. (s.f.). Top Ten Web Design Mistakes of 2005 en Alertbox . Obteni-do de www.useit.com/alertbox/designmistakes.htmlJakob, N. (2007). Elementos de diseño que parecen publicidad en Usa-bilidad. Ed. Anaya Multimedia.Jakob, N. (s.f.). NIELSEN Jakob. Obtenido de Top Ten Mistakes in Web Design en Alertbox: www.useit.com/alertbox/9605.htmlLARSON, K. &. (1998). Web page design: Implications of memory, struc-ture and scent for information retrieval. Proceedings of CHI´98,25-32. Obtenido de research.microsoft.com/enus/um/people/marycz/hfandthewebchapter.pdfLuzardo Alliey, A. M. (2009). DISEÑO DE LA INTERFAZ GRAFICA WEB. Buenos Aires: UNIVERSIDAD DE PALERMO.Luzardo Alliey, A. M. (2009). DISEÑO DE LA INTERFAZ GRAFICA WEB EN FUNCION DE LOS DISPOSITIVOS MOVILES. Buenos Aires: UNIVER-SIDAD DE PALERMO.Lyons, C. J. (2001). Guia Esencial de Diseño web. MADRID: PEARSON EDUCACION.MÁRQUEZ, J. (s.f.). Obtenido de http://www.jmarquez.com/docu-mentos/jm_checklist.pdfMatters, U. (s.f.). UX Matters. Obtenido de Label Placement in Forms: www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.phpNIELSEN, J. (s.f.). Obtenido de http://www.useit.com/papers/heuris-tic/heuristic_list.htmlNIELSEN, J. (s.f.). Obtenido de http://www.useit.com/papers/heuris-tic/heuristic_list.htmlNIELSEN, J. ( 2005). Obtenido de Top Ten Web Design Mistakes of 2005 en Alertbox: www.useit.com/alertbox/designmistakes.htmlNIELSEN, J. (2001). usait. Obtenido de Tagline Blues: What´s the Site About? En Alertbox: www.useit.com/alertbox/20010722.html



170 171

Nielsen, J. (2002). Usability Return on Investment Nielsen-Norman. Recuperado el 4 de 4 de 2012, de www.nngroup.com/reports/roi/Nielsen, J. (2006). Usabilidad prioridad en el diseño web. “Cómo se usa la página de resultados del motor de búsqueda” Pág. 57.: Edicio-nes Anaya Multimedia.Nielsen, J. (2006). Usabilidad prioridad en el diseño web, “Cómo se usa la página de resultados del motor de búsqueda” Pág. 57. Ediciones Anaya Multimedia.NIELSEN, J., & LORANGER, H. (2006). Usabilidad. Prioridad en el dise-ño web (pag. 226). Anaya Multimedia.Ortega, S. (2005). www.nosolousabilidad.com. Recuperado el 27 de 4 de 2012, de www.nosolousabilidad.com/articulos/desarrollo_concep-tual.htmPipes, A. (2011). How to design websites. Londres: Laurence king pu-blishing Ltda.Pressman. (2010). Ingenieria del Software. España: McGraw-Hill Inte-ramericana de España S.L., 2010.Research. (s.f.). Based Web Design & Usability Guidelines (pag. 48).Research. (s.f.). Research. Obtenido de Based Web Design & Usability Guidelines (Directriz 11:7).Research. (s.f.). Research. Obtenido de Based Web Design & Usability Guidelines (Directriz 5:2).Research. (s.f.). Research. Obtenido de Based Web Design & Usability Guidelines (Directriz 10:7).SHAIKH, D. (s.f.). DAWN SHAIKH. Obtenido de The Effects of Line Length on Reading Online News.

SHAIKH, D. (s.f.). DAWN SHAIKH. Obtenido de The Effects of Line Length on Reading Online News.: psychology.wichita.edu/surl/usabi-litynews/72/LineLength.aspSiever, V., & Andrew, D. (2005). learning technologies ands learning theories. C. Ghaoui: Ideas Group Inc.useit. (s.f.). Obtenido de www.useit.com/alertbox/banner-blindness.htmlValenzuela Argüelles, R. (2005). http://www.ciie.cfie.ipn.mx/. Recupe-rado el 4 de 5 de 2012, de http://www.ciie.cfie.ipn.mx/2domemorias/documents/c/c14/c14_43.pdfWCAG. (s.f.). WCAG. Obtenido de Web Content Accesibility Guidelines 2.0 (Pauta 1.4.8).Websites, G. f. (s.f.). Guidelines for UK Government Websites (Direc-triz 2.5). Card Sorting: Técnica de categorización de contenidos. Hassan Yusef y Martín Franciso en No solo Usabilidad (2004).www.nosolousabilidad.com/articulos/cardsorting.htmCard sorting: a definitive guide. Donna Spencer (2004).www.boxesandarrows.com/view/card_sorting_a_definitive_guideOptimal Sort: herramienta para realizar Card Sorting en línea.www.optimalworkshop.com/optimalsort.htmxSort: herramienta de Card Sorting gratuita para MacOS. www.xsor-tapp.com/Tree Jack: herramienta de Optimal Sort para realizar Tree Testing en línea.www.optimalworkshop.com/treejack.htm5 Second test: herramienta en línea para realizar test de 5 segundos.fivesecondtest.com/


172

Documents

MANUAL PARA LA ELABORACIÓN DE UNA INTERFAZ WEB …