09/06/2010

1

Curso de Diseño de Portales de Transparencia

�Objetivo de la sesión

�Usabilidad en los sitios web� Errores y experiencias� Parámetros de Usabilidad

� Accesibilidad en los sitios web

� Lenguaje Ciudadano� Experiencias, Casos

�Diseñar la organización de un portal de transparencia utilizando criterios de: usabilidad, accesibilidad y lenguaje ciudadano.

09/06/2010

2

InterfaceInterface

Sistemade

Captura

Sistemade

Captura

Base de datosE/S

Base de datosE/S

InnovaciónInnovación

�La arquitectura de informaciónsignifica:

�“Cómo organizardatos, informacióny conocimientos, generados por unadependencia parapresentarlosactualizados en un portal de internet”

�Para lograr la arquitectura de información esnecesarioidentificar los contenidos que se buscan presentarpara el usuario.

� Requiere diseñar:� Formatos de captura

homogéneos� Bases de datos

relacionadas� Sitio web que contenga

los datos, vinculos de la información.

� Contenidoshomogeneos en sudiseño

09/06/2010

3

� 1.Diseñar la interfase e irhacia atrás

� Identificar qué botón osección de la interfaserequiere qué datos oinformación.

� Rastrear la información a través de una ruta crítica.

� Ubicar responsables de actualización.

� Actualizar la informaciónperiodicamente.

� 2. Comenzar desde la generación de los datos e información.

� Identificar qué datos se generan

� Hacer una ruta crítica de cómo van aumentado los datos hasta convertirse en información.

� Generar una sección o botón en el sitio que pueda presentar la información.

� Asignar un responsable de la información.

Descargas rápidas

Consistencia e interfaces

predecibles

Navegación basada en texto

Arquitectura con estructuras de

árbol

Descargas rápidas: Consistencia e interfaces predecibles:

� Los diseñadores Web pueden mejorar el tiempo de descarga creando páginas Web que incluyan una mínima cantidad de gráficos.

� Los usuarios novatos se molestan por cambios inesperados de la terminología, el orden, el color y las fuentes.

Lazar et al. (2003). IT&Society,Vol. 1, Issue 3,Winter 2003.

09/06/2010

4

Navegación basada en texto:

Amplias estructuras de árbol para arquitectura de información:

� Las rutas simples de navegación, descritas por nombres textuales y significativos ayudan a los novatos.

� Con sitios Web enormes, es más efectivo tener menos niveles, con muchos vínculos cada uno. Los vínculos actúan como términos descriptivos. Menos pasos significan una navegación más exitosa

Lazar et al. (2003). IT&Society,Vol. 1, Issue 3,Winter 2003.

+ +Perfil de Usuario y Experiencia

Escenarios de Uso

Actividades y Tareas.

Perfil de Usuario y Experiencia

Escenarios de Uso

Actividadesy Tareas.

Empresarios de Servicios del Estado

Solicitud de servicios de información

Usar buscador en el sitioBuscar por temas

09/06/2010

5

� Ser concreto.� Leer en línea es 25% más lento que lo normal.� Escribe 50% menos de lo normal.

� Escribe para ser escaneado� La gente scanea la información no lee� La estructura debe tener dos o tres niveles de

subtitulos� Utilice encabezados o subtitulos que den

significado y énfasis

09/06/2010

6

� Usar el hiper-texto (ligas) para dividir la información.� Divida la información en trozos de tópicos coherentes

para que sea más fácil de leer.� Use el estilo de piramide inversa: las conclusiones

primero para atrapar la atención.

Autoevaluación FuturoPortalesImagen Gobierno Trafico Web Plan Mkt

�La pirámide invertida busca presentar lo más importante e ir disminuyendo la importancia del tema.

�Mostrar siempre los datos básicos de la información e ir argumentando, apoyando o complementando las ideas.

09/06/2010

7

�Lee el texto: Como escribir en Web (se encuentra en el CD pag75-81)

�Escribe un texto de introducción para el portal

� Tiempo: 20 mins

� A la hora de diseñar un sitio web hay que tener en cuenta muchos puntos, no centrarnos únicamente en el contenido, prestar también mucho interés en la usabilidad y accesibilidad.

09/06/2010

8

� Los usuarios de Internet están habituados a unas pautas determinadas en diseño.

� Al primer vistazo intentará localizar ciertos elementos en unos sitios concretos, es importante considerar esto para que el usuario no pierda tiempo en su búsqueda.

Barreras:

Hardware y el software.Navegador Netscape 6 e Internet Explorer 6 varía.

Características de la pantalla:Adecuarse a resoluciones de 800 x600.

Imágenes: Muchas imágenes sin texto explicativo. Más imágenes que texto.

Acceso al contenido y diseño: •Acceso multimodal negativo. Utilizar un enlace más habitual, subrayado y si es posible mejor en azul.•Tipo de letra ‘verdana’: Buen trazo y se ve bien en pantallas de baja resolución.•Contrastes de colores entre el fondo y el texto.

