Pid 00221682-3 PDF

Experiencia
de usuario y
comercio
electrónico
Enric Mor Pera
PID_00223057
© FUOC • PID_00223057 Experiencia de usuario y comercio electrónico
Ninguna parte de esta publicación, incluido el diseño general y la cubierta, puede ser copiada,
reproducida, almacenada o transmitida de ninguna forma, ni por ningún medio, sea éste eléctrico,
químico, mecánico, óptico, grabación, fotocopia, o cualquier otro, sin la previa autorización escrita
de los titulares del copyright.
Índice
Introducción............................................................................................... 5
Objetivos....................................................................................................... 7
1. ¿Qué es la usabilidad?....................................................................... 9
1.1. Usabilidad y experiencia de usuario ........................................... 11
1.2. La experiencia de usuario y el comercio electrónico .................. 13
1.3. Diseño UX, diseño de interfaces y diseño de interacción ........... 16
1.3.1. Diseño UX ..................................................................... 16
1.3.2. Diseño de interfaces ...................................................... 17
1.3.3. Diseño de interacción .................................................... 17
1.4. Beneficios de la usabilidad y la experiencia de usuario .............. 17
1.5. Dispositivos, interacción y comercio electrónico ....................... 19
2. Conocer al usuario: el diseño centrado en el usuario............... 20

2.1. Conocer al usuario ...................................................................... 20
2.1.1. Orientaciones del comportamiento de navegación ....... 22
2.1.2. Implicación en la lectura de la información ................. 23
2.1.3. Toma de decisiones de navegación ............................... 23
2.2. Diseño centrado en el usuario: definición y objetivos ............... 23
2.3. Proceso y etapas del diseño centrado en el usuario .................... 24
3. Métodos y técnicas de diseño centrado en el usuario............... 28

3.1. Métodos de investigación y análisis ........................................... 29
3.2. Métodos y técnicas de diseño ..................................................... 31
3.2.1. Arquitectura de la información ..................................... 31
3.2.2. Card sorting...................................................................... 32
3.2.3. Prototipado .................................................................... 33
3.3. Métodos de evaluación por test .................................................. 34
3.4. Métodos de evaluación por inspección ...................................... 35
3.4.1. Evaluación heurística ..................................................... 35
3.4.2. Inspección de estándares ............................................... 36
3.4.3. Recorrido cognitivo ....................................................... 37
3.4.4. Recorrido cognitivo conjunto ....................................... 37
3.4.5. Inspección de características ......................................... 38
3.4.6. Inspección de consistencia ............................................ 38
3.5. El diseño centrado en el usuario y la gestión de proyectos ........ 39
4. Usabilidad y UX en el comercio electrónico............................... 40

4.1. Recomendaciones de usabilidad y UX en el comercio
electrónico ................................................................................... 43
4.1.1. Diseño orientado a los objetivos ................................... 43

4.1.2. Usabilidad ...................................................................... 43
4.1.3. Affordances....................................................................... 44
4.1.4. Learnability....................................................................... 44
4.1.5. Consistencia ................................................................... 45
4.1.6. Predictibilidad ................................................................ 46
4.1.7. Patrones .......................................................................... 47
4.1.8. Feedback........................................................................... 48
4.1.9. Lenguaje y etiquetado ................................................... 48
4.1.10. Diseño de los procesos de compra ................................ 49
4.1.11. Usuarios y perfiles de usuarios ...................................... 50
4.1.12. El diseño gráfico ............................................................ 50
4.1.13. Pantallas e interfaces de terceros ................................... 50
4.1.14. “No me hagas pensar en nada más que en lo que me
interesa” ......................................................................... 52
4.1.15. Acompañar al usuario .................................................... 52
4.1.16. Simplicidad .................................................................... 52
4.2. Consideraciones para el diseño de establecimientos
electrónicos en dispositivos móviles .......................................... 53
4.2.1. Tamaño (y hardware) .................................................... 53
4.2.2. Contexto ........................................................................ 53
4.2.3. Dispositivos multimedia completos .............................. 54
4.2.4. Interacción gestual ......................................................... 54
4.2.5. Multifunción y aplicación única ................................... 55
4.2.6. Aplicaciones nativas, aplicaciones web o
aplicaciones híbridas ..................................................... 55
4.2.7. Tiendas de aplicaciones y distribución de contenidos .. 57
4.2.8. Comportamiento de usuarios ........................................ 57
Resumen....................................................................................................... 59
Actividades.................................................................................................. 61
Glosario........................................................................................................ 62
Bibliografía................................................................................................. 63
© FUOC • PID_00223057 5 Experiencia de usuario y comercio electrónico
Introducción
Cada día utilizamos muchas y diversas máquinas, dispositivos e instrumen-

tos. De hecho, si intentamos enumerarlos todos, obtendremos una lista que,
a buen seguro, nos sorprenderá por su extensión y variedad: el despertador,
la lavadora, las puertas, el móvil, la tableta; medios de transporte como el co-
che, el tren, el metro y el autobús; las herramientas de trabajo de la oficina, el
ordenador con su sistema operativo y las aplicaciones instaladas, las carpetas,
los archivadores; los enseres de la cocina de casa, el horno, el lavaplatos, la
tostadora, el rallador de queso, etc. Cuando utilizamos estos objetos cotidia-
nos experimentamos satisfacción o frustración dependiendo de si nos permi-
ten hacer lo que queríamos hacer y de si lo podemos hacer de una manera
agradable y sencilla.
Al utilizar un teléfono móvil disfrutamos de su usabilidad o la sufrimos, así

como de su experiencia de uso. Hay aparatos de teléfono que sabemos utilizar,
a pesar de que nunca hayamos empleado un modelo similar, mientras que
con otros no sabemos ni cómo responder a una llamada. Los electrodomésti-
cos también son un buen ejemplo de esto. ¿Sabemos cuántos programas tiene
la lavadora de casa?, ¿y cuántos utilizamos habitualmente? En algunos esta-
blecimientos de restauración hay lavabos cuyo grifo no sabemos cómo abrir.
Hay estaciones de tren o metro donde la validación del billete está a la de-
recha del lugar de entrada, mientras que en otras se sitúa a la izquierda, sin
una lógica que a priori parezca comprensible; y esto provoca que la primera
vez que alguien debe validar un billete no le resulte del todo fácil. Estos ejem-
plos ilustran unos aspectos comunes que hacen referencia a la utilidad y a la
funcionalidad de los objetos que utilizamos, pero sobre todo se refieren a su
usabilidad y experiencia de uso. Estos aspectos de usabilidad y experiencia de
uso son extensibles a todos los objetos que nos rodean y usamos, tanto en el
mundo físico como en el virtual, y diariamente los percibimos, los sufrimos
o los disfrutamos.
En este módulo estudiaremos en qué consiste la usabilidad y la experiencia de

usuario, y cómo tenerlas en cuenta a la hora de llevar a cabo un proyecto de
comercio electrónico. Veremos que la usabilidad hace referencia a la facilidad
de uso de los productos digitales y los sistemas interactivos, y que los acerca
a las necesidades de las personas. Así, comprenderemos que la usabilidad y la
experiencia de uso son un factor determinante del éxito de las iniciativas de
comercio electrónico.
La usabilidad es parte de lo que actualmente se denomina experiencia de usua-

rio (con el acrónimo UX, del inglés user experience). Ambas se fundamentan
en el diseño centrado en el usuario, y su estudio se aborda en el ámbito de la
disciplina de interacción persona-ordenador. Pero esta área de conocimiento
no solo proporciona un marco teórico de referencia para estudiar la UX y la

usabilidad, sino que también facilita técnicas y métodos para desarrollar en la
práctica un proyecto de comercio electrónico que tenga en cuenta a sus usua-
rios y que sea fácil de usar.
Objetivos
Con este módulo didáctico el estudiante podrá lograr los objetivos siguientes:
1. Conocer qué es la usabilidad y la experiencia de usuario, y ser consciente

de su importancia.
2. Comprender el marco teórico donde se enmarcan la usabilidad y la expe-

riencia de usuario.
3. Ser consciente de que conocer al usuario es clave para diseñar productos

digitales y sistemas interactivos usables.
4. Introducirse en el diseño centrado en el usuario y entender que la expe-

riencia de usuario se fundamenta en procesos y metodologías.
5. Conocer las diferentes técnicas y métodos del diseño centrado en el usua-

rio.
6. Aprender a identificar los métodos del diseño centrado en el usuario más

adecuados para cada proyecto de comercio electrónico.
7. Conocer elementos específicos de la experiencia de usuario en el contexto

del comercio electrónico.
1. ¿Qué es la usabilidad?
La usabilidad de los productos digitales y los sistemas interactivos se refiere a su

facilidad de uso, y busca acercarlos a las necesidades de las personas. Esta idea,
que a priori puede parecer muy intuitiva, la desarrollaremos con más detalle
en este apartado, donde estudiaremos qué es y en qué consiste la usabilidad.
Pero antes de entrar a definir formalmente el concepto de usabilidad, es in-

teresante introducir la disciplina científica que se ocupa de su estudio, y que
se denomina interacción�persona-ordenador.
Interacción persona-
La interacción persona-ordenador es la disciplina que estudia el diseño, ordenador
la evaluación y la implementación de los productos y sistemas informá-
La definición de la disciplina
ticos interactivos para su uso por parte de humanos, así como los fenó- interacción persona-ordena-
dor que se recoge aquí fue for-
menos más importantes que están involucrados en aquellos. mulada en 1996 por el SIG-
CHI. Este es un grupo de inte-
rés que pertenece a la Associa-
tion for Computing Machinery
En el comercio electrónico, la interacción persona-ordenador tiene una im- (ACM) y que proporciona un
espacio para el debate y la di-
portancia especial, dado que los ordenadores y otros dispositivos informáticos fusión de los avances en el ám-
bito de la interacción humana
móviles son la vía de acceso a los entornos virtuales de venta, y facilitan la con el ordenador.
comunicación de los vendedores con los clientes. El conocimiento de la inter-
acción persona-ordenador tiene, por lo tanto, un papel esencial a la hora de
diseñar establecimientos virtuales y configurar sus catálogos de productos y
contenidos, así como los procesos de compra que llegarán a seguir los clientes.
Además, la disciplina de la interacción persona-ordenador ofrece un conjunto
de metodologías contrastadas de diseño que no pueden ser ignoradas por los
emprendedores y directivos que se planteen poner en marcha una iniciativa
en línea.
Algunos estándares definidos y acreditados por la Organización Internacional Otras definiciones de la

para la Normalización (ISO, International Organization for Standardization) usabilidad
proponen algunas definiciones de la usabilidad. Así, la ISO 9241-11 sobre ca- Es interesante ver otras defini-
lidad define la usabilidad del modo siguiente: ciones de la usabilidad, como
la propuesta por el Institute of
Electrical and Electronics Engi-
neers (IEEE). Esta asociación de
profesionales de la ingeniería
Se entiende por usabilidad la eficacia, la eficiencia y la satisfacción con la considera que “la usabilidad es
la facilidad con la que un usua-
que un producto o un sistema puede ser usado por usuarios específicos rio puede aprender a operar,
para lograr objetivos concretos en un contexto determinado. preparar entradas e interpre-
tar las salidas de un sistema o
componente”.
De acuerdo con esta definición, en el concepto de usabilidad intervienen las

siguientes características:
• La eficacia, esto es, la posibilidad de que las personas puedan llevar a cabo
y completar determinadas tareas con el producto o el sistema, y de que
logren sus propios objetivos;
• la eficiencia, entendida como la posibilidad de que las personas comple-

ten tareas y logren objetivos “de la mejor manera posible”, sin que les su-
ponga un esfuerzo ni cantidad de tiempo excesivo o desmesurado, y, fi-
nalmente,
• la satisfacción de los usuarios respecto a la facilidad de uso del producto

o sistema que utilizan.
Por otro lado, esta definición muestra que la usabilidad se ve afectada por tres
elementos, principalmente:
• Las características de los usuarios –si son noveles o expertos en el uso del
producto o sistema, si han recibido algún tipo de formación o entrena-
miento para utilizarlo, etc.
• Los objetivos que se han propuesto alcanzar los usuarios con el producto
o sistema, y el grado en que estos objetivos son alcanzados mediante el
uso del producto o sistema.
• El contexto o situación de uso en que los usuarios usan el producto o sis- Olvido del contexto de uso
tema.
A pesar de que el contexto de
uso es un condicionante muy
Hay que hacer notar que un producto digital, un software o un sistema in- importante de la usabilidad, a
veces se deja de lado, lo que
teractivo no tienen usabilidad intrínseca, sino que esta se halla fuertemente puede llevar al fracaso de los
productos o sistemas que se
condicionada por su capacidad para ser usados por unos usuarios concretos comercializan.
en un contexto particular.
Nigel Bevan y
Una de las personas que ha trabajado en algunos de los estándares internacio- los estándares
nales que hemos mencionado y las definiciones correspondientes de usabili- internacionales
dad es Nigel Bevan. Su aportación profesional ha resultado clave en el desa- Nigel Bevan ha desarrollado
rrollo y la difusión de la usabilidad. Bevan ha elaborado numerosas publica- un trabajo importante en la
definición de los estándares
ciones, que podemos encontrar en su web. internacionales que abordan
la usabilidad, así como en su
adopción y difusión. El web
http://www.nigelbevan.com
recoge un abanico de recur-
sos elaborados por él.
Como acabamos de ver, la interacción persona-ordenador es el área de cono- La usabilidad en el

cimiento que estudia cómo los dispositivos y sistemas que utilizamos pueden comercio electrónico
hacernos la vida más fácil, y convertir nuestra interacción con la tecnología en En el contexto del comercio
una experiencia satisfactoria. Esto es todo un reto que implica diseñar y cons- electrónico, este objetivo se
traduce en diseñar y construir
truir sistemas que sean “usables”, es decir, que tengan en cuenta al usuario y establecimientos virtuales que
tienen en cuenta a sus usua-
que se adapten a sus necesidades, y no al revés. Por decirlo de otro modo, el rios, y que convierten los dife-
rentes procesos y transaccio-
objetivo es hacer que la interacción de las personas con la tecnología no deba nes en una experiencia positiva
ir acompañada de un complicado manual de instrucciones. para ellos.
Hay toda una serie de estándares internacionales que proponen metodologías

Recopilación de
y pautas para lograr la usabilidad. El seguimiento de estos estándares siempre estándares de usabilidad
es aconsejable, no solo porque recogen aspectos que ya han sido probados y
Encontraréis una compila-
que, por lo tanto, favorecen el desarrollo de productos digitales usables, sino ción de estándares relacio-
nados con la usabilidad que
porque también ayudan a la automatización y sistematización de procesos, a os pueden resultar de utili-
la reducción de costes y a la reutilización, entre otros muchos beneficios; pero dad en la dirección: http://
www.usabilitynet.org/tools/
sobre todo porque reducen el esfuerzo de aprendizaje por parte de los usuarios r_international.htm.
y favorecen su satisfacción.
Algunas ventajas del uso de estándares
Un ejemplo que ayuda a entender las ventajas del uso de estándares puede ser el del
sentido de conducción de los vehículos. En la mayor parte de los países, los usuarios
conducen habitualmente por su derecha. Pero si alguna vez han tenido que ir a un país
donde el sentido de la conducción es por la izquierda, seguramente se han encontrado
con dificultades para acostumbrarse, o quizá ni siquiera lo han hecho. Su conducción
puede haber sido, incluso, peligrosa.
A menudo al hablar de usabilidad se deben tener en cuenta las interfaces de Interfaz de usuario
usuario. La interfaz�de�usuario es todo aquello diseñado e incorporado en un
En el contexto de este módu-
ordenador o un dispositivo con el que una persona puede interactuar. Las in- lo didáctico usaremos la expre-
terfaces gráficas de usuario aprovechan la capacidad gráfica de los ordenadores sión interfaz de usuario para re-
ferirnos a los elementos gráfi-
para presentar una interfaz amigable y fácil. cos o textuales que aparecen
en una pantalla de un ordena-
dor u otro dispositivo informá-
Algunas interfaces de usuario conocidas tico y que permiten a los usua-
rios interaccionar con su siste-
Los sistemas operativos actuales usan una interfaz gráfica de usuario que sigue la metá- ma informático.
fora del escritorio. De este modo se puede ver, entre otros elementos, los directorios re-
presentados con el dibujo de una carpeta, y el lugar donde borrar archivos y carpetas
con una papelera.
1.1. Usabilidad y experiencia de usuario
A pesar de que, como acabamos de ver, uno de los objetivos principales de

la usabilidad es la satisfacción del usuario, muchas veces se había entendido
que la satisfacción era un elemento complementario a la eficacia y eficiencia
del producto digital interactivo, o se daba por hecho que, si los productos
funcionan relativamente bien y son fáciles de usar, ya satisfacen a los usuarios.
Pero este enfoque se quedaba corto a la hora de diseñar productos digitales
que realmente se adaptaran a las necesidades de los usuarios, dado que no
tiene en cuenta aspectos clave del éxito de los productos, como por ejemplo
el comportamiento y las experiencias subjetivas de las personas. Esto ha dado
pie a la aparición del concepto de experiencia�de�usuario�(UX), que tiene en

cuenta precisamente que la interacción con el producto digital ha de generar
sensaciones y emociones positivas.
Con el concepto de UX se incorporan, por lo tanto, aquellos aspectos percep-

tuales y emocionales que a menudo no se consideraban en el concepto original
de usabilidad. El objetivo de la UX no solo es que el producto digital interac-
tivo sea eficaz y eficiente en su funcionamiento, es decir, que sea útil y fácil de
usar; también busca que la interacción con el producto genere percepciones y
emociones positivas y que el usuario esté satisfecho. El concepto de UX tiene
su origen en el campo del marketing y el comportamiento del consumidor, y
se ha instaurado en el ámbito de la usabilidad y la interacción persona-orde-
nador como un término de referencia, dando lugar a departamentos, proyec-
tos y ofertas de trabajo.
Confusión entre usabilidad y experiencia de usuario
En internet detectaréis que existe una cierta confusión sobre los conceptos de usabilidad
y experiencia de usuario. A veces la UX se presenta erróneamente como la sustituta de
la usabilidad, o se confrontan estos dos conceptos. No obstante, la usabilidad es parte
de lo que hoy día se conoce como UX, de aquí que el concepto de UX ya incluya la
usabilidad, además de otros aspectos. Como consecuencia de esto, el término UX se está
imponiendo al de usabilidad.
La UX se refiere a la experiencia subjetiva que obtiene un usuario cuando in-

teractúa con un sistema o producto digital interactivo, en condiciones especí-
ficas. Esta experiencia se refiere a las percepciones y emociones del usuario al
utilizar el producto, sus expectativas y su nivel de satisfacción, y está influen-
ciada por el contexto de uso y por factores individuales, sociales, culturales y
del propio producto digital. La experiencia de usuario en ocasiones también se
denomina experiencia de uso, y es uno de los factores clave a la hora de dise-
ñar y poner en marcha servicios de comercio electrónico. Tanto la usabilidad
como la UX se fundamentan en el�diseño�centrado�en�el�usuario, y su estudio
se aborda en el ámbito de la disciplina de interacción persona-ordenador. No
son solo atributos de calidad de un producto digital, también son un proceso,
una metodología para el diseño y evaluación de productos.
La usabilidad y UX, además de ser atributos de calidad de un producto

digital o un sistema interactivo, en nuestro caso de un establecimiento
virtual, también se han de ver como un proceso o una metodología
para el diseño y la evaluación. Por esa razón, normalmente se habla
de procesos de ingeniería de la usabilidad o UX, o también de diseño
centrado en el usuario.
1.2. La experiencia de usuario y el comercio electrónico
Hemos hablado hasta ahora de la interacción persona-ordenador, la usabilidad

y la UX. Pero, llegados a este punto, nos podemos cuestionar si la usabilidad
y la UX son realmente importantes en el comercio electrónico. La respuesta a
esta pregunta es claramente afirmativa, dado que la usabilidad y la UX son un
factor clave del éxito de un proyecto de comercio electrónico.
Un establecimiento virtual que no tenga en cuenta la usabilidad y la UX

de su web puede fracasar, a pesar de que este tenga una buena aparien-
cia, ofrezca un buen surtido de productos y preste un buen servicio.
Veamos, a continuación, algunos casos ilustrativos de buenas prácticas en el

ámbito de la usabilidad y la UX.
El buscador de Google se ha convertido en un ejemplo paradigmático de sitio

web que combina la prestación de uno de los mejores servicios de búsqueda
con la facilidad de uso y una buena UX. Es interesante hacer notar que la
simplicidad y textualidad de su interfaz de usuario no provocan una falta de
funcionalidad y utilidad.
Simplicidad y textualidad, las características del diseño del buscador de

Iconografía de un sitio
Google
web
Google es un buen ejemplo de empresa centrada en proporcionar un producto adecuado
a las necesidades de los usuarios con la máxima facilidad de uso para ellos. No solo son La iconografía de un sitio web
hace referencia, como su nom-
los mejores haciendo búsquedas en internet, sino que hacen que buscar sea una actividad
bre indica, al uso de iconos pa-
que todo el mundo puede llevar a cabo sin problemas. ra representar determinados
significados.
Google ha aplicado una filosofía de simplicidad y textualidad a los procesos de búsque-
da. Simplicidad en el sentido de que su interfaz de usuario invita a buscar y solo deja
buscar. Por lo tanto, favorece la ejecución de acciones orientadas a las necesidades de
cada usuario evitando que este lleve a cabo acciones que le puedan apartar de sus obje-
tivos. Así, propone una interfaz simple para hacer búsquedas sencillas (como vemos en
la figura siguiente).
Y si lo que el usuario quiere hacer son búsquedas avanzadas, Google le proporciona un

lenguaje de búsqueda complejo que puede utilizar en su interfaz principal (que es la que
se recoge en la figura anterior) o, si desconoce el lenguaje de búsqueda, siempre puede
usar una interfaz más compleja (como la que vemos en la figura siguiente).
Por otro lado, la textualidad de la interfaz de Google favorece que, tras haber elegido una
buena terminología, los usuarios no necesiten aprender el sentido y el significado de una
iconografía que, seguramente, solo tendría sentido en el sitio web de Google.
Yahoo!, Amazon y Apple (inicialmente con su combinación del iPod con la Webs y aplicaciones
tienda de música iTunes y actualmente con el iPhone, el iPad y su tienda de
Recordemos que no todas las
aplicaciones) son otros ejemplos de establecimientos y productos que han te- iniciativas de comercio electró-
nido éxito; no solo porque su producto es fácil de usar, sino también porque nico se presentan a sus usua-
rios mediante un sitio web.
han sido capaces de crear una buena experiencia de usuario. Las aplicaciones para disposi-
tivos móviles (apps) también
pueden actuar como estableci-
mientos virtuales alternativos
En cambio, también podemos encontrar ejemplos de iniciativas en línea que al sitio web o, incluso, como
no han cuidado los elementos relacionados con la usabilidad y la UX. Hay únicas maneras de acceder a
este. Así, podemos considerar
sitios web que ofrecen bienes y servicios que pueden interesar a los usuarios los sitios web y las apps como
dos maneras diferentes y alter-
pero que los presentan de manera poco clara e intuitiva, y esto provoca que se nativas de acceder a productos
confundan, se desorienten y que acaben abandonando el sitio web y visitando en línea.
el de un competidor. Este es un aspecto singular del comercio electrónico, y

es que los usuarios están solo a un clic de distancia de otros establecimientos
virtuales.
La importancia de los ejemplos fallidos
A pesar de que este texto, voluntariamente, no comenta en detalle malos ejemplos de

usabilidad y UX, hay que decir que siempre es interesante fijarse en ellos, dado que ayu-
dan a aprender y a evitar posibles errores.
Por ejemplo, hace un tiempo, muchos sitios web de comercio electrónico incorporaban
en su primera página una animación que tardaba en cargarse, que no aportaba utilidad
a los usuarios y que, incluso, les molestaba por el hecho de tener que esperar a que se
cargara para continuar navegando y porque los distraía de sus verdaderos objetivos. Del
mismo modo, también existe ahora la tendencia a mostrar una ventana emergente pi-
diendo al usuario que se dé de alta en el boletín de noticias, o sugiriendo que contacte
con un asistente de ventas vía chat o cualquier otro servicio del sitio web. Normalmente
las ventanas emergentes no solicitadas son intrusivas para los usuarios y les proporcionan
una mala experiencia de navegación.
Otro ejemplo de error es lo que podríamos considerar un exceso de creatividad en la

iconografía. Muchos sitios web han desarrollado una iconografía que, si bien puede ser
muy artística o creativa, hace que los usuarios no entiendan el significado de los iconos y
de los símbolos. Tal como hemos visto antes al hablar de Google, la textualidad también
puede dar una imagen innovadora del sitio web además de ser de gran ayuda para los
usuarios.
En definitiva, es importante desarrollar cierta sensibilidad en torno a la usabi-

lidad y la UX: consultar bancos de recursos, documentarse sobre buenas prác-
ticas y aprender tanto de los éxitos como de los errores de diferentes sitios
web. Eso sí, hay que aplicar los estándares y las metodologías establecidas con
rigor. Y es que se puede caer fácilmente en la trampa de colocar la usabilidad
y la UX solo en el terreno de las buenas intenciones y traducirla en estética
y diseño gráfico, olvidándose de los usuarios: quiénes son, qué quieren, qué
saben hacer, qué funcionalidades necesitan, qué utilidad les aportan las fun-
cionalidades que se han diseñado para ellos, etc.
Como vemos, a pesar de que la usabilidad y la UX incorporan elementos pro-

piamente tecnológicos, tienen en cuenta especialmente a los usuarios y los in-
volucran. Además, la relación de las personas con la tecnología es un proceso
dinámico, que se retroalimenta a medida que los individuos piden a la tecno-
logía que les proporcione la posibilidad de satisfacer nuevas necesidades o de
satisfacer más adecuadamente necesidades ya existentes. A menudo, también
la tecnología no solo ofrece las utilidades que se le piden, sino que, incluso,
amplía las posibilidades de lo que se venía haciendo, lo que provoca que se
le requieran nuevas utilidades.
En este círculo de oportunidades que ofrece la tecnología no se tiene que ol-

vidar que el objetivo de la interacción persona-ordenador es hacer que la tec-
nología se adapte a las personas y no al revés. Así, a la hora de diseñar sitios
web y apps de comercio electrónico se ha de tener en cuenta no solo la tec-
nología que tendrá que haber detrás, sino también las personas que deberán
utilizarla, sus necesidades y deseos, las emociones que suscitará, la navegación
e interacción con el establecimiento virtual, etc. Solo así se conseguirá que los
usuarios experimenten una verdadera experiencia satisfactoria.
1.3. Diseño UX, diseño de interfaces y diseño de interacción
Cuando hablamos de productos digitales interactivos, interfaces, usabilidad y

UX, muchas veces se confunde el diseño de experiencia de usuario, el diseño
visual de las interfaces y el diseño de interacción.
Diseño es un término muy amplio y a veces impreciso. Los roles y perfiles re-
lacionados con el diseño varían desde áreas tan diferenciadas como son el di-
seño editorial (libros, revistas), el diseño industrial (objetos, muebles, maqui-
naria) o el diseño en tecnología (interfaces, webs, apps). En este último caso,
gracias al gran impulso que ha experimentado la web y los smartphones, con
sus tiendas de apps, el diseño en tecnología ha especializado sus roles y tareas,
lo que ha dado lugar a etiquetas como por ejemplo diseñador de interfaces,
diseñador UX o diseñador de interacción. Veamos ahora el ámbito de actua-
ción de cada uno de ellos para el contexto del comercio electrónico.
1.3.1. Diseño UX
Los diseñadores UX se ocupan principalmente del funcionamiento adecuado

del establecimiento virtual y de que este genere las sensaciones deseadas entre
sus usuarios. Estos diseñadores se centran en satisfacer las necesidades y los
requisitos de los usuarios; por eso construyen la lógica del establecimiento
teniendo siempre en cuenta a los usuarios que lo utilizarán.
El diseño UX se fundamenta en el diseño centrado en el usuario y despliega

el proceso de diseño y desarrollo del establecimiento virtual desde una pers-
pectiva integral. Por ello involucra a los usuarios finales (en nuestro caso, los
clientes de un establecimiento virtual de comercio electrónico) en la investi-
gación de requisitos, el diseño y la evaluación.
1.3.2. Diseño de interfaces
Los diseñadores de interfaces se encargan del diseño visual de los elementos Terminología en inglés
de la interfaz, es decir, de aquello que los usuarios ven cuando utilizan el web
El diseño de interfaces se llama
o la app del establecimiento. Se trata de un diseño que comunica visualmente en inglés UI design (user inter-
mediante elementos gráficos, como por ejemplo iconos, botones y otras op- face design).
ciones de la interfaz. También se ocupa de la imagen de marca de la empresa

en las iniciativas de comercio electrónico. Así, los diseñadores de interfaces se
encargan del diseño de cada página del sitio web y de cada pantalla de la app
con las que interaccionan los usuarios, velando porque sigan las secuencias o
procesos definidos por los diseñadores UX.
En el ámbito profesional, la diferencia entre diseñadores de interfaces y dise-

ñadores UX cada vez es más pequeña. Así, el profesional que se dedica a la
UX también suele tener competencias de diseño visual y ocuparse del diseño
de las interfaces.
1.3.3. Diseño de interacción
Podemos decir que el ámbito de competencia del diseñador de interacción se Terminología en inglés
sitúa entre el diseño UX y el diseño de interfaces. Su papel es similar al del di-
En inglés el diseño de interac-
señador UX, a pesar de que habitualmente se ocupa de un área más específica: ción se denomina interaction
el análisis y diseño de las interacciones de los usuarios con el establecimiento design y se abrevia con el acró-
nimo IxD.
virtual.
El diseñador de interacción tiene muy en cuenta la perspectiva de los usuarios,

dado que son ellos quienes realmente interaccionan con el establecimiento
virtual. Por esa razón estudia y diseña el proceso que tiene lugar entre las per-
sonas y el establecimiento: las acciones que llevan a cabo en la interfaz del
sistema interactivo, las respuestas que reciben del sistema y las percepciones
que se forman sobre estas respuestas –que normalmente se les presentan en
pantalla.
Dado su foco en los usuarios, los diseñadores UX tienen competencias de di-

seño de interacción. A menudo, los diseñadores de interacción también se de-
dican al diseño UX.
1.4. Beneficios de la usabilidad y la experiencia de usuario
El primer beneficio de la usabilidad y la UX es la satisfacción del usuario: por-

que constata que puede llevar a cabo de manera eficaz y eficiente los objetivos
de compra que se había propuesto, porque disfruta consultando los conteni-
dos en línea, porque aprende a utilizar un determinado producto, etc. Esto
aporta numerosas ventajas a la empresa promotora del sitio web o la app de
comercio electrónico, que seguramente se beneficiará de una mayor afluencia

de público a su sede, más cifras de ventas, mejor imagen para la marca del
establecimiento y la de sus productos, etc.
Un sitio web usable
Si un sitio web es usable, los usuarios pueden llevar a cabo las tareas que se han propuesto
de manera eficaz y eficiente, sin frustraciones, con una tasa de errores baja (y si hay errores
les resultará sencillo corregirlos y evitarlos), con un pequeño esfuerzo de aprendizaje
para operar en el establecimiento virtual. Todo esto hará que estén más satisfechos y esta
satisfacción supondrá mayores dosis de confianza hacia el establecimiento virtual y sus
productos, así como una mejora en su imagen de marca. Además, se producirá una mayor
afluencia de público al sitio web, un incremento de los procesos de compra finalizados,
de las visitas de repetición, etc.
Es habitual que, en el marco de un proyecto de diseño de un sitio web de Institucionalización de la

comercio electrónico, se deban justificar los recursos humanos y materiales experiencia de usuario
que se han de dedicar a la usabilidad y UX, lo que se conoce como institucio- La institucionalización de la ex-
nalización de la experiencia de usuario. Habitualmente, la justificación de la periencia de usuario es la argu-
mentación necesaria para im-
inversión en la usabilidad y UX se establece a partir del retorno esperado de plantar los procesos relaciona-
dos con la UX en el desarrollo
esta inversión. de proyectos en una empresa.
Inversión en usabilidad y UX
La inversión en usabilidad y UX será menor si se tiene en cuenta desde el primer momen-

to del diseño del proyecto de comercio electrónico. Y no solo la inversión será menor,
sino que el retorno de la inversión será todavía mayor, dado que, si se hace un buen di-
seño inicial, se evitará tener que corregir aspectos cuando el proyecto esté más avanzado.
Algunos de los indicadores que se pueden utilizar para medir la usabilidad y Ved también
UX del sitio web o la app y justificar las inversiones para mejorarlos son los
En el subapartado 2.2 de es-
siguientes: el tiempo necesario para llevar a cabo una tarea (como una búsque- te módulo veremos que la in-
da, una compra, etc.), la ratio de procesos finalizados por los usuarios sobre el corporación de la usabilidad y
la UX en los diferentes proce-
total de procesos iniciados, la tasa de errores cometidos por los usuarios en los sos reduce costes y plazos de
desarrollo y mejora el produc-
diferentes procesos, y el número de accesos a la ayuda o al servicio de atención to final.
al cliente. Midiendo estos aspectos a partir de una muestra bastante amplia de
usuarios se pueden detectar inconsistencias en el diseño del sitio web, obser-
var patrones de error frecuentes y obtener otras informaciones que serán de
ayuda a la hora de identificar posibles mejoras para el establecimiento virtual.
El retorno de los esfuerzos en usabilidad y UX puede ser muy amplio y variado,

dado que hay varios elementos, de difusión y prestigio, que se verán afectados
positivamente por una buena UX. Por un lado, una buena UX provocará un
aumento del tráfico del web o del uso de la app, del número de visitas (nuevas
o reincidentes), de la retención de estas y de la visibilidad en los resultados de
los buscadores. Por otro lado, una buena UX incrementa la credibilidad y el
prestigio de la marca, ya que aumenta la satisfacción general de los usuarios,
la confianza en el sistema y las recomendaciones y opiniones favorables efec-
tuadas por los clientes.
Sea cual sea la dimensión del equipo encargado de la usabilidad y la UX, es

importante que no actúe de manera independiente respecto a otras áreas de la
empresa. La usabilidad y la UX deben desarrollarlas, por lo tanto, equipos de
personas que actúan de manera coordinada con otras áreas de la organización
y, especialmente, con las de I+D y marketing.
1.5. Dispositivos, interacción y comercio electrónico
En los últimos años, los dispositivos móviles se han convertido, para muchas
personas, en el primer modo de acceso a internet y, en consecuencia, al co-
mercio electrónico. Los teléfonos y dispositivos móviles inteligentes y conec-
tados a internet, también conocidos como smartphones, han revolucionado la
manera en que nos comunicamos entre nosotros y también como interaccio-
namos con la red y sus contenidos y servicios (y por lo tanto con el modo
como interaccionamos con webs y apps de comercio electrónico).
Los dispositivos móviles presentan retos similares a los ordenadores de escri- Ved también
torio en relación con la usabilidad y la UX, de ahí que los principios generales
Las particularidades de los dis-
de usabilidad y UX sean extensibles a estos dispositivos. Aun así, en muchos positivos móviles se retoman
casos, los procesos y las técnicas concretas que se aplican requieren adecuarse más adelante, en el apartado
4 de este módulo, cuando es-
a las particularidades de los dispositivos móviles, dado que estos presentan tudiemos las principales reco-
mendaciones de usabilidad y
retos específicos y significativos que hay que tener en cuenta. Algunas de sus UX de aplicación al comercio
electrónico.
particularidades son la medida de la pantalla y, en general, las características
del hardware del dispositivo (tamaño, peso, batería, etc.); el contexto de uso
(a veces más hedónico y ubicuo); sus capacidades multimedia; la interacción
táctil que proporciona; las diversas funcionalidades que ofrece (navegación
web, cámara de fotos, mapas, etc.); las alternativas tecnológicas para el diseño
del establecimiento virtual (sitio web móvil, app), y la frecuencia y duración
habitual de las sesiones.
2. Conocer al usuario: el diseño centrado en el usuario
Tal como veremos en este apartado, conocer quiénes y cómo son los usuarios es
esencial para desarrollar un proyecto de comercio electrónico que dé respuesta
a sus necesidades. El diseño centrado en el usuario propone considerar una
serie de etapas y recomienda poner en marcha diversas actividades, métodos
y prácticas en cada una de esas etapas. Todo esto con el objetivo de desarrollar
proyectos que tienen muy en cuenta a los usuarios y sus necesidades, y donde
la experiencia de usuario es un factor clave.
A pesar de que el diseño centrado en el usuario incorpora la palabra diseño en ¿Diseño centrado en el
su nombre, esto no significa que sea sinónimo de diseño gráfico. Y es que el usuario y diseño gráfico?
diseño centrado en el usuario hace referencia al proceso por el que se desarrolla El diseño de un sitio web cen-
un producto digital o un sistema interactivo. Eso sí, según sea el proyecto que trado en el usuario no consis-
te solo en hacer su diseño grá-
se desarrolle, será necesario llevar a cabo actividades de diseño gráfico. fico.
2.1. Conocer al usuario
Uno de los principios fundamentales de la UX reside en la importancia de

