15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

no solo usabilidad: revista multidisciplinar sobre personas, diseo y tecnologa (ISSN 1886-8592)

6 de Junio de 2013

Diseo de Experiencia de Usuario: etapas, actividades,

tcnicas y herramientas
Ronda Len, Rodrigo
Resumen: Se presenta una metodologa para afrontar el diseo de experiencia de usuario, integrando conceptos y
enfoques de la arquitectura de informacin y el diseo de interaccin.

Introduccin
A lo largo del tiempo el diseo de software ha contado con diferentes enfoques que han evolucionado y se han enriquecido tanto
en sus tareas como en la variedad de las posibles tcnicas a aplicar.
La arquitectura de informacin (AI) y el diseo de interaccin (IxD) se dan la mano durante las etapas de requerimientos y diseo,
formando parte de un enfoque llamado Diseo de Experiencia de Usuario (UXD).
El objetivo de este artculo es ofrecer una mirada integradora de ambos procesos (AI y IxD) durante las primeras etapas de
creacin de software, basndose en los principios del UXD y proponiendo un enfoque metodolgico para afrontar estos procesos.

Criterios bsicos
La conceptualizacin de este artculo parte del enfoque de Jesse James Garret de los elementos de la Experiencia de Usuario (UX)
que se muestra en la figura 1, haciendo nfasis en las labores de Arquitectura de informacin y Diseo de la interaccin.

Figura 1. Los Elementos de la Experiencia de Usuario de Garret (2002) traducido por Javier Velasco.
Otro concepto a tener en cuenta en este trabajo es el de las etapas definidas para la creacin de un producto de software
(anlisis de Requerimientos, Diseo del producto, Implementacin del mismo, Prueba de lo realizado). En este sentido es
importante sealar que la creacin de software es un proceso en forma de espiral, tal y como se representa en la figura 2.

www.nosolousabilidad.com/articulos/uxd.htm

1/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Figura 2. Etapas en la creacin de un producto software.

De igual manera se definen dos formas de enfocar estas etapas de desarrollo del software: lineal e iterativa. La forma lineal
consiste en pasar secuencialmente por las cuatro etapas, mientras que en el enfoque iterativo se van haciendo repeticiones del
propio ciclo de software hasta lograr el producto deseado.

Figura 3. Enfoques lineal e iterativo de las etapas de creacin de software.

La decisin de utilizar uno u otro enfoque est condicionado por diversos factores, como las necesidades del proyecto, el
presupuesto, o el tipo de producto a desarrollar entre otros.
El rol que desempea el Diseador de Experiencia de Usuario dentro del diseo de software puede ser visto como un proceso
comunicativo, inspirado en el modelo de comunicacin de Shannon-Weaver. Es decir, el diseador se convierte en un mediador
entre:
1. Las necesidades comunicativas que establece la persona o institucin que solicita o encarga el producto (clientes).
2. Las necesidades informativas y funcionales de las personas que van a usar el producto (usuarios).
De este modo, la funcin del diseador es precisamente lograr un equilibrio en este proceso comunicativo entre Emisores
(clientes) y Receptores (usuarios).

www.nosolousabilidad.com/articulos/uxd.htm

2/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Figura 4. Rol del diseador como mediador entre cliente y usuarios.

Los enfoques metodolgicos de creacin de un producto no son rgidos. En el caso de la creacin de software, las etapas de
diseo estn condicionadas por los tres elementos descritos por Morville (2004), que sealan que todo proyecto es relativo a los
usuarios, contexto y contenidos especficos en cada caso.

Figura 5. Grfico de los tres crculos de Morville (2004)

Este enfoque refuerza una frase que actualmente se ha convertido en un lema para todos los que se desempean como
diseadores de experiencia de usuario: Depende. En el diseo de software no existe nada absoluto, las decisiones de diseo
ms acertadas varan en funcin del contexto, los contenidos y los usuarios. Es por eso que resulta difcil definir pautas o
metodologas rgidas para su realizacin, y se hace imprescindible que los diseadores afronten de forma flexible cada proyecto
concreto.

Metodologa
El enfoque metodolgico propuesto en el presente trabajo se basa en las etapas del diseo de software descritas anteriormente.
Un enfoque que consta de cuatro elementos bsicos para su comprensin:
Etapas: Son las que responden al tiempo transcurrido cundo?
Actividades o tareas: Son las que responden al proceso qu?
www.nosolousabilidad.com/articulos/uxd.htm

3/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Tcnicas: Son las que responden a lo que se hace para lograr los procesos y tarea cmo?
Herramientas: Son las que responden a qu se usa para aplicar las tcnicas con qu?

