Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Guía Rápida de Usabilidad

Temas relacionados: Principios Heuristicos de Usabilidad | Manual de Usabilidad on-line

Recomendaciones y consejos contrastados a la hora de diseñar y elaborar un sitio Web enm el que el usuario se encuentre confortable a través de una visita ordenada y lógica:.

  1. En cuanto al objetivo:

    Recomendaciones y consejos contrastados a la hora de diseñar y elaborar un sitio Web enm el que el usuario se encuentre confortable a través de una visita ordenada y lógica:.

    • Un Web site debe tener un objetivo concreto. Se deben evitar contenidos colaterales que no estén directamente relacionados.

    • En la medida de lo posible el Web site debe ser original en cuanto a la idea alrededor de la que se oriente y en cuanto a la presentación. Debe tenerse en cuenta que una orientación nueva de una idea ya conocida basta para aportar originalidad a un site.

  2. Inicio de página



  3. En cuanto al contenido:

    • El contenido debe ser, en cuanto a la forma:

      • Original
      • Conciso
      • Fiable
      • Gramaticalmente bien redactado y sobre todo, sin faltas ortográficas
      • Comprensible
      • Actualizado.
    • El contenido debe ser, en cuanto al fondo:

      • Significativos (tener valor y estar relacionado con el objetivo del site).
      • Útil para la audiencia.
    • Cuando el contenido no sea original, debe acreditarse al autor del mismo, avisarle del hecho de la publicación, y, a ser posible, establecer un link a sus paginas.

    • Todos los contenidos deben organizarse de forma coherente (arquitectura de la información) habilitando una navegación evidente para el usuario entre los mismos.

  4. Inicio de página



  5. En cuanto a los gráficos:

    Los gráficos pueden aportar atractivo al diseño del site, ayudar a comunicar, a fijar atención y a orientar la mirada del usuario en áreas concretas. Además, usados con buen gusto, pueden hacer más agradable la estancia del usuario en el site:

    • Sin embargo, es fuertemente recomendable usarlos con extremada mesura, ser escasos.

    • A ser posible no usar "clip arts" de dominio público: los gráficos deben ser originales.

    • Los gráficos deben tener alguna relación con el contenido de las paginas y no ser gratuitos.

    • A fín de ser visibles en todos los browsers deben utilizarse formatos compatibles: ".gif" y ".jpg".

    • Usar relieves y sombras de forma muy comedida.

    • Usar siempre los attributes "height" y "width" en los tags <img>: esto ayuda a reducir los tiempos de "rendering".

    • Es conveniente utilizar el atributo "alt" en los tags <img> tanto para facilitar la interpretación de las imágenes como para browsers que tengan inhabilitada la visualización de imágenes.

    • Evitar el uso de imagenes animadas a sólo promociones o campañas publicitarias, salvo que sean muy necesarias.

    • No usar nunca gráficos residentes en Web servers ajenos al del site: aumentan los tiempos de presentación al tener que establecerse una conexión adicional y se pierde el control sobre la permanencia futura de la imagen.

    • Optimizar las imágenes. Hay herramientas que ayudan a reducir el peso de las imágenes entre un 30 y un 50%, reduciendo contrastes y detalles de forma prácticamente inapreciable, básicamente reduciendo el número de colores utilizados.

      Al poderse controlar el nivel de resolución, pueden obtenerse imágenes mucho más ligeras en las que la pérdida de calidad sea prácticamente inapreciable.

      Algunos de estos optimizadores son:

      • JPEG Cruncher Pro
      • GIF Cruncher Desktop
      • Photoshop y otras herramientas de creación de imágenes incluyen sus propias utilidades para la optimización de imágenes específicas para Web.
  6. Inicio de página



  7. En cuanto al diseño:

    El diseño de un site es el arte de combinar índices y flashes de contenidos, noticias, o contenidos completos, con imagenes (iconos, fotos, logos…), menús y herramientas de navegación, áreas de cabecera y pie, buscando la distribución de estos en el espacio del lienzo, atendiendo a criterios estéticos, de movimiento y ubicación de la vista del usuario en los mismos, de prevalencia, etc.

    En la Home Page:.
    • Seleccionar un esquema de colores a la vez atractivo pero que no canse.

    • Utilizar un número reducido de colores en el esquema de colores.

    • Seleccionar un esquema de colores a la vez atractivo pero que no canse, conjugando a la vez equilibrio entre los mismos y un contraste suficiente pero no agresivo.

    • Mantener el mismo esquema de colores a lo largo de todo el site. Evita la sensación de stress por variación brusca de entorno.

    • Evitar saturar la Home Page poniendo en la misma la mayor parte de los contenidos o muchos extractos de estos.

    En las Paginas interiores:.
    • El aspecto de las paginas debe ser con contenidos y componentes estructurados, y no estar mu saturadas.

    • No es preciso establecer enlaces (mediante menús o barras de navegación) desde cada página a todos los contenidos del site.

    • Los párrafos no deben ser largos (no más de 5 o 7 líneas) y los contenidos deben estructurarse según distintos niveles: esto facilita al lector la lectura selectiva y a saltos.

    • Las faltas de ortografía son imperdonables: chequear los contenidos con un procesador de textos con diccionario.

    • No utilizar texturas para el lienzo (background) de la aplicación: cansan y dificultan la legibilidad.

    • Es recomendable usar el mismo lienzo (background) a lo largo de toda la aplicación. Excepcionalmente puede cambiarse para diferenciar una sección concreta, pero no es muy recomendable.

    • Usar el menor número de banners posible y de los tamaños estándar en la Web. No poner más de uno por página.

    • No utilizar texto parpadeante (blink): distrae la atención y enseguida pone nervioso al lector.

    • Si se usa algún tipo de música o sonido situar de forma visible un control para inhibirla.

    • El código HTML de debe ser claro y adecuadamente estructurado y lo mejor formado posible (respetar la sintaxis aunque no sea imprescindible). Utilizar chequeos sintácticos de las paginas. Muchos editores de HTML disponen de uno y hay servicios de validación gratuitos en la Web que detectan incorreciones:

    • Codificar absolutamente todos los elementos de diseño en Hojas de Estilo externas.

    • En las CSS debe validarse que todas las clases y atributos de las mismas son entendidas por la mayoría de los navegadores al uso, ya que en el terreno de las Hojas de Estilo hay muchas diferencias de interpretación según los browsers. Hay tablas comparativas en la Web que indican que codificaciones de estilo son soportadas por según que browsers:

    • El código de las CSS debe ser sintácticamente correcto, de lo contrario originará problemas de aplicación de estilos. Hay editores de CSS que incluyen esta funcionalidad y, de cualquier forma hay servicios gratuitos de validación en la Web:

    • Si se usan frames, utilizar el tag <noframes> con el contenido correspondiente.

    • Asegurarse que todas las paginas del site se ven correctamente en la mayoría de browsers más comunes.

    • Utilizar en todas las paginas contenido significativo y referencial para el tag <TITLE>.

    • Utilizar en todas las paginas los tags <META> correctos y adecuados a la página: son muy importantes para la correcta indización e identificación en buscadores.

    • Nunca utilizar leyenda o imagen de "En construcción". Cualquier site está siempre en construcción, y un contenido que aún no está disponible no hay porque anunciarlo. Sólo si se puede asegurar el plazo en que será publicado.

    • No utilizar Applets de Java para funcionalidades que puedan resolverse con otras herramientas menos onerosas para el cliente Web (JavaScript, DHTML, Flash…)

    • Evitar en lo posible el uso de Pop-ups.

    • Evitar el uso de objetos multimedia que requieran plugg-ins que no estén totalmente estandarizados. De ser necesario tratar de convertir a formatos totalmente estándar.

  8. Inicio de página



  9. En cuanto a la navegación:

    • La navegación debe ser intuitiva y evidente para el usuario.

    • Salvo excepciones, cualquier página del site debe cumplir la Regla de los 3 clicks: para acceder a cualquier contenido del site nunca deben ser necesarios más de 3 clicks de ratón desde la Home Page.

    • En cualquier momento de la historia de la nvegación del usuario, este debe tener bien claro en que punto de la estructura se encuentra y como vlover al inicio o a puntos clave de la misma.

    • En paginas muy largas suele útil utilizar un doble sistema de navegación, al principio y al final.

    • Es útil utilizar a pie de página iconos de:

      • Inicio de página (Top).
      • Inicio de Navegación (Inicio, Home Page).
      • Anterior (Back): un buen sistema de navegación hace que el usuario se olvide de los accesorios de navegación del browser.
      • Inicio de Navegación (Inicio, Home Page).
    • En todo tipo de navegación, pero especialmente en estructuras profundas (más de 3 niveles), son especialmente recomendadas las "Barras de Historia Reciente de Navegación" (Breadcrumb), en alguna de sus versiones:

      • N últimas paginas visitadas.
      • ültima página visitada más las paginas-cabecera de cada sección visitada (recomendada para estructuras especialmente complejas).
    • En procesos en los que el usuario debe completar una serie de pasos secuenciales son muy útiles las estructuras informativas del tipo:

      Está usted en el paso: [1/5] [2/5] [3/5] [4/5] [5/5]
    • Esto contribuye a evitar la incertidumbre del usuario respecto a la duración del proceso en el que está inmerso.

    • Chequear y evitar la existencia de enlaces externos (grave) e internos (muy grave) inexistentes. Hay servicios de verificación de enlaces rotos gratuitos en la Web:


    Pruebas y chequeos antes de la puesta on-line:

    Chequeo Herramienta
    Comprobar posibles errores gramaticales y faltas de ortografía Editor de Texto
    Incluir tags <TITLE> y <META> adecuados  
    Comprobar enlaces inexistentes
    Comprobar la calidad del código HTML de Home Page y paginas
    Comprobar la calidad del código de las CSS’s
    Comprobar la compatibilidad de las CSS’s según browsers


Temas relacionados: Principios Heuristicos de Usabilidad | Manual de Usabilidad on-line

 
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable