Guía basada en conceptos de usabilidad web

Transcripción

1 Diseño de páginas de internet: Guía basada en conceptos de usabilidad web José Mario Serrano

2 Contenido Prefacio...1 Introducción...2 Módulo I. Cliente y usuario...3 Paso 1. Entrevista con el cliente...4 Paso 2. Contenido interactivo...5 Paso 3. Análisis del público meta...6 Paso 4. Recabar información para el sitio...7 Módulo II. Información de contenido y diagrama de flujo...8 Paso 1. Organización de contenido...9 Paso 2. Preparar el contenido...10 Paso 3. Estructura del sitio y diagrama de flujo...11 Módulo III. Retícula y diseño...12 Paso 1. Retícula...13 Paso 2. Color y tipografía...14 Paso 3. Comenzar a diseñar...15 Paso 4. Archivos para maqueta...16 Paso 5. Optimización de imágenes para maqueta...17 Módulo IV. HTML y maquetación...18 Paso 1. Hojas de estilo y tablas...19 Paso 2. Preparar el documento HTML...20 Paso 3. Construir el documento HTML y documento para archivos FLASH...21 Módulo V. Pruebas de usabilidad y publicación...22 Paso 1. Compatibilidad con navegadores y navegación prueba...23 Paso 2. Prueba de usabilidad básica...24 Paso 3. Publicación y alta en buscadores...25 Consideraciones finales...26

3 1 Prefacio La guía para realizar páginas de internet basada en conceptos de usabilidad tiene como objetivo presentar los elementos y factores que se deben tomar en cuenta para la realización de una página usable y que nos ayude a disminuir sistemáticamente la incidencia de errores de usabilidad que pueden presentarse en un proyecto de diseño web. La guía se presenta a través de módulos, cada uno abarcando alguna de las etapas básicas del proceso de diseño. Como todo proceso de creación, el diseño de un sitio de internet también implica un proceso de trabajo fundamental que abarca desde el acopio de información necesaria para definir los objetivos del sitio, la misión y todo el contenido, establecer un público meta para su análisis, así como, definir el contenido en base a las necesidades de los usuarios y comenzar con el desarrollo del sitio propiamente dicho para su posterior publicación. Los módulos son los siguientes: I. Cliente y usuario. II. Información de contenido y diagrama de flujo. III. Retícula y diseño IV. HTML y maquetación. V. Pruebas de usabilidad y publicación. En cada uno de los módulos se ofrece información técnica y teórica sobre algunos de los pasos más importantes de cada etapa de diseño. Al final del documento (página 26) se explican algunas consideraciones sobre los que es y lo que no es esta guía y como aplicarla.

4 2 Introducción El concepto de usabilidad se define como la capacidad de un software de ser aprendido, comprendido, usado y ser atractivo para el usuario en condiciones específicas de uso o la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico. La usabilidad es la relación de comunicación óptima entre un hombre y una máquina. Los elementos principales dentro del concepto de usabilidad son el usuario, el contexto y la máquina y es el diseñador gráfico el encargado de visualizar una mejor forma de relacionar estos tres elementos. La funcionalidad de un sitio está establecida por la usabilidad. El desarrollo web se ha adaptado a un conjunto de técnicas y conceptos que han facilitado el uso de navegadores, de sitios web y todo tipo de interfaces para realizar una tarea determinada. El elemento más importante dentro de la usabilidad es el factor humano, lograr que un usuario utilice un sistema de la manera más eficaz, sencilla y sin complicaciones será posible mediante un adecuado diseño de usabilidad. Un diseño de usabilidad conlleva un análisis previo del comportamiento humano y los posibles pasos que el usuario siga para realizar una tarea. Reduce el tiempo de aprendizaje de un sistema o software, disminuye el costo de asistencia a usuarios y optimiza los costos de diseño, disminuyendo gastos en rediseños y mantenimiento de sitios web, además, incrementa la satisfacción del usuario. El diseño centrado en el usuario se refiere al proceso mediante el cual se diseña en base a las necesidades de un usuario. Muchos diseñadores gráficos desarrollan sitios web dando más importancia al aspecto estético, pero uno de los factores más importantes dentro del desarrollo del sitio es su facilidad de uso. Los usuarios buscan esta facilidad, rapidez y funcionalidad. Un usuario no compraría en un sitio de comercio electrónico si éste fuera muy complicado de usar. Los diseñadores gráficos deben centrar su atención hacía estas necesidades y no incurrir en preferencias personales. Un proyecto exitoso lleva tras de sí una extensa investigación que define las verdaderas necesidades de un receptor final, es esa investigación la base del diseño de usabilidad, definir el qué se va hacer?, para quién se va hacer? y cómo lo necesitan? Es fundamental para diseñar un sitio web usable, pero responder a estas preguntas puede ser difícil si no se cuenta con una metodología de trabajo y un sentido investigativo por parte del diseñador.

