1

Instituto Tecnológico de Parral

Ingeniería Web II

Traducción: 2.2.3 Directrices de diseño

Profesor: Jorge Jacobo Aguirre Jiménez

Oscar Samuel Ramírez Vargas

12410483

2

2.2.3 Instrucciones de diseño

Aunque en este capítulo se centra más en los métodos de ingeniería de la

usabilidad web, se ha dejado a sabiendas una lista completa de las directrices de

diseño específicas (que irían más allá del alcance de este libro; ver Instituto Nacional

del Cáncer de 2003, Lynch y Horton 2002 en su lugar), queremos ilustrar la discusión

anterior seleccionando algunas pautas de diseño importantes y generalmente

aceptadas.

Tiempos de Respuesta

Para evitar que los usuarios de una aplicación interactiva de tengan la

sensación de perder la interactividad y el control, los tiempos de respuesta del

sistema en todos los pasos de interacción tiene que estar por debajo de ciertos

umbrales asociados a los mecanismos de procesamiento de información humana: una

respuesta del sistema se hace en un tiempo de 0,1 segundos lo cual se siente como una

respuesta directa; los tiempos de espera de hasta 3 segundos se toleran sin perturbar

el hilo de sus pensamientos; ya los tiempos de espera son percibidos conscientemente

(y normalmente de manera desagradable). Después de 8 a 10 segundos, los usuarios

generalmente comienzan a ocuparse en algo más. Para las aplicaciones Web, se puede

suponer que los tiempos de respuesta de hasta 3 segundos se pueden considera

normales, y todo lo anterior y dentro de los segundos de un dígito se cubre sólo el

tolerarse siempre si hay indicios de que la espera puede ser gratificante. Para las

aplicaciones Web, la observación de tales valores de umbral es un desafío importante

en vista de las circunstancias técnicas incalculables de las conexiones a Internet. Por

esta razón, se recomienda el diseñar páginas "ligeras". Con este fin, debemos limitar el

número de imágenes y otros elementos multimedia pesados por página, y los además

de los métodos de uso de compresión o para reducir su formato, la resolución, o un

color de profundidad para reducir al mínimo el tamaño de las imágenes. Si las

imágenes de alto volumen son inevitables, entonces se recomienda a primera

demostración poner miniaturas y cargar las imágenes de las mismas sólo a petición

explícita del usuario. Como regla empírica, todo el volumen de una sola página no

debe superar aproximadamente. 50 Kbytes. Otro método para acelerar la carga de un

sitio Web especifica las dimensiones de imágenes en el texto HTML para permitir que

el navegador para representar una página antes de que las imágenes están a plena

carga. Para dar a los usuarios una oportunidad temprana para orientarse y para

mejorar la accesibilidad, el texto alternativo se debe utilizar (usando el atributo ALT

en HTML). Si el contenido que se representa como un resultado de una actividad de

interacción es muy grande, entonces debe cuidar ser llevado a mantener una

paginación adecuado (tal como, por ejemplo, en la mayoría de los motores de

búsqueda). De Esta reduce el volumen de datos (y los tiempos de espera para los

3

usuarios) en cada paso de la interacción a la de una sola página, de modo que los

umbrales de tiempo de respuesta anteriores se pueden mantener más fácilmente. En

general, la tolerancia de los usuarios a los retrasos es mucho mayor si hay indicios de

que el tiempo de espera puede ser gratificante, el tiempo de espera es plausible, y se

informa al usuario sobre el tiempo de espera por adelantado. Eficiencia

Interacción

Aparte de tiempo de respuesta de un sistema, los usuarios tienen que gastar

tiempo para la navegación y la entrada es también importante para la eficiencia global

del sistema. Las aplicaciones web tienen normalmente que apuntarse y hacer clic en

las interfaces, con actividades del ratón que desempeñan un papel dominante. Las

interfaces eficaces de este tipo deben minimizar las distancias a elementos

seleccionables. Al mismo tiempo, el tamaño de los elementos no debe estar por debajo

