Proyecto Nacional: Plataforma para el debate

Proyecto de
la Nación

Diseño de Interfaz
Mtro: José Luis Oliva Posada
Equipo:
Claudia Álvarez Izquierdo
Claudia Gardea Márquez
Miguel López Aguilar
Azucena Luévano García
Diseño Gráfico Multimedia

Plano de ESTRATEGIA

Proyecto de la Nación Federal
Medios Estatal Digital
Plano de ESTRATEGIA Actores Municipal

Federal
Jóvenes Gobierno
Estatal
Empresas entre 20 y 25 años Municipal
Terciario Que estén en:
Primario Estudiantes
Secundario
Univesitarios
Bajo
lance
Free
Organizaciones
Desempleado
IAP
Alto
Medio Política
Movimiento
Bajo Partido
Bajo
Bajo

Infraestructura
Plano de ESTRATEGIA Turismo -Hoteles, Restaurantes,etc.
Información Política -Candidatos, partidos,etc.
Obtener Educación
Economía
Demografía
Apoyo

Objetivos
Objetivos

Servicios
Proponer
ideas
Acciones
cambios

Comentarios
Infraestructura
Aportar Turismo -Hoteles, Restaurantes,etc.
Información Política -Candidatos, partidos,etc.
Educación
Economía
Demografía

Identidad de la Marca: Proporcionar una
impresión de confianza, apoyo y seguridad.
Métricas del logro: Através de los
comentarios, aportaciones, seguidores y el
conteo de las visitas.

Modelo del Negocio:
Roles y Servicios
Roles: alguien que aporta(el gobierno, el usuario), alguien que
administra y alguien que utiliza la información (programador, el
usuario, seguidores,etc.).
Servicios: Informar,compartir información, permitir aportaciones
de otras personas,etc.

Plano de ENFOQUE
Requerimientos
Contenido Funcionalida

Requerimientos
o Funcionalidad

PLANO DE ESTRUCTURA
Diseño de Interacción:
a)Modelo Conceptual: Responde a 3 cosas:
• Modelo Físico: Nuestra página tendrá el patrón One-window paging y en caso de ser
necesario Multiple Windows.
• Formas de navegación: Contará con algunos links botones y menús.
• Planos: Se caracterizará por tener menús estilo pop-up, que se abren únicamente cuando
el usuario lo indique.

La Metáfora de la página es un Starbucks, ya que es un lugar en el siempre hay jóvenes y
precisamente esos son nuestros usuarios jóvenes entre 20 y 25 años. Además es un espacio
en él se puede aportar, obtener e incluso proponer; la atmósfera es agradable, servicial y
confiable.
Desde la entrada a la página aparecerá un mesero pidiéndole el nombre al usuario (algo que
hacen en el café para hacerlo más personal) este lo anota en su café el cuál puede ser llenado
con diferentes ingredientes (los ingredientes son la secciones: País, estado, municipio, obtener,
aportar, proponer, política, turismo, etc.)

b) Manejo de errores: Hay 3 tipos de errores:
Prevención: para que el usuario no se pierda dentro de la página, le haremos saber en todo
momento en que parte se encuentra. Haremos la interfaz lo más explícita posible para que el
usuario logre entenderla fácilmente.
Corrección: En caso de elegir una opción incorrecta la interfaz se lo hará saber o podrá regresar
sin problema alguno.
Recuperación: El usuario podrá seguir normalmente interactuando con la página después de
un error.
Errores de usuario: confundirse con la interfaz, no saber por dónde empezar, perderse dentro
del sitio, búsqueda vacía, elegir una opción incorrecta.
Errores del sistema: missed links, programas o fuentes adicionales que no están instaladas
(flash, etc.)

c) Ubicación:
-Identificación del sitio
-Nombre de la página: Seguimos discutiendo sobre algunos nombres.
-Sección y subsecciones: La página va a tener 3 secciones principales: País, Estado y Municipio,
de ellas se derivarán: Aportar, Obtener y Proponer, a su vez de ellas: Política, economía, turismo,
etc.
-Indicador ‘’Estas aquí’’
-Búsqueda: Un espacio de búsqueda directa para que el usuario llegue a donde desea desde
un principio.

