[UOC / USABILITAT] Pac1 - MejiasAlonso Ruben

USABILITAT PAC 1

Conceptes bàsics de DCU D CU 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 aplicacio ns 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 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 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 numerosos enlaces de texto, texto, de esta forma, el el usuario dispone dispone de varios varios caminos para encontrarr la encontra l a 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 navegació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 hoteles con servicios ser vicios determinados, aumentando 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 introduc ir 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)


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


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 l a página principal. Como podemos observar en la la siguientee captura, podemos volver a elegir la zona de la ciudad, los servicios, siguient ser vicios, tipo de establecimiento 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, 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 reducida debido a las pocas po cas opciones que tenemos tenemos para acceder a la información, la cual se presen presenta ta tan sólo de manera gráfica.


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ó información 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 eventos 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).


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


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 iniciado el proceso de búsqueda con los resultados en la pantalla. Los filtros se limitan a localización, loca lización, régimen, 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 información ón dificulta el proceso de selección, ya que necesariamen necesariamente te 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).


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 Imagineu-vos 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 projecte,, els objectius de cada fase, quines tècniques tècniques utilitzaràs en cadascuna de les fases, i el perquè has triat cadascuna de les tècniques.

ESQUEMA DCU


Pàgina

10

Usabilitat - PAC1

Análisis: En esta primera fase, nuestros objetivo debe ser identificar las necesidades que pretendemos cubrir con contexto o de uso en el que éste será nuestro diseño. Para lograrlo, será necesario comprender y especificar el context 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 susceptib susceptibles les de ser cambiadas una vez realizadas las revisione revisioness pertinentes.

Evaluación: iterativo o en el que basar Esta fase es crítica para que nuestro diseño DCU sea efectivo, deberá ser un proceso iterativ 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 introduciendo mejoras en cada iteració iteración n hasta conseguir el resultado satisfactorio, siempre dentro de unos límites lógicos de tiempo y presupuesto.


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 cadasc un d’ells. d’ells. Según Norman (2005), el ser humano procesa la toma de sus decisiones en base a tres tipos de funcionamiento: visceral, conductual y reflexivo. Gracias a estas tres catego categorías rías podemos valorar la l a 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 totalment totalmentee sensorial y depende absolutamente absolutamente de cada individuo 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 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 persona es única y como como tal cada una valorará valorará de manera diferente diferente nuestr nuestros os 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 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 proble mas de accesibilidad o de orientación y que le haya aportado a sus experiencia de uso algún tipo de valor añadido. 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 sobre algo nuevo que no comprendemos y que requiere de un análisis previo.


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-hoteles > Página web www.solosequenosenada.com. [en línea]. 2 de Octubre de 2017. < http://www.solosequenosenada.com/misc/comparativa-webs-viajes/index.php >


Pàgina

13

[UOC / USABILITAT] Pac1 - MejiasAlonso Ruben

Recommend Documents