Sesión 25 Extraclase

PLANO DEL ESQUELETO (Skeleton Plane)

Diseño de Navegación:

Mapa de sitio

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.

Físico

Two-pannel selector: Para facilitar la navegación del usuario.

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

Breadcrumbs: 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.

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

Sesión 25 Contenido

En esta sesión de contenido hablaré sobre lo que trataba cada una de las empresas:

-La primera: HighTech es una empresa dedicada a hacer varias revistas, algunas con su propia página de internet. Nos mostraron desde como se empieza la idea, después el área de diseño, la persona encargada de ver la página de la revista en internet y por último el área (bastante grande) de impresión.

-La segunda: Una empresa enfocada a hacer CD's interactivos, me gusto mucho por que no enseñaron igualmente todas sus áreas y la manera en la que distribuyen el trabajo: Redacción y contenido, la persona encargada o experta en cada programa ya sea Flash o Modelado 3D

-La tercera, una empresa dedicada a la Animación y la primera en México: Snake & Eagle: Nos mostraron como es que se genera primero la lluvia de ideas, luego se plasma en un programa como photoshop y luego los encargados de animación plasman la imagen en 3D.

Sesión 25 Reflexión

En está sesión tuvimos un viaje a México con el fin de visitar empresas referentes al diseño. Las 3 me parecieron muy buenas empresas pero en lo personal me gustaron más las primeras 2 ya que la última que fue de animación me la imaginaba diferente. Me pareció muy útil el viaje por que nos dio un enfoque de la vida real en el diseño gráfico, aunque la organización de los tiempos de las visitas no fueron los establecidos por problemas de tráfico y llegamos a la 1:20 de la mañana, la visita a México fue excelente.

Sesión 24 Extraclase

La Extraclase de esta sesión abarca el Plano de ESTRUCTURA para el proyectode la Nación:

Diseño de Interacción:
1.- 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.)

2.- Manejo de errores: Hay 3 tipos:
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.)

3.- 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.

4.- 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.


5.- 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

Sesión 24 Contenido

Analizamos los 2 siguientes planos: de ESTRUCTURA y ESQUELETO:

PLANO DE ESTRUCTURA
Diseño de Interacción: cómo el usuario interactúa con la información
Arquitectura de la Información: como va a estar armada o estructurada la información.

Diseño de Interacción:

1. Modelo Conceptual: Responde a 3 cosas:
a) Modelo Físico: Abarca lospatrones deContenido-Estructura: Multiple Windows, One-window paging, Tiled panes, Niveles y/o Pop up Windows.
b) Formas de navegación: hipertexto (links,etc.), botones, menús o etiquetas.
c) Planos: pop-up, ventana reducida, formas, debe ser adecuado al contexto, hasta que se cierra uno aparece el otro, etc.
-Hacer una metáfora (mi sitio va a hacer del estilo de un super, un hormiguero, museo,telaraña,tostadora, salón de clases,etc) , analogía, parábola, nos ayuda a contruir una idea.
-Ser simil, congruente, consistente y confiable.

2.- Manejo de errores: Hay 3 tipos de errores: prevención, correción (el usuario ya se equivocó, como lo corregirá), y recuperación.
Errores de usuario: búsqueda vacía, llenado de formato, selección fuera de secuencia.
Errores del sistema: missed links, programas o fuentes adicionales que no están instaladas (flash, etc.)

3.- Ubicación:
-Identificación del sitio
-Nombre de la página (título en la parte superior de la página)
-Sección y subsecciones.
-Navegación persistente
-Indicador ‘’Estas aquí’’
-Búsqueda

4.- Búsqueda:
Mapa de sitio:
-Gráfico hipertexto
-Detallado General
-Mismo/diferente enfoque

Motor de Búsqueda:
-Próxima o exacta
-Dinámica o estática (ej. Voy escribiendo y me va dando opciones)
-Categoría o textual.
-respuesta gráfica, hipertexto.

Filtro:
-Categoría/enfoque
-lineal/compuesto
-dinámica/estática

5.- Lenguaje del cursor
-Cambio de forma de usar (que primero es una flecha y luego se convierte en una manita).
-Cambio del área (mouse over): se cambia el tamaño del cursor al colocarlo sobre un botón, etc.
-Cambio del área (click): cambio de las propiedades al dar click.

Arquitectura de la Información:

Definir si es por: Jerarquía, proximación, etc.

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
2.- Navegación Global: permite llegar a cualquier lugar del sitio de forma jerárquica (a lo mejor por pestañas ,etc.).
3.- Navegación local: permite llegar a los hermanos, hijos y padres dentro de la jerarquía.
4.- Navegación Suplementaria: Permite llegar a otros lugares del sitio de forma directa.
5.- Navegación contextual: El usuario puede navegar por medio de hipertextos (links, etc).
6.- Navegación de cortesía: Se refiere a la ayuda o búsqueda extra que se le pude dar al usuario.
7.- Navegación remota: se refiere mapa de sitio.

Diseño de Interfaz:
-Los patrones de usuario, contenido, navegación y layout
-Un boceto de la página (diseño, que botones vamos a emplear, etc.)

Diseño de la Información:
-Pantallas tipo layout: ej.
1.- estado-municipio-proponer política
2.- estado-municipio-aportar-política
3.- estado-municipio-obtener-política

Sesión 24 Reflexión

En está sesión abarcamos 2 planos más de los 5 elementos de experiencia del usuario.
Esto 2 planos son el de Estructura y Esqueleto.
El de Estructura define como los usuarios llegan a la página y adónde pueden ir cuando hayan terminado. Es el como se despliega una página al hacer uso de ella. Es la ARQUITECTURA de la INFORMACIÓN, es el arreglo de los elementos del contenido dentro del espacio de información.
Dentro del plano del Esqueleto se encuentra el diseño en 3 tipos (sesión24Contenido) y abaraca la colocación de botones, tablas,fotos, y bloques de texto. El esqueleto es diseñado para optimizar el arreglo de esos elementos para un máximo efecto y eficiencia.

Los planos que hemos visto nos servirán para llevar a cabo un proyecto más completo pero hasta ahora los planos que más me llaman la atención en especial son estos 2.

Sesión 23 Extraclase

El trabajo Extraclase de esta sesión consiste en hacer el plano de estrategia y de enfoque (requerimientos) completo tanto del blog del personaje como del Proyecto de la nación.

Del Blog del Personaje únicamente me faltaba el plano de enfoque (los requerimientos) el cual lo presento a continuación, el plano de estrategia lo complete desde la sesión 22

Lo siguiente es el PROYECTO DE LA NACIÓN:

Comenzaré con el plano de ESTRATEGIA:

Objetivos:

Actores:



Con los objetivos y actores, se definen los usuarios
Tarjetas de los Usuarios:

Jóvenes entre 20 y 25 años

BENCHMARK:

Benchmark

PLANO DE ENFOQUE