d) Búsqueda:
Mapa de sitio:
-Gráfico hipertexto
-Detallado General
- diferente enfoque

Motor de Búsqueda:
- Exacta
-Ambas tanto dinámica como estática: Opciones como en la que el usuario va escribiendo y la
interfaz le va dando opciones.
-Respuesta gráfica o de hipertexto.

d) Lenguaje del cursor
-Cambio de forma de usar : El cursor cambiara de forma al momento de escoger una opción
del menú principal, para que le sea más fácil identificar las opciones.
-Cambio del área (click): Al dar click a una opción se escuchará un sonido de café sirviéndose.

Arquitectura de la Información:
Para que el usuario pueda moverse de manera eficiente y efectiva dentro de la página nuestra
información será acomodada de manera Jerárquica:
Top-down approach

PLANO DEL ESQUELETO
Abarca:
el diseño de navegación,
el diseño de interfaz y
el diseño de la información.

Diseño de Navegación:
1.-Mapa de sitio

Mapa de sitio
Obtener
País- Información-____
País-Apoyo
Estado-Información-____
Estado- Apoyo
Municipio-Información-____
Municipio-Apoyo

Aportar
País- Información-____
País-Comentarios
Estado-Información-____
Estado- Comentarios
Municipio-Información-____
Municipio-Comentarios

Proponer
País- Acciones-____
País-Servicios
Estado-Acciones-____
Estado- Servicios
Municipio-Acciones-____
Municipio-Servicios

Navegación Global: Permite al usuario llegar a cualquier parte del sitio de forma jerárquica y
también sirve para identificar las secciones.
Navegación contextual: Permite al usuario llegar a otros lugares del sitio en forma directa, el
contenido nos muestra el contenido de nuestro sitio por medio de botones y enlaces.
Navegación de cortesía: La opción de ayuda o ‘help’ y la de buscador, vienen integradas en
nuestra página por si el usuario llega a tener una duda o busca algo en específico, lo encuentre
de manera rápida.

Diseño de Interfaz:

PATRONES DE USUARIO
1. Safe exploration
Los usuarios de nuestra página pueden navegar sin que les cobren ni les pidan datos
innecesarios.

2. Instant gratification
Encuentran lo que buscan rápidamente sin perder el tiempo con un intro.

3. Satisfacing
Brinda al usuario información en el momento en que éste la solicita.

4. Changes in midstream
Permite al usuario regresar si éste cambia de opinión, sin generar cambios graves a la
información o a su navegación.

5. Deferred choices
Nuestra página permite al usuario dejar comentarios (si éste lo desea) al finalizar su navegación
por la página, o puede no hacerlo si no es lo que busca en ese momento.

6. Incremental construction
Permite al usuario navegar de forma flexible, sin tener que seguir una rígida serie de pasos.
En nuestra página, el usuario puede revisar la información poco a poco salteándose lo que no
necesita ver en ese momento.

7. Habituation
El menú de nuestra página se encuentra ubicado al centro, y el enlace de ‘ayuda’ se encuentra
en la representación de una persona detrás de mostrador con una nube a su lado con la
palabra ‘ayuda’; elementos que el usuario identifica como comunes y encuentra en ellos su
habituación.

8. Spatial memory
El usuario recuerda donde están las opciones que tiene para su ‘bebida’ dentro del menú
principal, más que los nombres precisos de cada sección.

Esto le ayuda a recordar donde se encuentra la información que solicita.

9. Prospective memory
Le dice al usuario dónde se encuentra, ubicando el nombre de la sección en la parte superior
de la página.

10. Streamlined repetition
Nuestra página, tiene la opción de recordar al usuario datos que ya se le han proporcionado.

11. Keyboard Only
Nuestra página cuenta con los ‘shortcuts’ básicos, ctrl+c y ctrl+v.

12. Other people advice
Nuestra página cuenta con este patrón, ya que es un sitio abierto a la opinión de los usuarios,
permitiéndoles dejar comentarios para así conocer sus necesidades.

PATRONES DE CONTENIDO

Taxonomía
Utilizaremos el de lista de objetos y temas

Lista de objetos
Porque así será más fácil para el usuario identificar lo que quiere hacer dentro de la página y
localizar el objeto que busca.
Lista de acciones
Este ayuda a identificar en lo que el usuario va a trabajar y lo que quiere hacer dentro de la
página.

