Proyecto de la Nación

Diseño de InterfazMtro: José Luis Oliva Posada

Equipo:Claudia Álvarez IzquierdoClaudia Gardea Márquez

Miguel López AguilarAzucena Luévano García

Diseño Gráfico Multimedia

Proyecto de la NaciónPlano de ESTRATEGIA Actores

Estudiantes

EstatalMunicipal

Federal

EstatalMunicipal

Federal

Organizaciones

Empresas

Política

Free

Gobierno

Que estén en:

Medios

Jóvenesentre 20 y 25 años

Movimiento

Primario

Secundario

Terciario

Bajo

IAP

Partido

Bajo

lance

Digital

BajoBajo

MedioAlto

Univesitarios

Desempleado

Plano de ESTRATEGIA

Plano de ESTRATEGIA

Objetivos

AportarInformación

TurismoPolítica

Infraestructura

EducaciónEconomíaDemografía

-Hoteles, Restaurantes,etc.

-Candidatos, partidos,etc.

Comentarios

Accionesideas

cambios

Servicios

Información

Apoyo

Proponer

Obtener

TurismoPolítica

Infraestructura

EducaciónEconomíaDemografía

-Hoteles, Restaurantes,etc.

-Candidatos, partidos,etc.

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.

Objetivos

Tarjetas de Usuario

Modelo del Negocio: Roles y ServiciosRoles: 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 ENFOQUERequerimientos

Contenido Funcionalidad

Requerimientos

Contenido Funcionalidad

PLANO DE ESTRUCTURADiseño de Interacción: a)Modelo Conceptual: Responde a 3 cosas:• ModeloFísico:NuestrapáginatendráelpatrónOne-windowpagingyencasodesernecesarioMultipleWindows.• Formasdenavegación:Contaráconalgunoslinksbotonesymenús.• Planos:Secaracterizaráportenermenúsestilopop-up,queseabrenúnicamentecuandoel usuario lo indique.

La Metáforade lapáginaesunStarbucks, yaqueesun lugarenel siemprehay jóvenesyprecisamente 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 hacenenelcaféparahacerlomáspersonal)esteloanotaensucaféelcuálpuedeserllenadocon 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:paraqueelusuarionosepierdadentrodelapágina,leharemossaberentodomomento en que parte se encuentra. Haremos la interfaz lo más explícita posible para que el usuario logre entenderla fácilmente.Corrección:Encasodeelegirunaopciónincorrectalainterfazseloharásaberopodráregresarsin 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 delsitio,búsquedavacía,elegirunaopciónincorrecta.Erroresdel sistema:missed links,programaso fuentesadicionalesquenoestá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:Unespaciodebúsquedadirectaparaqueelusuariollegueadondedeseadesdeun principio.

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

MotordeBú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.-Respuestagráficaodehipertexto.

d) Lenguaje del cursor-Cambio de forma de usar : El cursor cambiara de forma al momento de escoger una opción delmenúprincipal,paraqueleseamásfácilidentificarlasopciones.-Cambiodelárea(click):Aldarclickaunaopciónseescucharáunsonidodecafé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-downapproach

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óndecortesía:Laopcióndeayudao‘help’y ladebuscador,vienenintegradasennuestra 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 USUARIO1. Safe explorationLos usuarios de nuestra página pueden navegar sin que les cobren ni les pidan datos innecesarios.

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

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

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

5. DeferredchoicesNuestra página permite al usuario dejar comentarios (si éste lo desea) al finalizar su navegación porlapágina,opuedenohacerlosinoesloquebuscaenesemomento.

6. Incremental constructionPermite 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. HabituationElmenúdenuestrapáginaseencuentraubicadoalcentro,yelenlacede‘ayuda’seencuentraen 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 memoryEl usuario recuerda donde están las opciones que tiene para su‘bebida’ dentro delmenú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 memoryLe dice al usuario dónde se encuentra, ubicando el nombre de la sección en la parte superior de la página.

10. Streamlined repetitionNuestrapágina,tienelaopciónderecordaralusuariodatosqueyaselehanproporcionado.

11. Keyboard OnlyNuestrapáginacuentaconlos‘shortcuts’básicos,ctrl+cyctrl+v.

12. OtherpeopleadviceNuestra 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íaUtilizaremos el de lista de objetos y temas

Lista de objetosPorqueasíserámásfácilparaelusuarioidentificarloquequierehacerdentrodelapáginaylocalizar el objeto que busca.Lista de accionesEsteayudaaidentificarenloqueelusuariovaatrabajaryloquequierehacerdentrodelapágina.

EstructuraUtilizaremosmultiple-windows,one-window-pagingypop-upWindows.MultipleWindows: Por si en la página existen enlaces a otras páginas, abrirá una páginaexterna.One-window-paging:Paraquelaventanavayacambiandoymuestrela informaciónqueelusuario solicita en la misma ventana.Pop-upWindows: Para que algún enlace de nuestra página abra esa información en unaventana pop-up mostrándola al usuario.

