Ux formato tec bbva v 3.1

Taller UX BBVA
Moisés Cielak & MauricioAngulo
Un enfoque mas humano para un asunto de seres humanos
1

Objetivos específicos:
• Que los participantes:
• • Comprendan los conceptos y diferencias en UX (experiencia de usuario) y Usabilidad.
• • Incorporen técnicas para medir y analizar el uso de una interfaz, llevándolas a la práctica
• con ejemplos y ejercicios.
• • Se introduzcan en el conocimiento de las técnicas de investigación de usuarios.
• • Comprendan el concepto de arquitectura de información. Se verán ejemplos concretos
• (patrones de diseño) para comprendercómo diseñar la arquitectura de información de
• un sitio.
• • Se introduzcan en el diseño de Interacción, conociendo los principios y patrones de diseño
(formularios, call to actions, entre otros).
• • Incorporen herramientas para utilizar a la hora de diseñar la experiencia de usuario.
2

• Módulo I Introducción a UX. (24 horas) Temario:
• UX Definición Diferencia entre UX y Usabilidad ¿Por qué implementar UX
en nuestra empresa? UX en el circuito de software ¿Cómo calcular el ROI?
• Investigación de usuarios Needfinding Personas
• Usabilidad ¿Qué es la usabilidad? ¿Qué son las heurísticas de usabilidad?
• Ejemplos de errores de usabilidad
• Métricas de usabilidad ¿Cómo medir la usabilidad? ¿Cómo realizar pruebas
• con usuarios?
3

• Módulo II Introducción a Diseño de Interfaces (24 horas) Temario:
• Arquitectura de la Información ¿Qué es la AI? Navegación Breadcrumb
• Buscadores Ejemplos de buscadores Tipos de búsqueda ¿Que debe tener un
• buscador?
• D I Conceptos Generales Flujos visuales y call to action Principios de diseño de
• interacción
• D II Diferencia entre Mockups, Wireframes y Prototipos Patrones de IxD
• Formularios Login Validaciones Ayudas Home ¿Que debe tener una home?
• Herramientas Balsamiq Axure
4

Módulo I
Introducción a UX
• UX Definición Diferencia entre UX y Usabilidad ¿Por qué
implementar UX en nuestra empresa? UX en el circuito de software
¿Cómo calcular el ROI?
• Investigación de usuarios Needfinding Personas
• Usabilidad ¿Qué es la usabilidad? ¿Qué son las heurísticas de
usabilidad?
• Ejemplos de errores de usabilidad
• Métricas de usabilidad ¿Cómo medir la usabilidad? ¿Cómo realizar
pruebas con usuarios?

Qué hace Un Diseñador UX todo
el día?
https://www.youtube.com/watch?
v=Ovj4hFxko7c
9/3/16
6
usabilidad - UX- accesibilidad Jordi
Sánchez - @jordisan - http://jordisan.net
https://www.youtube.com/watch?v=Ovj4hFxko7c

Usabilidad, palabra “de moda”
9/3/167 usabilidad - UX- accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net

Día Mundial de la Usabilidad
World Usability Day http://www.worldusabilityday.org
https://www.youtube.com/watch?v=Jo91eehaafc

Diseño de experiencia de
usuario
Teoría, Historia y Método

Diseñar antes de Construir
Ahorra tiempo, recursos y
nos aleja de errores

Experiencia de Usuario
Diseño de Experiencia de Usuario
User Experience (UX)
User Experience Design (UXD)

“La percepción y respuesta de una persona como resultado
de las expectativas ante o el uso de un producto, sistema o
servicio”
“Emociones de usuarios, sus creencias,preferencias,
percepciones,respuestasfísicas y psíquicas,
comportamientosy logros obtenidos antes, durante y al
finalizar el uso.”

* Donald Norman, Jim Miller, Austin Henderson: What You See, Some of What's in the Future, And How We GoAbout Doing
It: HI at Apple Computer. Proceedingsof CHI 1995, Denver, Colorado, USA
El término fue dado a conocer por
Donald Norman alrededor de 1995 por
un artículo titulado:
Norman es uno de los pioneros del HCI en los años 80 y autor del
famoso libro “El diseño de las cosas cotidianas”The Design of Everyday
Things, Basic Books (September 17, 2002)
“User ExperienceArchitect, in the mid-1990s”*

TheDesignofEverydayThingsDrupalConMunich2012
DonaldA.Norman
Co-founder & principal of the Nielsen
Norman group
Tuesday 21 August 12

“Technology Changes Rapidly. People Change Slowly”
Image: KertasticPlanetMinecraft
http://www.planetminecraft.com/blog/theories-by-kerr-volume-4/
Presentatienaam2012

Norman Door #normandoor
http://www.jnd.org/dn.mss/when_bugs_become_fea.html

Small visual cues often improve usability

Yellow note at
hinge
Embossed
ledge to
open door
Inset ledge
with hinge
Doors of refrigerated cells at supermarkt

Yellow note
near handle
Handle to
open door
Doors of freezer cells at supermarkt

“I never design a building before I’ve seen the site
and met the people who will be using it.”
—Frank LloydWright

Remote Control
for Siemens
cartridge type
(ceiling)
A/C Unit

Locked entry by keycard lock

CitizenM Hotel
Schiphol
Amsterdam

Flight Safety Instructions Galore
Open Here,The Art of Instructional Design

Roundabout where cars yield

Roundabout where cyclists yield

Google Premium Navigation
EULA popup after 30 day trial use

EULA’s....

Toerris human

“A common mistake that people make when trying to
design something completely foolproof is to
underestimate the ingenuity of complete fools.”
—Douglas Adams

Use metaphors
*AND* words

“There is no
intuitive
interface, not
even the
nipple.
It's all learned.”
—Bruce Ediger
http://bit.ly/
xPHagz

How we reallyuse the web
—Don’t Make MeThink bySteveKrug

Presentatienaam2012
Poorusabilityresultsin
• Anger and frustration
• Decreased productivity in the workplace
• Higher error rates
• Physical and emotional injury
• Equipment damage
• Loss of customer loyalty
• Costs moneyTuesday 21 August 12

GuidelinesforMaking
ThingsUsable

Know the user and manage his expectations

Progress indicator for
OSX Finder Search
Provide Feedback

Provide Constraints

Use aﬀordances when possible
http://www.jnd.org/dn.mss/aﬀordances_and.html
TheDesignofEverydayThings

Presentatienaam2012
• What are my options at
this level? (secondary
navigation)
• Where am I in the
scheme of things? (“You
are here”indicator)
• How can I search?
The Trunk Test
• What website is this?
(site ID)
• What page am I on?
• What are the major
sections of this
website? (primary
navigation)

cc
This
Jonathan
Ive
SeniorVice
President Industrial
Design Apple Inc.
Foto©Eyevine

Presentatienaam2012
“It's the ' nishing the back of the drawer.You can argue
that people will never see it and it's very hard to describe
why it's important but it just seems important.
It's a way that you demonstrate that you care for the
people that you are making these products for. I think we
see ourselves as having a civic responsibility to do that.
It's important. It's right. It's very hard to explain why.”
―Jonathan Ive
From JonathanIveinterview:simplicityisn'tsimple on
telegraph.co.uk http://bit.ly/JFnLSN

Ingredients:
woodpulp,
paper,
color ink (Pantone
292SC & 021C),
UV-coating,
air bubble bags,
some special
skills, a lot of love
and your order of
course.
It really tastes like
cardboard.
—CoolBlue

Guy Kawaski: Make Meaning —The Art of the Start.
http://ecorner.stanford.edu/authorMaterialInfo.html?mid=1171

Presentatienaam2012
Principles of Design Thinking
•
•
•
•
Know your users and align with user’s mental
models
Provide appropriate feedback
Eliminate the opportunity for error
All things you make will have to make meaning

Deviene de varios fenómenos:
§ Ergonomía y Human Factor
§ HCI (Interacción Humano-Computadora)
§ Diseño Centrado en Usuario (User-Centered Design)
§ Usabilidad
§ Accesibilidad

Sub-campo o rama de la Experienciade Usuario.
Aspecto relacionado con el proceso de creación de un
software basándoseen los indicadores que influyen en
las experiencias que tiene el usuario cuando interactúa
con “algo”.

Término sombrilla que agrupa a varios procesos de diseño; integra
varias disciplinas y toma de diferentes ciencias.
Por ejemplo algunos procesos:
• Arquitectura de Información
• Diseño de Interacción
• Diseño de información
Por ejemplo algunas ciencias:
• Psicología cognitiva
• Ciencias de la Información
• Ciencias de la Comunicación
• Matemáticas

Historia del énfasis en las tecnologías
Juan Francisco Reyes
http://www.xentido.com/2010/08/¿diseno-de-experiencia-de-usuario-o-diseno-centrado-en-el-usuario/

Jesse James Garret (2000) traducido por Javier Velasco
Los elementos del UX

