2.2.

3 Directrices de diseo
Ximena Rub Gallarzo Castillo

21/03/2016

11.4 Directrices de diseo

Aunque este captulo se centra en los mtodos de la ingeniera de la usabilidad
web, dejando a sabiendas una lista completa de las directrices de diseo
especficos (que ira ms all del alcance de este libro; ver Instituto Nacional del
Cncer de 2003, Lynch y Horton 2002 en lugar), que quieren ilustrar la discusin
anterior seleccionando unos importantes y generalmente aceptadas directrices de
diseo.
11.4.1 Tiempos de respuesta
Para evitar que los usuarios de una aplicacin interactiva de la prdida de una
idea de la interactividad y activo control de flujo, los tiempos de respuesta del
sistema en todos los pasos de interaccin tiene que estar por debajo de cierta
umbrales asociados a los mecanismos de procesamiento de informacin humana:
un sistema de respuesta de tiempo de 0,1 segundo se sinti 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 desagradable). Despus de 8 a 10 segundos, en general, los usuarios
comienzan a ocuparse en algo mas. Para las aplicaciones Web, se puede suponer
que los tiempos de respuesta de hasta 3 segundos se considera normal, y todo lo
anterior y dentro de los segundos de un dgito cubre se acaba sobre tolerarse
siempre hay indicios de que la espera puede ser muy satisfactorio.
Para las aplicaciones Web, la observacin de dichos valores de umbral es un reto
importante en vista de la circunstancias tcnicas incalculables de las conexiones a
Internet. Por esta razn, se recomienda para disear pginas "delgado". Con este
fin, debemos limitar el nmero de imgenes y el resto de grandes volmenes
elementos multimedia por pgina, y mtodos de uso de compresin o reducir su
formato, la resolucin, o el color profundidad para reducir al mnimo el tamao de
las imgenes. Si las imgenes de alto volumen son inevitables, entonces se
recomienda a la primera demostracin miniaturas y cargar las imgenes mismas
nicamente a peticin explcita del usuario.
Como regla emprica, todo el volumen de una sola pgina no debe superar
aproximadamente. 50 Kbytes.4
Otro mtodo para acelerar la carga de un sitio Web especifica las dimensiones de
las imgenes en el texto HTML para permitir que el navegador para representar una
pgina antes de que las imgenes estn a plena carga.
Para dar a los usuarios una oportunidad temprana para orientarse y para mejorar la
accesibilidad, texto alternativo se debe utilizar (usando el atributo ALT en HTML).

Si el contenido que se representa como un resultado de una actividad de

interaccin es muy grande, entonces debe cuidar tomarse para mantener una
paginacin adecuado (tal como, por ejemplo, en la mayora de los motores de
bsqueda). Esta reduce el volumen de datos (y de los tiempos de espera para los
usuarios) en cada paso interaccin a la de una sola pgina, de modo que los
umbrales de tiempo de respuesta anteriores se pueden mantener ms fcilmente.
En general, la tolerancia de los usuarios a los retrasos se incrementa en gran
medida 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 11.4.2 Interaccin
Aparte de tiempo de respuesta de un sistema, los usuarios tienen que gastar tiempo
para la navegacin y la entrada es
Tambin es importante para la eficiencia general del sistema. Las aplicaciones
Web tienen normalmente de apuntar y hacer clic con el botn 4 Clculo
aproximado: conexiones lentas a Internet a travs de un mdem tienen una tasa
de transferencia mxima de 56 Kbits / s; 1 Kbyte

corresponde a 8 Kbits. Para ser capaz de mantenerse dentro de los 8 segundos

