UX: guía completa https://attachmedia.

com/guia-ux/

Í n d i ce d e l a g u í a !

Diseño UX: Guía completa

El objetivo de esta guía es ofrecer una mirada integradora a diferentes conceptos,
como el diseño centrado en el usuario, la usabilidad, el design thinking, la
arquitectura de información, el diseño de interacción, etc. Todas estas disciplinas o
técnicas usadas durante las diferentes etapas en el diseño de Experiencia Usuaria
(UX).

El diseño de Experiencia Usuaria básicamente amplía los conceptos mencionados

hacia la búsqueda de una relación armoniosa entre las personas y la tecnología. Del
resultado de esta relación nace un conjunto de sensaciones emocionales y
valoraciones al producto el cual se pueden medir y mejorar.

En productos digitales que cumplen un fin muchas veces rentable, es necesario

incluir los propósitos del negocio a la par con las necesidades y expectativas de los
usuarios, inclusive con mayor relevancia que la tecnología a ser empleada, poniendo
esta última después de la conceptualización.

1 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Criterios básicos

H
Haayy ddooss ffoorrm
maass ddee eennffooccaarr llaass eettaappaass ddee ddeessaarrrroolllloo ddee uunn pprroodduuccttoo ddiiggiittaall::
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 hasta lograr el producto deseado.

Enfoques de las etapas de creación de un software

Enfoques lineal e iterativo de las etapas de creación de un producto digital.

LLaa ddeecciissiióónn ddee uuttiilliizzaarr uunnoo uu oottrroo eennffooqquuee eessttáá ccoonnddiicciioonnaaddoo ppoorr ddiivveerrssooss
ffaaccttoorreess, como las necesidades del proyecto, el presupuesto o el tipo de producto a
desarrollar entre otros.

El rol que desempeña el Diseñador de Experiencia de Usuario dentro del diseño de

un producto digital puede ser visto como un proceso comunicativo, inspirado en el
modelo de comunicación de Shannon-Weaver. Es decir, el diseñador se convierte en
un mediador entre:

1 2

LLaass nneecceessiiddaaddeess
LLaass nneecceessiiddaaddeess ccoom
muunniiccaattiivvaass
iinnffoorrm
maattiivvaass
que establece la persona o
y funcionales de las
institución que solicita o encarga
personas que van a usar el
el producto (clientes).
producto (usuarios).

De este modo, la función del diseñador es precisamente lograr un equilibrio en este

proceso comunicativo entre Emisores (clientes) y Receptores (usuarios).

Rol del diseñador dentro del proceso de creación

Diseñador de Experiencia de usuario

Rol del diseñador como mediador entre cliente y usuarios.

Las diferentes metodologías de creación de un producto no son rígidas. En

el caso de la creación de un producto digital, las etapas de diseño están
condicionadas por los tres elementos descritos por Morville (2004), que

2 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Metodología del diseño
Centrado en el usuario

PPaarraa rreeaalliizzaarr uunn pprrooyyeeccttoo eexxiittoossoo eenn UUXX eess nneecceessaarriioo tteenneerr uunn eessqquueem maa ddee ttrraabbaajjoo qquuee nnooss ppeerrm miittaa
iiddeennttiifificcaarr yy nnoo ssaalltteeaarrnnooss nniinngguunnaa ddee llaass eettaappaass nneecceessaarriiaass ppaarraa ccoonnsseegguuiirr llooss m
meejjoorreess rreessuullttaaddooss.. Este
esquema o marco de trabajo debe ser guiado centrándonos en las necesidades, exigencias, expectativas y
objetivos del usuario final e involucrarlo en la interacción del sitio mientras se va desarrollando para valorar
sus reacciones.

El concepto de DCU se utilizó como marco de trabajo, investigación y desarrollo de

principios del diseño de interfaces de usuario. Era el momento de observar cómo la
gente usaba los sistemas y creaba sus propios modelos mentales a partir de los
procesos de interacción. Tres fueron los términos que debían ser valorados para
entender estos procesos:

EEll m
mooddeelloo EEll m
mooddeelloo
IInntteerrffaazz::
ccoonncceeppttuuaall:: mmeennttaall::
La imagen que
Ofrecido Desarrollado por
el sistema
por el el usuario a
presenta al
diseñador partir de la
usuario.
del sistema. imagen.

Como señala Norman (1983b), la imagen del sistema guía al usuario en la

adquisición y construcción de un modelo mental ajustado al modelo
conceptual creado por el diseñador.

De este modo, el enfoque del DCU persigue asegurar la consecución de un producto

con la funcionalidad adecuada para usuarios concretos. El objetivo de esta filosofía
es ofrecer respuesta a preguntas como ¿quién usará este sistema?, ¿qué es lo que
va a hacer con él? ó ¿qué información necesitará para alcanzar sus objetivos?.

3 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Etapas UX

Etapa 1: Investigación

DDuurraannttee eessttaa eettaappaa ssee ttrraattaa ddee oobbtteenneerr llaa m

maayyoorr ccaannttiiddaadd ddee iinnffoorrm
maacciióónn
ppoossiibbllee 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. Las actividades que se realizan en esta etapa son:

Definir escenarios.

Estudio del contexto.

Definir perfiles de usuarios.

Estudio de los Contenidos.