de un cierto mínimo para garantizar que los usuarios (especialmente con

discapacidad visual) pueden dar clic con precisión. Si las aplicaciones Web requieren

la entrada del usuario en un teclado (por ejemplo, para rellenar formularios),

deberíamos tratar de evitar cambios frecuentes entre el ratón y el teclado, ya que

estos cambios se traducen en considerables retrasos. Por último, también debemos

asegurarnos de que los artículos interesantes deben ser alcanzable en tan sólo la

interacción pasos como sea posible. Como regla general, se recomienda controlar

minuciosamente una aplicación web como si para llegar a ciertos artículos o servicios

lleva más de cuatro clics del ratón.

Colores

Uno de los puntos fundamentales consiste en la advertencia hacia no hacer un

uso excesivo de los colores. Como regla de oro, 5 colores representan lo mínimo para

que un sitio web se vea agradable. Matices extremos, como colores llamativos o

altamente saturados, deben ser evitados. Los colores no deben utilizarse como un

criterio exclusivo para resaltar diferentes áreas en un sitio Web. También debemos

utilizar otros factores, tales como el posicionamiento, diseño, etc., para destacar las

áreas para varias razones. En primer lugar, no podemos estar seguros de que estarán

representadas las combinaciones seleccionadas la forma de mirar en el ordenador del

desarrollador debido a la profundidad de color dependiente del dispositivo. De hecho,

los desarrolladores deben acostumbrarse al hecho de que hay muchas alternativas a

los monitores CRT (por ejemplo, Pantallas LCD y proyectores de vídeo), y que los

colores se ven completamente diferente en cada tipo de dispositivo, por lo que los

4

colores pueden transmitir un estado de ánimo totalmente diferente de lo previsto

originalmente. Por otra parte, tenemos considerar el hecho de que las personas con

visión limitada del color también deben ser capaces de reconocer el diferencias (ver

Figura 11-2).

Figura 2.11 Efectos de la visión limitada.

Esto es análogo a los semáforos; visualmente las personas con deficiencias no

entenderían la información del color (rojo, verde) si no hubiera información

semántica adicional (rojo siempre en la parte superior, verde siempre en la parte

inferior). La analogía de semáforos también deja claro que si se utiliza correctamente

los colores se pueden proporcionar un valioso apoyo, por ejemplo, las señales rojas de

peligro, señales verdes que todo es bien. Por último, también hay que tener en cuenta

las diferencias culturales en el significado de los colores (ver sección 11.4.7).

Disposición del texto

La lectura de texto en una pantalla es mucho menos eficiente que la lectura en

papel. Por esta razón, el texto debe ser cuidadosamente diseñado, especialmente en

aplicaciones web con una gran cantidad de texto. Como muestra el ejemplo de la

figura 11-3 aclara, diseños de texto fijos deben evitarse para permitir la navegador

para adaptar la paginación y el diseño a diferentes tamaños de ventana, y para

permitir al usuario seleccione su tamaño de la fuente preferida (y tal vez el conjunto

de caracteres). Como ajuste básico, sans-serif 7 caracteres

5

Figura 11-3 Ejemplo de mala disposición del texto y el color contraste.

Tipos (por ejemplo, Verdana, una fuente especialmente diseñado para la

representación de pantalla) en un tamaño adecuado de la fuente (por visualmente

usuarios discapacitados) deben ser seleccionados. Letras de molde y pequeña

capitalización deben ser evitadas. Además, el fondo de las páginas Web no debería

tener una estructura o patrón, porque esto puede afectar negativamente a la

legibilidad de información de primer plano. Desde la lectura de texto en la pantalla es

más agotador, los usuarios tienden normalmente a leer el texto en diagonal, es decir,

que "escanear" para ciertos tópicos. En vista de este comportamiento, el texto en

general, debe ser conciso, expuesto en párrafos cortos, y equipado con los reclamos

esperados (Nielsen et al. 1998). En Además, se debe hablar el "lenguaje del usuario",

utilice nombres significativos y términos, y lo ideal tener texto en los idiomas

nacionales de los usuarios.

Estructura de la Página

Para asegurar una fácil orientación dentro de una página, debemos evitar la

