Universidad Metropolitana Introducción a la Computación Recomendaciones para el diseño eficiente...

Universidad MetropolitanaIntroducción a la Computación

RecomendacionesRecomendaciones

para el diseño eficientepara el diseño eficiente

de sitios webde sitios web

Introducción a la ComputaciónRecomendaciones para el diseño eficiente de sitios web

Objetivos

Disponer de una guía de consejos útiles para diseñar y desarrollar sitios web eficientes.

Formar un criterio propio sobre los elementos más adecuados para presentar un tema a través de un sitio web.


Contenidos

Recomendaciones generales.

Recomendaciones sobre los elementos que conforman las páginas web.


Recomendaciones generales

Es totalmente diferente comunicarse a través del tradicional medio impreso o la interacción personal, que hacerlo a

través del monitor de una computadora.

Por eso, durante el diseño de un sitio web, deben tenerse en cuenta los elementos asociados con la tecnología que se está

empleando.

A continuación se presentan algunos de esos elementos.



Telecomunicaciones: La comunicación a través de redes.

Debemos recordar que desconocemos la velocidad de conexión y capacidades de los equipos que poseen los usuarios. Se recomienda:

No elaborar páginas muy “pesadas”, es decir, páginas que ocupen muchos Bytes. Las sugerencias sobre el tamaño ideal varían, pero un lineamiento común es que cada archivo ocupe un máximo de 50 KB.

Las imágenes son los elementos que ocupan más espacio: Utilizar sólo las necesarias, para evitar que el usuario se canse de esperar.

Estructurar el sitio de forma que el usuario llegue a la información que busca con el menor número posible de clics.



Monitores: Una configuración para cada usuario.

Debemos recordar que desconocemos el tipo de monitor que tiene cada usuario y las características de su configuración. Se recomienda:

Verificar la visualización de nuestras páginas en distintos monitores y bajo diferentes configuraciones.

No elaborar páginas muy largas, que obliguen al usuario a desplazarse excesivamente hacia abajo.

Estructurar la información de forma que lo más significativo se muestre a primera vista en todas las opciones de monitores.



Navegadores: Variedad de programas y versiones.

Debemos recordar que cada usuario tendrá instalado el navegador de su preferencia. Se recomienda:

Evaluar cuidadosamente la conveniencia de usar la última tecnología en diseño de páginas web. Podríamos reducir considerablemente el grupo de usuarios con posibilidades técnicas de verla a través de su navegador.

La simplicidad en el diseño y la selección adecuada de herramientas, ampliará la cantidad de usuarios que podrán ver correctamente nuestro sitio web.



Hipertextualidad: La posibilidad de navegar por la información.

La navegación a través de información entrelazada, puede ocasionar confusión y desorientación en el desplazamiento. Para minimizar este efecto se recomienda:

Presentar índices/mapas de navegación claros y sencillos.

Mantener siempre presentes todos los botones de navegación para desplazarse a cualquier página de nuestro sitio web.

Usar el color y otros elementos visuales, para estandarizar secciones de nuestro sitio web.

Proporcionar formas de navegación por todo el sitio web, que no requieran utilizar el botón “Atrás” del navegador.



Propiedad intelectual: El derecho de otros.

Todos queremos recibir el justo reconocimiento por nuestro trabajo. La copia no autorizada de materiales creados por otra persona no sólo muestra falta de ética, sino que está penado por la Ley. Se recomienda:

Sólo publicar material de elaboración propia.

En caso de querer presentar material de otra persona, solicitar la autorización del autor. Puede hacerse hasta por correo electrónico.

Siempre que se utilice material de otra persona, debe citarse la fuente.

No publicar información sensible o confidencial. Copiar es muy fácil.



El objetivo: ¿Para qué va a servir esta página?

Debemos tener muy claro el objetivo que pretendemos lograr con la página web. De esto dependerá su diseño, su estructura y sus elementos.

Definir el propósito del sitio web. Algunos ejemplos son:

Informar.

Promover.

Proporcionar un servicio.

Comerciar usando medios electrónicos.

Combinaciones de los anteriores.



El contenido: ¿Qué quiero presentar a mis usuarios?

