Taller de UX & Usabilidad

Sesin N1/3 Desde la Estrategia a la Arquitectura de la Informacin

! ! ! !

Mejorando.la Sbado 16 de noviembre de 2013

Quin soy?
@jorgebarahona @ayerviernes @clerkhotel www.facebook.com/jorgebarahona Diseador de Experiencia de Usuarios Emprendedor serial ayerviernes.com clerkhotel.com monterilla.cl ead.pucv.cl jbarahona.com jbarahona@ayerviernes.com

Es inventar el futuro

Qu es Disear la Experiencia de los usuarios?

Es construir un conocimiento

Disear: italiano disegno dibujo, designio, signare, signado "lo por venir" Experiencia: Del latn experiri, "comprobar" Es una habilidad derivada de la observacin, de la participacin y de la vivencia de un evento o proveniente de las cosas que suceden. La experiencia tiene que ver con los verbos A ms experiencia menos publicidad

Disear Experiencica

Es inventar el futuro a travs de Arquitectura de la Diseo de Interaccin los verbos, relatos que Informacin construyen aprecio y compromiso Diseo de Interfaces
Diseo de Front End

! Las personas se relacionan con los sistemas en un perfecto equilibrio entre la razn de los wireframe y la emocin de las interfaces." ! Por qu? Porque hemos mutado de consumidores a co-creadores de los bienes de consumo

Metodologa Sesin N1 UX
Brief Estrategia Propuesta Comercial Benchmark

Usabilidad & Comportamiento de las Personas

Etnografa Personas & Escenarios Indexacin de Contenidos

Arquitectura de la Informacin

Card Sorting Mapas de Navegacin

Metodologa DCU (2003) Permite vender mejor ya que el cliente entiende lo que se har, los tiempos y tareas Las soluciones de Diseo son objetivas, no subjetivas Se enfatiza que las conversaciones sern tcnicas Permite trazar una lnea de tiempo de manera sencilla y coincidente con la metodologa (Gantt)

Estrategia

Estrategia
Brief Contrabrief Propuesta Comercial Debrief Benchmark Brief final

Estrategia

! Del griego, signica liderar" ! Se ocupa de planear y dirigir las tcticas" ! Proponerle a un cliente que disears con el una estrategia, quiere decir que liberars el proyecto. Somos capitanes de un barco donde hay que dar ordenes y ganarse a los soldados para los momentos difciles." ! Determinar el problema independiente de la solucin que te piden

Brief
Quines? Qu? Cul es el problema? Presupuesto Por qu? Para qu? Para cundo? Con quines?
Estrategia
https://www.dropbox.com/s/94ll2b8h7c5djre/BriefAyerViernes2013.pdf

Abramos el Brief de AyerViernes

Un buen Brief permite

Disear una Propuesta Disear una Estrategia Una buena Estrategia permite determinar Metas y Objetivos Tcticas y plazos Hacer un balance (de-brief)

Estrategia

Propuesta Comercial
Identificador claro Responsable (ambas empresas) Contexto (Brief) Metodologa o Visin Propuesta Objetivos, tcticas y entregables Tiempos y Precios Exclusiones
Estrategia

Merlin (OSX) projectwizards.net OmniPlan (OSX-iPad) omnigroup.com/omniplan/ Team Gantt (Online) https://teamgantt.com Gantt Project (Linux) http://www.ganttproject.biz

! ! ! ! !

Propuesta NO una cotizacin" Tenemos folios con URLs de las propuestas" Gantt" Google Docs" Abramos Merlin

Benchmark
Comparativo Cualitativo Competidores: buenas prcticas o malas :) Normalmente se hace entre 3 a 5 consultores Cuantitativo Consultores construyen parmetros especficos que genere indicadores desde preguntas especficas Permite generar metas del proyecto
Estrategia

Benchmark

Estrategia

https://www.dropbox.com/s/3oyytodnf0y0j3k/ UXa_International_eBanking_Benchmark_Study_2012.pdf

Veamos el benchmark de la Banca