Etapas
Las etapas se dividen en cuatro momentos por los que transcurre la labor del diseador del software:
1. Investigacin: en la que se obtiene toda la informacin posible del proyecto, usuarios y producto a disear.
2. Organizacin: en la que se procesa toda la informacin para convertirla en un producto.
3. Diseo: en la que se plasma el diseo del producto a partir de lo organizado.
4. Prueba: en la que se comprueba la calidad del diseo propuesto.
Estas etapas pueden ser vistas de la misma manera que se vieron las etapas del ciclo de vida del software, es decir, tanto de
forma lineal como iterativa. El resultado de estas etapas se materializa en forma de entregables o artefactos.

Figura 6. Proceso del diseo de experiencia de usuario

Actividades o Tareas
A continuacin se muestran las actividades o tareas que se realizaran principalmente durante cada etapa.

Figura 7. Etapas del diseo de experiencia de usuario

ETAPA 1 INVESTIGACIN
Durante esta etapa se trata de obtener la mayor cantidad de informacin posible y necesaria para el proyecto a realizar, tanto
acerca del cliente como de los usuarios. El correcto balance entre demandas y necesidades de unos y otros es lo que lleva al
xito el producto a crear.
Informacin relacionada con el proyecto
Definir las necesidades generales del proyecto.
www.nosolousabilidad.com/articulos/uxd.htm

4/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Definir la temtica general del producto a realizar o redisear.

Definir los objetivos de los clientes o emisores con el producto.
Definir la intensin comunicativa del producto (Informar, entretener, alertar)
Definir la tipologa de producto que se desea.
Definir de manera general a los usuarios del producto, su contexto de uso, y los contenidos que tendr el mismo.
Estudio de Usuarios (receptores)
Caracterizar a los usuarios. (tipologa, roles, etc.)
Definir perfiles de usuarios.
Investigar sus necesidades. (de informacin, formacin, etc.)
Definir escenarios.
Definir los procesos que realizan los usuarios en sus contextos reales.
Estudio del Contexto
Definir las caractersticas del contexto de uso (culturales, polticas, econmicas, sociales y tecnolgicas).
Definir el modelo de negocio.
Realizar una matriz DAFO (FODA).
Definir un banco de problemas del contexto de uso.
Realizar flujogramas de procesos y actividades.
Realizar un estudio de mercado y/o de productos similares al que se quiere realizar o redisear.
En caso de estar rediseando un producto
Realizar un anlisis del uso del mismo (Ejemplo: Logs, Google Analytics).
Realizar una evaluacin del producto existente para determinar su calidad.
Estudio de los Contenidos
Realizar un inventario de recursos de informacin del producto.
Realizar mapas de conceptos (Concept Map).
Realizar mapas de contenidos (Content Map).
Estudio del proceso de diseo
Definir una estrategia de trabajo.
Analizar los recursos de trabajo con que se cuente.
Planificar el tiempo de trabajo.
Los artefactos generados durante esta etapa seran: Informes y Diagramas en forma de organigramas y mapas.
ETAPA 2 - ORGANIZACIN
Esta es la etapa que ms se relaciona con la expresin artstica. Es cuando el diseador usa tanto criterios cientfico-tcnicos
como culturales para organizar toda la informacin obtenida durante la etapa anterior.
Representar todas las estructuras posibles de los contenidos, en correspondencia a las necesidades de usuarios y su
contexto.
Definir de todas las formas de jerarquizar las temticas y los contenidos.
Hacer corresponder las estructuras planteadas a las necesidades tanto de emisores (clientes) como de receptores (usuarios).
Definir todos los flujos funcionales que tendr el producto de software, correspondiendo con los flujos reales de los usuarios
en su contexto.
Los artefactos generados durante esta etapa seran: Diagramas manuscritos y anotaciones en forma de borrador.
ETAPA 3 - DISEO
Es la etapa en la que se plasman los resultados de la etapa anterior, ahora con todos los requerimientos tcnicos con el fin de
que sean comprendidos por usuarios, cliente y el resto del equipo de trabajo.
Definir la estructura del producto (taxonoma y diagramas de organizacin o blueprints).
Definir el funcionamiento del producto (diagramas de funcionamiento).
Definir las pantallas del producto (diagramas de presentacin o wireframes).
Definir los servicios y funcionalidades que tendr el producto.
Definir las etiquetas del producto (labeling).
Crear prototipos de bajo y alto nivel.
Los artefactos generados durante esta etapa seran: Diagramas digitales y prototipos, informes del producto.
ETAPA 4 - PRUEBA
Es la etapa en la que se comprueban las propuestas de diseo. Las pruebas se realizan tanto con clientes como con usuarios.
www.nosolousabilidad.com/articulos/uxd.htm