Los usuarios esperan encontrar información relevante y útil en los sitios web. La estructura de cada página depende del tema, de los objetivos, de los contenidos a presentar y de la audiencia a la que nos dirigimos. Se recomienda:

Definir el tema general que se tratará.

Determinar el perfil de la audiencia esperada.

Seleccionar los contenidos que se perciben como más relevantes para esa audiencia.

Expresar los contenidos en la estructura, el estilo y el idioma que mejor se adaptan a la audiencia .



La interacción: ¿Qué va a hacer el usuario?

Es importante determinar las acciones que el usuario podrá realizar con la página. Los objetivos y contenidos afectarán los niveles de interacción requeridos. Se recomienda:

Determinar los tipos de interacción necesarios para lograr los objetivos de la página.

Seleccionar cuidadosamente las herramientas para implementar cada uno de los tipos de interacción.

Mostrar instrucciones claras para que el usuario entienda lo que debe hacer y lo que se espera de él.



El URL: La vía de acceso.

Para llegar a nuestra página los usuarios deben ingresar un URL en su navegador. Para su selección se recomienda:

Emplear palabras o nombres que se asocien con el tema o contenido de la página. URLs tales como www.pkw03mhj2.com no dan ninguna pista y son difíciles de recordar.

Usar URLs que no sean demasiado largos. Si no se puede evitar, puede usarse un alias corto.



La página inicial: La primera impresión.

Lo primero que verá el usuario de nuestro sitio web, será la página inicial. Para su elaboración se recomienda:

Hacerla corta y de rápida descarga.

Incluir unas palabras de Bienvenida para los usuarios.

Especificar claramente el tema y los contenidos que trataremos.

Mostrar el mapa de navegación.

Proveer cualquier instrucción que el usuario deba seguir en la navegación.

Proporcionar una dirección de correo electrónico a la que el usuario pueda dirigir comentarios, sugerencias, preguntas, etc.



Las pruebas: Factor crucial para el éxito.

Los usuarios esperan que las páginas se muestren adecuadamente y les resultan muy molestos los errores. Durante el desarrollo del sitio web y cuando creemos haber concluido, es recomendable:

Hacer recorridos completos por el sitio web, incluyendo la activación de todos los enlaces, para asegurarse que funcionan bien.

Pedir a personas que no hayan participado en el diseño y desarrollo que hagan esos mismos recorridos, para darnos su opinión.

No publicar el sitio hasta que esté completo y probado. Los usuarios se molestan cuando reciben un mensaje de “En construcción” al activar un enlace.


Recomendaciones sobre los elementos

Los nombres de los archivos

Establecer un estándar para el uso de mayúsculas/minúsculas y respetarlo a lo largo de todo el sitio web.

Establecer un estándar para las extensiones en los nombres de archivos y respetarlo a lo largo de todo el sitio. (Ej: .html o .htm)

No utilizar letras acentuadas, espacios en blanco o caracteres especiales tales como ñ, ç, “, °, ¬, ~

No cambiar el nombre de un archivo, una vez que se ha publicado. Podríamos olvidar actualizar algún enlace con el nuevo nombre y se perdería el acceso a esa página.



La longitud de las páginas

Componer la información en páginas cortas y concisas, sin omitir nada relevante. Leer durante mucho rato en un monitor de computadora cansa la vista y puede resultar aburrido.

Si la información relevante de un contenido es larga, dividirla en varias páginas (no más de 4 o 5).

Nunca emplear letra demasiado pequeña, como estrategia para incluir más información en menos espacio. La letra pequeña cansa aún más.

Emplear “cuadros emergentes” para explicaciones breves e información complementaria. El usuario los activará si lo desea.



El diseño de textos (1/2)

Emplear párrafos cortos que faciliten la lectura.

Destacar sólo las palabras más importantes, mediante el uso del color o las herramientas tipográficas (negrillas, cursiva, etc.)

No llevar el texto hasta el mismo borde del monitor. Es recomendable mantener márgenes en todos los bordes.

Emplear letras de tamaños medios y de los tipos más comunes. El usuario sólo podrá visualizar los tipos de letras que tenga instalados en su computador. Si queremos usar letras especiales, debemos convertirlas en imágenes para asegurarnos de que se verán bien.

