1. 09/06/2010
Curso de Diseño de Portales de Transparencia
Objetivo de la sesión Diseñar la organización de un portal de
Usabilidad en los sitios web transparencia utilizando criterios de:
Errores y experiencias usabilidad, accesibilidad y lenguaje
Parámetros de Usabilidad ciudadano.
Accesibilidad en los sitios web
Lenguaje Ciudadano
Experiencias, Casos
1

2. 09/06/2010
Interface
Base de
datos
E/S
Sistema
de Innovación
Captura
La arquitectura de Para lograr la Requiere diseñar:
información arquitectura de Formatos de captura
significa: información es homogéneos
“Cómo organizar necesario Bases de datos
datos, información identificar los relacionadas
y conocimientos, contenidos que se
Sitio web que contenga
generados por una buscan presentar los datos, vinculos de
dependencia para para el usuario. la información.
presentarlos Contenidos
actualizados en un homogeneos en su
portal de internet” diseño
2

3. 09/06/2010
1.Diseñar la interfase e ir 2. Comenzar desde la
hacia atrás generación de los datos e
información.
Identificar qué botón o
sección de la interfase Identificar qué datos se
generan
requiere qué datos o
información. Hacer una ruta crítica de
cómo van aumentado los
Rastrear la información a datos hasta convertirse en
través de una ruta crítica. información.
Ubicar responsables de Generar una sección o
actualización. botón en el sitio que pueda
presentar la información.
Actualizar la información
Asignar un responsable de
periodicamente. la información.
Los diseñadores Web
Descargas pueden mejorar el Los usuarios novatos
rápidas tiempo de descarga
se molestan por
creando páginas Web
que incluyan una cambios inesperados
mínima cantidad de de la terminología, el
Arquitectura con Consistencia e gráficos.
orden, el color y las
estructuras de interfaces fuentes.
árbol predecibles
Navegación
basada en texto
Consistencia e interfaces
Descargas rápidas: predecibles:
Lazar et al. (2003). IT&Society,Vol. 1, Issue 3,Winter 2003.
3

4. 09/06/2010
Las rutas simples de Con sitios Web
navegación, descritas enormes, es más
por nombres textuales
y significativos ayudan efectivo tener menos
a los novatos. niveles, con muchos
Amplias estructuras de árbol para
arquitectura de información:
vínculos cada uno.
Los vínculos actúan
+ +
como términos
Perfil de
Lazar et al. (2003). IT&Society,Vol. 1, Issue 3,Winter 2003. descriptivos. Menos Usuario y
Escenarios Actividades y
pasos significan una de Uso Tareas.
Experiencia
navegación más
exitosa
Navegación basada en texto:
Perfil de Empresarios de
Usuario y Servicios del
Experiencia Estado
Escenarios Solicitud de
de Uso servicios de
información
Actividades Usar buscador en
y Tareas. el sitio
Buscar por temas
4

5. 09/06/2010
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
5

6. 09/06/2010
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 Imagen Gobierno Trafico Web Plan Mkt FuturoPortales
La pirámide Mostrar siempre
invertida busca los datos básicos
presentar lo más de la información
importante e ir e ir
disminuyendo la argumentando,
importancia del apoyando o
tema. complementando
las ideas.
6

7. 09/06/2010
Lee el texto: Como
escribir en Web (se Tiempo: 20 mins
encuentra en el CD pag
75-81)
Escribe un texto de
introducción para el
portal
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.
7

