Desarrollo de un Portal Planificación 16 de octubre, 2010 Ninoschka Dante Ninoschka.dante@agesic.gub.uy
Que buscan nuestros usuarios? 1. Información? 2. Productos? 3. Servicios? Diseño fácil de entender y que resulte extremadamente fácil de utilizar 2
Que brinda nuestro portal? 1. Información? 2. Productos? 3. Servicios? Contenido relevante, variado y actualizado Diseño fácil de entender y que resulte extremadamente fácil de utilizar 3
Seamos usuarios por un instante 1. Entrar al sitio www.mtss.gub.uy Qué trámites se pueden hacer en línea? 2. Entrar al sitio www.agesic.gub.uy Cómo se llaman las autoridades del organismo? Ejercicio 1 3. Entrar al sitio www.aduanas.gub.uy Cómo se realiza un trámite de importación? 4. Entrar al sitio www.inda.gub.uy Cómo tramitar una tarjeta alimentaria? 4
Empecemos nuestro proyecto 1. Nuevo sitio? 2. Re-diseño? 3. Mejora continua? Opción 1. Tenemos un equipo listo para hacerlo integrado por un equipo multidisciplinario Opción 2. Vamos a tercerizar el proyecto, haremos solamente de contraparte y de cliente funcional 5
1era. Carta a los Reyes Magos el equipo 1. Comunicación 2. Diseño 3. Tecnología 4. Edición Resultado: Contenidos De Calidad, Relevantes, Actualizados, Accesibles, 6
1. Equipo de Comunicación Roles y funciones Cuál es el rol y que perfil deberían tener? 2. Equipo de Diseño Qué esperamos del equipo de diseño? Ejercicio 2 3. Equipo de Tecnología Cuál debería ser el punto de partida del equipo de tecnología? 4. Equipo de Editores Cuándo entran en acción y cual es su objetivo? 7
2da. Carta a los Reyes Magos Estrategia Foco en el ciudadano!!!! Decreto. 450/09 1. Estrategia de Comunicación 2. Nivel de Desarrollo (Gob-E) 3. Usabilidad 4. Accesibilidad (A, AA, AAA) 5. Normativa vigente 6. Seguridad Resultado: Un proyecto de Gobierno Electrónico 8
Nivel de Desarrollo de un Portal 1. Información Identidad, Información Institucional (Ley de Acceso??), buscador, mapa del sitios, novedades 2. Interactividad Formulario de Contacto, encuestas, mail de autoridades, comentar, foros, canales alternativos Ejercicio 3 3. Transacciones Trámites y servicios on line, información y requisitos, pagos, firma electrónica, acceso a aplicaciones de backoffice 4. Transformación 9
Identifique los niveles desarrollados 1. Gobierno Electrónico Dirección General de Comercio, Uruguay Educa y Estado de Nuevo León 2. Usabilidad y accesibilidad Aduanas, BPS y soluciones alternativas Alexubago 3. Normativa Ejercicio 4 MEF (Ley 18.381), AGESIC (Ley 18.331), Uruguay educa (Propiedad Intelectual), ANTEL (políticas de uso), marm.es (política de accesibilidad) 10
Ciclo de Vida www.agesic.gub.uy
Nace y se reproduce 1. Relevamiento 2. Diseño 3. Implementación 4. Carga de Contenidos 5. Testing 6. Capacitación 7. Puesta en producción 8. Gestión de Contenidos Edición, Corrección, Publicación 9. Mejora continua Calidad, auditoría, planificación 12
Ordenando las piezas Wireframes Público objetivo Prototipo Diseño Gráfico Test de usuarios Arquitectura de la Información Funcionalidades a incluir Maquetación Carga de Contenidos Ejercicio 5 Nivel de Desarrollo deseado Validar accesibilidad Estadísticas de navegación 13
Juntemos las piezas: El relevamiento 1. Público objetivo 2. Expectativas de la organización 3. Estrategia de comunicación 4. Requerimientos funcionales 5. Inventario de contenidos 6. Nivel de desarrollo esperado 7. Normativa a cumplir 8. Contexto tecnológico Resultado1: ESRE 14
Una alfombra roja para el usuario: el Diseño 1. Arquitectura 6. Maquetación 2. Wireframes tipo 5. Prototipo 3. Wireframes detallados 4. Estética 15
Organizar los contenidos: Arquitectura 1. Organizar los contenidos de manera eficiente 2. Obtener un esquema que permita visualizar los conjuntos de contenidos y su vinculación 16
Un Wireframe grafica 1. Elementos de navegación: menús, accesos directos e hipervínculos. 2. Elementos de información: contenidos de texto e imágenes. 3. Elementos de interacción. 4. Elementos de apoyo: ayuda y orientación, como mapas de navegación o faqs. 5. Elementos destacados: banners publicitarios o destacados internos. 17
Ejemplos de Wireframe La arquitectura de la información ya está establecida. Ahora el diseñador podrá diferentes alternativas estéticas. 18
No re-inventar la rueda: Wireframes de Interacción Diseño de la Interacción: 1. Identificar las principales funcionalidades. 2. Desarrollar el flujo del proceso. 3. Racionalizar los pasos. 4. Determinar los términos a utilizar 5. Que la interacción resulte familiar. 19
Bocetar, bocetar, y bocetar??? Cuántas pantallas debemos bocetar? 1. Identificar las diferentes áreas y las páginas: Portada, listados, contenido genérico, formularios, secciones, etc. 2. Sacar factor común: Determinar la cantidad de plantillas que se necesitarán. Resultado2: Bocetos del Portal 20
Crear sensaciones: Diseño gráfico Por axelfoxll - http://photobucket.com/ El diseñador gráfico ahora debe: 1. Crear una percepción positiva. 2. Lograr la predisposición del usuario a utilizar el portal. 3. Fortalecer las funcionalidad cuidando la sobrecarga. 4. Reflejar la identidad institucional. 5. Diseñar teniendo en cuenta pautas de accesibilidad. Resultado3 y 4: Diseños y manual de estilos 21
Hay que rediseñar el portal de Se pide: Sos el único que puede hacerlo 1. Wireframes detallado de la portada Logo, políticas, buscador, mapa del sitio, preguntas frecuentes, RSS, News Letter, Información Institucional, Novedades, Sugerencias, información de contacto, ley 18.381, Ingreso a un área privada, Dirección, teléfono, CP, horario de atención, trámites e información a los ciudadanos 2. Wireframes del formulario de contacto Ejercicio 6 http://gomockingbird.com/mockingbird/ 22
Navegando por la solución: Prototipo Asegurarse que no falta nada y que la lógica es correcta. 1. Partiendo de los bocetos se diseña un prototipo en HTML para probar la navegación. 2. A que distancia de la puerta de entrada nos quedan los contenidos. Por equiposcreativos.com Resultado5: Prototipo 23
Todas las piezas en su lugar: Maquetado Construir la estructura del sitio: Bocetos + estética = plantillas Usando HTML CSS WCAG 2.0 Ya tenemos el diseño del sitio web Resultado6: Plantillas 24
25
El turno es ahora de los programadores Implementación 1. Tienen seleccionada la herramienta??? HTML, PHP, Joomla, Liferay, Plone, Drupal, Web Phere, GxPortal 2. Hay que integrar el diseño en los gestores de contenido 3. Integran Bases de datos 4. Configuran aplicación 5. Buscan soluciones a todo 26
Editores al ataque Carga de contenidos Preparar los contenidos Título Descripción o copete Contenido Imágenes Adjuntos Material Relacionado Ubicación en el Portal Definir políticas Cargar contenidos al portal 27
Mejor prevenir que curar: Testing Plan de testing: Funciona tal como lo planificamos Manejo de errores Tiempo de carga Valida estándares Testing de Accesibilidad Test de usuarios http://www2.upc.edu.pe 28
Preparar el equipo: Capacitación Es fundamental capacitar a todos los actores: 1. Funcionamiento de la herramienta 2. Uso de los estilos 3. Estándares a seguir en los contenidos 4. Contenidos Accesibles 5. Estilo de redacción Resultado7: Manuales de usuario, para editores 29
Se abre el telón: Puesta en producción 1. Controlar la puesta en producción para ir corrigiendo detalles: Ver como navegan los usuarios Estar atentos al mail de contacto 2. Definir estrategia de actualización del portal Planificar nuevos contenidos 30
El público está ansioso Gestión de los contenidos Ejemplo de Roles Genera contenidos Desarrolla el contenido Carga al portal Corrige Corrige estilo de redacción Titula Define el copete Publica Valida el contenido Valida la ubicación Control de estándares fijados Publica 31
Contratando el desarrollo 1. Cual es el objeto de la contratación? 2. Qué antecedentes le pedimos a la empresa? 3. Qué equipo será necesario? 4. Cuáles son los entregables que le pediremos? Ejercicio 7 5. Cuáles son los requerimientos mínimos que le pediremos? 6. En que etapas subdividimos el contrato? 7. Cuál es el costo estimado? 32