Estrategia UX
Entrega los recursos necesarios para crear un mapa futuro Baja las tcticas con objetivos, tiempos, costos y ejecutores para lograr las metas planteadas en la Estrategia Disea una Gantt acorde a los escenarios a enfrentar Avanza sistemticamente y no por reaccin. Involucra a toda la compaa. Deja de ser una idea de Gerencia para transformarse en una idea de todos Debe necesariamente involucrar a la alta gerencia
Estrategia

! ! ! ! ! !

El diseador 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 ms que un mero sitio) y evitar acatar a primeras las intuiciones de los clientes." Evita la compra spot y alienta la inversin respaldada en un conocimiento cabal del sistema. Todos sabrn qu, cmo y cundo" Determina el qu versus el cmo (qu es lo que ven los clientes)" Disear UX es disear la capa de negocios (no es tecnologa ni diseo)

Cmo hacer Estrategia UX?

Diseo del Servicio

Estrategia
Service Design Thinking, Marc Stickdorn & Jakob Schneider

Turismo" ! Espectativas: los clientes tienen un sueo viajar y buscan informacin a travs de muchos soportes que inuencian la decisin del destino " ! Experiencia: buscar hoteles en el destino, vuelos, entretencin, etc." ! Satisfaccin: socializamos las experiencias (redes sociales, dejamos opiniones, recomendamos)

PRE-SERVICIO

SERVICIO

POST-SERVICIO

Expectativas

Experiencias

Satisfaccin

Estrategia

Service Design Thinking, Marc Stickdorn & Jakob Schneider

Sin Estrategia es difcil Disear un portal

Revisemos una Propuesta de

Investigacin

Usabilidad & Comportamiento de las Personas

Usabilidad Pone a prueba los sistemas Test Heursticos Paseos cognitivos Comportamiento de las Personas Personas & escenarios Etnografa Conversaciones guiadas
Investigacin

Personas & Escenarios

Personas = Arquetipos o personajes Permite ponernos en el lugar de los usuarios finales para los que diseamos Observa escenarios reales de uso Permite tener la descripcin de los usuarios para hacer test, etnografa y conversaciones guiadas Personifica lo que hacemos
www.cooper.com

http://www.amazon.com/ dp/0672316498

Investigacin

! ! ! ! ! !

Alan Cooper es el creador de los personajes y escenarios. " En este libro se describen, sus tipologas, etc." Tenemos mucha experiencia en internet" Difcil ponerse en el lugar de los usuarios" El anti-lab" Cules 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 quin le diseamos (y a quin no) Los diferenciamos por sus metas
Investigacin

! 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 ms de 3 puede inducir a replantear la persona Secundario puede usar interacciones ajenas Disear para los primarios

Investigacin

! 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

Investigacin

! Un personaje usando un servicio con metas claras" ! Dene interacciones y exigencias al sistema" ! Esta siempre relacionado con el personaje"

Personas & Escenarios

Busca personificar el diseo en situaciones reales de uso Conduce el futuro del proyecto. define Estudios tests Wireframes Interfaces Front End
Investigacin
http://www.amazon.com/dp/ 0470084111

Etnografa
Observacin y participacin con grupos especficos de usuarios Buscamos entender las acciones y conversaciones que tienen cuando usan un determinado servicio Usamos Notas de Campo para registrar la observacin Notas, Fotos, vdeos y croquis

Investigacin

! Observar usuarios reales accionando un cajero automtico" ! Cmo se acercan? Cmo 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 impresin) Etc.

Thoughtless Acts?: Observations on Intuitive Design Jane Fulton Suri (IDEO)

Investigacin

Conversaciones guiadas

Investigacin

! ! ! ! !

Son conversaciones relajadas" Escuchar a los arquetipos" Sus ideas de cmo podra hacerse mejor el sistema" Siempre quieren ayudar" Son guiadas porque buscamos comprender cosas especcas (quin hace los procesos fsicos?, call-center, etc.)

Arquitectura de la Informacin

Eleccin 2000 USA

Ai

! Grave error en el diseo de la informacin los votantes confundieron su eleccin con la accin" ! Eleccin fue tan estrecha que el ltimo condado en cerrarla (voto visible) hizo historia al cuestionarse su diseo que induce al error" !

