sesión 26 reflexión

5:06 p. m. | 0 comentarios

El viernes pasado, fue nuestra antepenúltima clase, se escucha triste pero es la realidad, voy a extrañar la clase, y como dice aquella canción me voy a llevar los mejores recuerdos, memorias pero sobre todo conocimientos muy gratos y valiosos para mi carrera.


En esta clase, nos reunimos por equipo del proyecto de nación, para checar los últimos detalles y agregar lo que nos faltaba.

Para el lunes, ya vamos a tener terminado el blog de personaje en el cual el trabajo escrito se lo vamos a mandar al maestro por mail, pero no solo es eso, ademas exponerlo enfrente de nuestros compañeros, ya que ellos nos van a calificar, también entregar por mail e impreso el proyecto de nación con el cual estuvimos trabajando a lo largo de este último mes.

Solo me cabe darle un grato agradecimiento al maestro por su labor a lo largo del cuatrimestre. Gracias maestro por su dedicación, se lo agradezco de corazón!!! :)

Sesión 26 extraclase

4:55 p. m. | 0 comentarios

PLANO DE SUPERFICIE (surface)

Tipos de Layout:

A continuacion podremos ver como se ven los diferentes tipos de layout dependiendo del q se trae, veremos como poco a poco va tomando forma nuestra pagina.

a)En esta primera imagen podemos ver como es un simple boceto basado en lineas, aquí no nos debemos preocupar por el contenido sino por la estructura congruente. Esto no es mas que un simple boceto tal cual.

b)Después de crear el boceto tenemos que definir las zonas especificas en las cuales irán las imágenes, botones, texto etc. No es mas que marcar las zonas que se utilizaran y las que vas a quedar libres.

c)Después viene la etapa de colocar todos los elementos que tiene acciones dentro de la pagina o fuera de ella, a estos les llamamos botones. y se colocan en esta etapa.

d)Ya por ultimo y antes de entregar nuestro template debemos ubicar las imágenes y textos en las zonas previamente marcadas y respetar estas dimensiones.

En este ejemplo podemos ver como una subpagina esta muy parecida, a pesar de que sufre algunos cambios esta dentro de la estructura, así es como a los usuarios se les hace mas fácil navegar dentro de la pagina. Esta pagina esta linkieda por el enlace de municipio y dentro de ella contiene mas información independiente.

En esta área colocamos en nombre de nuestro sitio ya que es importante que este asignado en en lugar importante.

Aqui podemos ver como el buscador esta colocado en la parte superior par que se mas fácil para nuestro usuario verlo al momento de ingresar.

En esta área están colocadas diferentes link hacia otras paginas de la misma organización.

Esta área fue asignada para únicamente poner imágenes.Por esto mismo ocupa una mayor dimensión que las demás áreas.

Aquí podemos ver como estas colocados algunos botones con acciones independientes de  la pagina.

sesion 26 reflexion

11:53 a. m. | 0 comentarios

El viernes pasado fuimos a una visita a la ciudad de México, en lo personal me gusto mucho ya que aprendimos cosas relacionadas con nuestra carrera, lo único malo fue el trafico y que llegamos muy tarde y que me pico un bicho extraño y me saco una roncha enorme pero bueno todo es parte de la diversión y el aprendizaje.

sesión 25 extraclase

5:17 p. m. | 0 comentarios

PRINCIPIO ESQUELETO


Nuestro domi de la pagina seria algo como esto

sesión 25 extraclase

4:31 p. m. | 0 comentarios

PLANO ESQUELETO

1 Diseño de navegación