conocer al usuario, al considerar que esto dirige el diseño del sitio web o la app
y hace que el proyecto se ajuste realmente a sus necesidades y particularidades.
En el comercio electrónico hay dos aspectos con importantes repercu-

siones en el ámbito de la usabilidad y la UX. El primero es que el propio
usuario es quien debe llevar a cabo todo el proceso de compra, desde
la selección del producto hasta la formalización de su pago, pasando
por la gestión del envío. El segundo aspecto importante es que, cuan-
do el usuario necesita ayuda, habitualmente no tiene a un empleado o
dependiente a su disposición, sino que se puede decir que casi toda la
ayuda que recibe le llega por la usabilidad del sitio web o la app.
Independientemente de si los clientes son empresas o particulares, hay que La usabilidad depende de
tener en cuenta que pueden presentar grandes diferencias en cuanto a su fa- los usuarios
miliarización con la tecnología digital y la navegación por internet. Además, Se puede afirmar que la usa-
habrá usuarios que conozcan el significado de diferentes iconografías y usua- bilidad de un sitio web es es-
tablecida por los usuarios. Así,
rios que no; habrá usuarios de mayor o menor edad –con todo lo que esto por ejemplo, un sitio web pue-
de ser completamente usable
representa–, y no hay que olvidar que habrá usuarios que, debido a algún ti- para un grupo de usuarios de
una edad determinada y pue-
po de discapacidad, física o psíquica, prefieren el comercio electrónico como de resultar complicadísimo pa-
alternativa al comercio convencional. ra usuarios de una edad dife-
rente.
Cuando se habla de conocer al usuario y diseñar sobre la base de sus necesi-

dades, podemos pensar que no es posible diseñar un sitio web o una app de
comercio electrónico teniendo en cuenta a todos los clientes potenciales, con
toda su diversidad y el amplio abanico de necesidades y particularidades que
estos presentan. Y es cierto: habitualmente es difícil llevar a cabo un buen
diseño que se dirija a un amplio y diverso grupo de usuarios y, si se intenta,
normalmente el diseño que se obtiene resulta muy complejo y poco usable.
La solución a esta cuestión puede ir por dos vías. Una alternativa factible es
diseñar para la gran mayoría de los usuarios potenciales, a quienes se les pro-
porciona un diseño útil, y renunciar a una pequeña proporción del público
objetivo. Otra solución, que económicamente es más costosa pero que suele
resultar más efectiva, consiste en desarrollar un diseño adaptado a cada seg-
mento de usuarios potenciales, ofreciendo entornos, itinerarios y tareas espe-
cíficas a cada usuario según el segmento al que pertenece. En este último caso,
cuanto más amplio es el rango de usuarios al que se dirige la empresa, más
compleja es la tarea de diseñar.
Ejemplo
Un ejemplo de diseño por perfiles de usuario son las teclas de acceso directo que ofrecen
los diferentes software o aplicaciones, así como el propio sistema operativo de los orde-
nadores. Si una persona no es experta en el uso de una aplicación informática, el sistema
basado en seleccionar con el ratón los comandos y acciones que se encuentran en los
menús de la aplicación le puede resultar muy útil, dado que no hace falta que recuerde
comandos. Cuando, pasado el tiempo, una persona se convierte en un usuario avanzado
de la aplicación, puede aprender los accesos directos de teclado que permiten efectuar
con rapidez acciones conocidas y memorizadas sin tenerlas que ejecutar seleccionando
con el ratón las opciones del menú.
Un aspecto que a menudo se olvida a la hora de conocer al usuario es el con-

texto�de�uso en el que tiene lugar su interacción con el sitio web o la app. De
hecho, el contexto de uso condiciona la usabilidad tanto o más que el diseño
y las características del propio establecimiento virtual. Así, el contexto puede
determinar que un diseño que a priori parecía adecuado no lo sea tanto cuando
el establecimiento virtual está en marcha.
Ejemplo
Se ha comprobado que el contexto de uso es muy importante a la hora de ofrecer servicios

mediante el teléfono móvil. Así, en los servicios de banca móvil se ha de tener en cuenta
que, a pesar de que a los usuarios les gusta ser informados de su saldo y movimientos en
cualquier lugar y a cualquier hora (en el trabajo, en casa, pero también en medio de la
calle, en la playa, en un bar, etc.), normalmente prefieren no hacer pagos o transferencias
desde establecimientos o espacios públicos. Así nos encontramos con que, a pesar de
que se haya diseñado un servicio de transferencias bancarias fácil de usar en dispositivos
móviles, no se presenta en un contexto de uso adecuado.
En el comercio electrónico resulta de especial importancia saber cómo las per-

sonas realmente navegan por el web o utilizan la aplicación, por lo que resulta
necesario dedicar tiempo y recursos a observarlas navegando e interaccionan-
do con el establecimiento virtual, en sus entornos habituales. Aquí se pueden
tener en cuenta aspectos relacionados con el comportamiento de los usuarios,
como sus estrategias de navegación, su grado de implicación en la lectura de

la información que se les presenta o la manera como toman las decisiones que
culminan con una acción de compra.
2.1.1. Orientaciones del comportamiento de navegación
Los usuarios orientan sus decisiones de navegación según una o más estrate-
gias concretas, que, además, pueden ir cambiando con el tiempo. Muchas ve-
ces los propios usuarios no son conscientes de que están navegando e interac-
cionando siguiendo una determinada orientación. Aun así, este es un aspecto
importante que hay que tener en cuenta. Habitualmente, las diferentes orien-
taciones del comportamiento de navegación se clasifican en dos grandes gru-
pos:
• Comportamientos� dirigidos. Los comportamientos dirigidos son los

adoptados por los usuarios cuando se mueven buscando un determina-
do producto o una información. En este caso, saben bien lo que quieren
y orientan su navegación a la consecución de este objetivo. Es habitual
que estos tipos de comportamientos hayan sido desencadenados por mo-
tivaciones funcionales o utilitarias, y que los usuarios consideren la na-
vegación como una tarea, una obligación a la que quieren dedicar el me-
nor tiempo posible hasta conseguir sus objetivos. Cuando esto sucede, los
usuarios intentan encontrar los productos o la información deseados rá-
pidamente y de la manera más eficiente.
• Comportamientos� exploratorios. Los comportamientos exploratorios

son los que predominan en los usuarios cuando navegan para acceder y
poner en común experiencias personales, para evadirse o, simplemente,
para pasar el tiempo; de manera que se implican en actividades en línea
solo por el placer que estas les proporcionan. A pesar de que estos com-
portamientos pueden acabar en una compra, este objetivo no orienta ne-
cesariamente sus interacciones y decisiones de navegación. En estos casos,
las motivaciones que impulsan el comportamiento de los usuarios son de
tipo hedónico o emocional.
El establecimiento virtual puede incorporar un conjunto de recursos y elemen-

tos para asegurar que, sea cual sea la orientación del comportamiento de cada
persona en el establecimiento, no encuentre dificultades en la navegación y
su visita sea agradable y satisfactoria. Esto se podrá traducir en elementos de
búsqueda y acceso rápido a los productos para aquellas personas que quieren
efectuar una compra concreta y predeterminada (guiadas por comportamien-
tos eminentemente dirigidos); así como en elementos de navegación, explo-
ración del catálogo de productos y entretenimiento para aquellos usuarios que
entran solo por curiosidad, que miran si el establecimiento puede tener algo
de su interés (comportamientos exploratorios).
2.1.2. Implicación en la lectura de la información
Otro elemento clave en el comportamiento de los usuarios es que apenas leen No hay que leerlo todo
los textos, y se limitan a darles un vistazo (también se dice que los “escanean”).
Muchos usuarios acceden a in-
Eso sí, en la práctica el comportamiento de exposición a la información puede ternet con prisa, dado que tie-
variar dependiendo de las características de los usuarios, de la tipología de los nen la percepción de que les
ayuda a ahorrar tiempo. Tam-
establecimientos virtuales que visitan, o del interés que les despierta. bién saben que normalmen-
te no hay que leerlo todo por-
que a menudo hay mucho tex-
to complementario revistiendo
2.1.3. Toma de decisiones de navegación las ideas principales. Además,
la calidad de las pantallas de
los ordenadores no siempre fa-
Muchas veces los usuarios no identifican ni evalúan con detenimiento todas cilita una lectura cómoda y re-
lajada de los textos.
las opciones posibles antes de decidir interactuar, sino que seleccionan rápi-
damente aquella opción que consideran más adecuada asumiendo un cierto
riesgo de equivocarse. Hay que tener en cuenta este hecho y diseñar un esta- Repetición
blecimiento virtual que facilite a los usuarios dar pasos atrás, tanto en su na-
Hay otro aspecto interesante,
vegación como en las tareas de compra que lleven a cabo. y es que cuando un usuario
descubre cómo llevar a cabo
una tarea o acción determina-
2.2. Diseño centrado en el usuario: definición y objetivos da, habitualmente ya no busca
una manera mejor de hacerlo.
Simplemente, considera que
aquello funciona y le sirve para
El diseño centrado en el usuario es, al mismo tiempo, una filosofía y un pro- lograr sus objetivos, así que se
ceso. Por un lado, es una filosofía, una orientación estratégica, que coloca a la limita a repetirlo en posteriores
ocasiones.
persona en el centro para desarrollar un producto o un sistema (un estableci-
miento virtual en nuestro caso) que sea adecuado a sus necesidades y requeri-
mientos. Por otro, se trata de un proceso de diseño que considera los factores
cognitivos de las personas y cómo estos intervienen en sus interacciones con
los productos o sistemas.
A pesar de que el concepto de diseño centrado en el usuario es aplicable al

desarrollo de cualquier tipo de producto, es en los productos con un fuerte
componente tecnológico (tanto de hardware como de software) donde tiene
una especial importancia, dado que es muy habitual que en su creación se
haga mucho más énfasis en las prestaciones técnicas que en otros aspectos que
pueden facilitar su uso.
El diseño centrado en el usuario persigue obtener información sobre los

usuarios, sus tareas y sus objetivos, y utilizar la información obtenida
para orientar el diseño y desarrollo de los productos y los sistemas.
De entre las diferentes informaciones que se consideran para crear productos

y sistemas centrados en los usuarios, destacamos las siguientes:
• ¿Quiénes son los usuarios del producto?
• ¿Cuáles son las tareas y los objetivos de los usuarios?

• ¿Cuál es el nivel de conocimiento y la experiencia previa de los usuarios

con la tecnología?
• ¿Cuál es la experiencia de los usuarios con el producto o con productos

similares?
• ¿Cuáles son las funcionalidades que los usuarios esperan del producto?
• ¿Qué información del producto pueden necesitar los usuarios? ¿De qué
manera la necesitarán?
• ¿Cómo piensan los usuarios que funciona el producto?
• ¿Cómo puede el diseño del producto facilitar los procesos cognitivos de

los usuarios?
El diseño centrado en el usuario puede mejorar la usabilidad y UX de los productos, sis-

temas y objetos cotidianos, desde sistemas de software sofisticados a aparatos de teléfono
móvil, y en general de cualquier objeto con el que las personas interactúan. Un buen
ejemplo de productos donde se han aplicado los principios del diseño centrado en el
usuario son algunas máquinas de pago de aparcamiento (también podemos encontrar
máquinas que nos sirven de ejemplo de mal diseño). En algunos aparcamientos se pue-
den encontrar máquinas donde efectuar fácilmente el pago de la estancia del vehículo,
que marcan todos los pasos que se deben dar. Así, se indica que se ha de introducir el
billete y se señala claramente dónde se ha de introducir, se informa de la cantidad que
se debe pagar, se muestran las modalidades de pago, dónde y cómo se tiene que hacer,
se devuelve el billete validado para la salida y se ofrece la posibilidad de pedir un com-
probante de pago.
El objetivo del diseño centrado en el usuario es que los productos y sistemas

que cree la empresa sean útiles, usables y satisfactorios para sus clientes po-
tenciales. Por lo tanto, el diseño centrado en el usuario está estrechamente
relacionado con la usabilidad y la UX. A continuación presentamos el proceso
y las etapas de las que consta el diseño centrado en el usuario, así como los
principales métodos y técnicas para desarrollarlo.
2.3. Proceso y etapas del diseño centrado en el usuario
A la hora de poner en marcha un proyecto de comercio electrónico, es muy

importante tener claro el proceso de diseño centrado en el usuario, organizar
adecuadamente las etapas de las que consta y definir las actividades, los mé-
todos y las técnicas que desplegaremos en cada una de las etapas. El conoci-
miento de los diferentes métodos y técnicas de usabilidad y UX, y sus venta-
jas e inconvenientes, nos permitirá elegir aquellos que mejor puedan cubrir
los objetivos del proyecto de comercio electrónico y, consecuentemente, nos
permitirá definir qué métodos y técnicas concretas se utilizarán en cada etapa.
Hay un estándar internacional (la norma ISO 13407, dedicada al proceso de Modelos alternativos para
diseño de sistemas interactivos) que establece las bases sobre las que se fun- el diseño centrado en el
usuario
damentan muchas de las metodologías para el diseño centrado en el usuario.
Este estándar define un proceso genérico para la creación y el desarrollo de En la literatura académica so-
bre el diseño centrado en el
productos y sistemas que consta de hasta cuatro etapas diferentes. El mode- usuario y la UX se pueden en-
contrar otras propuestas dife-
lo, sin embargo, no establece las técnicas o métodos concretos que habrá que rentes para desarrollar el pro-
desarrollar en cada una de las etapas. Las distintas fases son las siguientes: ceso de diseño centrado en el
usuario, así como recomenda-
ciones específicas para llevarlo
a cabo. Algunas instituciones y
1)� Especificación� del� contexto� de� uso: identificación de las personas que empresas relacionadas con el
desarrollo de software también
presumiblemente utilizarán el producto o sistema, y las condiciones en las que han definido sus propios mo-
lo usarán. delos del proceso, que utilizan
en sus proyectos.
2)�Especificación�de�requisitos: identificación de las necesidades de los po-

tenciales usuarios del producto o sistema, de sus requerimientos respecto al
producto o sistema, y de los objetivos con los que lo usarán.
3)�Creación�y�desarrollo�de�soluciones�de�diseño: diseño propiamente dicho

del producto o sistema, plenamente adaptado al contexto y a los requerimien-
tos que se han identificado previamente.
4)� Evaluación� de� los� diseños: validación de la adecuación del producto o

sistema diseñado para las personas que deberán utilizarlo, y de acuerdo con el
contexto y los requerimientos que condicionarán su uso.
El diseño centrado en el usuario
Como se puede ver, el diseño centrado en el usuario proporciona un modelo de proce-

so constituido por unas fases que podemos denominar etapas metodológicas. También
ofrece una serie de mantras para no olvidar cuál es el objetivo. Algunos de estos recorda-
torios son, en inglés: “keep it simple”, “user centered”, “know the user”, “I’m not the user”
o “the designer is not the user”. Muchos profesionales del UX y del diseño centrado en el
usuario tienen expuestas estas frases en las paredes de su puesto de trabajo para tener
siempre presente a quién orientan sus esfuerzos.
En cada una de las etapas de trabajo que configuran el modelo de diseño cen-
trado en el usuario que se ha propuesto se puede hacer uso de diferentes méto-
dos y técnicas, y aun así conseguir los objetivos y resultados esperados. Según
se definan y concreten los métodos que se han de emplear en cada una de las
etapas, se pueden llevar a cabo actividades concretas también muy diferentes.
Con el objetivo de ofrecer una visión simplificada de los proyectos de diseño

centrado en el usuario, proponemos un proceso con tres etapas principales:
1) investigación y análisis,
2) diseño y
3) evaluación.
Para cada etapa proponemos una serie de actividades y métodos que efectuar
de manera iterativa. La iteración es clave en el proceso de diseño centrado en
el usuario, dado que nos permite evaluar los diseños a medida que se va avan-
zando, e ir construyendo un producto cada vez más adaptado a las necesidades
del usuario. Así, de la fase de evaluación podemos volver a la fase de diseño
para efectuar mejoras; o a la fase de análisis para replantearnos alguna idea
inicial del proyecto o para conocer todavía con más detalle las necesidades de
los usuarios.
Proceso de diseño centrado en el usuario
Sea cual sea el modelo que se siga para el proceso de diseño centrado en el
usuario (ya sea el modelo que acabamos de proponer o cualquier otro disponi-
ble entre el amplio abanico existente de modelos), es importante que se ajuste
tanto a los objetivos del proyecto de comercio electrónico como a las capa-
cidades y recursos del equipo de trabajo que lo llevará a cabo. Las etapas y
métodos del proceso que se han de seguir pueden variar en nombre, orden y
estructura de los propuestos aquí, pero lo que no debería cambiar es el hecho
de utilizar un proceso iterativo a través del cual se evalúa continuamente y se
diseña incrementalmente, y siempre involucrando a usuarios.
Los beneficios que se obtienen gracias a la incorporación del diseño centrado

en el usuario en un proyecto son múltiples y variados. A continuación reco-
gemos algunos destacados:
• Desarrollo más eficiente del producto, el establecimiento o el sistema. La

usabilidad y UX es más barata y fácil de incorporar si se hace en las prime-
ras etapas del desarrollo.
• Menores costes de apoyo y de documentación. Los productos usables son

más sencillos de documentar y requieren un nivel bajo de apoyo o ayuda.
• Mayor productividad y satisfacción de los equipos humanos de desarrollo,

gracias a que las técnicas del diseño centrado en el usuario ofrecen solucio-
nes a los dilemas de diseño a los que a menudo se enfrentan estos equipos.
• Mayor satisfacción de los usuarios. Los productos y establecimientos usa-

bles permiten a los usuarios llevar a cabo sus tareas de una manera más
eficaz y eficiente.
3. Métodos y técnicas de diseño centrado en el usuario
La experiencia de usuario es un requisito básico y fundamental de los produc-