Visita el portal del Gobiernodel Estado de México y . Realiza estas actividades y compara.

� Fase 1. En 20 segundos: encuentre, servicios y correodel webmaster.

� Fase 2. En un minuto: localice información basica: clima, nombre gobernante, pago de servicios, directoriofuncionarios.

� Fase 3. En 5 minutos:� Registrese en la página con

otros datos� haga una pregunta sobre un

servicio� Encuentre información sobre

un perfil (jóvenes, adultos, adultos mayores, niños)

� Visita el portal de Sanborns

� Fase 1. Piensa en un producto

� Fase 2. Buscar el producto en el sitio.

� Fase 3. Registratepara "comprar" el producto (no lo compres)

� Comenta tushallazgos con el profesor.

09/06/2010

9

� ¿Sanborns o la del gobierno del Estado de México?

� ¿Qué errores de accesibilidad o usabilidad encontraste?

� ¿Cuál está mejor organizado? ¿Por qué?

� ¿Qué aprendí del ejercicio?

� Comportamiento del usuario: Es una actividad dominante en la Web el volver a visitar páginas. Sin embargo, mucha gente tiene problemas tratando de regresar a páginas Web previamente visitadas.

� Muchos usuarios no entienden bien el comportamiento de la herramienta para volver a visitar páginas (El botón “Atrás”)

� Mejorar la presentación de las herramientas: Atrás/Adelante, favoritos, historial.

Cockburn (2003). IT&Society, Vol. 1, Issue 3, Winter 2003, PP. 159 – 183

09/06/2010

10

� Realiza un mapa del sitio (ACTUAL) parecido a los que se presentaron.

� Considera: jalpademendez.gob.mx� Perfil de usuario� Escenarios de uso� Actividades o tareas relacionadas

� Si gustas puedes ir trabajando en paralelo en la propuesta de tu mapa futuro

�Muestra tu trabajo al Profesor.

� Tiempo: 50 minutos

Organización Internacional para la Estandarización (ISO 9241-11)

• recursos para realizar la tarea: tiempo, esfuerzo, número de clics

Eficiencia:

• reacción afectiva de los usuarios respecto a su experiencia.

Satisfacción:•medida en la cual los usuarios pueden alcanzar sus metas en tareas específicas

Efectividad:

De información:

Visual:

De aplicaciones:

Estructura general del sitio, lenguaje, contenidos

Identidad y concepto gráfico, diagramación de espacios, imágenes y multimedia

Herramientas que apoyan la experiencia del usuario (motores de búsqueda, sistemas de interacción y asistencia al usuario).

09/06/2010

11

� 1. Estándares del W3C.

� 2. Facilitar la creación, el archivo y la administración del contenido utilizando sistemas accesibles.

� 3. Asegurar que el contenido y los servicios sean fáciles de encontrar, descubrir y usar según las mejores prácticas de diseño y desarrollo web.

� 4. Garantizar la transparencia de la información

� 5. Promover la convergencia de sistemas gubernamentales en los niveles federal, estatal y municipal para una interacción sin barreras.

� 6. Asegurar que el contenido sea entendido fácilmente por todas las personas (Lenguaje Ciudadano)

� Carencia de un consejo editorial

� Falta una estrategia de atención a ciudadanos / usuarios

� No se conoce al usuario

� Los portales responden más a las necesidades de la institución que a las del ciudadano y en ocasiones incurren en propaganda partidista.

Navegación por fichas Diferenciando claramente la opción seleccionada con otro color

Podrían haber reducido las dos líneas de fichas a una sola.

•A la izquierda de la barra de navegación aparecen unos iconos que apenas se distinguen, uno de ellos es el mapa de sitio, otro el buscador y otro la configuración que debe tener el ordenador.

• Parece una falta importante de usabilidad, si no encuentras algo quieres acudir al buscador y te cuesta encontrarlo.

09/06/2010

12

� Al pulsar sobre una pestaña te lleva a una nueva página con un diseño completamente distinto al inicial. Las segundas páginas son iguales entre ellas, presentan el siguiente formato:

� En este sitio web existe una organización en red peligrosa, pues nunca sabes muy bien hacia donde vas y a donde has ido.

� En cuanto a un lugar de contacto, desde la página de inicio no es posible encontrarlo, hay que ir a una página secundaria.

Las interfaces de usuario deben ser predecibles y fáciles de usar. Muchas de las frustraciones relacionadas a la navegación Web, ocurren cuando las interfaces son impredecibles.

•Cuando ciertas herramientas, que tienen roles bien definidos, son usadas para otros fines.

� Ejemplo de banner publicitario que simula un mensaje de error:

� Uso decepcionante de herramientas de interface:

� Un anuncio que simula una sugerencia del sistema operativo Windows cuando se navega en la Web.

09/06/2010

13

Métodos de indagación:� Son aquellos métodos orientados a identificar los

requerimientos del público objetivo y del negocio que resultando en un producto que empate ambas expectativas.