Patrón físicoTwo-pannelselector:Parafacilitarlanavegacióndelusuario.Patrones conceptualesExtras on demmand: También utilizaremos extras on demmand en caso de que el usuario quiera obtener información adicional.Wizard:Enlapartedondelosusuariosproponenyhacencomentarios, lapáginalosguiará

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

PATRONES DE NAVEGACIÓNTramaGlobal 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ñalesBreadcrums: Este servirá para que el usuario se localice dentro de la página y sepa por dónde hapasadoyadóndequiereir.Color coded section: Las secciones estarán divididas por colores para facilitar la navegación del usuario.

PAGE LAYOUTPrincipiosJerarquí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.Fuentescongruentes:Utilizaremosunafuentesemi-formaldirigidaaunpúblicode20a25añ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.ClosablePanels:ElmenúsedespliegaconformeelusuarioloindiqueMovable Panels: El usuario tiene la opción de acomodar los paneles como más se acomode.

Patrones dinámicosResponsiveenabling:Lainformaciónaparecehastaqueelusuariodaclick,estoloutilizaremosenelmenú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ónPaís/Estado/Municipio-Obtener-InformaciónPaís/Estado/Municipio-Obtener-InformaciónPaís/Estado/Municipio-Obtener-InformaciónPaís/Estado/Municipio-Obtener-InformaciónPaís/Estado/Municipio-Obtener-InformaciónPaís/Estado/Municipio-Obtener-Apoyo

3.-País/Estado/Municipio-Proponer-ServiciosPaís/Estado/Municipio-Proponer-AccionesPaís/Estado/Municipio-Proponer-Acciones

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

Tipos de Layout: Se presentan en las siguientes páginas.1.-Thumbnails-Bocetocontextosimulado.Estaeslaideaqueteníamosenunprincipio.2.-Roughs-Estebocetomuestraelprincipiodelasegundaideayladefinitiva.3.- Tight Layout- Presenta el primer boceto a computadora, todavía dispuesto amodificaciones.4.- Comp.- La presentación final de cómo quedaría ya el trabajo.

Como cambiaría el sitio:Tenemospensadoqueel sitiocambiedemodoCMSBackendmáspoderosoenelqueelprogramador 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.

AlmomentodehacerunLayoutesimportantetomarencuenta: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:Lacoherenciadentrodenuestrapágina,sepuedevisualizarporqueloquebuscaelusuario,lorecibe 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, loquepideconloquerecibeescoherente.

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

Plano de SUPERFICIE

encuentraenunsitioarmonioso,agradableyconelementoscongruentesycoherentesquele permiten visualizar una relación entre todos los elementos que conforman la composición del sitio. Elusuario,habiendovisitadolapáginaalmenosunavez,sabequepuederegresarenbuscademás información, pues esta le será proporcionada de forma inmediata sin problema alguno, satisfaciendo sus necesidades.

Grid Layout

TightLayout

Comp LayoutPágina Principal

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

PÁGINA PRINCIPAL

• ElsitioestádesarrolladocomoStarbucksdondeunollegaaunaparadoryescogequéesloquequierehacer;enestecasosedanlasopcionesdeobtener,proponeryaportarcomoelmenúyapartirdeesosevadesglosandoelsubmenúdecadamenú.• Debajodelospizarronesqueexistenenlatienda,setienenotrospizarronesdegisdondese escriben anuncios o información extra es por esto que nosotros utilizamos esos pizarrones paramencionarlainformaciónextraalaqueapareceennuestromenúydondeseinvitaausuario a escribir sus opiniones, aportes o propuestas.• Comocortesía,existeun“cajero”quefungecomolaopcióndeayudadentrodelsitio;estodebidoaqueeslaanalogíaqueobtenemosdeayudaynuestroconceptodeStarbucks.• Setienetambiénunabarradebúsquedaparahacermásrápidoelaccesoalainformaciónen caso de que nuestro usuario tenga muy claro que es lo que necesita.• COLORES:elusodecoloresencadapizarróntieneelobjetivodediferenciarclaramentecada opción y su tonalidad va acorde a los utilizados por la franquicia y así mantener la familiaridad. • TIPOGRAFÍA:latipografíaPalatinofueescogidayaqueenprimerinstancia,escompatiblecon 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

• Yaescogidalainformaciónexisteelbotóndeobtenerenlaparteinferiordelpizarrónyalhacerclick,elpizarrónaumentaeltamañoyaparecenuestrainformacióno“bebida”terminadapara 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ónaumenta su tamaño donde de título se tienen las opciones escogidas con un espacio para escribiryelbotóndeaportarparacuandosehayafinalizado.Tambiénsetienelaopcióndesubirarchivosparahacermásdinámicoycompletoelcontenidoaproponer.