5 Cliente y Usuario Objetivo. Recabar toda la información necesaria para la realización del proyecto, definir una misión y establecer características de los usuarios meta. Paso 1 Paso 2 Paso 3 Paso 4 Entrevista con el cliente. Contenidos Interactivos. Análisis del público meta. Recabar información para el sitio.

6 Paso 1 Cliente y usuario Entrevista con el cliente 4 Conceptos Una misión es la idea principal que refleja el ser del sitio web y establece el giro que tendrá (entretener, vender, promocionar, informar, etc.) la misión Ayuda a definir los usuarios potenciales del sitio y las dimensiones que éste tendrá en cuanto a contenido. La misión está directamente relacionada al público meta que tendrá el sitio y establece cómo y qué beneficios obtendrán de él. En este paso se debe poner atención al por que el cliente está solicitando el desarrollo de un sitio web, en este momento el cliente tiene una necesidad, un deseo o un interés y posee información y posiblemente una idea de lo que desea realizar, hay que encaminar esta información hacia un objetivo funcional, es decir, definir una función principal del sitio y como lograrla, a quien beneficia y cómo. Al establecer todo esto y escribirlo en una frase estaremos creando la misión del sitio. A continuación se deberá definir cuál es la misión básica del sitio respondiendo las preguntas: qué, para qué, para quién y cómo: Qué función principal se puede realizar en el sitio? Para qué se debería realizar esa función? Quiénes pueden utilizar esa función? Cómo puedo lograr esa función? Después de responder estas preguntas se puede escribir la misión básica del sitio: El sitio web de permitirá para a mediante Ejemplo: El sitio web de InvestigacionesMédicas.com permitirá ofrecer información especializada sobre avances médicos para mantener una actualización disciplinar de especialistas en el área de las ciencias biomédicas, estudiantes y profesionales médicos en general mediante la publicación de investigaciones recientes, artículos y entrevistas. En este momento ya se tiene definido los usuarios potenciales. Tambien debe establecer los objetivos del sitio y en ellos definir cómo y qué se quiere lograr durante el proceso de diseño y se establecen tiempos para cada una de las etapas. Si es posible haga un cronograma con todas las actividades que se van a realizar. A continuación escriba la misión básica del sitio: Anotaciones Relación entre misión del sitio y misión de la empresa:

7 Paso 2 Cliente y usuario Contenido interactivo 5 Conceptos Ofrecer servicios y herramientas puede promover un mejor y mayor uso del sitio. Los sitios que más llaman la atención de los usuarios son los que presentan secciones en las que se puede interactuar con otros usuarios. Aquí se definirán algunos de los servicios y utilidades que el sitio ofrecerá a sus visitantes. Algunos de los servicios más comunes son los de interacción de usuarios: foros de discusión, chats, libros de visitas, listas de correo, etc. Muchos de estos servicios requieren programación especial, si no se cuenta con el recurso para cubrirlo se puede optar por servicios gratuitos: Foros: Chats: Libros de visitas: Listas de Correo: Encuestas: Cuando se utiliza un servicio gratuito es recomendable buscar uno que pueda ser personalizado para no variar mucho el estilo general del sitio. En la misión ya se estableció mediante que actividades o contenidos se pretende lograr la función principal del sitio, los servicios y el contenido nos indica las dimensiones que el proyecto puede llegar a tener. Responda: Qué servicios son más atractivos para los usuarios potenciales? Por qué van utilizar esos servicios? En qué les benefician? Quizás utilizar un foro de discusión no tiene el mismo objetivo que utilizar un chat, decidir cual servicio es mejor dependerá del contenido del sitio. Ejemplo: El sitio de InvestigacionesMédicas.com ofrecerá un foro de discusión sobre temas relevantes de medicina, un servicio de listas de correo electrónico para mantener informados a los usuarios sobre las actualizaciones del sitio y encuestas para opinar sobre el sitio o temas de actualidad. Otras páginas de recursos, utilidades y servicios:

