Proyecto de la nación
Upcoming SlideShare
Loading in...5
×
 

Proyecto de la nación

on

  • 1,915 views

Proyecto final de la Clase de Interfaz buscando tener un mundo 2.0

Proyecto final de la Clase de Interfaz buscando tener un mundo 2.0

Statistics

Views

Total Views
1,915
Views on SlideShare
1,896
Embed Views
19

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 19

http://malamx.blogspot.com 19

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Proyecto de la nación Proyecto de la nación Document Transcript

  • 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.
  • Tarjetas de Usuario
  • 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-Información País/Estado/Municipio-Obtener-Información 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 País/Estado/Municipio-Aportar-Información País/Estado/Municipio-Aportar-Información País/Estado/Municipio-Aportar-Información País/Estado/Municipio-Aportar-Información 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.