tos digitales y sistemas interactivos y, consecuentemente, también es un as-
pecto clave para el establecimiento virtual. La manera de desplegar la UX es
mediante el diseño centrado en el usuario, que propone actividades y métodos
que permiten, por un lado, obtener la información necesaria para diseñar ex-
periencias y, por otro, averiguar en qué medida un producto digital interactivo
es capaz de generar experiencias de usuario satisfactorias.
La aplicación de las diferentes técnicas y métodos disponibles para obtener este Métodos de UX
tipo de informaciones y hacer evaluaciones depende de las etapas del proceso
En el ámbito profesional, los
de diseño centrado en el usuario. A continuación, tal y como se puede ver métodos y técnicas del diseño
en la figura siguiente, situamos estas técnicas y métodos en alguna etapa del centrado en el usuario y las ac-
tividades relacionadas se cono-
proceso, y las clasificamos en métodos de investigación y análisis, técnicas y cen, simplemente, como mé-
todos de UX.
métodos de diseño propiamente dicho, y tests y métodos de evaluación. No
obstante, cabe señalar que existen tests y métodos de evaluación que se pueden
desplegar en la fase de investigación y análisis; y, del mismo modo, algunos
métodos de investigación y análisis pueden ser útiles en la fase de evaluación.
Para cada proyecto, habrá que decidir, de manera coherente con los objetivos
que se hayan establecido, qué técnicas y métodos llevaremos a cabo y en qué
etapa concreta se usarán.
Diseño centrado en el usuario

3.1. Métodos de investigación y análisis
Los métodos y las técnicas de investigación y análisis, también denominados

métodos de indagación, suelen utilizarse en la etapa inicial del proyecto para
ayudar a especificar el contexto de uso del producto digital o sistema interacti-
vo y los requisitos que debe cumplir. Tienen por objetivo obtener información
de los usuarios sobre las actividades que estos llevarán a cabo con el producto
interactivo e identificar tanto las necesidades y los objetivos que querrán satis-
facer con el producto, como las dificultades que se les pueden presentar. Algu-
nas de las técnicas de investigación y análisis más utilizadas son las siguientes:
1)�Observación. Tal como indica su nombre, esta técnica consiste en la ob-

servación del comportamiento de los usuarios en su entorno habitual, ya sea
mediante profesionales que los observan o gracias a sistemas de grabación en
vídeo. Tiene la ventaja de que permite conocer el comportamiento y la inter-
acción de los usuarios con el sistema, en su contexto de uso habitual. Por otro
lado, su principal inconveniente se debe al hecho de que no se produce nin-
guna comunicación con el usuario, lo que dificulta averiguar sus actitudes e
intenciones.
En la actualidad se llevan a cabo observaciones tanto en lugares públicos como priva-

dos. El uso de dispositivos en lugares públicos suele estar muy condicionado por el con-
texto. No obstante, la observación en estos entornos proporciona información sobre la
interacción de las personas cuando utilizan los dispositivos móviles, qué hacen, cómo
los emplean, las apps que utilizan, etc. En otros lugares, como por ejemplo oficinas o
domicilios particulares, también se hacen observaciones, pero estas son más específicas
y proporcionan información más detallada. A la hora de utilizar la información obtenida
habrá que tener en cuenta el entorno donde se ha llevado a cabo la observación, y que
se desconocen los objetivos y percepciones reales de los usuarios.
2)� Entrevistas� en� profundidad� y� dinámicas� de� grupo. Las entrevistas en

profundidad y las dinámicas de grupo permiten obtener información de tipo
cualitativo. Se llevan a cabo entre muestras pequeñas y no representativas, y
utilizan guiones poco estructurados y abiertos. No persiguen la cuantificación
de las respuestas sino una comprensión exhaustiva de las necesidades, prefe-
rencias y experiencias de los usuarios con un producto o sistema. Al basarse en
la comunicación con el usuario, permiten recabar todo tipo de información
sobre comportamientos pasados, actitudes y percepciones. No obstante, la in-
formación recogida puede estar afectada por diferentes sesgos e influencias.
Hay una modalidad de entrevista en profundidad, denominada investigación

contextual, a la que se recurre a menudo en los procesos de diseño. Se hace en
el lugar físico desde donde el usuario accederá al web de la empresa, y consiste
en una entrevista mientras el usuario está navegando e interaccionando en
internet. Esta interacción proporciona la oportunidad de plantear cuestiones
que permitirán entender sus motivaciones y actitudes.
La investigación contextual es especialmente apropiada para descubrir y en-

tender el contexto de los usuarios y cómo su entorno influye en sus interac-
ciones. Sin embargo, presenta el inconveniente de requerir que el investigador
se desplace al domicilio o al lugar de conexión del usuario, y que invierta una
cantidad de tiempo considerable en su desarrollo.
3)�Monitorización�del�tráfico�web. Las técnicas de monitorización del tráfico Ved también

web constituyen una modalidad específica de observación del comportamien-
Tecnologías�para�medir�el
to de los usuarios, con la particularidad de que se llevan a cabo en línea, a tráfico�en�un�web
través de tecnologías que permiten recabar de manera automatizada los datos Las tecnologías que se pueden
utilizar para medir las visitas a
sobre la actividad del servidor donde está almacenado el sitio web, a menudo un recurso web y los itinerarios
de navegación de los internau-
sin que sea perceptible para el propio usuario. tas en el web, que se basan
en ficheros de registro (logs) y
marcadores de páginas, com-
El análisis del tráfico de visitas al sitio web permite conocer el comportamien- binados con cookies, se estu-
dian en el módulo “Almacena-
to de los usuarios, las funcionalidades que utilizan, el tiempo que destinan a miento y explotación de datos
visualizar cada página, la duración de cada visita y el itinerario de navegación en el comercio electrónico”.
que siguen, entre otros datos. Esta información es de utilidad para concebir y
mejorar la apariencia y la estructura del sitio web. No obstante, y al tratarse de
una técnica de observación, no permite conocer las motivaciones que llevan a
las personas a navegar por el web, sus opiniones y actitudes sobre los recursos
a los que acceden, etc.
Un método alternativo consiste en que el investigador pida al usuario que ela-

bore él mismo un diario en el que recoja sus acciones de navegación y compra
en línea durante un periodo de tiempo determinado. Esto permite conocer de
primera mano la experiencia de uso de un sitio web concreto, pero presenta
el inconveniente de que el usuario puede hacer anotaciones incompletas o
erróneas, o sesgadas por sus opiniones e ideas.
4)�Encuestas. Las encuestas se llevan a cabo entre una muestra representativa

de usuarios. Para obtener los datos, usan cuestionarios estructurados con pre-
guntas cerradas, que recogen las alternativas posibles de respuesta.
Ejemplo de uso de encuestas en el caso de BricoTodo
Una encuesta a los usuarios de un establecimiento virtual como BricoTodo puede pro-
porcionar información sobre sus preferencias, no solo sobre productos de ferretería sino
sobre diferentes aspectos del establecimiento virtual. Así, una encuesta puede aportar in-
formación sobre las marcas preferidas, si necesitan consultar vídeos demostrativos antes
de utilizar un producto, si son aficionados al bricolaje, etc.
Cuando se llevan a cabo encuestas en línea, se puede obtener información Ved también
cuantitativa de los usuarios de manera remota, sin incurrir en desplazamien-
Encuestas�en�línea
tos. Por otro lado, al igual que puede suceder con otras técnicas basadas en la
Las ventajas e inconvenientes
comunicación con el usuario (como las entrevistas y las dinámicas de grupo), de la encuesta en línea se ana-
lizan con más detenimiento en
se corre el riesgo de que lo que los usuarios dicen que hacen en internet y en la asignatura Marketing electró-
nico.
determinados sitios web no coincida con lo que realmente acaban haciendo.
3.2. Métodos y técnicas de diseño
La segunda etapa del diseño centrado en el usuario es la de diseño. En ella se Métodos de diseño
desarrollan hasta tres tipos de actividades y técnicas específicas que ayudan a participativo
orientar el diseño: arquitectura de la información, card sorting y prototipado. El card sorting y algunas mo-
dalidades de prototipado tam-
bién se conocen como méto-
3.2.1. Arquitectura de la información dos de diseño participativo.
Arquitectura de la información es el nombre que recibe el conjunto de activi-

dades mediante las cuales se define la estructura, navegación y terminología
de un web o una app. No es el objetivo de este material entrar en detalle en esta
materia, que por sí misma da lugar a un oficio, pero sí explicar los elementos
principales que hay que considerar para que el establecimiento virtual pueda
disponer de una buena arquitectura.
La arquitectura de la información hace referencia al análisis, la organización y

el etiquetado de la información que se presenta en un web o una app. Se ocupa
de organizar los contenidos de un producto, sitio web o aplicación; y también
de la estructura y los diferentes elementos de las pantallas, la navegación y
las rutas de acceso. Hay cuatro elementos principales que tiene en cuenta la
arquitectura de la información:
1) Los sistemas�de�organización, tal como indica su nombre, estructuran la

información o contenidos recogidos en un producto digital, un web o app.
Trabajan con esquemas de clasificación de la información (alfabéticos, crono-
lógicos, por tareas, tipologías, etc.) y con estructuras de la información (rela-
ciones lineales, jerárquicas o múltiples entre elementos).
2) El etiquetado define el lenguaje textual del producto digital interactivo y Ved también
sus interfaces.
Estudiaremos con más detalle
el etiquetado en el subaparta-
3) Los sistemas�de�navegación se refieren a la estructura del web o la app, la do 4.2 de este módulo.
ubicación de las opciones de navegación y la información que se debe propor-

cionar al usuario para que este sepa dónde se encuentra y hacia dónde puede ir.
Facilitan el acceso a unidades de información, la ubicación del usuario dentro
del entorno virtual y la ejecución de tareas. Se dice, con razón, que el sistema
de navegación es la brújula del usuario en un producto o sistema interactivo.
4) Los sistemas�de�búsqueda permiten al usuario acceder rápidamente a la in-

formación que necesita. Resultan especialmente indicados cuando la estructu-
ra de contenidos y/o la navegación son complejas y cuando el establecimien-
to de comercio electrónico dispone de muchos productos en catálogo. Habi-
tualmente se plantea como una vía de acceso a los contenidos alternativa a
la navegación. Cada iniciativa de comercio electrónico requiere ser estudiada
para ver si necesita dotarse de un sistema de búsqueda y, si es así, diseñarlo
adecuadamente. Para ello habrá que tener en cuenta los objetivos del proyecto
específico, y decidir:
a) la localización y tamaño de la caja de búsqueda (que es el lugar donde los

usuarios introducirán las palabras clave y otros posibles condicionantes de la
búsqueda);
b) si se proporciona una opción de búsqueda avanzada o solo una búsqueda

básica (basada únicamente en la introducción de palabras clave), y
c) el orden y la manera como se presentarán los resultados (por ejemplo, si

es necesario que cada resultado de búsqueda se acompañe o no de un breve
sumario).
3.2.2. Card sorting
El card sorting es una técnica propia de la arquitectura de la información que, Software para el card
debido a su importancia, estudiamos aquí de manera separada. Consiste en la sorting
ejecución de un ejercicio de ordenación y clasificación de conceptos. Se pide El card sorting se puede efec-
a los usuarios que ordenen y categoricen una serie de tarjetas que representan tuar con cartulinas de papel o
mediante un software especí-
conceptos. De la ordenación de estas tarjetas se obtiene una categorización fico. La ventaja de utilizar un
software es que este toma no-
que, habitualmente, se deduce que es la más natural para los usuarios y, por ta de manera automatizada de
la ordenación que efectúa ca-
lo tanto, la más adecuada para organizar la información.
da usuario, y hace los cálculos
y la suma de los resultados.
Ejemplo
Para diseñar el sitio web de un establecimiento virtual de ferretería, se podría hacer un

ejercicio de card sorting en el que los usuarios deberían ordenar los conceptos siguientes:
ofertas, servicios, pago, quiénes somos, búsqueda en el catálogo, herramientas recomen-
dadas, carrito de la compra, consultas, etc. El resultado del card sorting será una agrupa-
ción de estos conceptos que servirá para construir el sistema de menús y la navegación
por el establecimiento.
También podría ser interesante efectuar un ejercicio de clasificación y terminología de los

diferentes productos de ferretería que incluye el catálogo. De este modo, se sabrá cómo
dividir el catálogo en categorías y subcategorías y cómo se pueden denominar estas, y
también si los usuarios, por ejemplo, prefieren que se distinga entre productos nacionales
e internacionales o no.
Esta técnica tiene como ventaja principal su sencillez y bajo coste. Además,
resulta especialmente idónea en el campo del diseño y la construcción de si-
tios web, dado que permite descubrir la organización de la información más
adecuada para los usuarios, tanto para estructurar un menú de navegación co-
mo un catálogo de productos. En cambio, presenta la desventaja de que, para
obtener resultados generalizables al público objetivo del sitio web, se requiere

reclutar un cierto volumen de usuarios que lleven a cabo el ejercicio, lo que,
a veces, puede suponer un coste bastante elevado.
3.2.3. Prototipado
El prototipado consiste en la construcción de uno o varios modelos del sitio

web o la app que se está diseñando y en su utilización para llevar a cabo prue-
bas sobre ellos, en cuyo desarrollo se involucra a usuarios. Es habitual que los
prototipos que se someten a evaluación no pretendan reproducir el sitio web
o la app en su totalidad, sino solo aquellas partes que presentan una especial
complejidad.
Normalmente, las técnicas de prototipado son llevadas a cabo por expertos en

usabilidad y UX con la colaboración del equipo de desarrollo. Las modalidades
de esta técnica que se utilizan con más frecuencia son las siguientes:
• El prototipado�de�baja�fidelidad, que es una representación esquemática

del diseño de la interfaz. Por lo tanto, no incluye los aspectos de diseño
gráfico de la interfaz ni los aspectos funcionales de la aplicación. El obje-
tivo del prototipado de baja fidelidad es proporcionar una primera idea de
cómo será la interfaz, de la disposición de sus elementos y de la visibilidad
que tendrán. A menudo se solicita a los usuarios que construyan su propio
prototipo con papel y lápiz, lo que permite obtener información sobre sus
preferencias.
• El prototipado�de�alta�fidelidad, que se basa en la construcción de un

modelo lo más fiel posible al sitio web que se está diseñando y desarrollan-
do. Este prototipo se puede utilizar para que un experto evalúe aspectos
funcionales y de usabilidad, o para llevar a cabo un test con usuarios.
• El prototipado�vertical, consistente en la elaboración de un modelo de

una sección concreta del sitio web, con una apariencia y funcionalidad
muy parecidas a las que tendría si estuviera completamente acabado. Esto
permite llevar a cabo métodos de evaluación de la usabilidad y UX sobre
una parte específica o unas funciones determinadas.
• El prototipado�horizontal, que se basa en la construcción de un modelo

que recoge la mayor parte de las funcionalidades, los espacios y los menús
del sitio web, pero sin que estos estén implementados y funcionen real-
mente. Sirve para evaluar no tanto el uso del sistema sino su alcance, la
navegación y la arquitectura de la información.
El prototipado, en sus diferentes modalidades, constituye la herramienta clave

para el diseño de la interacción de un web, una app o cualquier otro producto
digital interactivo, dado que permite definir y probar las interacciones que lle-
varán a cabo los usuarios, identificar si son claras, sencillas e intuitivas, y hacer
los ajustes necesarios. Presenta la ventaja de que permite modificar y corregir

los diseños antes de que se desarrollen completamente. Sin embargo, tiene el
inconveniente de que, al trabajar con modelos incompletos, hay aspectos del
sitio web o la app que no se pueden evaluar. Además, la construcción de según
qué clase de prototipo puede tener un coste bastante alto.
3.3. Métodos de evaluación por test
Los métodos de evaluación de la usabilidad por test a menudo se denominan

tests�de�usabilidad, o tests con usuarios. Mediante estos tests se comprueba
si las interfaces y las interacciones están bien diseñadas (si son usables), y se
descubren posibles dificultades y obstáculos con los que los usuarios se pueden
encontrar para lograr sus objetivos.
El proceso de desarrollo de un test de usabilidad consta de las siguientes etapas:
• la definición de los objetivos de la investigación y la población objeto de

estudio,
• la preparación de un guión que prevea las diferentes tareas y pantallas que

se quieren evaluar,
• la posibilidad de completar la información recabada con una encuesta di-

rigida a los usuarios,
• el reclutamiento de los participantes, y
• la ejecución del test propiamente dicho.
Durante el test, los usuarios llevan a cabo las actividades que se han establecido
previamente en el guión bajo la supervisión de un investigador que se ocupa
de conducirlo.
Lo que se conoce como protocolo de thinking�aloud establece que, durante el

test de usabilidad, se debe pedir a los usuarios participantes que vayan diciendo
en voz alta lo que piensan y hacen. De este modo se enriquece notablemente
la información obtenida. En otras modalidades de test, en cambio, el conduc-
tor del test va formulando preguntas relacionadas con las tareas o la interfaz,
mientras que el usuario va completando las tareas que tiene establecidas.
Una vez efectuado el test con usuarios, se recomienda distribuir un cuestiona-

rio final o hacer entrevistas a los participantes. Mediante la encuesta o la en-
trevista podemos recabar información sobre las percepciones generales de los
participantes respecto al web o el producto digital que estamos evaluando, o
también sobre algunos aspectos específicos de sus funcionalidades o interfaces.
Suele ser bastante habitual que el test con usuarios se lleve a cabo en una sala
especialmente condicionada, que se conoce como laboratorio�de�usabilidad.
Este espacio suele estar equipado para grabar tanto la pantalla donde el usua-
rio interacciona con la interfaz como, de manera simultánea, las expresiones
verbales y gestuales del usuario.
Pero para ahorrar desplazamientos, y eliminar los sesgos que se derivan del
hecho de que algunos usuarios se sienten incómodos en un ambiente poco
natural como el de un laboratorio, se puede llevar a cabo un test�remoto. Esta
modalidad facilita el reclutamiento de participantes, reduce costes y permite
eliminar algunos sesgos. En contrapartida, requiere una infraestructura tecno-
lógica compleja (tanto en el servidor donde está almacenado el sitio web co-
mo en casa del usuario); y además a menudo no permite llevar a cabo algunos
protocolos de test, como el thinking aloud.
Los proyectos de comercio electrónico
Es muy recomendable que, en el desarrollo de un proyecto de comercio electrónico, se