Nivel 1. Funcionalidad. El producto cumple con una finalidad o función,
soluciona un problema.
Nivel 2. Usabilidad. El producto es fácil, cómodo y seguro de usar. Es eficiente
Nivel 3. Placer. Cuando un producto ya es fácil de usar, la siguiente necesidad
del consumidor o usuario es que el producto le proporcione algo más, no sólo
beneficios funcionales sino también emocionales. El producto es deseable.
Niveles de necesidad
JORDAN P. W. (2000) “Designing pleasurable products.
An introduction to the new human factors. Taylor and Francis”.
London.

Diseño como proceso comunicativo

Tres círculos de la AI
Peter Morville

Panal de la Experiencia de UsuarioPeter Morville

Simplicidad como principio de diseño
Interfaces sencillas, donde no haya nada superfluo.

“No se puede experimentar la experiencia hasta
que lo experimente”
Bill Moggridge, IDEO
Ponerse en la posición del usuario
Los mejores diseñadores son los que son
capaces de sufrir como usuarios los errores
de diseño.

¿Qué es UXD?
Un enfoque o una filosofía de diseño.
¿De qué se trata?
De diseñar a partir del estudio de los aspectos que influyen y determinan la
experiencia que tienen los usuarios con estos sistemas.
¿Cómo se hace?
Interactuando con los usuarios, investigándolos, estudiando el contexto de uso,
modelando, representando,prototipando, etc.
Concepto

¿Utilidad?
Minimiza errores, aumenta la posibilidad del logro del producto,
facilita el proceso de creación del producto y satisface al usuario
final.
¿Dónde se hace?
Diseño de software (en el caso de este curso).Aplicaciones para
Web, Desktop, Móvil, etc.
Concepto

Disciplina
90 % práctica - 10 % teórica
Se aprende haciendo
“Removing testicles is the way to learn to castrate”

Nuestro lema es…
“Depende”
(it depends)
No existe nada absoluto en el diseño de software, las cosas
pueden cambiar según el contexto, los contenidos y los
usuarios.

Criterio….
“La experiencia está más basada en
la memoria que en la realidad.
Si lo que recuerdas del producto es
maravilloso, serás capaz de perdonar
cualquier situación problemática.”
Donald Norman

METODOLOGÍA
¿Cómo hacer diseño enfocado en la
experienciadel usuario?

} Etapas. Respondenal tiempo transcurrido ¿cuándo?
} Actividades o tareas. Responden al proceso ¿qué?
} Técnicas. Respondena lo que se hace para lograr los
procesos y tarea ¿cómo?
} Herramientas. Respondena qué se usa para aplicar
las técnicas ¿con qué?
PROCESO

1 } INVESTIGACIÓN (obtener toda la información posible
del proyecto, usuarios y producto a diseñar)
} ORGANIZACIÓN (proceso cognitivo de procesar toda
la información para convertirla en un producto)
} DISEÑO (propuesta del diseño del producto a partir de
lo organizado)
} PRUEBA (comprobación del diseño del producto
propuesto)
2
3
4
ETAPAS

• Información relacionadacon el proyecto
– Necesidades generales
– Temática del producto
– Objetivos del producto
– Intensión comunicativa del producto (Informar, entretener, alertar)
– Tipología
– Definición general de los usuarios /contexto /contenido
ETAPA INVESTIGACIÓN
1

• Estudio de Usuarios (receptores)
– Caracterización (tipología, roles, etc.)
• Perfil de usuarios
– Necesidades (de información, formación, etc.)
– Escenarios
– Tareas de usuarios
1

• Estudio del contexto.
– Características del contexto de uso (culturales, políticas, económicas, sociales y
tecnológicas)
– Definición del modelo de negocio.
– DAFO (FODA)
– Banco de problemas
– Flujograma de procesos y actividades
– Escenarios
– Estudio de mercado, productos similares, etc.
EN CASO DE REDISEÑO DE UN PRODUCTO
– Análisis de uso (Ejemplo: Logs, GoogleAnalytic)
– Evaluación al producto anterior
1

• Estudio de los contenidos.
– Inventario de recursos
– Mapas de conceptos
– Mapa de contenido
• Estrategia de trabajo, Análisis de recursos de
trabajo, Planificación del tiempo de trabajo, etc.
Artefactos generados en esta etapa:
Informes y Diagramas

• Representación de todas las estructuras posibles de los contenidos,
en correspondencia a las necesidades de usuarios y su contexto.
• Definición de todas las formas de jerarquizarlos contenidos.
• Hacer corresponderlas estructuras planteadas a las necesidades
tanto de emisores (clientes)como de receptores (usuarios).
ETAPA ORGANIZACIÓN
2
[ARTE]
Diagramas manuscritos y digitales

• Definición de la estructura del producto (diagrama de organización)
(blueprint)(taxonomía)
• Definición del funcionamiento de estas pantallas. (diagrama de
funcionamiento) (flow)
• Definición de las pantallas del producto. (diagrama de presentación)
(wireframe)
• Definición de las etiquetas del producto.
• Definición de los servicios que ofrecerá el producto digital.
• Creación de prototipos de bajo y alto nivel
ETAPA DISEÑO
3
Diagramas digitales y prototipos, informes del producto

• Pruebas de prototipos
• Revisión de diagramas
q Técnicas para hacer los test
– Crítica de diseño (con usuarios y expertos)
– Test de usuarios (con usuarios potenciales finales)
– Test heurísticos (con expertos)
– Cardsorting (aplicación a otra muestra de usuarios)
ETAPA PRUEBA
4
Modificaciones a los de la etapa de diseño

• Las técnicas se usan según la necesidad dentro del proceso.
• No están obligatoriamente relacionadas con las actividades ni
las etapas.
• Se pueden usar en cualquier momento.
• Se pueden mezclar entre sí
– Cardsorting a expertos
– Tormenta de ideas con un Diseño Participativo.
– Encuesta con Análisis de frecuencia de textos.
Técnicas

• Reunión
• Entrevista y Encuesta
• Observación
• Revisión bibliográfica
• Consulta a experto
• Representación y mapeo
Técnicas básicas

• Tormenta de ideas. (brainstorming) (focusgroup)
• Crítica de diseño.
• Diseño participativo.
• Tormenta de necesidades.
• Escenarios.
• Benchmarking. (comparación)(análisisde homólogos)
• Análisis de frecuencia de texto.
Técnicas (principalmente para la búsqueda de
información)

• Organización de tarjetas (cardsorting)
– Agrupación
– Secuencia
– Posición de bloques
• Tabulación de contenidos.
• Diagramas de afinidad.
• Validación de términos.
Técnicas (principalmente para la organización)

• Análisis de tareas (task analisys).
• Flujogramas.
• Caminara cognitiva (cognitive walkthrough)
Técnicas (principalmente para el
funcionamiento)

• Diagramación en papel (paper prototype)
• Diagramación del producto:
– Diagrama de organización(blueprint)
– Diagrama de funcionamiento(flow)
– Diagrama de presentación(wireframe)
• Etiquetado
• Prototipado digital
Técnicas (principalmente para el
diseño)

Todos sabemos sufrimos lo que es

¿O es como la música de cámara?
Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE

Una definición formal (ISO 9241-11)
§Usabilidad: El grado en que un producto puede ser utilizado por
los usuarios para lograr sus propósitos con efectividad, eficiencia
y satisfacción en un determinado contexto de uso.
oEfectividad: ¿Pueden los usuarios hacer lo que quieren hacer?
oEficiencia: ¿Pueden hacerlo con poco esfuerzo/memoria/etc.?
oSatisfacción: ¿Cuál es la percepción de los usuarios acerca del
producto?
oContexto: ¿De qué situación estamos hablando?
oEmpezó a dársele más importancia a los dos primeros aspectos (los más
fáciles de medir)
International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm

Básicamente…
§Productos fáciles de usar
§“No me hagas pensar”
Don’t make me think: http://www.sensible.com/buythebook.html

Y llegó la UX (User eXperience)
§¡Tenemos que tener en cuenta la “experiencia del usuario”!
§¿Diseñador de experiencias? ¡Suena cool!
§Entonces… ¿usabilidad y UX son lo mismo?
Depende:
oSi por “usabilidad” solo entendemos eficacia y eficiencia, y no tenemos en cuenta la
satisfacción del usuario => NO
oSi por “usabilidad” solo incluimos actividades de evaluación, y no de análisis o diseño =>
NO
o(entre nosotros… SÍ)
§Lo importante es…
§ Tener en cuenta la experiencia global del usuario
§ Al final, una buena experiencia se consigue con aplicaciones usables

¿Y la accesibilidad (web)?
§Objetivo: que cualquiera tenga acceso a la web, independientemente de
sus habilidades o situación.
oNo solo discapacitados; ya lo veremos.
§¿Es lo mismo que usabilidad?
No; es un requisito previo:
oAccesible: “se puede llegar”
oUsable: “se puede usar fácilmente”
§Cuando hablamos de usabilidad, solemos referirnos a usuarios/situaciones
“normales” (si es que existe tal cosa)
§Cuando hablamos de accesibilidad, solemos referirnos a usuarios o
situaciones “especiales” (¿para quién?)
9/3/1694

En resumen…
§Usabilidad
Que sea fácil de usar
§UX (User eXperience)
Que el usuario tenga una experiencia satisfactoria
(suele conseguirse haciendo que sea usable)
§Accesibilidad
Que el usuario pueda usarlo
(nos solemos referir a situaciones “especiales”)