necesidad del desplazamiento horizontal, porque la lectura línea por línea significa

que los usuarios tienen que moverse permanentemente los contenidos de la ventana

6

de ida y vuelta. Por el contrario, el desplazamiento vertical se considera un "pecado

perdonable". Sin embargo, la atención debe tomarse a que el uso de cualquier

desplazamiento no afecta la eficacia y eficiencia de navegar a través de una página.

Además, bajo ninguna circunstancia debe mermarse la interacción de importante

elementos, tales como menús, que se vuelven invisibles como resultado de

desplazamiento; estos elementos pueden tener que ser colocado de forma

redundante. Las encuestas han demostrado que una disposición de columnas

orientadas similar al formato habitual de todos los días periódicos acelera la detección

visual de una página, en el que el esquema de búsqueda general es "de arriba a abajo y

de izquierda a derecha "(en este orden) en la cultura occidental. Esto no se aplica para

el diseño de texto continuo como se discutió en la sección 11.4.3 pero significa que los

elementos importantes, como los menús y elementos de navegación, están mejor

dispuestos en los márgenes de la página izquierda y superior. En general, las páginas

no deben ser sobrecargadas. Además, la forma en que los usuarios descremada a

través de páginas es muy influenciada por la capacidad de la memoria a corto plazo,

en particular si se trata de una cuestión de encontrar la mejor correspondencia a un

elemento buscado más que una coincidencia exacta, porque la mejor manera

preliminar correspondencias tienen que ser memorizado. La Figura 11-4 muestra un

ejemplo de demasiada información y mala estructura de la página. La estructura de la

página también debe permitir a los usuarios imprimir páginas. Si la impresión no es

posible o difícil debido a la tabla o el marco de estructuras complejas, a continuación,

una opción de impresión por separado o en el panel de impresión deben ser ofrecidos.

Estructura de la Navegación

La navegación en una aplicación Web o sitio Web representa un criterio clave

de especial importancia para la facilidad de uso de una aplicación o de un sitio. El "

síndrome de perderse en el hiperespacio" (ver sección 1.3.1) debido a la navegación

no lineal tiene que ser evitado a toda costa. Para este fin, es necesario transmitir un

modelo mental de la estructura de navegación lo más rápidamente posible,

permitiendo a los usuarios "a aprender de memoria el mapa del sitio”. Una estructura

básica clara y lógica, con el apoyo de un mapa del sitio, información constante sobre la

posición actual dentro de la estructura ("¿Dónde estoy?"), una información clara sobre

el contenido de los la página actual ("¿Qué puedo hacer yo o encuentro aquí?"), y los

elementos accesibles en la siguiente interacción el paso ("¿Dónde puedo ir?") son los

ingredientes más importantes de un diálogo bien diseñado y sistema de navegación.

Sin embargo, siempre debemos tener en cuenta que los navegadores ofrecen adicional

elementos de navegación independientes del contexto ("Volver", "Favoritos", etc.), que

puedan perjudicar la destinado estructura de navegación o hacerlo ineficaz.

7

Figura 4.11 Efectos del exceso de información y mala página structure.

El exceso de imaginación en el desarrollo de la estructura básica de un sistema

de navegación es generalmente perjudicial para su facilidad de uso. La mayoría de los

usuarios están familiarizados con muchos sistemas conocidos, para que estos sistemas

sean fáciles de entender. Una buena visión general se encuentra en la literatura, por

ejemplo, en van Welie de Patrones de Navegación (van Welie 2005). Otros problemas

con respecto a la facilidad de uso son elementos de navegación heterogéneos.

Heterogéneo elementos de navegación son formas mixtas de orientación espacial, por

ejemplo, una combinación de menús horizontales y verticales en el mismo nivel

jerárquico, o variaciones en la técnica aplicación, por ejemplo, una combinación de

menús estáticos que se pliegan abiertos (vistas de árbol) y dinámica popup o menús

desplegables. A primera vista, este último tiene la ventaja de que no tenemos que

reservar un lugar definido. Por desgracia, este beneficio generalmente resulta ser