8 Paso 3 Cliente y usuario Análisis del público meta 6 Conceptos Definir características de los usuarios y diseñar en base a esas características permite incrementar el éxito en el uso del sitio por que se definen sus necesidades básicas. La accesibilidad indica la facilidad con la que un sitio puede ser usado o visitado por todo tipo de personas, sobretodo aquellas con algún tipo de discapacidad. Los sitios accesibles mejoran la calidad de navegación de usuarios, la usabilidad general de las páginas, la presencia en los buscadores y reducen el mantenimiento al sitio. En este paso se debe realizar un análisis del público meta para definir algunas de las características más importantes que pudieran influir en el diseño del sitio. Se requiere de un poco de sentido común y observación para determinar: Edad de la mayoría de los usuarios que podrían acceder al sitio. Necesidades de información. Conocimientos informáticos. Características del equipo de cómputo de acceso. Capacidad de adaptación al sistema de navegación. Ubicación geográfica. Idioma. Capacidad de accesibilidad. Si se dificulta definir algunas de estas características puede optar por realizar algunas actividades de investigación como entrevistas a usuarios, análisis de sitios similares o encuestas. Aunque se definan las características del público meta y se diseñe en base a esas características el sitio web está disponible a todo el público en general, por lo que se debe planear hacerlo lo más accesible que se pueda: redacción de textos sencilla, contenidos atractivos, poco peso en las imágenes y gráficos, uso de colores estándares para web, legibilidad, etc. Esto es imprescindible en el diseño independientemente de las características del usuario. Escriba las características principales del usuario meta: Anotaciones Pruebas virtuales de accesibilidad para sitios web:

9 Paso 4 Cliente y usuario Recabar información para el sitio 7 Conceptos Ofrecer información sobre el sitio y la empresa propicia una mejor confianza por parte del usuario. Colocar información de contacto al final de cada página permite al usuario encontrarla rápidamente sin importar la sección en que en ese momento se encuentre visitando. Aplicar la identidad corporativa de la empresa refuerza la imagen de ésta y siempre cuidando que no dificulte la legibilidad debido a mal manejo de colores, imágenes, etc. Los usuarios buscan contenido. Sin un contenido atractivo no habría razón para visitar el sitio. El contenido determina la satisfacción del usuario que al final decidirá regresar al sitio una segunda vez. Datos de la empresa. Debe mantener informados a los usuarios sobre cualquier dato de la empresa y del sitio y ofrecerles información sobre contacto tanto de la empresa como del webmaster. Solicite la siguiente información: Dirección física. Teléfonos Correos electrónicos Códigos postales Información legal Políticas de privacidad Condiciones de uso de los servicios Esta información nos servirá para más adelante crear un menú del entorno del sitio que generalmente es colocado al pie de la página, más adelante se desarrollarán los menús del sitio. También solicite información sobre la empresa, evento o institución para la que hace la página, como visión, misión, políticas e identidad corporativa. De esta manera se pueden definir algunas secciones del sitio, por ejemplo, la sección quiénes somos?, contacto y secciones que traten sobre la empresa. Identidad Corporativa Solicite la identidad corporativa: logotipos en vectores o mapa de bits y todo lo que pueda servir para diseñar el estilo básico del sitio. Analice sí es factible aplicar esa identidad en web y de que manera. Contenido de las secciones del sitio. Solicite todo el contenido del sitio. Recabar toda la información del sitio debe basarse en las necesidades que el usuario tenga, ofrecer solo contenidos que él necesite y quiera ver. Los contenidos deben ser adecuados, cortos, sin errores gramaticales, de terminología apropiada para el público meta y debe actualizarse continuamente. Nota: si la página va a funcionar mediante una base de datos, solicite la información del programador y solicite información sobre los contenidos de la base de datos para posteriormente diseñar la plantilla del sitio donde se desplegará ese contenido. Bases de datos y administración de contenidos: