Taller de Gestión de Proyectos Web de clase mundial

Monterrey, noviembre 2007 / Paulo Saavedra V. / [email protected]

Usabilidad y Accesibilidad para la WebUAWEB A.C.

Taller de Gestiónde Proyectos Web


Taller de Gestión de Proyectos Web8 y 9 de noviembre 2007.

Día 1, Mañana



8 de noviembre de 2007Mas de 130 eventos40 países40.000 personas involucradas

3 eventos en México, 1 en MTY



Módulo 1: Gestión, contenido y diseño de proyectos Web

Gestión del proyectoPreguntas básicas Equipos de trabajo Definiciones para el diseño

Producción y manejo de contenidosConceptos básicos Diseño de contenidos Arquitectura de información

Diseño visualPrincipios de diseño y diagramación Buenas prácticas y estándares



Módulo 1Gestión del Proyecto

Conceptos básicosPreguntas básicasEquipo de trabajoDefiniciones para el diseño



¿Qué es un proyecto?

Es la suma de esfuerzos que en forma temporal se utilizan para generar un PRODUCTO O SERVICIO en particular o UNICO.Tiene comienzo y finalGenera entregables UNICOSSe desarrolla en etapas



Componentes de la Administración de Proyectos

Habilidades claveLiderazgo, Comunicación, Negociación, Solución de problemas, Lograr objetivos

ConocimientosTécnicos y Administrativos

HerramientasTécnicas



Elementos relacionados

TiempoCalidadAlcanceEntornoRecursosCosto

BUSCAR LA BUSCAR LA SATISFACCISATISFACCIÓÓN DE N DE

TODOS LOS TODOS LOS INTERESADOSINTERESADOS



Ciclo de vida de un proyecto

1. Inicio*

2. Planeación*

3. Ejecución*

4. Control*

5. Cierre*N

IVEL

DE

ACT

IVID

AD

INICIO TIEMPO

*Etapas del proyecto

TERMINO



Preguntas básicas

¿Para qué necesita el sitio Web la institución?

¿Para qué necesita el sitio Web la comunidad?

¿Qué es lo que buscan las personas en mi institución?

¿Qué información de la institución es útil para la comunidad?

¿Qué imagen de la institución quiero proyectar en mis usuarios?

¿Qué servicios interactivos entregaré a través del Sitio Web?

¿Quiénes pueden ayudarme a realizar el proyecto?



Preguntas Básicas

OBJETIVOS

AUDIENCIA

TECNOLOGIA



•Información•Servicios•documentos

•Autoridades•Gerencias•Divisiones

•Stakeholder•Internos•Externos

•Clientes•Ciudadanos•Publico



Para encontrar el camino

Saber lo que quiero lograrCuales son los objetivos del proyectoCómo se integra con la visión y misión institucional

Saber a quién me dirijoQuiénes son, tipos de usuarios y perfiles.

Saber qué puedo ofrecerInformación, productos y servicios



Definir objetivos

Estudiar la misión y visión de la institución

Comprender metas objetivas y priorizarEstudias planes y programas en ejecución

Identificar prioridades y enfocar el proyecto

Identificar productores de información

Relacionar canales de comunicación interna y sus flujos



Identificar necesidades y servicios

Una institución de Gobierno no debe intentar resolver en un único proyecto todos las necesidades.

Servicios y trámites Gestores de informaciónProcesos, analizar y crear diagramascontenidos y proyectos “publicables”



Equipo de Trabajo

Creación del Comité Web Integrar áreas gestión, informática y comunicacionesJefe operacionalReuniones semanales Política editorialDocumentación de compromisos



Equipo de Trabajo

Rol de la autoridadVincularse con el proyectoAvalar el proyecto y las decisionesApoyar al Comité Web

¿Cómo seducir a la autoridad?Datos cuantitativos (ahorro)Hitos mediáticosBeneficios a mediano plazo



Equipo de Trabajo

Competencias internas Web MasterEncargados de implementar el sitioGestores de contenido

Capacitación



Definiciones para el diseño

Definiciones de AudienciaCapacidad físicaCapacidad técnicaNecesidades de informaciónUbicación geográfica



Casos de uso

