5.

Rediseño de los errores o cambios necesarios

5.1 Producto Mínimo Viable (PMV)
Eric Ries indica que un Producto mínimo viable es la versión del producto que permite iniciar
el proceso de feedbak Crear-Medir-Aprender con un mínimo esfuerzo y el mínimo tiempo
de desarrollo.

No es un producto completo, que requiere tiempo de incubación y largos periodos de

reflexión en la búsqueda de perfección del producto. El PMV tiene como objetivo iniciar el
proceso de aprendizaje, más no acabarlo. No solo responde a cuestiones técnicas y de
diseño, su objetivo principal es probar las hipótesis fundamentales del negocio.

La calidad del PMV

Crear un PMV puede no ser sencillo para los

diseñadores, que buscan crear producto de calidad
como sinónimo de eficiencia, sin embargo debemos
considerar el objetivo principal: la capacidad de
resolver el problema con un diseño sencillo,
minimalista y en poco tiempo, para comenzar a
probarlo en el usuario.

“A menudo no sabemos con seguridad ni siquiera quién es el consumidor…si no sabemos

quién es el consumidor, no sabemos qué s la calidad. Incluso un PMV de baja calidad puede
ser útil para crear un producto de una enorme alta calidad. Sí, los PMV a veces parecen ser
de baja calidad para los consumidores. Si es así, deveríamos usar esto como una
oportunidad para aprender cuáles son los atributos que importan a los consumidores”.
(Ries, 2012)

5.2 Creación de un PMV (Producto Mínimo Viable)

Antes de iniciar el prototipo de un Producto Mínimo Viable Jeff Gothelf y Josh Seiden
indican que debemos plantearnos tres cuestiones básicas:
1. ¿Existe una necesidad para la solución que estoy diseñando?
2. ¿Existe valor en la solución y las funciones que estoy ofreciendo?
3. ¿Mi solución es usable?

Agregan que la respuesta a la primera pregunta se obtiene de métodos de investigación

(como fue el diagnóstico, la evaluación heurística y la encuesta/entrevista/focus group
aplicado al usuario).
La segunda pregunta requiere la elaboración de un PMV, pensado para aprender algo del
mercado, En este caso se realiza el producto y se lanza al mercado, para observar cómo
interaccionan los usuarios con él.

Continúan exponiendo que si el PMV busca maximizar el aprendizaje, debe seguir las
siguientes directrices:
Sé claro y conciso: Depura la idea hasta llegar a la proposición central de valor.
Prioriza sin compasión: Deja solo las mejores ideas, descarta aquellas que no proporcionen
un valor significativo a tu propuesta.
Sé ágil: La información llega rápidamente, por lo que tendrás que asegurarte que se puedan
realizar actualizaciones con facilidad.
Mide el comportamiento: tu PMV debe permitirte observar y medir lo que la gente hace
realmente, el comportamiento es más importante que las opiniones.
Utiliza una llamada a la acción: se refiere a una frase clara, a veces completada con una
imagen que pide al usuario que haga algo en concreto (lo veremos en la Unidad 6. Testeo
de usabilidad)

Si se desea entregar valor a los clientes, entonces:

Sé funcional: El PMV debe ser la versión reducida de un producto o servicio.
Integra con las analíticas existentes: el rendimiento debe medirse dentro de los flujos de
trabajo existentes para el producto.
Sé consistente con el resto de la organización: Para minimizar cualquier tipo de sesgo hacia
la nueva funcionalidad, el PMV debe ajustarse a la guía de estilo y la marca ya existente
(nota: para efecto práctico de esta asignatura no en todos los casos aplican, algunos sitios
web si requieren un rediseño y reestructuración de la arquitectura de la información
completo).

Se recomienda que el PMV sea lo más pequeño posible en extensión, ya que es una
herramienta de aprendizaje y habrá que iterar varias veces con él, modificarlo y en algunas
ocasiones se descarta por completo.

Crear un PMV no implica programar en código, se debe buscar una forma creativa y fácil de
presentarlo.
5.3 Creación de prototipos
Un prototipo es la aproximación de la experiencia de usuario que permite simular cómo
será el uso del producto o servicio en cuestión. Para que esa simulación sea efectiva deberá
ser clicable (dar clic con el dedo).

