Diferencia entre revisiones de «LC3 2010»

De Casiopea
(Mapas de Navegación)
(WireFrames)
Línea 424: Línea 424:
  
 
Un wireframe grafica básicamente:
 
Un wireframe grafica básicamente:
Elementos de navegación: menús, accesos directos e hipervínculos.
+
* Elementos de navegación: menús, accesos directos e hipervínculos.
Elementos de información: contenidos de texto e imágenes.
+
* Elementos de información: contenidos de texto e imágenes.
Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.
+
* Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.
Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
+
* Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.
+
* Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.
  
 
==Enlaces Relevantes==
 
==Enlaces Relevantes==

Revisión del 19:36 21 jul 2010



Por favor, inscribirse en la lista de correo para el curso. Las inscripciones se cierran el viernes.

Clase 1

  • Fecha: Miércoles 23 de junio del 2010
  • Palabras Claves: Lenguaje HTML, medios digitales, diseño centrado en las personas.

Presentación



El desarrollo básico del curso, será la utilización de la wiki como repositorio de conocimiento será fundamental, de modo que exista una documentación del proceso de entrega de trabajos, generando contenido, lo que es parte importante de nuestro estudio.

Lenguaje HTML

Lo que se tratará durante las clases, será la programación en HTML. Este es un lenguaje o código utilizado para la creación de sitios web, y que funciona a base de marcas o etiquetas, determinando cómo debe mostrarse la información en los browsers (navegadores).

Es de gran importancia el saber cómo programar interfaces, cómo lo plasmado en el papel se visualiza en los distintos medios digitales, con los cuales diseñamos experiencia. A través de estos creamos puntos de interacción, relaciones entre softwares y personas y viceversa, siendo un proceso complejo para el diseño.

Al momento de diseñar, existe un proceso productivo en el área de trabajo y con las personas que ejercen diferentes disciplinas, lo que nos ayuda a construir los diseños de mejor manera para los usuarios y para definir de forma clara los distintos escenarios.

Medios Digitales

Los medios digitales son soportes en los cuales se dispone información, y además de internet, podemos encontrar otros como:

  • Pantallas
  • Móviles
  • TV
  • Juegos
  • Consolas de comando

Diseño centrado en las Personas

Existen tres puntos claves que nos proporcionan un ordenamiento y tácticas al momento de diseñar, de esta manera, no nos centramos inmediatamente en buscar la solución, sino que en primera instancia entendemos cual es el problema de la persona.

Planifiación

Estrategia

Es, básicamente, un planteamiento estratégico, en el que las preguntas ¿Qué?, ¿Cuando?, ¿Quienes? y ¿Cómo? son fundamentales.

Se compone de:

  1. Brief: resumen en el cual, la persona con la que trabajaremos, nos dice qué es lo que necesita para que logremos entender la la problemática. El brief tiene tres componentes de gran importancia:
    1. Presupuesto (dinero con el que cuenta la persona para el proyecto)
    2. Contra Brief (preguntas que nacen a partir del brief, las hace el diseñador)
    3. Debrief (se ven los objetivos y permite la generación de mecanismos de medición)
  2. Entrevistas Guiadas: conversaciones con usuarios y/o funcionarios con el fin de adquirir más informacion que ayude al desarrollo del diseño.
  3. Benchmark: análisis comparativo que mide las capacidades de experiencia que hay tras el encargo. También permite tener anotaciones del experto sobre un servicio y generar herramientas de objetivos.


Comportamiento de las Personas

El estudiar el comportamiento de las personas, nos permite comprender sus tendencias y motivaciones, la manera en cómo interactúan con un sistema, pero esto no debe confundirse con el estudio de los sistemas en interacción con las personas, pues en este caso nos centramos en la usabilidad.

Se compone de:

  1. Expert Review: evaluación hecha por expertos
  2. Personas y Escenarios: pensar en el usuario, dónde y en qué condiciones interactúa con un sistema
  3. Evaluación Heurística: análisis de usabilidad
  4. Eyetracking: herramienta de medición

