UNIVERSIDAD MAYOR DE SAN SIMÓN

FACULTAD DE CIENCIAS Y TECNOLOGÍA

DIRECCIÓN DE POSGRADO

DESARROLLO DE APLICACIONES WEB

CENTRADAS EN LA EXPERIENCIA DE
USUARIO (UX)

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN I
.

POSTULANTE : FABIO ARANDIA PEDRAZAS

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia 2018

 ii

Agradecimiento y/o Dedicatoria

A mis padres y hermanos

Contenido

Índice de cuadros, gráficos y figuras 5

Resumen 6

1 Introducción 7

2 Generalidades 8

2.1 Antecedentes Generales 8

2.2 Antecedentes Específicos 9

3 Metodología 9

4 Desarrollo “Front End” 9

4.1 Interfaz de usuario (UI) 10

4.2 Fases de entendimiento 10

4.3 UI versus UX 11

5 Experiencia de Usuario (UX) 12

5.1 Facetas de la UX 14

5.2 Componentes de Experiencia de Usuario 19

5.2.1 Arquitectura de la información (AI) 19

5.2.2 Diseño de interacción 23

5.2.3 Usabilidad 23

5.2.4 Realización de prototipos 26

5.2.5 Diseño visual 27

5.3 Experiencia de usuario en aplicaciones web 27

5.3.1 Diseño centrado en el usuario 28

6 Conclusiones 31

3
 4
7 Bibliografía 32

8 Páginas Web 32
 5
Índice de cuadros, gráficos y figuras

Figura 1. Diferencia entre UI y UX (Fuente: Elaboración propia) ........................................ 12

Figura 2. Experiencia de Usuario (Fuente: Elaboración propia) ......................................... 13

Figura 3. Elementos de UX (Fuente: Peter Morville 32) ...................................................... 14