El conocer a la audiencia a la que va dirigida el producto, permite crear un prototipo conciso

y que genere una retroalimentación positiva, lo cual has logrado con tu actividad anterior
de la unidad 4.

5.3.1 Prototipos de baja fidelidad: papel

Este tipo de prototipo no será válido en el ejercicio de tu actividad individual.

Ejemplo de un prototipo en papel por Jeff Gothelf y Josh Seiden

Como su nombre lo indica, se crean con papel, lápices y cinta. Este prototipo permite
simular experiencias de manera rápida, hábil y divertida. Con papel se simulan los
elementos como ventanas, barras de navegación, botones, entre otros.
Gothelf y Seiden contemplan los pros y contras de este prototipo
Pros:
 Pueden estar listos en una hora
 Son fáciles de reorganizar
 Son baratos
 Se pueden crear con materiales presentes en todas las oficinas
 Constituyen una actividad divertida con la que mucha gente se lo pasa bien.

Contras:
 La iteración rápida sobre la idea de base puede hacerlos lentos y tediosos.
 La simulación es artificial porque no se utilizan los mecanismos de entrada reales
(ratón, paneles táctiles, teclados, pantallas táctiles, etc.)
 El feedback se va limitando a la estructura de alto nivel y el flujo de navegación del
producto.

5.3.2 Prototipos de baja fidelidad: wireframes clicables

Ejemplo de un prototipo con wirefram clicable por Jeff Gothelf y Josh Seiden

Este prototipo ofrece una sensación más realista del flujo de trabajo, lo cual permitirá tener
una mejor retroalimentación por parte de los participantes en las pruebas e integrantes del
equipo.

Pros
 La sensación obtenida sobre la extensión del flujo de trabajo es buena.
 Revela los principales obstáculos para la finalización de las tareas básicas.
  Permite obtener información sobre si los elementos principales son fáciles de
encontrar o no.
 Puede utilizarse para desarrollar rápidamente "algo clicable" que el equipo pueda
aprovechar para aprender en lugar de tener que crear recursos nuevos.

Contras:
 La mayoría de la gente que interactúe con el prototipo sabrá inmediatamente que
no se trata de un producto terminado.
 Habrá que prestar atención especial al etiquetado y al texto.

Herramientas para crear wireframes clicables de baja fidelidad:

Existe software que nos permiten crear un wireframe simulando los elementos de la página
web, de fácil manejo para crear un prototipo rápido y sencillo. La mayoría de los productos
son de paga, pero algunos nos brindan una prueba gratuita por tiempo limitado. A
continuación se mencional algunas opciones:

Adobe Xd (ofrece una prueba gratuita por tiempo limitado)

https://www.adobe.com/mx/products/xd.html

Just in mind (dispone de una versión gratuita)

https://www.justinmind.com/

Pencil Project (open source, gratuito)

http://pencil.evolus.vn/Default.html

Extra:
Adobe InDesign
Es un programa especializado en diseño editorial, sin embargo permite crear un PDF con
botones interactivos.

Microsoft PowerPoint
Permite enlazar las páginas, en este caso se recomienda crear la imagen del wireframe en
otro software y utilizar PowerPoint para realizar los enlaces.
5.3.3 Prototipos de media y alta fidelidad
Presentan un nivel de detalle
significativamente mayor que los
prototipos basados en
wireframes. Permiten demostrar
y probar los diseños con un
diseño más similar a la
experiencia de usuario final.
En este prototipo se pueden
mostrar elementos de la interfaz
más reales como formularios,
campos, menús desplegables que
funcionan y botones de
formulario que imitan las
acciones de envío. En algunos casos incluyen animaciones, transiciones y cambios de
estado.

Pros:
 Producen prototipos realistas y de alta calidad
 Pueden probarse los elementos de diseño y de marca
 Pueden utilizarse como recursos tanto el flujo de trabajo como las interacciones de
la interfaz de usuario.

Contras:
 La interactividad sigue siendo más limitada que en los prototipos desarrollados con
la herramienta final.
 Los usuarios no pueden interactuar con daros reales, con lo que los tipos de
interacciones con el producto que se pueden probar son limitados.
 Dependiendo de la herramienta, estos prototipos pueden requerir tiempo para su