Estructuración

Arquitectura de la Información

La manera de tener una diagramación que permita una comprensión lingüística, corresponde a la arquitectura de la información, ligándose directamente con la rapidez en los sistemas digitales.

Se compone de:

  1. Diseño de Contenidos
  2. Mapas de Navegación: primera representación gráfica de la base de los contenidos
  3. Wireframes: maquetas en las que se utilizan etiquetas reales de los mapas de navegación


Diseño de Interacción

Producción

Diseño de Interfaz

Diseño de Códigos de Interfaz

Primer Encargo

  1. Descargar aplicaciones FTP, como Transmit para Mac o Filezilla para distintas plataformas.
  2. Crear un sitio web que contenga una palabra o un texto. Para esto, primero se crea una carpeta en el escritorio, la cual será nuestra "raíz", que debe contener:
    1. Carpeta "css"
    2. Carpeta "imag"
    3. Carpeta "html"
    4. Documento "index.html" (se crea en un editor de texto y allí se escribe el código de programación)
  3. Leer esta guía y seguir los pasos para la programación del sitio web.

Personajes Relacionados

  • Alan Cooper
  • Jakob Nielsen
  • Donald Norman


--Sofia savoy 02:11 24 jun 2010 (UTC)

Clase 2

  • Fecha: Miércoles 30 de junio del 2010
  • Palabras Claves: Estrategia de diseño, briefing, branding benchmark.

Presentación



Estrategia

Diseñar experiencia en medios digitales

Existe un proceso metodológico que parte con la estrategia, se deben establecer parámetros serios con los clientes, saber qué es lo que quiere la audiencia. Los sitios web son objetos en transición; pareciera que nos llamaran por la "búsqueda de la belleza", pero el diseño va más allá, existe una capa visual y una capa emocional; los productos tienen atributos que conversan con la audiencia. Lo primero es entender el problema, no debe enfocarse en la mano de obra, sino en la reflexión, el pensamiento.

diseñar=pensar el futuro (diseño viene del italiano disegno, literalmente hacemos el futuro)

Un proyecto digital requiere de una reflexión, hablarle a la razón de la otra parte, para que se cumplan las metas propuestas; la creatividad genera ciertas empatías en las personas. Un encargo de diseño es inventar o modificar algo, para que cumpla un rol, con las dificultades de que los clientes generalmente no entregan nada por escrito, y de que es complicado medir nuestro trabajo.


La estrategia responde a las preguntas: ¿qué? ¿cuándo? ¿quiénes? ¿cómo?

Los medios digitales son seres vivos que están continuamente en renovación, en el ecosistema digital, en donde los que evolucionan triunfan, van mutando según el modo de navegar de los usuarios. Se da el ejemplo de Google, el cual se da cuenta de cual es el lugar más valioso de la pantalla (a través de eyetracking), el sector superior izquierdo es el triángulo dorado, donde colocan las referencias pagadas.

Brief

documento que responde preguntas que hacen los diseñadores. Ubicuidad espacio-tiempo

  • Resumen
  • Objetivos: deben estar declarados por el cliente, no es "quiero un sitio web", sino el "para qué"
  • Recursos: cuánto $, debe estar declarado, los recursos pueden ser en dinero, humanos, de infraestructura, etc
  • Metas: Es distinto de los objetivos, sirve para medir el diseño (cumple o no)
  • Tiempos


En el brief se hacen preguntas como quienes son los encargados, los patrocinadores, las competencias, contenidos y las audiencias, especificando sus edades, géneros, segmentación geográfica y psicográfica (aspiraciones).

  1. Contrabrief: son las conversaciones entre la agencia (diseñador) y el cliente (registro por escrito).
  2. Debrief
  • Análisis posterior al trabajo
  • Check-list de cumplimiento de objetivos
  • Cumplimientos de KPIs (key performance indicator)

