USABILITAT

PAC 1

Conceptes bàsics de DCU i Usabilitat

Rubén Mejias Alonso

(CC BY-NC-SA 2.0)

Usabilitat - PAC1

Pregunta 1

En base al principi bàsic d’usabilitat de Control busca 3 exemples de pàgina web i/o d’aplicació mòbil
que compleixin amb aquest principi, i 3 exemples de pàgines webs i/o aplicacions mòbils que no el
compleixin.

Per introduir el tema que treballarem durant el curs, els exemples els haureu de trobar en pàgines i/o
aplicacions mòbils de reserva d’hotels.

És necessari que acompanyeu amb alguna imatge o captura de pantalla cada un dels exemples i feu una
explicació de perquè el compleix o no el compleix.

Páginas que cumplen con el principio de control

Booking
www.booking.com

Booking es probablemente el mejor y más famoso buscador de hoteles, y no lo es por casualidad. El diseño
de la página es limpio y claro, ofrece una navegación muy intuitiva y las interacciones se realizan de manera
rápida con unos tiempos de espera mínimos al cargar.

En general, la sensación de control sobre las interacciones que llevamos a cabo es elevada y predecible desde
la misma página de inicio. La web nos ofrece la información de diferentes maneras, utiliza el clásico sistema
con cuadro de búsqueda típico de este tipo de servicios, también ofrece información en forma visual con
vínculos gráficos y numerosos enlaces de texto, de esta forma, el usuario dispone de varios caminos para
encontrar la información (fig.1).

Fig. 1

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 2

Usabilitat - PAC1

En todo momento, una barra de breadcums (Fig.2) nos ayuda a situarnos y orientarnos durante la navega-
ción por las diferentes páginas de la web y nos ofrece rutas alternativas para navegar.

Fig. 2

Además la web es muy rica en menús contextuales (Fig.3) que describen a la perfección la funcionalidad y
predictibilidad de cada botón o icono. Por ejemplo, al pasar el puntero por encima de los comentarios, se
despliega la información de manera gráfica o cuando pasamos por encima de elementos con información.

Fig. 3

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 3

Usabilitat - PAC1

Destinia
www.destinia.com

Igual que su competidor Booking, Destinia ofrece al usuario el acceso a la información de diferentes
maneras, con vínculos gráficos, enlaces de texto... Una de las opciones más potentes para encontrar
exactamente lo que deseamos desde el principio, son las opciones avanzadas (Fig. 4) de búsqueda que hay en
el cuadro de búsqueda principal. Con ellas podemos utilizar diferentes filtros y combinarlos con nuestra
búsqueda para encontrar hoteles con servicios determinados, aumentando la productividad y efectividad de
nuestras búsquedas desde el mismo inicio.

Fig. 4
Por otro lado, ofrece la posibilidad de realizar búsquedas temáticas apoyadas con vínculos gráficos, como por
ejemplo eventos deportivos y ofertas de todo tipo, todo bien amenizado con un diseño muy limpio y rico.
Además, igual que Booking, ofrece mucha información contextual en aquellas funciones ocultas o botones
importantes, lo cual ayuda notablemente en la toma de decisiones. Cabe destacar, que en el momento de
introducir los datos en los pasos necesarios para efectuar una reserva, siempre podemos editar cada paso
(Fig. 5) o podemos volver atrás una vez introducidos todos los datos (Fig.6)

Fig. 5

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 4

Usabilitat - PAC1

Fig. 6

Expedia
www.expedia.es

La página web de Expedia nos ofrece en su cuadro de búsqueda principal un recurso muy útil para ahorrar
tiempo y aumentar notablemente nuestra eficacia para encontrar lo que deseamos. Tan sólo hace falta
introducir los primeros dígitos de la ciudad dónde queremos ir y el algoritmo hace el resto, nos ofrece la
posibilidad de acotar la búsqueda desde ese preciso momento, permitiendo elegir el lugar de la ciudad que
más se acerque a nuestros intereses (Fig. 7).

Fig. 7

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 5

Usabilitat - PAC1

Por otro lado, una vez seleccionado el destino y cuando ya se muestran los resultados, podemos modificar
todos los criterios de búsqueda sin necesidad de volver a la página principal. Como podemos observar en la
siguiente captura, podemos volver a elegir la zona de la ciudad, los servicios, tipo de establecimiento y
filtrado por valoración (Fig. 8).

Fig. 8

Páginas que NO cumplen con el principio de control

Hoteles.com
www.es.hoteles.com

Como se puede observar a simple vista el cuadro de búsqueda principal es bastante pobre, tan solo nos
permite elegir el destino, las fechas y el número de habitaciones (Fig. 9). La información contextual es
bastante reducida debido a las pocas opciones que tenemos para acceder a la información, la cual se presenta
tan sólo de manera gráfica.

Fig. 9

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 6

Usabilitat - PAC1

