Embed Size (px)
Citation preview
Taller de UX & UsabilidadSesión Nº1/3 Desde la Estrategia a la Arquitectura de la Información !!!!Mejorando.la Sábado 16 de noviembre de 2013
¿Quién soy? @jorgebarahona
@ayerviernes
@clerkhotel
www.facebook.com/jorgebarahona
Diseñador de Experiencia de Usuarios
Emprendedor serial
ayerviernes.com
clerkhotel.com
monterilla.cl
ead.pucv.cl
jbarahona.com
¿Qué es Diseñar la Experiencia de los usuarios?
Es inventar el futuro
Es construir un conocimiento
• Diseñar: italiano disegno dibujo, designio, signare, signado "lo por venir" • Experiencia: Del latín experiri, "comprobar" Es una habilidad derivada de la observación, de la participación y de la vivencia de un evento o proveniente de las cosas que suceden. • La experiencia tiene que ver con los verbos • A más experiencia menos publicidad
Es inventar el futuro a través de los verbos, relatos que
construyen aprecio y compromiso
Diseñar Experiencica
Arquitectura de la Información Diseño de Interacción
Diseño de Interfaces
Diseño de Front End
• Las personas se relacionan con los sistemas en un perfecto equilibrio entre la razón de los wireframe y la emoción de las interfaces.• ¿Por qué? Porque hemos mutado de consumidores a co-creadores de los bienes de consumo
Metodología UX
1
Estrategia
Brief
Propuesta Comercial
Benchmark
Usabilidad & Comportamiento de las
Personas
Etnografía
Personas & Escenarios
Arquitectura de la Información
Indexación de Contenidos
Card Sorting
Mapas de Navegación
Sesión Nº1
• Metodología DCU (2003) • Permite vender mejor ya que el cliente entiende lo que se hará, los tiempos y tareas • Las soluciones de Diseño son objetivas, no subjetivas • Se enfatiza que las conversaciones serán técnicas • Permite trazar una línea de tiempo de manera sencilla y coincidente con la metodología (Gantt)
Estrategia
Estrategia•Brief
•Contrabrief
•Propuesta Comercial
•Debrief
•Benchmark
•Brief final
Estrategia
• Del griego, significa “liderar”• Se ocupa de planear y dirigir las tácticas• Proponerle a un cliente que diseñarás con el una estrategia, quiere decir que liberarás el proyecto. Somos capitanes de un barco donde hay que dar ordenes y ganarse
a los soldados para los momentos difíciles.• Determinar el problema independiente de la solución que te piden
Brief •¿Quiénes?
•¿Qué?
•¿Cuál es el problema?
•Presupuesto
•¿Por qué?
•¿Para qué?
•¿Para cuándo?
•¿Con quiénes?
https://www.dropbox.com/s/94ll2b8h7c5djre/BriefAyerViernes2013.pdfEstrategia
• Abramos el Brief de AyerViernes
Un buen Brief permite •Diseñar una Propuesta
•Diseñar una Estrategia
•Una buena Estrategia permite determinar
•Metas y Objetivos
•Tácticas y plazos
•Hacer un balance (de-brief)
Estrategia
Propuesta Comercial•Identificador claro
•Responsable (ambas empresas)
•Contexto (Brief)
•Metodología o Visión
•Propuesta
•Objetivos, tácticas y entregables
•Tiempos y Precios
•Exclusiones
Merlin (OSX) projectwizards.net OmniPlan (OSX-iPad) omnigroup.com/omniplan/ Team Gantt (Online) https://teamgantt.com Gantt Project (Linux) http://www.ganttproject.biz
Estrategia
• Propuesta NO una cotización• Tenemos folios con URLs de las propuestas• Gantt• Google Docs• Abramos Merlin
Benchmark•Comparativo
•Cualitativo
•Competidores: buenas prácticas… o malas :)
•Normalmente se hace entre 3 a 5 consultores
•Cuantitativo
•Consultores construyen parámetros específicos que genere indicadores desde preguntas específicas
• Permite generar metas del proyecto
Estrategia
Benchmark
https://www.dropbox.com/s/3oyytodnf0y0j3k/UXa_International_eBanking_Benchmark_Study_2012.pdf
Estrategia
Veamos el benchmark de la Banca
Estrategia UX•Entrega los recursos necesarios para crear un mapa futuro
•Baja las tácticas con objetivos, tiempos, costos y ejecutores para lograr las metas planteadas en la Estrategia
•Diseña una Gantt acorde a los escenarios a enfrentar
•Avanza sistemáticamente y no por reacción.
•Involucra a toda la compañía. Deja de ser una idea de Gerencia para transformarse en una idea de todos
•Debe necesariamente involucrar a la alta gerencia
Estrategia
• El diseñador UX abre los ojos al cliente• Mira desde los problemas de las personas no desde las soluciones o encargos de los clientes• Hay que buscar solucionar los problemas (que es más que un mero sitio) y evitar acatar a primeras las intuiciones de los clientes.• Evita la compra spot y alienta la inversión respaldada en un conocimiento cabal del sistema. Todos sabrán qué, cómo y cuándo• Determina el qué versus el cómo (qué es lo que ven los clientes)• Diseñar UX es diseñar la capa de negocios (no es tecnología ni diseño)
¿Cómo hacer Estrategia UX?
Diseño del Servicio
Service Design Thinking, Marc Stickdorn & Jakob Schneider Estrategia
• Turismo• Espectativas: los clientes tienen un sueño “viajar” y buscan información a través de muchos soportes que influencian la decisión del destino • Experiencia: buscar hoteles en el destino, vuelos, entretención, etc.• Satisfacción: socializamos las experiencias (redes sociales, dejamos opiniones, recomendamos)
PRE-SERVICIO SERVICIO POST-SERVICIO
Expectativas Experiencias Satisfacción
Service Design Thinking, Marc Stickdorn & Jakob Schneider Estrategia
Sin Estrategia es difícil Diseñar un portal
• Revisemos una Propuesta de
Investigación
Usabilidad & Comportamiento de las Personas
•Usabilidad
•Pone a prueba los sistemas
•Test Heurísticos
•Paseos cognitivos
•Comportamiento de las Personas
•Personas & escenarios
•Etnografía
•Conversaciones guiadas
Investigación
Personas & Escenarios•Personas = Arquetipos o personajes
•Permite ponernos en el lugar de los usuarios finales para los que diseñamos
•Observa escenarios reales de uso
•Permite tener la descripción de los usuarios para hacer test, etnografía y conversaciones guiadas
•Personifica lo que hacemos
Investigación
http://www.amazon.com/dp/0672316498
www.cooper.com
• Alan Cooper es el creador de los personajes y escenarios. • En este libro se describen, sus tipologías, etc.• Tenemos mucha experiencia en internet• Difícil ponerse en el lugar de los usuarios• El anti-lab• ¿Cuáles las personas & escenarios de uso de Mejorando.la?
Personas•Se describe detalladamente
•Pueden ser varios
•Hay primarios y secundarios
•Usuario v/s personaje
•Restringe el objetivo de usuarios
•El personaje debe pertenecer a la realidad
•Saber a quién le diseñamos (y a quién no)
•Los diferenciamos por sus metasInvestigación
• A un usuario se le puede presuponer todo tipo de conocimientos, aptitudes y comportamientos, a una persona, no.• No es posible satisfacer a todos y si se intenta, nadie quedara satisfecho.• Normalmente las personas = arquetipos pueden ser conocidos• Objetivo personaje 1: Consuelo busca oferta educacional para nuevos alumnos
Tipos de personas•Primario
•necesitan interacciones exclusivas
•sumar más de 3 puede inducir a replantear la persona
•Secundario
•puede usar interacciones ajenas
•Diseñar para los primarios
Investigación
• Clientes de un banco (no clientes, prospectos)• Secundario
• Un experto de internet puede usar muy bien una web de supermercado pero una ama de casa no
Escenario
Investigación
• Un personaje usando un servicio con metas claras• Define interacciones y exigencias al sistema• Esta siempre relacionado con el personaje
Personas & Escenarios•Busca personificar el diseño en situaciones reales de uso
•Conduce el futuro del proyecto. define
•Estudios
•tests
•Wireframes
•Interfaces
•Front End
Investigación
http://www.amazon.com/dp/0470084111
Etnografía•Observación y participación con grupos específicos de usuarios
•Buscamos entender las acciones y conversaciones que tienen cuando usan un determinado servicio
•Usamos Notas de Campo para registrar la observación
•Notas, Fotos, vídeos y croquis
Investigación
• Observar usuarios reales accionando un cajero automático• Cómo se acercan? Cómo colocan la tarjeta? Qué sucede cuando hay error? Accionan las teclas de manera intuitiva o no? Botan el recibo? (esto hizo que se sugiera la
impresión) Etc.
Thoughtless Acts?: Observations on Intuitive Design Jane Fulton Suri (IDEO)
Investigación
Investigación
Conversaciones guiadas
• Son conversaciones relajadas• Escuchar a los arquetipos• Sus ideas de cómo podría hacerse mejor el sistema• Siempre quieren ayudar• Son guiadas porque buscamos comprender cosas específicas (quién hace los procesos físicos?, call-center, etc.)
Arquitectura de la Información
Elección 2000 USA
Ai
• Grave error en el diseño de la información los votantes confundieron su elección con la acción• Elección fue tan estrecha que el último condado en cerrarla (voto visible) hizo historia al cuestionarse su diseño que induce al error•
¿Qué es la Ai?
Saul Wurman (1962) Organiza patrones inherentes en los datos, haciendo claro lo complejo.
Edward Tufte El diseño de la presentación de la información para facilitar el entendimiento.
Ai
¿Qué es la Ai?Peter Morville & Louis Rosenfeld !Clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia !Determina el contenido y funcionalidad que el sitio va a tener !Especifica cómo los usuarios van a encontrar la informacion al definir su organización, navegación, etiquetado y sistemas de búsqueda
Ai
Herramientas de Ai•Indexación de Contenidos
•Taxonomía
•Card Sorting
•Mapas de Navegación
Ai
Indexación de Contenidos•Listar con jerarquías los contenidos
•Sin filtros
•Usar estructura de indexación científica
•Hacer varios
•Es la primera aproximación a una organización de contenidos para un sitio servicio digital
Ai
1.- Xxxxxxxxx 1.1.- Xxxxx xxxxx 1.2.- Xxxx xxx xx 1.2.1.- Xxxxxx 1.3.- Xxxxx 2.- Xxxxxxx xxxxx 3.- Xxxxxx 3.1.- Xxxxxx xxxx 3.2.- Xxxxxxxxxx 3.2.1.- Xxxxxxx 3.2.2.- Xxxxxxx 3.2.3.- Xxxxxxx 3.3.- Xxxxxxxxx 4.- Xxxxxxxx
Taxonomía•Jerarquía de conceptos
•Orden de los contenidos
•Genera una regla de cómo se organizarán y encontrarán los contenidos
Ai
• del griego ταξις, taxis, ‘ordenamiento’, y νομος, nomos, ‘norma’ o ‘regla’• proviene de cómo la biología organiza y clasifica las especies
Card sorting•Organización de menús por tarjetas
•Participan los arquetipos
•Todos tenemos una opinión de cómo organizar el contenido
•Hay coincidencias críticas que permiten estructurarlo sobre seguro y proyectar una buena jerarquía
Herramientas •http://www.optimalworkshop.com/optimalsort.htm
•http://uxpunk.com/websort/
•Lapiz & papel :)
Ai
Mapa de Navegación•Es la culminación del proceso de Ai
•La materialización de la organización de contenidos
•Permite involucrar a los clientes y TI
•Visualiza las jerarquías, niveles y pertenencias
•Vislumbra elementos
Ai
• Mostrar Mapas de Navegación
Librería
ETAPA 1 (Marzo 2013)
MyAD Catálogo BackEnd Cliente
Backoffice AD
Catálogo EmbebibleTeaser API y
Conexión
Crear cuenta
Ingresar Productos
Verificación
Cobro
Publicación
Fichas publicadas
Contacto (Normal o Logeado)
Exportación de fichas
Geolocaliza Track
Edición
Info Productos
Pares relacionases
con AD
Tageo de fotos
Maquetas navegables
Ai
SE APLANA LA TARIFA
Precios
Rack
Calculadora
Temporadas
Cambio de Tipo de Hab
Aplicar Tarifa de
Temporada
Aplicar descuento libre diario
Aplicar Total (plano)
Resumen
No aparecen: • Precio• Descuento
No aparecen: • Precio• Descuento
Aparece:Tarifa Promedio
Se reinicia
Columna Tipo de Habitación
Aparecen:• Precio• Descuento• Precio Final
Sobreprecio
Ai
Lenguaje de Mapas en Ai•Lenguaje de Jesse James Garret (http://www.jjg.net/ia/visvocab/spanish.html)
Ai
• Página o lote de páginas• Archivos o lotes de archivos• Flujo es una tarea reutilizable (un login en todo el sitio)• Area es un grupo de páginas que comparten atributos comunes • Punto de continuación: es para cortar mapas en partes • Punto de Decisión: por ejemplo una opción de descarga o visualizar en HTML• Conjunto recurrente: cuando una acción genera resultados múltiples simultáneos (pop-up, carga de página)
Sesión Nº2
2
Diseño de Interacción
Mapas de Clases
Partituras de Interacción
Wireframes
Diseño de Interfaces
Diseño tipográfico y cromático
Dirección de Arte Fotográfico
Diseño de Interfaces de Usuarios (UI)
• Metodología DCU (2003) • Permite vender mejor ya que el cliente entiende lo que se hará, los tiempos y tareas • Las soluciones de Diseño son objetivas, no subjetivas • Se enfatiza que las conversaciones serán técnicas • Permite trazar una línea de tiempo de manera sencilla y coincidente con la metodología (Gantt)
¿Preguntas, dudas, ideas, ejemplos, etc.?
¡Ahora!