Figura 4. Sitio web muy usado (Fuente: https://www.wikipedia.org/) .................................. 15

Figura 5. Aplicación simple y fácil de usar (Fuente: https://www.google.com/) .................. 15

Figura 6. Sitio oficial de Apple (Fuente: https://www.apple.com/) ....................................... 16

Figura 7. Accesible para usuarios con dificultad de reconocimiento de colores (Fuente:

https://shop.franklinplanner.com) ......................................................................................... 17

Figura 8. Sitio oficial de Amazon (Fuente: https://www.amazon.com/) ............................... 17

Figura 9. Sitio oficial de Google Maps (Fuente: https://maps.google.com/) ....................... 18

Figura 10. Componentes de UX (Fuente: Traducción al castellano, Garrett, 2011)........... 19

Figura 11. Prototipo de una aplicación ................................................................................ 27

Figura 12. Diagrama del proceso del Diseño Centrado en el Usuario ................................ 30
 6
Resumen

Cada vez son más los usuarios que se sumergen en el mundo de la web y el internet, y es
por este hecho, que las Aplicaciones Web deben estar bien proyectadas, las cuales,
permitan atender a las características y capacidades diferentes que presenta la diversidad
humana. Por otra parte, el uso generalizado de dispositivos móviles se ha convertido en la
preferencia de los ciudadanos modernos para acceder e interactuar con las aplicaciones,
en su mayoría, móviles o web. Esta situación agrega aún más complejidad al desarrollo de
sitios y aplicaciones que respondan a las necesidades de los usuarios de este ámbito,
incluyendo al universo de las personas con discapacidad. En respuesta a esto, existen
numerosas áreas que se enfocan en mejorar el acceso y la interacción de las personas con
las Aplicaciones Web, tales como el diseño centrado en la Experiencia de Usuario que viene
muy de la mano con la Accesibilidad y la Usabilidad.

El presente estudio se centra en investigar, analizar y detallar los conceptos que ayudan a
mejorar el desarrollo de las Aplicaciones Web, considerando al usuario como el centro del
diseño y desarrollo. Con esta mentalidad, se define los conceptos, recomendaciones
necesarias y una base sólida para el desarrollo de aplicaciones web considerando la
Experiencia de Usuario, la Usabilidad y Accesibilidad Web de referentes internacionales.

Palabras clave: UX/UI, Experiencia de usuario, usabilidad, desarrollo y diseño web.

 7
1 Introducción

El mundo de la web es uno de los campos más importantes y cada vez son mayores las
exigencias para mejorar las aplicaciones. Con la evolución ascendente del desarrollo web
y móvil, además de la introducción de teléfonos inteligentes, tabletas y nuevas tecnologías
de acceso a la web, los desarrolladores y diseñadores se enfrentan al reto de crear
proyectos digitales e interactivos, adecuados a las necesidades concretas del usuario. Por
tal motivo el desarrollo de aplicaciones web adaptables a todos estos dispositivos, son cada
día más una realidad.

Anteriormente, las empresas que contaban con una aplicación web eran consideradas
empresas con un gran logro. Hoy en día, el objetivo más importante en la industria web no
es solo desarrollar y poner en marcha aplicaciones web, sino analizar las reacciones que
estas generan en los usuarios, entendiendo así sus principales necesidades para realizar
una aplicación amigable y sencilla.

La experiencia de usuario más conocida como “UX”, es un conjunto de tecnologías que

aumentan la satisfacción del usuario, mejorando la usabilidad y los conceptos relacionados
con la interacción entre usuarios humanos y las computadoras. La experiencia de usuario
es un aspecto significativo en la creación de diferentes tipos de productos y servicios.

Una de las principales interrogantes que debemos analizar a detalle al momento de lanzar
al mundo nuestra aplicación web, es qué quiere y necesita la gente o nuestros usuarios. UX
es una amplia rama que consta de varios componentes como: la arquitectura de la
información, diseño de interacción, usabilidad, prototipado, diseño visual, accesibilidad,
factores humanos, rendimiento del sistema entre otros. En este estudio, nos
concentraremos principalmente en algunos de ellos como base para desarrollar
aplicaciones web centradas en el usuario: la arquitectura de la información, el diseño de
interacción, la usabilidad, prototipado y el diseño visual. Otros componentes se
considerarán con menor relevancia, ya que el objetivo de estudio es analizar, comprender
y aplicar los conceptos principales del comportamiento de las personas en relación con
nuestras aplicaciones web.
 8
2 Generalidades

2.1 Antecedentes Generales

A medida que nos sumergimos en una Latinoamérica que busca ponerse a la vanguardia
en innovación y abordaje tecnológico, no es difícil constatar el lento avance que se tiene en
este ámbito. Experiencia de Usuario (UX) es un campo aún poco conocido por los
desarrolladores de aplicaciones web adaptables a los diversos dispositivos; que reúne a la
informática con el diseño, innovación, negocios, marketing y psicología con el objetivo de
mantener la atención del usuario sobre una determinada aplicación.

El problema en el desarrollo de software es que las prácticas tradicionales son más

populares que las centradas en el usuario, en muchas ocasiones este es un problema que
lleva proyectos al fracaso. La razón es la falta de atención a los aportes de los usuarios.

UX, al ser un concepto relativamente nuevo aún no logra el impacto necesario en las
grandes o pequeñas empresas para implementar en sus aplicaciones, esto se debe a
diferentes motivos; como el desconocimiento sobre los beneficios, la diferenciación y
eficiencia que entrega la experiencia de usuario; la repulsión a la innovación y a los cambios
que estaría expuesto con este nuevo concepto, dado que la experiencia de usuario es
multidisciplinario y dinámico, que necesita un entorno flexible y ágil, orientado a los usuarios
y altamente tolerante a la incertidumbre. Finalmente tenemos la falta de áreas académicas
para formar expertos en UX en el mundo de la web, por lo que carecen de validación
profesional, desconociendo así todas las utilidades que puede aportar un experto en esta
área, revalorizando los productos en una empresa de desarrollo de software.

A pesar del lento avance en la experiencia de usuario en nuestra región, crece el número
de empresas que van implementando este concepto en sus aplicaciones abriendo un nuevo
mercado, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el
mínimo esfuerzo.
 9
2.2 Antecedentes Específicos

El diseño de experiencia de usuario en nuestro país, es un servicio que ofrecen solo algunas
empresas dedicadas al marketing y diseño web como equipos independientes,
irónicamente ofertadas a otros países quienes están muy sumergidos en esta área; dado
que en nuestro medio poco o nada se valora la importancia y las ventajas que aporta este
concepto.

Es en los últimos años que se está tratando de introducir “UX” al mercado para mejorar el
uso de las aplicaciones web, por lo que el trabajo en esta área tiene aún bajo grado de
confianza para su implementación, orientando sobre las ventajas que puede generar sobre
un determinado producto.

En nuestras entidades de formación académicas tampoco se toma muy en cuenta el

concepto de UX, por mencionar una experiencia, durante el desarrollo del diplomado
“Experto en desarrollo de aplicaciones empresariales” se desarrolló una aplicación
orientada a la Seguridad Industrial para empresas del ámbito de la construcción, en la que
no se hizo énfasis de un desarrollo y diseño basado en la experiencia de usuario.

3 Metodología

Para el presente trabajo se utilizarán los siguientes métodos de investigación:

• Método Bibliográfico, debido a que se realizará la lectura y compilación de libros
relacionados al tema de estudio.
• Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio, para la redacción del presente trabajo.

4 Desarrollo “Front End”

En la industria del desarrollo de aplicaciones web, “Front End” se conoce como la

especialidad que abarca el uso de las tecnologías para trabajar una interfaz con la cual el
usuario interactúa directamente. Normalmente estas tecnologías son desarrolladas en los
lenguajes de HTML, CSS y JavaScript; también se usan como apoyo las herramientas de
diseño gráfico como Illustrator, Photoshop, Fireworks y actualmente Adobe XD, este último
precisamente es una aplicación de software de diseño de experiencia de usuario. El objetivo
es desarrollar la interfaz gráfica (UI), buscando una experiencia de uso bien valorada por el
 10
usuario final, siendo en algunos casos necesario hacer investigación, estudios y pruebas
para llegar a este fin.

Casi todo lo que se ve en la pantalla cuando accedemos a una aplicación web es desarrollo
“Front End”, la estructuración de los apartados, tamaños, márgenes entre estructuras, tipos
de letra, colores, adaptación para distintas pantallas, los efectos de ratón, teclado,
movimientos, desplazamientos, efectos visuales, etc. El desarrollo de proyectos para un
“Front End”, en la mayoría de las ocasiones van muy de la mano con el diseño, para la
manipulación, creación de iconos, retocado de imágenes, diseños vectoriales, ilustraciones
y todos los recursos necesarios para llevar adelante esta tarea.

4.1 Interfaz de usuario (UI)

En el proceso de desarrollo de una interfaz de usuario para aplicaciones web, se parte de

la creación de “wireframes y mockups” para luego sumar a la base de esa construcción con
elementos de control de una interfaz, que son visibles para el usuario o a través de los que
puede efectuar alguna acción. En ello se incluyen desde simples líneas de comandos
basadas en texto hasta interfaces gráficas de usuario con un diseño más completo,
agradable y llamativo. Entonces podemos deducir que la interfaz de usuario es lo primero
que encontrará e interaccionará el usuario al llegar a la aplicación web creada; ya no se
busca simplemente que la interfaz de usuario sea útil, sino que esté estéticamente diseñada
para su facilidad de uso y efectividad en las acciones que el usuario realice en dicha
aplicación web.

Estos desarrolladores y diseñadores son los encargados de diseñar cada pantalla o página
con la que interactúa un usuario, asegurándose de que la UI se comunica visualmente a
través de la ruta que ha diseñado la persona encargada de la UX gracias a la presentación
de imágenes, temas y otros.

4.2 Fases de entendimiento

La meta al momento de crear una interfaz gráfica para aplicaciones web u otras aplicaciones
de software, es que las siguientes fases ocurran en el menor tiempo posible.
 11
• Fase emocional: Etapa donde el cerebro reconoce colores, imágenes y distribución
espacial en la pantalla.
• Fase de identificación: Es el momento en que el cerebro intuye la función de cada
elemento en la pantalla. Esto prepara al usuario para tomar una acción.
• Fase de ejecución: Es la etapa donde el usuario interactuará con uno de los
elementos de la interfaz.

Algunas reglas o recomendaciones que se debe tomar en cuenta durante el proceso de

desarrollo y diseño de una interfaz de usuario son:

• La estructura del sistema no debe definir la interfaz, y viceversa.

• La necesidad a solventar pesa más que la tecnología que se usa.
• No empezar un proyecto a menos que esté 100% bien definido.
• Categorizar lo mejor posible a los usuarios de nuestro producto.
• Pensar en “flujos” no en “características”.
• Crear prototipos rápidos. Desecharlos con la misma rapidez.
• Hacer que el siguiente paso sea siempre obvio.
• Simplificar todo.
• Iterar y definir.

4.3 UI versus UX

Podemos estar confundidos acerca de cuál es exactamente la diferencia entre el diseño UX

y UI. UX analiza la experiencia general del producto, mientras que la UI se centra más en
la apariencia, como fuentes, colores, botones, diseño y espacios (Canziba, 2018, p. 8).

Si tomamos un ejemplo de un sitio web de reservas: Reservar un vuelo desde Bolivia a

Europa; reservar en este caso es el contenido principal, la aplicación web en sí nos
proporciona una interfaz de usuario con la opción de buscar los vuelos y elegir el que
necesitamos. Sin embargo, todo el proceso en el que interactuamos con la UI, desde la
búsqueda hasta la elección, y al final, la reserva del vuelo es el proceso UX, donde el
contenido principal, la reserva en nuestro caso, está hecho. Otro ejemplo bastante claro y
cotidiano podemos observar a continuación.
 12

Figura 1. Diferencia entre UI y UX (Fuente: Elaboración propia)

Es realmente importante que UX se involucre desde la primera fase del desarrollo del
producto para reducir costo, ya que puede detectar problemas en la fase inicial y
solucionarlos. La interfaz de usuario es la conexión del usuario a su aplicación, que debe
ser lo más simple y clara posible para este. Debe permitirle a su usuario hacer su trabajo
de una manera agradable, fácil y eficiente.

5 Experiencia de Usuario (UX)

La experiencia de usuario o (UX) es la totalidad del efecto o efectos que siente como
resultado de la interacción y el contexto de uso de un dispositivo, una aplicación de software
o un producto, incluyendo la influencia de la usabilidad, la utilidad y el impacto emocional
durante la interacción. En síntesis, el diseño de la experiencia de usuario es un término
general para cualquier tipo de actividad que brinde una mejor experiencia para el usuario.
Nos centraremos en estudiar los principales elementos y componentes de la UX que
colaboran en el desarrollo de mejores aplicaciones web.

UX se centra en cómo la estructura general afecta al usuario, como se siente y que

reacciones provoca. Se necesita crear un diseño no solo agradable, sino también propio y
bien trabajado, es por eso que un desarrollo y diseño centrado en el usuario es importante.
Para lograr sentimientos positivos del usuario durante el uso de una aplicación web, los
 13
desarrolladores y diseñadores deben ser capaces de comprender los objetivos, deseos,
miedos, comportamientos y ambiciones de los usuarios (Orlova, 2016).

La interacción humano - computadora abarca el comportamiento humano frente a

aplicaciones y se usa para impulsar el diseño del sistema y el desempeño de los usuarios,
los cuales son medibles en el uso de las aplicaciones. El usuario es un humano y una
aplicación que no toma esto en cuenta es la causa más probable de errores y fallas. Todos
estos factores nos ayudan a lograr una buena experiencia de usuario.

Figura 2. Experiencia de Usuario (Fuente: Elaboración propia)

En una aplicación web, la experiencia de usuario se identifica no solo con la usabilidad.

También se ve afectado por más componentes que cubre la UX. Algunos de ellos
reconocidos como cualidades fundamentales de las aplicaciones web, las cuales afectan
en la experiencia de los visitantes. En este documento nos centraremos en cinco de ellos:
la arquitectura de la información, el diseño de interacción, el prototipado, la usabilidad y el
diseño visual. Los conceptos de funcionalidad y estrategia de contenido se usarán menos.
Una misma aplicación no siempre será interesante para dos usuarios diferentes. Un solo
diseño dará como resultado múltiples experiencias de los visitantes dependiendo de las
variaciones en los usuarios de la aplicación web. Es por eso que siempre es importante
desarrollar y diseñar para un público objetivo en particular, basado en el conocimiento sólido
 14
de esa audiencia. Entonces nuestro objetivo es mejorar la satisfacción del usuario
perfeccionando la usabilidad, la accesibilidad y el placer proporcionados en la interacción
entre el usuario y la aplicación web.

5.1 Facetas de la UX

Morville presenta las facetas o variables de la UX en un diagrama al que popularmente se

le ha llamado “El panel de Morville”, en el cual se expone aspectos importantes a tomar en
cuenta.

Figura 3. Elementos de UX (Fuente: Peter Morville 32)

La conclusión más importante de dicho planteamiento es la UX vista como la integración de

varias disciplinas y cualidades, veamos a detalle cada una de ellas (Morville & Rosenfeld,
1998) y (Garrett, 2011).

• Útil: se puede entender como la utilidad que tiene el sitio para el usuario, la
capacidad de responder a sus necesidades. Debemos ser capaces de descubrir y
crear productos que realmente resuelvan un problema. La utilidad es una necesidad,
porque si los usuarios no perciben que una aplicación es útil, no tendrán un motivo
para regresar.
 15

Figura 4. Sitio web muy usado (Fuente: https://www.wikipedia.org/)

• Usable: relacionada con la facilidad de uso, depende estrechamente de la

aplicación, de los conceptos de la ciencia y de la interacción persona ordenador. Si
bien las interfaces fáciles de usar parecen intuitivas, generalmente se requiere
mucho trabajo para hacerlas de esa manera. Practicar el diseño iterativo junto con
múltiples rondas de pruebas de usuario garantiza que una aplicación sea utilizable.

Figura 5. Aplicación simple y fácil de usar (Fuente: https://www.google.com/)

• Deseable: relacionada estrechamente con el diseño emocional. Un software es

deseable como producto de la eficiencia en armonía con la imagen, lo gráfico y el
uso de fotos elegantes y brillantes para atraer las emociones del usuario.
 16

Figura 6. Combinación de estructuras, colores y contenido

(Fuente: https://envylabs.com/)
• Localizable: referido a la capacidad de navegación donde los usuarios puedan
encontrar los elementos, navegar fácilmente y encontrar la información que busca.
Una forma de mejorar la capacidad de búsqueda es a través de un estudio de
clasificación de tarjetas, para comprender los modelos mentales de los usuarios, de
la información que se intenta organizar.

Figura 6. Sitio oficial de Apple (Fuente: https://www.apple.com/)

• Accesible: para una aplicación, será importante tratar de garantizar el acceso a la

mayor cantidad de usuarios en la mayor variedad de contextos. Se analiza si el
grupo de usuarios tiene algún tipo de discapacidad (auditiva, visual, motriz, u otros).
 17
Por otro lado, la accesibilidad sin importar el dispositivo del usuario (computadora
de escritorio, tableta, teléfono, etc.).

Figura 7. Accesible para usuarios con dificultad de reconocimiento de colores

(Fuente: https://shop.franklinplanner.com)
• Creíble: indica la necesidad de mostrar los elementos que expongan un contenido
creíble y confiable ante los usuarios, donde todos estos elementos causan buena
impresión y crean confianza.

Figura 8. Sitio oficial de Amazon (Fuente: https://www.amazon.com/)

 18
Hoy en día, la credibilidad en el internet se ha vuelto crucial ya que, cualquiera puede iniciar
un sitio o aplicación web y, como resultado, existen muchos sitios de suplantación de
identidad y estafa para engañar a los usuarios.

• Valioso: nuestros productos deben de cumplir la misión de la organización, pero

además ofrecer un valor agregado y mejorar la satisfacción del usuario. Un sitio web
o una aplicación exitosa debe proporcionar valor tanto al usuario como a la empresa
que lo crea. Los otros elementos contribuyen en gran medida a crear valor. Tener
un producto útil y accesible que sea deseable puede, en sí mismo, crear valor.

Figura 9. Sitio oficial de Google Maps (Fuente: https://maps.google.com/)

 19
5.2 Componentes de la Experiencia de Usuario

Para garantizar que la experiencia de usuario en aplicaciones web sea la mejor posible, se
deben considerar algunos componentes durante el proceso de desarrollo y diseño.

Figura 10. Componentes de UX (Fuente: Traducción al castellano, Garrett, 2011)

Si bien la Experiencia de Usuario engloba muchas áreas, como se mencionó

anteriormente, nos centraremos en los componentes más relevantes en el ámbito de
aplicaciones web y las repercusiones que tienen antes, durante y después del desarrollo
en dichas aplicaciones (Marli Ritter, 2017).

5.2.1 Arquitectura de la información (AI)

Cuando se habla de arquitectura de información el camino es conectar a las personas con

el contenido de una manera que sea más comprensible para ellas. Crear una jerarquía de
información en nuestras aplicaciones: acceso, navegación, página de inicio, categorías,
mapas, ayuda, contacto, etc. Toma los diferentes tipos de información en contexto y la
organiza de una manera que facilite encontrar el contenido.

La Arquitectura de la Información brinda muchos beneficios al ubicar rápidamente la

información, encontrar con el menor esfuerzo, establecer relaciones o enlaces, además de
 20
reducir costos de mantenimiento y procesos de reingeniería. Para una empresa es
importante que sus clientes encuentren la información, y que esta información conduzca al
usuario a tomar una decisión. Uno de los mayores componentes de la arquitectura de
información es la navegación. Por ejemplo, se debe analizar si para nuestra aplicación en
concreto la navegación de alto nivel es mejor que la navegación de barra lateral o si es
factible los menús desplegables, de ser así, de qué manera el usuario los desplegará.

La AI es más que saber dónde van ciertos elementos en cada pantalla de la aplicación, sino
que se trata de cómo esos elementos afectan la percepción de la empresa, la facilidad de
navegación mencionada anteriormente, el impacto en el diseño, la respuesta emocional
positiva o negativa que un usuario tiene de la aplicación, entender dónde estamos como
usuarios y dónde está la información que queremos en relación con nuestra posición.

Preguntarnos si nuestra aplicación web está estructurada de manera que cualquier usuario
pueda hacer uso de ella sin importar que dispositivo o navegador este utilizando, puede
ayudarnos a resolver parte del problema y estructurar mejor nuestro contenido. Entonces
cuando se comienza a separar el contenido y dividirlo en categorías, o cuando se dibuja un
menú de nivel superior para ayudar a los usuarios a comprender dónde se encuentran en
la aplicación, estamos practicando parte de la arquitectura de la información.

Algunos puntos que se debe analizar con la profundidad y atención necesaria al momento
de hacer arquitectura de la información son los siguientes:

• Analizar el flujo de usuarios a los que se enfrentará la aplicación web.

• De qué manera ayuda la aplicación al usuario a catalogar su información.
• Presentación de la información al usuario.
• Analizar si la información ayuda al cliente y las decisiones de conducción.
• Considerar y verificar qué funciones deberían ir agrupadas.
• Y por último qué elementos deberán estar disponibles desde múltiples ubicaciones
y si son necesarios.

Para satisfacer los puntos mencionados, debemos centrarnos en una serie de cosas: el
público objetivo, las tecnologías relacionadas con la aplicación web y los datos que se
presentarán a través de la aplicación.
 21

Se considera buena práctica agregar “Crear Nuevo”, “Buscar”, “Iniciar y Cerrar Sesión”,
“Ayuda” y “Configuración” en la navegación superior o global de las aplicaciones web, para
asegurarse de que los usuarios tengan acceso rápido sin importar el contexto. También
utilizar la navegación izquierda para identificar grupos o “Folders” de información, que
ayuden a los usuarios a organizar su trabajo. Si bien esto no es una regla es valioso analizar
y aplicar estos otros aspectos según el público objetivo y el tipo de aplicación que se vaya
a desarrollar.

En aplicaciones de software, el diseño a nivel de arquitectura tiene una gran influencia en

la usabilidad del sistema. Si bien la interfaz gráfica de un producto es un elemento de
importancia para los usuarios en su primera interacción con alguna aplicación informática,
también su usabilidad depende de la estructura y organización del contenido mostrado. En
muchos equipos de desarrollo de software, la realización de las actividades de un diseñador
comienza básicamente después de haber sido aprobada la arquitectura de información.

• Audiencia o usuarios
Sin importar las características de la aplicación, estas definiciones deberán estar presentes,
y deben traducirse en acciones para poder atenderlas adecuadamente.

✓ Por capacidad física: los usuarios de la aplicación incluirán personas con

discapacidades físicas, por lo que una de las metas que debe tener toda aplicación
es permitir el acceso de ellos.
✓ Por capacidad técnica: los usuarios que usen la aplicación se dividirá de acuerdo a
la experiencia técnica que tenga; por ello se deben plantear accesos simples
mediante enlaces y otros más complejos.
✓ Por conocimiento de la institución: los usuarios de la aplicación se dividirán entre
quienes conocen la institución y quienes no la conocen.
✓ Por necesidades de información: los usuarios de la aplicación se dividirán entre
quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si
existe algo que les pueda ayudar.
✓ Por ubicación geográfica: dentro de la audiencia siempre habrá usuarios que
ingresan a la aplicación desde lugares diferentes, por lo que los contenidos deben
responder también a esta diversidad.
 22

• Organización de la información

Existen diferentes esquemas de organización, en las cuales se puede dividir en exactas y

subjetivas o ambiguas. La organización exacta se refiere a aquellas que tienen una sola
interpretación, como pueden ser las que se organizan en forma alfabética (diccionarios,
directorios y listados ordenados), cronológicas (revistas, periódicos, publicaciones),
geográficas (agencias y sucursales, portales organizados geográficamente). Mientras que
la organización subjetiva se basa en diversos criterios, como son las temáticas (portales
horizontales, tiendas organizadas por rubros), funcionales (intranets corporativas),
audiencia específica y la metafórica.

• Sistemas de navegación

El sistema de navegación es uno de los temas más importantes en la accesibilidad y

usabilidad de aplicaciones web. Proveer opciones para ir de un lado a otro, poder regresar
a la pantalla anterior o ir hacia otras secciones con el menor esfuerzo, puede brindar al
usuario cierta placentera comodidad. Existe barras de navegación horizontales, verticales,
desplegables y/o permanentes. La navegación se puede clasificar en: globales (acceso a
las secciones principales), locales (acceso a las secciones internas) y las de acceso a
secciones relacionadas. Se recomienda presentar información que permita conocer la
ubicación exacta del navegante, como opciones de subir o bajar cuando existen textos
grandes. En la navegación externa, se puede apoyar la navegación utilizando tablas de
contenido, índices, mapas del sitio o visitas guiadas.

• Sistemas de Búsqueda

En ciertas aplicaciones web la posibilidad de explorar el contenido puede ser un pasatiempo

placentero, sin embargo, cuando una aplicación cuenta con una gran cantidad de
información puede convertirse en una pesadilla. Los sistemas de búsqueda permiten
encontrar rápidamente la información, y en algunas interfaces permiten realizar opciones
de filtrado por secciones o por tipo de información. En el caso de contenidos dinámicos, es
necesario implementar un buscador interno.
 23
5.2.2 Diseño de interacción

Este componente se basa en las interacciones específicas entre los usuarios y la pantalla.
El diseño visual responde a los objetivos del usuario soportados en el diseño de interacción
para comunicar usando gráficos, imágenes, fuentes, color, íconos, etc.

Se trata de definir las formas de operar la interfaz (por ejemplo, si el ingreso de información
o selección se produce mediante teclado, mouse, pantalla táctil, o una combinación de
ellos), los flujos de operación y las respuestas del sistema. En definitiva, pone el foco en el
contacto entre el usuario y el artefacto.

El diseño de interacción también utiliza el prototipado para definir comportamientos y

funciones específicas para diferentes componentes. Por ejemplo; en un diseño de
aplicación móvil, puede que la página de inicio de sesión aparezca "a un ritmo lento" de
manera ineficiente, o se desliza hacia la derecha. Esta clase de transición debería ser
explorada en un concepto interactivo para que el producto final sea implementado tan
exactamente posible a la intención del diseñador.

5.2.3 Usabilidad

La usabilidad es un atributo de calidad de un producto que se refiere sencillamente a su

facilidad de uso. No se trata de un atributo universal, ya que un producto será usable si lo
es para su audiencia específica y para el propósito específico con el que fue diseñado.
Por ejemplo, se puede decir que una aplicación móvil para invertir en la bolsa será usable
si resulta fácil de usar para sus inversores y con el propósito de operar en los mercados, no
necesariamente para otro tipo de usuarios ni propósitos.

Las personas cambian muy lentamente, mientras que la tecnología cambia rápidamente. El
concepto no se trata solo de tecnología y facilidad de uso. Para entender el significado de
que un producto sea fácil de usar se debe tomar en cuenta lo siguiente:
 24
✓ Dimensiones
La usabilidad tiene dos dimensiones, la dimensión objetiva o inherente, y la dimensión
subjetiva o aparente. La dimensión objetiva es la que se puede medir mediante la
observación, donde podemos desgranar en los siguientes atributos:

✓ Facilidad de Aprendizaje: Que tan fácil resulta para los usuarios llevar a cabo
tareas básicas la primera vez que se enfrentan al diseño.

✓ Eficiencia: Una vez que los usuarios han aprendido el funcionamiento básico del
diseño, contempla que tiempo les toma la realización de tareas.

✓ Cualidad de ser recordado: Cuando los usuarios vuelven a usar el diseño después
de un periodo sin hacerlo, cuanto demoran en volver a adquirir el conocimiento
necesario para usarlo eficientemente.

✓ Eficacia: Durante la realización de una tarea, cuáles y cuantos errores comete el

usuario, que tan graves son las consecuencias de estos errores, y que tan rápido
puede el usuario deshacer las consecuencias de sus propios errores.

La dimensión subjetiva, en cambio, se basa en la percepción del usuario:

✓ Satisfacción: Engloba que tan agradable y sencillo le ha parecido al usuario la

realización de las tareas.

La usabilidad tiene que ver con el aprovechamiento de datos para determinar la validez de
las decisiones del diseño. Mientras que en una compañía dada hay personas de diferentes
orígenes hablando de los objetivos del negocio o las específicas restricciones del diseño,
es el papel del diseñador UX defender las necesidades de un usuario y comunicar cualquier
punto de frustración o inconveniente que se haya sentido durante el uso de un producto.

Éstos datos pueden obtenerse de varias maneras - desde grupos focales hasta encuestas,
desde estudios de usabilidad con base en laboratorios hasta entrevistas individuales y
 25
visitas al sitio, seguimiento de ojos, categorización de contenidos, pruebas A/B, telemetría,
etc.

Según (Krug, 2014) hay muchas definiciones diferentes de usabilidad, que a menudo lo
dividen en actitudes como:

✓ Útil: si hace algo que las personas deben haber hecho.

✓ Aprendizaje: si los usuarios pueden descubrir como usarlo.
✓ Memorable: si tienen que volver a aprender cada vez que lo usan.
✓ Eficaz: si hace el trabajo de manera correcta.
✓ Eficiente: si lo hace con una cantidad razonable de tiempo y esfuerzo
✓ Deseable: si los usuarios lo quieren
✓ Valioso: si es agradable, o incluso divertido.

La usabilidad es fundamental en la experiencia del usuario. Sin usabilidad, es difícil crear

una experiencia de usuario funcional. Es importante, porque si un producto tiene mala
usabilidad, los usuarios no pueden lograr los objetivos de una manera eficiente, efectiva y
satisfecha teniendo como resultado el abandono de la aplicación web y la probabilidad de
que el usuario busque otra alternativa. Un producto con mala usabilidad conduce a una
mala experiencia del usuario. Al desarrollar una aplicación web, es fundamental garantizar
que se pueda reducir el riesgo de perder usuarios para los competidores.

El test de usabilidad auxilia con la comprensión del espacio del producto mientras define
los comportamientos y las necesidades del usuario. A un alto nivel, es buena práctica validar
la hipótesis con usuarios reales para medir y validar un producto cambiante para confirmar
que está satisfaciendo las necesidades de las personas.

• Diferencia entre Usabilidad y UX

La usabilidad y la experiencia del usuario no son lo mismo. En primer lugar, el objetivo

de los dos conceptos es diferente. Desde la perspectiva de una aplicación web, el
principal objetivo de la usabilidad es hacer que una aplicación web sea fácil de usar
permitiendo a los usuarios lograr sus objetivos interactuando con dicha aplicación. Y por
otro lado el objetivo de la UX es brindarles a los usuarios la alegría de usar una
 26
aplicación web para darse cuenta de su interacción. En segundo lugar, los términos
usabilidad y experiencia del usuario se pueden definir mediante diferentes afirmaciones.
La usabilidad se puede tomar como: si fue posible que realicen sus objetivos los
usuarios, mientras que la experiencia del usuario se puede concretar con que si el
usuario obtuvo la experiencia más gratificante posible.

Por último, la usabilidad requiere que los usuarios tengan la capacidad de influir en el diseño
de la interfaz de usuario de la aplicación web, mientras que la experiencia del usuario
requiere el esfuerzo colectivo del equipo de diferentes departamentos como programación
web, ingeniería, marketing y diversos campos de diseño. Una interfaz de usuario utilizable
es una que generalmente es intuitiva, simple o extremadamente fácil de aprender. Una
interfaz de usuario cuyo objetivo es crear una experiencia de usuario positiva es agradable
para el usuario. Sin embargo, la usabilidad sigue siendo importante. Esto no significa que
cuando la atención se centre en la experiencia del usuario, la interfaz de usuario no se
pueda utilizar.

5.2.4 Realización de prototipos

Un prototipo puede definirse como una versión preliminar desde la cual otras formas son
desarrolladas. El prototipado ofrece una manera barata y flexible de probar lo que luce
magnífico y es adecuado para el propósito, ya sea una aplicación web, móvil, un producto
físico. También ofrece una manera de iterar basada en la respuesta de las partes
interesadas y usuarios en el contexto de estudios de usabilidad.

Esto nos proporciona una idea sobre la funcionalidad de nuestro diseño y cualquier cambio
necesario para hacer el trabajo prolijo y funcional. En definitiva, el prototipado es importante
porque te acerca a la funcionalidad final del producto antes de invertir tiempo, recursos y
dinero en el desarrollo.
 27

Figura 11. Prototipo de una aplicación

5.2.5 Diseño visual

El diseño visual trata de usar el aspecto visual de nuestra aplicación para mejorar la
experiencia de usuario. El diseño visual no lo es todo para diseñar, es una parte crucial de
un producto bien pensado. Comunica mucho sobre el contenido y la empresa como tal y
puede influir en qué tan deseable y atractivo es la aplicación.

5.3 Experiencia de usuario en aplicaciones web

El reto es mejorar la experiencia de usuario en nuestras aplicaciones web, pero, hay que
cuestionarnos cómo lograr eso. Si bien depende el tipo de aplicaciones web y el público
objetivo quienes interactúen con la aplicación, en general se puede mencionar algunos
puntos, que eleven las reacciones positivas en los usuarios.

• Pensar en los comportamientos que se quiere que tengan los usuarios en la

aplicación web.
• Recompensar, con satisfactorias respuestas cada comportamiento, pero sin
exagerar o haremos perder el tiempo al usuario con excesivos mensajes.
• Estas respuestas pueden ser animaciones, ilustraciones o mensajes que ayuden al
usuario a confirmar que completo la tarea, o si bien hubo algún problema.
• Buscar que la retroalimentación se sienta positiva y sea visualmente agradable.
 28
• Realizar pruebas para asegurar que la interfaz responde correctamente.
• Las pruebas A/B ayudan a asegurar que se está teniendo el impacto correcto en el
comportamiento de los usuarios.
• Al final de cada tarea, pensar en qué debe hacer el usuario después.
• Colocar la siguiente tarea en su camino para que se continúe moviendo.
• Alinear el impacto de la recompensa con la dificultad de la tarea. Una tarea simple,
una recompensa pequeña y un gran proyecto merece un gran y menos frecuente
pago.

Permitir la personalización de la aplicación a los usuarios finales también juega un papel

importante.

• Preferencias de privacidad: El usuario debería tener el control de quién ve el

trabajo que está creando y cómo se comparte.

• Notificaciones: Los usuarios quieren el control de cómo son contactados, por

correo electrónico, por web o móvil. Es importante respetar el tiempo del usuario
dándole el control de cómo será interrumpido.

• Vistas: La información es clave en las aplicaciones web empresariales. Permite que

sus usuarios sorteen y manipulen las vistas (visualización) de información que ellos
necesitan para sus reportes e ideas.

• Bases o fondos, pero no colores: Si trabajas todo el día en una aplicación web,
es agradable darles a los usuarios la habilidad de personalizar la apariencia de la
aplicación. Se debe tener cuidado de dar a los usuarios el control de cambiar los
colores, esto hace más difícil el que asignemos particulares colores a las acciones.

5.3.1 Diseño centrado en el usuario

Los criterios de Nielsen Norman (Group, 2018), cuando plantean que para asegurar
empíricamente que un software cumpla con los niveles de usabilidad requeridos, el
diseñador necesita de una metodología, de técnicas y procedimientos ideados para tal fin.
 29
En este sentido, existen propuestas que guían este proceso como marco metodológico
conocido como diseño centrado en el usuario o (DCU), adaptándolo a las características
propias del desarrollo de software.

El diseño centrado en el usuario se caracteriza por asumir que todo el proceso de desarrollo
de un producto de software esté dirigido al usuario, a sus necesidades, características y
objetivos. Centrar el diseño en sus usuarios, contrario a centrarlo en las posibilidades
tecnológicas o en los propios diseñadores, implica involucrarlos desde el comienzo en el
proceso de desarrollo del producto; conocer cómo son, qué necesitan, para qué los usan.
Por otro lado, probar el software con los usuarios finales e investigar cómo reaccionan ante
el diseño, cómo es su experiencia de uso y por último innovar siempre con el propósito de
mejorar la experiencia del usuario.

El diseño centrado en el usuario es considerado ampliamente como la clave para el diseño

y desarrollo de productos y servicios con altas condiciones de usabilidad y satisfacción del
usuario. Enfocándonos al diseño de interfaces de usuario, se centra en objetivos de
usabilidad, características de los usuarios, ambientes, tareas y el flujo de trabajo.

En el proceso de DCU se puede diferenciar entre las siguientes etapas (Norman & Draper):

• Planificación / Investigación: Se define conceptualmente el producto en base a la

investigación de la audiencia objetiva (necesidades, motivaciones, características,
hábitos, modelo mental, actividades y otros) y al análisis competitivo (qué otros
productos existen con audiencias y funciones similares).

• Diseño / Prototipado: Se toman decisiones de diseño partiendo de su dimensión

más general (arquitectura de información y diseño de interacción) hasta su
dimensión más específica (diseño gráfico en detalle y micro-interacciones). Estas
decisiones se documentan y se “prototipan” con objetivos de evaluación.

• Evaluación: Aquellas decisiones de diseño y procesos críticos del producto se

ponen a prueba mediante métodos de evaluación que pueden involucrar a usuarios.
 30
• Implementación: Una vez el diseño ha alcanzado el nivel requerido de calidad, se
procede a su implementación o puesta en producción.

• Monitorización: Una vez lanzado el producto se estudia el uso que hacen de él los
usuarios, con el fin de identificar oportunidades de mejora.

Figura 12. Diagrama del proceso del Diseño Centrado en el Usuario

Fuente: (Norman & Draper):
 31
6 Conclusiones

El uso de los principios fundamentales del diseño y desarrollo centrado en la Experiencia

de Usuario minimiza errores, aumenta la posibilidad del logro del producto, facilita el
proceso de creación del producto y satisface al usuario final. Siempre se puede hacer
mejoras para lograr una fácil interacción entre los usuarios y una aplicación web.

Solamente nos concentrados en los puntos principales de UX, ya que el tema es bastante
grande que contiene muchas disciplinas adicionales que afectan positivamente en la
experiencia del usuario.

Diseñar antes de construir, es la base con la cual ahorramos tiempo, recursos y nos
alejamos de errores.

• La arquitectura de información y la experiencia de usuario los cuales pueden ser

aplicados en el desarrollo de software son dos conceptos interrelacionados entre sí
que, al aplicarlo de forma integrada en el desarrollo de software, garantizan un alto
porcentaje en la usabilidad del producto.
• Un arquitecto de información es fundamental en el proceso de desarrollo de
software, pues evita que se cometan errores de estructura, nomenclatura y
navegación.
• El Diseño Centrado en el Usuario está encaminado a crear interfaces directas,
simples y fáciles de usar, además, innovadoras y placenteras, imponiéndole al
desarrollo de software un nuevo enfoque que implique insertar sus prácticas para
mejorar los productos.
• Se considera al usuario como el elemento fundamental de éxito en el desarrollo de
una aplicación web o cualquier aplicación de software. Solo el uso eficiente, eficaz
y satisfactorio del sistema, justificará la inversión en dinero, tiempo y personal de
desarrollo.

Por lo tanto se concluye que la integración del diseño de experiencia de usuario en el

desarrollo de aplicaciones web genera un impacto positivo en los usuarios.
 32
7 Bibliografía

Canziba, E. (2018). Hands-On UX Design for Developers. Birmingham: Packt Publishing.

Garrett, J. J. (2011). The elements of User Experience. New Riders.

Group, N. N. (2018). User Experience - Our Definition: NNG. Obtenido de

https://www.nngroup.com/articles/definition-user-experience/

Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to web

Usability. San Francisco: New Riders.

Marli Ritter, C. W. (2017). UX for the Web. Birmingham.

Morville, P., & Rosenfeld, L. (1998). Information Architecture for the World Wide Web.

Beijing; Paris; Tokio: Oreilly.

Norman, D. A., & Draper, S. W. (s.f.). User centered system design: New perspectives on

human-computer interaction. Hillsdale, NJ: Lawrence Erlbaum.

Orlova, M. (2016). User Experience design (UX Design) in a website development.

Wikipedia. (2018). Wikipedia. Obtenido de https://www.wikipedia.org

8 Páginas Web

Group, N. N. (2018). User Experience - Our Definition: NNG.

https://www.nngroup.com/articles/definition-user-experience/

ISO 13407:1999. (2018) Human-centred design processes for interactive systems

Disponible en https://www.iso.org/obp/ui/es/#iso:std:iso:9241:-210:ed-1:v1:en