8. 09/06/2010
Barreras:
Hardware y el software.
Navegador Netscape 6 e
Internet Explorer 6 varía.
Los usuarios de Internet están habituados a unas
pautas determinadas en diseño. Características de la
Al primer vistazo intentará localizar ciertos pantalla: Adecuarse a
elementos en unos sitios concretos, es resoluciones de 800 x600.
importante considerar esto para que el usuario
no pierda tiempo en su búsqueda.
Imágenes: Muchas imágenes sin texto explicativo. Más
imágenes que texto.
Visita el portal del Gobierno
del Estado de México y .
Visita el portal de
Realiza estas actividades y Sanborns
compara. Fase 1. Piensa en un
Fase 1. En 20 segundos: producto
encuentre, servicios y correo
del webmaster. Fase 2. Buscar el
Fase 2. En un minuto: producto en el sitio.
localice información basica:
Acceso al contenido y diseño: clima, nombre gobernante, Fase 3. Registrate
•Acceso multimodal negativo. Utilizar un pago de servicios, directorio
funcionarios.
para "comprar" el
enlace más habitual, subrayado y si es Fase 3. En 5 minutos:
producto (no lo
posible mejor en azul. Registrese en la página con
compres)
•Tipo de letra ‘verdana’: Buen trazo y se otros datos Comenta tus
ve bien en pantallas de baja resolución. haga una pregunta sobre un hallazgos con el
servicio profesor.
•Contrastes de colores entre el fondo y Encuentre información sobre
el texto. un perfil (jóvenes, adultos,
adultos mayores, niños)
8

9. 09/06/2010
¿Sanborns o la del gobierno del Estado de Comportamiento del usuario: Es una actividad dominante
México? en la Web el volver a visitar páginas. Sin embargo,
mucha gente tiene problemas tratando de regresar a
¿Qué errores de accesibilidad o usabilidad páginas Web previamente visitadas.
encontraste? Muchos usuarios no entienden bien el comportamiento
¿Cuál está mejor organizado? ¿Por qué? de la herramienta para volver a visitar páginas (El botón
“Atrás”)
¿Qué aprendí del ejercicio?
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
9

10. 09/06/2010
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
De información: Estructura general del sitio,
lenguaje, contenidos
Satisfacción:
• recursos para •medida en la
realizar la Identidad y concepto
• reacción cual los usuarios
tarea: tiempo, pueden alcanzar Visual: gráfico, diagramación de
esfuerzo, afectiva de los espacios, imágenes y
usuarios sus metas en
número de clics multimedia
respecto a su tareas
experiencia. específicas
Eficiencia:
Efectividad:
De aplicaciones: Herramientas que apoyan la
experiencia del usuario
(motores de búsqueda, sistemas
Organización Internacional para la Estandarización (ISO 9241-11) de interacción y asistencia al
usuario).
10

11. 09/06/2010
1. Estándares del W3C.
2. Facilitar la creación, el archivo y la administración del Carencia de un consejo editorial
contenido utilizando sistemas accesibles.
3. Asegurar que el contenido y los servicios sean fáciles de Falta una estrategia de atención a
encontrar, descubrir y usar según las mejores prácticas de
diseño y desarrollo web. ciudadanos / usuarios
4. Garantizar la transparencia de la información
No se conoce al usuario
5. Promover la convergencia de sistemas gubernamentales
en los niveles federal, estatal y municipal para una
interacción sin barreras.
Los portales responden más a las
6. Asegurar que el contenido sea entendido fácilmente por necesidades de la institución que a las
todas las personas (Lenguaje Ciudadano) del ciudadano y en ocasiones incurren
en propaganda partidista.
•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.
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.
11

12. 09/06/2010
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.
Ejemplo de banner publicitario que simula un mensaje de
error:
Las interfaces de usuario deben ser predecibles y fáciles Uso decepcionante de herramientas de interface:
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 Un anuncio que simula una sugerencia del sistema
definidos, son usadas para otros fines. operativo Windows cuando se navega en la Web.
12

13. 09/06/2010
Métodos de indagación: Métodos de inspección:
Son aquellos métodos orientados a identificar los Son aquellas pruebas que cuentan con un
requerimientos del público objetivo y del negocio método de análisis exhaustivo por expertos de los
que resultando en un producto que empate sitios o sistemas para identificar errores
ambas expectativas. recurrentes.
Prototipado y categorización: Métodos de test:
Son aquellas pruebas que se realizan al producto Son pruebas realizadas a usuarios con
antes de ser concluido, y que implican mejoras a escenarios de uso sobre un producto liberado
reflejarse en el resultado final, tanto en el para obtener información específica de mejora de
prototipo de diseño como en la arquitectura de un diseño, arquitectura de información y/o
información. herramienta de interacción.
Ventanas que simulan un tip de MS-
Windows: Los usuarios pueden
percibir esto como un verdadero tip
del sistema operativo.
Los sitios gubernamentales deberán utilizar un
Ventanas pop-up: Son molestas y lenguaje enfocado al público objetivo, de
decepcionantes cuando despliegan manera que su relación con el sitio sea clara y
un mensaje de error. precisa. Los criterios a seguir son:
Evitar el uso de abreviaciones y tecnicismos;
Adecuar el lenguaje en relación al giro del sitio,
Usualmente, el dar clic en el botón
“OK” cerrará el cuadro de diálogo. enfocado en el público usuario;
Emplear lenguaje sencillo y de fácil
entendimiento para el ciudadano, evitando
Cuando el usuario da clic “X” en la palabras complicadas que dificulten la
esquina superior derecha de la comprensión.
ventana, éste espera que se cierre.
13

