Mockups - Aportes al Proyecto

Luego de definir los wireframes de nuestra aplicación Web Stamp-Bach, pasamos a definir el estilo de nuestro sitio mediante el uso de Mockups, que en pocas palabras, mostrar el diseño final de cada una de las páginas que componen nuestro sitio.

Definición de Colores

La combinación de colores entre el fondo, logo y botones del sitio fue algo difícil de decidir en el grupo. Opté por sugerir esta combinación de naranjo, negro y gris basándome en el sitio al cual le hice arquitectura inversa en la publicación anterior www.despertarciudadano.mx. A pesar de que esta página no está muy bien diseñada, he encontrado agradable la combinación de colores y buscando ahora en Internet me he encontrado con varias sugerencias que mencionan a estos colores como una buena combinación. 

En cuanto a la tipografía para cada uno de los textos decidimos diferenciarlos según los elementos presentes en el sitio. En mi caso escogí la fuente "Eras Medium ITC" para los botones, creo que su estilo no representa a un grupo de personas en particular. A mi gusto, creo que si usáramos una tipografía muy elegante o punteada en cada terminación de una letra incomodaría a gran parte de los usuarios a los cuales queremos llegar y lo mismo pasaría si usáramos la fuente "Comic Sans", un estilo de fuente de ese tipo me parece un tanto "chacotero" y no apropiado para un sitio de denuncias formales.

Mockups: diseños realizados

El grupo "Kobura" nos recomendó "Cacoo" como herramienta para realizar los mockups. Es una aplicación Web gratuita que funciona como editor de diagramas y está compuesto de muchas herramientas de diseño e imágenes pre diseñadas. La característica principal de Cacoo que nos llevó a seleccionarla como herramienta de diseño definitiva fue su modo de edición colaborativo en el cual todos los integrantes del grupo tenemos la posibilidad de editar un diagrama en forma paralela y de esta manera, facilitar la corrección de errores en tiempo real.

Tareas Asignadas

Para esta semana se me asignó realizar tres mockups: ingreso a Intranet (para administrador y fiscalizadores), publicar reparación (administrador) y eventos por reparar (administrador). Estos tres diseños son un poco distintos al sitio de los usuarios, cambia el tipo de logueo y el menú de botones. 

Mockup "Ingreso a Intranet": login dedicado al administrador y a fiscalizadores.

Mockup "Publicar Reparación": el administrador decide si publicar o no un arreglo informado por un fiscalizador.

Mockup "Eventos por Reparar": el administrador tendrá una vista de todos los eventos registrados en el mapa los cuales podrá filtrar por tipo de evento y fecha. Esta página en particular fue realizada para que el administrador pueda ver los eventos de la misma forma que los usuarios pero desde la misma Intranet.

Referencias:

- Herramienta para diseño de diagramas: http://www.cacoo.com/

- Referencia de opiniones respecto a combinaciones de colores: http://ar.answers.yahoo.com/question/index?qid=20070304113459AAdNhpW

Arquitectura de la Información

En la siguiente publicación mostraré la arquitectura de información inversa del sitio Web http://www.despertarciudadano.mx/, identificando el contexto bajo el cual se ha creado la página, tipos de usuarios, contenidos y un diagrama de arquitectura. He seleccionado este sitio debido a las similitudes que tiene en cuanto a sus funciones con el proyecto Stamp-Bach, realizado por mi grupo para la asignatura de Aplicaciones Internet.

Sitio Web "despertar ciudadano"

Contexto

Es una aplicación Web de apoyo a la ciudadanía mexicana, pues permite que cualquier tipo usuario sea capaz de realizar una denuncia que referente a problemas viales, ecología, educación, derechos humanos, entre otros. El usuario denunciante tiene la posibilidad de ubicar las denuncias en un mapa, etiquetarlas según el tipo y además adjuntar una imagen. Este sitio se caracteriza por tener un sistema de votos para cada denuncia. 

Por lo que he podido notar, no existe una asociación de la página con alguna institución o fiscalizador de la ciudadanía para registrar las resolución de problemas. Esto conlleva a que el control del sitio que bajo responsabilidad de los usuarios y un administrador.

Usuarios

Administrador del Sitio

Descripción: a pesar de la ausencia que puedo notar de este tipo de usuario en el sitio, podría decir que es el encargado de borrar del mapa aquellos problemas que hayan sido solucionados.

Capacidades: borrar denuncias registradas en el mapa de Google. 

Necesidades y tareas: mantener el control del sitio.

Nota: el sitio no mantiene ningún tipo de control sobre las publicaciones realizadas actualmente (es posible publicar datos completamente erróneos y no he visto algún tipo de gestión). La identificación de este usuario como partícipe del sitio ha sido realizada con el fin de explicar que en algún momento debió existir un administrador que controlara las publicaciones registradas por los usuarios.

Denunciantes

Descripción: cualquier visitante del sitio puede ser un denunciante y por lo tanto, tiene la capacidad de identificar un problema y registrarlo en la página.

Capacidades: aparte de realizar denuncias, este usuario puede participar en el sistema de votos del sitio donde cada denuncia publicada lleva un contador que aumenta según las votaciones realizadas por los mismo usuarios.

Necesidades y tareas: es el encargado de publicar información verídica de acuerdo a los problemas que puede identificar como ciudadano.

Nota: no existe un registro de usuario y por lo tanto, cualquier persona puede publicar denuncias lo que conlleva a perder el control del sitio, registrando de alguna manera información que no represente la realidad.

Contenido

Elementos

• Mapa de localización de denuncias
• Formulario para la publicación de denuncias
• Sistema de votos para cada denuncia
• Formulario para propuestas ciudadanas

Funciones

• Realizar la denuncia de un problema ciudadano
• Realizar una propuesta para la mejora de la ciudadanía
• Ubicar denuncias en un mapa de la ciudad
• Votar por una denuncia o propuesta ya registrada en el sitio
• Ver el estado actual de denuncias y propuestas: gráficos

Diagrama de Arquitectura

Debido al mal etiquetado de las páginas del sitio que he escogido, detallaré las funciones que se pueden realizar en cada una de ellas.

Al ingresar al sitio http://www.despertarciudadano.mx se carga automáticamente la pestaña de "Inicio" donde se da la bienvenida a los usuarios que visitan la página.

Siguiendo el orden de sus pestañas, el ingreso a "Denuncia" nos da la posibilidad de realizar tres acciones: "Votar por una Denuncia", "Ver Denuncias" y  "Formulario Denuncia". Ésta última página es la que le permite a los visitantes ingresar los datos de la denuncia para luego acceder a "Enviar Denuncia" y terminar el proceso de publicación.

En la siguiente página "Alza la Mano" se realizan propuestas para la mejora de la ciudadanía. En esta sección del sitio podemos ingresar datos al "Formulario de Propuesta" y dejar registrada la acción en el mapa.

La siguiente pestaña corresponde a "Victorias" donde se publican gráficos para ver las estadísticas de las denuncias y propuestas registradas por los usuarios.

La última pestaña llamada "Artículos" nos muestra información referente a la ciudadanía.

Conclusiones

Cada falencia detectada en este sitio me ha sido de gran ayuda para definir de mejor forma el etiquetado, elementos y funciones de mi proyecto, pues me resultó difícil explorar el sitio y comprender las funciones que se podían realizar en cada sección, debido a la mala organización del contenido.

Referencias

Sitio Web http://www.despertarciudadano.mx/