creación y mantenimiento. Además, el mantenimiento de una versión sincronizada
del prototipo de alta fidelidad con la del producto real implica la duplicación de
esfuerzos.

Herramientas para la creación de wireframes clicables de media y alta fidelidad

Axure RP: permite crear páginas web realisatas con pantallas y formularios. Los mockups
pueden verse en cualquier navegador y parecen páginas web verdaderas. Permite importar
imágenes y soporta elementos HTML.
https://www.axure.com/
Adober Fireworks: une Photoshop e Illustrator, presenta una fidelidad visual muy buena.
Se pueden crear pantallas y manejar varios estados determinados de elementos, Así como
añadir elementos de formulario funcionales y unirlos mediante enlaces.
https://www.adobe.com/mx/products/fireworks.html

5.3.4 Prototipos codificados

Ofrecen el más alto nivel de fidelidad
para las experiencias simuladas.
Cualquiera que interactúe con ellos no
podrá distinguirlos de la aplicación
final. Se realizan en el entorno nativo
del navegador, sistema operativo y/o
dispositivo. Los botones, menús y
campos de formulario son funcionales
e interactúan con el usuario a través
del mouse y teclado.

Pros:
 Es posible reutilizar su código en la producción.
 Ofrecen la simulación más realista posible.
 Pueden generarse a partir de recursos existentes de código.

Contras:
 El equipo puede parar o disminuir su productividad al debatir los detalles del
prototipo.
 Es necesario dedicar bastante tiempo a cread un código funcional.
 Existe la tentación de perfeccionar el código, lo cual tomará aún más tiempo.
 La actualización e iteración consumen otro tanto de tiempo.

Herramientas para la creación de prototipos codificados

Bootstrap
“Diseñe y personalice rápidamente sitios receptivos para dispositivos móviles con
Bootstrap, el kit de herramientas de código abierto de front-end más popular del mundo,
que presenta variables y mixins de Sass, sistema de cuadrícula receptivo, amplios
componentes prediseñados y potentes complementos de JavaScript.”
https://getbootstrap.com/

Adobe Dreamweaver
https://www.adobe.com/mx/products/dreamweaver.html
5.4 Habilidades básicas de diseño
Bill Moggridge comenta que el diseñador debe tener
cinco habilidades de diseño, para poder resolver un
problema y buscar una solución centrada en el
usuario:
1. Sintetizar una solución a partir de todas las
limitaciones relevantes, entendiendo todo lo que
marcará la diferencia en el resultado.
2. Enmarcar, o reformular, el problema en un
objetivo.
3. Crear e imaginar alternativas
4. Seleccionar entre tres alternativas, sabiendo
intuitivamente cómo elegir el mejor enfoque
5. Visualizar y crear un prototipo de la solución
prevista.

Las cinco habilidades pueden aplicarse en el orden de lista, sin embargo el proceso de UX
es iterativo más que lineal y no sigue necesariamente la secuencia que previamente
habíamos contemplado.

La aproximación más productiva a veces parece desestructurada, al momento que el equipo

realiza un prototipo y lo muestra a los usuarios, para posteriormente examinar las
respuestas y modificar el prototipo.

Conocimiento tácito
Pensar diseñando implica más un
conocimiento tácito en lugar de uno
lógico. El diseñador opera en un nivel de
complejidad de síntesis de las
limitaciones. Añade que el diseñador
posee un conocimiento subconsciente
intuitivo, si un problema tiene un gran
número de limitaciones, la mente
consciente se confunde, pero el
subconsciente tiene una mayor capacidad
de buscar una solución creativa.
El diseñador tiene la habilidad y el entrenamiento de aprovechar el conocimiento tácito de
la mente inconsciente, antes que limitarse a trabajar con el conocimiento explícito.
Referencias

Gothelf, J., Seiden, J., & Ries, E. (2014). Lean UX: cómo aplicar los principios Lean a la mejora
de la experiencia de usuario. Universidad Internacional de La Rioja.

Moggridge, B., & Atkinson, B. (2007). Designing interactions (Vol. 17). Cambridge, MA: MIT
press.

Ries, E. (2012). El método Lean Startup. Editorial Desuto

 Producción de Proyectos Digitales

Unidad 6. Testeo de Usabilidad