lleve a cabo algún test de usabilidad con el que se validen los diseños, sobre todo aquellos
relacionados con la navegación por el catálogo del establecimiento y con los procesos
de compra.
Así, por ejemplo, en un pequeño test con usuarios de BricoTodo se podrían solicitar dos
tareas a los participantes. La primera podría consistir en buscar y seleccionar dos herra-
mientas de ferretería del catálogo, y la segunda, en formalizar el pago. Con la ejecución
de esta prueba se podría comprobar si los usuarios tienen dificultades para hacer búsque-
das en el catálogo y para navegar, y si el proceso de compra está bien diseñado.
3.4. Métodos de evaluación por inspección
Los métodos de evaluación por inspección, también denominados métodos

de evaluación de la usabilidad, recurren a la colaboración de unos evaluadores,
expertos en usabilidad, que estudian, examinan y evalúan el producto o siste-
ma. A diferencia de los tests de usabilidad o tests con usuarios, estos métodos
se desarrollan sin la participación de los usuarios; por este motivo, su utilidad
y adecuación están fuertemente condicionadas por el grado de experiencia de
los evaluadores. Algunas de las técnicas utilizadas en la evaluación por ins-
pección son la evaluación heurística, la inspección de estándares, el recorrido
cognitivo, el recorrido cognitivo conjunto, la inspección de características y
la inspección de consistencia.
3.4.1. Evaluación heurística
La evaluación heurística consiste en que uno o más expertos en usabilidad

y UX examinan los diferentes elementos de la interfaz de usuario según un
conjunto de reglas o principios de usabilidad previamente establecidos. Estos
principios, en base a los que se evalúa, se denominan heurísticos.
Ejemplos de heurísticos
Heurísticos populares
Por ejemplo, se puede considerar el heurístico que establece que los usuarios han de poder
reconocer y diagnosticar los problemas o errores del sistema y recuperarse de ellos. Así, Un conjunto de heurísti-
cuando se producen problemas o errores, estos se han de exponer al usuario utilizando cos que ha disfrutado de
un lenguaje que le sea comprensible y sugiriéndole alguna solución posible. gran popularidad ha sido
el definido por Jakob Niel-
sen, que se puede consul-
En el sitio web de BricoTodo, si un usuario hace la búsqueda de una herramienta de fe-
tar en la dirección http://
rretería y esta no figura en la base de datos, el mensaje por defecto del sistema podría
www.useit.com/papers/heu-
ser: “Objeto no encontrado”. Pero, en cambio, el mensaje que se presente al usuario po-
ristic/heuristic_list.html.
dría ser: “Lo sentimos, no tenemos disponible la herramienta que buscas. ¿Deseas buscar
otra?”.
Este método de evaluación puede llevarse a cabo en diferentes fases del pro-
ceso de diseño. Así, se puede efectuar en las primeras fases, una vez que se
han elaborado las propuestas de diseño y se han construido los prototipos, lo
que permitirá corregir aspectos de usabilidad y UX antes de desarrollar com-
pletamente el sitio web. Pero también se puede efectuar después de desarrollar
el sitio web, justo antes del lanzamiento definitivo, para acabar de examinar
algunos elementos de usabilidad y UX que no eran visibles en etapas previas.
La evaluación heurística tiene como ventaja que es un método razonablemen-

te rápido de llevar a cabo y que, cuando participa más de un experto, propor-
ciona distintas opiniones a partir de un mismo conjunto de reglas o criterios.
Por otro lado, como desventajas hay que destacar que la evaluación está es-
pecialmente condicionada tanto por los expertos que participan como por el
conjunto de heurísticos elegidos. De hecho, se ha comprobado que los heurís-
ticos más utilizados, que son los definidos por Jakob Nielsen, no son adecua-
dos en todas las interfaces de usuario.
3.4.2. Inspección de estándares
En la inspección de estándares, un experto en usabilidad examina si la inter-

faz sigue las especificaciones y los estándares definidos por la industria o por
organismos internacionales.
Estándares del W3C

W3C
Puede ser necesario asegurar que el sitio web se ajusta a los estándares de interactividad
y accesibilidad establecidos por el world wide web Consortium (W3C). Por ejemplo, si El world wide web Consortium
se quiere que el establecimiento virtual sea accesible para personas con discapacidades, o W3C (http://www.w3c.org)
es un organismo internacio-
deberá asegurarse que el sitio se ajusta al estándar del W3C establecido en el marco de
nal que tiene como objetivo
la web accesibility inititative. definir los estándares para los
webs.
Esta técnica tiene como principales ventajas su sencillez y la rapidez con la

que se puede llevar a cabo. Pero, en cambio, requiere expertos con un amplio
conocimiento de los estándares y no pone directamente de manifiesto los po-
sibles problemas de usabilidad y UX. No obstante, su aplicación resulta espe-
cialmente necesaria por la relevancia que tienen los estándares en la web.
3.4.3. Recorrido cognitivo
En este caso, un experto construye escenarios de las tareas que el usuario podría
efectuar y se encarga él mismo de llevarlas a cabo asumiendo el rol del usuario.
Durante la ejecución de esta técnica, se estudian las actividades que el usuario
debería llevar a cabo y se simula el proceso de resolución de los problemas con
los que se encontraría a lo largo de la interacción. De este modo se comprueba
si la carga cognitiva que se presume que tiene el usuario le permitirá desarrollar
las tareas establecidas y lograr los objetivos que se supone que se plantearía.
Ejemplo de recorrido cognitivo
Consideremos el recorrido cognitivo en el sitio web de BricoTodo que podría llevarse

a cabo al considerar el escenario “encontrar un destornillador eléctrico y sin cables de
menos de 50 euros de la marca X y formalizar su pedido”. El experto debería efectuar las
acciones de buscar la marca seleccionada en la base de datos de la tienda, navegar entre
sus productos, añadir al carrito de la compra un destornillador que cumpla los requisitos
indicados y formular el pedido. Cada una de estas acciones la efectuará de la manera
más parecida a como la haría un usuario, para así detectar si a este se le presentarían
dificultades.
Como ventajas de esta técnica hay que destacar que es relativamente rápida
de llevar a cabo y que se focaliza en los aspectos que se sabe que pueden ser
problemáticos para el usuario. No obstante, los resultados obtenidos pueden
estar sesgados por los escenarios y las tareas que se han elegido previamente.
Además, no permite descubrir nuevos problemas de usabilidad y UX (solo se
estudian aquellos que ya han sido previamente contemplados), y se pone al
experto en el lugar del usuario.
3.4.4. Recorrido cognitivo conjunto
Este método se basa en la celebración de reuniones o dinámicas de grupo en

las que participan usuarios, diseñadores, desarrolladores (o programadores) y
expertos en usabilidad y UX. En ellas se presenta un determinado escenario,
que implica el desarrollo individual de un conjunto de tareas relacionadas (de
manera similar a como se lleva a cabo el recorrido cognitivo convencional),
con la particularidad de que posteriormente se discute y se evalúa en grupo
cada elemento de interacción.
Ejemplo de recorrido cognitivo conjunto
Siguiendo el ejemplo del establecimiento virtual de BricoTodo, y suponiendo que el es-

cenario que se ha definido consiste en “encontrar un destornillador eléctrico y sin cables
de menos de 50 euros de la marca X”, se pedirá a cada participante que asuma el rol del
usuario y que navegue por el sitio web, haciendo las búsquedas y completando el proceso
de compra en el catálogo de productos.
Una vez que cada participante haya completado el proceso de simulación de tareas de
manera individual, se le pedirá que ponga en común los resultados, empezando por los
usuarios y los desarrolladores.
Los resultados obtenidos con esta técnica suelen ser muy útiles porque son el
fruto de la puesta en común de puntos de vista diferentes. En contrapartida, su
coste es más elevado por la dificultad de reclutar y reunir a los participantes.
3.4.5. Inspección de características
Este método de inspección permite analizar un conjunto de propiedades y

características de la interfaz, derivadas del escenario de uso definido y las tareas
asociadas a él, y con las cuales los usuarios no están del todo familiarizados.
Cada conjunto de características se estudia y evalúa teniendo en cuenta su
utilidad, disponibilidad y comprensibilidad.
Ejemplo de inspección de características
Por ejemplo, un escenario de uso del establecimiento virtual de BricoTodo puede ser que,
una vez que se han seleccionado los productos que se quieren comprar, se deba formalizar
el pedido proporcionando los datos personales y de pago.
El conjunto de características de este escenario incluye los pasos necesarios para propor-
cionar el nombre, los apellidos, la dirección personal y la dirección de envío, así como los
pasos para seleccionar el tipo de pago que se quiere hacer y formalizarlo. Estas caracterís-
ticas se evalúan teniendo en cuenta si los usuarios las encuentran útiles, accesibles (por
ejemplo, si saben dónde tienen que introducir el nombre y los apellidos) y las entienden.
La inspección de características presenta la ventaja de que permite focalizar

el análisis en aquellos aspectos que pueden representar una dificultad para el
usuario. No obstante, se pueden obtener resultados sesgados por el escenario
y las tareas que se hayan seleccionado.
3.4.6. Inspección de consistencia
Mediante este método se evalúa si el diseño está en concordancia con otros

diseños que también se deben presentar al usuario. Un experto en usabilidad
analiza los diferentes diseños e interfaces de usuario para comprobar si existe
coherencia en la manera de efectuar interacciones y procesos en cada web o
sección contemplada.
Ejemplo de inspección de consistencia
Se puede dar la situación de que el catálogo del establecimiento de BricoTodo sea muy
extenso y que se deban crear y mantener secciones diferenciadas para cada categoría de
productos. La inspección de consistencia examinará la coherencia de las diferentes inter-
faces, así como la navegación, la interacción y el sistema de búsqueda de cada sección.
Además, se evaluará si el diseño del catálogo es consistente con la parte del sitio web
donde se lleva a cabo la formalización del pago.
Este método es recomendable para los sitios web con un tamaño medio y gran-
de, que ofrecen muchos contenidos y tienen una cierta complejidad. Además,
es rápido y fiable, sobre todo si se despliega siguiendo un conjunto de guías o
pautas previamente establecidas. Entre sus desventajas destaca que, si el aná-
lisis revela inconsistencias entre diseños, no es sencillo poner de acuerdo a

diferentes equipos de diseño y desarrollo, y establecer un diseño e interacción
que sean integrados y coherentes.
3.5. El diseño centrado en el usuario y la gestión de proyectos
Cualquier diseño, del mismo modo que cualquier propuesta de solución a un

problema, requiere una evaluación previa que permita comprobar su adecua-
ción y validez. Esto es, resumidamente, lo que propone el proceso de diseño
centrado en el usuario, y esto es también lo que debemos tener en cuenta a la
hora de llevar a cabo una iniciativa de comercio electrónico usable y centrada
en que los usuarios tengan experiencias óptimas con la marca.
Actualmente, para el diseño y desarrollo de webs y apps se siguen procesos de- Terminología
nominados ágiles. Estos procesos permiten, de manera rápida y continuada,
Un proceso ágil en inglés se
proponer nuevos diseños, evaluarlos con usuarios y corregir lo que no funcio- denomina agile software o
na –porque tiene errores de funcionamiento, porque no resulta claro para los también agile development.
usuarios, porque no es visualmente atractivo, etc. Por lo tanto, los procesos

ágiles aplican el concepto de iteración, que, como hemos visto previamente,
es clave en el proceso de diseño centrado en el usuario, y hacen crecer nues-
tro proyecto de manera incremental. Esto se traduce en propuestas que se pre-
sentan y son evaluadas de manera sucesiva y que se aproximan progresiva-
mente hacia la solución deseada. A menudo, en un proyecto ágil, es el propio
prototipo del web o la app el que se acaba convirtiendo en el producto final.
Las primeras versiones del prototipo tienen pocas funcionalidades pero se van
ampliando de manera iterativa y a lo largo del tiempo.
Los proyectos donde se aplica la perspectiva del diseño centrado en el usuario Lectura complementaria
y la UX con una dinámica de desarrollo ágil se han venido a denominar pro-
Encontraréis una explicación
yectos agile�UX. Algunos autores también hablan de proyectos lean UX. Estos de las similitudes y diferen-
últimos están inspirados en un método similar, conocido como lean startup y cias entre los métodos agile
UX y leanstartup en el artícu-
propuesto en el libro del mismo título de Eric Ries. lo del ingeniero de UX An-
ders Ramsay titulado “Agile
UX vs lean UX – How they’re
A la hora de llevar a cabo una iniciativa de comercio electrónico, se recomien- different and why it matters
for UX designers” (http://
da seguir una perspectiva ágil. Los proyectos que se llevan a cabo de este mo- www.andersramsay.com/2012/
do son más eficientes en el proceso de desarrollo. No obstante, presentan el 04/24/agile-ux-vs-lean-ux/).
inconveniente de que los ajustados plazos de las diferentes etapas del proyec-
to pueden provocar que se trabajen con poco detalle aspectos del diseño cen-
Lectura complementaria
trado en el usuario, especialmente los relacionados con la investigación con
usuarios (que absorben muchos recursos y tiempo). Este es, pues, el inconve- El artículo “Doing UX in an
agile world: case study fin-
niente principal de las perspectivas ágiles: descuidar a los usuarios a lo largo dings”, de Hoa Loranger,
aporta explicaciones y ejem-
del proceso, un aspecto que en cambio es crítico para el éxito de la iniciativa, plos que ilustran los princi-
como hemos visto al estudiar la usabilidad y la UX. pales riesgos de adoptar una
aproximación ágil. Lo po-
déis consultar en la dirección
http://www.nngroup.com/ar-
ticles/doing-ux-agile-world/.
4. Usabilidad y UX en el comercio electrónico
El sitio web del establecimiento virtual, con sus contenidos y su usabilidad y

UX, determina la imagen que los usuarios tendrán de la empresa. En el comer-
cio convencional, la ubicación del local físico, junto con el nombre, la locali-
zación, la iluminación y la decoración del local, son elementos que influyen
en la imagen que los clientes se forman del establecimiento. En el comercio
electrónico, estos elementos cambian y lo que contribuye a construir la ima-
gen de una iniciativa de comercio electrónico es su URL, el nombre de domi-
nio, la estructura del sitio web, el diseño gráfico y, sobre todo, la usabilidad y
la experiencia del usuario en la interacción con el web.
Ejemplo
Es interesante hacer el ejercicio de pensar cuál es la imagen que tenemos de firmas co-
mo Amazon o eBay, que no tienen establecimientos presenciales. Todos los aspectos de
nuestra interacción con sus sitios webs contribuyen a la imagen que nos formamos de
estos establecimientos comerciales.
Así, no solo hay que construir un sitio web con unas interfaces de usuario
fáciles de utilizar por las personas, sino que también es necesario:
• Que los usuarios visiten el sitio web.
• Que los usuarios que visitan el web se hagan clientes del establecimiento.
• Que los usuarios y clientes no tengan problemas con el web ni se enfrenten

con obstáculos en el proceso de compra.
• Que los usuarios y clientes repitan sus visitas y vuelvan a comprar.
• Que las experiencias de navegación y compra sean positivas y satisfactorias

para los usuarios y clientes.
Barras de navegación, recomendaciones, valoraciones personales y listas de

Ved también
productos deseados
Amazon ofrece ejemplos excelentes sobre cómo se debe diseñar un establecimiento en El feedback del cliente y las téc-
línea y aplicar un proceso de mejora continuo del sitio web siguiendo los principios y nicas de recomendación se es-
tudian en el módulo sobre de-
las metodologías del diseño centrado en el usuario. Del sitio web de Amazon destaca, en
cisiones tecnológicas para el
primer lugar, su barra de navegación principal. Esta barra es el primer elemento visual con comercio electrónico.
el que se encuentra el usuario, y le invita a efectuar una búsqueda del producto que desea.
A partir del seguimiento de la navegación de los usuarios por su establecimiento, Ama-

zon recomienda una serie de productos que pueden ser de interés para el usuario. Esta
recomendación se fundamenta en técnicas que se denominan filtrado colaborativo, y
que formulan recomendaciones a partir de lo que ha interesado anteriormente a un gru-
po de usuarios similar al usuario actual. De este modo, se ofrece ayuda al usuario en su
búsqueda, se le dan ideas de compra y se fomentan las ventas cruzadas.
Amazon también ofrece a los usuarios la posibilidad de publicar sus valoraciones perso-
nales sobre los productos que han comprado. Así, cuando un nuevo usuario se encuentra
ante la duda de si comprar o no un determinado producto, puede consultar los comen-
tarios y las valoraciones de otros usuarios para tomar su decisión.
Otro recurso que proporciona Amazon es la lista de deseos, que permite que los propios
usuarios incorporen sus productos preferidos: los que querrían adquirir o desearían que
les regalaran.
En los establecimientos físicos se incorporan muchos elementos que resultan

familiares para los consumidores y que han sido ampliamente estudiados por
los especialistas de marketing: se debe poder pasar con el carrito de la compra
por los pasillos, los productos se han de poder seleccionar cómodamente de los
estantes, el cliente tiene que encontrar con facilidad las cajas donde pagar, la
sala de ventas debe estar limpia, ventilada, y ha de contar con una iluminación
y temperatura adecuadas.
En cambio, todos estos aspectos relativos al merchandising han sido poco es- Merchandising
tudiados para los entornos virtuales. Y es que puesto que internet es un me-
Recordad que el merchandising
dio bastante nuevo, todavía queda mucho por aprender sobre cómo se deben aglutina el conjunto de téc-
tener en cuenta y aplicar los mecanismos del merchandising virtual. Pero del nicas y actividades mediante
las que se pretende facilitar las
mismo modo que sería un gran problema para un supermercado convencional compras de los clientes en los
establecimientos comerciales,
que el tamaño de los pasillos no permitiera el paso de los carritos, o que los así como la venta y rotación de
los productos.
estantes superiores estuvieran fuera del alcance de muchos consumidores, en
los establecimientos virtuales también hay que evitar que el usuario no pue-
da navegar fácilmente con el carrito de la compra o que le resulte demasiado
complicado añadir a este los productos. En el entorno en línea, por lo tanto,
también hay que recurrir a técnicas para favorecer las experiencias satisfacto-
rias en las visitas y los procesos de compra.
En esta última parte del módulo didáctico proporcionamos algunas recomen-

daciones que se deben tener en cuenta a la hora de diseñar y desarrollar si-
tios web y apps. Estos criterios son específicos del diseño de interfaces y de
interacción, y han sido adoptados también para el merchandising en entornos
virtuales.
Pero antes de adentrarnos en estas cuestiones hay que recordar la distinción Ved también
que hicimos entre el diseño UX y el diseño de las interfaces, que es el que el
En el apartado 1.3 de este mó-
usuario ve. Se trata de dos conceptos estrechamente relacionados; de hecho, dulo definimos y diferencia-
podríamos decir que el diseño de interfaces es consecuencia del diseño UX, es mos el diseño UX y el diseño
de interfaces.
decir, de como se diseña la experiencia que tendrán las personas con la tecno-
logía. Así, la interacción persona-ordenador y la experiencia de usuario se cen-
tran en motivar a los usuarios y en que la interfaz posibilite que los usuarios
consigan los objetivos que se habían propuesto. Pero en el diseño UX intervie-
nen muchos factores, que no siempre se sitúan dentro del marco de la empresa
o iniciativa de comercio electrónico; algunos de estos factores, por lo tanto,
quizá están fuera de nuestro control. No obstante, sí está en nuestras manos
diseñar mejores interfaces y mejores interacciones, y esto es lo que marca la
diferencia entre un establecimiento virtual que simplemente funciona y otro
que, además, gusta y satisface a los usuarios.
Hemos comparado los establecimientos virtuales con los establecimientos

convencionales o presenciales. Del mismo modo, podemos equiparar la inter-
faz de usuario a la atención al público que se proporciona en una tienda física
y concebirla, consecuentemente, como un dependiente digital que facilita la
interacción entre los clientes y la tienda. El diseño UX sería la “manera” co-
mo los dependientes ayudan a los clientes a solucionar sus necesidades. Unas
interfaces mal diseñadas y unas interacciones confusas equivaldrían a depen-
dientes que ignoran a los clientes, que no atienden correctamente sus peticio-
nes o que proporcionan información imprecisa sobre los productos a la venta.
Tomar las decisiones de diseño UX adecuadas sería equivalente a contratar a
los dependientes adecuados y formarlos para prestar un servicio ideal de aten-
ción al cliente.
4.1. Recomendaciones de usabilidad y UX en el comercio

electrónico
Como se ha podido ver a lo largo de este módulo, la UX es un aspecto tecno-

lógico crítico del comercio electrónico. Y es que la tecnología solo nos resul-
ta útil cuando está diseñada a partir de las interacciones que permite, y real-
mente facilita nuestra iniciativa de comercio electrónico. Así, nuestro web o
aplicación podría ser tecnológicamente potente, pero olvidar a los usuarios a
quienes se dirige y que deberán interaccionar con ella.
A continuación identificamos conceptos y criterios del diseño UX que son

clave para el diseño de las interfaces y la interacción que estas facilitan. Es-
tos son elementos importantes en cualquier producto digital interactivo, pero
también y muy especialmente en el diseño de webs y apps de comercio elec-
trónico.
4.1.1. Diseño orientado a los objetivos
En cualquier ámbito del diseño, el diseñador debe conocer primero las restric-
ciones y después imaginar una solución a estas. En el caso del diseño UX, nos
encontramos con que buena parte de las restricciones que influirán en las in-
terfaces y las interacciones que se acaben proponiendo vendrán dadas por las
percepciones, necesidades y preferencias de los propios usuarios. De aquí la
importancia de seguir una perspectiva y un proceso de diseño centrado en el
usuario. Y es que los principios y las técnicas del diseño centrado en el usuario
nos permiten forcalizarnos en lo que es más importante para nuestra iniciativa
de comercio electrónico: los clientes. Idealmente, para los usuarios, las inter-
faces deberían ser invisibles y las interacciones naturales. Por ello se dice que
el mejor diseño de experiencias es aquel que los usuarios no notan, a la vez
que les proporciona lo que necesitan en cada momento.
4.1.2. Usabilidad
La usabilidad, entendida como facilidad de uso, se puede considerar como lo

mínimo que debe cumplir cualquier interfaz, y por extensión, cualquier ini-
ciativa de comercio electrónico. Si nuestros usuarios o clientes tienen dificul-
tades para utilizar nuestra tienda virtual o nuestra app, está claro que la aban-
donarán y no la querrán volver a usar. Por lo tanto, es esencial que el web o
la app sean usables; y una vez logrado este objetivo, buscaremos que también
sean deseables.
4.1.3. Affordances
Una affordance se puede concebir, de manera simplificada, como la capacidad

o calidad que tiene un producto para sugerir, por él mismo, las funciones (y
funcionalidades) que proporciona. Este es un concepto que proviene del cam-
po de la psicología y cuya relevancia en el ámbito del diseño y la interacción
fue mostrada por primera vez por el profesor Donald A. Norman. El aspecto
crítico de las affordances es el modo como las perciben y entienden los propios
usuarios del producto o sistema. Así, Norman se refiere a las affordances como
las funciones o posibilidades de acción del producto que son percibidas por El profesor Donald A. Norman ha mostrado la
importancia del concepto de affordance en el
los usuarios, y que dan indicios o aportan información sobre su significado y contexto del diseño en su libro La psicología de
los objetos cotidianos (Nerea, 1990).
Fuente: http://da.wikipedia.org/wiki/
lo que invitan a hacer. Donald_Norman
Donald A. Norman
En el diseño de webs y apps de comercio electrónico, las affordances son de

gran importancia. Construir unas affordances adecuadas significa que los en-
laces han de parecer enlaces, los botones, botones, y un vídeo debe contar con
el triángulo de “play” para así entender que es un vídeo. Cualquier elemento
de la interfaz tendrá que “hablar” por sí mismo y comunicar claramente su
funcionalidad. Si un usuario (o cliente) no sabe qué hacer en una pantalla de
nuestro web o app, quiere decir que no hemos proporcionado unas affordan-
ces suficientemente buenas. Se dice que las affordances representan posibilida-
des de acción y que deben invitar a realizar acciones específicas. Si queremos
que nuestros usuarios naveguen por el catálogo de productos o introduzcan
comentarios sobre los productos, la interfaz (y las interacciones que permite
la interfaz) han de invitar a hacerlo, y lo tienen que hacer de manera natural,
intuitiva, clara y que no lleve a errores; y si se cometen errores, es necesario
que estos sean fácilmente subsanables.
Así, una vez que tengamos conceptualizado el web o app y las funcionalidades
que ofrece (o sea, las tareas que podrán llevar a cabo los usuarios), ya en los
primeros diseños debemos preguntarnos si la interfaz permite e invita a em-
plear las diferentes funcionalidades y efectuar las tareas que hemos definido.
4.1.4. Learnability
Las acciones e interacciones que los usuarios llevan a cabo en un sitio web o
app de comercio electrónico deben poder ser recordadas fácilmente. De este
modo, cuando los clientes vuelvan a nuestro establecimiento virtual, ya sabrán
cómo funciona y podrán seleccionar directamente los bienes o servicios de su
interés.
Es habitual que, al cabo de un tiempo, las personas no recordemos procesos

concretos en webs o apps. Debido precisamente a que nuestra memoria es
limitada, el diseño nos debe poder ayudar. La recomendación, por lo tanto, es
diseñar interacciones intuitivas y familiares, que reduzcan la complejidad de
las interfaces; y asegurar especialmente su consistencia y predictibilidad.
4.1.5. Consistencia
La consistencia se plasma en que los comportamientos de los elementos de

un sistema o interfaz tengan lógica y coherencia. Así, una vez que el usuario
empieza a utilizar nuestro sitio web o app, debemos evitar que el comporta-
miento de los diferentes elementos interactivos varíe de manera arbitraria. La
consistencia mejora la experiencia de usuario porque:
• Favorece una interacción “correcta”, sin inducir a errores: la navegación

por el web o la app acaba siendo más fluida.
• Reduce el miedo a comportamientos o resultados no esperados.
• Respeta el aprendizaje que los usuarios han efectuado en interacciones y

navegaciones anteriores.
• Aporta estabilidad y genera confianza hacia el web o app, y en definitiva

hacia la iniciativa de comercio electrónico.
Se suele distinguir entre la consistencia interna y la consistencia externa del

producto digital o sistema interactivo. La consistencia interna se refiere a la
que ha de producirse entre los propios elementos del sistema de comunicación
del web o app. Cuando los usuarios aprenden a utilizar determinados elemen-
tos interactivos de nuestra web o app, esperan que estos se comporten de ma-
nera similar y con resultados previsibles en otras secciones o en áreas similares.
A la vez, también esperan que exista una consistencia externa, es decir, que
nuestra interfaz sea coherente con ciertas reglas que los usuarios han aprendi-
do al interaccionar y navegar por otros webs y apps. Algunas recomendaciones
para mantener la consistencia, interna y externa, son las siguientes:
1)�Elementos�de�composición: organizar de manera similar las partes princi-

