Post on 12-Jul-2016
description
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.