Estudio de Usuarios (receptores).

Definir el modelo de negocio.

Investigar sus necesidades. (de información, formación, etc.).

Definir la intensión comunicativa del producto (Informar, entretener, alertar).

Definir los objetivos de los clientes o emisores con el producto.

Definir las necesidades generales del proyecto.

Definir la temática general del producto a realizar o rediseñar.

Realizar un inventario de recursos de información del producto.

Caracterizar a los usuarios. (tipología, roles, etc.).

Realizar mapas de conceptos (Concept Map).

Definir de manera general a los usuarios del producto, su contexto de uso, y los
contenidos que tendrá el mismo.

Definir las características del contexto de uso (culturales, políticas, económicas,

sociales y tecnológicas).

Etapa 2: Organización

Etapa cuando el diseñador UX uussaa ttaannttoo ccrriitteerriiooss cciieennttíífificcoo--ttééccnniiccooss ccoom

moo
ccuullttuurraalleess ppaarraa oorrggaanniizzaarr ttooddaa llaa iinnffoorrm
maacciióónn obtenida durante la etapa anterior.
Las actividades que se realizan en esta etapa son:

Hacer
Definir todos los
Representar todas las corresponder
flujos funcionales
estructuras posibles las estructuras
que tendrá el
de los contenidos, en planteadas a las
producto digital,
correspondencia a las necesidades

4 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Técnicas

TTeesstt AA//BB:: EEssttoo ppeerrmmiittiirráá ccoonnssttrruuiirr ddiiffeerreenntteess

vveerrssiioonneess ddee uunnaa ppáággiinnaa yy ssee lloo m moossttrraarráá aa
ddiiffeerreenntteess uussuuaarriiooss, así se visualizará cuál de las
páginas permite una mejor interacción y hacer las
mejoras que correspondan.

Para usar esta técnica no olvides configurar tu

Google Analytics con ambas páginas ya que de ahí
podrás extraer al detalle toda la información que
necesitas.

CCrreeaazzyy EEgggg:: Es muy fácil de usar y muy útil, esta te

permite visualizar capas de color que te indican por
dónde se mueven más los usuarios cuando navegan
en tu sitio.

EEyyeettrraacckkiinngg:: Una de las dificultades dentro del

estudio de necesidades del usuario es que ellos a
veces no logran especificar sus necesidades
inconscientes. EEss uunnaa tteeccnnoollooggííaa m muuyy úúttiill qquuee ttee
eennsseeññaarráá lloo qquuee ttuuss uussuuaarriiooss vveenn ccuuaannddoo lllleeggaann aa
ttuu ssiittiioo.. No es muy difundida pero si es
recomendable para saber si tu web está llamando la
atención justo en el lugar que necesitas.

Con esta herramienta podrás saber tres puntos

básicos: dónde mira, cuánto tiempo mira y cuál es el
orden visual, es decir el trayecto que siguen sus ojos
en la web.

U
Ussaabbiilliiddaadd ddee llaabboorraattoorriioo:: Esta técnica consta de
someter a prueba a tus usuarios, entrevistándolos
por separado y pedirles que realicen una serie de
tareas en el sitio para identificar el nivel de
dificultad que puedan presentar.

De esta forma podrás saber:

Qué tan complicado pueda ser navegar por

determinada página o encontrar determinada
información.
Cuáles son los obstáculos que se deben reparar en el
sitio.
Mientras más pronto se detecten los problemas
menos costos implicarán.
No desarrollar con tecnología que no funcionará al
final.

5 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Herramientas

Existen diferentes herramientas recomendables para un proyecto de UX,

desde el diseño, investigación, prototipado y lanzamiento. Cada etapa es
importante y para realizarla con éxito te recomendamos algunas
herramientas que podrían ayudarte en cada proceso.

U
UxxPPiinn:: Permite crear desde M
Maarrvveell:: Es una herramienta
prototipos de baja online que permite transformar
fidelidad, hasta de gran bocetos en prototipos
definición. interactivos.

PPeenncciill:: Una herramienta

BBaallssaam
miiqq:: Es un programa online gratuita para realizar
para la creación de esquemas con Mockups para webs y
la que se puede trabajar desde aplicaciones, muy fácil de
cualquier lugar mediante su web, usar y de instalar.

AAxxuurree RRPP PPrroo:: Programa para LLooookkBBaacckk:: Potente

creación de interfaces web que plataforma que permite
permite probar su funcionalidad ver la interacción de los
desde el mismo programa sin usuarios, permitiendo
necesidad de subir elementos a la identificar los
web. problemas.

6 de 7 3/16/19 5:11 p. m.
UX: guía completa https://attachmedia.com/guia-ux/

Í n d i ce d e l a g u í a !
Bibliografía

http://www.nosolousabilidad.com/manual/

https://medium.com/@adriansolca/la-auditor%C3%ADa-de-ux-una-
gu%C3%ADa-para-principiantes-98bb026fba56

https://es.wix.com/blog/2015/05/ux-guia-para-principiantes/

https://www.shopify.com.mx/blog/guia-rapida-para-comenzar-con-el-diseno-
de-la-experiencia-de-usuario

https://josefacchin.com/experiencia-de-usuario-ecommerce-ux-design/

7 de 7 3/16/19 5:11 p. m.