inútil, porque a menudo tenemos para construir en una ayuda de orientación

adicional ("¿Dónde estoy?"). En contraste, una ayuda de este tipo es implícitamente

presente en la mayoría de los menús estáticos (resaltando la opción seleccionada).

Otros elementos que se deben utilizar con moderación son ventanas emergentes. Las

8

ventanas emergentes prácticamente representar "pinchazos" en un modelo

conceptual de una estructura de navegación hipertexto orientada. Entre otras cosas,

pueden hacer que los usuarios se pierdan. Un escenario típico es cuando una ventana

emergente cubre la ventana principal. El usuario piensa que él o ella todavía está en la

ventana principal y decide navegar espalda, que no logra desde dentro de la ventana

actual. La disposición de los hipervínculos asociativas (incrustados en el texto) lo ideal

sería que cumplir con la convenciones aceptados y conocidos. En otras palabras,

debemos tener razones fundadas si queremos dar la espalda a las representaciones

estándar. Se recomienda utilizar el resaltado especial (por ejemplo, pequeños

pictogramas) para los enlaces que salen del sitio Web actual. La regla general es que la

simplicidad y coherencia representan los criterios de calidad de larga vida, mientras

que frescura y relumbrón técnica son cosas de moda con beneficios muy dudosos.

Multiculturalidad

Disponibilidad global de la web se traduce en requisitos de usabilidad

adicionales resultantes de la heterogeneidad cultural de los usuarios (ver sección

1.3.2). Incluso las aplicaciones web diseñadas principalmente para uso local no debe

ignorar estos aspectos, pero pensar en la gente de otras regiones que viven en

territorio de la aplicación para evitar una pérdida de clientes potenciales o herir los

sentimientos de los usuarios. Aunque parece imposible ofrecer soluciones de validez

general, la identificación de un "más pequeño denominador cultural común "nos

permite evitar grandes errores. Los siguientes son algunos ejemplos:

• Colores: Los colores tienen diferentes significados en diferentes culturas. Esto

significa que debemos evitar características que se basan excesivamente en el poder

expresivo de los colores.

• Símbolos: Cuando un fabricante de calzado deportivo conocido comenzó a

utilizar un logotipo que fue supone para simbolizar una llama en sus productos, todo

el mundo árabe se sintió ofendido, debido a que la silueta del símbolo era muy similar

a la letra árabe para Allah.

• Idioma: Oscar Wilde diciendo "Inglaterra y Estados Unidos - dos países

divididos por uno lenguaje común "ilustra las cuestiones lingüísticas problemáticas

con humor. Es extremadamente importante hablar el idioma de sus clientes en la Web.

• Representación de la información: Los usuarios de otros países tienen

necesidades especiales relacionadas con campos de entrada para los nombres y

direcciones, medidas y fechas, y la información sobre las normas de productos

regionales (Nielsen 2005).

9

Los ejemplos clásicos serían formatos de fecha: 11/03/2003 habría 11 de

marzo en Europa, pero 3 de noviembre en los EE.UU.. Una simple corrección a 11 /

Mar / 2003 puede prevenir este problema. Para explicar cómo las decisiones de

diseño desconsiderados afectan usabilidad, mira la figura 11-5. Ante todo, las

personas extranjeras no tienen ninguna posibilidad de reserva en su lengua materna o

utilizar inglés como un compromiso. En segundo lugar, nombre y apellido se

presentan en el orden equivocado, por lo que los usuarios extranjeros no pueden

confiar en patrones de entrada común. En tercer lugar, el texto adicional ". . . des

Reisenden "es redundante. Las experiencias de aprendizaje pueden ser una valiosa

ayuda en el desarrollo de aplicaciones que tienen en cuenta la multiculturalidad.

Desde la Web ha conquistado el mundo en más o menos comparables niveles,

experiencias como resultado del uso de la Internet se puede comparar a nivel

internacional. Por ejemplo, echemos un vistazo a cómo los vínculos se diseñan

normalmente: partes de texto en un color específico (por ejemplo, azul) son