Extraído del diseño de softwareConsiste en actores y casos de uso Representan usuarios y sistemasComportamiento del sistema

Caso de uso

Actor/Usuario



Pasajero

Reservar Vuelo

Cancelar reserva Aerolínea

Descripción del Caso de Uso

- Pasajero solicita una reservación de un ticket a un vendedor- Vendedor consulta disponibilidad en la Aerolínea- Aerolínea informa que hay ticket disponibles y entrega detalles del vuelo- Vendedor entrega al pasajero la información de los detalles del vuelo- Pasajero solicita el asiento de su preferencia- Vendedor reserva el asiento- Vendedor confirma la reserva con el pasajero- Vendedor solicita el pago al pasajero y ofrece un método de pago- Pasajero paga al vendedor- Vendedor envía el pago a la Aerolínea- Aerolínea entrega la confirmación final del ticket al vendedor- Vendedor emite el ticket al pasajero•Nombres: Clases o atributos

•Verbos: operaciones posibles



¿Para qué un diagrama?

Formularios de contactoBúsquedas y resultados de búsquedasSistemas de navegaciónModelos para trámites en línea



Primera Pausa10:45 horas



Módulo 1Producción y manejo de contenidos

Diseño de contenidosArquitectura de información CARD SORTING



Diseño de contenidos

Considerar a todos los tipos de usuarioPriorizar y jerarquizar el contenidoEstudiar todos los bloques de informaciónLenguaje ciudadano



Claves del Diseño de Información

El tema central de la página debe ser CLARODecir siempre de quién es la página es básicoNunca olvidar la naturaleza del medio (WEB)Siempre indicar la fecha de publicación





http://www.lenguajeciudadano.gob.mx



¿Qué es Arquitectura de Información?

El arte y la ciencia de estructurar y clasificar sitios Web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información.

Fotografía: Javier Velasco



Arquitectura de Información, paso 1

Recopilar todo el contenido existenteDetallar el contenido nuevo necesarioDeterminar la estructura del sitio



Arquitectura de Información,paso 2

Analizar el contenidoCrear wireframesJerarquizar contenidoDeterminar servicios

http://alquimistas.evilnolo.com/



http://www.w3.org/WAI/EO/2005/10/perspective





Listar elementos

LogotipoSloganBuscadorAgenda / ProgramaExpositoresAlumnosInscripcionesContacto…



LogoBarra de navegación

Novedades UAWEB

Buscar

RSS

Materiales Destacados

Programa de actividades

Registro

Expositores

Información Corporativa y de contacto



Definición del Contenido

Utilice como primer insumo la información obtenida de la definición de objetivos y audiencia.Considere por ejemplo:

Información institucional jerarquizada (horarios, teléfonos, direcciones, directores, organigrama, etc.)Productos / Servicios, todo lo que se pueda hacer en el sitio, trámites, etc.Novedades, noticias, información relevante, fechas destacadas, etc.



Organización del Contenido

Se trata de establecer niveles jerárquicos del contenido con el objeto de centrarse en el usuario y no en la organizaciónConsiderar

Información institucional jerarquizada (horarios, teléfonos, direcciones, directores, organigrama, etc.)Productos / Servicios, todo lo que se pueda hacer en el sitio, trámites, etc.Novedades, noticias, información relevante, fechas destacadas, etc.



Organización del Contenidopor Temática

PaísRegiónCiudadComuna

DíaSemanaMesAño

ABCD

Orden GeográficoOrden CronológicoOrden Alfabético

Con los elementos agrupados en un solo lugar, el usuario puede encontrar rápidamente lo que está buscando



Organización del Contenidopor Categorías

ChileGobiernoInstituciónTecnologíaBeneficios

Lista de serviciosHacer un trámitePagar un servicio

CorporativoClientesGobiernoPrivados

LibrosArchivosMúsicaSalud

TópicoTareaPúblicoProducto

Facilita la navegación y permite el aprendizaje por asociación. Los elementos pueden estar clasificados en más categorías



¿Qué es “Card Sorting”?

Consiste en observar cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio Web. De esta forma, es posible organizar y clasificar la información de un sitio Web conforme a las preferencias de sus usuarios



Tipos de “Card Sorting”

Card Sorting Abierto: El usuario puede agrupar las categorías libremente en el número de conjuntos que crea necesario Card Sorting Cerrado: Los grupos o conjuntos están predefinidos y etiquetados y el usuario únicamente deberá colocar cada categoría en el grupo que crea corresponda.



Consejos Prácticos

Seleccione al menos 5 personas: deben tener características y perfiles acordes con el público objetivo del sitio Web Explique el objetivo de la prueba, y que este no es la evaluación de los propios participantes. Indique a los participantes cuál debe ser el criterio de agrupación de las categorías: por similaridad. Entregue a los usuarios las tarjetas con las diferentes categorías, asegúrese que cada conjunto entregado esté desordenado (barajado). En el caso de “card sorting” de tipo abierto, una vez terminada la prueba, puede pedir a los participantes que den nombre a cada uno de los grupos creados.



Card Sorting: Conclusiones

Facilita la categorización de contenidos y sirve como ayuda para:

decisiones etapa de diseño conceptual (abierto); yorganización de categorías en etapas de evaluación de usabilidad (card sorting cerrado).

http://www.websort.net/



Diseña para una Web únicaSi diseñas el contenido teniendo en cuenta los diferentes dispositivos, reducirás costos, tu página será más flexible y podrá satisfacer las necesidades de más personas.

http://www.w3c.es/Divulgacion/Tarjetas/MWBP/

Buenas prácticas…



Segunda Pausa13:00 horas



Día 1, TARDE



Módulo 1Diseño Visual

Estructuras de sitioPrincipios de diseño y diagramaciónBuenas prácticas y estándares



Estructura del Sitio

http://www.webstyleguide.com

COMPLEJOAudiencias

Capacitadas

SIMPLEContenido

Básico, Capacitación

LINEAL, NARRATIVOEstructura predecible

No-LINEAL, HIPERLINKFlexible, puede ser confuso



Diagramas de Sitio


Diagrama Conceptual Diagrama de archivos



Estructura de páginas

600 píxeles

350 píxeles

535 píxeles

670 píxeles

Monitores de 15” (640x480)SAFE AREA: 600x350

Hoja Carta SAFE AREA: 535x670



800x6001024x768

4 MB!!!!



Diseño y Diagramación

Regla de oro: La Web tiene baja resolución



Jerarquía Visual



DiagramaciónSin puntos focalesSin Estructura grafica

Estructura visual,Contraste puntos focales

Básico Mejor



Layout base de un sitio







Experiencia de Usuario



Diseño de la Experiencia de Usuario

Industria AutomotrizEstudios de mercadoEntrevistas a UsuariosIngenieríaErgonomíaInterfazDiseño VisualPruebasGran Lanzamiento



Elementos de la Experiencia de Usuario (en el Web)

Web como aplicación

Web como hipertexto

Jesse James Garrett, 2000



Diseño de sitios




Buenas prácticas

Diseña para una Web únicaCoherencia temáticaAprovechar capacidadesEvitar problemas en la implementaciónPruebasMinimiza el ruidoHaz obvio lo clickeable

Evitar los riesgos conocidosVentanas emergentesTablas anidadasDiseño con tablasEspaciar con gráficosMarcosMapas de imagen



Servicios del Sector PúblicoComunidad Europea

eAccesibility of public sector services in theEuropean Union, Noviembre 2005

436 Sitios evaluados (25 estados)64% no provee etiqueta ALT en imágenes34% usa frames y no provee adecuadamente contenido para NOFRAMES99% contiene HTML no valido30% contienen características y opciones de navegación que no pueden ser usadas vía teclado.(atajos)

¿Suena conocido?

http://www.cabinetoffice.gov.uk/



Diseño Web y Estándares

Diseño para el acceso rápidoBuenas prácticas (peso, layout, frames, audio, imagenes, etiquetas, plug-ins)Estándares Internacionales (html, CSS, separar contenido y presentación)

Diseño accesibleSitios accesibles para todos, no canales “especiales”Funcionamiento en diferentes plataformas, degradar el sitio “amigablemente”

Diseño de experiencia de usuariosDiagramas de interacción, diseño de interfacesPruebas heurísticas (Artículo DNX) y test de usabilidad (SIDAR)