regla mencionada en el captulo 12, una pgina no debe exceda el tamao
siguiente (en condiciones ptimas, con exclusin de la prdida de recursos debido
a flujo bidireccional de datos, etc.):
8 segundos (56 Kbits / 8) = 56 Kbytes.
usabilidad de aplicaciones Web
interfaces, con actividades ratn desempea un papel dominante. interfaces
eficaces de este tipo reducir al mnimo las distancias a elementos seleccionables.
Al mismo tiempo, el tamao de los elementos no deben estar por debajo de un
cierto mnimo para garantizar que los usuarios (especialmente motoricaly o con
discapacidad visual) puede golpear con precisin.
Si las aplicaciones Web requieren la entrada del usuario en un teclado (por
ejemplo, para rellenar formularios), que debe tratar de evitar cambios frecuentes
entre el ratn y el teclado, ya que estos cambios se traducen en retrasos tiempo
considerable.
Por ltimo, tambin hay que asegurar que los artculos interesantes deben ser
alcanzable en tan slo la interaccin pasos como sea posible. Como regla general,

se recomienda controlar minuciosamente una aplicacin Web como a si como

llegar a ciertos artculos o servicios lleva ms de cuatro clics del ratn.
11.4.3 Colores
Una directriz fundamental consiste en la advertencia de no hacer un uso excesivo
de colores. Como una regla general, se cree que alrededor de cinco colores para
representar el lmite superior. tonalidades extremas, tales como colores llamativos o
altamente saturadas, deben ser evitados.

Los colores no deben utilizarse como un criterio exclusivo para resaltar diferentes
reas en un sitio Web.
Tambin debemos utilizar otros factores, tales como el posicionamiento, diseo,
etc., para destacar las reas para varios razones. En primer lugar, no podemos estar
seguros de que estarn representadas las combinaciones seleccionadas la forma
en que se ven 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 de tubo (por ejemplo,
pantallas LCD y proyectores de vdeo), y que los colores se vean completamente
diferente en cada tipo de dispositivo, por lo que los 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 visin limitada del color
tambin deben ser capaces de reconocer la diferencias (ver Figura 11-2).

Esto es anlogo a los semforos; visualmente personas con deficiencias no

entenderan el color informacin (rojo, verde) si no hubiera informacin semntica
adicional (rojo siempre en la parte superior,
Siempre verde en la parte inferior). La analoga de semforos tambin deja claro
que se utiliza correctamente colores pueden proporcionar un valioso apoyo, por
ejemplo, seales de peligro rojo, verde seales de que todo est bien. Por ltimo,
tambin debe tener en cuenta las diferencias culturales en el significado de los
colores (vase seccin 11.4.7).

Disposicin 11.4.4 texto

La lectura de texto en una pantalla es significativamente menos eficaz que la
lectura en papel. Por esta razn,
el texto se debe colocar con cuidado, sobre todo en aplicaciones Web con una
gran cantidad de texto.
Como muestra el ejemplo en la figura 11-3 aclara, diseos de texto fijos deben
evitarse para permitir que el
navegador de adaptar la paginacin y el diseo a diferentes tamaos de ventana,
y para permitir que el usuario
seleccione el tamao de la fuente preferida (y tal vez el juego de caracteres).
Como ajuste bsico, sans-serif 7 caracteres

conjuntos (por ejemplo, Verdana, una fuente especialmente diseado para la

representacin en pantalla) en un tamao apropiado de la fuente (por
Los usuarios con discapacidad) deben ser seleccionados. letras maysculas y
versalitas deben ser evitados.
Por otra parte, el fondo de las pginas web no debe tener una estructura o
modelo, porque esto puede
afectar perjudicialmente a la legibilidad de la informacin de primer plano.
Desde la lectura de texto en la pantalla es ms agotador, los usuarios tienden
normalmente a leer el texto en diagonal, es decir,
que "Scan" para ciertos tpicos. A la vista de este comportamiento, el texto debe
ser conciso en general,

estipula en los prrafos cortos, y equipado con los reclamos esperados (Nielsen et
al., 1998). En
Adems, se debe hablar el "lenguaje del usuario", utilice nombres significativos y
trminos, y lo ideal
tener texto en los idiomas nacionales de los usuarios.
Para asegurar una fcil orientacin dentro de una pgina, debemos evitar la
necesidad de desplazamiento horizontal,
porque la lectura por lnea lnea significa que los usuarios tienen que moverse de
forma permanente los contenidos de la ventana
de ida y vuelta. Por el contrario, el desplazamiento vertical se considera un
"pecado perdonable". Sin embargo, la atencin
debe tenerse en cuenta que el uso de cualquier desplazamiento no afecta a la
eficacia y eficiencia
de navegacin a travs de una pgina. Por otra parte, bajo ninguna circunstancia
debe permitirse importante interaccin