5/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Con los clientes con el objetivo de saber si se han logrado los objetivos y demandas planteadas. Y con los usuarios, con el
objetivo de saber resueltas las necesidades identificadas.
Pruebas de prototipos.
Revisin de diagramas.
Comprobacin de robustez en el etiquetado.
Comprensin de los servicios diseados por parte de los usuarios.
Los artefactos generados durante esta etapa seran: Informes evaluativos

Tcnicas
Las tcnicas no estn obligatoriamente relacionadas con las actividades ni las etapas, por lo que pueden usarse en cualquier
momento del proyecto. Todo depende de lo que se quiera obtener con la tcnica. Hay tcnicas que tienen mayor uso durante
alguna etapa o actividad, pero no por ellos estn restringidas a stas. Como dato curioso, se pueden mezclar tcnicas entre s
para lograr algn objetivo especfico. Por ejemplo: Aplicar un card sorting a expertos, o realizar una tormenta de ideas dentro de
un Diseo Participativo.
Se muestran algunas tcnicas usadas segn su funcin principal, aunque no exclusiva:
Tcnicas bsicas dentro de un proceso de diseo:
Reunin
Entrevista y Encuesta
Observacin
Revisin bibliogrfica
Consulta a experto
Representacin y mapeo
Tcnicas muy usadas para la bsqueda de informacin:
Tormenta de ideas (brainstorming).
Focus group
Crtica de diseos anteriores.
Diseo participativo.
Tormenta de idea de necesidades de informacin (brainstorming).
Escenarios.
Personas.
Benchmarking (anlisis competitivo).
Anlisis de frecuencia de texto (repeticin de trminos y conceptos en los contextos).
Tcnicas muy usadas para la organizacin:
Organizacin de tarjetas (card sorting).
Agrupacin (finalizando en un Diagrama de Afinidad).
Secuencia (Anlisis de secuencia) (Ronda Len, Mesa Rbade; 2005).
Tabulacin de contenidos (crear tablas con los diferentes contenidos a organizar).
Validacin de trminos.
Tcnicas muy usadas para el funcionamiento del producto:
Anlisis de tareas (Task Analysis).
Flujogramas.
Paseo cognitivo (Cognitive Walkthrough).
Tcnicas muy usadas para disear el producto:
Diagramacin en papel.
Diagrama de organizacin (Blueprint)
Diagrama de funcionamiento (Flow diagram).
Diagrama de presentacin (Wireframe).
Etiquetado (Labeling).
Prototipado digital.
www.nosolousabilidad.com/articulos/uxd.htm

6/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Tcnicas usadas para hacer los test del diseo planteado:

Crtica de diseo con usuarios y clientes (Critic design).
Pruebas con usuarios (User test).
Evaluacin heurstica (Heuristic test).
Mapeo de clics dentro de la pantalla del producto (MouseTracking).
Monitorizacin o seguimiento visual (EyeTracking).