* Mapa de sitio: este mapa nos indica las paginas interiores de nuestro sitio , así de cómo están organizadas entres.
* Navegación Global: esta opción nos permite estar dentro de la pagina y poder entra a cualquier pagina que tenga un enlace dentro del sito, esto es muy eficaz y agradable para los usuarios. Es bastante eficaz.
* Navegación local: esta opción nos permite estar dentro de la pagina y poder entra a cualquier pagina que tenga un enlace dentro del sito siempre y cuándo estén dentro de alguna sección en especial o una misma categoría.
* Navegación Suplementaria: es un atajo dentro del sitio asi podemos navegar de forma directa sin importar donde estemos o la pagina anterior.
* Navegación contextual: dentro de la margina encontramos link que tienen el nombre del sitio al cual podemos llegar sin tener que estar bajando de secciones.
* Navegación de cortesía: Se refiere a la ayuda o búsqueda extra.

2 Diseño de interfaz

Patrones de usuario

* Safe exploration

Se refiere a que nuestros usuarios puedan navegar de forma segura y confiable sin tener algún problema


* Instant gratification

Los usuarios van a tener la ventaja de encontrar de manera eficaz y eficiente lo que necesiten.


* Satisfacing

Los usuarios van a poder satisfacerse de rápidamente encontrado la información que requieran en el menor tiempo posible.


* Changes in midstream

Nuestra pagina va a permitirle a nuestros usuarios regresar a la opción donde estaban anteriormente si estos cambian de opinión y de esta manera no tendrán algún problema.


* Deferred choices

El usuario va a poder contestar o completar opciones dentro de la navegación.


* Incremental construction

En este caso no vamos a obligar a nuestros usuarios a una secuencia de pasos como en otros lugares, ya que va permitirle al usuario poder navegar de forma flexible y segura.


* Habituation

Nuestra pagina va a estar diseñada de la manera en que el usuario pueda seguir utilizando las acciones a las cuales esta acostumbrado.


* Spatial memory

El usuario recuerda más el lugar de donde están las cosas que el nombre o símbolo de la función, por eso es que pondremos opciones y lugares que siempre recuerde.


* Prospective memory

Al usuario le gusta que le estén recordando donde se encuentran las cosas y las secciones.


* Streamlined repetition

Nuestra página va a contar con una opción únicamente para recordar al usuario tareas, datos, información,etc que ya se le han proporcionado.


* Keyboard Only

Nuestro sitio va a dar alternativas de shortcuts.


* Other people advice

Nuestra página va a tener enlaces a redes sociales y blogs para que pueda conocer la opinión y comentario de otros usuarios sobre el sitio.

Patrones de contenido

- Taxonomía
* Lista de acciones de esta manera el usuario va a poder decidir en que quiere hacer dentro de la pagina.

- Estructura
* One window paging para que de esta manera sea mas cómoda la navegación dentro del sitio y pueda estar navegando el usuario dentro de la misma ventana sin que se le abran nuevas.
* Pop up windows cuando quiera el usuario ver una imagen o alguna otra como información cosa se abrirá en grande en una ventana pop up.

- Físico
* One window drill down la pagina ira bajando y tendrás que mover la barra lateral para ver lo que esta abajo

- Conceptuales
* Wizard por si llegara el caso en que tenga que llenar una serie de pasos para algo
* Intriguing branches tendremos hipervinculos para enlazar al usuario con otras paginas relacionadas con el tema
* Multilevel help abra una sección especial y únicamente diseñada para AYUDA en caso de que el usuario la requiera


Patrones de navegación

- Trama

* Clearentry points nuestra pagina tendrá como ya hemos mencionado anteriormente puntos de entrada

* Global navegation también tendrá botones globales


- Señales

* Color coded section nuestra pagina se dividirá por secciones y cada sección tendrá un color diferente para que lo puedan identificar.


Page layout

PRINCIPIOS

- Jerarquía visual

* Esquina superior izquierda

* Espacio en blanco para dar orden y se entienda mejor el mensaje

* Fuentes congruentes será una fuente formal ya que nuestra segmentación es de 45-55 años

* Colores y contrastes son muy importantes ya que así pueden identificar mejor las secciones

* Subordinación tener ordenados los títulos y subtítulos de las secciones

* Formas y grupos utilizaremos algunas formas geométricas ya que estas ayudan a agrupar


- Flujo

Nuestra pagina tendrá un gran flujo visual para que pueda trabajar bien los usuarios


PATRONES

- Jerarquía

* Center stage el escenario va a estar centrado y blanco a las orillas


- Agrupación

* Closable panels los paneles del menú se van a abrir y cerrar

* Tittle sections las secciones van a contar con un titulo y por consiguiente por un subtitulo


- Flujo

* Left/right alignment todo va a estar justificado a la izquierda


- Dinámicos

* Responsive disclosure se va a abrir una ventana nueva de acuerdo a lo que se requiera

* Liquid layout

sesion 25 extraclase

4:16 p. m. | 0 comentarios

PLANO ARQUITECTURA

1 Aproximación
*Estética, ya que la función principal de nuestra pagina es llamar la atención de nuestros usuarios para que de esta manera entren al sitio y naveguen dentro de el y así puedan obtener lo que están buscando y satisfagan sus necesidades.

2 Principios organización
- Taxonomía
*Lista de acciones de esta manera el usuario va a poder decidir en que quiere hacer dentro de la pagina.

- Estructura
* One window paging para que de esta manera sea mas cómoda la navegación dentro del sitio y pueda estar navegando el usuario dentro de la misma ventana sin que se le abran nuevas.

*Pop up windows cuando quiera el usuario ver una imagen o alguna otra como información cosa se abrirá en grande en una ventana pop up.

- Físico
* One window drill down la pagina ira bajando y tendrás que mover la barra lateral para ver lo que esta abajo

- Conceptuales
*Wizard por si llegara el caso en que tenga que llenar una serie de pasos para algo

*Intriguing branches tendremos hipervinculos para enlazar al usuario con otras paginas relacionadas con el tema

*Multilevel help abra una sección especial y únicamente diseñada para AYUDA en caso de que el usuario la requiera

Sesión 24 extraclase

8:53 p. m. | 0 comentarios

PLANO DE ESTRUCTURA
Es el diseño de interacción, es decir como interactua el usuario con el sitio.

1 Modelo Conceptual

-Metáfora (falta armarla bien)

*Modelo Físico nuestro sitio va a tener el patrón de one window paging, para que sea más cómodo para los usuarios y siempre se navegue dentro de la misma pagina.

*Formas de navegación nuestra pagina va a estar constituida por botones, algunos globales y otros serán clear entry points, etiquetas o tags, un menú principal.

*Planos nuestro sitio estará con pop ups, los cuales van a estar en el menú y cada vez que el usuario se coloque en el botón con el cursor se va a abrir y cerrar esa sección.

2 Manejo de Errores

*Prevención la interfaz va a estar sumamente bien diseñada y clara, para que de esta forma no se pierda en ningún momento el usuario al estar navegando dentro de ella, otra razón es para que desde el primer momento que entre sepa manejarla bien y entenderla

*Recuperación cuando el usuario se pierda, pueda regresar fácilmente al menú principal, o a la sección donde se encontraba.

*Errores de usuario se refiere a la búsqueda vacía, llenado de formato, y selección fuera de secuencia

*Errores del sistema son todos los missed links, programas o fuentes adicionales que no están instaladas como adobe acrobat, flash, entre otros.

3 Ubicación

*Identificación del sitio
*Nombre de la pagina (estamos decidiendo)
*Navegación persistente son todas las secciones y subsecciones con las que va a contar la pagina
*Indicador estas aquí
*Búsqueda va a tener una barra de búsqueda, para que el usuario pueda buscar lo que necesite

4 Búsqueda

*Mapa del sitio
-gráficos o hipertextos
-detallado general

*Motor de búsqueda de nuestra pagina va a hacer:
-exacta
-dinámica
-con categorías los cuales son los filtros

5 Lenguaje de cursor
*Cambio forma de cursor cada vez que el usuario le de click a una opción de cualquier lugar, el cursor va a cambiar de forma.