Atención de UsuariosGenerar estrategias de atención y feedback con usuariosConsiderar siempre al usuario como centro del negocio

Puesta en MarchaPlan de pruebas, presencia en buscadores, derechos del usuario





Tercera Pausa16:30 horas



Módulo 2:Usabilidad para sitios usables

Básicos del diseño centrado en el usuario Diseño centrado en el usuarioIntroducción a la usabilidad Métodos de evaluación Herramientas de apoyo



Diseño Centrado en el Usuario

Adivinar lo que quieren las personas y

construir un sitio para ellos es caro; si adivinas

mal, hay que volver a hacerlo todo.

Christina Wodtke, 2002



DCU, pasos básicos

1.Averigua para quién es el sitio.2.Habla con esas personas.3.Diseña el sitio para ellos.4.Prueba un prototipo del sitio con ellos.5.Cambia el diseño de acuerdo a lo aprendido.6.Prueba el sitio final con ellos.

Christina Wodtke, 2002



“Ignorar la usabilidad es invitar al error”

Requerimientodel Usuario

ProductoFinal



¿Qué es USABILIDAD…?

Es la utilidad, facilidad de uso, facilidad de aprendizaje y satisfacción de un sistema o producto para conseguir objetivos específicos.

Sirve para “medir” si un “algo” (o su interface) es...Fácil de aprenderFácil de entender y recordarEficiente

Placentero, no traumático





Métodos de Usabilidad

Seleccionar el método apropiado depende de tres condiciones:

Relación Tiempo – RecursosSi no cuenta con acceso directo a usuariosSi hay Capacidades limitadas

http://www.usabilitynet.org/tools/methods.htm



Métodos de Usabilidad

http://www.usabilitynet.org/tools/methods.htm



Problemas frecuentes...Dependencia de JavaScriptPantallas o ventanas sin un título o encabezadoMensajes de error y de operación mal redactadosEstado de vínculos poco claro URL o Dominio difícil de memorizarDiversidad de formatos de ingreso de datos (RUT)Falta declaración de pasos y número de pantallasManejo diverso de identidad corporativa Faltan espacios (ventanas) de confirmación de datos para ejecutar alguna solicitud. (pagar, revisar, modificar, etc.)Diferenciación de campos requeridos en un formulario



Etiquetas de campos no son descriptivas de la información que el usuario debe ingresar.Sugerencia: Usar etiquetas simples y claras.

Funcionamiento estresante de los elementos interactivos. Al seleccionar un checkbox se borran las opciones ingresadas en los combos.Sugerencia: Las acciones ejercidas sobre campos posteriores no deben alterar el funcionamiento de campos anteriores.



Es imposible volver a páginas anteriores con las herramientas del navegador. Cada vez que el usuario lo intenta la página expira. Esto es sumamente molesto, dado que el usuario puede perder todo lo avanzado en muchos pasos anteriores. Además le impide corregir información capturada antes en un proceso que contiene muchas páginas.Sugerencia: Corregir el funcionamiento de “volver” para que no expire la sesión ni pierda datos.



Se utilizan abreviaciones que no son explicadas al usuario.

Sugerencia: Al ser un trámite que admite intervención de usuarios extranjeros, las abreviaciones deben ser explicadas -al menos en la columna derecha- como una forma de evitar posibles dudas o errores.



No se admiten caracteres especiales en un campo importante, que no depende de si el usuario desea o no incluir el caracter, sino que dependen de datos reales, emanados del "mundo físico".

Sugerencia: En este campo debieran admitirse caracteres especiales, sobre todo considerando el tipo de dato (ej: una empresa llamada "Ñandú"). De no ser posible, advertir al usuario sobre este inconveniente y las razones de porqué no se pudo solucionar el problema.



www.guiaweb.gob.cl



Herramientas de Apoyo

La red permite tener siempre un link a manoWeb Developer Tool Bar (Firefox)

http://chrispederick.com/work/web-developer/

Web Accessibility Tools (Internet Explorer)http://www.wat-c.org/



Tercera Pausa19:00 horas



Día 2, Mañana



Módulo 3: Estándares de diseño