¿Es rentable invertir en
usabilidad?
9/3/16
96

ROI, ROI, ROI
§Ahorro en costos de desarrollo.
oMenos costes de formación.
oLos problemas se detectan antes.
§Mejora la eficacia y eficiencia en las tareas.
oImportante en aplicaciones internas e Intranets.
§Mejora las ventas.
oLos clientes tienen menos problemas a la hora de comprar.
oMenos clientes descontentos que abandonan.
oMás clientes nuevos.
§Incrementa la satisfacción de los usuarios.
oMenos problemas legales (reclamaciones).

Todo eso está muy bien, pero…

Algunos números generales
o"The rule of thumb in many usability-aware organizations is
that the cost-benefit ratio for usability is $1 : $10-$100.Once
a system is in development, correcting a problemcosts 10
times as much as fixing the same problem in design. If the
system has been released, it costs 100 times as much relative
to fixing in design." (Gilb, 1988)
o"The magnitude of usability improvements is usually large.
This is not a matter of increasing use by a few percent. It is
common for usability efforts to result in a hundred percent or
more increase in traffic or sales." (Nielsen, July 1999)
The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html

Más números
o"In Jared Spool's study of 15 large commercial sites, users
could only find information 42% of the time even though
they were taken to the correct home page before they were
given the test tasks." (Nielsen, October 1998)
o"IBM's Web presence has traditionally been made up of a
difficult-to-navigate labyrinth of disparate subsites, but a
redesign made it more cohesive and user-friendly. The
company said in the month after the February 1999 re-launch
that traffic to the Shop IBM online store increased 120 percent,
and sales went up 400 percent." (Battey, 1999)
The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html

¿Y en la actualidad?
o“Luckily, current usability ROI is so stupendously big (spend 10%
to gain 83%) that it can decrease much more and still be a
favorable proposition forbusiness executives.”(Nielsen, 2008)
§Pero eso es en entornos ya maduros y con experiencia en
temas de usabilidad:
o“During the last decade, the share of project resources allocated
to usability has held steady at around 10% in those enlightened
companies that include usability in their design lifecycle.” (Nielsen,
2008)
Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html

Casos concretos
9/3/16
102

Portal de viajes:
oAnalítica web => Muchos usuarios que iniciaban el proceso de compra no
completaban la transacción
oFormulario de pago (reconstrucción):
§ "After we realised that we just went onto the site and deleted that field - overnight there was a
step function [change], resulting in $12m of profit a year, simply by deleting a field.”
Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales-and-marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/
Name
Company
Address
Muchos usuarios particulares ponían el
nombre de su banco…
… y la dirección de su banco

El botón de los 300 millones de dólares
oEn un popular sitio de comercio electrónico (¿BB?), los usuarios
seleccionaban sus productos, y cuando deseaban confirmar la compra…
§Los usuarios nuevos guardarían sus datos para posteriores compras
§Los usuarios registrados no tendrían que volver a introducir sus datos
§Pero…
The $300 Million Button http://www.uie.com/articles/three_hund_million_button
Email Address
Password
Login Register
Forgot Password
“¿Por qué tengo que registrarme? Sólo quiero comprar”
“No recuerdo si ya me registré antes”
“¿Qué dirección de correo electrónico puse?”

El botón de los 300 millones de dólares (y II)
o45% de los clientes se habían registrado múltiples veces
oHasta 160.000 peticiones de contraseña al día
§ De ellos, el 75% no finalizaban su compra después.
§Solución:
§ “The number of customers purchasing went up by 45%. The extra purchases resulted in an
extra $15 million the first month. For the first year, the site saw an additional
$300,000,000”
The $300 Million Button http://www.uie.com/articles/three_hund_million_button
Email Address
Password
Login Register
Forgot Password
Email Address
Password
Login Continue
Forgot Password
You do not need to create an account
to make purchases on our site.
Simply click Continue to proceed to
checkout. To make your future
purchases even faster, you can
create an account during checkout

Aprender a escribir chino/japonés
§Prueba de una campaña de e-mail (test A/B)
oRecibir consejos sobre cómo usar el producto
How One Check Box Lowered Conversions by 17% http://www.georgesaines.com/?p=352

No solo en web…
Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitchesand design http://www.washingtonpost.com/business/technology/ford-to-upgrade-myford-touch-in-250000-vehicles-after-taking-
heat-for-glitches-and-design/2011/11/06/gIQAY4MNtM_story.html

¿Cómo se consigue?
9/3/16
108

Una noticia buena y una mala
§La mala: no hay trucos mágicos
§La buena: no hay trucos mágicos

Evaluando la usabilidad
§Muchas veces hay pocos recursos, sólo para evaluar la
usabilidad de algo ya desarrollado
§“Discount Usability”/”Guerrilla Usability” (Jakob Nielsen):
Técnicas que ofrecen buenos resultados con pocos recursos:
oEvaluación heurística (revisiónde un experto)
oTests de usuario
Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier http://www.useit.com/papers/guerrilla_hci.html

Evaluación heurística
§Inspección sistemática de una interfaz por parte de
expertos….
§… para comprobar si la interfaz cumple o no determinados
principiosde usabilidad (las “heurísticas”).
§Pasos:
1. Determinarobjetivos y alcance de la evaluación.
2. Selección de las heurísticas a utilizar.
3. Evaluación y detección de problemas por parte de los expertos.
4. Puesta en común. Informe y recomendaciones.
Heuristic Evaluation http://www.useit.com/papers/heuristic/

Heurísticas de usabilidad de Nielsen (1)
Visibility of system status
The system shouldalways keepusers informed about what is goingon, throughappropriatefeedback withinreasonabletime.
Match between system and the real world
The system shouldspeak theusers'language, withwords, phrases and concepts familiar to the user, ratherthansystem-oriented terms. Follow real-world conventions, making
informationappear ina natural andlogical order.
User control and freedom
Users often choosesystem functions by mistakeand will need aclearly marked"emergency exit" to leavetheunwanted statewithout having togothroughanextendeddialogue. Support
undo andredo.
Consistency and standards
Users shouldnot have to wonder whether different words, situations, oractions meanthesamething. Followplatform conventions.
Error prevention
Even better than good error messages is acarefuldesignwhichprevents a problemfromoccurringinthefirst place. Eithereliminate error-proneconditions or check forthem andpresent
users with a confirmationoptionbefore they commit to theaction.
http://www.nngroup.com/articles/ten-usability-heuristics/

Heurísticas de usabilidad de Nielsen (2)
Recognition rather than recall
Minimize theuser's memory loadby makingobjects, actions, and options visible. Theuser should not haveto remember informationfromonepart of thedialogueto another. Instructions
for use of the systemshould be visibleor easily retrievable wheneverappropriate.
Flexibility and efficiency of use
Accelerators -- unseen by thenovice user-- may oftenspeeduptheinteractionfortheexpert usersuchthat the system can cater toboth inexperiencedand experiencedusers. Allow
users to tailorfrequent actions.
Aesthetic and minimalist design
Dialogues should not contain information whichis irrelevant or rarely needed. Every extraunit of information ina dialogue competes withthe relevant units of information anddiminishes
their relativevisibility.
Help users recognize,diagnose,and recover from errors
Error messages should be expressedin plain language(nocodes), precisely indicatetheproblem, andconstructively suggest asolution.
Help and documentation
Even thoughit is better if the system canbeusedwithout documentation, it may be necessary to providehelpand documentation. Any suchinformation shouldbeeasy to search,
focused on the user's task, list concretesteps to becarriedout, andnot betoolarge.

Ejemplos de heurísticas aplicadas (1)

Ejemplos de heurísticas aplicadas (2)

Test de usabilidad (“thinking aloud”):
involucrando a los usuarios
§Una técnica evaluación: testeo con usuarios
oObservar a usuarios (representativos) mientras realizan tareas típicas con la aplicación (lo
que hacen, NO lo que opinan)
oHablan en voz alta sobre lo que están haciendo
oNo son necesarios muchos usuarios (típicamente 5)
§Pasos:
1. Planificar el test
2. Preparar tareas y material
3. Preparar lugar de la prueba
4. Reclutar usuarios
5. Realizar la prueba
6. Analizar los resultados y presentar informe
Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html

Ejemplo: usabilidad de Joomla!
§Ejemplo: usabilidad de Joomla!
oTarea: cambiar el aspecto de un sitio web recién instalado
§Infraestructura:
§ Desde un simple ordenador y alguien tomando notas en papel (en un entorno tranquilo y
cómodo)….
§ … hasta un laboratorio de usabilidad con:
– Dos habitaciones (pruebas y observación)
– Cámaras de vídeo y micrófonos
– Grabaciónde la pantalladel usuario
– Espejos unidireccionales
– Eyetracker
– …
§ La tecnología ayuda, pero NO es lo más importante
¿Es Joomla! Usable? http://www.slideshare.net/jordisan/es-joomla-usable-joomla-day-2010

