Tema 3. Usabilidad Version 2011

Embed Size (px)

Citation preview

  • Usabilidad

    MC. Juan Pablo Romero Villegas

  • El concepto de usabilidad en su explicacin ms simple es la experiencia de un usuario al

    interactuar con un sitio web

  • TECNOLOGA CONTENIDO

    ARQUITECTURA DEL SITIO

    DISEO VISUAL

    INTERACCION

  • La usabilidad es tambin llamada DISEO CENTRADO EN EL USUARIO, consiste en ser amables con nuestros usuarios; debemos conseguir que les resulta fcil hacer lo que quieren y encontrar lo que estn buscando.

  • Los sitios web deben ser educados; servicial cuando el visitante necesite ayuda y que no moleste cuando el visitante no la necesita.

    Un sitio web debe ser agradable y no entrometerse en la experiencia del usuario.

  • Estos se basan en aumentar la satisfaccin del visitante, que es el punto de partida para que

    permanezca en l o regrese en un futuro.

    Principios de USABILIDAD

  • Jakob Nielsen el gur de la usabilidad es una de las personas ms respetadas en el mbito mundial sobre usabilidad en la web.

    Jakob estudi 249 problemas de usabilidad y a partir de ellos dise lo que denomin lasreglas generalespara identificar los posibles problemas de usabilidad.

    10 Reglas de Jakob Nielsen

  • Visibilidad del estado del sistema:el sistema siempre debera mantener informados a los usuarios de lo que est ocurriendo, a travs de retroalimentacin apropiada dentro de un tiempo razonable.

    Relacin entre el sistema y el mundo real: el sistema debera hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, ms que con trminos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la informacin aparezca en un orden natural y lgico.

  • Control y libertad del usuario: hay ocasiones en que los usuarios elegirn las funciones del sistema por error y necesitarn una salida de emergencia claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.

    Consistencia y estndares: los usuarios no deberan cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

  • Prevencin de errores: mucho mejor que un buen diseo de mensajes de error es realizar un diseo cuidadoso que prevenga la ocurrencia de problemas.

    Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendra que recordar la informacin que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fcilmente recuperables cuando sea necesario.

  • Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interaccin ms rpida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.

    Esttica y diseo minimalista: los dilogos no deben contener informacin que es irrelevante o poco usada. Cada unidad extra de informacin en un dilogo, compite con las unidades de informacin relevante y disminuye su visibilidad relativa.

  • Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solucin constructiva al problema.

    Ayuda y documentacin: incluso en los casos en que el sistema pueda ser usado sin documentacin, podra ser necesario ofrecer ayuda y documentacin. Dicha informacin debera ser fcil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

  • Estas reglas son las claves para poder facilitar el uso de cualquier persona, no solo dentro de los sitios web, sino en cualquier sistema de informacin.

  • Evidencia: El sitio web debe ser fcil de utilizar.

    Velocidad: Los usuarios no tienen paciencia para lo lento.

    Retroalimentacin: Si el usuario ha de esperar por algo, debemos avisarle de ello.

    Exactitud: Las paginas web profesionales NO DEBEN de tener vnculos rotos, imgenes perdidas, errores de Javascript, etc.

    Resumiendo

  • Crear una seccin del sitio

    Web

    Probar la seccin del sitio Web

    Corregir Fallos

    Hecho?

    Crear una seccin del sitio

    Web

    Probar la seccin del sitio Web

    Sitio Completado

  • Arquitectura de la Informacin

  • Arquitectura de la Informacin, es el conjunto de mtodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.

    Definicin

  • Los elementos que se muestran a continuacin constituyen la Metodologa de la Arquitectura de Informacin.

    Definicin de Objetivos del SitioDefinicin de AudienciaDefinicin de Contenidos del SitioDefinicin de la Estructura del SitioDefinicin de los Sistemas de NavegacinDefinicin del Diseo Visual

  • A travs de esta etapa se busca definir cules sern los objetivos centrales que deber tener el Sitio Web y establecer la forma de cumplirlos.

    Definicin de Objetivos del Sitio

  • Una vez que se ha terminado adecuadamente la etapa anterior con la generacin de los objetivos del sitio, se debe dar un siguiente paso, que es el de determinar las principales audiencias (pblicos) hacia las cuales se orientar el sitio.

    Una de las formas ms concretas de establecer la audiencia que tiene el sitio, es comenzar por investigar en la propia institucin, para determinar a quines atienden.

    Definicin de Audiencia

  • Por capacidad fsica

    Por capacidad tcnica

    Por conocimiento de la institucin

    Por necesidades de informacin

    Por ubicacin geogrfica

  • Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificacin de Objetivos y de Audiencias, ya que en ambos la bsqueda gir en torno a las necesidades que tenan los usuarios del sitio.

    Para cumplir con una norma general respecto de qu debera contener un sitio, se pueden anotar las siguientes, como las ms importantes:

    Acerca de la InstitucinProductos / ServiciosNovedades de la Institucin

    Definicin de Contenidos del Sitio

  • Implicar trabajar en tres reas concretas, a travs de las cuales se definir la estructura del sitio, el rbol de contenidos y los sistemas de navegacin que se ofrecer a los usuarios para que avancen a travs de sus contenidos.

    Definicin de la Estructura del Sitio

  • Creacin de la Estructura

    Se refiere al proceso de identificar la forma que tendr el Sitio Web que se est desarrollando.

    Estructura: se refiere a la forma que tendr el Sitio Web en trminos generales con sus secciones, funcionalidades y sistemas de navegacin. No considera ni incluye elementos grficos (logotipos, vietas, etc.). Diseo: se refiere a la solucin grfica que se crear para el sitio, en la cual aparecen colores, logotipos, vietas, y otros elementos de diseo que permiten identificar visualmente al sitio.

  • Mapas Permanentes del Sitio

  • Definicin de los Sistemas de Navegacin

    La tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. A travs de estos, los usuarios podrn avanzar por sus diferentes reas, sin perderse.

    En la generacin de dichos sistemas se debe atender a dos elementos que sern muy importantes:

    Textual: se refiere a que la navegacin se har a travs de elementos concretos, tales como mens, guas, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Contextual: es todo lo referido a cmo se presenta la informacin, utilizando para ellos elementos basados en texto, grficos o bien de entorno.

  • El sistema de navegacin, se deben tener en cuenta las siguientes caractersticas:

    Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicacin y disposicin en las pginas.

    Uniforme: el sistema debe utilizar similares trminos con el fin de que el usuario que lo vea en las pginas, confe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio.

    Visible: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con l, como si se tratara de una gua permanente en el rea en que se encuentre del sitio.

  • Men General: siempre presente en todo el sitio, permite el acceso a cada una de las reas del sitio.

    Pie de Pgina: usualmente ubicado en la parte inferior de cada pgina, indica el nombre de la institucin, telfonos, direccin fsica y de correo electrnico.

    Sistemas de Navegacin

  • Barra Corporativa: ofrece diversas opciones de informacin respecto del sitio y tal como el anterior, se muestra en todas las pginas.

    Ruta de Acceso: listado que aparece en la parte superior de cada pgina y que muestra el trazado de pginas que hay entre la Portada del sitio hasta la pgina actual que se est revisando; cada una de ellas debe tener un enlace, para acceder al rea de la cual depende la pgina. Cada uno de los elementos que conforman este camino debe tener un enlace que permita el acceso a esas reas. En la literatura internacional en ingls sobre este tema, se llama a este elemento como breadcrumbs.

  • Fecha de publicacin: para saber la vigencia de publicacin del contenido desplegado.

    Botn Home: para ir a la portada Botn Mapa del sitio: para ver el mapa del Sitio Web.

    Botn Contacto: para enviar un mensaje al encargado del sitio.

    Buscador: presente en cada pgina si es que la funcionalidad existe en el sitio.

  • Botn Ayuda: para recibir ayuda sobre qu hacer en cada pantalla del sitio.

    Botn Imprimir: para imprimir el contenido de la pgina; se espera que el formato de impresin del documento que se muestra en pantalla sea ms simple que la pgina normal del Sitio Web, para dar la impresin al usuario de que hay una preocupacin por ayudarle en la tarea de llevar impreso el contenido.

  • Esta etapa considera la generacin de dibujos slo lineales que describen los componentes de cada una de las pantallas del sitio, con el objetivo de verificar la ubicacin de cada uno de ellos.

    Diseo de las Estructuras de Pginas

  • Bocetos de Diseo

    Esta etapa consiste en la generacin de dibujos digitales acabados de la forma que tendrn las pginas principales del sitio que se desarrolla, considerando como tales la Portada, Portada de Seccin y Pgina de despliegue de contenidos.

  • Maqueta Web

    Es la etapa final y consiste en generar todo el sitio en tecnologa HTML utilizando imgenes y contenidos reales.

  • Slide 1Slide 2Slide 3Slide 4Slide 5Principios de USABILIDAD10 Reglas de Jakob NielsenSlide 8Slide 9Slide 10Slide 11Slide 12Slide 13ResumiendoSlide 15Slide 16DefinicinSlide 18Definicin de Objetivos del SitioDefinicin de AudienciaSlide 21Definicin de Contenidos del SitioDefinicin de la Estructura del SitioSlide 24Slide 25Slide 26Slide 27Slide 28Sistemas de NavegacinSlide 30Slide 31Slide 32Diseo de las Estructuras de PginasSlide 34Slide 35Slide 36Slide 37Slide 38Slide 39