Estructura
Utilizaremos multiple-windows, one-window-paging y pop-up Windows.
Multiple Windows: Por si en la página existen enlaces a otras páginas, abrirá una página
externa.
One-window-paging: Para que la ventana vaya cambiando y muestre la información que el
usuario solicita en la misma ventana.
Pop-up Windows: Para que algún enlace de nuestra página abra esa información en una
ventana pop-up mostrándola al usuario.

Patrón físico
Two-pannel selector: Para facilitar la navegación del usuario.
Patrones conceptuales
Extras on demmand: También utilizaremos extras on demmand en caso de que el usuario
quiera obtener información adicional.
Wizard: En la parte donde los usuarios proponen y hacen comentarios, la página los guiará

paso a paso para facilitar su navegación sin que se pierdan.

PATRONES DE NAVEGACIÓN
Trama
Global navigation: La página mostrará enlaces o botones para llevar al usuario a la información
que busca.
Pyramid: El usuario podrá regresar de ‘municipio’ a ‘país’ de una manera rápida con el uso de
los botones.
Señales
Breadcrums: Este servirá para que el usuario se localice dentro de la página y sepa por dónde
ha pasado y a dónde quiere ir.
Color coded section: Las secciones estarán divididas por colores para facilitar la navegación
del usuario.

PAGE LAYOUT
Principios
Jerarquía: Utilizaremos este principio para que los espacios y temas se encuentren ordenados
dependiendo de los aspectos más importantes a los de menor importancia, y conforme el
usuario desee navegar:
Esquina superior izquierda: Se encuentra el logo para que tenga mayor peso visual y le de
importancia a la empresa.
Espacios en blanco: Dan sensación de orden dentro de la página.
Fuentes congruentes: Utilizaremos una fuente semi-formal dirigida a un público de 20 a 25
años de edad.
Colores y contrastes: Dependiendo de cuál sea la sección, será indicada con un color
diferente.
Subordinación: Las fuentes mostrarán cuáles son los títulos y subtítulos diferenciándolos con
negritas y el tamaño de la letra.
Formas y grupo: Habrá formas geométricas (cuadrados, rectángulos) que ayuden a agrupar la
información.

Flujo:
Nuestra página no contará con ‘scroll’, lo cual permitirá que ésta tenga un buen y adecuado
flujo visual.

PATRONES DE AGRUPACIÓN:
Titled Sections: Cada sección lleva su título y sus respectivos subtemas.
Closable Panels : El menú se despliega conforme el usuario lo indique
Movable Panels: El usuario tiene la opción de acomodar los paneles como más se acomode.

Patrones dinámicos
Responsive enabling: La información aparece hasta que el usuario da click, esto lo utilizaremos
en el menú principal.

-Un boceto de la página (diseño, que botones vamos a emplear, etc.)

Diseño de la Información:
-Pantallas tipo layout:

1. País/Estado/Municipio-Obtener-Información
País/Estado/Municipio-Obtener-Información
País/Estado/Municipio-Obtener-Apoyo

3.-País/Estado/Municipio-Proponer-Servicios
País/Estado/Municipio-Proponer-Acciones
País/Estado/Municipio-Proponer-Acciones

4.-País/Estado/Municipio-Aportar-Comentarios
País/Estado/Municipio-Aportar-Información

Plano de SUPERFICIE
Tipos de Layout: Se presentan en las siguientes páginas.
1.- Thumbnails- Boceto con texto simulado. Esta es la idea que teníamos en un principio .
2.- Roughs-Este boceto muestra el principio de la segunda idea y la definitiva.
3.- Tight Layout- Presenta el primer boceto a computadora, todavía dispuesto a
modificaciones.
4.- Comp.- La presentación final de cómo quedaría ya el trabajo.

Como cambiaría el sitio:
Tenemos pensado que el sitio cambie de modo CMS Back end más poderoso en el que el
programador del proyecto se encargue de los cambios que se vayan teniendo.

Template Layout: El boceto presentado en el plano de ESQUELETO.
Grid Layout: La composición y uso de guías para estructurar el contenido. Se presenta en una
de las páginas siguientes.