“Haz fácil lo imposible”
§Cómo personas no expertas en usabilidad pueden hacer sus
propias pruebas de usuario internas
§Un día al mes durante el desarrollo:
oDedicar una mañana haciendo
pruebas con tres usuarios
oConseguir que haya observadores:
desarrolladores, jefes, …
oDecidir con observadores
qué problemas son los prioritarios y
qué cambios se van a hacer
antes de la próxima ronda
Haz fácil lo imposible (Anaya) http://www.anayamultimedia.es/cgigeneral/ficha.pl?id_sello_editorial_web=23&codigo_comercial=2315633#
9/3/16 usabilidad - UX- accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net119

Evaluar está bien;;
pero si esperamos demasiado…
http://blogs.mentor.com/johnparry/blog/2010/07/01/sony-vaio-laptop-in-mass-recall/

¿Qué queremos evitar?
No es lo que necesito
No lo encuentro
No lo entiendo
En realidad …
Está
claro
Usuario (o no)Analista
1. Requisitos 3. Entrega2. Desarrollo

Mejor:
teniéndola en cuenta desde el principio
oMúltiples técnicas en todas las etapas.
§ Evaluación de expertos; prototipado; casos de uso; …
§ Internamente, o asesoramiento externo.
oSi se hace durante todo el proceso, de modo iterativo:
DCU (Diseño Centrado en el Usuario)
UsabilityNet: Methods table http://usabilitynet.org/tools/methods.htm
En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/ articulos/dc u.htm

Un paso más allá: DCU
§Diseño Centrado en el Usuario
oEstá orientado a los usuarios
del producto, que participan durante todo el
proceso.
oA pesar de denominarse “diseño”, en realidad
se aplica durante todas las fases del
desarrollo (planificación, diseño, desarrollo,
evaluación), desde las primeras etapas.
oEs iterativo.
oEs multidisciplinar.
oSu objetivo es obtener productos usables y
satisfactorios para los usuarios.
En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm

Ejemplo: prototipado + test usuario
http://www.youtube.com/watch?v=9wQkLthhHKA

Usabilidad NO-WEB (1)
§La mayoría de la información práctica existente sobre usabilidad hace
referencia a sitios web
§¿Hasta dónde es aplicable a otro tipo de aplicaciones?
§En general:
oTécnicas SÍ son aplicables a cualquier tipo de aplicación:
evaluación heurística, tests con usuarios, prototipado, etc.
oPrincipios generales (heurísticas) SÍ son aplicables a cualquier tipo de
aplicación:
visibilidad del estado; lenguaje del usuario; …
oLos checklists y recomendaciones concretas…DEPENDE:
escribir para la web; enlaces; …

Usabilidad NO-WEB (2)
§Algunas diferencias en aplicaciones desktop o
móviles:
oEntorno hardware/software más controlado
oEstándares específicos del sistema (Apple; Microsoft; Google)
oMenos libertad de navegación
oPerfiles de usuario normalmente más delimitados
oExpertos en usabilidad necesitan más tiempo para conocerlas
§¿Se están acercando?
Windows User Experience Interaction Guidelineshttp://msdn.microsoft.com/en-us/library/aa511258.aspx
Apple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/

Consejo de mínimos
No se pueden aplicar todas en cada proyecto
§ Adecuarse a objetivos, necesidades, recursos, aspectos críticos, …
Pero para empezar…
oContratar/formar personal especializado
oIntegrar usabilidad en el proceso de desarrollo
Subconjunto (mínimo) de técnicas:
– Roles de usuarios; personas (“quién”)
– Casos de uso (“qué”)
– Prototipado de interfaces (“cómo”)
– Evaluación(heurística/pruebas con usuarios)
UCDmanager
Usability Planner http://www.usabilityplanner.org/
UCDmanager http://ucdmanager.net

DISEÑO CENTRADO EN EL USUARIO,
LEAN UXY PROTO-PERSONAS
10 MINUTOS

•
DISEÑO CENTRADO EN EL USUARIO
Un enfoque para el diseño y desarrollo de sistemas que tiene co
objetivo hacer sistemas interactivos más usables,centrándose en
uso del sistema y aplicando factores humanos/ergonomía y los
conocimientos y técnicas de usabilidad*.
*Norma ISO 9241-210:Ergonomics of human–system interaction
— Part 210:Human-centred design for interactive systems

Diseño Centrado en el Usuario
Norman & Draper,User Centered System Design:
New Perspectives on Human-computer Interaction,1986

•
•
•
¿QUÉ SE DEFINE EN LA FASE ENTENDER?
Las características de los usuarios previstos,sus necesidades,
comportamientos y metas.
Las tareas que los usuarios realizarán con el producto para cumplir
metas especíﬁcas.
El contexto en el que los usuarios ocuparán el sistema.

¿QUÉ SE DEFINE EN LA FASE ENTENDE
1. Objetivos del producto/servicio
2. Objetivos de negocio
3. Objetivos de los usuarios
4. Deﬁnición de audiencia meta
5. Diseño de Personas,tareas y escenarios

¿QUÉ SE DEFINE EN LA FASE ENTENDER?
6. Requerimientos funcionales
7. Requerimientos de contenido
8. Análisis de competencia
9. Mejores prácticas
10.…

CARACTERÍSTICAS DE LOS USUARIOS
PREVISTOS,SUS NECESIDADES,
COMPORTAMIENTOSY METAS

“Quiero una app
para mi negocio”
- El cliente

Actualmente,casi todos los proyectos empiezan considerando
una serie de supuestos,es parte de la incertidumbre.
Por lo general,ignoramos los supuestos o peor aún,
los tomamos como hechos.

La audiencia meta también inicia como un supuesto.

•
•
PROTO-PERSONAS
Una Persona es una representación o arquetipo de un usuario,
normalmente apagado a la investigación de usuarios reales durante el
proceso de Diseño Centrado en el Usuario.
En Lean UX, se utilizan Proto-Personascuando no existen
recursos para crear verdaderos personajes basados en investigación
de usuarios,se basan en investigación secundaria y supuestos del
equipo.

•
•
•
CUÁNDO USAR PROTO-PERSONAS
Al inicio del proyecto,cuando se quiera asegurar el alineamiento sobre la
audiencia meta entre el cliente y todas las partes interesadas.
Cuando un cliente decida no invertir en investigación de usuarios.
Al hacer Lean UX,Proto-Personas representa la mejor conjetura en
cuanto a quién está utilizando (o va a utilizar)el producto y por qué.Se
comienza con suposiciones y luego se realiza investigación para validar
las
hipótesis.

EJERCICIO #1
CREACIÓN DE PROTOPERSONAS
15 MINUTOS

“Quiero una app para
que cualquier ciudadano
del DF pueda tramitar y
obtener un permiso para
consumo recreativo de
Marihuana”
- Miguel Ángel Mancera

ACTIVIDAD
•
•
•
Identifiquen supuestos del proyecto,¡escríbanlos!
Identifiquen los diferentes perfiles de usuario
Definan una Proto-Persona por cada perfil de usuario

Analisis de sitios horribles
• Experiencia del usuario horrible
147

•
•
ESTUDIO
CONTEXTUAL
Método etnográﬁco para obtener
información sobre el contexto de uso,
donde
los usuarios son entrevistados y
observados en sus propios entornos por
lo que
el análisis de datos es más realista que
los datos obtenidos en un laboratorio.

•
•
ESTUDIO CONTEXTUAL
Los cuatro principios de la investigación contextual son:
• Enfoque - Plan para la investigación.
• Contexto - Ir al entorno del usuario y observar su
comportamiento
• Alianza - Entrevistar a los usuarios acerca de su trabajo y
participar en el
descubrimiento de sus necesidades y metas respecto al producto.
• Interpretación - Desarrollar un entendimiento cualitativo sobre
lo observado.

•
•
ENTREVISTA
Método de conversación uno-a-uno para la obtención
de información cualitativa de
usuarios potenciales del producto.
Recomendaciones para lograr entrevistas exitosas:
• Establecer expectativas correctas
• Callar y escuchar
• Minimizar preguntas sesgadas y escuchar
• Ser amigables y escuchar
• Olvidar supuestos y escuchar
• Evitar generalizaciones y escuchar
• Atención a señales no verbales

•
•
ENCUESTA
Conjunto de preguntas para evaluar las preferencias, actitudes, características y
opiniones de un usuario sobre un tema determinado. Permite obtener insigh
no métricas.
Recomendaciones para aplicar encuestas:
• Preguntar sobre eventos y experiencias recientes
• No sugerir respuestas
• Una pregunta a la vez
• Evitar escalas complejas como respuesta
• Entrevistar,no sólo realizar encuesta
• Acotar correctamente el número de participantes

•
•
FOCUS GROUP
Debate centrado donde un moderador lidera un grupo de
participantes a través de un conjunto de preguntas sobre un
tema en particular.
Focus group no es un test de usabilidad.En un focus
group se consulta la opinión de un grupo de usuarios,por el
contrario,en un test de usabilidad se observa cómo las personas
utilizan realmente un producto.

Una vez que se ha invertido tiempo en investigación
de campo sobre la vida de los usuarios,sus
motivaciones y
ambiente,¿cómo se utilizan todos estos datos
de investigación para crear el diseño del
producto?