Qu es la Ai?
Saul Wurman (1962) Organiza patrones inherentes en los datos, haciendo claro lo complejo.

Edward Tufte El diseo de la presentacin de la informacin para facilitar el entendimiento.

Ai

Qu es la Ai?
Peter Morville & Louis Rosenfeld
!

Clarica la misin y visin del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia
!

Determina el contenido y funcionalidad que el sitio va a tener

!

Especica cmo los usuarios van a encontrar la informacion al denir su organizacin, navegacin, etiquetado y sistemas de bsqueda

Ai

Herramientas de Ai
Indexacin de Contenidos Taxonoma Card Sorting Mapas de Navegacin

Ai

Indexacin de Contenidos
Listar con jerarquas los contenidos Sin filtros Usar estructura de indexacin cientfica Hacer varios Es la primera aproximacin a una organizacin de contenidos para un sitio servicio digital
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

Ai

www.learnchile.cl
Ai

Taxonoma
Jerarqua de conceptos Orden de los contenidos Genera una regla de cmo se organizarn y encontrarn los contenidos

Ai

! del griego #$%&', taxis, ordenamiento, y ()*)', nomos, norma o regla" ! proviene de cmo la biologa organiza y clasica las especies

Card sorting
Organizacin de mens por tarjetas Participan los arquetipos Todos tenemos una opinin de cmo organizar el contenido Hay coincidencias crticas que permiten estructurarlo sobre seguro y proyectar una buena jerarqua

Herramientas
http://www.optimalworkshop.com/optimalsort.htm http://uxpunk.com/websort/ Lapiz & papel :)

Ai

Mapa de Navegacin
Es la culminacin del proceso de Ai La materializacin de la organizacin de contenidos Permite involucrar a los clientes y TI Visualiza las jerarquas, niveles y pertenencias Vislumbra elementos

Ai

Mostrar Mapas de Navegacin

ETAPA 1 (Marzo 2013)

Maquetas navegables

Librera BackEnd Cliente Backofce AD API y Conexin Catlogo Embebible

MyAD

Catlogo

Teaser

Fichas publicadas

Crear cuenta

Vericacin

Info Productos

Contacto (Normal o Logeado)

Exportacin de chas

Ingresar Productos

Edicin

Pares relacionases con AD

Geolocaliza

Cobro

Track

Tageo de fotos

Publicacin

Ai

Precios

Rack

Temporadas

Sobreprecio

Calculadora

No aparecen: Precio Descuento

No aparecen: Precio Descuento

Cambio de Tipo de Hab

Aplicar Tarifa de Temporada SE APLANA LA TARIFA

Aplicar descuento libre diario

Aplicar Total (plano)

Aparece: Tarifa Promedio

Se reinicia

Aparecen: Precio Descuento Precio Final

Resumen

Ai

Columna Tipo de Habitacin

Lenguaje de Mapas en Ai
Lenguaje de Jesse James Garret (http://www.jjg.net/ia/visvocab/spanish.html)

Ai

! ! ! ! ! ! !

Pgina o lote de pginas" Archivos o lotes de archivos" Flujo es una tarea reutilizable (un login en todo el sitio)" Area es un grupo de pginas que comparten atributos comunes " Punto de continuacin: es para cortar mapas en partes " Punto de Decisin: por ejemplo una opcin de descarga o visualizar en HTML" Conjunto recurrente: cuando una accin genera resultados mltiples simultneos (pop-up, carga de pgina)

Sesin N2
Mapas de Clases Diseo de Interaccin Partituras de Interaccin

2
Diseo de Interfaces

Wireframes Diseo tipogrco y cromtico Direccin de Arte Fotogrco Diseo de Interfaces de Usuarios (UI)

Metodologa DCU (2003) Permite vender mejor ya que el cliente entiende lo que se har, los tiempos y tareas Las soluciones de Diseo son objetivas, no subjetivas Se enfatiza que las conversaciones sern tcnicas Permite trazar una lnea de tiempo de manera sencilla y coincidente con la metodologa (Gantt)

Preguntas, dudas, ideas, ejemplos, etc.? Ahora!