interpretado como enlaces no visitados y otros en un color diferente (por ejemplo,

violeta) son vistos como los enlaces visitados. La situación es similar para los

elementos más complejos. Un campo de entrada, seguido de un botón de cualquier

tipo se identifica como una simple búsqueda en contextos apropiados, y la percepción

de las formas

Figura 11-5 Ejemplo de un formulario de reserva de viajes alemana con tres

problemas de usabilidad (traducciones en la izquierda se añaden para este libro).

mencionados anteriormente hace que las personas reconocen la combinación de

varios elementos como una sola unidad. Buenos ejemplos son las páginas de Yahoo de

Japón, Singapur o Corea.

Medidas Generadoras de Confianza

10

Hay un fenómeno notable en aplicaciones Web comerciales que normalmente

no suceden para el software convencional: los usuarios se orientan en la presencia en

línea de un proveedor, encontrar un producto, y, finalmente, no hacer un pedido o

hacer una reserva. Si bien esto no es un comportamiento operadores de aplicaciones

web como para ver, puede ser en su mayoría atribuido a problemas de usabilidad

frecuente Web (ver sección 11.3). En muchos casos, sin embargo, es debido a la falta

de confianza en el vendedor virtual, que evita que usuarios de importante o de riesgo

transacciones. La literatura sugiere varias medidas más o menos simples que pueden

ayudar a fortalecer la confianza de los usuarios en la confiabilidad de un proveedor,

incluyendo:

• La presentación de una página "About Us", la introducción de la empresa y de

los procedimientos de su comercio electrónico (términos y condiciones de negocios),

tal vez indicando cifras impresionantes, como número de empleados, el número de

puntos de venta "físicos", etc .;

• Información de contacto, como la dirección postal del mundo real, dirección

de correo electrónico, y el número de teléfono (idealmente gratuito);

• Mecanismos para ayudar a los clientes y establecer comunidades, tales como

salas de chat, (a ser posible síncronos) a través de mensajes, listas FAQ y referencias

de clientes satisfechos;

• Las actividades (y sus explicaciones) para asegurar la privacidad de los datos

y la confidencialidad;

• Las políticas como cliente-amistoso o garantía de devolución del dinero, etc .;

• Tratamiento de los clientes (correos de confirmación, etc.) después de que

ponen su orden inicial a aumentar los pedidos posteriores (Nielsen 2004); y muchos

más - ver, por ejemplo, Nysveen y Lexhagen (2002), KALUSCHA y Grabner- Krauter

(2003). Algunos de estos elementos ya están obligados por la ley en la UE.

Otros Criterios de Diseño

Las animaciones deben evitarse, a menos que tengan la semántica específica,

tales como simulaciones de procesos físicos, ya que atraen la atención de los usuarios,

los distrae de otra importante información en una página Web. Si se utiliza

correctamente, iconos apoyan usuarios en el reconocimiento de las funciones de

información o sistema asociados a ellos. Sin embargo, hay un riesgo de confundir a los

usuarios cuando iconos no están claramente diseñados o utilizados para metáforas

inapropiadas. Los iconos deben estar sujetos a las pruebas de usuario, y siempre

deben tener información de texto redundante, por ejemplo, el ratón sobre las

11

opciones emergentes. Por último, debemos mencionar un criterio muy importante

"meta-diseño". Todos los aspectos de diseño (Combinación de colores, la disposición,

el conjunto de caracteres, ayuda a la navegación, etc.) tiene que ser usado

consistentemente a través de la aplicación Web entero para mantener el esfuerzo de

aprendizaje a un mínimo. Idealmente, la consistencia no es limitada a una aplicación

particular. También se refiere a otras aplicaciones comparables, o para la Web en su

conjunto (véase también la discusión del diseño de la articulación). En el cierre de este

tema, debemos señalar que la literatura describe estos criterios ampliamente, y una

discusión completa iría más allá de la finalidad y el alcance de este libro. Además,

observando incluso la lista más completa de guías no conduce necesariamente a

aplicaciones útiles, a menos que el proceso de desarrollo integra las actividades de

usabilidad orientada discutidas.