Conversaciones guiadas

  • Recabar información informal
  • Cuáles son los problemas (no quedar preso del soporte)
  • Distanciarse de las soluciones
  • Pensar y soñar la experiencia (vender experiencia en los medios digitales)

Branding benchmark

brand=marca (haciendo marca)

  • Cuestionar la marca o servicio
  • Medir con sus pares
  • Medir con su influenciador
  • Medir su huella digital
  • UX (user experience)

En el benchmarck aparecen referencias como

  • SEO:Search engine optimization (posicionamiento de la marca en buscadores)
  • Información cualitativa (construir estrategia al cliente)
  • Cifras y gráficos
  • Screenshots de la competencia
  • Tácticas (se traducen en cosas concretas)

Referencias

  • vista del brief que realiza la oficina ayer viernes
  • Triángulo dorado descubierto por google en el modo de mirar la pantalla por parte de la audiencia[1]

Tarea

En grupos de 3 personas, los alumnos deberán realizar una estrategia digital para una empresa (auto encargo). Las 4 industrias, desde donde se debe elegir una marca chilena real son:

  1. Financieras (bancos, afp, isapres, etc)
  2. Turismo
  3. Productos de consumo masivo
  4. Retail

--Javieraconstanza 05:27 1 jul 2010 (UTC)

Clase 3

  • Fecha: Miércoles 8 de julio del 2010
  • Palabras Claves: Estrategia digital, SEO, co-branding, microtarget.

Presentaciones

Grupo 1

  • Integrantes: Javiera Albornoz, Paula Mancilla, Sofía Savoy.
  • Área: Retail
  • Marca: Multitiendas Johnson's
  • Estrategia: Diseño del sitio e implementación de sistema de compras por internet. Generar confianza en base a esta tendencia y entrar en el mercado de ventas online.


Grupo 2

  • Integrantes: Eleonora Aldea, Valentina Pérez, Alejandra Salinas.
  • Área: Finanzas
  • Marca:ING Capital
  • Estrategia: Realizar campaña para jóvenes que deben afiliarse a una AFP. Crear red social y rediseñar secciones del sitio destinadas a esta información.


Grupo 3

  • Integrantes: Javiera Burgos, Valeria Cerón, Gley Riquelme.
  • Área: Productos de Consumo Masivo
  • Marca: Café Gold
  • Estrategia: Potenciar línea "Gold Sabores" mediante campaña social "Tu actitud, tus gustos, tu café". Rediseñar del sitio web, generar comunidad de seguidores y utilizar redes sociales.


Grupo 4

  • Integrantes: Diego Reyes, Francisco Vera, Waldo López.
  • Área: Turismo
  • Marca: Turismo en Chile
  • Estrategia: Aumentar ventas a través de medios digitales. Generar una identidad innovadora y motivar al público con el uso de redes sociales.


Cada grupo presenta su estrategia digital diseñada para una marca específica. Mientras presentamos surgen términos e indicaciones en cuanto a las tareas:

  • Al exponer un proyecto no utilizar generalismos, siempre apuntar a soluciones objetivas y particulares.
  • Tener en cuenta siempre cual es la postura de la empresa frente al proyecto. Para la empresa el retorno de la inversión, los beneficios y las cifras son factores importantes a considerar. Utilizar cifras realistas.
  • Utilizar visualizaciones y gráficos comparativos para posicionar a la empresa dentro del mercado mostrando situaciones reales con fortalezas y debilidades. Estos rescursos son una estrategia útil para promover una imagen de compromiso y responsabilidad con el cliente asegurando que éste pueda analizar el proyecto más alla de los presupuestos involucrados.


Archivo:Grafico agencias guias.png
Ejemplo de gráfico comparativo















  • SEO (Search engine optimization) consiste en aplicar diversas técnicas para que buscadores de Internet sitúen una página web dentro de las primeras posiciones cuando realizamos búsquedas orgánicas.
  • Co-branding hace referencia a una alianza que forman dos empresas para trabajar juntas, creando una sinergia de marketing.
  • CMS (Content management system) es un conjunto de procedimientos utilizados para administrar el flujo de trabajo en un entorno de colaboración. Pueden ser manuales o computarizados (softwares).
  • Las tendencias son escenciales para el análisis del mercado. Para el desarrollo de una estrategia debemos tener en cuenta problemáticas, tendencias y cifras.
  • Estrategia según audiencia. No olvidar las variables psicográficas de las audiencias para no pasar a llevar micro targets y sus hábitos sociedad con la implementación de nuevos productos o metodologías que alteren la cultura local.

Observaciones

Puntos a considerar (pros y contra) para cada estrategia presentada


Multitiendas Johnson's

  • Es una meta que puede cumplirse.
  • No hay aventura.
  • Existe mercado para realizar la propuesta.
  • No hay cultura de compra vía web.
  • Debe ir unido a distintos medios sociales por falta de confianza.


ING Capital

  • Es una meta utópica (300.000).
  • Considerar sinergía con medios offline para difusión masiva.
  • Considerar sinergía con eventos para crear comunidad activa.


Café Gold

  • Es posible crear una comunidad.
  • Competencia (Nescafé) lleva ventaja a la campaña.
  • Utilizar fallas o explorar áreas que la competencia no ha utilizado aún.


Turismo en Chile

  • Competencia (Explora) tiene imagen muy aspiracional (parece caro).
  • Ventaja ya que ninguna agencia posee redes sociales.
  • La mayoría de los clientes decide por internet.


--Jabu 05:23 9 jul 2010 (UTC)


Clase 4

  • Fecha: Miércoles 14 de Julio del 2010
  • Palabras Claves: Lenguaje HTML, Medios Digitales, Diseño centrado en el usuario, Jacob Nielsen, Usabilidad, Sistemas, Heurísticos, Modelos Mentales, Escenarios y Personas, Código

Comportamiento de usuarios

En el año 1996, Jacob Nielsen comienza a introducir el concepto de Usabilidad dentro del diseño de interfaces, lo cual se vuelve rápidamente peligroso para los diseñadores ya que el diseñador debe estar dispuesto a poner a prueba su diseño. La usabilidad debe ser siempre anónima, el usuario se da cuenta de que existe la usabilidad debido a fallas de ella misma.

Para hablar de la usabilidad en los medios digitales no vamos a referirnos sólo a los sitios web sino que vamos a hablar de SISTEMAS DIGITALES, lo que puede abarcar displays, aplicaciones para móviles, paneles de automóviles, etc.

1. Probar los Sistemas

Esta primera consideración es muy importante, ya que debe quedar siempre claro que no se prueba al usuario, se prueban los sistemas. Incluso, uno puede hilar más fino y reconsiderar el término usuario, ya que muchas veces es mejor referirse a las PERSONAS, pues refleja el verdadero grado de complejidad del asunto, lo que hacemos es tratar de entender a las personas. Jacob Nielsen lo que hace es entregar una herramienta llamada los Heurísticos (que significa "criterios") con los cuales podemos conducir los Test Heurísticos.

¿Qué se hace en los Test Heurísticos? Se mide el lenguaje que se le ha construído a ese medio. Y la única forma de construirle el lenguaje, es conociendo el código de ese medio. Por ejemplo, un libro, es un sistema sofisticado de comunicación, con códigos muy específicos (la lectura de izquierda a derecha, sistema de títulos, el pasar de una página a otra, la ubicación de los números de páginas), y que demoró muchísimos años en instalarse como una convención. Ahora debemos preguntarnos cuáles son los códigos de los medios digitales? Nosotros somos los artesanos quienes deben conocerlo para poder diseñar en él, tal cual como los artesanos antiguos tuvieron que enfrentarse con cómo disponer de las letras, palabras y frases en el caso del libro.

El HTML, es el código de este medio, es la QUÍMICA de este medio. Si lo comparamos nuevamente con la industria del libro el HTML sería análogo a la química de las tintas con las que se imprime.

Existen 10 heurísticas, o principios con los cuales podemos medir la usabilidad de un sistema, son básicamente preguntas sencillas que se le hacen a los usuarios. No es un focus group, ya que en los F.G se les piden opiniones a las personas, en este caso se les hacen preguntas sobre si funciona o no la interfaz. Las preguntas se responde también simplemente con SÍ/NO/NO SÉ.

En estos test heurísticos invito a personas que se encuentren en el target definido en el Brief realizado en el primer paso, en la Estrategia. Existen otros tipos de herramientas para probar los sistemas, como el Expert Review, en el cual un experto revisa el sistema, y el Eyetracking.

Ésto se resume a que hay que entregar un sistema que sirva, que los usuarios quienes son los clientes de la marca lo entiendan y prefieran, para poder convencer de que estas herramientas sirven en hacer nuestro diseño traducimos los datos en números, ya que así no basamos las decisiones en lo emocional (subjetivo).

2. Entender las motivaciones de las personas

  • Modelos Mentales: Conocer las motivaciones de las personas nos permiten dibujar esas motivaciones, y presentarlas de una forma fácil de entender y que permite la empatía.
  • Construcción de Personas y Escenarios: Inventamos a personas que serían usuarios de nuestro sistema para poder entender de mejor manera para quiénes estamos diseñando. Detalladamente describimos, con nombre y apellido a estos usuarios ficticios y los ubicamos dentro de su escenario.
  • Etnografía : No trabajamos sólo para los aspectos geográficos de las personas, trabajamos para personas de carne y hueso que existen de verdad. Permite adentrarnos de una manera etnográfica a las motivaciones de las persona. Para esto es clave la observación, ver a las personas a las que les voy a hablar.

Enlaces Relevantes

--Aldeapardo 00:01 16 jul 2010 (UTC)

Clase 5

  • Fecha: Miércoles 21 de julio del 2010
  • Palabras Claves: Organización de Contenidos, Arquitectura de la Información, Búsquedas Orgánicas, Card Sorting, Jesse James Garrett

Arquitectura de la Información

Hablamos de Arquitectura de la información, entendiendo que los usuarios, habitan los medios; y a pesar de las similitudes, todos los usuarios lo hacen de fomras diferente. SOn los usuarios quienes hacen que los sistemas, muten, cambien. Si entendemos los medios digitales como un ecosistema, y comprendemos que en nuestra vida diario nos acompañan, esto ocurre por que los usuarios consumen de los medios y así, éstos pueden evolucionar según las necesidades de uso. Así mismo, los medios o bien evolucionan para adpatarse a los usuarios o desaparecen.

¿Cómo evolucionan los medios digitales?

Los medios digitales, mutan a través de los contenidos. El diseñador construye esta base para que los contenidos se desplieguen, los usuarios los consuman y así pueden evolucionar, es decir, cambiar sobre la base de lo que el diseñador plantea en un principio, y con uso de las personas, evoluciona.

Google, por ejemplo, posee un buscador Spotlight actualmente, sin embargo en un principio, no era así; poco a poco ah evolucionado hasta esto por el modo en que las personas los consumen de una determinada forma.

Para que el diseñador pueda comprender, y hacer crecer un medio digital, se deben ordenar, distribuir, analizados minuciosamente los contenidos; pero además, deben ser fácilmente encontrables, sino, no existen, pues el usuario no puede acceder a él. Se debe comprender la construcción de un medio digital, como un medio "biológico", que evoluciona, pero además su contenido debe relacionarse con otros medios, para que se pueda tener fácilmente acceso a él.

Las personas exigen que los contenidos lleguen a ellos, por ejemplo, si deseo comprar un vino, voy a poner en google "vinos", y los resultados arrojados, los primeros son con los que tomaré una decisión. Pero, ¿cómo se posiciona un contenido en google?Esto ocurre gracias a búsquedas orgánicas.