*Cambio del área (click) a su vez, cuando le de click, va a escucharse un sonidito el cual después lo vamos a decidir.





Sesion 24 reflexion

4:01 p. m. | 0 comentarios

 Querido blog, esta clase fue muy especial, por dos cosas muy importantes que vimos, la primera fue que vimos el plano de estructura, arquitectura y esqueleto para el proyecto de nación, con estos últimos tres ya completamos de ver los 5 planos de la metodología de Garrett, los cuales son:

1 estrategia
2 enfoque
3 estructura
4 esqueleto 
5 enfoque

Como ya comente, fue algo muy especial para mi ver toda la metodología de Garrett ya completa, para que en un futuro no muy distante la pueda seguir utilizando, ya que es una herramienta muy valiosa para mi carrera.

La segunda razón que hizo que la clase fuera importante, es que ya fue nuestra ultima clase de diseño de interfaz, en lo personal me llevo muchas cosas, como lo son aprendizaje, ratos amenos y chistosos entre otras cosas. 

Sesión 23 extraclase Proyecto de la Nación

12:00 p. m. | 0 comentarios

Análisis de la pagina
Plataforma
Nuestra pagina será hecha sobre una plataforma donde la interactividad del contenido pueda ser mas versátil o menos versátil y llegar a ser mas simple para el tipo de usuarios que en nuestro caso seran estos, con una plataforma Framework podemos darnos la libertad de implementar parámetros que no se han visto en las demás paginas, esto quiere decir que podemos decidir exactamente como será la navegación y la relación de las diferentes subpaginas.

Interfaz nuestra pagina cumplirá con las características de colaboración y publicación ya que la colaboración vendrá de todos los posibles comentarios, dudas,aportaciones, o en algunos casos se tendrá colaboración con algunas otras paginas similares, pero con el mismo enfoque, la publicación será información para personas de 45 a 55 años de edad, exclusivamente de interés publico.

Objetivos del sitio Metas del sitio: Ser una pagina que brinde información de los cambios que se llevan en los sectores de salud, así como en los diferentes sectores con los cuales los usuarios estén afiliados mediante una red nacional.Todo esto centrado en los usuarios de 45 a 55 años. Ser la pagina mas visitada por la gente arriba de los 45 años, ser una opción rápida, fácil y veraz. Posicionarnos en el mercado meta

Identidad de la marca: Propiciar un medio sencillo y una buena experiencia,confiable de información, proporcionar confianza y calidad

Métricas de los logros: Nuestro sitio contara con una sistema que medirá cuantas personas navegan dentro y superan un cierto tiempo establecido, ya que es diferente el numero de “visita” al numero “real de visitas”, realizaremos gráficas periódicamente que registrara el numero de descargas, ingresos monetarios mensuales.

Necesidades del usuario:

Definir los actores reales:

Usuarios: es muy importante saber definir que es lo que nuestros usuarios quieren obtener de nuestro sitio,ellos quieren obtener información y sobre todo un medio que este actualizado, un medio donde ellos puedan ,consultar, preguntar y opinar, un medio donde sus comentarios sean escuchados.

¿Qué esperan obtener los usuarios de este sitio?

Un sitio donde les sea fácil encontrar lo que desean

Plantillas de usuario


SEGMENTACIÓN DE USUARIOS

Nombre:

Sexo:

Edad:

Cibercultura: nivel de uso

Necesidades: media,baja alta

SEGMENTACIÓN DE USUARIOS


BENCHMARK

http://www.parroquiabosques.com/

Este sitio va dirigido a personas que se encuentran dentro del rango de edad que se nos asignó que es de 45 a 55 años ya que muchas personas en esta edad se empiezan a sentir mas atraídos por las celebraciones así como las actividades y servicios que ofrece la parroquia católica, aunque también creo que entraría en un rango de 10 años antes. Y en este sitio se muestran estos servicios que ofrece a los fieles así como también muestra un poco del ambiente que se vive en la comunidad buscando motivar a mas personas a unirse a ella.

