Plano de Estructura para proyecto de nación.

Metáfora

La metáfora a emplear dentro de nuestro sitio es un panal de abejas donde los usuarios, pueden obtener beneficios muy grandes y aportar cosas muy útiles para los usuarios y el sitio en si, como en un panal de abejas todos trabajamos por obtener un beneficio mutuo.

Modelo Conceptual

Modelo Físico

Sera One Window Paging y cuando muestre estadísticas sera multiple window.

Formas de Navegación

Será un menu con algunos links para redirigir a otros sitios amigos.

Planos

Se manejaran ventanas reducidas dentro del sitio cuando el usuario se coloque sobre un boton, para mostrar un preview de lo el usuario va acceder.

Manejo de Errores

Prevención

Se mostrara un mapa del sitio en la parte inferior derecha para que el usuario ubique donde esta y pueda navegar fácilmente.

Corrección

El usuario podrá avanzar o retroceder sin tener concecuencia alguna, para de esta manera poder corregir cualquier error.

Recuperación.

El usuario podrá ver donde ha surgido un error y va a poder seguir avanzando sin problema alguno.

Ubicación

Nombre

Estamos en eso.

Secciones

País, estado, municipio, Sector (Politica, educativa, economía, etc.), aportar, obtener, proponer.

Indicador

Se va a incluir un mapa del sitio en la parte inferior derecha y en dicho mapa se mostrara donde esta el usuario, para que en todo momento el usuario se ubique.

Buscador

Se va incluir un buscador en la parte superior derecha para que el usuario pueda encontrar mas rápido la información.

Búsqueda

Mapa del sitio

Gráfico

General

Motor de Búsqueda

Proximal

Dinámica

Respuesta de Hipertexto y gráfica

Lenguaje de cursor.

Cambio de forma

El cursor mostrara un blur cuando se coloque arriba de un boton, para poderlo identificar como tal.

Cambio de Area.

Al dar click se emitira un sonido para notificar al usuario de la acción que acaba de realizar.

Arquitectura de la información.

La información va a ser estructurada de manera jerárquica.

Sesión 24 Contenido

Sesión 24 Contenido

En esta sesión vimos lo que es el plano de estructura y esqueleto.

Diseño de la interacción.

+Modelo Conceptual

+Manejo de errores

+Ubicación

+Búsqueda

+Lenguaje de cursor

Arquitectura de la Información.

+Jerárquica

Diseño de la información.

Diseño de la interfaz.

Diseño de la información.

Sesión 23

Extraclase

En esta sesión se termino de definir nuestros usuarios en base a nuestros objetivos y actores, para después crear lo que es nuestro perfil de usuario todo esto en una tarjeta donde se muestra la información real de nuestros usuarios, finalmente definimos lo que son roles de nuestro usuarios y como es que estos van a interactuar con nuestro sitio.

OBJETIVOS

ACTORES

TABLA ACTORES - OBJETIVO - USUARIOS

PERFIL DE USUARIOS. (TARJETAS)

TABLA ACTORES - ROLES (Definir que quiere obtener - aportar el usuario del sitio)

Sesión 22

Durante esta sesión vimos a mayor profundidad los que es el plano de estrategia, de esta manera logramos mejorar algunos puntos en los que no teníamos la perspectiva correcta a estos puntos por lo que ahora vamos a poder mejorar nuestro blog y nuestro proyecto de nación

Sesión 21

Contenido

STRATEGY Plane:

1.- Necesidades del Usuario: Como satisfacer al usuuario.
User needs- ¿Qué quieren nuestros usuarios obtener del sitio?
Con segmetación, usabilidad, estudio de mercado, intuición.

2.- Objetivo del Sitio:
Metas del negocio, identidad de marca y métricas de logro.
Metas del negocio: A donde se quiere llegar
Identidad de la marca: que aspectos de la identidad de la marca se desean dar a conocer. Cómo ayuda el sitio a posicionar tu marca.

Métricas del logro: Nos sirve para saber como se están envolviendo los objetivos del sitio con los del usuario, se puede hacer através de una gráfica, en algunos caso se mide a través de las ganacias.

Site objectives- Son los objetivos del sitio
User needs- ¿Qué quieren nuestros usuarios obtener del sitio?
Cuando estás 2 preguntas tengan la misma respuesta se podrá lograr un impacto interesante de la página.

3.- Perfil del Usuario:
a) Segmentación de Actores: Actores no es lo mismo que usuarios.
Se refiere tanto a los clientes como a los patrocionadores, la competencia, los departamentos funcionales para el proyecto, los dueños, empresarios, estudiantes, todos los que tengan que ver con el proyecto del sitio o blog. y después de esto hacemos la segmentación del usuario.

b) Segmentación o perfil de usuario:
-demografía, psicología, según objetivos, nivel tecnológico, cultura virtual, lugar de acceso, plataforma, orientación profesional, otros atributos.

c) Se pueden hacer fichas con fotografía de cada uno de los usuarios de forma general.


4.- Modelo del Negocio: Saber las necesidades del usuario y los objetivos, identificar los obejtivos de nuestro negocio. Entender los problemas para poder resolverlos.
Panorama general, la ubicación del mercado. Componentes: identidad, interactividad.

Descripción General: Roles y Servicios
Roles: Alguien que aporta, alguien que administra y alguien que utiliza la información (el usuario, seguidores,etc.).
Servicios: Informar,compartir información, permitir aportaciones de otras personas,etc.

Sesión 21

Reflexión

En esta sesión el profesor nos explico lo que es el plano de estrategia y todos sus componentes, en la segunda sesión el profesor llevo de invitado a un diseñador (Jacobo) que es la persona que realizo la pagina de queretarotravel.com, lo interesante fue el como explico como era el ritmo de trabajo y como se distribuía en equipos de trabajo especializado cada rama de el sitio web.

Sesión extraclase.

Análisis de pagina ( CANACINTRA)

Elementos

1.-Estrategia.- Esta pagina es una unión de grandes empresas mexicanas y la función de esta es el manifestar las ideas de estas empresas, así como dar a conocer las mismas.

2.-Enfoque.- La pagina cuenta con bastante información dentro de ella por lo que puede ser muy beneficioso para los usuarios.

3.-Estructura.- El usuario al estar en el estado zero tiene que pulsar entrar para acceder a la pagina y este sitio cuenta con una infinidad de ligas para navegar con otros sitios de interes común o información respecto a estos temas.

4.-Esqueleto.- La pagina tiene una estructura muy rectangular ya que los temas, menú principal y cuadros de texto son divididos por un cuadro de texto.

5.-Superficie.- Esta pagina es atractiva visualmente ya que todo es claro y sencillo para que el usuario este preocupado por la información y en encontrar lo que busca y no por tratar de entender como es que funciona el sitio.

Mapa del sitio.

PAGE LAY OUT.

Principios: Jerarquía, flujo, agrupación.

Jerarquía

Esquina superior izquierda: En la pagina de Ducati lo primero que ves es el logo de ducati para que el usuario se quede con la imagen de ducati ya que va a ser lo primero que va a visualizar

Espacio en blanco: En la pagina de turnerduckworth es una compañia de diseño se tiene mucho espacio en blanco el cual usan como tipo de diseño pero tambien permite una pagina mas limpia y clara no tan saturada.

Fuentes congruentes: En la pagina de mcdonalds se muestra su productos de en cuestión de tamaña es decir los mas importantes son de mayor tamaño que los que no son tanto.

Colores y contrastes: En la pagina de lenovo los titulos van en otro color para que el usuario pueda distinguir entre temas y subtemas.

Subordinación: en la pagina de univision se muestran los titulos de los temas en un recuadro y otro color mientras que los subtemas van debajo de los temas y en otro color.

Formas y grupos : En la pagina de adidas todo se muestra en forma de imagenes cuadradas o rectangulares en las cuales el usuario tiene que dar click para acceder a el tema que desee.

Flujo

En la pagina de Johnnie Walker tienes que ir paso a paso para poder ingresar lo primero que tienes hacer es poner tu fecha de nacimiento par ver si puedes tener acceso a algun tipo de contenido.

Agrupación

Proximidad: En la pagina de Calvin Klein toda la colección de ropa se muestra en fotos que se encuentran juntas y el usuario puede dar click en la imagen para ver esa colección.
Similaridad: En la pagina de oxxo todo el sitio mantiene el mismo estilo es decir el mismo menú solo cambia la imagen de acuerdo al contenido que desea ver el usuario lo cual al ser muy similar todo permite al usuario no distraerse con nada mas y centrarse en el contenido que desea ver.
Cierre: En la pagina de ESPN la información que tiene relación se ageupa en diferentes temas para que el usuario tenga claro donde buscar y que va encontrar ahí.

Patrones de Jerarquía.

Central stage: Aquí el contenido mas importante se muestra al centro de la pantalla.
Visual framework: En la pagina de nivea se mantiene la misma estructura dentro de la pagina siempre.

PATRONES DE AGRUPACIÓN.

Card stack: Muestra el contenido en forma de tarjetas como en la pagina de bimbo.

Tiled sections: Cada tema en la lista muestra su subtema al centro de la pantalla como en la pagina de bimbo que muestra una lista con productos y a un lado muestra el producto.

Sesión 17 reflexión

En esta sesión vimos varios temas los cuales se me hicieron muy útiles a la hora de analizar una pagina ya que son mas fáciles de identificar y me parecieron que estos podrán ayudarnos a ampliar nuestro criterio en cuanto al análisis de una pagina.

PAGE LAY OUT

Principios que se divide en agrupación, flujo y jerarquía.

Flujo: La información fluye de acuerdo a lo que se quiere mostrar al usuario.

Agrupación: Esta se divide en 3 ramas:

Proximidad: Lo que se encuentra junto dentro de la pagina tiene una relación.

Similaridad: Lo que se parece tiene relación

Cierre: La vista tiene a cerrar espacios para agrupar lo relacionado

Patrones de jerarquía:

Visual Framework: que todas las páginas de un sitio tengan la misma estructura o estado cero y cambian según usuario.

Center Stage: Lo más importante es colocado en el centro

PATRONES DE AGRUPACIÓN:

Titled Sections: Cada sección lleva su título y sus respectivos subtemas.

Card Stack: Cada agrupación es como una tarjeta.

Sesión 15 extracase

Color coded selection

Es cuando dentro de la pagina se resalta alguna sección o link con colores o texturas

Sequence maps

Es cuando nos va diciendo en que paso de la tarea vamos paso1, paso2 etc.

Bread Crumbs

Es cuando dentro de la pagina nos da las opciones de regresar al principio o navegar dentro de la pagina con los botones que se encuentran dentro de la pagina.
Anoted scroll bar

Es cuando nos muestra en pagina estamos como word, pdf, o powerpoint.

Sesión 14 extraclase

Modal panel

En blogger cuando intentas subir una imagen y le das click en subir imagen sin haber seleccionado la imagen antes te aparece una ventana de advertencia.

Pyramid

En la pagina de armani se muestran los links que te llevan a otras paginas y de esta manera se van entrelazando las diferentes paginas de armani

Hub and spoke

En la pagina de ESPN en un juego de futbol te nuestra el numero de relaciones que tienes con el resto de los competidores.

Global navigation

En la pagina de pronosticos se tien un espacio donde se encuentran los logos de los diferentes sorteos que tienen y si das click a los logos te lleva al espacio del sorteo

Clear entry points

En la pagina de la NFL se tiene una barra del lado izquierdo que tiene una serie de acciones para que realice el usuario y se muestren en el lado derecho

Sesión 13 extraclase

Wizard

Es una aplicación que te va guiando paso a paso para realizar la instalación de algun software o cualquier otra tarea.

Extras on demand

Te muestra nada mas lo importante con es esta pagina que solo muestro imágenes con diferente contenido para seleccionar a donde acceder como puede ser identidad corporativa, blog, o ilustraciones así el usuario elige hacia donde quiere ir.

Sesión Extraclase

Patrones físicos de organización de contenido.

One-window drill down.- Es un menú que permite navegar por una pequeña pantalla mostrando solo lo necesario

Alternative views.- Te permite tener diferentes vistas de un mismo objeto o interfaz.
Canvas plus pallete.- Tiene una barra de herramientas que te permite modificar o editar.
Two panel selector.- Tiene dos paneles donde te permite interactuar con el interfaz

Sesión 16

En esta sesión vimos lo que fue la exposición de aplicaciones de colaboración de equipo o groupware que nos permite trabajar en equipo sin estar físicamente ya que lo puedes hacer estando en cualquier parte del mundo donde te puedas conectar a internet estas aplicaciones permiten trabajar de manera mas eficaz y rápida evitando traslados que te quitan tiempo y dinero, de esta manera puedes realizar tu trabajo mas rápido, también puedes tener un orden mas estricto sobre tu manera de trabajo al igual que una agenda o video conferencias.

En esta sesión el profesor invito a un diseñador el cual nos explico como es el verdadero campo laboral como es la relación cliente - diseñador también nos mostró una pagina que hizo algunos años atrás la cual vamos a analizar.

Sesión 15

En esta sesión vimos la exposición de aplicaciones para compartir contenido

donde vimos como las aplicaciones para compartir contenido estan presentes en todo el web 2.0 ya que estas son las que nos permiten interactuar con lo que hoy es el internet las aplicaciones para compartir contenido ya casi se encuentran en todo el internet.

Sesión 14

En esta sesión vimos la exposición de microblogging y los patrones de navegación:

Microblogging:

Es una aplicación que permite realizar publicaciones breves o dejar comentarios breves en otros usuarios por lo regular es solo texto aunque permite subir también imagenes o ligas de paginas o artículos. Es una aplicación que permite estar en contacto en todo momento ya que puedes realizar publicaciones desde tu teléfono móvil para estar en contacto en todo momento.

Patrones de navegación:

Global Navigation: Utiliza una parte pequeña de la pagina o aplicación a usar para mostrar botones o enlaces que permiten al usuario navegar por otra parte de la pagina o aplicación.

Clear entry points: Con pocos botones para ayudar a una navegación fácil y clara

Hub and spoke: Es decir que tienes que regresar a la pagina principal para poder ir a otro lugar.

Pyramid: Dentro de una pagina existen enlaces que permiten navegar hacia otras y la otras paginas tienen dentro de ellas otros enlaces que permiten navegar entre diferentes paginas o la principal generandose así una relación como de piramide.

Modal Panel: Es una ventana de emergencia que no permite avanzar hasta que el usuario tome una decisión sobre lo que se va a hacer.

Sesión 13

Durante esta sesión vimos 2 exposiciones:

La primera hablo fue redes sociales que son plataformas que sirven para la interacción entre las personas, también sirven para poder tener contactos de trabajo o mostrar tu trabajo, también existen diferentes tipos de redes sociales algunas especializadas en negocios, de corporativos o de cualquier otra categoría.

La segunda exposición fue Folksonomy:
Es una aplicación que nos permite organizar contenido es decir categorizarlo para de esta manera tener acceso a paginas de internet de un modo mas organizado y fácil.

Patrones:
1.- Wizard: Te lleva paso a paso para realizar un procedimiento o instalación de algún programa.
2.- Extras on Demand: Muestra el contenido mas importante y oculta el resto lo muestra solo si el usuario lo solicita.

Sesión 12

En esta sesión abarcamos el tema de los patrones físicos de organización de contenido:

Two pannel selector: Cuando existen 2 paneles que puedes usar simultáneamente. En algunos casos de un lado están las categorías y del otro las imágenes. (mail mac)

-Canvas plus pallette: Es una paleta con iconos y herramientas a un lado para llevar a cabo una acción. Estas son usadas en las paginas de autos donde te permiten personalizar tu coche.

-One-window drill down: Es una forma de clasificar las cosas. .Se usa cuando en una pantalla tienes poco espacio

-Alternative views: Cuando tiens diferentes vistas de el mismo contenido o escenario puede ser para visualizar diferentes vistas de una misma pagina.

Niveles o pop up windows: En esta pagina al elegir el producto se abre otra ventana que no permite regresar al anterior.

Multiple windows: La pagina de armani va abriendo otras paginas cada que das click en alguna opción.

Tiled Panels: Esta es una pagina de diseño gráfico que que tiene varios paneles que te permiten ver otras opciones dentro de la misma pagina.

One window paging: La pagina de de la contemporanea te permite navegar por todo su sitio sin abrir algún otra pagina.

Categorías de acuerdo a su taxonomía.

Lista de acciones

“What do you want to do?”

Lista de objetos

“What do you want to work on?” Tiene un jerarquia dentro de ellas

Lista de herramientas

With what do you want to work?”

Lista de temas

“What do you want to work?”

MODELO MENTAL