Al momento de hacer un Layout es importante tomar en cuenta:
CONGRUENCIA:
Nuestra página mantiene congruencia, ya que los temas (secciones) tienen relación lógica
unos con otros.
La interfaz que tiene la página, tiene patrones que permiten al usuario ubicarse dentro de ella
sin problemas, sin que se pierda o confunda. Los botones (enlaces) mantienen uniformidad, lo
cual comunica congruencia en cuanto al diseño en general.

COHERENCIA:
La coherencia dentro de nuestra página, se puede visualizar porque lo que busca el usuario, lo
recibe de igual forma, es decir, que después de que el usuario entra a la página, al momento de
requerir cierta información, los botones y/o enlaces le arrojan el resultado que busca, es decir,
lo que pide con lo que recibe es coherente.

CONSISTENCIA:
Dentro de nuestra página, el diseño se mantiene uniforme cada vez que el usuario accede a
información o a distintos enlaces que son dentro de la misma.
Esto permite que el usuario se encuentre familiarizado cada vez que accede a un enlace distinto
pero siempre estando dentro de la página.
Se puede ver en el manejo de los botones, el diseño y acomodo de la información (que podemos
llamarlo estilo) y los colores se mantienen igual para no confundir al usuario.

CONFIANZA:
Dentro de nuestra página la confianza se transmite primordialmente al usuario, ya que se

encuentra en un sitio armonioso, agradable y con elementos congruentes y coherentes que
le permiten visualizar una relación entre todos los elementos que conforman la composición
del sitio.
El usuario, habiendo visitado la página al menos una vez, sabe que puede regresar en busca de
más información, pues esta le será proporcionada de forma inmediata sin problema alguno,
satisfaciendo sus necesidades.

Grid Layout

Tight Layout

Comp Layout
Página Principal

Explicación de cada una de las áreas y/o espacios dentro de la página.

PÁGINA PRINCIPAL

• El sitio está desarrollado como Starbucks donde uno llega a un aparador y escoge qué
es lo que quiere hacer; en este caso se dan las opciones de obtener, proponer y aportar como
el menú y a partir de eso se va desglosando el submenú de cada menú.
• Debajo de los pizarrones que existen en la tienda, se tienen otros pizarrones de gis donde
se escriben anuncios o información extra es por esto que nosotros utilizamos esos pizarrones
para mencionar la información extra a la que aparece en nuestro menú y donde se invita a
usuario a escribir sus opiniones, aportes o propuestas.
• Como cortesía, existe un “cajero” que funge como la opción de ayuda dentro del sitio;
esto debido a que es la analogía que obtenemos de ayuda y nuestro concepto de Starbucks.
• Se tiene también una barra de búsqueda para hacer más rápido el acceso a la información
en caso de que nuestro usuario tenga muy claro que es lo que necesita.
• COLORES: el uso de colores en cada pizarrón tiene el objetivo de diferenciar claramente
cada opción y su tonalidad va acorde a los utilizados por la franquicia y así mantener la
familiaridad.
• TIPOGRAFÍA: la tipografía Palatino fue escogida ya que en primer instancia, es compatible
con la mayor parte de los buscadores, a parte de esto, es de fácil lectura, visibilidad y también
es similar a la utilizada en la franquicia.

Página de OBTENER

• Ya escogida la información existe el botón de obtener en la parte inferior del pizarrón y al
hacer click, el pizarrón aumenta el tamaño y aparece nuestra información o “bebida” terminada
para asegurar que esté correcto y ya con la opción de descargar para obtener la información
requerida.

Páginas de APORTAR Y PROPONER

• Al finalizar de escoger las áreas en donde se busca aportar o proponer, el pizarrón
aumenta su tamaño donde de título se tienen las opciones escogidas con un espacio para
escribir y el botón de aportar para cuando se haya finalizado. También se tiene la opción de
subir archivos para hacer más dinámico y completo el contenido a proponer.

Proyecto Nacional: Plataforma para el debate

Recomendados

Recomendados

Más contenido relacionado

Similar a Proyecto Nacional: Plataforma para el debate

Similar a Proyecto Nacional: Plataforma para el debate (20)

Proyecto Nacional: Plataforma para el debate