Академический Документы
Профессиональный Документы
Культура Документы
Contenido
INTRODUCCIN .............................................................................................................................. 2
JUSTIFICACIN .............................................................................................................................. 4
OBJETIVO GENERAL .................................................................................................................... 5
Objetivos especficos ................................................................................................................ 5
CAPTULO 1. PROCESO DE DISEO Y EVALUACIN ......................................................... 6
CAPITULO 2. OPTIMIZANDO LA EXPERIENCIA DEL USUARIO ...................................... 10
CAPTULO 3. ACCESIBILIDAD.................................................................................................. 13
CAPTULO 4. HARDWARE Y SOFTWARE ............................................................................. 16
CAPTULO 5. PGINA DE INICIO ............................................................................................. 18
CAPTULO 6. DISEO DE PGINA .......................................................................................... 21
CAPTULO 7. NAVEGACIN ...................................................................................................... 24
CAPTULO 8. DESPLAZAMIENTO Y PAGINACIN ............................................................. 27
CAPTULO 9. ENCABEZADOS, TTULOS Y ETIQUETAS ................................................... 29
CAPTULO 10. ENLACES............................................................................................................ 32
CAPTULO 11. APARIENCIA DEL TEXTO .............................................................................. 35
CAPTULO 12. LISTAS ................................................................................................................ 38
CAPTULO 13. CONTROLES BASADOS EN PANTALLA ................................................... 40
CAPTULO 14. GRFICOS, IMGENES Y MULTIMEDIA .................................................... 44
CAPTULO 15. ESCRIBIENDO CONTENIDO WEB ............................................................... 47
CAPTULO 16. ORGANIZACIN DEL CONTENIDO ............................................................. 50
CAPTULO 17. BSQUEDAS ..................................................................................................... 53
INTRODUCCIN
El sexto captulo, se refiere a la estructura que deben tener las pginas web
para facilitar la compresin del contenido, desde el acomodo de los elementos, las
longitudes de las lneas de texto y el uso de marcos. En el sptimo captulo, se tratan
cuestiones de navegacin, es decir, del mtodo utilizado para encontrar informacin
dentro del sitio, y una buena forma de hacerlo es incluir mapas del sitio para que el
usuario conozca en que parte de l se encuentra. En el octavo captulo, se
2
recomienda a los diseadores que decidan desde al principio del diseo, si van a
utilizar pginas largas que requieren de desplazamiento, o pginas cortas en las
que se tienen que mover de una pgina u otra, as como sus pros y sus contra.
3
JUSTIFICACIN
Es importante conocer las buenas prcticas web desde que los diseadores
comienzan a hacer sus primeros proyectos web, esto permitir que se les arraiguen
y se conviertan en hbitos, esto les facilitar el diseo de futuros proyectos. Y no
solo a quienes se dedican profesionalmente al diseo web, sino que estas pautas
les servirn a personas que tienen conocimientos especficos en ciertos temas y
quieren compartir sus conocimientos por medio de la red, a aquellos que quieren
dar a conocer sus productos o servicios a mayor pblico, en fin hay muchos usos
que se les puede dar a las pginas web.
4
OBJETIVO GENERAL
Que los lectores conozcan las directrices fundamentales relacionadas al diseo web
y la usabilidad, para que puedan aplicarlas durante el proceso de diseo de sus
propios sitios o pginas web.
Objetivos especficos
5
CAPTULO 1. PROCESO DE DISEO Y EVALUACIN
Otra cuestin, es el uso del enfoque de diseo iterativo, esto con el propsito
de crear un sitio web ms til y usable; al cual se le podrn estar haciendo cambio
basados en los resultados de las pruebas, es decir, un proceso repetitivo de probar
y hacer cambios. La siguiente cuestin est relacionada a la anterior, y se refiere a
hacer evaluaciones antes y despus de hacer cambios, para asegurarnos si los
cambios realizados han hecho una diferencia en la usabilidad del sitio web.
6
proyecto requiere al menos 4 y en promedio 5 fuentes de informacin, evitando el
uso de intermediarios.
Para que un sitio web tenga altas probabilidades de ser visitado, se debe
asegurar de que se encuentra posicionado sobre las treinta referencias presentadas
desde el mejor motor de bsqueda. Para que esto se requiere que el meta-contenido
7
y los ttulos de las pginas sean apropiados, el nmero de enlaces al sitio web, as
como, el registro con los mejores motores de bsqueda (ver fig. 2).
8
Fig. 1 _ Pgina web con un mal diseo, con formatos y navegacin poco familiares.
Fig. 2_ Sitio web con altas probabilidades de ser visto, al introducir las palabras clave plantas
medicinales, aparece en la posicin #1 de los tres buscadores ms utilizados: Google, Yahoo y Bing.
9
CAPITULO 2. OPTIMIZANDO LA EXPERIENCIA DEL USUARIO
10
informacin adicional a la derecha o izquierda, se familiarizan con un proceso de
bsqueda, o en la manera que se presenta el calendario (listas desplegables, o
ventanas emergentes).
Reducir la sobrecarga de trabajo de los usuarios, para tal efecto, dejar que el
ordenador haga tantas tareas como sea posible, para que los usuarios se
concentren en las tareas que requieren de entrada y procesamiento humano, con la
finalidad de obtener el mximo provecho de los puntos fuertes de cada uno. Otra
recomendacin es, usar la terminologa de los usuarios en documentos de ayuda,
ya que existe una comprensin variada de los usuarios respecto a cmo se
denominan algunas caractersticas del sitio web, y en algunos casos la forma en
que se utilizan.
Algo que se debe evitar, es requerir que los usuarios realicen multitareas
mientras leen desde el monitor, esto podra ralentizar el rendimiento de su lectura,
generalmente, los usuarios pueden leer desde el monitor con mayor rapidez que
desde el papel, mientras no se les requiera de otras tareas que involucren recursos
de memoria de trabajo mientras leen. Otro punto, es realizar el diseo tomando en
cuenta las limitaciones de memoria de trabajo de los usuarios, stos pueden
11
recordar relativamente pocos elementos de informacin para un corto periodo de
tiempo.
Fig. 3_ Esta pgina web no se provee de diferentes formatos de medidas en peso y volumen.
Fig. 4_ En esta pgina, se proporciona la opcin de imprimir, enviar por correo o guardarla en PDF.
12
CAPTULO 3. ACCESIBILIDAD
Los sitios web deberan ser diseados para asegurar que todo el mundo, incluyendo
personas con dificultades, visuales, auditivas y para realizar movimientos precisos,
puedan utilizarlos. En todos los sitios web del gobierno de EU, deben cumplir con
las normas federales de la seccin 508. En este captulo se mencionan las
directrices relacionadas a la accesibilidad.
La primera se refiere, a que cuando se est diseando un sitio web para el gobierno
de los EU, se debe asegurar que se cumple con los requisitos de la seccin 508 de
la Ley de Rehabilitacin. Se calcula que alrededor del ocho por ciento de la
poblacin de usuarios tiene una dificultad que puede hacer que el uso tradicional de
un sitio web les resulte difcil o imposible.
13
estas pginas equivalentes se estn actualizando con frecuencia y que contienen la
misma informacin que en la pgina original.
14
Fig. 5_ El contenido de esta pgina de diario, puede ser accesible desde diferentes tipos de
dispositivos.
Fig. 6_ Los colores brillantes y el parpadeo veloz que tiene esta pgina de inicio, afecta hasta a los
usuarios comunes, con mayor razn a personas con epilepsia.
15
CAPTULO 4. HARDWARE Y SOFTWARE
Los diseadores no siempre pueden hacer lo que les viene en mente. As como, los
diseadores consideran las necesidades especficas de informacin de los
usuarios, tambin deben considerar las restricciones que stos imponen a ellos
respecto al hardware, software y la velocidad de conexin a internet. Debido a varias
limitantes no se puede disear para todos los usuarios, por lo que se debe identificar
el hardware y software utilizados por su audiencia primaria y secundaria y disear
para maximizar la efectividad de su sitio web.
16
Fig. 7_ Sistemas operativos ms comunes en la actualidad.
17
CAPTULO 5. PGINA DE INICIO
La pgina de inicio debe ser diferente a la de otros sitios web y causar una buena
impresin a todos los que la visiten, as como, proveer un acceso fcil a cada pgina
del sitio web. En trminos de transmitir calidad, la pgina de inicio probablemente
es la pgina ms importante de un sitio web, tal y como lo demuestra un estudio en
el que se pregunt a los usuarios si encuentran alta calidad en los sitios web, en la
que cerca de la mitad de las veces los participantes solamente miraron la pgina de
inicio.
Otro aspecto, es el referente a que se debe asegurar que una pgina de inicio
luzca como tal, es decir, que posea las caractersticas que un usuario esperara de
una pgina de inicio y que incluya acciones tales como: encontrar enlaces
importantes, acceder al mapa del sitio o ndice, hacer bsquedas, entre otras (ver
fig. 9). As como, el mostrar las opciones ms importantes en sta pgina, ya que
los usuarios no deberan requerir hacer clic en una pgina de segundo o tercer nivel
para descubrir la gama completa de opciones del sitio web.
18
Una accin valiosa, es el anunciar a los usuarios los cambios importantes en
un sitio web, para no tomarlos por sorpresa y que no sepan qu hacer de repente al
enfrentar una nueva estructura en la navegacin del sitio. Una manera de hacerlo,
es comunicar a los usuarios previamente de los cambios que se harn y la fecha en
que se aplicarn, as como, que la informacin contine disponible en el sitio.
Tambin podra ser til si se les informa de cambios relevantes de otros lugares en
el sitio web, por ejemplo, si surgen cambios en las polticas de compra,
proporcionarles una notificacin de esto en la pgina de pedido.
19
Fig. 9_ Esta pgina de inicio, posee todas las caractersticas propias de ella, tiene un rea para
bsqueda, enlaces a otras pginas, los temas principales se encuentran en la barra superior del
men, el logo del sitio funciona como enlace a la pgina principal, as como en las dems pginas
tambin se encuentra este acceso directo.
Fig. 10_ Esta pgina tiene un mal diseo, su longitud se desborda de la pantalla completa, adems
de estar muy saturada y no distinguirse claramente la barra de mens.
20
CAPTULO 6. DISEO DE PGINA
Todas las pginas web deberan ser estructuradas para facilitar la comprensin, lo
cual incluye poner las longitudes de pgina apropiadas, por lo general, las pginas
ms cortas son utilizadas en las pginas de inicio y de navegacin para que no haya
la necesidad de desplazarse y puedan ser consultadas rpidamente, y las de
longitud mayor a 1 facilitan la lectura ininterrumpida, especialmente para contenido
de pginas, en donde la barra de desplazamiento indica si hay ms informacin
debajo.
21
pgina. Particularmente en las pginas de navegacin, la mayora de las opciones
principales deben ser visibles sin o con un mnimo de desplazamiento (ver fig. 11).
22
Fig. 11_ Esta pgina de inicio, es un caos total, no se puede distinguir la informacin importante.
Fig. 12_ Los elementos de sta pgina web, se encuentran perfectamente alineados
23
CAPTULO 7. NAVEGACIN
24
ubicando consistentemente pestaas, encabezados, listas, bsquedas, mapas de
sitio, etc. Se debe ubicar los elementos crticos de navegacin en lugares que
sugieran la posibilidad de hacer clic, por ejemplo, las listas de las palabras que se
encuentran en paneles derecho o izquierdo, asumen ser enlaces.
Cuando utilice pestaas, debe asegurarse de que las etiquetas de stas son
claramente descriptivas de su funcin o su destino, que permitan al usuario hacer
selecciones sin errores, cuando las etiquetas de pestaas no se pueden aclarar
debido a la falta de espacio, es mejor no utilizarlas. De la misma manera, deben ser
colocadas en la parte superior de la navegacin y verse como clickables, con una
apariencia de pestaas del mundo real, es decir, deben verse como aquellas que
se encuentran en un cajn de archivos.
Las pginas de navegacin deben ser cortas y no requerir que los usuarios
deban desplazarse, la informacin debe ser presentada en una sola pantalla para
evitar que el usuario suponga que la parte inferior de la pantalla es el final de sta,
y no hagan el intento de avanzar para encontrar ms opciones de navegacin (ver
fig. 14).Tambin, se deben proporcionar glosas (texto corto explicativo) para ayudar
a los usuarios a seleccionar los enlaces correctos, ya que stas presentan una vista
previa de la informacin detrs de un enlace; las glosas deben ubicarse cerca del
enlace pero no colocarse en donde perturbe el texto principal.
25
Fig. 13_ En esta pgina, se puede visualizar el mapa del sitio web, para que el usuario pueda ver
todas las pginas que contiene el sitio, y determinar en qu parte de l se encuentra.
Fig. 14_ La pgina muestra todos los elementos principales en una sola pantalla, sin necesidad de
que el usuario se desplace para ver el resto de los temas.
26
CAPTULO 8. DESPLAZAMIENTO Y PAGINACIN
Al comienzo del proceso de diseo, los diseadores deben decidir si van a utilizar
la paginacin (en pginas cortas) o desplazamiento (en pginas largas), esto son
base en consideraciones de los principales usuarios y el tipo de tareas que
desarrollan. Como primera regla, se debe eliminar la necesidad del desplazamiento
horizontal, ya que es una manera lenta y tediosa para ver la totalidad de la pantalla
(ver fig. 15), sin embargo, algunas pginas pueden requerir este desplazamiento si
la resolucin de su monitor en menor que la utilizada por los diseadores.
27
Fig. 15_ En esta pgina, la navegacin se hace horizontalmente, sin embargo, no se muestra una
barra de desplazamiento, este se hace mediante el rotador del ratn, lo cual es un inconveniente
para los usuarios inexpertos, porque como sabran que solo hay esa manera de desplazarse.
Fig. 16_ En esta pgina, se resaltan los elementos principales, para facilitar el desplazamiento de
los usuarios.
28
CAPTULO 9. ENCABEZADOS, TTULOS Y ETIQUETAS
Tambin las etiquetas incluyendo los enlaces, debern ser descritos con
precisin y claridad, de manera que reflejen la informacin y elementos incluidos en
cada categora para ser entendidos por el usuario comn; al igual que en los
encabezados, la descripcin debe ser especfica para evitar ambigedades,
evitando utilizar enunciados similares que compliquen la identificacin de cada
elemento. Al igual, los encabezados de las filas y columnas de una tabla deben ser
claros y concisos y por supuesto, tambin su descripcin debe estar relacionadas
con la informacin de las celdas para su fcil identificacin.
En cuanto a los ttulos, tambin se requiera que tengan una descripcin clara,
concisa y nica para cada pgina del sitio, sobre todo tomando en cuenta que, los
motores de bsqueda utilizan los ttulos de las pginas para identificar pginas con
la informacin que solicitan los usuarios a travs de ellos. Los ttulos de las pginas
no deben ser iguales a la de otras pginas, para permitir que sean diferenciadas por
el usuario durante su bsqueda, as como el que los ttulos deben ser congruentes
con el contenido de las pginas.
29
o aquellos que rebasan un lmite o no cumplen con cierto criterio. Esta acentuacin
es ms til cuando se hace moderadamente para no saturar la visualizacin del
usuario, as como el que tenga una distribucin relativamente uniforme.
Los usuarios por naturaleza, siempre tratan de simplificar sus opciones, por
lo que los diseadores deberan de proveer maneras de reducir estas opciones lo
ms eficiente posible, presentadas con claridad para que ellos puedan enfocar su
atencin en la opcin que consideren ms importante. Tambin debe utilizarse un
orden HTML adecuado para los encabezados, esto permitir a los usuarios
comunes y a los de asistencia de tecnologa a tener una idea de la jerarqua de la
informacin que se presenta en la pgina (ver fig.18).
Fig. 17_ Los ttulos del men son bastante descriptivos, as como los enlaces del centro, cualquier
rea es clickeable, desde la imagen, el encabezado y la sntesis.
30
Fig. 18_ En esta pgina web, los elementos no son presentados con claridad, ni con un orden
adecuado, adems de estar en un nivel inferior al de la publicidad.
31
CAPTULO 10. ENLACES
Evite confundir a los usuarios, por lo que se debe asegurar que las etiquetas
de los enlaces son significativas, entendibles, lo suficientemente descriptivas y
fciles de diferenciar por stos, ms que enfocarse al entendimiento del diseador.
Adems, deber ser compatible el nombre del enlace con el destino de la pgina,
es decir, que debe haber una relacin congruente entre la descripcin del enlace y
la informacin presentada en la pgina a la que se direcciona. Tambin, deber
32
evitarse el utilizar el mismo nombre de enlace para dos o ms destinos diferentes,
esto puede confundir a los usuarios.
De acuerdo a un estudio, los usuarios tienden a suponer que los enlaces los
llevarn a otra pgina del mismo sitio web, por tal motivo, se les debe indicar cuando
se trate de un enlace interno o de un externo, una manera de hacerlo es colocar la
URL del enlace externo para alertar al usuario que saldr del sitio web. Tambin se
encontr, que es mejor utilizar el sealar y hacer clic que pasar el ratn sobre, a
la hora de seleccionar los elementos de un men cascada, ya que esta accin lleva
18 % menos tiempo, provoca menor nmero de errores y es el preferido por los
usuarios.
33
Fig. 19_ En esta pgina web, los enlaces son claramente identificables, se encuentran en coloracin
azul y los de la parte superior tienen forma de pestaa.
Fig. 20_ Esta pgina web que habla de los sitios mal diseados, tambin este lo est. Pues ese que
parece un enlace no lo es, no se puede clickear, adems con problemas para mostrar la imagen.
34
CAPTULO 11. APARIENCIA DEL TEXTO
35
Tambin debe evitarse saturar de elementos, caractersticas o funciones
para atraer la atencin de los usuarios, esto puede provocar el efecto contrario;
estos deben utilizarse con moderacin y solo cuando sea apropiado, por ejemplo:
los efectos de movimiento son los ms efectivos para llamar la atencin, pero se
debe tener cuidado, porque si se expone ms tiempo del necesario puede molestar
a los usuarios o distraerlos de la informacin del sitio. Los objetos grandes,
particularmente las imgenes llaman la atencin antes que otros de menor tamao,
empero algunas veces son interpretados por los usuarios como publicidad o
decoracin por lo que trataran de evitarlos.
Fig. 21._ En esta pgina web, el texto es color negro sobre un fondo blanco y liso, as como un
espaciado adecuado entre caracteres, lo que le da el contraste necesario para propiciar un mayor
rendimiento de lectura.
36
Fig. 22._ En esta pgina web, los colores utilizados, tanto en el texto como el fondo, son muy
inapropiados porque ralentizan la lectura y cansa la vista al poco tiempo de estar leyendo, entre otros
detalles de diseo.
37
CAPTULO 12. LISTAS
Las listas con muy comunes de encontrar en los sitios web, en este captulo se
describen algunas caractersticas que deben contener las listas para maximizar el
rendimiento del usuario. La primera es concerniente al ordenamiento de los
elementos de la lista, que deben organizarse de manera que faciliten el uso del sitio
web, asegurndose primero de que el sitio est formateado para apoyar ese orden,
y el de las dems pginas; como ejemplo, las listas de elementos, conjunto de
vnculos y una serie de pestaas estn en un orden significativo para el usuario, si
no hubiera un orden obvio, se debe organizar alfabtica o numricamente.
Se debe preferir el utilizar listas verticales, que el texto continuo; este formato
facilita la exploracin, as mismo, se ha demostrado que a los usuarios les lleva un
20% ms tiempo explorar una lista horizontal que una vertical. Tambin, debe
proporcionarse un encabezado introductorio a cada lista, para permitir al usuario
entender con facilidad de qu tratan los elementos de la lista y cmo se relacionan
entre s, para ello, stas debern ser fciles de explorar y de entender para ello se
puede disponer del uso de etiquetas significativas, colores de fondo eficaces, bordes
y espacios en blanco para que los usuarios puedan identificar que de trata de una
lista discreta (ver fig. 23).
Se debe evitar numerar las listas comenzando por el cero, las secuencias
para contar personas debern comenzar con el nmero uno. Al ordenar los
elementos de la lista, los de mayor relevancia debern ser colocados en la parte de
arriba, puesto que un estudio muestra que los usuarios tienden a mirar de uno a tres
elementos de la lista o tan pronto como ven algo relevante de la lista; de igual modo,
la primer letra de la primer palabra de cada elemento de la lista, deber escribirse
con mayscula (solo esa), a no ser que otra palabra del elemento de la lista se
escriba con mayscula.
El estilo de las listas deber ser el apropiado para cada caso, por ejemplo, si
se trata de elementos que presentan igual valor o estatus, es mejor utilizar lista con
vietas, pues eso indica que no existen una secuencia, si se trata de elementos que
38
justifiquen cierto orden especfico se puede utilizar las listas numeradas para
denotar que cada elemento tiene un valor ascendente, especialmente, cuando se
trate de instrucciones.
Fig. 23._ En esta pgina web se muestra una tabla con formato vertical y con encabezados para
cada columna, con bordes y espacios en blanco para que el usuario pueda comprender bien el
contenido.
Fig. 24._ En esta pgina web, los elementos de ordenan de forma horizontal, y sin ningn orden de
los elementos, ni encabezados que permitan distinguir bien el contenido de la tabla.
39
CAPTULO 13. CONTROLES BASADOS EN PANTALLA
Los controles basados en pantalla, a veces conocidos como widgets, suelen ser
requeridos por el usuario para interactuar con un sitio web, al utilizarlos deber
tenerse la precaucin que le son familiares al usuario, entre los ms comunes se
encuentran: pulsadores, botones de radio, casillas de verificacin, listas
desplegables y campos de entrada. Es importante hacer una distincin entre los
campos de entrada de datos opcionales de los obligatorios, esto se puede hacer
colocando un asterisco antes de la etiqueta del campo de entrada, o colocando la
palabra requerido a un lado de la etiqueta del campo de entrada.
40
elementos de datos en otra pgina, de ser posible adopte reglas de etiquetado
consistente, por ejemplo evitar usar palabras o frases cortas para una algunas
etiquetas y oraciones cortas para otras, o usar verbos para algunas y sustantivos
para otras.
Nunca debe utilizar un solo botn de radio, mnimo deben ser dos, en caso
que el usuario no requiera activar cualquiera de las opciones, se debe proporcionar
una etiqueta que diga ninguna. Cuando se requiriera hacer una seleccin
mutuamente excluyente, es decir, que se seleccione solo una opcin, en preferible
utilizar los botones de radio, ya que estos permiten un mejor rendimiento que la lista
abierta o desplegable, as mismo, cuando sea apropiado asignar una de las
opciones de los botones de radio como predeterminado. Cuando se desee permitir
a los usuarios seleccionar ms de una opcin de la lista, se deben utilizar casillas
de verificacin.
No debe asumirse que los usuarios estn familiarizados con todos los widgets
disponibles en el sitio web, algunos, sobre todo lo de mayor edad no saben usar un
cuadro de entrada desplegable, es por eso, que los diseadores deben hacer
pruebas de usabilidad de rendimiento y aceptabilidad de los widgets para
asegurarse de que no confunden o ralentizan a los usuarios. Adems, se debe
disear las operaciones de entrada de datos con un nico mtodo de entrada, es
decir, no requerir que los usuarios ingresen datos utilizando en teclado y luego
cambiar al uso del ratn, pues esto reduce su velocidad de entrada.
41
Cuando se deban ingresar datos largos, es mejor si se hace una particin de
los elementos de los datos para reducir el riesgo de errores de entrada de los
usuarios, por ejemplo, cuando se tenga que ingresar nmeros de telfono, o de
seguridad social, es ms fcil de verificar si se ingresan en grupos de tres o cuatro
caracteres, a lugar de verlos en un solo grupo.
Evite hacer que los cdigos introducidos por el usuario sean sensibles a las
maysculas y minsculas, a no ser que exista una razn vlida para hacerlo; por
ejemplo, para mayor seguridad de las contraseas. As como, evitar obligar a los
usuarios a colocar el puntero al inicio del primer campo de un formulario o hacer clic
para activar el campo, los diseadores deberan programar la colocacin del cursor
al comienzo del primer campo de entrada de datos. Tambin se les debera
proporcionar una funcionalidad de auto-tabulacin para los usuarios frecuentes para
reducir significativamente los tiempos de entrada de datos.
42
shift, o a precisar entre letras maysculas y minsculas, esto les demanda ms
atencin y tiempo adicional, en lugar de eso, debera incluirse al inicio del campo de
entrada los smbolos requeridos. Algo que ayuda a acelerar rendimiento, es el
utilizar campo de entrada de datos en lugar de seleccionar de los cuadros de lista,
en un estudio se muestra que la introduccin de datos es ms rpida y preferida por
los usuarios, sin embargo, estos tienden a provocar ms errores.
Fig. 26._ En esta pgina web, las etiquetas de estos campos es un poco confusa, el vuelo de ida
dice llegada y el vuelo de venida dice salida.
Fig. 26._ En este formulario se distingue claramente la etiqueta y el campo de entrada, porque se lo
coloc un color de fondo a la etiqueta para resaltarla.
43
CAPTULO 14. GRFICOS, IMGENES Y MULTIMEDIA
Deber usarse las imgenes con moderacin, slo cuando son crticos para
el xito del sitio, es decir, cuando le aaden valor y aumentan la claridad de la
informacin (los grficos aumentan los tiempos de descarga, por lo que deber valer
la espera del usuario) (ver fig. 27). Adems, se debe asegurar que las imgenes
transmiten el mensaje deseado, suele haber discrepancias sobre los que los
usuarios y los diseadores creen que es apropiado para transmitir un mensaje, los
usuarios eligen lo que les parece ms familiar, mientras que los diseadores lo que
les parece ms artstico. Cuando se trate de imgenes clickeables o de relativa
importancia, se deben etiquetar para ser fcilmente comprendidas por los usuarios
tpicos, asegurndose de que el texto asociado este muy cerca de las imgenes.
Los diseadores deberan tomar medidas, para asegurar que las imgenes
en el sitio web no ralentizan los tiempos de descarga de la pgina innecesariamente.
44
Un estudio inform que los usuarios calificaron una tardanza de hasta 5 segundos
como buena, pero una de ms de diez segundos la evaluaron como pobre, por lo
tanto, para acelerar los tiempo de descarga es mejor utilizar varias imgenes
pequeas en lugar de una nica imagen grande, minimizar el nmero de colores
diferentes en las imgenes y poner una etiqueta especificando las dimensiones en
pixeles.
45
Fig. 27._ En esta pgina web las imgenes saturan el sitio, adems de que el logo de la empresa
est ubicado en un lugar poco comn y no es fcil distinguir que se trata del logo.
Fig. 28._ En estas grficas se proporcionan los datos completos debajo de la barra y por encima los
porcentajes relacionados.
46
CAPTULO 15. ESCRIBIENDO CONTENIDO WEB
47
de lo que debe evitar, sin embargo, si existe una alta posibilidad de realizar un paso
de manera equivocada o si las consecuencias son terribles, la voz negativa puede
ser ms clara para el usuario. Por otro lado, se debe limitar el nmero de palabras
y oraciones en un prrafo para optimizar la comprensin lectora, una oracin no
debera contener ms de veinte palabras, y un prrafo no ms de seis oraciones,
as mismo, no colocar mucha prosa en las pginas de navegacin, cuando hay
muchas palabras en stas pginas, los usuarios tiende a buscar palabras
especficas o empiezan a hacer clic en diferentes enlaces, en lugar de leer el texto
asociado al enlace.
Fig. 29._ Esta pgina web es un ejemplo de buen contenido, n los primeros prrafos se describe el
tema principal, y se resaltan en negrita los aspectos importantes.
48
FIg. 30._ En esta pgina web hay mucha prosa, y los prrafos estn demasiado largos, lo que hace
cansada y aburrida la lectura.
49
CAPTULO 16. ORGANIZACIN DEL CONTENIDO
Una vez que nos aseguramos que el contenido es til, est bien escrito y en un
formato que es adecuado para la web, es importante cerciorarnos de que la
informacin est claramente organizada. En algunos casos, el contenido de un sitio
web puede organizarse de mltiples maneras para adaptarse a diversas audiencias.
50
La informacin y funciones relacionadas debern agruparse para reducirle al
usuario el tiempo de bsqueda, stos asumen que los ttulos cercanos entre s
pertenecen al mismo tema, y si el texto comparte el mismo color de fondo se
percibir como si estuviera relacionado. La codificacin con colores le permite al
usuario percibir patrones de relacin entre artculos, mientras que una diferencia de
color preminente los har ver diferentes; aunque los usuarios pueden distinguir
hasta diez colores asignados a diferentes categoras, no es seguro utilizan ms de
cinco colores para categorizar.
51
visualizaciones tcnicas. Para decidir si se utilizar una u otra presentacin de los
datos, pueden hacerse pruebas de operacin para ayudar a determinar cuando los
usuarios se benefician de la presentacin en una tabla, grfica o en una
visualizacin.
Fig. 31._ En esta pgina se facilita la navegacin, debido a que tiene ttulos claros y una buena
estructura, lo que permite encontrar la informacin fcilmente.
Fig. 32._ En esta pgina web la informacin no tiene una estructura muy clara, y el orden de los
elementos dificulta encontrar la informacin
52
CAPTULO 17. BSQUEDAS
53
Adems, se pueden proporcionar a los usuarios plantillas de bsqueda para
mejorar sus consultas de bsqueda, lo cual consiste por ejemplo, que la plantilla
este organizada jerrquicamente con palabras clave predefinidas que podran
ayudar a restringir los conjuntos de bsqueda inicial y mejorar la relevancia de los
aciertos devueltos.
Fig. 33._ Este sitio web trata de temas especializados, por lo que tiene una funcin que permite hacer
bsquedas avanzadas.
Fig. 34._ En este sitio web no se proporciona una opcin de bsqueda, a pesar de ser un sitio
gubernamental y de contener mucho contenido.
54
55