Siguiendo lo anterior, los contenidos de un sitios web, son los que "encuentran" al usuario, por eso es tan importante que el diseño llegue a quienes solicitan la información, es decir, el contenido debe ser accesible. Cuestionarse el diseño desde los contenidos, pues no hay diseño digital, sin ellos.

W3C y HTML

Es un consorcio internacional que produce recomendaciones, una suerte de stándar para la construcción de sitios web y buenas prácticas de uso. El HTML es usado para describir la estructura y el contenido en un sitio web. La importancia de cumplir estas recomendaciones, es que para que los contenidos puedan acercárse a los usuarios, éstos deben vincularse entre ellos y así mismo vincularse con buscadores, lo que es vital, para encontrar algo. Cuando éstas, recomendaciones, o stándares son cumplidos, la búsqueda orgánica se realiza fácilmente, y se puede acceder a los contenidos dentro del sitio web.

Organización de Contenidos

La reflexión inicial al enfrentar un problema de diseño digital, consiste en conocer, cuál es el contenido.

Para comenzar, es bueno ordenar los contenidos jerárquicamente, es decir, crear un índice de contenidos, los que bien pueden ser desde texto a imágenes, e incluso archivos multimedia.

Card Sorting

Para realizar una organización de categorías centrada en el usuario, el arquitecto de información dispone de técnicas de ayuda en la toma de decisiones, como es la denominada 'card sorting' u ordenación de tarjetas.

La técnica de 'card sorting' se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.

De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.

Semántica

El contenido está separado de la presentación, y de esta manera, el mismo contenido puede verse en distintas plataformas. Cuando esto se lleva a cabo de buena manera, la W3C los valida, ya que para Google, es más fácil traer el contenido, cuando está organizado, pues para ellos es más barato y más sencillo facilitar el contenido a los usuarios.En ese sentido, cuando los sitios están ordenados, su valor respecto a la usabilidad, sube; y así, los sitios tienen mayor usabilidad. Dentro de eso contexto, se valora también la economía de los contenidos, para que no aparescan repeticiones.

Respecto al trabajo con los clientes, es bueno presentarle pruebas, para que así, pueda reflexionar y comprender los valores de lo presentado.

Mapas de Navegación

Un mapa de navegación es la representación gráfica de la organización de la información de una estructura web. Expresa todas las relaciones de jerarquía y secuencia y permite elaborar escenarios de comportamiento de los usuarios. También grafica, de modo que todos los profesionales participantes en un proyecto lo tengan claro, diferencias entre páginas dinámicas, administrables o estáticas.

El principal valor de un mapa de navegación es que permite anticipar errores de organización de la información, de modo de corregirlos fácilmente.

Un mapa de navegación no puede tener más de 3 niveles. Así, se busca evitar el desequilibrio entre amplitud y profundidad de la información. La amplitud se refiere a la cantidad de secciones o páginas de igual jerarquía a las que se puede acceder desde el inicio o desde secciones concentradoras de contenidos y se expresa horizontalmente en un mapa. La profundidad se grafica de manera vertical e indica el número de opciones de jerarquía decreciente que hay dentro de una misma sección.

Cuando un esquema de organización es muy amplio, el usuario puede confundirse al tener tantas alternativas, por lo que es bueno, acotar bien el menú por ejemplo del home de sitio web. A la vez, un esquema muy profundo, implica pocas opciones a las que acceder desde el home, pero hace que el usuario deba a travesar un largo camino de "clicks" para llegar al contenido que le interesa.

WireFrames

Se trata de la reflexión misma de como el usuario va a utilizar el sitio. Es un bosquejo de la ubicación de los elementos en pantalla.

Un wireframe grafica básicamente:

  • Elementos de navegación: menús, accesos directos e hipervínculos.
  • Elementos de información: contenidos de texto e imágenes.
  • Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.
  • Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
  • Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.

Enlaces Relevantes