14. 09/06/2010
Usabilidad
Accesibilidad
Mapa del Sitio
Lenguaje Ciudadano
LA PROXIMA:
Plantillas del diseño
Diseño del sitio y pruebas
Y más…
Fuente: Guillermo Franco. ¿cómo escribir en la Web?
Anáisis de Usabilidad
Nos vemos la próxima…
14

15. 09/06/2010
Cantida
d de Más Más Porcentaje Tiempo
persona rápido lento de éxitos promedio
s
Observatorio Ciudadano: Monitorear y asegurar 1. Busca y consulta la
el buen funcionamiento del portal. Este grupo ley de egresos 2008, 14 00:40 02:18 78.57% 01:29
está constituido por usuarios, expertos y del Estado de N.L.
funcionarios que se encargan de emitir 2. Encuentre cuántos
proveedores tiene
recomendaciones para la mejora continua del registrados el 25 01:27 03:07 60.00% 02:17
portal. Gobierno del Estado
de Nuevo León.
3. Ubicar información
Durante el mes de febrero los miembros del de la Nómina 2008 de 22 02:28 03:16 18.18% 02:52
Observatorio Ciudadano delimitaron 22 tareas a Agua y Drenaje.
evaluar con ciudadanos. Las tareas se 4. ¿Cuál es el teléfono
reagruparon en 4 temas: atención ciudadana, del gobernador José
25 01:12 02:42 44.00% 01:57
Natividad González
transparencia, trámites y servicios, y temas varios Parás?
como turismo y economía. Fueron aplicadas a 56 5. Localiza la
ciudadanos de distintos perfiles en 10 sesiones dirección del
25 02:42 03:14 56.00% 02:58
de evaluación. secretario de
Educación.
Promedios: 22 01:41 02:55 51.35% 02:18
Cantidad
Más Porcentaje Tiempo
de Más lento
rápido de éxitos promedio
personas
1. Quisieras hacer una
denuncia anónima de un
20 00:39 00:49 100.00% 00:44
delito y trata de reportarlo a
la policía LO QUE MÁS GUSTÓ DEL PORTAL
2. Encuentra la página del
Registro Civil del Estado de
Nuevo León donde es posible
El diseño (colores, fotos, 18.2%
29 01:25 02:46 79.31% 02:05
solicitar un acta de anuncios)
nacimiento. No hacer Puedo encontrar la información 12.7%
solicitud.
3. Busca los requisitos para la que necesito fácilmente.
renovación de la licencia 24 00:37 02:48 79.17% 01:43 Puedo hacer trámites en línea 58.2%
para conducir.
4. Quieres participar como (por ejemplo la tenencia)
empresario en los concursos Puedo contactar e interactuar 20.0%
de equipo de cómputo, pide 13 00:33 02:07 61.54% 01:20
los datos para darte de alta
con funcionarios.
en gobierno como proveedor. Puedo conocer en qué y cómo 21.8%
5. Busca toda la información se usan mis impuestos.
necesaria para iniciar un
negocio en Nuevo León Puedo obtener atención y ayuda 45.5%
utilizando el portal del 18 00:36 01:55 72.22% 01:16 del gobierno.
gobierno del Estado (se
encuentra en una sola
página)
Promedios: 21 00:46 02:05 78.45% 01:25
15

16. 09/06/2010
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 12.7%
línea
Es difícil encontrar la información 60.0%
16