Prototipado y categorización: � Son aquellas pruebas que se realizan al producto

antes de ser concluido, y que implican mejoras a reflejarse en el resultado final, tanto en el prototipo de diseño como en la arquitectura de información.

Métodos de inspección:� Son aquellas pruebas que cuentan con un

método de análisis exhaustivo por expertos de los sitios o sistemas para identificar errores recurrentes.

Métodos de test:� Son pruebas realizadas a usuarios con

escenarios de uso sobre un producto liberado para obtener información específica de mejora de un diseño, arquitectura de información y/o herramienta de interacción.

Ventanas que simulan un tip de MS-Windows: Los usuarios pueden

percibir esto como un verdadero tipdel sistema operativo.

Ventanas pop-up: Son molestas y decepcionantes cuando despliegan

un mensaje de error.

Usualmente, el dar clic en el botón “OK” cerrará el cuadro de diálogo.

Cuando el usuario da clic “X” en la esquina superior derecha de la

ventana, éste espera que se cierre.

Los sitios gubernamentales deberán utilizar un lenguaje enfocado al público objetivo, de manera que su relación con el sitio sea clara y precisa. Los criterios a seguir son:

� Evitar el uso de abreviaciones y tecnicismos;

� Adecuar el lenguaje en relación al giro del sitio, enfocado en el público usuario;

� Emplear lenguaje sencillo y de fácil entendimiento para el ciudadano, evitando palabras complicadas que dificulten la comprensión.

09/06/2010

14

Fuente: Guillermo Franco. ¿cómo escribir en la Web?

�Usabilidad

� Accesibilidad�Mapa del Sitio

� Lenguaje Ciudadano� LA PROXIMA:

� Plantillas del diseño

�Diseño del sitio y pruebas

� Y más…

Nos vemos la próxima…

Anáisis de Usabilidad

09/06/2010

15

� Observatorio Ciudadano: Monitorear y asegurar el buen funcionamiento del portal. Este grupo está constituido por usuarios, expertos y funcionarios que se encargan de emitir recomendaciones para la mejora continua del portal.

� Durante el mes de febrero los miembros del Observatorio Ciudadano delimitaron 22 tareas a evaluar con ciudadanos. Las tareas se reagruparon en 4 temas: atención ciudadana, transparencia, trámites y servicios, y temas varios como turismo y economía. Fueron aplicadas a 56 ciudadanos de distintos perfiles en 10 sesiones de evaluación.

Cantidad de

personas

Más rápido

Más lento

Porcentaje de éxitos

Tiempo promedio

1. Busca y consulta la ley de egresos 2008, del Estado de N.L.

14 00:40 02:18 78.57% 01:29

2. Encuentre cuántos proveedores tiene registrados el Gobierno del Estado de Nuevo León.

25 01:27 03:07 60.00% 02:17

3. Ubicar información de la Nómina 2008 de Agua y Drenaje.

22 02:28 03:16 18.18% 02:52

4. ¿Cuál es el teléfono del gobernador José Natividad González Parás?

25 01:12 02:42 44.00% 01:57

5. Localiza la dirección del secretario de Educación.

25 02:42 03:14 56.00% 02:58

Promedios: 22 01:41 02:55 51.35% 02:18

Cantidad de

personas

Más rápido Más lento

Porcentaje de éxitos

Tiempo promedio

1. Quisieras hacer una denuncia anónima de un delito y trata de reportarlo a la policía

20 00:39 00:49 100.00% 00:44

2. Encuentra la página del Registro Civil del Estado de Nuevo León donde es posible solicitar un acta de nacimiento. No hacer solicitud.

29 01:25 02:46 79.31% 02:05

3. Busca los requisitos para la renovación de la licencia para conducir.

24 00:37 02:48 79.17% 01:43

4. Quieres participar como empresario en los concursos de equipo de cómputo, pide los datos para darte de alta en gobierno como proveedor.

13 00:33 02:07 61.54% 01:20

5. Busca toda la información necesaria para iniciar un negocio en Nuevo León utilizando el portal del gobierno del Estado (se encuentra en una sola página)

18 00:36 01:55 72.22% 01:16

Promedios: 21 00:46 02:05 78.45% 01:25

LO QUE MÁS GUSTÓ DEL PORTAL

El diseño (colores, fotos, anuncios)

18.2%

Puedo encontrar la información que necesito fácilmente.

12.7%

Puedo hacer trámites en línea (por ejemplo la tenencia)

58.2%

Puedo contactar e interactuar con funcionarios.

20.0%

Puedo conocer en qué y cómo se usan mis impuestos.

21.8%

Puedo obtener atención y ayuda del gobierno.

45.5%

09/06/2010

16

LO QUE MENOS GUSTÓ DEL PORTAL

El diseño (colores, fotos, anuncios) 12.7%Es muy confuso navegar 43.6%No está organizado adecuadamente 63.6%Maneja terminología difícil de entender 18.2%No puedo hacer todos los trámites en línea

12.7%

Es difícil encontrar la información 60.0%