6. Testeo de Usabilidad
Aun cuando el diseñador tenga amplios conocimientos sobre usabilidad, resulta
recomendable evaluar el diseño con usuarios. Esto se debe a que, conforme más tiempo
dedica un diseñador a un proyecto, menor es su perspectiva y más difícilmente detectará
posibles problemas. Podemos decir que gran parte de lo que el diseñador percibe cuando
mira su propia obra, es una construcción mental; ve aquello que tiene en mente, no aquello
que sus usuarios tendrán ante sus ojos (Yusef Hassan Montero & Sergio Ortega).

La importancia del diseño de la aplicación se basa en que éste será el que modele la
interacción entre usuario y aplicación, y por tanto posibilitará o no la consecución de los
objetivos perseguidos por el usuario (Hassan Y., Martín F. J., & Iazza G. 2004)

Usabilidad. Como hemos visto en unidades anteriores, la usabilidad se refiere a la

interacción del usuario con el producto, el cual debe ser fácil de usar y brindar una
satisfacción que permita al usuario lograr sus objetivos.

Arquitectura de la información. Es más que la interfaz de un sitio web o aplicación, en ella

interviene el diseño de la interfaz a través de una estructura y organización de cada uno de
los elementos.

Diseño centrado en el usuario. La producción

de un proyecto digital debe tener como
objetivo principal el satisfacer las
necesidades de los usuarios, a través de un
proceso de investigación, análisis, pruebas y
evaluación. Hassan, Martín & Iazza
argumentan que el diseño centrado en el
usuario “implica involucrar desde el
comienzo a los usuarios en el proceso de
desarrollo del sitio; conocer cómo son, qué
necesitan, para qué usan el sitio; testar el
sitio con los propios usuarios; investigar
cómo reaccionan ante el diseño, cómo es su
experiencia de uso; e innovar siempre con el
objetivo claro de mejorar la experiencia del
usuario”.

Proponen un esquema de proceso para

realizar un diseño centrado en el usuario. En
cual indican que las fases de diseño,
prototipado y evaluación son cíclicas e
iterativas.
Kate Moran de Nielsen Norman Group, indica que las pruebas de usabilidad tienen tres
objetivos principales:
• Identificar problemas en el diseño del producto o servicio.
• Descubriendo oportunidades para mejorar
• Conocer el comportamiento y las preferencias del usuario objetivo.

6.1 Test con usuarios

El test con usuario es una prueba basada en la observación, se solicita a un grupo de
usuarios reales que utilicen el sitio web, durante la práctica los observadores y moderador
anotan los problemas de uso que se presentan en la práctica, para posteriormente
analizarlos.

Yusef Hassan indica que "la mejor forma de comprobar la

usabilidad de un diseño es precisamente poniéndolo a
prueba con usuarios, observando cómo utilizan el producto
y analizando con qué problemas se encuentran, qué errores
cometan o qué tipo de tareas no son capaces de resolver
satisfactoriamente".

Se recomienda realizar el test después de una evaluación heurística, debido a que se busca
obtener información acerca de la interacción del usuario con el producto, mientras que la
evaluación heurística se centra en los errores de arquitectura de la información.

Las pruebas deben ser:

• Razonables o naturales para el usuario (acorde al escenario propuesto)
• Específicas. Describir la tarea a realizarse con instrucciones claras y precisas.
• Factibles. Se evalúa la interacción del producto, no a la empresa o al usuario.
• De duración razonable. Se debe indicar al usuario el tiempo que invertirá a la
prueba, recomendado que sea de corta duración ya que el usuario puede
distraerse o desmotivarse.

Objetivos
El primer paso es definir los objetivos del test, Hassan indica que son más útiles del tipo
formativo: detectar posibles problemas de usabilidad, que sumativo: determinar el grado
general de usabilidad de un producto o proceso interactivo.

Participantes
Es necesario localizar personas que correspondan al perfil de los usuarios potenciales del
producto y que no estén enterados de los objetivos que se persiguen.
¿Cuántos participantes se recomienda?
Jacob Nielsen sugiere que se realicen las pruebas a 15 participantes, divididos en tres
pruebas (5 por prueba). Debido a que a partir de cierto número de usuarios evaluados, los
errores eran similares y no aportaban información nueva a la prueba.