pales de la composición (layout) de las interfaces, como por ejemplo cabeceras,
sistemas de navegación, cuerpo de las páginas web y pies de las páginas.
2)�Diseño�visual: asegurar que el grafismo y tratamiento visual de las interfa-

ces es similar y/o coherente en todo el sitio web o en todas las pantallas de
la app.
3)�Lenguaje�y�etiquetado�del�contenido: evitar denominar a un mismo ele-

mento de distintas formas, ya se trate de un bien o servicio, de una acción o de
una etapa del proceso de compra. También hay que utilizar un lenguaje cohe-
rente (en su tono, en los tiempos verbales, etc.) a lo largo del sitio web o la app.
4)�Elementos�de�la�interfaz: son muchos los elementos de la interfaz en los Breadcrumbs

que existe el riesgo de perder consistencia, especialmente aquellos relaciona-
Los breadcrumbs (migas de
dos con la navegación. Así, por ejemplo, perdemos consistencia al incorporar pan) son un recurso de arqui-
enlaces que se abren en la misma ventana cuando ya hay otros que, sin ningún tectura de información y dise-
ño de interfaces que consiste
motivo aparente, se abren en una ventana nueva. Como recomendación para en indicar, normalmente en la
cabecera o al pie de la panta-
el diseño del web podemos apuntar: aportar coherencia en los enlaces y en los lla, todo el camino que se ha
seguido hasta llegar a la po-
botones; proporcionar un sistema de navegación que también sea coherente y sición en la que se encuentra
se ubique en la parte superior o en la parte izquierda de la página web; ofrecer el usuario en ese momento.
Su nombre proviene del cuen-
breadcrumbs en cada página del web para situar y orientar al usuario, y ubicar- to popular donde se deja una
hilera de migas de pan para
los debajo del sistema de navegación principal. recordar el camino que se ha
seguido y poder volver atrás
cuando sea necesario.
5)�Libro�de�estilo: la elaboración de un libro de estilo, no solo para la marca,
sino también para los elementos de la interfaz y para las interacciones, puede
ser de gran ayuda.
Libro de estilo
Un libro de estilo, también llamado manual de estilo o guía de estilo, es una guía que
agrupa las normas y recomendaciones de diseño y escritura con el objetivo de aportar
consistencia en la comunicación. En UX, el libro de estilo también recoge indicaciones
concretas para el diseño de las interfaces (arquitectura y diseño gráfico), el diseño de las
interacciones, la navegación y el etiquetado.
Además, las reglas y recomendaciones que incorporan los diferentes heurísti- Ved también
cos disponibles nos pueden servir para aportar consistencia a nuestro web o
En el apartado 3 de este mó-
app. dulo hemos visto el uso que
se hace de los principios heu-
rísticos en la evaluación por
Las actividades que se desarrollan para asegurar la consistencia del sitio web inspección. Pero los principios
heurísticos también se pueden
tienen una ventaja adicional, y es que también son muy útiles para las per- utilizar como indicaciones para
diseñar.
sonas que están a cargo de la iniciativa de comercio electrónico. De hecho,
llevan a diseñar y desarrollar plantillas que serán válidas para todo el web o
app. De este modo, la gestión y el mantenimiento técnico del establecimiento
virtual serán mucho más ágiles y sencillos. Otra ventaja es que simplifican la
toma de decisiones, y permiten reducir costes y errores.
4.1.6. Predictibilidad
La predictibilidad se refiere a que todos los aspectos del diseño de la interacción

deben ofrecer indicios adecuados de lo que sucederá, antes de que el usuario
seleccione una determinada opción. Dicho de otro modo, cuando un usuario
puede predecir el siguiente paso en una interacción, es porque esta se está
desarrollando de manera comprensible, clara y lógica, lo que aporta sensación
de control y confianza.
Una recomendación que hace Steve Krug en su libro Don’t make me think, revi-
sited: a common sense approach to web usability (New Riders, 2010) es preguntar-
nos si nuestros usuarios son capaces de responder a las siguientes preguntas:
• ¿Dónde estoy?
• ¿Cómo he llegado aquí?
• ¿Qué puedo hacer aquí?

• ¿Dónde puedo ir desde aquí?
Según Krug, si la respuesta a todas estas preguntas es coherente, es porque he-

mos informado adecuadamente al usuario sobre su localización (hemos faci-
litado su orientación), hemos comunicado unas expectativas que se ajustan a
la propuesta de valor y hemos hecho posible que el usuario prevea adecuada-
mente el resultado de sus interacciones.
Otras recomendaciones para conseguir una buena predictibilidad son las si-
guientes:
• Prever�las�interacciones�de�mayor�dificultad. Si el web o la app de co-

mercio electrónico ha de ofrecer interacciones nuevas o complejas (o he-
mos identificado a un nuevo usuario), conviene proporcionar indicaciones
adecuadas antes de que empiece a interactuar, ya sea utilizando pequeños
mensajes contextuales o alguna ventana emergente no intrusiva.
• Ofrecer�interacciones�seguras. Es habitual que los usuarios, cuando no

saben qué hacer en una pantalla, o bien la abandonan o bien prueban
las diferentes opciones disponibles en enlaces y botones. Por este motivo
se recomienda que todas estas opciones disponibles sean seguras para el
usuario, de manera que le sea fácil deshacerlas o volver atrás.
• Utilizar�adecuadamente�etiquetas,�iconos�e�imágenes. Con un lengua-

je claro y conciso en las etiquetas de la interfaz, así como con iconos e
imágenes suficientemente comprensibles de lo que representan, el usua-
rio puede comprender mejor lo que tiene que hacer y qué consecuencia
tendrá su acción.
4.1.7. Patrones
Una manera de mejorar la consistencia y la predictibilidad, y, en consecuen-

cia de facilitar el aprendizaje, es mediante el uso de patrones de diseño. Se
entiende por patrón de diseño una solución a un problema de diseño que ha
sido probada satisfactoriamente a lo largo del tiempo. Muchos webs y apps
utilizan patrones en sus interfaces e interacciones, lo que asegura, en muchos
casos, que los usuarios ya estarán familiarizados con estas maneras de actuar.
La consistencia y la predictibilidad no están reñidos con la creatividad y la
singularidad de cada imagen de marca, dado que los patrones suelen marcar
las pautas generales en la interfaz y la navegación pero el resto de los elemen-
tos quedan a decisión del diseñador.
A continuación se presenta una compilación de recursos en línea en la que

encontraréis patrones para el diseño de interfaces y de experiencias:
• UI-Patterns
• Pttrns
• Yahoo design patterns library
• Zurb pattern tap
• UXPin UXPorn
• Dark patterns
• Little big details
• Mobile patterns
• Elements of design
Este último recurso, Elements of Design, es el que ahora mismo incorpora más
ejemplos o patrones de interfaces orientadas al comercio electrónico.
4.1.8. Feedback
El feedback, también conocido como retorno o retroalimentación, se puede Interacción

considerar el núcleo central de la interacción entre las personas y los produc-
La interacción se puede enten-
tos digitales o sistemas interactivos, y tiene implicaciones importantes en la der como el diálogo que se es-
satisfacción y experiencia de usuario. tablece entre la persona y un
determinado producto digital
o sistema interactivo. Podéis
consultar el esquema sobre la
Es importante que el usuario pueda ver el resultado de cada una de sus acciones interactividad que propone Bill
Verplank en estos enlaces:
en nuestro web o app de comercio electrónico; o, en el supuesto de que no se
http://
pueda generar un resultado directo, que pueda constatar que el sistema está www.designinginteractions.
com/interviews/BillVerplank;
llevando a cabo alguna acción o que ha cambiado su estado. Esto no significa
http://www.billverplank.com/
que después de cada acción haya que cambiar la pantalla o interfaz, pero sí que IxDSketchBook.pdf.
se presente alguna información que haga entender al usuario que su acción se
ha efectuado o está en proceso.
Enlaces de interés
El feedback se presenta en forma de respuestas del sistema, es decir, mediante Visitad los recursos web que
contienen ejemplos de feed-
mensajes o información que se ofrece al usuario cada vez que este hace una back: microinteractions.com
acción. Así, será importante decidir las respuestas que proporcionarán el web y littlebigdetails.com.
o app de comercio electrónico, ya sea en forma visual o de texto. Esto también

incluye, por ejemplo, el diseño de textos de confirmación que se hacen llegar
una vez que el cliente ha efectuado una compra, o se ha inscrito en la newsletter
del establecimiento.
4.1.9. Lenguaje y etiquetado
Un componente importante de las interacciones y del feedback es el conteni-

do escrito que aparece en las interfaces del web o app de comercio electróni-
co. Algunos puntos que hay que tener en cuenta en su elaboración son los
siguientes:
• Expresarse con claridad.

• Evitar la ambigüedad utilizando un lenguaje claro y que se refiera especí-
ficamente a la acción que se espera que el usuario lleve a cabo.
• Evitar argot o lenguaje técnico.
• Utilizar un tono y un vocabulario cercanos a los que usan los usuarios.

• Evitar el texto innecesario.
El texto de las interfaces influye en el modo en que las personas interaccionan

con ellas. Muchas veces, además del texto utilizado en las opciones de menú,
en los enlaces y en las etiquetas de los botones, se deben incluir indicaciones
o explicaciones sobre los procesos e interacciones. En inglés este último tipo
de textos se denomina microcopy.
También se recomienda prestar atención a la tipografía de cada fragmento de

