Instituto Tecnolgico de Parral

Ingeniera Web II

Traduccin: 2.2.3 Directrices de diseo

Profesor: Jorge Jacobo Aguirre Jimnez

Oscar Samuel Ramrez Vargas

12410483

2.2.3 Instrucciones de diseo

Aunque en este captulo se centra ms en los mtodos de ingeniera de la
usabilidad web, se ha dejado a sabiendas una lista completa de las directrices de
diseo especficas (que iran ms all del alcance de este libro; ver Instituto Nacional
del Cncer de 2003, Lynch y Horton 2002 en su lugar), queremos ilustrar la discusin
anterior seleccionando algunas pautas de diseo importantes y generalmente
aceptadas.
Tiempos de Respuesta
Para evitar que los usuarios de una aplicacin interactiva de tengan la
sensacin de perder la interactividad y el control, los tiempos de respuesta del
sistema en todos los pasos de interaccin tiene que estar por debajo de ciertos
umbrales asociados a los mecanismos de procesamiento de informacin 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). Despus de 8 a 10 segundos, los usuarios
generalmente comienzan a ocuparse en algo ms. 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 dgito se cubre slo el
tolerarse siempre si hay indicios de que la espera puede ser gratificante. Para las
aplicaciones Web, la observacin de tales valores de umbral es un desafo importante
en vista de las circunstancias tcnicas incalculables de las conexiones a Internet. Por
esta razn, se recomienda el disear pginas "ligeras". Con este fin, debemos limitar el
nmero de imgenes y otros elementos multimedia pesados por pgina, y los adems
de los mtodos de uso de compresin o para reducir su formato, la resolucin, o un
color de profundidad para reducir al mnimo el tamao de las imgenes. Si las
imgenes de alto volumen son inevitables, entonces se recomienda a primera
demostracin poner miniaturas y cargar las imgenes de las mismas slo a peticin
explcita del usuario. Como regla emprica, todo el volumen de una sola pgina no
debe superar aproximadamente. 50 Kbytes. Otro mtodo para acelerar la carga de un
sitio Web especifica las dimensiones de 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, 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
interaccin es muy grande, entonces debe cuidar ser llevado a mantener una
paginacin adecuado (tal como, por ejemplo, en la mayora de los motores de
bsqueda). De Esta reduce el volumen de datos (y los tiempos de espera para los
2

usuarios) en cada paso de la 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 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

Interaccin
Aparte de tiempo de respuesta de un sistema, los usuarios tienen que gastar
tiempo para la navegacin y la entrada es tambin importante para la eficiencia global
del sistema. Las aplicaciones web tienen normalmente que apuntarse y hacer clic en
las interfaces, con actividades del ratn que desempean un papel dominante. Las
interfaces eficaces de este tipo deben minimizar las distancias a elementos
seleccionables. Al mismo tiempo, el tamao de los elementos no debe estar por debajo
de un cierto mnimo para garantizar que los usuarios (especialmente con
discapacidad visual) pueden dar clic con precisin. Si las aplicaciones Web requieren
la entrada del usuario en un teclado (por ejemplo, para rellenar formularios),
deberamos tratar de evitar cambios frecuentes entre el ratn y el teclado, ya que
estos cambios se traducen en considerables retrasos. Por ltimo, tambin debemos
asegurarnos de 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 si para llegar a ciertos artculos o servicios
lleva ms de cuatro clics del ratn.
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 mnimo 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. Tambin debemos
utilizar otros factores, tales como el posicionamiento, diseo, etc., para destacar las
reas para varias razones. En primer lugar, no podemos estar seguros de que estarn
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 vdeo), y que los
colores se ven completamente diferente en cada tipo de dispositivo, por lo que los
3

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 el diferencias (ver
Figura 11-2).

Figura 2.11 Efectos de la visin limitada.

Esto es anlogo a los semforos; visualmente las personas con deficiencias no
entenderan la informacin del color (rojo, verde) si no hubiera informacin
semntica adicional (rojo siempre en la parte superior, verde siempre en la parte
inferior). La analoga de semforos tambin deja claro que si se utiliza correctamente
los colores se pueden proporcionar un valioso apoyo, por ejemplo, las seales rojas de
peligro, seales verdes que todo es bien. Por ltimo, tambin hay que tener en cuenta
las diferencias culturales en el significado de los colores (ver seccin 11.4.7).
Disposicin del texto
La lectura de texto en una pantalla es mucho menos eficiente que la lectura en
papel. Por esta razn, el texto debe ser cuidadosamente diseado, especialmente en
aplicaciones web con una gran cantidad de texto. Como muestra el ejemplo de la
figura 11-3 aclara, diseos de texto fijos deben evitarse para permitir la navegador
para adaptar la paginacin y el diseo a diferentes tamaos de ventana, y para
permitir al usuario seleccione su tamao de la fuente preferida (y tal vez el conjunto
de caracteres). Como ajuste bsico, sans-serif 7 caracteres