Escenarios y tarea
Un escenario es la narración de situación o contexto imaginario, que permitirá al usuario
comprender o imaginar el contexto de las tareas que realizará durante la prueba.

Kate Moran indica que es importante redactar las tareas, debido a que las instrucciones mal
proporcionadas "pueden hacer que el participante malinterprete lo que se le pide que haga
o pueden influir en la forma en que los participantes realizan la tarea". Se puede entregar
las instrucciones en una hoja impresa, pidiéndoles que lean en voz alta para garantizar que
han visualizado completamente.

Moderador o facilitador
Su trabajo es administrar las tareas del participante, brinda instrucciones, apoya a los
participantes, observa su comportamiento y escucha la retroalimentación.

Se debe considerar incluir a más miembros del equipo como observadores, siempre
indicando su presencia al usuario y el motivo por el cual se encuentran presentes.

Procedimiento
Se realiza un breve cuestionario al usuario con datos sociodemográficos, intereses, hábitos
o conocimientos previos.

Hassan indica que estas pruebas deben llevarse a cabo en un laboratorio, es decir en un
espacio acondicionado para la prueba, debe ser dirigida por un facilitador o moderador, el
cual indicará a los participantes las tareas que deben hacer en cada momento, ayudándole
si se queda atascado, pero sin interferir en el proceso.

Añade que se recomienda que antes de iniciar con las tareas, se realice un test de 5
segundos, en el cual se muestra al usuario el producto durante ese tiempo y a continuación
se le indica que exprese su percepción.

Posteriormente se solicita al usuario que realice las tareas y además exprese en voz alta qué
está pensando, qué no entiende o qué está haciendo. Al concluir la prueba, se solicita al
usuario completar un cuestionario de satisfacción o usabilidad percibida.

Se recomienda grabar la prueba, siempre con el permiso del usuario.

Problemas
• Lo primero a considerar es que realizar una prueba con usuarios es costosa, implica
reclutar a los participantes, tiempo y esfuerzo para realizar las pruebas más el
tiempo de sintetizar y analizar los resultados.
• Al realizarse la prueba en un laboratorio, no muestra el contexto real de uso del
producto.
• El sujeto de prueba puede sentirse cohibido al ser observado, lo cual influirá en sus
respuestas.

6.2 Tipos de test con usuarios

Test de guerrilla
Consiste en acudir a lugares en donde se encuentra nuestro
usuario objetivo y solicitarles al azar que colaboren en la prueba,
se les muestra el sitio web o app en pocos minutos. Su principal
ventaja es la disminución del costo, tanto económico como de
tiempo (al seleccionar los usuarios).

Este test sirve para detectar problemas de usabilidad pero no

para resolverlos. El usuario dice en voz alta lo que piensa y
podemos observar cómo completa las tareas. Podría brindar
información relevante al inicio del proceso de evaluación, sin
embargo en etapas avanzadas su uso es informal y no brinda
información detallada.

Pruebas A/B
En ocasiones tenemos dudas sobre las decisiones de rediseño realizadas, una técnica que
nos puede ayudar a elegir son las Pruebas A/B. Esta técnica consiste en comparar la eficacia
de diferentes configuraciones, mostrando dos versiones del sitio web o app a los usuarios,
a una parte de los usuarios se le presenta la opción 1 y a la otra parte la opción 2. Es
importante establecer los objetivos que se pretenden alcanzar con la prueba, por ejemplo
"que el usuario ingrese al catálogo de productos", la información se puede medir
cuantitativa o cualitativamente, como el tiempo que tarda en lograr ese objetivo.

Las pruebas A/B son eficaces para evaluar

comparativamente pequeñas variaciones del diseño:
cambio de posición de los elementos, cambio de tamaño
o color, diferentes tipografías, entre otras variaciones.
 Existen varias empresas que ofrecen herramientas para realizar estas pruebas, se puede
utilizar por ejemplo Google Optimize.
A continuación se presentan 4 consejos, tomando como base los tips de Joel Marsh:
1. Las pruebas A/B por lo general son gratis, se obtiene información valiosa, así que
aunque tengan un costo lo vale.
2. Los dos diseños deben compararse al mismo tiempo, usando la misma cantidad de
usuarios para cada diseño.
3. Se recomienda cambiar detalles mínimos, como la posición de un elemento, el color,
el tamaño, entre otros.
4. Las páginas a comparar deben ser las mismas, un index se comparará con otro index,
no con la página de contacto.