Herramientas
Las herramientas para el trabajo del diseador de experiencia de usuario varan segn las posibilidades econmicas y
tecnolgicas del proyecto. En el mercado existen tanto herramientas profesionales de un alto costo monetario como herramientas
gratuitas.
Para el manejo de la informacin con usuarios podemos contar con las encuestas online, herramientas que permiten disear un
encuesta en lnea y que los usuarios, de manera remota, la respondan.
Como ejemplos tenemos:
Survey Manager de Netquest (www.solucionesnetquest.com/survey_manager)
E-encuestas (www.e-encuesta.com)
Para el mapeo de contenidos y conceptos se pueden usar algunas aplicaciones tales como:
MindManager de MindJet (www.mindjet.com)
CMapTools. (http://cmap.ihmc.us)
Freemind (http://freemind.sourceforge.net)
PowerMapper (www.powermapper.com)
Xtreeme SiteXpert (www.xtreeme.com/sitexpert)
Para la representacin de contenidos, ya sea en diagramas o prototipos, las siguientes herramientas tienden a ser muy
aceptadas:
Axure RP Pro (www.axure.com)
SmartDraw (www.smartdraw.com)
Microsoft Visio (www.microsoft.com)
OmniGraffle (OSX) (www.omnigroup.com)
iGrafx Flowcharter (www.igrafx.com)
Es muy frecuente crear prototipos en HTML usando algn editor como Adobe Dreamweaver, o usando Microsoft PowerPoint para
lograr un prototipo semifuncional creado en forma de presentacin. En la actualidad se pueden usar algunos sistemas de gestin
de contenidos (CMS) para crear prototipos muy similares en funcionamiento al producto final.
Aunque existen numerosas aplicaciones que sirven de herramientas para el trabajo del diseador de experiencia de usuario, el
papel y el lpiz han sido y siguen siendo las ms usadas. Claro est que los tables con sus pantallas touch han venido a
sustituir en algunos casos al papel y al lpiz, gracias a las aplicaciones que funcionan como tales en estos dispositivos.

Conclusiones
La posibilidad de metodizar el proceso de diseo de un software les permite, a diseadores consagrados y potenciales, conocer
enfoques que pueden serles tiles en sus contextos. Esto no significa que esta propuesta sea una frmula inalterable sino que, al
contrario, debe ser una gua modificable y adaptable a las necesidades de sus usuarios, contenidos y contexto.

Bibliografa
Coutin Domnguez, Adrian. Arquitectura de informacin para sitios web. Anaya Multimedia, 2002
Garret, Jesse James. Un vocabulario visual para describir arquitectura de informacin y diseo de interaccin. Traduccin:
Javier Velazco (marzo 2002) [en lnea] <http://www.jjg.net/elements/translations/elements_es.pdf >
Garret, Jesse James. The Elements of User Experience. User Center Design for the Web and Beyond. (2da edicin). New
Riders, 2011.
Kuniavsky, Mike. Observing the User Experience: A Practitioner's Guide to User Research. Morgan Kaufmann Publishers, 2003.
Lidwell, William; Holden, Kritina y Butler, Jill. Universal principles of design. Rockport publishers, 2003
www.nosolousabilidad.com/articulos/uxd.htm

7/9

15/11/13

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

Morville, Peter. User Experience Design. [En lnea] <http://semanticstudios.com/publications/semantics/000029.php> junio,

2004
Reiss, Eric. Practical Information Architecture. A hands-on approach to structuring successful websites. Addison-Wesley, 2000
Rosenfeld, Louis y Morville, Peter. Information architecture for the World Wide Web. OReilly Media, Inc. 3ra edicin. 2007.
Ronda Len, Rodrigo. Productos electrnicos: principios y pautas. Editorial Flix Varela, La Habana, 2005
Ronda Len, Rodrigo. La Arquitectura de Informacin y las Ciencias de la Informacin. [En lnea] Nosolousabilidad
<http://www.nosolousabilidad.com/articulos/ai_ciencias_informacion.htm> mayo 2005
Ronda Len, Rodrigo y Mesa Rbade, Yaima. Anlisis de Secuencia: una herramienta para la Arquitectura de Informacin. [En
lnea] Nosolousabilidad <http://www.nosolousabilidad.com/articulos/analisis_secuencia.htm> julio 2005
Ronda Len, Rodrigo. Revisin de tcnicas de arquitectura de informacin. [En lnea] Nosolousabilidad
<http://www.nosolousabilidad.com/articulos/tecnicas_ai.htm> 5 de Enero de 2007, no 6, 2007
Ronda Len, Rodrigo. La diagramacin en la arquitectura de informacin. [En lnea] Nosolousabilidad
<http://www.nosolousabilidad.com/articulos/diagramacion.htm> 25 de Diciembre de 2007, no 6, 2007
Ronda Len, Rodrigo. El etiquetado en el diseo de software. [En lnea] Nosolousabilidad
<http://www.nosolousabilidad.com/articulos/etiquetado.htm> enero de 2013, no 12, 2013
Spencer, Donna. A practical guide to Information Architecture. Five Simple Steps. 2010
Wikipedia (the free encyclopedia). ShannonWeaver model. [en lnea] (Consultado Febrero 2013)
http://en.wikipedia.org/wiki/Shannon-Weaver_model
Wodtke, Christina y Govella, Austin. Information Architecture. Blueprint for the Web. (2da edicin) New Riders, 2009

Rodrigo Ronda Len es Licenciado en Bibliotecologa y Ciencia de la Informacin de la Facultad de Comunicacin de la Universidad de la Habana. Ha
trabajado como arquitecto de informacin, diseador de interaccin, analista de sistema y diseador de informacin. Se ha desempeado como
profesor y conferencista en los temas de diseo de software en varias instituciones cubanas.
Web personal: rodrigoronda.com

Citacin recomendada:
Ronda Len, Rodrigo (2013). Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas. En: No Solo Usabilidad, n 12, 2013.
<nosolousabilidad.com>. ISSN 1886-8592

www.nosolousabilidad.com/articulos/uxd.htm

8/9

15/11/13

www.nosolousabilidad.com/articulos/uxd.htm

Diseo de Experiencia de Usuario: etapas, actividades, tcnicas y herramientas

9/9