Separar el contenido de la presentación, CSS5 beneficios del “código estándar”Diseño sin tablas XHTML Usabilidad = accesibilidad



Contenido / Presentación

Contenido CSS/XHTML Dispositivos





5 beneficios de código estándar1.Mismo contenido en diferentes dispositivos2.Mejor desempeño y despliegue3.Compatible con todos los browsers4.Manejo flexible5.Facilita la distribución de contenido



Diseño de CSS

DISEÑAR PARA FIREFOX… ES ESTANDARDespués, Explorer

Cómo? Con HACKS para IEhttp://www.google.com.mx/search?client=firefox-a&rls=org.mozilla%3Aes-AR%3Aofficial&channel=s&hl=es&q=css+hacks+for+IE&meta=&btnG=Buscar+con+Google2.430.000 resultados….



¿Porqué no diseñar con tablas?

Porque las tablas son para presentar datosPorque son una tentación fácil pero equivocadaPorque usarlas implica menos accesibilidadPorque hacen que los sitios no sean flexiblesPorque impide un sitio más funcional



Aplicación de CSS

http://somerandomdude.net/srd-projects/sanscons/Selección de Skins en bloggerTemplates Joomla



http://www.simmons.edu/gradstudies/



¿Qué es xhtml?

Versión más estricta y limpia de HTMLSu objetivo es remplazar a HTML ante su limitación de uso con herramientas basadas en XMLCombina la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.



¿Cómo funciona?

Documentos deben estar bien formados<p>Ejemplo de elementos mal <em>anidados</p>.</em>

Atributos y elementos deben ir en minúsculas <BODY>Ejemplo incorrecto</BODY>

Valores de las etiquetas siempre entre comillas <table rows=3> ejemplo incorrecto



IMPORTANTE

Existen varias versiones de XHTML (1.0, 1.1, Básico)Para utilizar una versión concreta, se debe incluir:

Definición del Tipo de Documento (DTD) que se pretende utilizar.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><title>Título</title></head><body> . . . </body></html>



A mayor USABILIDAD mayor ACCESIBILIDAD



Preguntas…

¿Estándar implica ahorro?¿qué ahorro?¿Evangelizar o taparse los ojos?



Miremos sitios…



Links Recomendados

Web Developer Toolbar (Firefox)http://chrispederick.com/work/web-developer/

Web Accessibility Toolbar (Internet Explorer)http://www.visionaustralia.org.au/info.aspx?page=614#Download

¿Porqué Jacob Nielsen no usa imágenes en su sitio?

http://www.useit.com/about/nographics.html

www.useit.com



Usabilidad y Accesibilidadhttp://www.cadius.org/http://www.sidar.org/http://www.usabilitynet.org/http://usableweb.com/http://www.usability.gov/http://universalusability.com/resources.html

Guías y Buenas prácticashttp://www.w3c.orghttp://www.guiaweb.gob.cl

Hojas de Estilohttp://www.alistapart.com/http://www.csszengarden.com/tr/espanol/http://www.sitepoint.com/article/style-web-forms-csshttp://www.howtocreate.co.uk/tutorials/css/introductionhttp://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlhttp://somerandomdude.net/srd-projects/sanscons/



Arquitectura de Informaciónhttp://www.adaptivepath.com/http://iainstitute.org/http://blog.jjg.net/http://jjg.net/ia/visvocab/spanish.htmlhttp://louisrosenfeld.com/home/

Herramientashttp://www.opensourcecms.com/http://www.webaim.org/simulations/screenreaderhttp://www.fonttester.com/http://web.archive.org/collections/web.htmlhttp://juicystudio.com/services/colourcontrast-es.php#contrasthttp://www.wat-c.org/http://www.howtocreate.co.uk/http://www.bradsoft.com/topstyle/tslite/index.asp

XHTMLhttp://www.w3c.es/Divulgacion/Guiasbreves/XHTML



No olvidar

Pensar en grandeComenzar pequeñoEscalar rápidoGenerar valorEscuchar ….a los usuarios


Usabilidad y Accesibilidad para la WebUAWEB A.C.

Muchas gracias!

[email protected]

Technology

Taller de Gestión de Proyectos Web de clase mundial