elementos, tales como mens, se convierten en invisible como resultado de

desplazamiento; estos elementos pueden tener que
ser colocado de forma redundante.
Los estudios han demostrado que una disposicin orientada a columnas similar al
formato usual en diario
peridicos acelera la deteccin visual de una pgina, en el que el esquema de
bsqueda general es "de
arriba a abajo y de izquierda a derecha "(en este orden) en la cultura occidental.
Esto no se aplica
para el diseo de texto continuo como se discute en la seccin 11.4.3, sino que
significa que los elementos importantes,
tales como mens y elementos de navegacin, estn mejor dispuestos en los
mrgenes de la pgina izquierda y superior.
En general, las pginas no deben ser sobrecargados. Adems, la forma en que los
usuarios hojear a travs de las pginas es

grandemente influenciada por la capacidad de memoria a corto plazo, sobre

todo si se trata de una cuestin de encontrar el mejor
correspondencia con un elemento buscado en lugar de una coincidencia exacta,
porque la mejor manera preliminar
correspondencias tienen que ser memorizado. La Figura 11-4 muestra un ejemplo
de un exceso de informacin
y la mala estructura de la pgina.
La estructura de la pgina tambin debera permitir a los usuarios imprimir pginas.
Si no es posible imprimir o difcil
debido a la tabla o el marco de estructuras complejas, a continuacin, una opcin
de impresin por separado o en el panel de impresin deben estar
Ofrecido.
Estructura 11.4.6 Navegacin
La navegacin en AWeb aplicacin de sitio Web o representa un criterio clave de
especial importancia
para la facilidad de uso de una aplicacin de sitio o de. El "sndrome de perderse
en el hiperespacio" (ver seccin 1.3.1)
debido a la navegacin no lineal tiene que ser evitado a toda costa. Con este fin,
es necesario transmitir
un modelo mental de la estructura de navegacin lo ms rpidamente posible,
permitiendo a los usuarios a "memorizar
el mapa del sitio ". Una estructura bsica clara y lgica, con el apoyo de un mapa
del sitio, informacin constante sobre

la posicin actual dentro de la estructura ( "Dnde estoy?"), informacin clara

sobre el contenido de los
la pgina actual ( "Qu puedo hacer yo o encontrar aqu?"), y los elementos
accesibles en la siguiente interaccin
el paso ( "Dnde puedo ir?") son los ingredientes ms importantes de un dilogo
bien diseado y
sistema de navegacin. Sin embargo, siempre hay que tener en cuenta que los
navegadores ofrecen adicional

elementos de navegacin independientes del contexto ( "Volver", "marcador",

etc.), que puedan perjudicar la
destinado estructura de navegacin o hacerlo ineficaz.

El exceso de imaginacin en el desarrollo de la estructura bsica de un sistema de

navegacin es generalmente
en detrimento de su capacidad de uso. La mayora de los usuarios estn
familiarizados con muchos sistemas conocidos, de manera que stos
Los sistemas son fciles de entender. Una buena visin general se encuentra en la
literatura, por ejemplo, en van Welie de
Los patrones de navegacin (van Welie 2005).
Otros problemas con respecto a la facilidad de uso son elementos de navegacin
heterogneos. Heterogneo
elementos de navegacin son formas mixtas de orientacin espacial, por ejemplo,
una combinacin de

mens horizontales y verticales en el mismo nivel jerrquico, o variaciones en la