PERSONAS
“Así como los economistas crean modelos para describir el
comportamiento de los mercados,hemos encontrado que el uso
de
nuestra investigación para crear modelos descriptivos de los
usuarios es
una herramienta única y poderosa para el diseño de interacción.
Llamamos a estos modelos de usuario Personas”.
About Face:The Essentials of Interaction Design,Alan Cooper

PERSONAS
Son personajes imaginarios,pero representativos del mercado objetivo y d
tener en cuenta los siguientes puntos:
1. Las“Personas”representan a los usuarios en todo el proceso de
definición,diseño y desarrollo.
2. Son arquetipos hipotéticos de usuarios reales.
3. A pesar de que son imaginarias,se definen con significativo rigor y
precisión.

DISEÑAR PARA UNA SOLA PERSONA
•
Si se desea crear un producto que satisfaga una amplia
audiencia de
usuarios,la lógica sugeriría que sea lo más amplio en
funcionalidad
como sea posible,para dar cabida a la mayor cantidad de
personas.
Esta lógica es errónea.

•
Tratar de complacer a los diferentes puntos de vista puede
matar a un producto.Al restringir el objetivo de diseño para una
sola persona, nada se interpone entre esa persona y una
experiencia completa,ya que le dará las características
suﬁcientes para resolver sus necesidades concretas.

PROCESO PARA CONSTRUIR PERSONAS
1.
2.
3.
4.
5.
6.
7.
8.
Grupos de entrevistas personales por rol de usuario
Identificar las variables de comportamiento
Mapa de entrevistas por variables de comportamiento
Identificar patrones significativos de comportamiento
Sintetizar las características y definir metas
Revisar para evitar redundancia y afinar integridad
Diseñar tipos de Persona
Descripción de atributos y comportamientos

Grupos de entrevistas personales
por rol de usuario
Identificar las variables
de comportamiento
Mapa de entrevistas
por variables de comportamiento
Identificar patrones
significativos de comportamiento
Sintetizar las características
y definir metas
Revisar para evitar redundancia
y afinar integridad
Diseñar tipos de Persona
Descripción de atributos
y comportamientos

EJERCICIO #2
CREACIÓN DE PERSONAS
15 MINUTOS

•
•
•
ACTIVIDAD
Identiﬁquen comportamientos,necesidades y metas de sus
“entrevistas”
Validen los supuestos e hipótesis de su Proto-Persona contra sus
“entrevistas”
Deﬁnan una Persona

DISEÑO ORIENTADO A METAS
10 MINUTOS

DISEÑO ORIENTADO A METAS
•
El Diseño Orientado a Metas es la metodología empleada en
Diseño de Interacción para comprender el contexto,las
metas,necesidades y motivaciones del usuario y llevarlo al
diseño de interfaces.

RECONOCIMIENTO DE METAS
•
•
Una meta es un punto ﬁnal deseado en un tiempo ﬁnito.
Una tarea es la realización de un conjunto de pasos
Necesarios para lograr una meta.

•
•
ESCENARIOS
Un escenario es una descripción narrativa concisa de una o más
personas para alcanzar una meta especíﬁca.El escenario es dónde
está el usuario (“la Persona”),realizando una determinada tarea para
cumplir una determinada meta.El escenario es aplicar la narrativa
como herramienta de diseño.

EJERCICIO #3
CREACIÓN DETAREAS
15 MINUTOS

ACTIVIDAD
•
•
•
Identifiquen 2 tareas a realizar por su Persona en la app
Definan la meta de cada tarea
Definan los pasos de cada tarea para lograr la meta

EJERCICIO #4
CREACIÓN DE ESCENARIO
10 MINUTOS

ACTIVIDAD
• Describan un escenario en donde la Persona
realizaría una de las
tareas identiﬁcadas

ESTRATEGIA DE CONTENIDOS
10 MINUTOS

• Una vez que se defina una Persona,
sus metas y situada en un escenario con tareas a desempeñar,
queda identificar qué contenidos
ofrecerles.
Para ello se define una estrategia de contenidos.

•
•
•
La estrategia de contenidos debe estar centrada en la Persona.
Para dar a las personas el contenido que necesitan,es necesario
identiﬁcar los tipos de contenidos que mejor asistan al usuario
en la ejecución de sus tareas en cada escenario.

•
•
•
•
TIPOS DE CONTENIDO
Para deﬁnir un contenido es necesario identiﬁcar su formato y tipo.
El formato es la unidad básica del contenido:texto,imagen o video.
El tipo es la aplicación del formato,por ejemplo,una receta de cocina es
un tipo de contenido de formato texto.
Un tipo de contenido puede estar compuesto por varios formatos,por
ejemplo,una galería de imágenes (Slider).

•
•
MAPA DE CONTENIDO
Son cartografías que se centran en el contenido de un producto
digital.Permite explorar y visualizar el contenido,así como detec
oportunidades de mejora para el desarrollo de contenidos.
El objetivo de un mapa de contenido es comenzar el desarrollo
contenidos con un fuerte enfoqueen las metas de los usuarios.

EJERCICIO #5
CREACIÓN DE MAPA DE CONTENIDO
15 MINUTOS

ACTIVIDAD
•
•
Identiﬁcar contenidos para las tareas a realizar por la
Persona en el
escenario descrito
Crear un mapa de contenido

Accesibilidad (web) y sus
beneficios
9/3/16
204

Recordemos…
§Usabilidad
Que sea fácil de usar
§UX (User eXperience)
Que el usuario tenga una experiencia satisfactoria
(suele conseguirse haciendo que sea usable)
§Accesibilidad
Que el usuario pueda usarlo
(nos solemos referir a situaciones “especiales”)

Acceso universal

MITO: accesibilidad web es “para ciegos”
FALSO.
§Es cierto que los criterios de accesibilidad ayudan a personas con
deficiencias físicas (visuales, auditivas, motrices), cognitivas, de lenguaje, …
Y TAMBIÉN…
§Usuarios con discapacidades temporales (enfermedades, convalecencias)
§Usuarios de edad avanzada
§Dispositivos menos (?) habituales: móviles, SmartTV; versiones antiguas
SO/navegador; conexiones lentas
§Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.)

Beneficios de accesibilidad (obvios)
§Maximizar los posibles usuarios/clientes
§Seguir estándares facilita el desarrollo y
mantenimiento
§Por imagen pública
§…
Web AccessibilityInitiative (WAI) http://www.w3.org/WAI/

Accesibilidad: más beneficios
oy además…
§Mejora el posicionamiento en buscadores (SEO)
otextos alternativos; identificar idioma;
documentos bien estructurados; …
§Por normativa legal
oLos sitios web de administraciones
públicas (o con financiación pública;
o “de especial interés”) deben cumplir
un nivel mínimo de accesibilidadHigh AccessibilityIs Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo
Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html

§El uso de Personas
(needfinding) y
escenarios
211

212
Topics
• Personas
• Scenarios
• User stories

Personas
Centrado en el usuario
Basado en observación y entrevistas
Primario, secundario, fundamentado
La guia hacia el diseño de escenarios
No implica reemplazar a la gente en el proceso

Personas
>
John Smith Robert

Irene, 28
Background: real estate agent, dance instructor
Example
Description: Irene has a hectic life. Dance competitions are approaching and as
an instructor, she needs to schedule extra trainings for 15 people, which should
also fit into her own busy calendar. Irene is mostly connected through mobile.
Goals:
• Irene needs a easy way to schedule
training events for 15 people
• She wants to quickly see which days are
suitable for others on the go, since she
mostly uses internet on her mobile

Escenarios
Scenarios describe la interacción entre
tipos de usuarios basado en diversas metas
Y el sistema al que pertencen

Ejemplo
It’s morning and Irene stops at a gas station on her way to a
meeting. While filling the tank she decides to quickly check whether
her dance group has agreed upon the next training day.
Irene takes her phone. She logs in to a service
and sees and overview of proposed dates. Irene
notices that only 11 people of 15 has replied.
She also sees that for most next Monday and
Saturday suited best. Irene needs the final
answer soon, so she send a reminder to those
who have not yet replied. Then she closes the
phone and continues her journey.

escenarios
• Consiste de metas, expectativas,
Acción y reacción
Es un espejo de las aspiraciones
• vincula contexto y uso
• aunque no incluye ejemplos del uso en acciones
E.g.: “Roberto le da click al boton verde
Sino, Roberto procede a convertir…

Historias de usuarios
Secuencias de acciones que conducen a un
resultado
• Glas historias se vuelven testeables
• Sirve de puente entre usuarios y desarrolladores
• Asemeja un buen método de proceder a programar

Ejemplo de una
historia de usuario
“Como <rol>, deseo <hacer qué>
de modo que <beneficio>.”

User Stories
Otro ejemplo
“como organizador, quiero que sea fácil calendarizar
un evento para muchas personas
donde pueda dar clases de Zumba.”

User Stories
Example
“As an organizer, I want to sent a
reminder to those who have not yet
replied so I will know which day
suites best for all.”

Una necesidad
• No tan detallada
• Testeable
“As an organizer
I want to click on various days in calendar
I want to provide several meeting day options.”

“As an organizer, I want to easily
schedule an event for several people
so that I could teach a dance class.”
“As an organizer, I want to provide few
options for upcoming meeting day”
“As an organizer, I want to invite people
to choose the best day for them”
“As an organizer, I want check what days
others have proposed.”