http://www.photosig.com/

Sitio creado con la intención de ofrecer un espacio a fotógrafos, críticos de fotografía y simpatizantes de la misma en el que pueden subir fotografías desde profesionales hasta amateurs de las cuales la comunidad puede opinar sobre ellas ya se a de forma positiva o negativa con la oportunidad de replica. Debido a la naturaleza del sitio este va dirigido a un rango de usuario por debajo del nuestro situándolo entre 25 a 35 años con sus excepciones claro pero en general no es un tema que atraiga mucho la atención de nuestro rango 45-5 años.

http://www.inapam.gob.mx/

Este sitio esta enfocado hacia un rango de usuarios mayor al correspondiente de nuestro equipo esto debido a que es el sitio de una dependencia de gobierno enfocada hacia los adultos mayores los cuales son considerados como tal de la edad de 60 años para arriba, en dicho sitio se busca mantener al tanto a los usuarios sobre los beneficios que aporta al segmento, los derechos que los usuarios tienen, así como mostrar la estructura del órgano federal y ofrecer un servicio muy completo y necesario a la comunidad.

WWW.IFE.ORG.MX

Sitio que esta dirigido hacia cualquier rango de edades a partir de los 18 años por lo que también incluye nuestro rango de edades a cubrir ya que se trata de el sitio del Instituto Federal Electoral el cual ofrece información acerca de la sustentabilidad del organismo, la función que ofrece hacia la comunidad guía acerca de tramites relacionados con las elecciones, estadísticas y resultados electorales los cuales son de interés general para toda la población y de cualquier mayor de edad.

http://www.universia.net/

Este sitio esta orientado hacia un rango de edad de usuarios jóvenes de entre 20 a 25 años con lo cual el rango que nos corresponde queda totalmente fuera del enfoque hacia el que va este sitio ya que los usuarios meta de este sitio son principalmente universitarios; próximos, en curso y egresados los cuales en el sitio pueden encontrar información relacionada a su futura carrera profesional como lo muestran los siguientes servicios que se ofrecen como lo son: ser un sitio de encuentro de universitarios, creación de proyectos con fines de apoyo en prácticas de estudiantes e impulsar la innovación tecnológica de acceso a información de universitarios de las universidades en convenio.

WWW.CANACINTRA.ORG.MX

Es un sitio que esta enfocado a usuarios en un rango de edades de 35 a 55 años por lo que nuestro rango de edad correspondiente entra dentro del rango de los usuarios que acceden a este sitio ya que es un sitio visitado principalmente por empresarios y ejecutivos de grandes corporaciones con el fin de consultar información y buscar una interlocución ante dependencias gubernamentales siendo la mas grande organización de la industria en México la cual es de interés publico pero orientada principalmente hacia estos rangos de edad.

Sesión 23 extraclase Proyecto de la Nación

11:19 a. m. | 0 comentarios

Plano de ENFOQUE (Scope)

Requerimientos

Contenido

*Lenguaje adecuado para nuestro mercado meta.

*Página principal con completo orden estructurada y con espacios en blanco.

*Buen uso de tipografía, ya que nuestra segmentación es de 45 a 55 años, utilizaremos una formal.

*Tener presente las listas de acciones y objetos.

*One Window Pagin de esta manera nuestros usuarios puedan navegar sin alguna dificultad.

*Como nuestra segmentación son personas mayores, utilizaremos clear entry points para que se ubique mejor.

*A las personas mayores les gusta el orden es por eso que usaremos espacios en blanco.

*Con relación al punto anterior, la interfaz estará diseñada en un patrón de central stage, para que sea rápida, cómoda y fácil su navegación,

Funcionalidad

INTERACCIÓN

*La información va a estar muy bien ubicada, de esta manera el usuario va a poder encontrar lo que necesita de manera fácil sin perder tiempo.

NAVEGACIÓN

*Eficiente y eficaz

*Segura y confiable

*Rápida



Suscribirse a: Entradas (Atom)