Prueba multivariable
Similares a las pruebas A/B, pero con mayor complejidad, miden mayor número de
elementos y por lo tanto se deben aplicar a mayor cantidad de usuarios. De igual modo al
conseguir mayor cantidad de información, se debe realizar un análisis de resultados más
detallado.

Card Sorting
Consiste en solicitar a un grupo de participantes que agrupen
los conceptos presentados en cada tarjeta por similitud
semántica. El objetivo es identificar qué conceptos tienen
relación semántica entre sí, así como su grado de relación.
Sirve para ordenar la arquitectura de la información acorde a
su organización, sin embargo no se obtiene información sobre
el diseño de la interfaz.
Imagen de Jessie Altman

Eye-tracking
Se utiliza software y equipo especial para medir lo que los usuarios ven en tu diseño, los
movimientos del ojo son insconscientes, por lo cual esta técnica se considera objetiva al
brindar información fidedigna.

La mayoría de sistemas de eye-tracking

se basan en el uso de cámaras (eye-
trackers) que proyectan rayos infrarojos
hacia uno o los dos ojos del participante,
infiriendo la zona de la escena visual que
el usuario se encuentra atento en cada
momento.
Imagen de Tobii Pro
Captura de pantalla y mapas de calor
Se realizan a través de softwares como HotJar,
ClickTale y Loockback, los cuales permiten grabar
las pantallas de usuarios reales mientras usan el
producto, de forma anónima. Puedes visualizar
dónde dan click, hacia dónde se mueve el mouse,
qué tan rápido se deslizan...Algunas herramientas
pueden generar mapas de calor, que muestran
mapas de color para mostrarse dónde los usuarios
interactuaron más.
Imagen de HotJar

Ficheros log
Son ficheros de texto plano generados por el servidor web, en ellos se registra cada una de
las peticiones de´páginas realizadas por los clientes al servidor. Cada fichero registra la
siguiente información:
- Dirección IP del cliente
- Identidad del usuario (para sitios con identificación)
- Password de acceso (para sitios con identificación)
- Fecha y hora de la petición
- Método
- Path o directorio de la página en el servidor
- Código que indica si la petición ha sido resuelta correctamente o no
- Número de bytes trasferidos entre cliente y servidor
- Página desde la que se pide el archivo al servidor (puede ser una URL interna si a la página
se llega por un enlace del mismo sitio web, o externa, en el caso de que sea a través de otro
sitio web)
- Información sobre el agente software (navegador) del cliente

Al analizarlos podemos ver quién usa el sitio, qué páginas son más visitadas, cómo se usa el
sitio, etc.

Nota: No se considera propiamente un test de evaluación, pero permite adquirir datos

relevantes.

Opiniones de los usuarios

Una vez que el producto se encuentra disponible en la web o descarga de la app, se obtiene
información pasiva o activa de la interacción del usuario, así como los problemas que los
usuarios han tenido con el producto. Se pueden usar cuestionarios para preguntar al
usuario, de igual modo se obtendrá información pasiva cuando se reciba un email buscando
soporte o en las reseñas de la app.
Nota: No se considera propiamente un test de evaluación, pero permite adquirir datos
relevantes.

Para concluir con la presente unidad se indica que también se pueden considerar como
testeos de usabilidad la evaluación heurística, además de los instrumentos vistos en la
unidad 5: entrevista, cuestionario o focus group.

Referencias:
Marsh, J. (2015). UX for beginners: A crash course in 100 short lessons.
" O'Reilly Media, Inc.".

Moran, K. (2019). Usability Testing 101. Recuperado de:

https://www.nngroup.com/articles/usability-testing-101/

Montero, Y. H. (2015). Experiencia de usuario: principios y métodos.

Montero, Y. H., Martín , F. J., & Iazza, G. (2004). Diseño web centrado en el usuario:
usabilidad y arquitectura de la información. Hipertext. net, (2).

Montero, Y. H., & Ortega, S. (2009). Informe APEI sobre usabilidad (Vol. 3). APEI, Asociación
Profesional de Especialistas en Información.