Problemas de
accesibilidad.
Cómo ser
accesible
Capital ONE9/3/16
226

PROBLEMAS habituales de accesibilidad (1)
Personas con problemas visuales
(o dispositivos como SmartTV, móviles, etc.)
§Sólo “ven” texto de modo secuencial
(usan lectores de pantalla/navegadores por voz)
§Necesitan textos grandes
§No distinguen bien los colores
Cuidado con:
oImágenes sin descripción textual
oTablas y marcos (frames) mal etiquetados
oColores de bajo contraste
oTexto no escalable
oVentanas emergentes (pop-up)
oNo funcionan con teclado

Personas con discapacidades cognitivas / de aprendizaje
(o en entornos complejos;
o con poco dominio del idioma; …)
§Pueden tener problemas para “entender” los contenidos o para concentrarse
§Problemas de memoria
Cuidado con:
oDocumentos con estructura mal definida
oDemasiada información en una página
oLenguaje innecesariamente complejo
oFalta de imágenes para clarificar el texto
oAnimaciones y elementos decorativos superfluos

Normativa sobre extranjeros

Personas con discapacidades auditivas
(o en entornos ruidosos;
o en equipos sin hardware de audio)
§Pueden tener problemas para acceder a los contenidos
sonoros
Cuidado con:
oAudio/vídeo sin descripciones textuales
oFrases complejas o demasiado largas

Subtítulos

Personas con discapacidades motoras
(o no disponen de ratón)
§Tienen que usar el teclado u otros dispositivos
(reconocimientode voz)
Cuidado con:
oPáginas que no funcionan con teclado

MITO: para ser accesible basta con tener una versión “sólo
texto”FALSO.
§Sólo para determinados usuarios
§Suponen una discriminación (“entrar por la puerta trasera”)
§Problemas por contenidos duplicados:
omantenimiento
oindexación en buscadores
§Se descuida la accesibilidad de la versión “normal”
§¿Cómo llego a la versión accesible?
MEJOR: si es posible, una única versión que cumpla los estándares de
accesibilidad

Tiene “versión sólo texto”, pero…

… sin imágenes…
¿Cómo accedo
a la versión
“sólo texto”?

¿CÓMO consigo que mi web sea ACCESIBLE?
§Conociendo y cumpliendo los estándares
oDe los lenguajes utilizados (HTML; CSS; etc.)
oEspecíficos de accesibilidad
§Testeando
oDiferentes entornos (navegadores, sistemas operativos, etc.)
oCon usuarios reales

¿Qué ESTÁNDARES? (1)
§Lenguajes/técnicas utilizados:
oHTML válido
oCSS válido
oJavaScript “no obstructivo”
oEtc.
§IMPORTANTE: separar contenido vs. aspecto
oEl mismo contenido para todos los usuarios
oAspecto en función de las condiciones particulares
§IMPORTANTE: compatibilidad multinavegador

Con el mismo contenido HTML…

¿Qué ESTÁNDARES? (2)
Recomendaciones y normativas específicas sobre accesibilidad web:
§Section 508 (USA)
§WAI (Web Accessibility Initiative)
oInternacionales, W3C
oSugeridas por la Comisión Europea
§UNE 139803 “Requisitos de accesibilidad para contenidos Web” (España)
oBasada en WAI
oObligatoria por Ley para sitios web de Administraciones Públicas

WAI (Web Accessibility Initiative)
§Forma parte del W3C (World Wide Web Consortium)
§Recomendaciones y directrices sobre:
oContenido web (WCAG)
§ Contenidos web accesibles
§ Referencia de normas UNE
oHerramientas de autor (ATAG)
§ Herramientas de creación accesibles y
§ que generen contenidos accesibles
oAgentes usuario (navegadores) (UAAG)
§ Navegadores accesibles
oRich Applications (WAI-ARIA)
§ Para aplicaciones RIA 2.0

WCAG (Web Content Accessibility Guidelines)
§Cómo crear contenidos web accesibles. Versión 2.0
§4 principios generales del contenido web:
oPerceptible
oOperable
oInteligible
oRobusto
Cada principio incluye directrices (guidelines)
Cada guideline incluye criterios de éxito con prioridad:
§ A = Debe satisfacerse; requerimientos básicos
§ AA = Debería satisfacerse; eliminar barreras significativas
§ AAA= Puede satisfacerse; acceso mejorado
§Además: técnicas, ejemplos, enlaces, etc.

WCAG: ejemplo guideline

Texto alternativo
¡También por SEO!

No confiar únicamente en el color (1)

No confiar únicamente en el color (2)

WCAG: niveles de cumplimiento A, AA y AAA
§3 niveles de cumplimiento de las guidelines WCAG por parte de páginas o
sitios web:
§ Conformidad nivel “A”
oCumple todos los criterios A (“deben”)
§ Conformidad nivel “AA”
oCumple todos los criterios A y AA (“deberían”)
§ Conformidad nivel “AAA”
oCumple todos los criterios A, AA y AAA (“pueden”)
§Las declaraciones de conformidad (“los sellos”) se incluyen por decisión
propia (W3C NO las verifica)
§Habitualmente se intenta alcanzar el nivel “AA”

EVALUACIONES DE
ACCESIBILIDAD
9/3/16
247

Evaluaciones de accesibilidad: manual
§Leyendo el contenido:
oLenguaje sencillo
oAbreviaturas, idiomas, …
o¿Se entiende?
§Comprobar navegadores gráficos
oFirefox, Internet Explorer, Opera, Safari, …
oDiferentes plataformas, versiones y sistemas operativos
oDiferentes configuraciones:
§ Desactivando imágenes, CSS, JavaScript, sonido, etc.
§ Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc.
§Usar navegadores sólo texto; lectores de pantalla
§Usar dispositivos alternativos (sólo con teclado)

Evaluaciones de accesibilidad: herramientas
§Online y offline
§Para comprobar sintaxis de HTML, CSS, etc.
oW3C (HTML Validation Service; CSS Validation Service; etc.)
W3C Unicorn
oOtras herramientas (HTML Tidy; Dreamweaver; etc.)
§Para validación de accesibilidad
oWebXACT/Bobby; Cynthia Says; TAW; eXaminator
TAW
oComprueban si se cumplen determinados checkpoints de WCAG
oSirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad

MITO: los validadores automáticos indican si una página es
accesible o no
FALSO.
§Los validadores comprueban la sintaxis (HTML, CSS, etc.)
§Los validadores comprueban algunos checkpoints
PERO…
§Muchos checkpoints son interpretables y necesitan validación manual.
§Las herramientas automáticas pueden producir “falsos negativos” y “falsos
positivos”
Guidelines, checkpoints, validadores automáticos y sellos son herramientas e
indicadores, NO un objetivo
Lo importante: la accesibilidad real

Pruebas accesibilidad con usuarios
§Similares a los tests de usabilidad:
oObservación de usuarios reales mientras se enfrentan al sitio
web
§Proporcionanmucha información útil, pero son muy
complejos:
oDefinir tareas representativas
oExiste gran cantidad de tipologías de discapacidad

Retos de accesibilidad:
RIA (Rich Internet Applications)
§Conseguir interfaces “de escritorio” en la web
§Algunas aplicaciones:
oGoogle (Gmail; Google Maps); Flickr; YouTube; ...
§Tecnologías:
oAJAX; Flash; Java; DHTML; etc.
§Ya no son interfaces “insertados” en una página web, sino que son la propia
interfaz.
§WAI-ARIA (WAI Accessible Rich Internet Applications)
oIniciativa de W3C en desarrollo
Mientras tanto…
oEstándares para conseguir degradación progresiva
oProporcionar versión alternativa

Gmail, con y sin JavaScript

MITO: las páginas accesibles son feas
§“Para muestra, un botón”
§Las siguientes páginas tienen un alto nivel de
accesibilidad…

http://www.inretirementservices.co.uk/
ACCESIBILIDAD WEB. 29-nov-2007, Madrid

http://geekministry.com/old_geek/

http://snowdog.pl/

http://www.3point7designs.com/

¿Por qué es importante ACCESIBILIDAD?
§Permite que el mayor número posible de personas acceda a los
contenidos (no sólo discapacitados).
§Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las
páginas (mejor usabilidad).
§Reduce costes de mantenimiento/desarrollo:
oUna única versión para todas las plataformas
oEs más fácil hacer cambios (contenido vs. presentación)
oMayor “vida útil” de los contenidos
oLas técnicas se pueden aplicar a diferentes sitios
§Cumplir estándares mejora la visibilidad en Internet (SEO) y la
compatibilidad multinavegador.
§Para determinados sitios, cumplir con la Ley.

En conclusión …
9/3/16
260

Usabilidad (y accesibilidad) son
“muy agradecidas”
§No requieren
grandes inversiones
§Habitualmente dan
resultados muy buenos
§Pueden significar
la diferencia entre:
oel éxito y el fracaso
otú y tu competencia
http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/