Debido a este diseño algo austero, el usuario no dispone de muchas opciones a la hora de emprender sus
acciones, que se reducen a las opciones del cuadro de búsqueda y la información gráfica que agrupa las pocas
secciones temáticas. Además, estas secciones con destinos recomendados se limitan a ofrecer lo mismo que
podemos encontrar usando el cuadro de búsqueda, es decir, agrupar la información únicamente por destino,
a diferencia de Destinia que como comentábamos anteriormente, ofrecía todo tipo de temáticas como even-
tos deportivos.

Además, la página agrupa en un solo paso todos los campos para efectuar la reserva, tanto los campos con
datos personales, como los campos relacionados con el pago. Este hecho hace que si nos equivocamos en una
sección tengamos que volver a reescribirlo todo, ya que si volvemos atrás volveremos al momento anterior de
la reserva perdiendo los datos (Fig. 10 y Fig.11).

Fig. 10 Fig. 11

Viajar.com
www.viajar.com

Posiblemente es la peor página de todo el análisis, tanto en diseño visual como en usabilidad. El tamaño y
fuente del texto son inadecuados para muchos usuarios, los colores utilizados en los menús de navegación
principal, los cuales son del mismo color azul que un enlace común, dificultan la comprensión (Fig. 12).

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 7

Usabilitat - PAC1

Fig. 12

El cuadro de búsqueda principal se reduce tan solo a una cajetilla para introducir el destino, elegir las fechas
y el aeropuerto de orígen. No podemos filtrar la búsqueda de ninguna manera desde el cuadro principal,
reduciendo al mínimo las opciones del usuario de encontrar la información siguiendo otro camino, además,
la información se presenta de manera caótica y mal agrupada. (Fig. 13).

Fig. 13

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 8

Usabilitat - PAC1

mevoyya.com
www.mevoyya.com

La página web de mevoyya tiene numeroso inconvenientes a la hora de trasmitir sensación de control al
usuario. Uno de los más importantes es la falta de filtros avanzados, ni en el cuadro principal ni una vez ini-
ciado el proceso de búsqueda con los resultados en la pantalla. Los filtros se limitan a localización, régimen,
nombre, distancia o precio. No podemos filtrar por servicios como por ejemplo: Wi-Fi, gimnasio, parking,
mascotas... Esta forma de presentar la información dificulta el proceso de selección, ya que necesariamente
hemos de entrar en el hotel deseado para ver que servicios ofrece, forzando al usuario a seguir un camino
determinado (Fig.14).

Fig. 14

Por último, decir que una vez comenzado el proceso de reserva, no nos permite regresar para efectuar ningún
cambio mediante las opciones de la web, no hay breadcumbs ni botones para retroceder, siempre tenemos
que recurrir al navegador para deshacer los cambios, perdiendo toda la información introducida (Fig. 15).

Fig. 15

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 9

Usabilitat - PAC1

Pregunta 2
Imagineu-vos que una nova startup de reserva d’hotels us encarrega el projecte de definir y dissenyar
el seu web, amb un èmfasi especial en l’experiència d’usuari. La plana web ha de permetre, entre
altres coses:

1. Cercar un hotel per ubicació, per dates, per tipologia d’hotel, etc.
2. Poder filtrar resultats
3. Consultar el detall d’un hotel i les habitacions
4. Realitzar la reserva
5. Realitzar el pagament

Treball a realitzar:

• Elaborar un quadre resum o esquema detallat que descrigui com realitzaries el projecte de creació del web
seguint la perspectiva del disseny centrat en l’usuari.

• Descriure quines seran les fases del projecte, els objectius de cada fase, quines tècniques utilitzaràs en
cadascuna de les fases, i el perquè has triat cadascuna de les tècniques.

ESQUEMA DCU

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 10

Usabilitat - PAC1

Análisis:

En esta primera fase, nuestros objetivo debe ser identificar las necesidades que pretendemos cubrir con
nuestro diseño. Para lograrlo, será necesario comprender y especificar el contexto de uso en el que éste será
implementado. Necesitamos recopilar información sobre las características de nuestros potenciales
usuarios, las tareas que hay que desarrollar (en nuestro caso las propuestas por el enunciado de la actividad)
y el entorno donde se utilizará. Es extremadamente importante tratar de comprender el contexto, tanto el
entorno físico como el entorno social donde se desarrollarán las actividades.

Requisitos:

Deberemos especificar además de los típicos requisitos técnicos, los requisitos de usuario y aquellos relativos
a la organización del proyecto. Hay que dejar claros estos requisitos para lograr los objetivos.

Diseño:

En esta fase y en base a nuestro análisis y requisitos especificados anteriormente, trataremos de dar con
soluciones de diseño que satisfagan dichos objetivos y requisitos. Nuestros diseños han adaptarse a los
requisitos de la empresa, satisfacer al usuario, deberán ser coherentes gráfica e interactivamente, con una
interacción ente los elementos predecible, visible y reversible, además ha de ser capaz de transmitir sensación
de control sobre las acciones que el usuario este llevando a cabo.

Prototipado:

En función del tipo de prototipo que busquemos, podemos utilizar diferentes soluciones de diseño como
Mock-Ups o Wireframes para lograr nuestro objetivo. La fidelidad de nuestros prototipos puede variar,
podemos diseñar prototipos de alta fidelidad para aquellas páginas que sean más representativas. Por otro
lado, utilizaremos prototipos de baja fidelidad para aquellas páginas que sean más susceptibles de ser
cambiadas una vez realizadas las revisiones pertinentes.

Evaluación:

Esta fase es crítica para que nuestro diseño DCU sea efectivo, deberá ser un proceso iterativo en el que basar
nuestras mejoras y cambios. Podemos utilizar diferentes herramientas para obtener nuestro Feedback. Para
obtenerlo haremos pruebas tanto con usuarios reales (test de usuarios) como no reales (evaluación
heurística), además, evaluaremos todos los objetivos especificados y los escenarios utilizados.

Una vez realizado el proceso iterativo, deberá quedar claro si hemos cumplido con los objetivos marcados en
cada fase marcada. Si no lo hemos logrado, será necesario ir introduciendo mejoras en cada iteración hasta
conseguir el resultado satisfactorio, siempre dentro de unos límites lógicos de tiempo y presupuesto.

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 11

Usabilitat - PAC1

Pregunta 3
Explica amb les teves paraules els tres tipus de nivells de processament de les decisions de l’ésser humà. Posa
un exemple de producte per a cada nivell i descriu perquè creus que correspon amb
cadascun d’ells.

Según Norman (2005), el ser humano procesa la toma de sus decisiones en base a tres tipos de funcionamien-
to: visceral, conductual y reflexivo. Gracias a estas tres categorías podemos valorar la toma de decisión de los
usuarios a la hora de utilizar nuestros diseños.

Visceral

Se trata de aquellas reacciones y sensaciones que tenemos por instinto y que provienen de lo más profundo
de cada uno de nosotros. Es totalmente sensorial y depende absolutamente de cada individuo, ya que todos
somos diferentes y tenemos una percepción propia del mundo. Podemos decir, que de los tres niveles este es
el más primitivo ya que el instinto, el afecto o nuestra parte emocional son los encargados de transmitirnos la
realidad que percibimos.

Un posible ejemplo sería contemplar una catástrofe o un accidente, cada persona reacciona de una manera
diferente, hay quien presta ayuda sin pensar en su propio bien, otros huyen del lugar, hay quien aprovecha
para robar, otros se quedan totalmente paralizados por el miedo…

Conductual

Este nivel de procesamiento en la toma de decisiones se basa en la experiencia de uso que tenemos al hacer
cosas y la satisfacción que estas provocan en nosotros al hacerlas. Como comentaba anteriormente en el nivel
visceral, cada persona es única y como tal cada una valorará de manera diferente nuestros diseños, pero para
lograr intentar satisfacer a la mayor parte de usuarios potenciales, nuestros diseños o productos han de
cumplir ciertas características. Éstos han de resultar para los usuarios: útiles, usables, deseables, encontrables,
accesibles, creíbles y valiosos.

Un ejemplo sería la satisfacción y placer que un usuario cualquiera experimenta al utilizar una aplicación o
página web, la cual le haya permitido lograr sus objetivos en poco tiempo, de manera sencilla, cómoda, sin
problemas de accesibilidad o de orientación y que le haya aportado a sus experiencia de uso algún tipo de
valor añadido.

Reflexivo

Este nivel afecta a la comprensión y entendimiento, profundizando en los aspectos más personales o íntimos
de las personas. Este nivel, sea quizás el más difícil de analizar debido a la naturaleza humana: las
experiencias propias de cada uno, aquello que nos transmitió en un momento dado alegría o tristeza, los
recuerdos positivos o negativos… En este sentido encontramos similitudes con el nivel visceral pero aquí
partimos de la experiencia en la toma de decisión, utilizándola para reflexionar sobre algo nuevo que no
comprendemos y que requiere de un análisis previo.

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 12

Usabilitat - PAC1

Un ejemplo sería cuando nos hacemos un corte, primero valoraríamos si es un corte suficientemente serio
como para acudir a un centro hospitalario o, si por el contrario, podemos curarlo nosotros mismos, después
repasaremos mentalmente todo lo que conocemos y recordamos sobre medicina, recopilaremos toda la
información que recordemos para la curar un corte (tiritas, agua oxigenada, etc.) y realizaremos todos los
pasos que según nuestra experiencia son necesarios.

Bibliografía y recursos web

Sergio, Ortega Santamaría. Introducción a la usabilidad y su evaluación. Barcelona. Material docente de la
UOC.

Página web www.hoteljuice.com. [en línea]. 3 de Octubre de 2017.

< http://www.hoteljuice.com/marketing-online-hoteles/el-diseno-y-la-usabilidad-de-los-sitios-web-de-hote-
les >

Página web www.solosequenosenada.com. [en línea]. 2 de Octubre de 2017.

< http://www.solosequenosenada.com/misc/comparativa-webs-viajes/index.php >

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 13