texto para asegurar su legibilidad y que se muestre adecuadamente su jerar-
quía o importancia relativa. Por legibilidad nos referimos a que el texto ha de
tener un tamaño suficiente para ser leído cómodamente, con independencia
de la fuente tipográfica que se acabe eligiendo y sea cual sea la configuración
de pantalla, el software de navegación y el dispositivo de acceso que use el
usuario. Esto hace recomendable utilizar fuentes como las sans serif y, en cam-
bio, evitar fuentes ornamentales y cursivas. Además, se aconseja que el usuario
pueda elegir fácilmente el tamaño de letra que le resulte más cómodo, tanto
desde la configuración del navegador como desde el propio sitio web. Como
esto normalmente lo facilita y controla el propio sistema operativo, nosotros
simplemente deberemos garantizar que nuestro web o app no lo bloquea. Por
otro lado, la jerarquía del texto hace referencia al hecho de indicar adecuada-
mente cuál es la importancia que tiene cada fragmento de texto respecto al
resto del contenido textual, lo que se indica mediante su medida o tamaño.
Por lo tanto, el texto más importante debería tener un tamaño mayor que
aquellos otros fragmentos que no son tan relevantes o que ofrecen explicacio-
nes complementarias o más detalladas.
4.1.10. Diseño de los procesos de compra
Para diseñar los flujos de información en los procesos de compra se recomien-

da tener en cuenta tanto las diferentes etapas de este proceso, como los diver-
sos tipos de compra que se pueden efectuar en el establecimiento.
Por un lado, hay que presentar al cliente y mostrarle con claridad el número
de acciones y etapas que deberá completar hasta efectuar la compra. A lo largo
de todo este proceso se debe indicar en qué etapa se encuentra el usuario y
cómo puede avanzar a una nueva etapa o cómo volver atrás. También hay
que ofrecerle la posibilidad de abandonar el proceso sin haberlo finalizado
y las consecuencias que esto puede tener (especialmente en el caso de haber
proporcionado datos de carácter personal). Además, habrá que contemplar la
posibilidad de que el usuario se pueda quedar parado en cualquiera de las
etapas debido a un problema de conexión.
Por otro lado, a la hora de diseñar las etapas y el flujo de información de los
procesos de compra, también hay que tener en cuenta las diferentes tipologías
de compra que se pueden efectuar en un establecimiento virtual (reflexiva,
de conveniencia, por impulso, de alta implicación, etc.) y las características
específicas de los productos que se comercializan.
Por ejemplo, en la comercialización de bienes tangibles hay una serie de aspectos que
han de quedar recogidos en el diseño del flujo de información, y que están relacionados
con el envío físico del producto, el seguimiento del envío, el proceso de devolución, etc.
4.1.11. Usuarios y perfiles de usuarios
En el supuesto de que el establecimiento virtual se dirija a un gran número

de usuarios, es recomendable segmentar el público potencial estableciendo
diferentes perfiles de usuarios y diseñando contenidos, procesos de compra y
sistemas de ayuda diferentes para cada uno de ellos, que estén adaptados a sus
necesidades y particularidades.
Un ejemplo interesante nos lo ofrece Gmail, el servicio de correo electrónico de Google.

Gmail ha sido diseñado teniendo en cuenta diferentes perfiles de usuarios y las necesida-
des y habilidades de cada uno. Podemos encontrar funcionalidades que están claramente
orientadas a usuarios avanzados y que los usuarios noveles no emplearán, pero lo que es
importante es que estas funcionalidades avanzadas en ningún caso son una molestia o
un obstáculo para los usuarios noveles.
4.1.12. El diseño gráfico
El diseño gráfico de la interfaz tiene una importancia clave para favorecer la

usabilidad y UX de un establecimiento porque facilita el aprendizaje y el uso
del sitio web o app por parte de los usuarios.
Por otro lado, también debe contribuir adecuadamente a la construcción de la

imagen de marca del establecimiento y a su posicionamiento. Así, tiene que
existir una plena concordancia en el diseño gráfico de las diferentes secciones
o partes del sitio web; además, el diseño del web, en su conjunto, deberá es-
tar en plena sintonía con el resto de las comunicaciones de marketing de la
organización.
4.1.13. Pantallas e interfaces de terceros
Muchas veces el establecimiento virtual debe incorporar, necesariamente, lo

que podríamos denominar pantallas de terceros, cuyo contenido es gestionado
por empresas ajenas, que son proveedores, prestadores de servicios de pagos,
etc. de la organización.
Ejemplos de pantallas de terceros
En una agencia de viajes en línea aparecen pantallas de terceros, por ejemplo, como
resultado de una consulta a la base de datos de disponibilidad de vuelos o a la central
de reservas de hoteles.
Otro ejemplo de integración de pantallas –esta vez con una entidad financiera– se puede
encontrar al formalizar el pago de la matrícula en la UOC, cuando se elige la opción de
efectuar el pago en línea.
En los casos en que sea necesario integrar pantallas de terceros en el sitio web,
se recomienda seguir las indicaciones siguientes:
1) Explicar al usuario qué está sucediendo en cada momento y qué pasará

a continuación. Incluso puede resultar interesante comunicar las ventajas o
beneficios que se derivan de la operación que está en curso (se proporcionan
datos actualizados, se hace un pago seguro, etc.).
Ejemplo de explicaciones y actualizaciones de datos
Antes de mostrar una pantalla externa se puede incorporar un mensaje como este: “Para
efectuar el pago, aparecerá una ventana de «la Caixa» donde se te pedirán los datos de
tu tarjeta y tu conformidad. Esta ventana está directamente vinculada con «la Caixa» y
esto garantiza la seguridad de la transacción y la privacidad de tus datos”.
2) En algunos casos es recomendable acordar con el proveedor una modifica-

ción del grafismo de la pantalla externa, que permita fortalecer la percepción
de que las pantallas de terceros, a pesar de ser externas, están plenamente in-
tegradas con la propuesta de valor de la empresa.
3) Si el proveedor obliga a mostrar sus pantallas en ventanas nuevas, hay que

avisar a los usuarios, ya que habitualmente les desconciertan, sobre todo si
son usuarios noveles.
4) Puede suceder que el ordenador del usuario, la conexión a internet o las

pantallas externas “se queden colgadas” mientras el usuario está llevando a
cabo una tarea o completando una etapa del proceso de compra. Hay que estar
preparados para estas situaciones y “acoger” al usuario que se ha quedado a
medias en la ejecución de un proceso crítico. Hay que informarle del proceso
que ha quedado interrumpido y ayudarle a finalizarlo.
5) Conviene mostrar claramente los espacios desde los que se presta un servicio
de atención al cliente (dirección de correo electrónico del servicio de atención
al cliente, foro, respuestas a las preguntas más frecuentes, chat con personal
del servicio de atención, etc.) e, incluso (especialmente para los usuarios más
noveles), un número de teléfono para contactar con este servicio.
4.1.14. “No me hagas pensar en nada más que en lo que me

interesa”
A menudo el usuario solo quiere dedicarse a la compra del producto que le

interesa. Por lo tanto, no debería encontrarse con ningún obstáculo en el pro-
ceso, ya sea tecnológico o de carácter comercial (por ejemplo, anuncios de
productos que no guardan relación con los que está consultando en línea).
4.1.15. Acompañar al usuario
El usuario debe tener el control de sus acciones de navegación por el estable-

cimiento, sin que esto le suponga incurrir en errores y acciones incorrectas.
De hecho, el acompañamiento es una buena técnica para otorgar control al
usuario y, a la vez, ayudarlo y conducirlo a lo largo de una tarea o de todo
un proceso.
Es interesante que el sitio web muestre claramente a sus usuarios cómo acce-
der a los espacios de ayuda o al servicio de atención al cliente. Esto resulta
muy útil no solo para solucionar posibles problemas o transmitir información
personalizada, sino también porque el usuario puede necesitar, simplemente,
sentirse acompañado y saber que en cualquier momento puede pedir que le
echen una mano.
Ejemplo de atención al cliente
Hay establecimientos virtuales que hacen uso de una técnica consistente en proporcionar
personajes que hacen de asistentes virtuales (de manera parecida a los personajes que se
utilizan en Microsoft Office) para proporcionar sensación de acompañamiento. En estos
casos, el usuario es acompañado, a lo largo del proceso de compra, por un asistente de
compra que le explica qué sucede en cada momento y qué hay que hacer. Esta técnica,
cuando está bien utilizada, es útil para los usuarios.
Cada vez que un usuario hace una acción sobre el sistema, este debe mostrar
que ha recibido la petición y que está llevando a cabo la acción solicitada. En
caso contrario, el usuario puede pensar que el sistema no funciona correcta-
mente.
La importancia de la retroacción
En los establecimientos virtuales es importante proporcionar feedback a los usuarios cada

vez que llevan a cabo una interacción. Por ejemplo, si pulsan un botón es necesario que
alguna parte o aspecto visual de la interfaz cambie.
4.1.16. Simplicidad
A la hora de diseñar, a menudo se quieren tener en cuenta muchos aspectos

diferentes, de modo que se plantean soluciones complejas. Seguramente, la
regla de oro en estos casos es asegurar la simplicidad: ante dos posibles solu-
ciones de diseño, es mejor elegir la más sencilla.
4.2. Consideraciones para el diseño de establecimientos

electrónicos en dispositivos móviles
Los dispositivos móviles, como los teléfonos móviles inteligentes y las tabletas,
son una vía de acceso a internet muy habitual, por lo que a continuación se
presentan una serie de recomendaciones que son específicas del diseño para
este tipo de dispositivos.
4.2.1. Tamaño (y hardware)
La diferencia más evidente que presentan los dispositivos móviles respecto a

los ordenadores tradicionales se da en cuanto artefacto físico. Su hardware es
completamente diferente de los sistemas de escritorio (ordenador de sobreme-
sa y portátil), y tienen unas medidas mucho más pequeñas para favorecer su
portabilidad. Por lo tanto, las pantallas son de tamaño reducido, lo que pro-
voca grandes retos en cuanto a diseño de las interfaces y de las interacciones.
El hardware y la conectividad de los dispositivos también condicionan la in-
teracción y experiencia de usuario. Cuando el dispositivo está conectado a la
red telefónica móvil y no mediante wi-fi, el flujo de datos se encuentra nor-
malmente limitado en lo que respecta a la velocidad y al volumen de datos
transmitido. Esto significa que, a la hora de diseñar experiencias de comercio
electrónico, deberemos tener en cuenta si los usuarios se conectan bien por
la red móvil de datos o bien mediante wi-fi. Así, habrá que dejar elegir si se
cargan los vídeos o las imágenes que pesen mucho.
La batería y su duración también se pueden considerar elementos de hardwa-

re que limitan la experiencia de usuario. Actualmente, los smartphones tienen
una duración de funcionamiento bastante limitada y esto puede condicionar
la autonomía de interacción de los usuarios. Aun así, otros dispositivos móvi-
les, como por ejemplo las tabletas, presentan una autonomía muy superior,
incluso por encima de la de los ordenadores portátiles.
4.2.2. Contexto
Ya hemos apuntado previamente, en este mismo módulo, la importancia del

contexto en el diseño de experiencias interactivas. Pero la importancia del
contexto puede ser todavía mayor en los dispositivos móviles. De hecho, la
experiencia de compra en línea puede variar sensiblemente dependiendo de
si el usuario tiene el móvil conectado a la red wi-fi de casa y está sentado en
el sofá o, por ejemplo, se conecta desde un autobús urbano, volviendo del
trabajo. Precisamente, es de prever que, mientras el usuario se encuentre fuera
del hogar o de sus entornos habituales de trabajo o estudio, se limite a navegar
por el catálogo de productos y no efectúe la compra hasta que se encuentre en
un contexto más tranquilo y seguro, como el de su casa o la oficina. Por esta
razón se recomienda que la aplicación o web móvil de comercio electrónico

proporcione funcionalidades de lista de deseos o que el carrito de la compra
guarde los productos seleccionados para futuras sesiones de interacción.
4.2.3. Dispositivos multimedia completos
Como buena parte de los ordenadores, la mayoría de los dispositivos móviles

están dotados de cámara, micrófono y altavoces. Esto los convierte en disposi-
tivos multimedia completos, en el sentido de que disponen de las herramien-
tas de entrada y salida necesarias para captar y reproducir audio y vídeo. No
obstante, los dispositivos móviles presentan una serie ventajas respecto a los
ordenadores: son pequeños, altamente portables, están siempre a punto y los
tenemos cerca en todo momento. Así, a la hora de hacer una fotografía, nos
resulta mucho más fácil hacerlo con la cámara del teléfono móvil que con la
cámara del ordenador o incluso, por su facilidad de acceso, que con la cámara
fotográfica.
Esto tiene implicaciones interesantes para el comercio electrónico. Los clientes Consecuencias en el
pueden hacer una fotografía del producto adquirido y compartirla al instante; comercio tradicional
o pueden escribir una queja o publicar una opinión positiva del producto en La inmediatez y disponibilidad
un momento de alta insatisfacción o de gran satisfacción con el uso del pro- que proporcionan los disposi-
tivos móviles también tienen
ducto. Podemos sacar ventaja de estas situaciones, siempre que nos asegure- implicaciones en los procesos
de compra tradicionales. Los
mos de ofrecer un surtido de calidad y un buen servicio de atención al cliente. clientes de un supermercado o
de una librería tradicional pue-
Para hacerlo, hay que animar a los usuarios a compartir sus experiencias con den escanear el código de ba-
nuestro establecimiento virtual y con los bienes y servicios adquiridos, así co- rras del producto en la tienda
presencial y consultar precios y
mo facilitarles los espacios y mecanismos que lo hagan posible. opiniones en el momento.
4.2.4. Interacción gestual
Los dispositivos móviles actuales, principalmente smartphones y tabletas, ofre-

cen interfaces táctiles que proporcionan lo que se denomina estilos de inter-
acción gestual o basados en gestos. Los estilos de interacción son de especial
importancia en UX porque condicionan lo que los usuarios podrán hacer con
las aplicaciones del dispositivo. Cada producto interactivo, dependiendo de
su hardware y del tipo de interfaz que presenta, se caracteriza por un estilo
de interacción específico. Desde la introducción del iPhone, el primer disposi-
tivo de éxito con interfaz táctil, la interacción gestual se ha popularizado en-
tre usuarios y diseñadores de interfaces, y progresivamente se han ido incor-
porando nuevos y diferentes gestos para llevar a cabo acciones. Sin embargo,
uno de los principales inconvenientes que presenta la interacción gestual es
el del aprendizaje. A diferencia de como sucede en los sistemas de escritorio
convencionales que utilizan los ordenadores, donde el usuario dispone de un
menú de opciones con el que puede explorar y encontrar la opción que quie-
re llevar a cabo, en la interacción gestual los gestos nuevos de la aplicación
no se pueden explorar, sino que se deben aprender. Por lo tanto, si hacemos
que la interfaz funcione únicamente por interacción gestual, tendremos que

asegurarnos previamente de que los usuarios conocen los gestos para llevar a
cabo acciones, los entienden y serán capaces de recordarlos en el futuro.
Un diccionario�de�gestos, o glosario de gestos, recoge todas las interacciones Diccionario de gestos

gestuales que se pueden llevar a cabo y a las que la app da respuesta. Es reco-
Encontraréis un ejem-
mendable definir un diccionario de gestos que dé apoyo a nuestra app o utili- plo de diccionario de ges-
zar uno establecido. Además, es importante que los gestos considerados sean tos en la dirección http://
www.lukew.com/ff/entry.asp?
lo más cercanos posibles a los estándares porque así el usuario no tendrá que 1071.
aprender gestos que solo son específicos de nuestra app.
4.2.5. Multifunción y aplicación única
Desde la perspectiva del diseño, los dispositivos móviles se consideran multi- Multitarea en los
función en la medida en que proporcionan varias herramientas y funcionali- dispositivos móviles
dades. Pero del mismo modo que cuando una navaja suiza se convierte en un Cuando utilicemos una apli-
cuchillo, en unas tijeras o en un tenedor no es posible usar el resto de las fun- cación, esta es la única tarea
que podemos llevar a cabo en
ciones, los dispositivos móviles también se convierten en la app o en el web el dispositivo. Independiente-
mente de si el dispositivo y su
móvil (y solo en la app o web móvil) que en aquel momento se está ejecutan- hardware permiten la multita-
rea, desde el punto de vista del
do. Debido a sus características, y sobre todo al hecho de que en la pantalla uso y la interacción, solo ha-
solo se muestra una aplicación, se considera que un dispositivo móvil se con- cemos una tarea en cada mo-
mento, y es cuando el disposi-
vierte en una app o web móvil cuando esta se ejecuta. Así, cuando utilizamos tivo se convierte en la app o el
web móvil que en ese momen-
la app para consultar el tiempo, el dispositivo móvil se convierte en un apara- to utilizamos. Este hecho, apa-
to de información meteorológica; cuando empleamos la aplicación de correo rentemente obvio, condiciona
los usos y las interacciones que
electrónico, se convierte en un comunicador; o cuando en una tableta se opta diseñaremos en el dispositivo
y, en consecuencia, las accio-
por un juego o se selecciona un piano, la tableta se convierte en el tablero de nes que los usuarios llevarán a
juego o en el propio instrumento musical. cabo.
Así, a la hora de crear apps o webs móviles para iniciativas de comercio elec-
trónico, hay que tener en cuenta que, durante su uso, estas convierten el dis-
positivo multifunción del usuario en un dispositivo enteramente de comer-
cio electrónico, es decir, que el smartphone o la tableta se transforman en una
tienda virtual. El hecho de que los dispositivos móviles no sean multitarea
hace que la app o el web móvil diseñados tengan que ofrecer al usuario todo
lo que necesita mientras utiliza la tienda virtual. Si por ejemplo identificamos
que a nuestros usuarios les gusta crear listas de productos o hacer anotaciones
personales sobre los productos, la app o el web móvil deberán ofrecerles estas
funcionalidades, y así facilitar que continúen interaccionando con la tienda
virtual.
4.2.6. Aplicaciones nativas, aplicaciones web o aplicaciones

híbridas
Una cuestión sobre el desarrollo de las apps, que suscita mucho debate en el
momento de escribir estos materiales y que tiene implicaciones de diseño, es
si las aplicaciones móviles deben ser nativas, web o híbridas.
Denominamos aplicaciones�nativas a aquellas que se ejecutan directamente