Consejo de mínimos (recordatorio)
§Contratar/formar personal especializado
§Integrar usabilidad en el proceso de desarrollo
Subconjunto (mínimo) de técnicas:
§Roles de usuarios; personas (“quién”)
§Casos de uso (“qué”)
§Prototipado de interfaces (“cómo”)
§Evaluación (heurística/pruebas con usuarios)

¿Estás seguro de que tu producto
o sitio web no es así?

267
El terrible caso del A/B Test

I want more people
who visit the site to
subscribe via email

A) More People
Visiting
B) Higher
Conversion Rate

Multivariate Testing
We’ll show each version to a percentage
of visitors and find a winner

Statistical Significance Testing
Most testing platforms have this built in. If you need a generic one and some tips on statistical significance, Avinash’s post here has
good stuff: http://www.kaushik.net/avinash/excellent-analytics-tip1-statistical-significance/

We Can Test Everything!
Location on Page
Display Width
Box Color
Address Verification
Social Proof Inclusion
Loading After the Page
Call-to-Action Copy
Different Versions
Based on User Behavior
Changing Messaging on
Different Types of Pages/Posts

Discovery
Testing
CRO is about
getting your
customers fromhere to here
Consideration
Conversion
Subscriber for 3 Months
Subscriber for 12+ Months

Discovery
Testing
Great CRO is
about moving
them here, too
Consideration
Conversion
Subscriber for 12+ Months

Qué hay dentro
De una decisiónde Conversión?

Likability
Trust
Word of Mouth
UX
Design Branding Historical Experiences
Social Proof
Associations
CTAs
Copywriting
CONVERSION DECISION
(it’s a complex process)!
Timing
Price
Process
Word of Mouth
Discovery Path
Amount of Pain Effort Required

How Do We Find Out What
Needs Optimizing?

Segment Our Visitors & Survey Them
Via: http://moz.com/rand/the-growth-of-web-marketing-fields/

Ask Smart Questions to the Right People
Never Taken a Free
Trial
What are you seeking from
Moz? What’s brought you
back?
What would make you
more likely to sign up?
What are your biggest
objections to signup?
Took the Free Trial
But Left
What made you take the
free trial?
What objections did you
have and how did you
overcome them?
What caused you to cancel
subscription?
What would have made
you stay a subscriber?
Took the Free Trial
and Stayed
What initially made you
want Moz?
What objections did you
have and how did you
overcome them?
What’s been most
valuable to you?
Had success w/ Moz?
Can we share?

This is How the Pros Do It:
Boom.
And Shakalaka.
From Conversion Rate Experts’ case study (which is definitely worth a read): http://www.conversion-rate-experts.com/crazy-egg-case-study/

This process made Moz $1mm in additional
revenue in 2009, when we desperately needed it.
CRE detailed their results with us here:
http://www.conversion-rate-experts.com/seomoz-case-study/

12 Tactical Tips for CRO

#1: Make Pages Load BLAZING FAST
50% drop in just
3 seconds!
Data and charts via: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
ROI of page speed calculator: http://www.tagman.com/conversion-loss-calculator/

#2: Align Visitor Intent and Page Purpose
From Avinash Kaushik’s post: http://www.kaushik.net/avinash/tips-for-improving-high-bounce-low-conversion-web-pages/

#3: Poor Design Negatively Impacts Everything
Good place to find great designers: http://dribbble.com

#4: Empathy Yields Action
+19%
Via Kyle Rush: http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/

#5: Don’t Force Unnecessary Steps
The $300mm button story is a great anecdotal piece on this
http://www.uie.com/articles/three_hund_million_button

#6: Concrete & Emotional > Abstract & Intellectual
Concrete &
Emotional
Abstract &
Intellectual
From this excellent infographic: http://www.zippycart.com/infographics/how-sales-messaging-affects-conversion-rates.html

#7: More Product Detail + Better Presentation = WIN
Zappos’ great videos and detailed images help make them a standout in the field of online retailing:
http://www.zappos.com/puma-future-cat-remix-2-ferrari-dandelion-black-high-risk-red

#8: Video Works
Conversion went from
30.0% 33.2% after
the video was added.
(10% lift)
http://www.commoncraft.com/common-craft-video-dropboxcom-effective

#8: But You Have to Optimize It
Three must-read links on video for conversion: http://conversionxl.com/how-to-use-video-to-increase-conversions/, and the case study data for
eParty: http://www.internetretailer.com/2011/02/22/videos-boost-online-profile-eparty-unlimited and for Premiere Game Tables:
http://blog.treepodia.com/2011/03/ecommerce-video-roi-a-case-study/. I also highly recommend http://wistia.com which we use at Moz for video.

#9: Don’t Fall Into the Trap of Copying Others’ Tactics
14% Increase in Sales 20% Increase in Sales
Great post on case studies and lessons learned: http://moz.com/blog/lessons-learned-from-21-case-studies-in-conversion-rate-optimization-10585

#10: Make Your Core Purpose Insanely Obvious
Huh?
Despite reading the homepage thoroughly, I was stumped about exactly what teamr does: h#p://www.teamr.com/

#10: Make Your Core Purpose Insanely Obvious
Makes total sense.
Contrast with 15Five, a competitive product that makes their purpose and product extremely clear right away: h#p://www.15five.com/

#11: Maximize the Conversion “Scent” Throughout
the Marketing Messages (on & off site)
Photo doesn’t match…
Where’s the “snow, ice,
or ground” versions?
There’s no copy except
the name…
WEAK SCENT!
Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.

#11: Maximize the Conversion “Scent” Throughout
the Marketing Funnel
Photo, logo, &
button all match
Screenshots & copy fit with
the display ad’s promise STRONG SCENT!
Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.

#12: Don’t Just Aim for the Fastest Possible Conversion
The more times
someone visits Moz
before taking a free
trial, the longer theystay a subscriber
(on average)
Conversions <
Moz’s internal customer growth funnel (built by our amazing inbound engineering team) CLTV

Bonus #13: More Tips Than You Can Imagine
From Unbounce: http://unbounce.com/conversion-rate-optimization/544-conversion-rate-optimization-tips/

UX/UI
UX es como funciona y UI es como luce
como se siente

- McNuggets de Pollo
- Instruciones…
- Descongelar
- 30 segundos
- Comer
- Eructar
- Simple UX

UX - Experiencia de Usuario
UX, o experiencia de usuario, mide la facilidad y
el placer que tienen los usuarios al navegar por
un sitio.

Propósito detrás del UX
*Cumplir con los objetivos del negocio
1. Adquisición de usuario
2. Activación de usuario
3. Retención de usuario

¿Cómo el UX resuelve problemas?
Usabilidad
Diseño
Visual
Investigación
del Usuario
UX
Diseño de
Interacción
Arquitectura de
La Información
Estrategia de
Contenido

Componentes del UX
1.   Definición de Usuario
2.   Mapas del Sitio
3.   Flujo de Usuario
4.   Wireframes

Arquitectura de la Información

UI- Interfaz de Usuario
Un hábil diseñador de interfaces entiende la
importancia de proporcionar al usuario una
solución a un problema definido

UI
Branding Wireframing
Color, Esquemas:
fuentes, Logo,
Estilos

Cómo llegamos al UI?
1. El problema ha sido definido
2. Flujos de usuario e historias han sido creadas
3. Experimentos para validar personas
4. Wireframes y bocetos
5. Mockups con UI incluida pueden ser realizados
6. Prueba de Usuario
7. Es tiempo de codificar la interfaz - UI Design!

• Etapas. Respondenal tiempo transcurrido ¿cuándo?
• Actividades y tareas. Respondenal proceso ¿qué?
• Técnicas. Respondena lo que se hace para lograr los
procesos ¿cómo?
• Herramientas. Respondena qué se usa para aplicar
las técnicas ¿con qué?
El PROCESO de AI se divide en:

• Encuestas online: son herramientas que permiten
diseñar un encuesta en línea y que los usuarios, de
manera remota, la respondan. Luego se analizan los
resultados.
• Algunos son servicios de terceros.
Técnicas y herramientas
Survey Manager de Netquest
[www.solucionesnetquest.com/survey_manager]
E-encuestas
[www.e-encuesta.com]

• Tormenta de ideas. (brainstorming) (focusgroup)
• Crítica de diseño. (critic design)
• Diseño participativo. (participatory design)
• Tormenta de necesidades.
www.mindjet.com

• Escenarios (definición de).
–Plantilla en Word para recoger datos de
escenarios.
• Benchmarking. (comparación)(análisis de
homólogos)
–Tabla en Excel para comparar elementos.
Sitio Tiposdecontenido Tipo desitio Calidad del recurso
Amazon.com Libros, ropas, autos, … Tienda bueno
Yahoo.com Personas, Trabajos, … Directorio- portal regular
Google.com Sitios web, PDF, PPT, … Buscador bueno

• Análisis de frecuencia de texto.
TextSTAT-2
www.niederlandistik.fu-berlin.de/textstat/software-en.html

AGRUPACIÓN
EZcalc y USort [www.tripledogs.com/ibm-
usability ]

SECUENCIA
www.nosolousabilidad.com/articulos/analisis_secuencia.htm