tcnica
aplicacin, por ejemplo, una combinacin de mens estticos que se pliegan
(vistas de rbol) abierto y dinmico
popup o mens desplegables. A primera vista, estos ltimos tienen la ventaja de
que no tenemos para reservar
lugar definido. Por desgracia, este beneficio por lo general resulta ser intil, porque
a menudo tenemos
para construir en una ayuda de orientacin adicional ( "Dnde estoy?"). Por el
contrario, una ayuda de este tipo es implcitamente
presente en la mayora de los mens estticos (resaltando la opcin seleccionada).
Otros elementos que deben ser usados con moderacin son las ventanas
emergentes. Las ventanas emergentes prcticamente
representar "pinchazos" en un modelo conceptual de una estructura de
navegacin orientada hipertexto. Entre

8 Pgina Web (http://arngren.net/) que se encuentra en

(http://www.webpagesthatsuck.com) el 5 de septiembre de 2005.
230 usabilidad de aplicaciones Web
otras cosas, que pueden hacer que los usuarios se pierdan. Un caso tpico es
cuando se cubre una ventana emergente
la ventana principal. El usuario piensa que l o ella todava est en la ventana
principal y decide navegar
espalda, que no desde el interior de la ventana actual.

El diseo de enlaces asociativos (incrustados en el texto) idealmente debe cumplir

con la
convenciones aceptadas y conocidas. En otras palabras, debemos tener razones
bien fundadas si
queremos dar la espalda a las representaciones estndar. Se recomienda utilizar el
resaltado especial
(por ejemplo, pictogramas ms pequeas) para enlaces que dejan el sitio Web
actual.

La regla general es que la simplicidad y la consistencia representan criterios de

calidad y de larga duracin, mientras
frescura y trumpery tcnica son cosas de moda con beneficios muy dudosos.
11.4.7 Multiculturalidad
disponibilidad global de la web se traduce en los requisitos de usabilidad
adicionales resultantes de la
la heterogeneidad cultural de los usuarios (ver seccin 1.3.2). Incluso las
aplicaciones web diseadas principalmente para
uso local no debe ignorar estos aspectos, pero pensar en las personas de otras
regiones que viven en
territorio de la aplicacin para evitar una prdida de clientes potenciales o herir los
sentimientos de los usuarios.
Aunque parece imposible ofrecer soluciones de validez general, la identificacin
de un "ms pequeo
denominador cultural comn "nos permite evitar grandes errores. Los siguientes son
algunos
ejemplos:
Colores: Los colores tienen diferentes significados en diferentes culturas. Esto
significa que debemos
evitar las caractersticas que se basan excesivamente en la capacidad expresiva
de los colores.
Smbolos: Cuando un conocido fabricante de calzado deportivo comenz a
utilizar un logotipo que era

supone que simboliza una llama en sus productos, todo el mundo rabe se sinti
ofendido,
debido a que la silueta del smbolo era muy similar a la letra rabe de Allah.
Idioma: Oscar Wilde diciendo "Inglaterra y Amrica - dos pases divididos por uno
lenguaje comn "ilustra las cuestiones lingsticas problemticas con humor. Es
extremadamente
importante hablar el idioma de sus clientes en la Web.

 Representacin de la informacin: Los usuarios de otros pases tienen

necesidades especiales relacionadas con las
campos de entrada para los nombres y direcciones, medidas y fechas, e
informacin acerca
normas de productos regionales (Nielsen 2005). conjeturas interpretativa debe ser
evitado.
Los ejemplos clsicos seran los formatos de fecha: 11/03/2003 habra 11 de marzo
en Europa, pero
3 de noviembre en los EE.UU.. Una simple correccin a 11 / Mar / 2003 puede evitar
este problema.
Para explicar cmo afectan las decisiones de diseo desconsiderados facilidad de
uso, observe la figura 11-5. Ante todo,
las personas extranjeras no tienen ninguna posibilidad de reservar en su idioma
nativo o utilizar el Ingls como un compromiso.
En segundo lugar, nombre y apellido se presentan en el orden equivocado, por lo
que los usuarios extranjeros no puede depender de
patrones de entrada comn. En tercer lugar, el texto adicional ". . . des Reisenden
"es redundante.
Las experiencias de aprendizaje pueden ser una ayuda valiosa en el desarrollo de
aplicaciones que tienen en cuenta la multiculturalidad.
Desde la Web ha conquistado el mundo en ms o menos comparables niveles,
experiencias
como resultado del uso de la Internet se puede comparar a nivel internacional. Por
ejemplo,

vamos a ver cmo se disean normalmente enlaces: partes de texto en un color

especfico (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 situacin es similar para los elementos ms complejos. Un campo de entrada,
seguido de un botn de
cualquier tipo se identifica como una simple bsqueda en contextos apropiados, y
la percepcin de las formas

11.4.8 Medidas generar Confianza

Hay un fenmeno notable en aplicaciones Web comerciales que normalmente no
suceden para el software convencional: los usuarios se orientan en la presencia en
Internet 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 mayora atribuido a problemas de usabilidad Web frecuente
(vase la seccin 11.3). En muchos casos, sin embargo, es debido a una falta de
confianza en el vendedor virtual, que se evita que usuarios de importante o de
riesgo actas. La literatura sugiere varias medidas ms o menos simples que pueden
ayudar a fortalecer la confianza de los usuarios en la confiabilidad de un
proveedor, incluyendo:

 La presentacin de una pgina "Acerca de Nosotros", la introduccin de la

empresa y su comercio electrnico procedimientos (trminos y condiciones de
negocio), quiz indicando cifras impresionantes, tales como nmero de
empleados, el nmero de puntos de venta "fsicos", etc .;
Informacin de contacto, como la direccin del mundo real postal, direccin de
correo electrnico, y (idealmente Llamada gratuita) el nmero de telfono;
Los mecanismos para ayudar a los clientes y establecer comunidades, tales
como salas de chat, (idealmente sncronos) anuncios, lista de preguntas
frecuentes, y referencias de clientes satisfechos;
Las actividades (y sus explicaciones) para asegurar la privacidad y
confidencialidad de los datos;
Las polticas como amigable con el cliente o garanta de devolucin del dinero,
etc .;
Tratamiento de los clientes (correos de confirmacin, etc.) despus de que
ponen su orden inicial de aumentar los pedidos posteriores (Nielsen, 2004); y
muchos ms - vase, por ejemplo, Nysveen y Lexhagen (2002), y KALUSCHA
Grabner-Krauter (2003). Algunos de estos elementos ya estn obligados por ley en
la UE.
11.4.9 otros criterios de diseo
Las animaciones deben evitarse, a menos que tengan la semntica especficas,
tales como simulaciones de procesos fsicos, ya que atraen la atencin de los
usuarios, los distrae de importancia informacin en una pgina web.
Si se utiliza correctamente, iconos apoyan en el reconocimiento de los usuarios del
sistema de informacin o funciones asociadas a ellos. Sin embargo, hay un riesgo
de confundir a los usuarios cuando los iconos no estn diseados o claramente
utilizado para las metforas inapropiadas. Los iconos deben estar sujetos a pruebas
de usuario, y siempre deben tener informacin de texto redundante, por ejemplo,
el ratn sobre las opciones emergentes.
Por ltimo, debemos mencionar un criterio muy importante "meta-diseo". Cada
aspecto del diseo

(Combinacin de colores, la disposicin, el conjunto de caracteres, ayuda a la

navegacin, etc.) tiene que ser usado consistentemente a travs de la toda
aplicacin web para mantener el esfuerzo de aprender a un mnimo. Idealmente,
la consistencia no es limitado a una aplicacin particular. Tambin se refiere a otras
aplicaciones comparables, o para la Web en su conjunto (vase tambin la
discusin del diseo del enlace).
En el cierre de este tema, hay que sealar que la literatura describe ampliamente
estos criterios, y una discusin completa ira ms all del propsito y alcance de
este libro. Adems, la observacin de incluso la lista ms completa de guas no
conduce necesariamente a aplicaciones utilizables, a menos que el proceso de
desarrollo integra las actividades orientadas a la usabilidad-discutidos en el
siguiendo.