Figura 11-3 Ejemplo de mala disposicin del texto y el color contraste.

Tipos (por ejemplo, Verdana, una fuente especialmente diseado para la
representacin de pantalla) en un tamao adecuado de la fuente (por visualmente
usuarios discapacitados) deben ser seleccionados. Letras de molde y pequea
capitalizacin deben ser evitadas. Adems, el fondo de las pginas Web no debera
tener una estructura o patrn, porque esto puede afectar negativamente a la
legibilidad de 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 "escanear" para ciertos tpicos. En vista de este comportamiento, el texto en
general, debe ser conciso, expuesto en 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.
Estructura de la Pgina
Para asegurar una fcil orientacin dentro de una pgina, debemos evitar la
necesidad del desplazamiento horizontal, porque la lectura lnea por lnea significa
que los usuarios tienen que moverse permanentemente los contenidos de la ventana
5

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

perdonable". Sin embargo, la atencin debe tomarse a que el uso de cualquier
desplazamiento no afecta la eficacia y eficiencia de navegar a travs de una pgina.
Adems, bajo ninguna circunstancia debe mermarse la interaccin de importante
elementos, tales como mens, que se vuelven invisibles como resultado de
desplazamiento; estos elementos pueden tener que ser colocado de forma
redundante. Las encuestas han demostrado que una disposicin de columnas
orientadas similar al formato habitual de todos los das 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 discuti en la seccin 11.4.3 pero significa que los
elementos importantes, como los mens y elementos de navegacin, estn mejor
dispuestos en los mrgenes de la pgina izquierda y superior. En general, las pginas
no deben ser sobrecargadas. Adems, la forma en que los usuarios descremada a
travs de pginas es muy influenciada por la capacidad de la memoria a corto plazo,
en particular si se trata de una cuestin de encontrar la mejor correspondencia a un
elemento buscado ms que una coincidencia exacta, porque la mejor manera
preliminar correspondencias tienen que ser memorizado. La Figura 11-4 muestra un
ejemplo de demasiada informacin y mala estructura de la pgina. La estructura de la
pgina tambin debe permitir a los usuarios imprimir pginas. Si la impresin no es
posible 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 ser ofrecidos.
Estructura de la Navegacin
La navegacin en una aplicacin Web o sitio Web representa un criterio clave
de especial importancia para la facilidad de uso de una aplicacin o de un sitio. 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. Para este fin, es necesario transmitir un
modelo mental de la estructura de navegacin lo ms rpidamente posible,
permitiendo a los usuarios "a aprender de memoria 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?"), una informacin clara sobre
el contenido de los la pgina actual ("Qu puedo hacer yo o encuentro 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 debemos tener en cuenta que los navegadores ofrecen adicional
elementos de navegacin independientes del contexto ("Volver", "Favoritos", etc.), que
puedan perjudicar la destinado estructura de navegacin o hacerlo ineficaz.

Figura 4.11 Efectos del exceso de informacin y mala pgina structure.

El exceso de imaginacin en el desarrollo de la estructura bsica de un sistema
de navegacin es generalmente perjudicial para su facilidad de uso. La mayora de los
usuarios estn familiarizados con muchos sistemas conocidos, para que estos sistemas
sean fciles de entender. Una buena visin general se encuentra en la literatura, por
ejemplo, en van Welie de 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 abiertos (vistas de rbol) y dinmica popup o mens
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
intil, porque a menudo tenemos para construir en una ayuda de orientacin
adicional ("Dnde estoy?"). En contraste, una ayuda de este tipo es implcitamente
presente en la mayora de los mens estticos (resaltando la opcin seleccionada).
Otros elementos que se deben utilizar con moderacin son ventanas emergentes. Las
7

ventanas emergentes prcticamente representar "pinchazos" en un modelo

conceptual de una estructura de navegacin hipertexto orientada. Entre otras cosas,
pueden hacer que los usuarios se pierdan. Un escenario tpico es cuando una ventana
emergente cubre la ventana principal. El usuario piensa que l o ella todava est en la
ventana principal y decide navegar espalda, que no logra desde dentro de la ventana
actual. La disposicin de los hipervnculos asociativas (incrustados en el texto) lo ideal
sera que cumplir con la convenciones aceptados y conocidos. En otras palabras,
debemos tener razones fundadas si queremos dar la espalda a las representaciones
estndar. Se recomienda utilizar el resaltado especial (por ejemplo, pequeos
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 relumbrn tcnica 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 seccin
1.3.2). Incluso las aplicaciones web diseadas principalmente para uso local no debe
ignorar estos aspectos, pero pensar en la gente 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 caractersticas que se basan excesivamente en el poder
expresivo de los colores.
Smbolos: 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 smbolo era muy similar
a la letra rabe para Allah.
Idioma: Oscar Wilde diciendo "Inglaterra y Estados Unidos - 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 campos de entrada para los nombres y
direcciones, medidas y fechas, y la informacin sobre las normas de productos
regionales (Nielsen 2005).

Los ejemplos clsicos seran 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 prevenir este problema. Para explicar cmo las decisiones de
diseo 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 ingls 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 comn. 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 ms o menos comparables niveles,
experiencias como resultado del uso de la Internet se puede comparar a nivel
internacional. Por ejemplo, echemos un vistazo a cmo los vnculos se disean
normalmente: 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

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

problemas de usabilidad (traducciones en la izquierda se aaden para este libro).
mencionados anteriormente hace que las personas reconocen la combinacin de
varios elementos como una sola unidad. Buenos ejemplos son las pginas de Yahoo de
Japn, Singapur o Corea.
Medidas Generadoras de 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
lnea 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
frecuente Web (ver seccin 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 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 "About Us", la introduccin de la empresa y de
los procedimientos de su comercio electrnico (trminos y condiciones de negocios),
tal vez indicando cifras impresionantes, como nmero de empleados, el nmero de
puntos de venta "fsicos", etc .;
Informacin de contacto, como la direccin postal del mundo real, direccin
de correo electrnico, y el nmero de telfono (idealmente gratuito);
Mecanismos para ayudar a los clientes y establecer comunidades, tales como
salas de chat, (a ser posible sncronos) a travs 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 polticas como cliente-amistoso o garanta de devolucin del dinero, etc .;
Tratamiento de los clientes (correos de confirmacin, etc.) despus de que
ponen su orden inicial a aumentar los pedidos posteriores (Nielsen 2004); y muchos
ms - ver, por ejemplo, Nysveen y Lexhagen (2002), KALUSCHA y Grabner- Krauter
(2003). Algunos de estos elementos ya estn obligados por la ley en la UE.
Otros Criterios de Diseo
Las animaciones deben evitarse, a menos que tengan la semntica especfica,
tales como simulaciones de procesos fsicos, ya que atraen la atencin de los usuarios,
los distrae de otra importante informacin en una pgina Web. Si se utiliza
correctamente, iconos apoyan usuarios en el reconocimiento de las funciones de
informacin o sistema asociados a ellos. Sin embargo, hay un riesgo de confundir a los
usuarios cuando iconos no estn claramente diseados o utilizados para metforas
inapropiadas. Los iconos deben estar sujetos a las pruebas de usuario, y siempre
deben tener informacin de texto redundante, por ejemplo, el ratn sobre las
10

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

"meta-diseo". Todos los aspectos de diseo (Combinacin de colores, la disposicin,
el conjunto de caracteres, ayuda a la navegacin, etc.) tiene que ser usado
consistentemente a travs de la aplicacin Web entero para mantener el esfuerzo de
aprendizaje a un mnimo. Idealmente, la consistencia no es limitada a una aplicacin
particular. Tambin se refiere a otras aplicaciones comparables, o para la Web en su
conjunto (vase tambin la discusin del diseo de la articulacin). En el cierre de este
tema, debemos sealar que la literatura describe estos criterios ampliamente, y una
discusin completa ira ms all de la finalidad y el alcance de este libro. Adems,
observando incluso la lista ms completa de guas no conduce necesariamente a
aplicaciones tiles, a menos que el proceso de desarrollo integra las actividades de
usabilidad orientada discutidas.

11