• Inventario de contenidos 1.
Se puede hacer como:
• Mapa de contenidos
CMapTools.
[http://cmap.ihmc.us]

• Inventario de contenidos 2.
Se puede hacer como:
• Tabulación de contenidos
Hoja de cálculo Excel.

• Análisis de tareas (task analysis).
• Flujogramas.
Microsoft Visio. (diagramas de flujo)

• Análisis de tareas (ejemplo).
Microsoft Visio

• Diagramación en papel
(paper prototype)

• Diagramacióndel producto:
– Diagrama(s) de organización
(blueprint o sitemap)
– Diagrama(s) de funcionamiento
(flow)
– Diagrama(s) de presentación
(wireframe)

–Diagrama de organización
(blueprint o sitemap)
www.mindjet.com

–Diagrama de funcionamiento
(flow)
Microsoft Visio

–Diagrama de presentación
(wireframe)
Microsoft Visio

Técnicas y herramientasSoftware para hacer diagramas de software:
§ Mindmanager (www.mindjet.com)
§ Freemind (http://freemind.sourceforge.net)
§ PowerMapper (www.powermapper.com)
§ Xtreeme SiteXpert (www.xtreeme.com/sitexpert)§ SmartDraw (www.smartdraw.com)
§ Microsoft Visio (www.microsoft.com)
§ OmniGraffle (OSX) (www.omnigroup.com)
§ iGrafx Flowcharter (www.igrafx.de)
§ DENIM & Silk. (http://guir.berkeley.edu/projects/denim)

Algunos sistemas de símbolos para diagramar:
§ Jesse James Garret
(http://www.jjg.net/ia/visvocab)
§ Dan Brown
(http://www.greenonions.com)
§ Bill Scout
(http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio )
§ Garrett Dimon
(http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle)
§ Nick Finck
(http://www.nickfinck.com/stencils.html)
§ Peter Van Dijk's
(http://iabook.com/template.htm )

Se usó el Microsoft Frontpage, el Adobe Dreamweaver, en
algunos casos se usó el Microsoft Visio y hasta el Power
Point.
Existen algunas experiencias usando CMS como el
WorldPress (útil para hacer blogs) el Joomla, y hasta el
Drupal.

1. Permite prototipar muy rápido.
2. En su última versión permite incorporar y crear su propia biblioteca
de símbolos.
3. Permite hacer diagramación y prototipado al mismo tiempo.
4. Permite hacer prototipado colaborativo (en red).

www.axure.com

• Test de prototipos
Morae de TechSmith: aplicación para grabar, observar y
gestionar el uso de un prototipo o sitio web entre una red de
usuarios.
Antiguamente se usaba el Cantasia de la misma empresa, pero
la demanda los llevó a crear el Morae y otras aplicaciones, como
Uservue.
[www.techsmith.com]
Aplicaciones para Eyestracking.

• Posicionamiento
Herramientas para ubicar sitios web en buscadores:
• Active WebTraffic
• Webceo
Herramientas para analizar las estadísticas del uso de sitio web:
• Webalizer
• Web statistics
• Google analysis

• El Instituto deAI agrupa varias herramientas para
diagramar y hacer arquitectura de información en general.
• Contiene propuestas para el software Omnigraffle,
Ilustrador y Visio.
http://iainstitute.org/en/learn/tools.php

LA TÉCNICAES LA TÉCNICAY SIN
TÉCNICANO HAY TÉCNICA

Herramientas de diseño fáciles
de usar

La diferencia entre UX/UI
Freelance vs Agency

Pros
Cons
Freelancer
Flexibilidad
Perfectiva
nueva
Cambios
rápidos
Especialidades
limitadas
La “Marca”
Agencia
Creatividad
Acceso a las
últimas
técnologías
Expertos
Costos
Cambios
In-house
Armonía de
Marca
Acceso a
“recursos”
Falta de
creatividad
puede varias
rápidos pueden Burocracia
varias

Módulo II
Introducción a Diseño de
Interfaces
• Arquitectura de la Información ¿Qué es la AI? Navegación Breadcrumb
• Buscadores Ejemplos de buscadores Tipos de búsqueda ¿Que debe tener un
• buscador?
• D I Conceptos Generales Flujos visuales y call to action Principios de diseño
de
• interacción
• D II Diferencia entre Mockups, Wireframes y Prototipos Patrones de IxD
• Formularios Login Validaciones Ayudas Home ¿Que debe tener una home?
• Herramientas Balsamiq Axure

Hablemos un poco de
Arquitectura de Información y Wireframes
¿Qué esArquitectura de Información?

Hablemos un poco de
¿Dónde se Ubica?

Hablemos un poco de
¿Qué hace unArquitecto de Información?

Hablemos un poco de
¿Cómo llegamos a ella?

Hablemos un poco de
Ejemplo

Hablemos un poco de
¿Qué es un Wireframe?

Hablemos un poco de
El Wireframe es una jerarquización de
contenidos distribuida visualmente y una
esquematización de la interfaz. Gráficamente,
son estructuras muy simples y están
enfocados a visualizar la distribuciónde los
contenidos dentro de una pantalla.
¿Qué es un Wireframe?

Hablemos un poco de
El Wireframe es el puente que une la
Arquitectura de Información y el Diseño.
Pasa de la “mentalidad estructural” de un
árbol de contenidos, dóndedecidimos y
ordenamos los contenidos de nuestro sitio web,
a la emocionalidad del Diseño de Interfaz.
Arquitectura de información
Estrategia
Diseño de interfaz
Desarrollo
Wireframes
Es un Puente

Hablemos un poco de
Pasar de la AI al Wireframe, compete varios
procesos de un desarrollode interfaz digital.
Será importante en esta traducción aspectos
estratégicos, definiciones de buenas prácticas del
benchmark y la definición de los contenidos.
Luego, valiéndonos del árbol de contenidos,
podremos plasmar una correcta jerarquía de
contenidos en nuestro esquema.
¿Relación con Diseño?

Hablemos un poco de
La principal ventaja de los Wireframes, es que ofrecen una
perspectiva basada solamenteen la arquitecturadel contenido,
obviando el diseño y evitando elementos accidentales que
puedan distraer (colores, tipografías, imágenes, textos, etc.).
Esto último, ayuda a que el proyecto en desarrollo no se retrase
por falta de definición o que el resultadose aleje mucho de loque
se esperaba.
_<
Tiempos
_<
Productividad
_<
Costos
¿Porqué hacerlos?

Hablemos un poco de
Además, son una excelente herramienta de
comunicación y discusión entre arquitectos de
información, programadores, diseñadores y clientes.
¿Y además?

Hablemos un poco de
Definen qué quiere tu cliente y cuáles son sus objetivos
• Permite la comunicación fluida entre el equipo de trabajo y el cliente
• Las correcciones son objetivas, basadas en contenidos y funcionalidadSe
evitan las discusiones gráficas
• Se reducen los tiempos de trabajo y costos
• Permiten visualizar interacciones y flujos.
• Se pueden identificar tempranamente problemas de Interacción, Usabilidad,
Accesibilidad
• Como es una estructura simple y enfocada en los contenidos, permite al
diseñador tener plena libertad al momento de diseñar la interfaz
¿Porqué hacerlos?

Hablemos un poco de
Son estructuras simples conformados principalmente de líneas y cajas
¿Guías Visuales?

Hablemos un poco de
Están diseñados en escala de grises
¿Guías Visuales?

Hablemos un poco de
Todos los elementos gráficos (imágenes, marcas, iconos) y de sistema (radio button,
dropdown, checkbox) están representados esquemáticamente
¿Guías Visuales?

Hablemos un poco de
Usar solamente una familia tipográfica, de preferencia de sistema
1234567890¿?
abcdefghijklmnño
pqrstuvwxyz
¿Guías Visuales?

Hablemos un poco de
Guías Visuales
Trata de usar Contenido Real, de locontrarionuestro buen amigo Lorem Ipsum
¿Lorem ipsum?

Hablemos un poco de
Trata de usar guías o notas visuales para explicar una interacción(sobretodo Wireframes Funcionales)
¿Guías Visuales?

Hablemos un poco de
Trata de usar guías o notas visuales para explicar una interacción(móvil)
¿Guías Visuales?

Hablemos un poco de
Simple sobre todas las cosas
• Usa la mayor cantidad de contenido real posible
• Siempre trabaja en escala de grises
• Evita usar imágenes, logos e iconografía
• No te limites a usar una aplicación digital, ¡dibuja!
• Define muy bien la estrategia y los contenidos antes de
empezar
• Siempre haz wireframes antes de diseñar
Explica las zonas e interacciones
• Discute los wireframes con tu equipo de trabajo
• Corrige problemas detectados en wireframes, no en diseño
¿Guías Visuales?

Hablemos un poco de
Fireworks
Omnigraffle
Microsoft
Axure
Balsamiq
Keynote
Apliaciones
escritorio
Apliaciones
web
Hotgloo
iplotz
Balsamiq
Cacoo
Algunos ejemplos de Aplicaciones pararealizar Wireframes
¿Aplicaciones?

Ux formato tec bbva v 3.1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (14)

Similar a Ux formato tec bbva v 3.1

Similar a Ux formato tec bbva v 3.1 (20)

Más de Moises Cielak

Más de Moises Cielak (20)

Último

Último (20)

Ux formato tec bbva v 3.1