sobre el sistema operativo del ordenador o dispositivo. Puesto que los dispo-
sitivos móviles actuales se basan principalmente en dos sistemas operativos
diferentes (iOS y Android), el trabajo de diseño y desarrollo de una aplicación
nativa se debe hacer para cada sistema operativo existente, si se quiere llegar a
la mayoría del público. Otro inconveniente es que las actualizaciones de con-
tenidos no son ágiles porque se requiere que cada app, y sus correspondien-
tes actualizaciones, sean aprobadas por la plataforma desde la que se ofrecen
(iTunes en el caso de iOS y Google Play en Android). A esto se añade el hecho
de que requieren que el usuario proactivamente las descargue en la tienda de
aplicaciones y que continúe descargando las futuras actualizaciones. Además,
los contenidos proporcionados en la app no son indexados por los buscadores
convencionales, lo que dificulta la localización y promoción externa de los
productos.
Entre las ventajas que presentan las aplicaciones nativas hay que destacar el
hecho de que funcionan más rápidamente y, por lo tanto, responden de ma-
nera más fluida a la interacción; y que siguen funcionando aunque temporal-
mente se queden sin conexión a internet. Además, pueden usar los sensores
del dispositivo, como por ejemplo la geolocalización (lo que no es posible en
el caso de los webs para móviles), ofreciendo servicios o funcionalidades vin-
culadas con estos sensores.
En cambio, las denominadas aplicaciones web o sitios�web�para�móvil se eje-

cutan mediante un navegador web y funcionan de igual modo en todos los
dispositivos que dispongan de un mismo navegador web, independientemen-
te de su fabricante y del sistema operativo. Este tipo de aplicaciones se cons-
truyen principalmente con HTML, CSS y Javascript, y presentan ventajas tan-
to a desarrolladores como a usuarios: los desarrolladores pueden distribuir la
aplicación (el sitio web) a un público más amplio y sin necesidad de adaptar-
la a cada sistema operativo; y todos los usuarios la visualizan igual, indepen-
dientemente del dispositivo y el sistema operativo que utilicen. Aun así, cada
navegador web ejecuta el código de las aplicaciones web de manera diferente.
Por este motivo, el desarrollador debe asegurarse de que el sitio web funciona
correctamente con cada navegador que haya en el mercado.
No obstante, los sitios web para móvil también presentan algunos inconve-
nientes. El usuario debe estar conectado continuamente a la red de datos (lo
que no siempre es posible con un dispositivo móvil) y, si la calidad de la co-
nexión a internet no es buena, el sitio web puede funcionar de manera más
lenta y menos fluida, proporcionando, en consecuencia, una peor experiencia
a los usuarios.
Las aplicaciones�híbridas, por su parte, consisten en “envolver” un sitio web

para el móvil con una aplicación nativa. Es decir, se construyen a partir de lo
que podríamos denominar una carcasa de aplicación nativa que se instala en
cada sistema operativo. Internamente, esta aplicación se comporta como un
sitio web, de manera que se conecta a internet con el navegador del dispositi-
vo. Estas aplicaciones presentan la ventaja de que se pueden adaptar y adecuar
mejor a cada sistema operativo, pero ofrecen algunos de los inconvenientes
de las aplicaciones web: requieren de conexión constante a internet, lo que
puede provocar que sean lentas.
Teniendo en cuenta la tecnología actual, la recomendación es diseñar y desa-

rrollar aplicaciones nativas. Son las que permiten presentar un diseño más
ajustado y ofrecer más funcionalidades; también permiten trabajar sin cone-
xión de datos y suelen proporcionar una interacción más fluida. Por lo tanto,
proporcionan una mejor experiencia al usuario.
4.2.7. Tiendas de aplicaciones y distribución de contenidos
Un cambio que han supuesto los dispositivos móviles es la manera de distri-

buir las aplicaciones y los contenidos. En los principales sistemas operativos
de dispositivos móviles, las tiendas de apps son la puerta de entrada de las
aplicaciones y muchos de los contenidos que los usuarios se instalan en los
dispositivos. Por lo tanto, las tiendas de aplicaciones son muy importantes
para las empresas con apps porque normalmente son la única vía para que los
usuarios se las instalen.
También hay que tener en cuenta que las tiendas de aplicaciones se suelen
llevar una comisión de la app, normalmente a modo de porcentaje sobre el
precio de esta (si es de pago) o del precio de los contenidos digitales que se
distribuyen en ella.
4.2.8. Comportamiento de usuarios
El comportamiento de los usuarios a la hora de acceder y utilizar servicios

de internet con dispositivos móviles es muy diferente a cuando lo hacen con
ordenadores: habitualmente llevan a cabo interacciones más breves pero más
repetidas a lo largo del tiempo. Por lo tanto, es importante prestar atención a
los procesos de compra largos y permitir que se puedan abandonar y retomar
más adelante.
Por otro lado, los usuarios suelen tener su atención dividida entre el dispositivo
móvil y su entorno físico más inmediato (la televisión, una conversación, un
desplazamiento en autobús, etc.). De aquí que se puedan producir más errores
e interrupciones y que se recomiende que las apps faciliten la resolución de
errores o retroceder en la secuencia de interacciones.
Cada vez es más habitual que los usuarios inicien las interacciones en un dis-
positivo y las continúen y completen en otros (por ejemplo, ven una informa-
ción en la televisión, usan el móvil o la tableta para hacer una búsqueda en in-
ternet y añadir un producto a una lista, y acaban comprando con el ordenador
de sobremesa). Desde el punto de vista del diseño, permitir interacciones entre
dispositivos implica incorporar nuevas funcionalidades al web y la app, lo que

aumenta su complejidad. En consecuencia, el diseño de las interacciones de-
berá estudiar los diferentes escenarios en los que se puede producir el cambio
de dispositivo, y decidir cómo orientar al usuario para que lo pueda hacer.
Resumen
En este módulo didáctico hemos estudiado los conceptos de usabilidad y de

experiencia de usuario. Hemos visto que la usabilidad busca la eficacia y efi-
ciencia de las personas en el uso de los productos digitales y sistemas interac-
tivos. Los productos, los sistemas o los establecimientos usables pueden ser
utilizados de manera sencilla por los usuarios a los que van dirigidos. Hemos
visto también que la experiencia de usuario se refiere a todo el proceso de in-
teracción de las personas con los productos o sistemas interactivos y que, por
lo tanto, incluye e integra el concepto de usabilidad. La experiencia de usuario
o UX busca generar percepciones y emociones positivas y que el usuario esté
satisfecho.
El proceso y las metodologías de diseño centrado en el usuario facilitan la crea-

ción y el desarrollo de productos, sistemas o establecimientos que puedan ser
útiles y usables para sus usuarios potenciales y generen experiencias positivas.
Para conseguirlo, se centran en conocer en detalle a los usuarios, sus necesi-
dades y preferencias.
Los métodos de investigación y análisis del diseño centrado en el usuario,

junto con los tests de usabilidad y los métodos de evaluación por inspección,
permiten obtener información útil sobre las necesidades y preferencias de los
usuarios, y evaluar, antes de su lanzamiento, el nivel de usabilidad y la expe-
riencia de usuario que proporcionan los nuevos productos, sistemas y estable-
cimientos que se desarrollan.
A pesar de que no existen reglas de oro sobre la usabilidad y la UX, hay algunas
recomendaciones que conviene tener en cuenta cuando se conciben y desa-
rrollan sitios webs y apps comerciales.
Actividades
1. A partir de las etapas del proceso de diseño centrado en el usuario que se han mostrado
en el módulo, presentad una propuesta de plan de proyecto para un establecimiento virtual
de productos de ferretería.
2. ¿Quiénes son los usuarios y clientes potenciales de un establecimiento virtual de ferretería?

¿Qué métodos de diseño centrado en el usuario utilizaríais para el análisis de requerimientos?
¿Por qué?
3. Diseñad un test de usabilidad para evaluar el proceso de selección de un producto y su

pago en el establecimiento virtual que vosotros elijáis. ¿Cuántas tareas tendrá el guión del
test? ¿Qué se conseguirá testeando estas tareas? ¿Qué mejoras se podrán aplicar en el sitio
web una vez realizado el test?
4. Considerad ahora el mismo sitio web de comercio electrónico que habéis elegido para la
actividad anterior y llevad a cabo vosotros mismos las tareas seleccionadas siguiendo el pro-
tocolo de thinking aloud. ¿Cómo os habéis sentido al efectuar estas tareas? ¿Os han parecido
difíciles? ¿Habéis identificado obstáculos al llevarlas a cabo?
5. Elaborad un prototipo de bajo nivel para un establecimiento virtual de ferretería que tenga
en cuenta lo siguiente:
• la página de inicio del establecimiento (prestando especial atención a la disposición de

los menús);
• la página de búsqueda en el catálogo, y
• las páginas para la formalización de la compra.
6. Consultad el sitio web del W3C y averiguad cómo se puede saber si un sitio web de co-
mercio electrónico es accesible para usuarios con dificultades visuales.
7. Suponed que un usuario quiere comprar toda la discografía de un cantante en un estable-

cimiento virtual de música. Haced un recorrido cognitivo del proceso que llevaría a cabo
este usuario. ¿Cuáles son las diferentes tareas que deberá efectuar? ¿Con qué dificultades se
podría encontrar?
Glosario
affordance f Cualidad de un producto digital interactivo para sugerir las funciones que
un usuario puede llevar a cabo al usarlo.
arquitectura de la información f Disciplina que se ocupa de definir la estructura, na-

vegación y terminología de un producto digital interactivo.
consistencia f Atributo relativo a la coherencia de los elementos de la interfaz de un pro-

ducto digital interactivo y que busca evitar que varíen de manera arbitraria.
diseño centrado en el usuario m Proceso de diseño que involucra al usuario en todas

las fases a través de las cuales se desarrolla un producto, desde su conceptualización hasta
la evaluación, pasando por su desarrollo. El objetivo del diseño centrado en el usuario es la
creación de productos que los usuarios encuentren útiles y usables.
diseño de interacción m Proceso de definición y estudio de las acciones que las personas
llevan a cabo en un producto digital interactivo.
experiencia de usuario f Percepción y emociones de un usuario cuando interacciona con

un sistema. Se refiere no solo a si la interacción ha sido un éxito y el usuario ha logrado sus
objetivos, sino que también tiene en cuenta todos los aspectos que influyen en la interacción,
si ha sido agradable y satisfactoria, etc.
feedback m Respuesta que proporciona un sistema o producto digital interactivo en la

interacción o acción de un usuario sobre su interfaz.
institucionalización de la usabilidad f Implantación del diseño centrado en el usua-

rio en una organización, y toda la argumentación necesaria para implantar los procesos re-
lacionados con la usabilidad en el desarrollo de proyectos.
interacción persona-ordenador f Disciplina que estudia el diseño, la evaluación y la

implementación de sistemas informáticos interactivos para que sean usados por los huma-
nos, así como los fenómenos más importantes que están involucrados en ello.
interfaz de usuario f Conjunto de elementos diseñados e incorporados en un ordenador

o un dispositivo con el que una persona puede interactuar. Las interfaces gráficas de usuario
aprovechan la capacidad gráfica de los ordenadores para presentar una interfaz amigable,
fácil e intuitiva.
métodos de diseño m pl Métodos que se centran en definir la estructura, navegación,

interacción y apariencia visual de los productos digitales interactivos.
métodos de inspección m pl Métodos de evaluación de la usabilidad llevados a cabo

por expertos que examinan si un sistema, o una parte de este, es usable. Normalmente los
métodos de inspección no involucran a usuarios.
métodos de investigación y análisis m pl Métodos orientados a la obtención de infor-

mación en proyectos de diseño centrado en el usuario. Se denominan también métodos de
indagación. Se utilizan principalmente para especificar el contexto de uso y los requisitos de
un producto digital interactivo.
orientación de la navegación f Manera como un usuario orienta sus decisiones al na-

vegar por internet o por un sitio web concreto.
test de usabilidad m Método de evaluación que, a partir de la observación de usuarios

reales llevando a cabo determinadas tareas, mide elementos de interacción e identifica errores
de diseño de un producto digital interactivo.
usabilidad f Eficacia, eficiencia y satisfacción con las que un producto o un sistema puede
ser utilizado por usuarios específicos para lograr ciertos objetivos en un contexto determi-
nado.
Bibliografía
Cooper, A.; Reimann, R.; Cronin, D.; Noessel, C. (2014). About face: the essentials of
interaction design (4.ª ed.). Indianápolis, Indiana: John Wiley & Sons.
Courage, C.; Baxter, K. (2005). Understanding your users: a practical guide to user requirements
methods, tools, and techniques. San Francisco, California: Morgan Kaufmann.
Dix, A.; Finlay, J.; Abowd, G. D.; Beale, R. (2003). Human computer interaction (3.ª ed.).
Prentice Hall.
Garrett, J. J. (2010). The elements of user experience: user-centered design for the web (2.ª ed.).
Indianápolis, Indiana: New Riders.
Goodman, E.; Kuniavsky, M.; Moed, A. (2012). Observing the user experience: a
practitioner’s guide to user research (2.ª ed.). Waltham, Massachusetts: Morgan Kaufmann.
Goodwin, K. (2009). Designing for the digital age: how to create human-centered products and
services. Indianápolis, Indiana: Wiley.
Hackos, J. T.; Redish, J. (1998). User interface task analysis for interface design. Nueva York:
John Wiley & Sons.
Isaacs, E.; Walendowski, A. (2001). Designing from both sides of the screen: how designers
and engineers can collaborate to build cooperative technology. Indianápolis, Indiana: New Riders.
Krug, S. (2014). Don’t make me think, revisited: a common sense approach to web usability (3.ª
ed.). Indianápolis, Indiana: New Riders.
Nielsen, J.; Mack, R. J. (1994). Usability inspection methods. Nueva York: John Wiley & Sons.
Nielsen, J. (1993). Usability engineering. San Francisco, California: Morgan Kaufmann.
Norman, D. A. (2013). The design of everyday things: revised and expanded edition. Nueva York:
Basic Books.
Preece, J.; Sharp, H.; Rogers, Y. (2015). Interaction design: beyond human-computer interac-
tion (4.ª ed.). Nueva York: Wiley Publishers.
Tidwell, J. (2010). Designing interfaces (2.ª ed.). Sebastopol, California: O’Reilly.

Pid 00221682-3 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Pid 00221682-3 PDF

Caricato da

Copyright:

Formati disponibili

Experiencia

2. Conocer al usuario: el diseño centrado en el usuario............... 20

3. Métodos y técnicas de diseño centrado en el usuario............... 28

4. Usabilidad y UX en el comercio electrónico............................... 40

4.1.1. Diseño orientado a los objetivos ................................... 43

Cada día utilizamos muchas y diversas máquinas, dispositivos e instrumen-

Al utilizar un teléfono móvil disfrutamos de su usabilidad o la sufrimos, así

En este módulo estudiaremos en qué consiste la usabilidad y la experiencia de

La usabilidad es parte de lo que actualmente se denomina experiencia de usua-

no solo proporciona un marco teórico de referencia para estudiar la UX y la

1. Conocer qué es la usabilidad y la experiencia de usuario, y ser consciente

2. Comprender el marco teórico donde se enmarcan la usabilidad y la expe-

3. Ser consciente de que conocer al usuario es clave para diseñar productos

4. Introducirse en el diseño centrado en el usuario y entender que la expe-

5. Conocer las diferentes técnicas y métodos del diseño centrado en el usua-

6. Aprender a identificar los métodos del diseño centrado en el usuario más

7. Conocer elementos específicos de la experiencia de usuario en el contexto

La usabilidad de los productos digitales y los sistemas interactivos se refiere a su

Pero antes de entrar a definir formalmente el concepto de usabilidad, es in-

Algunos estándares definidos y acreditados por la Organización Internacional Otras definiciones de la

De acuerdo con esta definición, en el concepto de usabilidad intervienen las

• la eficiencia, entendida como la posibilidad de que las personas comple-

• la satisfacción de los usuarios respecto a la facilidad de uso del producto

Como acabamos de ver, la interacción persona-ordenador es el área de cono- La usabilidad en el

Hay toda una serie de estándares internacionales que proponen metodologías

Algunas ventajas del uso de estándares

1.1. Usabilidad y experiencia de usuario

A pesar de que, como acabamos de ver, uno de los objetivos principales de

pie a la aparición del concepto de experiencia�de�usuario�(UX), que tiene en

Con el concepto de UX se incorporan, por lo tanto, aquellos aspectos percep-

Confusión entre usabilidad y experiencia de usuario

La UX se refiere a la experiencia subjetiva que obtiene un usuario cuando in-

La usabilidad y UX, además de ser atributos de calidad de un producto

1.2. La experiencia de usuario y el comercio electrónico

Hemos hablado hasta ahora de la interacción persona-ordenador, la usabilidad

Un establecimiento virtual que no tenga en cuenta la usabilidad y la UX

Veamos, a continuación, algunos casos ilustrativos de buenas prácticas en el

El buscador de Google se ha convertido en un ejemplo paradigmático de sitio

Simplicidad y textualidad, las características del diseño del buscador de

Y si lo que el usuario quiere hacer son búsquedas avanzadas, Google le proporciona un

el de un competidor. Este es un aspecto singular del comercio electrónico, y

La importancia de los ejemplos fallidos

A pesar de que este texto, voluntariamente, no comenta en detalle malos ejemplos de

Otro ejemplo de error es lo que podríamos considerar un exceso de creatividad en la

En definitiva, es importante desarrollar cierta sensibilidad en torno a la usabi-

Como vemos, a pesar de que la usabilidad y la UX incorporan elementos pro-

En este círculo de oportunidades que ofrece la tecnología no se tiene que ol-

1.3. Diseño UX, diseño de interfaces y diseño de interacción

Cuando hablamos de productos digitales interactivos, interfaces, usabilidad y

Los diseñadores UX se ocupan principalmente del funcionamiento adecuado

El diseño UX se fundamenta en el diseño centrado en el usuario y despliega

1.3.2. Diseño de interfaces

ciones de la interfaz. También se ocupa de la imagen de marca de la empresa

En el ámbito profesional, la diferencia entre diseñadores de interfaces y dise-

1.3.3. Diseño de interacción

El diseñador de interacción tiene muy en cuenta la perspectiva de los usuarios,

Dado su foco en los usuarios, los diseñadores UX tienen competencias de di-

1.4. Beneficios de la usabilidad y la experiencia de usuario

El primer beneficio de la usabilidad y la UX es la satisfacción del usuario: por-

comercio electrónico, que seguramente se beneficiará de una mayor afluencia

Un sitio web usable

Es habitual que, en el marco de un proyecto de diseño de un sitio web de Institucionalización de la

La inversión en usabilidad y UX será menor si se tiene en cuenta desde el primer momen-