Ser consistente en el uso de la terminología, es decir, llamar a las cosas por el mismo nombre en todo el sitio web.



El diseño de textos (2/2)

No hacer uso excesivo de las mayúsculas, especialmente en bloques de texto, porque dificulta la lectura.

No usar el subrayado como estrategia para destacar palabras. Los usuarios asocian las palabras subrayadas con enlaces a otras páginas.

No emplear textos o imágenes parpadeantes. Resulta muy molesto durante la lectura.

Es recomendable acompañar el texto con imágenes, pero debemos tener en cuenta que hacen más lento el acceso.

Si queremos resaltar un párrafo, se recomienda hacerlo ampliando los márgenes o usando el color.

La ortografía, gramática y redacción deben ser impecables.



El diseño de enlaces

Se recomienda usar palabras relacionadas o frases cortas como enlace.

Se ve mejor esto: “Para más información vea la Guía de diseño web”

Que esto: “Para ver la Guía de diseño web, haga clic aquí”

Las palabras muy cortas requieren precisión para activar el enlace. En caso de usar una palabra se recomienda que sea larga.

No emplear en el texto los mismos colores que identifican los enlaces. Puede resultar confuso.

Indicar al usuario a dónde lo va a llevar cada enlace.

Para los enlaces que llevan a otros sitios web es recomendable usar el propio URL. Así el usuario puede conocerlo y recordarlo.



Los archivos que no son html

Estos archivos requieren que el usuario disponga localmente de la aplicación necesaria (Ej: Word, PowerPoint, Excel). Se recomienda indicar al usuario la aplicación que necesitará para visualizarlos.

Si la aplicación no es de uso común y tiene la posibilidad de descargarse gratuitamente, se recomienda proporcionar un enlace a la página de descarga de la aplicación.

Es recomendable que estos archivos se activen en una nueva ventana. Así el usuario conserva la página de origen y no tiene necesidad de usar el botón “Atrás” o quedarse inactivo mientras el archivo se despliega.



Las imágenes (1/3)

Generalmente, mientras más calidad tiene una imagen más tiempo toma mostrarla. Se deben seleccionar cuidadosamente y establecer un balance entre la necesidad de usarla y los efectos para el usuario.

Se recomienda usar imágenes en formatos que apliquen algoritmos de compresión eficientes. Imágenes muy buenas podrían ocupar poco.

Para imágenes grandes, se recomienda mostrar una miniatura y ofrecer un enlace para mostrarla en su tamaño real. Así sólo esperarán por ella los usuarios que así lo decidan.

No es eficiente guardar una imagen múltiples veces en el servidor. Si queremos usarla en más de una página, la guardamos una sola vez y hacemos referencia a ella donde sea necesario.



Las imágenes (2/3)

Toda imagen debe acompañarse con un texto breve que la describa, especialmente si se usa como enlace. Esto facilitará la comprensión y la navegación, aunque la imagen no se muestre correctamente.

Establecer un estándar para íconos que se emplean y respetarlo a lo largo de todo el sitio web.



Las imágenes … precauciones con la animación (3/3)

Las animaciones dan “vida” a la página y logran mejor comprensión por parte de los usuarios. Sin embargo, su uso excesivo o prolongado puede:

• Perturbar a los usuarios.

• Incrementar el espacio que ocupa la página.

• Distraer la atención de la información relevante.

• Hacer más lenta la navegación.

• Afectar la impresión de la página.



Los colores

Se deben usar combinaciones armónicas de colores, evitando las tonalidades demasiado intensas o demasiado oscuras. No todos los monitores tiene igual brillo y contraste.

Es más cómodo leer textos oscuros sobre fondos claros, que la combinación inversa. Además, la segunda opción dificulta la impresión.

Si se usan imágenes como fondo de la página, estas deben presentarse en colores que no entorpezcan la visualización de los elementos de la página.

Universidad Metropolitana Introducción a la Computación Recomendaciones para el diseño eficiente...

Documents

Transcript of Universidad Metropolitana Introducción a la Computación Recomendaciones para el diseño eficiente...